搜索

src/components/AllorderInfo.vue

@@ -37,8 +37,9 @@
                 </div>
                 <div class="time">
                     <p>下单时间: {{ list.createdAt }}</p>
-                    <div>
-                        <div class="text1 text2">合计：¥{{ list.total }}</div>
+                    <div class="text">
+                        <div class="text1">合计：</div>
+                        <div class="text2">¥{{ list.total }}</div>
                     </div>
                 </div>
             </div>
@@ -59,17 +60,17 @@ export default {
                 lists: [
                     {
                         price: '11',
-                        name: '南瓜粥',
+                        name: '寿司',
                         num: '1',
                         imges:
-                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg'
+                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
                     },
                     {
                         price: '22',
-                        name: '南瓜粥,八宝粥',
+                        name: '寿司,八宝粥',
                         num: '2',
                         imges:
-                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg'
+                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
                     }
                 ]
             }
@@ -178,6 +179,10 @@ export default {
                     font-weight: bold;
                     color: #1c1c1c;
                     line-height: 24px;
+                    width: 80px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
                 }
                 .list {
                     .flex();
@@ -204,14 +209,19 @@ export default {
                     color: #c8c9cc;
                     line-height: 24px;
                 }
-                .text1 {
-                    font-size: 14px;
+                .text {
+                    .flex();
                     font-weight: bold;
-                    color: #c8c9cc;
-                    line-height: 24px;
-                }
-                &.text2 {
-                    color: #000;
+                    .text1 {
+                        font-size: 14px;
+                        color: #c8c9cc;
+                        line-height: 24px;
+                    }
+                    .text2 {
+                        font-size: 16px;
+                        color: #1c1c1c;
+                        line-height: 26px;
+                    }
                 }
             }
         }

src/main.js

@@ -41,6 +41,7 @@ export default {
             'pages/storedetails',
             'pages/confirmorder',
             'pages/shopsearch',
+            'pages/schoolsearch',
             'pages/shoppingCart',
             'pages/orderdetails',
             'pages/apply'

src/pages/Home.vue

@@ -11,21 +11,31 @@
             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-01-17-33-55YcQJEaXa.png"
             alt=""
         />
+        <!-- <van-sticky> -->
         <div class="top">
             <div class="address">
                 <img class="avatar" v-if="userInfo" :src="userInfo.avatar" />
-                <div>
+                <div @click.stop="navigateTo('/pages/schoolsearch')">
                     <div class="text1">南京***大学</div>
                     <div class="text1">江宁校区</div>
                 </div>
+                <van-image
+                    style="margin:25px 0 0 -13px"
+                    width="16"
+                    height="16"
+                    lazy-load
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-10-33-11pcsYuQkQ.png"
+                />
             </div>
             <div class="search">
                 <van-field
                     :value="searchVal"
+                    left-icon="search"
+                    input-align="center"
+                    :placeholder-style="red"
                     @click="navigateTo('/pages/shopsearch')"
                     type="text"
                     clearable
-                    placeholder="搜索"
                 />
             </div>
             <swiper class="swiper" :autoplay="true" :indicator-dots="true">
@@ -35,6 +45,13 @@
             </swiper>
         </div>
         <div class="tab">
+            <van-image
+                style="position:absolute;margin:18px 0 0 75px"
+                width="16"
+                height="16"
+                lazy-load
+                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-10-36-12iLAzbiVk.png"
+            />
             <div
                 class="tabs"
                 :class="{ active: item === active }"
@@ -45,6 +62,7 @@
                 {{ item }}
             </div>
         </div>
+        <!-- </van-sticky> -->
         <div class="conTent">
             <div
                 @click="navigateTo('/pages/merchantorders')"
@@ -81,14 +99,9 @@ export default {
             banners: ['https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-40-54wLiqaRNi.png'],
             merchantorLists: [
                 {
-                    name: '南瓜粥',
+                    name: '寿司',
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
                     num: '226'
-                },
-                {
-                    name: '八宝粥',
-                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif',
-                    num: '26'
                 }
             ],
             active: '综合排序',
@@ -141,8 +154,6 @@ export default {
             /deep/ .van-cell {
                 --cell-vertical-padding: 4px;
                 width: 100%;
-                text-align: center;
-                color: #fff !important;
                 height: 32px;
                 border-radius: 21px;
                 opacity: 0.29;
@@ -162,28 +173,37 @@ export default {
         .tabs {
             font-size: 16px;
             font-weight: 400;
-            color: @text2;
+            color: #c8c9cc;
             line-height: 22px;
-            margin: 26px 30px 0 0;
+            margin: 26px 34px 0 0;
             padding-bottom: 11px;
             &.active {
                 font-size: 18px;
                 color: #159eff;
-                border-bottom: 1px solid #159eff;
+                border-bottom: 2px solid #159eff;
+                // width: 6px;
             }
         }
+        .tabs:last-child {
+            margin-right: 0;
+        }
+        .tabs:nth-child(3) {
+            margin-left: 16px;
+        }
         border-bottom: 1px solid @bg;
     }
     .conTent {
         margin-top: 27px;
+        padding: 12px;
+        border-radius: 8px;
+        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
         .merchantroCon {
             .flex();
-            margin-bottom: 20px;
             img {
                 width: 116px;
                 height: 116px;
                 border-radius: 8px;
-                margin: 0 10px 0 14px;
+                margin-right: 10px;
             }
             .text1 {
                 font-size: 16px;

src/pages/confirmorder.vue

@@ -27,7 +27,7 @@
                             {{ item }}
                         </div>
                     </div>
-                    <div class="address" @click="navigateTo('/pages/chooseAddress')">
+                    <div class="address" @click.stop="navigateTo('/pages/chooseAddress')">
                         <div>
                             <div class="text">
                                 <img src="../native/imgs/icon_home_top_dingwei@3x.png" alt="" />

src/pages/orderdetails.vue

@@ -18,7 +18,10 @@
                     alt=""
                 />
                 <div class="text1">待支付</div>
-                <div class="text2">请尽快支付，04分56秒 后未支付将自动取消订单</div>
+                <div class="text2">
+                    请尽快支付，<span v-if="minters < 10">0</span>{{ minters }}分<span v-if="seconds < 10">0</span
+                    >{{ seconds }} 后未支付将自动取消订单
+                </div>
             </div>
         </van-sticky>
         <div class="conBox">
@@ -44,14 +47,15 @@
             </div>
             <div class="order">
                 <div class="text1">打包费</div>
-                <div class="text1">¥{{ list.packPrice }}</div>
+                <div class="text2">¥{{ list.packPrice }}</div>
             </div>
             <div class="order order2">
                 <div class="text1">配送费</div>
-                <div class="text1">¥{{ list.distributionPrice }}</div>
+                <div class="text2">¥{{ list.distributionPrice }}</div>
             </div>
-            <div class="add">
-                <div class="text">合计：¥{{ list.total }}</div>
+            <div class="text">
+                <div class="text1">合计：</div>
+                <div class="text2">¥{{ list.total }}</div>
             </div>
             <div class="border2"></div>
             <div class="address">
@@ -112,10 +116,14 @@ export default {
     components: { NavHeader },
     data() {
         return {
+            minters: 0,
+            seconds: 0,
+            allTime: 5 * 60 - 1,
+            closeTime: '',
             takeout: [],
             list: {
                 transactionId: '2019052035464',
-                createdAt: '2021-05-20 07:52:36',
+                createdAt: '2021-09-03 14:18:26',
                 remark: '加急',
                 packPrice: '2',
                 distributionPrice: '2',
@@ -123,27 +131,79 @@ export default {
                 lists: [
                     {
                         price: '11',
-                        name: '南瓜粥',
+                        name: '寿司',
+                        id: 2,
                         num: '1',
                         image:
-                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg'
+                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
                     },
                     {
                         price: '22',
-                        name: '南瓜粥,八宝粥',
+                        name: '寿司,八宝粥',
+                        id: 5,
                         num: '2',
                         image:
-                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg'
+                            'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
                     }
                 ]
             }
         };
     },
     methods: {
+        initTime(dingdanId, initTime) {
+            let oldTime = new Date(initTime).valueOf();
+            let newTime = new Date().valueOf();
+            let matchedTime = undefined;
+            let matchedTime1 = undefined;
+            if (oldTime) {
+                matchedTime = newTime - oldTime;
+                matchedTime1 = this.allTime - parseInt(matchedTime / 1000);
+                if (matchedTime1 > 0) {
+                    this.timeout(matchedTime1);
+                } else {
+                    console.log(22);
+                }
+            } else {
+                if (dingdanId) {
+                    this.timeout(this.allTime);
+                }
+            }
+        },
+        timeout(time) {
+            let _this = this;
+            _this.minters = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0;
+            _this.seconds = parseInt(time - _this.minters * 60);
+            try {
+                if (_this.minters > 0) {
+                    _this.closeTime = setInterval(() => {
+                        _this.seconds--;
+                        if (_this.seconds <= 0) {
+                            _this.minters--;
+                            if (_this.minters == -1) {
+                                _this.minters = 0;
+                                _this.seconds = 0;
+                                clearInterval(_this.closeTime);
+                            } else {
+                                _this.seconds = 60;
+                            }
+                        }
+                    }, 1000);
+                } else {
+                    _this.closeTime = setInterval(() => {
+                        _this.seconds--;
+                        if (_this.seconds <= 0) {
+                            _this.seconds = 0;
+                            clearInterval(_this.closeTime);
+                        }
+                    }, 1000);
+                }
+            } catch (err) {
+                console.log(err);
+            }
+        },
         order() {
             this.navigateTo('/pages/apply');
         },
-
         orderCopy() {
             wx.setClipboardData({
                 data: this.list.transactionId + '',
@@ -151,7 +211,7 @@ export default {
                     wx.getClipboardData({
                         success(res) {
                             wx.showToast({
-                                title: '订单单号复制成功'
+                                title: '复制成功'
                             });
                         }
                     });
@@ -161,6 +221,7 @@ export default {
     },
     created() {
         this.takeout = this.list.lists;
+        this.initTime(this.takeout[0].id, this.list.createdAt);
     }
 };
 </script>
@@ -272,19 +333,30 @@ export default {
                 color: #939599;
                 line-height: 24px;
             }
+            .text2 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #1c1c1c;
+                line-height: 24px;
+            }
             &.order2 {
                 margin-bottom: 14px;
             }
         }
-        .add {
-            text-align: right;
-            padding: 0 16px;
-            .text {
+        .text {
+            .flex();
+            padding-left: 288px;
+            font-weight: bold;
+            .text1 {
                 font-size: 14px;
-                font-weight: bold;
-                color: #939599;
+                color: #c8c9cc;
                 line-height: 24px;
             }
+            .text2 {
+                font-size: 16px;
+                color: #ff7f1f;
+                line-height: 26px;
+            }
         }
         .border2 {
             height: 5px;
@@ -303,6 +375,7 @@ export default {
                 line-height: 20px;
             }
             .text1 {
+                text-align: right;
                 font-size: 16px;
                 font-weight: 400;
                 color: #000000;

src/pages/schoolsearch.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="container">
+        <div class="top">
+            <van-field
+                class="search"
+                @confirm="searchData"
+                :value="searchVal"
+                @change="change"
+                left-icon="search"
+                type="text"
+                clearable
+                placeholder="请输入你的校园"
+            />
+            <div class="text" @click="search">取消</div>
+        </div>
+        <div class="content">
+            <div class="text">热门城市</div>
+            <div class="tabs">
+                <div
+                    class="tab"
+                    :class="{ active: item === active }"
+                    v-for="(item, index) in tabs"
+                    :key="index"
+                    @click="tab(item)"
+                >
+                    {{ item }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            active: '南京',
+            searchVal: '',
+            tabs: ['南京', '上海', '广东', '杭州']
+        };
+    },
+    methods: {
+        search() {
+            // this.searchVal = '';
+            console.log(this.searchVal);
+        },
+        tab(e) {
+            this.active = e;
+        },
+        searchData(e) {
+            console.log(e);
+        },
+        change(e) {
+            console.log(e);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    min-height: 720px;
+    background: #fff;
+    /deep/ .van-cell {
+        width: 303px;
+    }
+    .top {
+        .flex();
+        padding: 20px 12px;
+        .search {
+            height: 32px;
+            overflow: hidden;
+            border-radius: 21px;
+            .flex();
+
+            ._van-field {
+                flex-grow: 1;
+            }
+            /deep/ .van-cell {
+                --cell-vertical-padding: 8px;
+                background: @bg;
+            }
+        }
+        .text {
+            font-size: 14px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 24px;
+            margin-left: 12px;
+        }
+    }
+    .content {
+        margin: 0 12px;
+        .text {
+            font-size: 16px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+        }
+        .tabs {
+            .flex();
+            margin: 10px 0 20px;
+            .tab {
+                padding: 0 14px;
+                height: 24px;
+                background: #ffffff;
+                border-radius: 12px;
+                font-size: 13px;
+                font-weight: 400;
+                color: #c8c9cc;
+                line-height: 24px;
+                text-align: center;
+                margin-right: 20px;
+                &.active {
+                    background: @prim;
+                    color: #fff;
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/shopsearch.vue

@@ -1,21 +1,143 @@
 <template>
     <div class="container">
-        <van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel" />
+        <div class="top">
+            <van-field
+                class="search"
+                @confirm="searchData"
+                :value="searchVal"
+                @change="change"
+                left-icon="search"
+                type="text"
+                clearable
+                placeholder="请输入"
+            />
+            <div class="text" @click="search">取消</div>
+        </div>
+        <div class="content">
+            <div class="text">最近搜索</div>
+            <div class="tabs">
+                <div
+                    class="tab"
+                    :class="{ active: item === active }"
+                    v-for="(item, index) in tabs"
+                    :key="index"
+                    @click="tab(item)"
+                >
+                    {{ item }}
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="text">热门搜索</div>
+            <div class="tabs">
+                <div
+                    class="tab"
+                    :class="{ active2: item === active2 }"
+                    v-for="(item, index) in tabs2"
+                    :key="index"
+                    @click="tab2(item)"
+                >
+                    {{ item }}
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
 export default {
-    data() {}
+    data() {
+        return {
+            active: '早餐',
+            active2: '排骨',
+            searchVal: '',
+            tabs: ['早餐', '炸鸡', '面条'],
+            tabs2: ['排骨', '石锅拌饭', '炸豆腐', '烤鱼']
+        };
+    },
+    methods: {
+        search() {
+            // this.searchVal = '';
+            console.log(this.searchVal);
+        },
+        tab(e) {
+            this.active = e;
+        },
+        tab2(e) {
+            this.active2 = e;
+        },
+        searchData(e) {
+            console.log(e);
+        },
+        change(e) {
+            console.log(e);
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
-/deep/ .van-search {
-    padding: 0;
-    // .van-cell--hover {
-    // }
-}
 .container {
     min-height: 720px;
     background: @bg;
+    /deep/ .van-cell {
+        width: 303px;
+    }
+    .top {
+        .flex();
+        padding: 20px 12px;
+        .search {
+            height: 32px;
+            overflow: hidden;
+            border-radius: 21px;
+            background-color: #fff;
+            .flex();
+
+            ._van-field {
+                flex-grow: 1;
+            }
+            /deep/ .van-cell {
+                --cell-vertical-padding: 8px;
+            }
+        }
+        .text {
+            font-size: 14px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 24px;
+            margin-left: 12px;
+        }
+    }
+    .content {
+        margin: 0 12px;
+        .text {
+            font-size: 16px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+        }
+        .tabs {
+            .flex();
+            margin: 10px 0 20px;
+            .tab {
+                padding: 0 14px;
+                height: 24px;
+                background: #ffffff;
+                border-radius: 12px;
+                font-size: 13px;
+                font-weight: 400;
+                color: #c8c9cc;
+                line-height: 24px;
+                text-align: center;
+                margin-right: 20px;
+                &.active {
+                    background: @prim;
+                    color: #fff;
+                }
+                &.active2 {
+                    background: @prim;
+                    color: #fff;
+                }
+            }
+        }
+    }
 }
 </style>