首页

src/components/ProductInfo.vue

@@ -1,35 +1,34 @@
 <template>
-    <div class="product-card">
-        <van-image
-            width="80"
-            height="115"
-            src="https://bpic.588ku.com/illus_water_img/21/04/07/acf684663880b3999fab66d5d2f68940.jpg"
-            fit="cover"
-            radius="6"
-        />
+    <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">DP20 简中 传说之决斗者编3</div>
+            <div class="text1">{{ info.caseName }}</div>
             <div class="text2">
                 <span>距结束</span>
-                <span class="val">1天 20:35:06</span>
+                <van-count-down class="val" :time="time" format="DD 天 HH:mm:ss" />
             </div>
             <div class="text2">
                 <span>已拼箱</span>
-                <span class="val">10/24</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>320</span>
+                <span>{{ info.price }}</span>
+            </div>
+
+            <div class="button" v-if="showBtn">
+                <van-button type="primary">立即拼箱</van-button>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import dayjs from 'dayjs';
 export default {
     name: 'ProductInfo',
     props: {
@@ -38,10 +37,27 @@ export default {
             default: () => {
                 return {};
             }
+        },
+        showBtn: {
+            type: Boolean,
+            default: true
         }
     },
-    data() {
-        return {};
+    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);
+        }
     }
 };
 </script>
@@ -57,6 +73,7 @@ export default {
     margin-left: 10px;
     align-self: stretch;
     .flex-col();
+    position: relative;
     .text1 {
         font-size: 16px;
         font-weight: bold;
@@ -68,6 +85,7 @@ export default {
 
     .text2 {
         padding: 2px 0;
+        .flex();
         span {
             font-size: 14px;
             color: #c8c9cc;
@@ -78,6 +96,12 @@ export default {
                 color: @prim;
             }
         }
+
+        /deep/ .val {
+            .van-count-down {
+                --count-down-text-color: @prim;
+            }
+        }
     }
 
     .flex1 {
@@ -93,4 +117,10 @@ export default {
         line-height: 22px;
     }
 }
+
+.button {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
 </style>

src/main.js

@@ -88,6 +88,7 @@ export default {
             'van-notice-bar': '/vant/notice-bar/index',
             'van-icon': '/vant/icon/index',
             'van-grid-item ': '/vant/grid-item/index',
+            'van-count-down': '/vant/count-down/index',
             'van-dialog': '/vant/dialog/index',
             'van-search': '/vant/search/index',
             'van-empty': '/vant/empty/index',

src/mixins/cardPage.js

@@ -0,0 +1,41 @@
+export default {
+    data() {
+        return {
+            caseStatusList: [
+                {
+                    value: 'UNDO',
+                    label: '未审核'
+                },
+                {
+                    value: 'WAIT',
+                    label: '待开始'
+                },
+                {
+                    value: 'PROGRESS',
+                    label: '进行中'
+                },
+                {
+                    value: 'SOLDOUT',
+                    label: '已完成'
+                },
+                {
+                    value: 'FINISH',
+                    label: '已结束'
+                }
+            ]
+        };
+    },
+    methods: {
+        getStatus(label) {
+            if (label) {
+                return (
+                    [...this.caseStatusList].find(item => {
+                        return item.label === label;
+                    }) || { value: '' }
+                ).value;
+            } else {
+                return '';
+            }
+        }
+    }
+};

src/pages/Home.vue

@@ -7,196 +7,85 @@
 </config>
 <template>
     <div class="container">
-        <div class="container-bg">
-            <div class="mytest"><img class="mytest" src="../static/imgs/home_top_bg@3x.png" alt="" /></div>
-            <span>游戏王OCG</span>
-            <div class="box-top">
-                <div class="box-img">
-                    <p class="box-top-img"><img src="../static/imgs/home_icon_qihuan@3x.png" alt="" /></p>
-                    <p class="box-top-sp">切换卡片</p>
-                </div>
-            </div>
-            <van-search
-                right-icon="back-top"
-                :value="value"
-                shape="round"
-                background="none"
-                placeholder="搜索拼箱...."
-            />
-            <div class="box-tab">
-                <div @click="conducts">
-                    进行中
-                </div>
-                <div class="box-tab-Completed" @click="completes">
-                    已完成
-                </div>
-                <div @click="overdues">
-                    已过期
-                </div>
-            </div>
-        </div>
-        <!-- 进行中 -->
-        <div class="box-con" v-if="conduct">
-            <div v-for="(item, index) in conductList" :key="index + 2">
-                <div class="box-con-Cards">
-                    <img :src="item.image" alt="" />
-                    <div class="box-con-right">
-                        <p class="box-con-tit">{{ item.caseName }}</p>
-                        <div class="box-con-today">
-                            <p>距离结束</p>
-                            <p class="box-con-p2">{{ item.endTime }}</p>
-                        </div>
-                        <div class="box-con-today">
-                            <p>已拼箱</p>
-                            <p class="box-con-p2">{{ item.preorder }}</p>
-                        </div>
-                        <div class="box-con-money">
-                            <div class="box-con-num">
-                                <img src="../static/imgs/icon_jiage.png" alt="" />
-                                <p>{{ item.price }}</p>
-                            </div>
-                            <van-button type="warning" @click="Details(item)">立即拼箱</van-button>
-                        </div>
+        <van-sticky>
+            <div class="container-bg">
+                <div class="mytest"><img class="mytest" src="../static/imgs/home_top_bg@3x.png" alt="" /></div>
+                <span>游戏王OCG</span>
+                <div class="box-top">
+                    <div class="box-img">
+                        <p class="box-top-img"><img src="../static/imgs/home_icon_qihuan@3x.png" alt="" /></p>
+                        <p class="box-top-sp">切换卡片</p>
                     </div>
                 </div>
-                <div class="box-border"></div>
-            </div>
-        </div>
-        <!-- 已完成 -->
-        <div class="box-con" v-if="complete">
-            <div v-for="(item, index) in completeList" :key="index + 4">
-                <div class="box-con-Cards">
-                    <img :src="item.image" alt="" />
-                    <div class="box-con-right">
-                        <p class="box-con-tit">{{ item.caseName }}</p>
-                        <div class="box-con-today">
-                            <p>距离结束</p>
-                            <p class="box-con-p2">{{ item.endTime }}</p>
-                        </div>
-                        <div class="box-con-today">
-                            <p>已拼箱</p>
-                            <p class="box-con-p2">{{ item.preorder }}</p>
-                        </div>
-                        <div class="box-con-money">
-                            <div class="box-con-num">
-                                <img src="../static/imgs/icon_jiage.png" alt="" />
-                                <p>{{ item.price }}</p>
-                            </div>
-                            <van-button type="warning" @click="Details(item)">立即拼箱</van-button>
-                        </div>
+
+                <div class="search">
+                    <van-field type="text" placeholder="搜索拼箱..." />
+                    <div class="scan">
+                        <van-icon size="16" :color="$colors.prim" name="liebiao" class-prefix="iconfont" />
                     </div>
                 </div>
-                <div class="box-border"></div>
-            </div>
-        </div>
-        <!-- 已过期 -->
-        <div class="box-con" v-if="overdue">
-            <div v-for="(item, index) in overdueList" :key="index + 6">
-                <div class="box-con-Cards">
-                    <img :src="item.image" alt="" />
-                    <div class="box-con-right">
-                        <p class="box-con-tit">{{ item.caseName }}</p>
-                        <div class="box-con-today">
-                            <p>距离结束</p>
-                            <p class="box-con-p2">{{ item.endTime }}</p>
-                        </div>
-                        <div class="box-con-today">
-                            <p>已拼箱</p>
-                            <p class="box-con-p2">{{ item.preorder }}</p>
-                        </div>
-                        <div class="box-con-money">
-                            <div class="box-con-num">
-                                <img src="../static/imgs/icon_jiage.png" alt="" />
-                                <p>{{ item.price }}</p>
-                            </div>
-                            <van-button type="warning" @click="Details(item)">立即拼箱</van-button>
-                        </div>
+
+                <div class="box-tab">
+                    <div
+                        class="tab-item"
+                        :class="{ active: item === active }"
+                        v-for="(item, index) in tabs"
+                        :key="index"
+                        @click="chageData(item)"
+                    >
+                        {{ item }}
                     </div>
                 </div>
-                <div class="box-border"></div>
             </div>
+        </van-sticky>
+
+        <div class="list">
+            <div class="product" v-for="item in list" :key="item.id">
+                <product-info :info="item"></product-info>
+            </div>
+
+            <van-empty v-if="empty" image="/native/imgs/kong_png_xiaoxiliebiao.png" description="暂无卡包信息哦～">
+            </van-empty>
         </div>
-        <van-popup :show="show" position="buttom" custom-style="height: 20%;" bind:close="onClose">内容</van-popup>
     </div>
 </template>
 
 <script>
+import ProductInfo from '../components/ProductInfo.vue';
+import cardPage from '../mixins/cardPage';
 export default {
+    components: { ProductInfo },
+    mixins: [cardPage],
     data() {
         return {
             value: '',
-            conduct: true,
-            complete: false,
-            overdue: false,
-            show: false,
-            PROGRESS: 'PROGRESS',
-            FINISH: 'FINISH',
-            SOLDOUT: 'SOLDOUT',
-            conductList: [],
-            completeList: [],
-            overdueList: []
+            active: '进行中',
+            list: [],
+            tabs: ['进行中', '已完成', '已过期'],
+            empty: false
         };
     },
     methods: {
-        Details(item) {
-            console.log(item.cardCaseId);
-            wx.redirectTo({
-                url: './details?id=' + item.cardCaseId
-            });
+        chageData(name) {
+            this.active = name;
+            this.getData();
         },
-        // 进行中
-        conDucts() {
+        getData() {
+            this.empty = false;
             this.$http
                 .get('/cardCase/showCasesMA', {
-                    caseStatus: this.PROGRESS
+                    caseStatus: this.getStatus(this.active)
                 })
                 .then(res => {
-                    console.log(res);
-                    this.conductList = res;
-                });
-        },
-        // 已完成
-        compLetes() {
-            this.$http
-                .get('/cardCase/showCasesMA', {
-                    caseStatus: this.SOLDOUT
-                })
-                .then(res => {
-                    console.log(res);
-                    this.completeList = res;
-                });
-        },
-        // 已过期
-        overDues() {
-            this.$http
-                .get('/cardCase/showCasesMA', {
-                    caseStatus: this.FINISH
-                })
-                .then(res => {
-                    console.log(res);
-                    this.overdueList = res;
+                    this.list = res;
+                    if (res.length === 0) {
+                        this.empty = true;
+                    }
                 });
-        },
-        conducts() {
-            this.conduct = true;
-            this.complete = false;
-            this.overdue = false;
-        },
-        completes() {
-            this.conduct = false;
-            this.complete = true;
-            this.overdue = false;
-        },
-        overdues() {
-            this.conduct = false;
-            this.complete = false;
-            this.overdue = true;
         }
     },
-    created() {
-        this.conDucts();
-        this.compLetes();
-        this.overDues();
+    onLoad() {
+        this.getData();
     }
 };
 </script>
@@ -224,7 +113,16 @@ export default {
         border-radius: 8px;
     }
     .container-bg {
-        padding-top: 50px;
+        padding-top: 54px;
+
+        &::after {
+            content: '';
+            display: block;
+            width: 100%;
+            height: 25px;
+            border-radius: 20px 20px 0 0;
+            background-color: #fff;
+        }
     }
     .mytest {
         position: absolute;
@@ -234,6 +132,12 @@ export default {
         margin: auto;
         width: 100%;
         z-index: -1;
+
+        img {
+            width: 100vw;
+            height: 280px;
+            display: block;
+        }
     }
     span {
         height: 34px;
@@ -248,7 +152,7 @@ export default {
         height: 36px;
         background: rgba(255, 255, 255, 0.16);
         border-radius: 8px;
-        margin: 6px 0 20px 20px;
+        margin: 17px 0 20px 20px;
         line-height: 36px;
         .box-img {
             margin: 0 18px 0 12px;
@@ -269,93 +173,62 @@ export default {
             }
         }
     }
-    .box-tab {
-        display: flex;
-        margin: 22px 0 0 20px;
-        .box-tab-Completed {
-            margin: 0 30px;
-        }
-        div {
-            width: 42px;
-            height: 24px;
-            font-size: 14px;
-            font-weight: 400;
-            color: #ffffff;
-            line-height: 24px;
-        }
+}
+
+.search {
+    margin: 0 20px;
+    height: 40px;
+    overflow: hidden;
+    border-radius: 8px;
+    background-color: #fff;
+    .flex();
+
+    ._van-field {
+        flex-grow: 1;
     }
-    .box-con {
-        margin-top: 20px;
-        height: 160px;
-        background: #ffffff;
-        border-radius: 12px;
-        .box-con-Cards {
-            padding: 32px 20px 27px 25px;
-            display: flex;
-            img {
-                width: 90px;
-                height: 130px;
-                border-radius: 6px;
-            }
-            .box-con-right {
-                width: 237px;
-                margin-left: 8px;
-                .box-con-tit {
-                    height: 24px;
-                    font-size: 16px;
-                    font-weight: bold;
-                    color: #000000;
-                    line-height: 24px;
-                    margin-bottom: 10px;
-                }
-            }
-            .box-con-today {
-                display: flex;
-                p {
-                    height: 24px;
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #c8c9cc;
-                    line-height: 24px;
-                }
-                .box-con-p2 {
-                    height: 24px;
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #ff6c00;
-                    line-height: 24px;
-                    margin-left: 1px;
-                }
-            }
-            .box-con-money {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-top: 13px;
-                .box-con-num {
-                    display: flex;
-                    align-items: center;
-                    img {
-                        width: 10px;
-                        height: 10px;
-                        margin-top: 9px;
-                    }
-                    p {
-                        height: 22px;
-                        font-size: 24px;
-                        font-weight: normal;
-                        color: #f42202;
-                        line-height: 22px;
-                    }
-                }
-            }
+
+    .scan {
+        width: 40px;
+        height: 40px;
+        background: rgba(255, 108, 0, 0.2);
+        .flex();
+        justify-content: center;
+        border-radius: 8px;
+    }
+
+    /deep/ .van-cell {
+        --cell-vertical-padding: 8px;
+    }
+}
+
+.box-tab {
+    .flex();
+    padding: 0 20px;
+
+    .tab-item {
+        font-size: 14px;
+        color: #ffffff80;
+        line-height: 24px;
+        padding: 18px 30px 18px 0;
+
+        &.active {
+            color: #fff;
         }
     }
-    .box-border {
-        width: 89%;
-        height: 1px;
-        background: #f5f7fa;
-        margin: 23px 0 0 20px;
+}
+
+.list {
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    padding: 0 20px 25px;
+    box-sizing: border-box;
+
+    .product {
+        padding: 25px 0;
+        border-bottom: 1px solid @border1;
+        &:first-child {
+            padding-top: 0px;
+        }
     }
 }
 </style>

src/pages/chat.vue

@@ -8,7 +8,7 @@
     <div class="page">
         <div class="chat-list" @click="showAttach = false">
             <div class="product">
-                <product-info></product-info>
+                <product-info :showBtn="false"></product-info>
             </div>
             <chat-info></chat-info>
             <chat-info isMine></chat-info>

src/styles/common.less

@@ -7,7 +7,7 @@
 @text2: #606266;
 @text3: #939599;
 @text4: #c6c8cc;
-@border1: #dcdfe6;
+@border1: #F5F7FA;
 @border2: #f2f3f5;
 @border3: #dfe1e6;
 @border4: #f2f6fc;

src/styles/font.less

@@ -3,14 +3,12 @@
     src: url(https://imttech.oss-cn-hangzhou.aliyuncs.com/micro/OSP-DIN.ttf);
 }
 @font-face {
-    font-family: 'iconfont'; /* project id 2504712 */
-    src: url('//at.alicdn.com/t/font_2504712_68967p6tq6w.eot');
-    src: url('//at.alicdn.com/t/font_2504712_68967p6tq6w.eot?#iefix') format('embedded-opentype'),
-        url('//at.alicdn.com/t/font_2504712_68967p6tq6w.woff2') format('woff2'),
-        url('//at.alicdn.com/t/font_2504712_68967p6tq6w.woff') format('woff'),
-        url('//at.alicdn.com/t/font_2504712_68967p6tq6w.ttf') format('truetype'),
-        url('//at.alicdn.com/t/font_2504712_68967p6tq6w.svg#iconfont') format('svg');
+    font-family: 'iconfont'; /* Project id 2504712 */
+    src: url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.woff2?t=1620459144507') format('woff2'),
+        url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.woff?t=1620459144507') format('woff'),
+        url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.ttf?t=1620459144507') format('truetype');
 }
+
 .iconfont {
     font-family: 'iconfont' !important;
     font-size: 16px;
@@ -24,3 +22,6 @@
     content: '\e61c';
 }
 
+.iconfont-liebiao:before {
+    content: '\e61d';
+}