Browse Source

vue 1.0.1

StephenArk30 6 years ago
parent
commit
943fbf99a7

+ 0 - 0
sourcecode/h5app/vue/src/assets/present_card_bottom.png → sourcecode/h5app/vue/src/assets/gift_card_background.png


+ 7 - 3
sourcecode/h5app/vue/src/components/IndexPresent.vue

@@ -4,7 +4,8 @@
                 :thumb="presentImg"
         >
             <div slot="title" style="position: absolute; text-align: left; top: 0;">
-                <p>{{presentDesc}}</p>
+                <p style="margin: 10px 0 0"><strong>{{presentName}}</strong></p>
+                <p style="margin-top: 5px">{{presentDesc}}</p>
             </div>
             <div slot="tags" style="position: absolute; bottom: 0; text-align: left">
                 <p>{{publishTime}}</p>
@@ -31,9 +32,13 @@
         },
         props: {
             presentImg: {
-                type: Object,
+                type: String,
                 default: require('../assets/image_load_fail.jpg')
             },
+            presentName: {
+                type: String,
+                default: '礼物名称'
+            },
             presentDesc: {
                 type: String,
                 default: '礼物描述'
@@ -60,5 +65,4 @@
     div {
         background-color: #fff6e3;
     }
-
 </style>

+ 6 - 1
sourcecode/h5app/vue/src/components/giftCard.vue

@@ -33,6 +33,7 @@
                 </van-row>
             </van-col>
         </van-row>
+        <p style="text-align: left; font-size: 110%"><strong>{{presentName}}</strong></p>
         <p style="text-align: left">{{presentDesc}}</p>
     </div>
 </template>
@@ -55,9 +56,13 @@
         },
         props: {
             presentImg: {
-                type: Object,
+                type: String,
                 default: require('../assets/image_load_fail.jpg')
             },
+            presentName: {
+                type: String,
+                default: "礼物名称"
+            },
             presentDesc: {
                 type: String,
                 default: '这是一本我很喜欢的书,我曾经把这本书反反复复看了三遍,真的非常推荐。如果你也是科幻迷,你肯定会喜欢哒。圣诞快乐,喜欢这本书可以和我一起讨论哦!'

+ 45 - 13
sourcecode/h5app/vue/src/views/PresentRegister.vue

@@ -7,7 +7,15 @@
                 <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
                 <van-radio name="1" checked-color="#fd6740">女</van-radio>
             </van-radio-group>
-
+            <p>礼物名称</p>
+            <van-field
+                    placeholder="给你的礼物起个名字吧"
+                    v-model="presentName"
+                    :error="pnError"
+                    @click="pnError=false"
+                    required
+                    maxlength="10"
+            />
             <p>我的礼物丨走心介绍</p>
             <van-cell-group>
                 <van-field
@@ -16,6 +24,10 @@
                         rows="5"
                         autosize
                         v-model="desc"
+                        :error="descError"
+                        @click="descError=false"
+                        required
+                        maxlength="300"
                 />
             </van-cell-group>
 
@@ -24,9 +36,9 @@
                 <van-checkbox-group v-model="result">
                     <van-checkbox
                             v-for="(item, index) in tags"
-                            :key="item"
-                            :name="item"
-                            :style="(index+1) % 4 == 0 ? br : nobr"
+                            :key="index"
+                            :name="index"
+                            :style="(index+1) % 4 === 0 ? br : nobr"
                     >{{ item }}</van-checkbox>
                 </van-checkbox-group>
             </div>
@@ -34,7 +46,7 @@
         </div>
         <div class="card">
             <p>上传礼物照片</p>
-            <add-photo @upload-photo="onRead"/>
+            <add-photo @uploadPhoto="onReadPhoto"/>
         </div>
         <van-button size="large" type="primary" @click="publishPresent">下一步</van-button>
 
@@ -48,7 +60,8 @@
         RadioGroup, Radio,
         CheckboxGroup, Checkbox,
         Picker,
-        Button
+        Button,
+        Toast
     } from 'vant'
     import AddPhoto from "../components/addPhoto";
     export default {
@@ -65,29 +78,47 @@
         data() {
             return {
                 radio: '0',
+                presentName: '',
+                pnError: false,
                 desc: '',
+                descError: false,
                 tags: [
                     "情怀","复古", "有趣", "学霸",  "实用",
                     "同年", "吃货", "佛系",  "土味", "活力",
                     "洋气", "精致",  "轻奢",  "其它",
                 ],
                 result: [],
+                photo: null,
                 nobr: "float: left; margin-right: 5px",
                 br: ""
             }
         },
-        props: {
-            photo: {
-                type: Object,
-                default: null
-            }
-        },
         methods: {
             publishPresent() {
+                // 检验输入
+                if (this.presentName.length === 0) {
+                    this.pnError = true;
+                    return;
+                } else if (this.desc.length <= 15) {
+                    this.descError = true;
+                    Toast.fail('请输入至少15个字的礼物介绍');
+                    return;
+                } else if (this.photo === null) {
+                    Toast.fail('请上传礼物照片');
+                    return;
+                }
                 // post_present()
+                let present = {
+                    name: this.presentName,
+                    gender: parseInt(this.radio),
+                    desc: this.desc,
+                    tags: this.result,
+                    photo: this.photo
+                };
+                console.log(present);
                 this.$router.push('index');
             },
-            onRead(file) {
+            onReadPhoto(file) {
                 this.photo = file;
             }
         },
@@ -96,6 +127,7 @@
                 let present = this.$route.query.present;
                 console.log(present);
                 this.radio = present.gender.toString();
+                this.presentName = present.presentName;
                 this.desc = present.presentDesc;
             }
         }

+ 25 - 1
sourcecode/h5app/vue/src/views/SecurityVerify.vue

@@ -24,6 +24,16 @@
                     <van-button slot="button" size="small" type="primary">发送验证码</van-button>
                 </van-field>
                 <van-field
+                        v-model="wechat"
+                        required
+                        clearable
+                        label="微信"
+                        placeholder="请输入微信号"
+                        maxlength="20"
+                        :error="wechatError"
+                        @click="wechatError=false"
+                />
+                <van-field
                         v-model="password"
                         required
                         clearable
@@ -110,6 +120,8 @@
                 phone: '',
                 phoneError: false,
                 sms: '',
+                wechat: '',
+                wechatError: false,
                 password: '',
                 passError: false,
                 passverify: '',
@@ -135,6 +147,10 @@
                 if (this.phone.length !== 11) {
                     this.phoneError = true;
                     return;
+                } else if (this.wechat.length < 6) {
+                    this.wechatError = true;
+                    Toast.fail('请输入最少6位微信号');
+                    return;
                 } else if (this.password.length < 8) {
                     this.passError = true;
                     return;
@@ -151,8 +167,16 @@
                     Toast.fail('请上传校卡正面照片');
                     return;
                 }
+                let user = {
+                    phone: this.phone,
+                    password: this.password,
+                    nickname: this.username,
+                    gender: parseInt(this.radio),
+                    dormitory: this.dorId,
+                    photo: this.photo
+                };
+                console.log(user);
                 this.$router.push('presentRegister');
-                // this.$router.push('index');
             },
             onReadPhoto(file) {
                 this.photo = file;

+ 29 - 7
sourcecode/h5app/vue/src/views/giftDetail.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <h1>{{presentId}}</h1>
         <gift-card
-                v-if="myPresent.status==2"
+                v-if="myPresent.status===2"
+                :present-name="recievedPresent.presentName"
                 :present-desc="recievedPresent.presentDesc"
                 :owner="recievedPresent.owner"
                 :placeId="recievedPresent.placeId"
@@ -10,7 +10,12 @@
                 :status="recievedPresent.status"
                 :wechat="recievedPresent.wechat"
         />
+        <div class="letter" v-if="recievedPresent.comment.length !== 0">
+            <p style="font-size: 110%"><strong>我送出的感谢信</strong></p>
+            <p>{{recievedPresent.comment}}</p>
+        </div>
         <gift-card
+                :present-name="myPresent.presentName"
                 :present-desc="myPresent.presentDesc"
                 :owner="myPresent.owner"
                 :placeId="myPresent.placeId"
@@ -18,8 +23,15 @@
                 :status="myPresent.status"
                 :wechat="myPresent.wechat"
         />
+        <div class="letter" v-if="myPresent.comment.length !== 0">
+            <p style="font-size: 110%"><strong>我收到的感谢信</strong></p>
+            <p>{{myPresent.comment}}</p>
+        </div>
+        <img src="../assets/gift_card_background.png"
+             style="position: fixed; bottom: 100px; max-width: 100%; z-index: -1"
+        />
         <div
-                v-if="myPresent.status==2"
+                v-if="myPresent.status===2"
                 style="position: fixed; bottom: 0; width: 100%"
         >
             <van-button
@@ -29,7 +41,7 @@
             <p>交换成功可以开始接收对方发来的感谢信哦</p>
         </div>
         <div
-                v-if="myPresent.status!=2"
+                v-if="myPresent.status!==2"
                 style="position: fixed; bottom: 0; width: 100%"
         >
             <van-button
@@ -64,23 +76,27 @@
             myPresent: function () {
                 // return get_present(presentId)
                 return {
+                    presentName: '一本神秘的书',
                     presentDesc: "description",
                     owner: 0,
                     placeId: 1,
                     gender: 0,
                     status: 1,
-                    wechat: 'wechat_id'
+                    wechat: 'wechat_id',
+                    comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.'
                 }
             },
             recievedPresent: function () {
                 // return get_present(get_sender(presentId))
                 return {
+                    presentName: '一本不神秘的书',
                     presentDesc: "description",
                     owner: 1,
                     placeId: 3,
                     gender: 1,
                     status: 2,
-                    wechat: 'wechat_id'
+                    wechat: 'wechat_id',
+                    comment: ''
                 }
             }
         },
@@ -110,5 +126,11 @@
 </script>
 
 <style scoped>
-
+    .letter {
+        background-color: white;
+        margin: 20px 20px;
+        border: solid 1px #e4e4e4;
+        padding: 0 15px;
+        text-align: left;
+    }
 </style>

+ 11 - 4
sourcecode/h5app/vue/src/views/index.vue

@@ -3,12 +3,12 @@
         <div style="position: relative;">
             <img :src="indexTop" style="max-width: 100%; position: relative;"/>
         </div>
-        <van-row type="flex" justify="space-between" align="center">
+        <van-row type="flex" justify="space-between" align="center" style="margin: 0 10px 0 15px">
             <van-col>
                 <p><strong>我的礼物</strong></p>
             </van-col>
             <van-col>
-                <van-button round type="primary" size="small" @click="toShare">邀请好友</van-button>
+                <van-button round type="primary" size="small" @click="toShare">邀请好友赢大奖</van-button>
             </van-col>
         </van-row>
 
@@ -17,12 +17,17 @@
                     is="index-present"
                     v-for="(present, index) in presents"
                     :key="present.id"
+                    :present-name="present.presentName"
                     :present-desc="present.desc"
                     :publish-time="present.time"
                     :status="present.status"
                     @to-detail="toDetail(index)"
             ></li>
         </ul>
+        <div style="margin: 50px 10px;">
+            <p style="text-align: left; margin-left: 5px"><strong>简单四步,轻松互赠圣诞礼物</strong></p>
+            <img src="../assets/declare_icons/declare.jpg"/>
+        </div>
         <add-present-button :can_add="button_active"/>
     </div>
 </template>
@@ -44,7 +49,7 @@
             return {
                 active: 0,
                 indexTop: require('../assets/banner.png'),
-                button_active: false,
+                button_active: true,
             }
         },
         computed: {
@@ -53,13 +58,15 @@
                 return [
                     {
                         id: 0,
+                        presentName: '礼物1',
                         desc: '描述1blabla',
                         time: '2018-01-02',
                         status: 1
                     },
                     {
                         id: 1,
-                        desc: '描述2blabla',
+                        presentName: '礼物2',
+                        desc: '描述2blabla啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊(max45)',
                         time: '2018-11-02',
                         status: 2
                     }

+ 8 - 8
sourcecode/h5app/vue/src/views/login.vue

@@ -78,14 +78,14 @@
 
                 let API = "http://south.niimei.com:8866/server";
                 let GETUSERINFO = "/smartUsers/list";
-                this.$http.get(API+GETUSERINFO).then((data) => {
-                    // 响应成功回调
-                    console.log(data);
-                }, (err) => {
-                    // 响应错误回调
-                    console.log(err);
-                    console.log(this);
-                });
+                // this.$http.get(API+GETUSERINFO).then((data) => {
+                //     // 响应成功回调
+                //     console.log(data);
+                // }, (err) => {
+                //     // 响应错误回调
+                //     console.log(err);
+                //     console.log(this);
+                // });
                 // let login_info = {
                 //     phone: this.phone,
                 //     pass: this.password