分享

src/components/ButtonBg.vue

@@ -1,12 +1,14 @@
 <template>
     <div :class="`btn btn-${type} iconfont ${isRight ? 'isRight' : ''}`">
         <span><slot></slot></span>
+
+        <button class="btnForm" v-if="openType" :open-type="openType"></button>
     </div>
 </template>
 
 <script>
 export default {
-    props: ['type', 'isRight']
+    props: ['type', 'isRight', 'openType']
 };
 </script>
 
@@ -29,6 +31,16 @@ export default {
         top: 50%;
         transform: translate(-50%, -50%);
     }
+
+    .btnForm {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 3;
+        opacity: 0;
+    }
 }
 @warning: #ffc72c;
 

src/components/ProductInfoMine.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="product-card" @click="detail">
+        <van-image width="80" height="115" :src="info.image" fit="cover" radius="6" />
+
+        <div class="product-content">
+            <div class="text1">{{ info.name }}</div>
+            <div class="text2">
+                <span>距结束</span>
+                <van-count-down class="val" :time="time" format="DD 天 HH:mm:ss" />
+            </div>
+            <div class="text2">
+                <span>已拼箱</span>
+                <span class="val">{{ info.preorder || 0 }}/{{ info.total || 0 }}</span>
+            </div>
+
+            <div class="flex1"></div>
+
+            <div class="price">
+                <van-icon size="10" :color="$colors.red" name="jiage" class-prefix="iconfont" />
+                <span>{{ info.price }}</span>
+            </div>
+
+            <div class="button" v-if="showBtn">
+                <van-button @click.stop="cancelFollow" type="info" plain size="small" v-if="showType === 'collect'"
+                    >取消关注</van-button
+                >
+                <van-button type="primary" size="small" v-else>立即拼箱</van-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+import collection from '../mixins/collection';
+export default {
+    name: 'ProductInfo',
+    mixins: [collection],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        showBtn: {
+            type: Boolean,
+            default: true
+        },
+        showType: {
+            type: String,
+            default: 'product'
+        }
+    },
+    data() {
+        return {
+            cartId: 0,
+            isCollection: false
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (this.showType === 'collect') {
+                this.cartId = this.info.cartId;
+                this.isCollection = true;
+            }
+        });
+    },
+    computed: {
+        time() {
+            if (this.info.endTime) {
+                let date = dayjs(this.info.endTime, 'YYYY-MM-DD HH:mm:ss');
+
+                return date.diff(dayjs());
+            } else {
+                return 0;
+            }
+        }
+    },
+    methods: {
+        detail() {
+            this.navigateTo('/pages/details?id=' + this.info.cardCaseId, false);
+        },
+        cancelFollow() {
+            wx.showModal({
+                content: '确定要取消关注吗？',
+                confirmColor: this.$colors.prim,
+                success: res => {
+                    if (res.confirm) {
+                        this.collect().then(() => {
+                            setTimeout(() => {
+                                this.$emit('getInfo');
+                            }, 1000);
+                        });
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product-card {
+    height: 115px;
+    .flex();
+}
+
+.product-content {
+    flex-grow: 1;
+    margin-left: 10px;
+    align-self: stretch;
+    .flex-col();
+    position: relative;
+    overflow: hidden;
+    .text1 {
+        font-size: 16px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+        .ellipsis();
+        margin-bottom: 6px;
+    }
+
+    .text2 {
+        padding: 2px 0;
+        .flex();
+        span {
+            font-size: 14px;
+            color: #c8c9cc;
+            line-height: 24px;
+
+            &.val {
+                font-size: 14px;
+                color: @prim;
+            }
+        }
+
+        /deep/ .val {
+            .van-count-down {
+                --count-down-text-color: @prim;
+            }
+        }
+    }
+
+    .flex1 {
+        flex-grow: 1;
+    }
+
+    .price {
+        .flex();
+        font-size: 24px;
+        font-family: 'OSP';
+        font-weight: normal;
+        color: #f42202;
+        line-height: 22px;
+    }
+}
+
+.button {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+</style>

src/native/svgs/icon_fenxiang.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_fenxiang</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="拼箱详情" transform="translate(-331.000000, -532.000000)" stroke="#000000" stroke-width="1.6">
+            <g id="icon/分享" transform="translate(331.000000, 532.000000)">
+                <g id="编组-6" transform="translate(2.000000, 2.000000)">
+                    <line x1="19.1123007" y1="0.887699334" x2="10" y2="10" id="直线"></line>
+                    <path d="M9.00423389,0.0489557819 C3.94888195,0.54871843 0,4.81320382 0,10 C0,15.5228475 4.4771525,20 10,20 C15.1845756,20 19.44763,16.0544985 19.9504003,11.0022584" id="路径"></path>
+                    <path d="M15,0 L18,0 C19.1045695,-2.02906125e-16 20,0.8954305 20,2 L20,5 L20,5" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/pages/details.vue

@@ -17,10 +17,17 @@
             <img src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/icon_kapai_zhibo@3x.png" alt="" />
             <p>直播未开始</p>
         </div>
-        <div class="box-money">
-            <img src="../static/imgs/icon_jiage@3x.png" alt="" />
-            <p>{{ cardCaseInfo.price }}</p>
+        <div class="money-content">
+            <div class="box-money">
+                <img src="../static/imgs/icon_jiage@3x.png" alt="" />
+                <p>{{ cardCaseInfo.price }}</p>
+            </div>
+            <div class="share">
+                <img src="/native/svgs/icon_fenxiang.svg" alt="" />
+                <button open-type="share"></button>
+            </div>
         </div>
+
         <div class="box-con">
             <div class="box-con-left">
                 <p>距拼箱结束</p>
@@ -155,6 +162,13 @@ export default {
     },
     onLoad() {
         this.details();
+    },
+    onShareAppMessage() {
+        return {
+            title: '卓卡——' + this.cardCaseInfo.caseName,
+            path: '/pages/details?id=' + this.cardCaseInfo.cardCaseId,
+            imageUrl: this.banners.length > 0 ? this.banners[0] : ''
+        };
     }
 };
 </script>
@@ -417,4 +431,26 @@ export default {
         }
     }
 }
+.money-content {
+    position: relative;
+    overflow: hidden;
+}
+.share {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    img {
+        width: 24px;
+        height: 24px;
+    }
+
+    button {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0;
+    }
+}
 </style>

src/pages/store/homePage.vue

@@ -28,7 +28,7 @@
                     fit="cover"
                 >
                 </van-image>
-                <div class="name">光之城-卡牌</div>
+                <div class="name">{{ storeInfo.storeName }}</div>
                 <div class="location">
                     <img src="/native/svgs/icon_kapai_dizhi.svg" alt="" />
                     <span>浙江 杭州</span>
@@ -57,13 +57,13 @@
             </van-sticky>
             <div class="list-content">
                 <div class="procuct" v-for="(item, index) in list" :key="index">
-                    <product-info :info="item"></product-info>
+                    <product-info-mine :info="item"></product-info-mine>
                 </div>
             </div>
         </div>
 
         <div class="bottom">
-            <button-bg type="warning">分享店铺</button-bg>
+            <button-bg type="warning" openType="share">分享店铺 </button-bg>
             <button-bg type="prim" isRight>管理商品</button-bg>
         </div>
     </div>
@@ -73,10 +73,10 @@
 import { mapState } from 'vuex';
 import ButtonBg from '../../components/ButtonBg.vue';
 import NavHeader from '../../components/NavHeader.vue';
-import ProductInfo from '../../components/ProductInfo.vue';
+import ProductInfoMine from '../../components/ProductInfoMine.vue';
 import SortItem from '../../components/SortItem.vue';
 export default {
-    components: { ButtonBg, SortItem, ProductInfo, NavHeader },
+    components: { ButtonBg, SortItem, NavHeader, ProductInfoMine },
     data() {
         return {
             option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
@@ -92,16 +92,20 @@ export default {
             loading: false,
             list: [],
             empty: false,
-            finish: false
+            finish: false,
+            storeInfo: {}
         };
     },
     computed: {
-        ...mapState(['systemInfo'])
+        ...mapState(['systemInfo', 'userStoreInfo'])
     },
     methods: {
         loginMethods() {
             this.loading = true;
             this.getData();
+            this.$store.dispatch('getUserStore').then(res => {
+                this.storeInfo = res;
+            });
         },
         getData() {
             let data = {
@@ -118,7 +122,13 @@ export default {
             });
         }
     },
-    onPageScroll() {}
+    onPageScroll() {},
+    onShareAppMessage() {
+        return {
+            title: '卓卡——' + this.storeInfo.storeName,
+            path: '/pages/store/homePage?id=' + this.storeInfo.id
+        };
+    }
 };
 </script>