首页遮罩层

src/App.vue

@@ -6,7 +6,7 @@ export default {
     onLaunch(options) {
         wx.login({
             success: res => {
-                console.log(res);
+                // console.log(res);
                 this.$http
                     .post('/auth/maLogin', { code: res.code })
                     .then(res => {

src/components/AllorderInfo.vue

@@ -15,7 +15,7 @@
                         src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg"
                     />
                     <div>
-                        <div class="text1">订单将在 4:22 后自动取消</div>
+                        <div class="text1">订单将在 <span>4:22</span> 后自动取消</div>
                         <div class="text1 text2">请尽快完成支付</div>
                     </div>
                     <img
@@ -128,7 +128,6 @@ export default {
                 justify-content: space-between;
                 margin: 14px 0 17px;
                 .avatar {
-                    // margin-right: 6px;
                     width: 48px;
                     height: 48px;
                     border-radius: 8px !important;
@@ -143,6 +142,9 @@ export default {
                         color: #c8c9cc;
                         font-weight: 400;
                     }
+                    span {
+                        color: @prim;
+                    }
                 }
                 .inter {
                     width: 28px;

src/components/orderBtn.vue

@@ -32,7 +32,7 @@
                     <div class="text2">(包装费&nbsp;&nbsp;</div>
                     <div class="text3">¥5)</div>
                 </div>
-                <div class="title">
+                <div class="title" @click="Dele">
                     <img
                         class="ImgDele"
                         src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-17-20-46JgwTHKrC.png"
@@ -105,6 +105,9 @@ export default {
                 this.show = !this.show;
             }
         },
+        Dele() {
+            this.totalPrice = '';
+        },
         order() {
             if (!this.totalPrice) {
                 wx.showToast({

src/pages/Home.vue

@@ -81,28 +81,27 @@
                 </div>
             </div>
         </van-sticky>
-        <div class="conTent">
-            <div
-                @click="navigateTo('/pages/merchantorders')"
-                class="merchantroCon"
-                v-for="(item, index) in merchantorLists"
-                :key="index"
-            >
-                <img :src="item.image" alt="" />
-                <div>
-                    <div class="text">
-                        <div class="text1">{{ item.name }}</div>
-                        <div class="btn">营业中</div>
-                    </div>
-                    <div class="text2">起送20元 免配费&nbsp;&nbsp;&nbsp;&nbsp; 20分钟 1km</div>
-                    <div class="text3">蛋黄派&nbsp;&nbsp; 曲奇饼干</div>
-                    <div class="bottom">
-                        <div class="text2">月销{{ item.num }}</div>
-                        <img
-                            class="imgBox"
-                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-01-17-35-13FNlQpGNP.png"
-                            alt=""
-                        />
+        <div class="conTent" v-for="(item, index) in merchantorLists" :key="index">
+            <div v-if="lock" class="dele">不喜欢</div>
+            <div v-if="lock" class="conTent2"></div>
+            <div class="box">
+                <div @longtap="longTap" @touchend="touchend" @click="tap" class="merchantroCon">
+                    <img :src="item.image" alt="" />
+                    <div>
+                        <div class="text">
+                            <div class="text1">{{ item.name }}</div>
+                            <div class="btn">营业中</div>
+                        </div>
+                        <div class="text2">起送20元 免配费&nbsp;&nbsp;&nbsp;&nbsp; 20分钟 1km</div>
+                        <div class="text3">蛋黄派&nbsp;&nbsp; 曲奇饼干</div>
+                        <div class="bottom">
+                            <div class="text2">月销{{ item.num }}</div>
+                            <img
+                                class="imgBox"
+                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-01-17-35-13FNlQpGNP.png"
+                                alt=""
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -118,6 +117,7 @@ export default {
     data() {
         return {
             swiperCurrent: 0,
+            lock: false,
             banners: ['https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-40-54wLiqaRNi.png'],
             merchantorLists: [
                 {
@@ -136,6 +136,25 @@ export default {
         },
         swiperChange(e) {
             this.swiperCurrent = e.detail.current;
+        },
+        tap() {
+            //检查锁
+            if (this.lock) {
+                return;
+            }
+            this.navigateTo('/pages/merchantorders');
+        },
+        touchend() {
+            if (this.lock) {
+                //开锁
+                setTimeout(() => {
+                    this.lock = false;
+                }, 100);
+            }
+        },
+        longTap() {
+            //锁住
+            this.lock = true;
         }
     }
 };
@@ -271,61 +290,91 @@ export default {
         }
     }
     .conTent {
-        padding: 12px;
-        margin: 27px 16px 0 16px;
-        border-radius: 8px;
-        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
-        .merchantroCon {
-            .flex();
-            img {
-                width: 116px;
-                height: 116px;
-                border-radius: 8px;
-                margin-right: 10px;
-            }
-            .text {
+        position: relative;
+        margin-bottom: 16px;
+        .conTent2 {
+            width: 91.6%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 8px;
+            margin-left: 16px;
+            position: absolute;
+        }
+        .dele {
+            width: 62px;
+            height: 62px;
+            background: #f5f7fa;
+            border-radius: 50%;
+            line-height: 62px;
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #159eff;
+            position: absolute;
+            z-index: 20;
+            top: 30%;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: 0 auto;
+        }
+        .box {
+            padding: 12px;
+            margin: 27px 16px 0 16px;
+            border-radius: 8px;
+            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+            .merchantroCon {
                 .flex();
-                justify-content: space-between;
-                .text1 {
-                    font-size: 16px;
-                    font-weight: bold;
-                    color: #000000;
-                    line-height: 24px;
+                img {
+                    width: 116px;
+                    height: 116px;
+                    border-radius: 8px;
+                    margin-right: 10px;
                 }
-                .btn {
-                    width: 51px;
-                    height: 20px;
-                    background: #d3edff;
-                    border-radius: 2px;
-                    text-align: center;
+                .text {
+                    .flex();
+                    justify-content: space-between;
+                    .text1 {
+                        font-size: 16px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 24px;
+                    }
+                    .btn {
+                        width: 51px;
+                        height: 20px;
+                        background: #d3edff;
+                        border-radius: 2px;
+                        text-align: center;
+                        font-size: 13px;
+                        font-weight: 400;
+                        color: @prim;
+                        line-height: 20px;
+                    }
+                }
+                .text2 {
+                    .text12();
+                    margin: 2px 0 6px;
+                }
+                .text3 {
                     font-size: 13px;
                     font-weight: 400;
                     color: @prim;
                     line-height: 20px;
                 }
-            }
-            .text2 {
-                .text12();
-                margin: 2px 0 6px;
-            }
-            .text3 {
-                font-size: 13px;
-                font-weight: 400;
-                color: @prim;
-                line-height: 20px;
-            }
-            .bottom {
-                .flex();
-                justify-content: space-between;
-                width: 100%;
-                .text2 {
-                    .text12();
-                    margin-top: 6px;
-                }
-                .imgBox {
-                    width: 16px;
-                    height: 16px;
-                    margin: 0;
+                .bottom {
+                    .flex();
+                    justify-content: space-between;
+                    width: 100%;
+                    .text2 {
+                        .text12();
+                        margin-top: 6px;
+                    }
+                    .imgBox {
+                        width: 16px;
+                        height: 16px;
+                        margin: 0;
+                    }
                 }
             }
         }

src/pages/applydetails.vue

@@ -7,12 +7,9 @@
 <template>
     <div class="apply">
         <div class="top">
-            <img
-                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-17-13-59-28rUgbNkZY.png"
-                alt=""
-            />
-            <p>退款审核中</p>
-            <span> 退款审核中，请耐心等待，退款将在72小 &nbsp;&nbsp;时内按照原支付渠道返回，请注意查收</span>
+            <van-image class="img" width="100%" :src="img" fit="widthFix" />
+            <div class="text1">{{ title }}</div>
+            <div class="text2">{{ desc }}</div>
         </div>
         <div class="border2"></div>
         <div class="price">
@@ -82,6 +79,7 @@ export default {
     data() {
         return {
             takeout: [],
+            count: 1,
             list: {
                 transactionId: '2019052035464',
                 createdAt: '2021-09-03 14:18:26',
@@ -110,6 +108,26 @@ export default {
             }
         };
     },
+    computed: {
+        img() {
+            const imgs = [
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-17-13-59-28rUgbNkZY.png',
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_shengheshibai.png'
+            ];
+            return imgs[this.count === 1 ? 0 : 1];
+        },
+        title() {
+            const list = ['退款审核中', '退款成功'];
+            return list[this.count === 1 ? 0 : 1];
+        },
+        desc() {
+            const list = [
+                '退款审核中，请耐心等待，退款将在72小时内按照原支付渠道返回，请注意查收',
+                '申请成功，退款将在72小时内按照原支付渠道返回，请注意查收'
+            ];
+            return list[this.count === 1 ? 0 : 1];
+        }
+    },
     methods: {
         orderCopy() {
             wx.setClipboardData({
@@ -135,13 +153,15 @@ export default {
 .apply {
     padding-bottom: 30px;
     .top {
-        margin: 30px 60px 50px;
-        img {
+        margin: 40px 60px 50px;
+        .img {
             width: 60px;
             height: 60px;
             margin-left: 98px;
         }
-        p {
+        .flex-col();
+        text-align: center;
+        .text1 {
             font-size: 16px;
             font-weight: bold;
             color: #000000;
@@ -149,10 +169,8 @@ export default {
             text-align: center;
             margin: 20px 0 16px 0px;
         }
-        span {
-            width: 255px;
+        .text2 {
             font-size: 14px;
-            font-weight: 400;
             color: #939599;
             line-height: 24px;
         }

src/pages/confirmorder.vue

@@ -383,6 +383,9 @@ export default {
     /deep/ .van-button {
         .button();
     }
+    /deep/ .van-field__input {
+        width: 171px;
+    }
     /deep/ .van-popup {
         margin-bottom: 0;
     }

src/pages/merchantorders.vue

@@ -173,7 +173,12 @@
                     <div class="remark">哇塞，太好吃了吧，下次还要点，收藏起来。</div>
                     <div class="image">
                         <div v-for="(item, index) in lists" :key="index">
-                            <img class="img" :src="item.image" alt="" />
+                            <img
+                                class="img"
+                                @click="preview(item.image, getImgs(lists))"
+                                :src="item.image + oss"
+                                alt=""
+                            />
                         </div>
                     </div>
                 </div>
@@ -282,16 +287,26 @@ export default {
         allreadyGoodsList() {
             let resultArr = this.merchantorListsData.filter(item => item.currentNum > 0);
             return resultArr;
+        },
+        oss() {
+            return `?x-oss-process=image/resize,l_300`;
         }
     },
     created() {
         merchantorLists.forEach(item => {
+            // 数量
             item.currentNum = 0;
+            // 总价
             item.currentCount = 0;
             this.merchantorListsData.push(item);
         });
     },
     methods: {
+        getImgs(list) {
+            return list.map(item => {
+                return item.image;
+            });
+        },
         tab(item) {
             this.active = item;
         },