gift card component complete

sourcecode/h5app/vue/package-lock.json

@@ -2460,6 +2460,16 @@
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "requires": {
+        "good-listener": "1.2.2",
+        "select": "1.1.2",
+        "tiny-emitter": "2.0.2"
+      }
+    },
     "clipboardy": {
       "version": "1.2.3",
       "resolved": "http://registry.npm.taobao.org/clipboardy/download/clipboardy-1.2.3.tgz",
@@ -3347,6 +3357,11 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "http://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -5246,6 +5261,14 @@
         "slash": "1.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "3.2.0"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "http://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.1.15.tgz",
@@ -8786,6 +8809,11 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -9849,6 +9877,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+      "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "http://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
@@ -10376,6 +10409,14 @@
       "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.5.17.tgz",
       "integrity": "sha1-D4eJrXGL5oyhhyYpgy7VM1icato="
     },
+    "vue-clipboard2": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.2.1.tgz",
+      "integrity": "sha512-n6ie/0g0bKohmLlC/5ja1esq2Q0jQ5hWmhNSZcvCsWfDeDnVARjl6cBB9p72XV1nlVfuqsZcfV8HTjjZAIlLBA==",
+      "requires": {
+        "clipboard": "2.0.4"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "http://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",

sourcecode/h5app/vue/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "vant": "^1.4.8",
     "vue": "^2.5.17",
+    "vue-clipboard2": "^0.2.1",
     "vue-router": "^3.0.2"
   },
   "devDependencies": {

sourcecode/h5app/vue/src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="app">
-    <router-view />
+  <div id="app"  style="height: 100%">
+    <router-view style="height: 100%"/>
     <tab-bar v-if="$route.meta.navShow"/>
   </div>
 </template>
@@ -19,7 +19,10 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+body {
+  background-color: #fff6e3;
 }
 
 .title {

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

@@ -1,36 +1,64 @@
 <template>
-    <div class="IndexPresent">
-        <!--<img src="../assets/image_load_fail.jpg" v-if="presentImg"/>-->
-        <!--<img :src="presentImg" v-if="presentImg"/>-->
+    <div v-on:click="toDetail">
         <van-card
-                tag="标签"
-                desc="描述信息"
-                title="商品标题"
                 :thumb="presentImg"
         >
-            <div slot="footer">
-                <label>2017.01.01</label>
-                <label>匹配成功</label>
+            <div slot="title" style="position: absolute; text-align: left; top: 0;">
+                <p>{{presentDesc}}</p>
+            </div>
+            <div slot="tags" style="position: absolute; bottom: 0; text-align: left">
+                <p>{{publishTime}}</p>
+            </div>
+            <div slot="footer" style="width: 100%">
+                    <van-tag class="present_tag" :color="statusColor[status]">{{statusString[status]}}</van-tag>
             </div>
         </van-card>
     </div>
 </template>
 
 <script>
-    import { Card } from 'vant';
+    import { Card, Tag } from 'vant';
     export default {
         name: "IndexPresent",
         components: {
-            [Card.name]: Card
+            [Card.name]: Card, [Tag.name]: Tag,
         },
         data() {
             return {
-                presentImg: require('../assets/image_load_fail.jpg'),
+                statusString: ['审核中', '匹配中', '匹配成功'],
+                statusColor: ['#f43736', '#00ff00', '#00bfff']
+            }
+        },
+        props: {
+            presentImg: {
+                type: Object,
+                default: require('../assets/image_load_fail.jpg')
+            },
+            presentDesc: {
+                type: String,
+                default: '礼物描述'
+            },
+            publishTime: {
+                type: String,
+                default: '1970-01-01'
+            },
+            status: {
+                type: Number,
+                default: 0
+            }
+        },
+        methods: {
+            toDetail() {
+                this.$emit('to-detail')
             }
         }
     }
+
 </script>
 
 <style scoped>
+    div {
+        background-color: #fff6e3;
+    }
 
 </style>

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

@@ -0,0 +1,94 @@
+<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;
+    }
+</style>

sourcecode/h5app/vue/src/router.js

@@ -55,6 +55,14 @@ const routes = [
             title: '分享海报',
             navShow: false
         }
+    },
+    {
+        name: 'giftDetail',
+        component: () => import('./views/giftDetail'),
+        meta: {
+            title: '礼品卡',
+            navShow: false
+        }
     }
 ];
 

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

@@ -0,0 +1,23 @@
+<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>
+
+</style>

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

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div style="position: relative;">
-            <img :src="indexTop" style="max-height: 200px; position: relative;"/>
+            <img :src="indexTop" style="max-width: 100%; position: relative;"/>
         </div>
         <van-row type="flex" align="center">
             <van-col span="4">
@@ -12,9 +12,17 @@
             </van-col>
         </van-row>
 
-        <div>
-            <index-present/>
-        </div>
+        <ul style="background-color: #fff6e3">
+            <li
+                    is="index-present"
+                    v-for="(present, index) in presents"
+                    :key="present.id"
+                    :present-desc="present.desc"
+                    :publish-time="present.time"
+                    :status="present.status"
+                    @to-detail="toDetail(index)"
+            ></li>
+        </ul>
     </div>
 </template>
 
@@ -32,12 +40,34 @@
         data() {
             return {
                 active: 0,
-                indexTop: require('../assets/banner.png')
+                indexTop: require('../assets/banner.png'),
+            }
+        },
+        computed: {
+            presents: function() {
+                // return get_present_data()
+                return [
+                    {
+                        id: 0,
+                        desc: '描述1blabla',
+                        time: '2018-01-02',
+                        status: 1
+                    },
+                    {
+                        id: 1,
+                        desc: '描述2blabla',
+                        time: '2018-11-02',
+                        status: 2
+                    }
+                ]
             }
         },
         methods: {
             toShare() {
                 this.$router.push('share')
+            },
+            toDetail(id) {
+                this.$router.push({ path: 'giftDetail', query: { presentId: id } })
             }
         }
     }

sourcecode/h5app/vue/src/views/me.vue

@@ -1,19 +1,12 @@
 <template>
     <div>
-        <!--我的页面-->
+        <h1>我的页面</h1>
     </div>
 </template>
 
 <script>
-    // import TabBar from "../components/TabBar";
     export default {
         name: "me",
-        // components: {TabBar},
-        // methods: {
-        //     change_a() {
-        //         this.$refs.tb.activeI = "1";
-        //     }
-        // }
     }
 </script>