views complete

sourcecode/h5app/vue/src/components/IndexPresent.vue

@@ -25,8 +25,8 @@
         },
         data() {
             return {
-                statusString: ['审核中', '匹配中', '匹配成功'],
-                statusColor: ['#f43736', '#00ff00', '#00bfff']
+                statusString: ['审核中', '匹配中', '匹配成功', '交换成功', '审核失败'],
+                statusColor: ['#f43736', '#00ff00', '#00bfff', '#00fa9a', 'ff0000']
             }
         },
         props: {

sourcecode/h5app/vue/src/components/addPhoto.vue

@@ -20,15 +20,20 @@
         },
         data() {
             return {
-                photopath: '',
                 uploaded: false
             }
         },
+        props: {
+            photopath: {
+                type: String,
+                default: ''
+            },
+        },
         methods: {
             onRead(file) {
                 this.photopath = file.content;
                 this.uploaded = true;
-                this.$emit('uploadPhoto', file.content);
+                this.$emit('uploadPhoto', this.photopath);
             }
         }
     }

sourcecode/h5app/vue/src/components/giftCard.vue

@@ -1,94 +1,111 @@
-<template>
-    <div class="gift_card">
-        <van-row
-                style="border-bottom: solid 1px #e4e4e4; padding:5px"
-        >
-            <van-col span="8">
-                <img :src="presentImg" style="max-width: 100%"/>
-            </van-col>
-            <van-col span="16">
-                <van-row type="flex" justify="space-between">
-                    <van-col class="c"><p><strong>{{owner}}的礼物</strong></p></van-col>
-                    <van-col class="c"><p>{{place[placeId]}}</p></van-col>
-                </van-row>
-                <van-row type="flex" justify="space-between">
-                    <van-col class="c"><p>匹配性别</p></van-col>
-                    <van-col class="c"><p>{{gender ? '女' : '男'}}</p></van-col>
-                </van-row>
-                <van-row type="flex" justify="space-between">
-                    <van-col class="c"><p>礼物状态</p></van-col>
-                    <van-col class="c" ><p :style="{ color: statusColor[status] }">{{statusString[status]}}</p></van-col>
-                </van-row>
-                <van-row type="flex" justify="space-between">
-                    <van-col class="c"><p>微信</p></van-col>
-                    <van-col class="c"><p>{{wechat}}</p></van-col>
-                </van-row>
-            </van-col>
-        </van-row>
-        <p style="text-align: left">{{presentDesc}}</p>
-    </div>
-</template>
-
-<script>
-    import { Card, Row, Col } from 'vant';
-    export default {
-        name: "giftCard",
-        components: {
-            [Card.name]: Card,
-            [Row.name]: Row, [Col.name]: Col
-        },
-        data() {
-            return {
-                place: ['南区', '斋区', '西南', '西丽'],
-                statusString: ['审核中', '匹配中', '匹配成功'],
-                statusColor: ['#f43736', '#00ff00', '#00bfff']
-            }
-        },
-        props: {
-            presentImg: {
-                type: Object,
-                default: require('../assets/image_load_fail.jpg')
-            },
-            presentDesc: {
-                type: String,
-                default: '这是一本我很喜欢的书，我曾经把这本书反反复复看了三遍，真的非常推荐。如果你也是科幻迷，你肯定会喜欢哒。圣诞快乐，喜欢这本书可以和我一起讨论哦！'
-            },
-            owner: {
-                type: Number,
-                default: 0 // 0: 我的; 1: 对方的
-            },
-            placeId: {
-                type: Number,
-                default: 0
-            },
-            gender: {
-                type: Number,
-                default: 0
-            },
-            status: {
-                type: Number,
-                default: 0
-            },
-            wechat: {
-                type: String,
-                default: 'undefined id'
-            }
-        },
-    }
-</script>
-
-<style scoped>
-    .c {
-        height: 25px;
-        margin-left: 10px;
-        margin-right: 5px;
-    }
-    p {
-        margin: 0;
-    }
-    .gift_card {
-        margin: 20px 20px;
-        background-color: white;
-        padding: 10px;
-    }
+<template>
+    <div class="gift_card">
+        <van-row
+                style="border-bottom: solid 1px #e4e4e4; padding:5px"
+        >
+            <van-col span="8">
+                <img :src="presentImg" style="max-width: 100%"/>
+            </van-col>
+            <van-col span="16">
+                <van-row type="flex" justify="space-between">
+                    <van-col class="c"><p><strong>{{owner ? '对方' : '我'}}的礼物</strong></p></van-col>
+                    <van-col class="c"><p>{{place[placeId]}}</p></van-col>
+                </van-row>
+                <van-row type="flex" justify="space-between">
+                    <van-col class="c"><p>匹配性别</p></van-col>
+                    <van-col class="c"><p>{{gender ? '女' : '男'}}</p></van-col>
+                </van-row>
+                <van-row type="flex" justify="space-between">
+                    <van-col class="c"><p>礼物状态</p></van-col>
+                    <van-col class="c" ><p :style="{ color: statusColor[status] }">{{statusString[status]}}</p></van-col>
+                </van-row>
+                <van-row type="flex" justify="space-between">
+                    <van-col class="c"><p>微信</p></van-col>
+                    <van-col class="c">
+                            <p style="float: left">{{wechat}}</p>
+                            <van-button round size="mini"
+                                        v-if="owner" style="margin-left: 5px"
+                                        v-clipboard:copy="wechat"
+                                        v-clipboard:success="onCopy"
+                                        v-clipboard:error="onError"
+                            >复制</van-button>
+                    </van-col>
+                </van-row>
+            </van-col>
+        </van-row>
+        <p style="text-align: left">{{presentDesc}}</p>
+    </div>
+</template>
+
+<script>
+    import { Card, Row, Col, Button } from 'vant';
+    export default {
+        name: "giftCard",
+        components: {
+            [Card.name]: Card,
+            [Row.name]: Row, [Col.name]: Col,
+            [Button.name]: Button,
+        },
+        data() {
+            return {
+                place: ['南区', '斋区', '西南', '西丽'],
+                statusString: ['审核中', '匹配中', '匹配成功', '交换成功', '审核失败'],
+                statusColor: ['#f43736', '#00ff00', '#00bfff', '#00fa9a', '#ff0000']
+            }
+        },
+        props: {
+            presentImg: {
+                type: Object,
+                default: require('../assets/image_load_fail.jpg')
+            },
+            presentDesc: {
+                type: String,
+                default: '这是一本我很喜欢的书，我曾经把这本书反反复复看了三遍，真的非常推荐。如果你也是科幻迷，你肯定会喜欢哒。圣诞快乐，喜欢这本书可以和我一起讨论哦！'
+            },
+            owner: {
+                type: Number,
+                default: 0 // 0: 我的; 1: 对方的
+            },
+            placeId: {
+                type: Number,
+                default: 0
+            },
+            gender: {
+                type: Number,
+                default: 0
+            },
+            status: {
+                type: Number,
+                default: 0
+            },
+            wechat: {
+                type: String,
+                default: 'undefined id'
+            }
+        },
+        methods: {
+            onCopy: function (e) {
+                alert('You just copied: ' + e.text)
+            },
+            onError: function (e) {
+                alert('Failed to copy texts')
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .c {
+        height: 25px;
+        margin-left: 10px;
+        margin-right: 5px;
+    }
+    p {
+        margin: 0;
+    }
+    .gift_card {
+        margin: 20px 20px;
+        background-color: white;
+        padding: 10px;
+    }
 </style>

sourcecode/h5app/vue/src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import { router } from './router';
+import VueClipboard from 'vue-clipboard2'
 
 Vue.config.productionTip = false;
+Vue.use(VueClipboard);
 
 new Vue({
     router,

sourcecode/h5app/vue/src/views/PresentRegister.vue

@@ -1,63 +1,43 @@
 <template>
     <div>
-        <div class='title'>
-            <h1>圣诞礼物趴 | 礼物登记</h1>
-        </div>
-
-        <div >
-            <div>
-                <h2>01 礼物 | 一句话介绍</h2>
-                <input placeholder='一句话介绍一下你的礼物'/>
-
-                <h2>02 宿舍楼</h2>
-                <select>
-                    <option>丹枫轩</option>
-                    <option>木犀轩</option>
-                    <option>乔梧</option>
-                    <option>乔相</option>
-                    <option>春笛</option>
-                    <option>夏筝</option>
-                    <option>秋瑟</option>
-                    <option>冬筑</option>
-                </select>
-
-                <h2>03 性别</h2>
-                <label><input type='radio' name='sex' checked='true' class='radio'/>男</label>
-                <label><input type='radio' name='sex' class='radio'/>女</label>
-
-                <h2>04 你希望礼物交换者的性别（会作为匹配参考）</h2>
-                <label><input type='radio' name='reciever_sex' checked='true' class='radio'/>男</label>
-                <label><input type='radio' name='reciever_sex' class='radio'/>女</label>
+        <div class='card'>
+            <h3><strong>礼物匹配</strong></h3>
+            <p>希望对方的性别是</p>
+            <van-radio-group v-model="radio">
+                <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>
 
-                <h2>05 你的礼物标签</h2>
-                <div>
-                    <label><input type='checkbox' name='tag[]'/>情怀</label>
-                    <label><input type='checkbox' name='tag[]'/>有趣</label>
-                    <label><input type='checkbox' name='tag[]'/>Q萌</label>
-                    <label><input type='checkbox' name='tag[]'/>学霸</label>
-                </div><br/>
-                <div>
-                    <label><input type='checkbox' name='tag[]'/>实用</label>
-                    <label><input type='checkbox' name='tag[]'/>同年</label>
-                    <label><input type='checkbox' name='tag[]'/>吃货</label>
-                    <label><input type='checkbox' name='tag[]'/>佛系</label>
-                </div><br/>
-                <div>
-                    <label><input type='checkbox' name='tag[]'/>土味</label>
-                    <label><input type='checkbox' name='tag[]'/>活力</label>
-                    <label><input type='checkbox' name='tag[]'/>洋气</label>
-                    <label><input type='checkbox' name='tag[]'/>精致</label>
-                </div><br/>
-                <label><input type='checkbox' name='tag[]'/>轻奢</label>
-                <label><input type='checkbox' name='tag[]'/>自定义</label>
+            <p>我的礼物丨走心介绍</p>
+            <van-cell-group>
+                <van-field
+                        type="textarea"
+                        placeholder="请在此输入你的礼物介绍和礼物故事"
+                        rows="5"
+                        autosize
+                        v-model="desc"
+                />
+            </van-cell-group>
 
-                <h2>06 上传礼物照片</h2>
-                <add-photo @upload-photo="onRead"/>
-
-                <van-button size="large" @click="publishPresent" style="margin-top: 10px;">下一步</van-button>
+            <p>礼物标签</p>
+            <div style="margin-bottom: 20px">
+                <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"
+                    >{{ item }}</van-checkbox>
+                </van-checkbox-group>
             </div>
 
         </div>
+        <div class="card">
+            <p>上传礼物照片</p>
+            <add-photo @upload-photo="onRead"/>
+        </div>
+        <van-button size="large" type="primary" @click="publishPresent">下一步</van-button>
+
     </div>
 </template>
 
@@ -66,6 +46,7 @@
         Uploader, Icon,
         CellGroup, Field,
         RadioGroup, Radio,
+        CheckboxGroup, Checkbox,
         Picker,
         Button
     } from 'vant'
@@ -77,9 +58,24 @@
             [Uploader.name]: Uploader, [Icon.name]: Icon,
             [CellGroup.name]: CellGroup, [Field.name]: Field,
             [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
+            [CheckboxGroup.name]: CheckboxGroup, [Checkbox.name]: Checkbox,
             [Picker.name]: Picker,
             [Button.name]: Button
         },
+        data() {
+            return {
+                radio: '0',
+                desc: '',
+                tags: [
+                    "情怀","复古", "有趣", "学霸",  "实用",
+                    "同年", "吃货", "佛系",  "土味", "活力",
+                    "洋气", "精致",  "轻奢",  "其它",
+                ],
+                result: [],
+                nobr: "float: left; margin-right: 5px",
+                br: ""
+            }
+        },
         props: {
             photo: {
                 type: Object,
@@ -88,16 +84,43 @@
         },
         methods: {
             publishPresent() {
-                // 上传礼物
+                // post_present()
                 this.$router.push('index');
             },
             onRead(file) {
                 this.photo = file;
             }
+        },
+        created: function () {
+            if(this.$route.query.present) {
+                let present = this.$route.query.present;
+                console.log(present);
+                this.radio = present.gender.toString();
+                this.desc = present.presentDesc;
+            }
         }
     }
 </script>
 
 <style scoped>
-
+    p, h3 {
+        color: #fd6740;
+    }
+    h3 {
+        padding: 5px;
+        border-bottom: solid 1px #e4e4e4;
+    }
+    .card {
+        background-color: white;
+        margin: 20px 20px;
+        border: solid 1px #e4e4e4;
+        padding: 15px;
+        text-align: left;
+    }
+    .van-button {
+        background-color: #fd6740;
+        border-color: #fd6740;
+        margin: 10px 0 10px;
+        width: 85%;
+    }
 </style>

sourcecode/h5app/vue/src/views/SecurityVerify.vue

@@ -1,30 +1,71 @@
 <template>
     <div>
-        <div class='title'>
-            <h1>校卡验证</h1>
-        </div>
-
-        <div>
-            <p>此次活动仅限深大校内学生参加，请上传校园卡照片验证身份~</p>
-            <add-photo @upload-photo="onRead"/>
-
-            <h2>微信号</h2>
+        <div class='card'>
+            <h3><strong>个人资料</strong></h3>
             <van-cell-group>
-                <van-field v-model="value" placeholder="请输入微信号，以便交换礼物的同学联系" />
+                <van-field
+                        v-model="phone"
+                        required
+                        clearable
+                        label="手机号"
+                        placeholder="请输入手机号"
+                />
+                <van-field
+                        v-model="sms"
+                        center
+                        clearable
+                        label="短信验证码"
+                        placeholder="请输入短信验证码"
+                        required
+                >
+                    <van-button slot="button" size="small" type="primary">发送验证码</van-button>
+                </van-field>
+                <van-field
+                        v-model="username"
+                        required
+                        clearable
+                        label="昵称"
+                        placeholder="请输入昵称"
+                />
+                <van-field
+                        v-model="password"
+                        type="password"
+                        label="密码"
+                        placeholder="请输入密码"
+                        required
+                />
+                    <van-field
+                            v-model="passverify"
+                            type="password"
+                            label="密码"
+                            placeholder="请再次输入密码"
+                            required
+                    />
             </van-cell-group>
 
-            <h2>性别</h2>
+            <p>性别</p>
             <van-radio-group v-model="radio">
-                <van-radio name="1">男</van-radio>
-                <van-radio name="2">女</van-radio>
+                <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>
 
-            <h2>宿舍区</h2>
-            <van-picker :columns="columns" @change="onChange"
-                        visible-item-count="3"/>
+            <p>宿舍区</p>
+            <van-button size="large" @click="show = true">{{dormitory}}</van-button>
+            <van-actionsheet
+                    v-model="show"
+                    :actions="actions"
+                    cancel-text="取消"
+                    @select="onSelect"
+                    @cancel="onCancel"
+            />
 
-            <van-button size="large" @click="next">下一步</van-button>
         </div>
+
+        <div class="card">
+            <p>上传礼物照片</p>
+            <add-photo @upload-photo="onRead"/>
+        </div>
+        <van-button size="large" type="primary" @click="next" class="next">下一步</van-button>
     </div>
 </template>
 
@@ -34,7 +75,8 @@
         CellGroup, Field,
         RadioGroup, Radio,
         Picker,
-        Button
+        Button,
+        Actionsheet
     } from 'vant'
     import AddPhoto from "../components/addPhoto";
     export default {
@@ -45,12 +87,24 @@
             [CellGroup.name]: CellGroup, [Field.name]: Field,
             [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
             [Picker.name]: Picker,
-            [Button.name]: Button
+            [Button.name]: Button,
+            [Actionsheet.name]: Actionsheet
         },
         data() {
             return {
-                columns: ['斋区', '西南', '南区', '西丽'],
+                phone: '',
+                sms: '',
+                password: '',
+                passverify: '',
                 radio: '1',
+                show: false,
+                dormitory: '点击选择宿舍区',
+                actions: [
+                    {name: '斋区'},
+                    {name: '西南'},
+                    {name: '南区'},
+                    {name: '西丽'}
+                ]
             };
         },
         props: {
@@ -67,11 +121,35 @@
             },
             onRead(file) {
                 this.photo = file;
+            },
+            onSelect(item) {
+                // 点击选项时默认不会关闭菜单，可以手动关闭
+                this.show = false;
+                this.dormitory = item.name;
             }
         }
     }
 </script>
 
 <style scoped>
-
+    p, h3 {
+        color: #fd6740;
+    }
+    h3 {
+        padding: 5px;
+        border-bottom: solid 1px #e4e4e4;
+    }
+    .card {
+        background-color: white;
+        margin: 20px 20px;
+        border: solid 1px #e4e4e4;
+        padding: 15px;
+        text-align: left;
+    }
+    .next {
+        background-color: #fd6740;
+        border-color: #fd6740;
+        margin: 10px 0 10px;
+        width: 85%;
+    }
 </style>

sourcecode/h5app/vue/src/views/giftDetail.vue

@@ -1,23 +1,114 @@
-<template>
-    <div>
-        present {{presentId}}
-        <gift-card/>
-    </div>
-</template>
-
-<script>
-    import GiftCard from "../components/giftCard";
-    export default {
-        name: "giftDetail",
-        components: {GiftCard},
-        computed: {
-            presentId: function() {
-                return this.$route.query.presentId
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
+<template>
+    <div>
+        <h1>{{presentId}}</h1>
+        <gift-card
+                v-if="myPresent.status==2"
+                :present-desc="recievedPresent.presentDesc"
+                :owner="recievedPresent.owner"
+                :placeId="recievedPresent.placeId"
+                :gender="recievedPresent.gender"
+                :status="recievedPresent.status"
+                :wechat="recievedPresent.wechat"
+        />
+        <gift-card
+                :present-desc="myPresent.presentDesc"
+                :owner="myPresent.owner"
+                :placeId="myPresent.placeId"
+                :gender="myPresent.gender"
+                :status="myPresent.status"
+                :wechat="myPresent.wechat"
+        />
+        <div
+                v-if="myPresent.status==2"
+                style="position: fixed; bottom: 0; width: 100%"
+        >
+            <van-button
+                    type="primary" size="large"
+                    style="background-color: #fd6740; border-color: #fd6740; width: 85%;"
+            >确认交换成功</van-button>
+            <p>交换成功可以开始接收对方发来的感谢信哦</p>
+        </div>
+        <div
+                v-if="myPresent.status!=2"
+                style="position: fixed; bottom: 0; width: 100%"
+        >
+            <van-button
+                type="default" size="large"
+                style="width: 85%;"
+                @click="editPresent"
+            >修改礼物</van-button>
+            <van-button
+                    type="warning" size="large"
+                    style="width: 85%; margin: 10px 0 10px"
+                    @click="deletePresent"
+            >删除礼物</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import GiftCard from "../components/giftCard";
+    import { Button, Dialog } from 'vant'
+    export default {
+        name: "giftDetail",
+        components: {
+            GiftCard,
+            [Button.name]: Button
+        },
+        data() {
+            return {
+                presentId: '',
+            }
+        },
+        computed: {
+            myPresent: function () {
+                // return get_present(presentId)
+                return {
+                    presentDesc: "description",
+                    owner: 0,
+                    placeId: 1,
+                    gender: 0,
+                    status: 1,
+                    wechat: 'wechat_id'
+                }
+            },
+            recievedPresent: function () {
+                // return get_present(get_sender(presentId))
+                return {
+                    presentDesc: "description",
+                    owner: 1,
+                    placeId: 3,
+                    gender: 1,
+                    status: 2,
+                    wechat: 'wechat_id'
+                }
+            }
+        },
+        methods:{
+            editPresent: function() {
+                let p = this.myPresent;
+                p.id = this.presentId;
+                this.$router.push({path: 'presentRegister', query: {present: p}});
+            },
+            deletePresent: function() {
+                Dialog.confirm({
+                    message: '确认删除礼物吗？'
+                }).then(() => {
+                    // on confirm
+                    // delete_present(this.presentId())
+                    this.$router.push('index')
+                }).catch(() => {
+                    // on cancel
+                });
+            }
+        },
+        created: function () {
+            this.presentId = this.$route.query.presentId;
+        }
+    }
+
+</script>
+
+<style scoped>
+
 </style>

sourcecode/h5app/vue/src/views/index.vue

@@ -3,11 +3,11 @@
         <div style="position: relative;">
             <img :src="indexTop" style="max-width: 100%; position: relative;"/>
         </div>
-        <van-row type="flex" align="center">
-            <van-col span="4">
+        <van-row type="flex" justify="space-between" align="center">
+            <van-col>
                 <p><strong>我的礼物</strong></p>
             </van-col>
-            <van-col span="4" offset="16">
+            <van-col>
                 <van-button round type="primary" size="small" @click="toShare">邀请好友</van-button>
             </van-col>
         </van-row>

sourcecode/h5app/vue/src/views/login.vue

@@ -3,7 +3,7 @@
         <h1>登录</h1>
         <van-cell-group>
             <van-field
-                    v-model="username"
+                    v-model="phone"
                     required
                     clearable
                     label="手机号"
@@ -22,6 +22,7 @@
             </van-field>
         </van-cell-group>
         <van-button type="default" size="large" class='submit' @click="Login">登录</van-button>
+        <van-button type="default" size="large" class='submit' @click="Register">注册</van-button>
     </div>
 </template>
 
@@ -37,11 +38,20 @@
             [CellGroup.name]: CellGroup,
             [Button.name]: Button
         },
+        data() {
+            return {
+                phone: '',
+                sms: '',
+                password: ''
+            }
+        },
         methods: {
             Login() {
                 // 检查输入
                 // 检查手机号有无验证
-                // this.$router.push('index');
+                this.$router.push('index');
+            },
+            Register() {
                 this.$router.push('verify');
             }
         }
@@ -50,6 +60,6 @@
 
 <style scoped>
 .submit {
-    margin-top: 200px;
+    margin-top: 10px;
 }
 </style>

sourcecode/h5app/vue/src/views/share.vue

@@ -1,16 +1,16 @@
-<template>
-    <div>
-        <!--分享页面-->
-        <h1>share</h1>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "share"
-    }
-</script>
-
-<style scoped>
-
+<template>
+    <div>
+        <!--分享页面-->
+        <h1>share</h1>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "share"
+    }
+</script>
+
+<style scoped>
+
 </style>