评价&弹框购物车

project.private.config.json

@@ -40,6 +40,13 @@
                     "query": "",
                     "scene": null
                 },
+                {
+                    "id": -1,
+                    "name": "评价",
+                    "pathName": "/pages/evaluate",
+                    "query": "",
+                    "scene": null
+                },
                 {
                     "id": -1,
                     "name": "店家搜索",

src/components/NavMerchantir.vue

@@ -35,13 +35,13 @@ export default {
     left: 0;
     right: 0;
     position: fixed;
-    z-index: 999;
+    z-index: 100;
     transition: all ease-in-out 0.3s;
     padding: 0 15px;
     .flex();
     /deep/ ._van-icon {
         position: relative;
-        z-index: 999;
+        z-index: 100;
     }
 }
 </style>

src/components/NavTitle.vue

@@ -36,7 +36,7 @@ export default {
     left: 0;
     right: 0;
     position: fixed;
-    z-index: 101;
+    z-index: 100;
     transition: all ease-in-out 0.3s;
     padding: 0 15px;
     .flex();
@@ -51,12 +51,12 @@ export default {
         font-size: 17px;
         line-height: 44px;
         text-align: center;
-        z-index: 101;
+        z-index: 100;
     }
 
     ._van-icon {
         position: relative;
-        z-index: 101;
+        z-index: 100;
     }
 }
 </style>

src/main.js

@@ -45,6 +45,7 @@ export default {
             'pages/shoppingCart',
             'pages/orderdetails',
             'pages/collection',
+            'pages/evaluate',
             'pages/apply'
         ],
         tabBar: {

src/pages/apply.vue

@@ -62,13 +62,18 @@ export default {
             orderInfoId: 0,
             refundId: 0,
             show: false,
-            // showdialog: false,
             actions: [
                 {
-                    name: '地址/电话等信息填写错误',
-                    name1: '多拍/错拍/不想要',
-                    name2: '其他原因',
-                    name3: '取消'
+                    name: '地址/电话等信息填写错误'
+                },
+                {
+                    name: '多拍/错拍/不想要'
+                },
+                {
+                    name: '其他原因'
+                },
+                {
+                    name: '取消'
                 }
             ]
         };

src/pages/confirmorder.vue

@@ -136,13 +136,7 @@
             <van-button type="warning" @click="order">确认订单</van-button>
         </div>
 
-        <van-action-sheet
-            :show="show"
-            description="选择预计送达时间"
-            cancel-text="取消"
-            @cancel="show = false"
-            @overlay="overlay = false"
-        >
+        <van-action-sheet :show="show" description="选择预计送达时间" @cancel="show = false" @close="show = false">
             <van-tree-select
                 :items="items"
                 :main-active-index="mainActiveIndex"

src/pages/evaluate.vue

@@ -0,0 +1,320 @@
+<config>
+{
+    "navigationBarTitleText": "评价",
+}
+</config>
+<template>
+    <div class="container">
+        <div class="top">
+            <div class="address">
+                <div class="text">
+                    <van-image
+                        width="18"
+                        height="18"
+                        style="margin-left:12px"
+                        lazy-load
+                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-14-32-43SJNYKNqV.png"
+                    />
+                    <div class="text1">益禾堂(一食堂)</div>
+                </div>
+                <div class="text">
+                    <van-image
+                        width="24"
+                        height="24"
+                        lazy-load
+                        @click="choice"
+                        :src="
+                            `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
+                                flag ? '2021-09-02-15-24-13nwVzJqXX.png' : '2021-09-02-14-49-00OrkCuHPB.png'
+                            }`
+                        "
+                    />
+                    <div class="text1">匿名评价</div>
+                </div>
+            </div>
+            <div class="content">
+                <div class="text1">总体</div>
+                <van-rate
+                    :value="value"
+                    :size="16"
+                    color="#159EFF"
+                    void-icon="star"
+                    void-color="#eee"
+                    @change="onChange"
+                />
+                <div class="text1 text2">非常满意</div>
+            </div>
+            <div class="content">
+                <div class="text1">口味</div>
+                <van-rate
+                    :value="value"
+                    :size="16"
+                    color="#159EFF"
+                    void-icon="star"
+                    void-color="#eee"
+                    @change="onChange2"
+                />
+                <div class="text1 text2">一般</div>
+            </div>
+            <div class="content">
+                <div class="text1">配送</div>
+                <van-rate
+                    :value="value"
+                    :size="16"
+                    color="#159EFF"
+                    void-icon="star"
+                    void-color="#eee"
+                    @change="onChange3"
+                />
+                <div class="text1 text2">差</div>
+            </div>
+        </div>
+        <div class="evaluate">
+            <div class="title">评价</div>
+            <van-field
+                :value="form.description"
+                @input="form.description = $event.detail"
+                :border="false"
+                rows="1"
+                autosize
+                type="textarea"
+                placeholder="请填写您的用餐评价，推荐给大家"
+            />
+            <van-uploader
+                class="uploader"
+                :max-count="3"
+                :file-list="images"
+                :after-read="afterRead"
+                @delete="deleteImg"
+            />
+            <div class="text1">最多上传三张</div>
+        </div>
+        <div class="bottom">
+            <div class="text">
+                <div class="text1">鸡翅-对</div>
+                <div class="text2">
+                    <div class="text3">
+                        <van-image
+                            width="16"
+                            height="16"
+                            lazy-load
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-18-56FYFucJaK.png"
+                        />
+                        <div class="text4">踩</div>
+                    </div>
+                    <div class="text3">
+                        <van-image
+                            width="16"
+                            height="16"
+                            lazy-load
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-19-33eTFCBfIW.png"
+                        />
+                        <div class="text4">赞</div>
+                    </div>
+                </div>
+            </div>
+            <div class="text">
+                <div class="text1">寿司</div>
+                <div class="text2">
+                    <div class="text3">
+                        <van-image
+                            width="16"
+                            height="16"
+                            lazy-load
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-21-07FIiyRFOr.png"
+                        />
+                        <div class="text4">踩</div>
+                    </div>
+                    <div class="text3">
+                        <van-image
+                            width="16"
+                            height="16"
+                            lazy-load
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-21-26mmGMCJVF.png"
+                        />
+                        <div class="text4">赞</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="btn">
+            <van-button type="primary" block>确认</van-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            form: {},
+            list: [],
+            flag: false,
+            img: [],
+            images: []
+        };
+    },
+    methods: {
+        onChange() {},
+        onChange2() {},
+        onChange3() {},
+        afterRead(file) {
+            this.showLoading();
+            this.$http
+                .uploadFile(file.path)
+                .then(res => {
+                    this.hideLoading();
+                    console.log(res);
+                    // this.images = [
+                    //     {
+                    //         url: res
+                    //     }
+                    // ];
+                    return this.img.push(res).map(item => {
+                        return (this.images = [{ url: item }]);
+                    });
+                    // console.log(this.images);
+                    // console.log(this.images);
+                })
+                .catch(e => {
+                    this.hideLoading();
+                    wx.showToast({
+                        icon: 'none',
+                        title: e.error
+                    });
+                });
+        },
+        deleteImg(e) {
+            let list = [...this.images];
+            list.splice(e.detail.index, 1);
+            this.images = list;
+        },
+        choice() {
+            if (this.flag === true) {
+                this.flag = false;
+            } else {
+                this.flag = true;
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    padding: 20px 12px 180px 12px;
+    background: #f5f7fa;
+    /deep/ .van-rate__item {
+        padding-left: 20px !important;
+        color: #000;
+    }
+    /deep/ .van-cell {
+        padding: var(--cell-vertical-padding, 10px) var(--cell-horizontal-padding, 12px);
+    }
+    /deep/ .van-cell__value {
+        height: 100px !important;
+    }
+    .top {
+        width: 351px;
+        height: 188px;
+        background: #ffffff;
+        border-radius: 12px;
+        .address {
+            .flex();
+            justify-content: space-between;
+            padding: 20px 0;
+            .text {
+                .flex();
+                margin-right: 12px;
+                line-height: 10px;
+                .text1 {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #000000;
+                    line-height: 18px;
+                    margin-left: 4px;
+                }
+            }
+        }
+        .content {
+            .flex();
+            margin: 0 12px 18px 12px;
+            .text1 {
+                font-size: 14px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 24px;
+                &.text2 {
+                    margin-left: 20px;
+                }
+            }
+        }
+    }
+    .evaluate {
+        width: 351px;
+        height: 266px;
+        background: #ffffff;
+        border-radius: 12px;
+        padding: 20px 0 20px 0;
+        margin: 20px 0;
+        .title {
+            font-size: 14px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+            margin-left: 12px;
+            margin-bottom: 6px;
+        }
+        .uploader {
+            margin: 112px 0 0 12px;
+        }
+        .text1 {
+            font-size: 13px;
+            font-weight: 400;
+            color: #aaabad;
+            line-height: 18px;
+            margin: 8px 0 0 12px;
+        }
+    }
+    .bottom {
+        width: 351px;
+        height: 64px;
+        padding: 20px 0;
+        background: #ffffff;
+        border-radius: 12px;
+        .text {
+            .flex();
+            justify-content: space-between;
+            margin: 0 12px 16px;
+            .text1 {
+                font-size: 14px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 24px;
+            }
+            .text2 {
+                .flex();
+                line-height: 6px;
+                .text3 {
+                    .flex();
+                    margin-left: 16px;
+                    .text4 {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #000000;
+                        line-height: 24px;
+                        margin-left: 4px;
+                    }
+                }
+            }
+        }
+    }
+    .btn {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 6px 43px;
+        background-color: #fff;
+        .bottom(6px);
+    }
+}
+</style>

src/pages/merchantorders.vue

@@ -212,6 +212,7 @@
                         }`
                     "
                     alt=""
+                    @click="addFlag"
                 />
                 <div>
                     <div class="box-con-num">
@@ -226,6 +227,38 @@
             </div>
             <van-button :disabled="!canSubmit" type="warning" @click="order">结算</van-button>
         </div>
+        <van-popup :show="show" position="bottom" @close="show = false">
+            <div class="popupTop">
+                <div class="text1">已选商品</div>
+                <div class="text2">(包装费 ¥5)</div>
+            </div>
+            <div
+                @click="navigateTo('/pages/storedetails')"
+                class="popup"
+                v-for="(item, index) in merchantorLists"
+                :key="index"
+            >
+                <div class="merchantroCon">
+                    <img :src="item.image" alt="" />
+                    <div>
+                        <div class="text1">{{ item.name }}</div>
+                        <div class="bottom" @click.stop>
+                            <div class="price">¥{{ item.price }}.00</div>
+                            <div v-if="count == 0">
+                                <div class="add" @click="falgs(item.price)">+</div>
+                            </div>
+                            <van-stepper
+                                v-else
+                                :min="min"
+                                @minus="minus(item.price)"
+                                @plus="add(item.price)"
+                                @change="onChange"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </van-popup>
     </div>
 </template>
 <script>
@@ -239,6 +272,7 @@ export default {
             active2: '全部',
             falg: 0,
             min: 0,
+            show: false,
             count: 0,
             tal: 0,
             tabs: ['点餐', '评价', '商家'],
@@ -254,13 +288,13 @@ export default {
             lists: [
                 {
                     price: '11',
-                    name: '南瓜粥',
+                    name: '寿司',
                     num: '1',
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
                 },
                 {
                     price: '22',
-                    name: '南瓜粥,八宝粥',
+                    name: '寿司,八宝粥',
                     num: '2',
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif'
                 }
@@ -286,7 +320,7 @@ export default {
             ],
             merchantorLists: [
                 {
-                    name: '南瓜粥',
+                    name: '寿司',
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
                     num: '226',
                     price: 20
@@ -341,6 +375,15 @@ export default {
         onChange(e) {
             this.count = e.detail;
         },
+        addFlag() {
+            if (this.count > 0) {
+                if (this.show === true) {
+                    this.show = false;
+                } else {
+                    this.show = true;
+                }
+            }
+        },
         falgs(price) {
             this.tal = price * 1;
             this.count = 1;
@@ -370,8 +413,12 @@ export default {
         margin-right: 16px;
         border: 0;
     }
+    /deep/ .van-popup {
+        margin-bottom: 73px;
+        border-radius: 12px 12px 0 0;
+    }
     /deep/ .van-tree-select {
-        margin: 21px -20px 0 -20px;
+        margin: 21px -20px 0;
     }
     /deep/ .van-sidebar-item {
         padding: 8px 0 8px 16px;
@@ -620,8 +667,7 @@ export default {
                         width: 80px;
                         height: 80px;
                         border-radius: 8px;
-                        margin-right: 12px;
-                        margin-top: 5px;
+                        margin: 5px 12px 0 0;
                     }
                 }
             }
@@ -672,6 +718,7 @@ export default {
         .bottom();
         .flex();
         height: 56px;
+        z-index: 101;
         justify-content: space-between;
         background: #ffffff;
         box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
@@ -714,5 +761,66 @@ export default {
             }
         }
     }
+    .popupTop {
+        .flex();
+        margin: 16px 0 0 16px;
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 18px;
+        .text1 {
+            color: #1c1c1c;
+            margin-right: 6px;
+        }
+        .text2 {
+            color: #939599;
+        }
+    }
+    .popup {
+        padding: 0 16px 0 16px;
+        .merchantroCon {
+            .flex();
+            margin-top: 20px;
+            img {
+                width: 80px;
+                height: 80px;
+                border-radius: 8px;
+                margin: 0 10px 0 0;
+            }
+            .text1 {
+                font-size: 14px;
+                font-weight: bold;
+                color: #1c1c1c;
+                line-height: 24px;
+                margin-bottom: 32px;
+            }
+            .text2 {
+                font-size: 13px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 18px;
+                margin: 2px 0 6px;
+            }
+            .bottom {
+                .flex();
+                justify-content: space-between;
+                width: 252px;
+                .price {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #ff7f1f;
+                    line-height: 24px;
+                }
+                .add {
+                    width: 24px;
+                    height: 24px;
+                    background: @prim;
+                    line-height: 24px;
+                    text-align: center;
+                    font-weight: bold;
+                    color: #fff;
+                }
+            }
+        }
+    }
 }
 </style>

src/pages/shoppingCart.vue

@@ -131,21 +131,21 @@ export default {
             count: 0,
             merchantorLists: [
                 {
-                    name: '南瓜粥',
+                    name: '寿司',
                     id: 1,
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
                     num: '226',
                     price: 20
                 },
                 {
-                    name: '南瓜粥',
+                    name: '寿司',
                     id: 2,
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
                     num: '226',
                     price: 20
                 },
                 {
-                    name: '南瓜粥',
+                    name: '寿司',
                     id: 3,
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
                     num: '226',

src/vant/uploader/index.js

@@ -81,6 +81,7 @@ VantComponent({
             this.setData({ lists, isInCount: lists.length < maxCount });
         },
         getDetail(index) {
+            console.log(index);
             return {
                 name: this.data.name,
                 index: index == null ? this.data.fileList.length : index