购物车

src/components/NavTitles.vue

@@ -0,0 +1,62 @@
+<template>
+    <div
+        class="header"
+        style="height:44px"
+        :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor, backgroundColor: bgColor }"
+    >
+        <span class="name" :style="{ color: fontColor }"><slot></slot></span>
+        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            colorType: 'light'
+        };
+    },
+    computed: {
+        ...mapState(['systemInfo']),
+        fontColor() {
+            if (this.colorType == 'light') {
+                return '#fff';
+            } else {
+                return '#000';
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.header {
+    top: 0;
+    left: 0;
+    right: 0;
+    position: fixed;
+    z-index: 101;
+    transition: all ease-in-out 0.3s;
+    padding: 0 15px;
+    .flex();
+
+    .name {
+        padding: 0 100px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 44px;
+        bottom: 0;
+        font-size: 17px;
+        line-height: 44px;
+        text-align: center;
+        z-index: 101;
+    }
+
+    ._van-icon {
+        position: relative;
+        z-index: 101;
+    }
+}
+</style>

src/main.js

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

src/pages/Home.vue

@@ -162,7 +162,7 @@ export default {
         .tabs {
             font-size: 16px;
             font-weight: 400;
-            color: #000000;
+            color: @text2;
             line-height: 22px;
             margin: 26px 30px 0 0;
             padding-bottom: 11px;

src/pages/confirmorder.vue

@@ -10,7 +10,11 @@
         <nav-title>提交订单</nav-title>
         <van-sticky>
             <div class="top">
-                <img class="mytest" src="../native/imgs/img_home_top@4x.png" alt="" />
+                <img
+                    class="mytest"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
+                    alt=""
+                />
                 <div class="box">
                     <div class="tabs">
                         <div
@@ -111,7 +115,10 @@
         <div class="box-total">
             <div class="box-con-num">
                 <span>合计</span>
-                <img src="../native/imgs/icon_jiage@3x.png" alt="" />
+                <img
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
+                    alt=""
+                />
                 <p>{{ list.total }}</p>
             </div>
             <van-button type="warning" @click="order">确认订单</van-button>

src/pages/merchantorders.vue

@@ -10,7 +10,11 @@
         <nav-merchantir></nav-merchantir>
         <van-sticky>
             <div class="top">
-                <img class="mytest" src="../native/imgs/img_home_top@4x.png" alt="" />
+                <img
+                    class="mytest"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
+                    alt=""
+                />
                 <div class="box">
                     <div class="title" v-for="(item, index) in topList" :key="index">
                         <div>
@@ -171,7 +175,10 @@
                 />
                 <div>
                     <div class="box-con-num">
-                        <img src="../native/imgs/icon_jiage@3x.png" alt="" />
+                        <img
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
+                            alt=""
+                        />
                         <p>{{ tal }}.00</p>
                     </div>
                     <div class="text1">另外配送费2元</div>

src/pages/mine.vue

@@ -1,6 +1,7 @@
 <config>
 {
     "backgroundTextStyle":"light",
+    "navigationBarTextStyle": "white",
     "navigationStyle": "custom",
     "usingComponents": {
         "van-grid": "/vant/grid/index",
@@ -30,7 +31,7 @@
             </div>
             <div class="mine">
                 <van-grid class="menu" column-num="3" :border="false" clickable>
-                    <van-grid-item text="购物车">
+                    <van-grid-item text="购物车" @click="navigateTo('/pages/shoppingCart')">
                         <img class="gird-icon" src="../native/tabbar/info_icon_gouwuche@3x.png" slot="icon" alt="" />
                     </van-grid-item>
                     <van-grid-item text="地址" @click="navigateTo('/pages/chooseAddress')">

src/pages/orderdetails.vue

@@ -12,7 +12,11 @@
         <nav-header></nav-header>
         <van-sticky>
             <div class="top">
-                <img class="mytest" src="../native/imgs/img_home_top@4x.png" alt="" />
+                <img
+                    class="mytest"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
+                    alt=""
+                />
                 <div class="text1">待支付</div>
                 <div class="text2">请尽快支付，04分56秒 后未支付将自动取消订单</div>
             </div>

src/pages/shoppingCart.vue

@@ -0,0 +1,416 @@
+<config>
+{
+    "navigationBarTextStyle": "white",
+    "navigationStyle": "custom",
+    "backgroundColorTop":'#159EFF',
+}
+</config>
+<template>
+    <div class="container">
+        <nav-title>购物车</nav-title>
+        <van-sticky>
+            <div class="top">
+                <img
+                    class="mytest"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
+                    alt=""
+                />
+                <div class="text">
+                    <div class="text1">总共3商品</div>
+                    <div class="text1 text2" @click="admini">{{ `${flag ? '管理' : '完成'}` }}</div>
+                </div>
+
+                <div class="box">
+                    <div class="tit">
+                        <div class="tit1">益禾堂(一食堂)</div>
+                        <img
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-00-34HfjfViyv.png"
+                            alt=""
+                        />
+                    </div>
+                    <div class="border"></div>
+                    <div class="merchantroCon" v-for="(item, index) in merchantorLists" :key="index">
+                        <img
+                            style="width:24px;height:24px;margin:0;padding-left:12px"
+                            :src="
+                                `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
+                                    list.includes(item.id)
+                                        ? '2021-09-02-15-24-13nwVzJqXX.png'
+                                        : '2021-09-02-14-49-00OrkCuHPB.png'
+                                }`
+                            "
+                            alt=""
+                            @click="pushId(item.id)"
+                        />
+                        <img :src="item.image" alt="" />
+                        <div>
+                            <div class="text1">{{ item.name }}</div>
+                            <div class="text2">规格200g</div>
+                            <div class="bottom" @click.stop>
+                                <van-stepper
+                                    min="1"
+                                    @minus="minus(item.price)"
+                                    @plus="add(item.price)"
+                                    @change="onChange"
+                                />
+                                <div class="price">¥{{ item.price }}.00</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="order">
+                        <div class="text1">打包费</div>
+                        <div class="text1 text2">¥2</div>
+                    </div>
+                    <div class="order">
+                        <div class="text1">配送费</div>
+                        <div class="text1 text2">¥2</div>
+                    </div>
+                    <div class="border"></div>
+                    <div class="pay">
+                        <span>实付款</span>
+                        <img
+                            style="width:12px;height:13px"
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
+                            alt=""
+                        />
+                        <p>24.00</p>
+                        <div class="btn">
+                            <van-button :disabled="!btn">立即支付</van-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </van-sticky>
+        <div class="box-total">
+            <div class="box-con-num">
+                <img
+                    style="width:24px;height:24px;margin:0;"
+                    :src="
+                        `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
+                            list.length == merchantorLists.length
+                                ? '2021-09-02-15-24-13nwVzJqXX.png'
+                                : '2021-09-02-14-49-00OrkCuHPB.png'
+                        }`
+                    "
+                    alt=""
+                    @click="all"
+                />
+                <div class="all">全选</div>
+                <span v-if="flag">合计</span>
+                <img
+                    v-if="flag"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
+                    alt=""
+                />
+                <p v-if="flag">24.00</p>
+            </div>
+            <van-button v-if="flag" type="warning" @click="order">一键结算</van-button>
+            <van-button :disabled="!btn" v-else type="warning">删除</van-button>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import NavTitle from '../components/NavTitles.vue';
+export default {
+    components: { NavTitle },
+    computed: {
+        ...mapState(['userInfo']),
+        btn() {
+            if (this.list.length > 0) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    },
+    data() {
+        return {
+            list: [],
+            flag: true,
+            count: 0,
+            merchantorLists: [
+                {
+                    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: '南瓜粥',
+                    id: 2,
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+                    num: '226',
+                    price: 20
+                },
+                {
+                    name: '南瓜粥',
+                    id: 3,
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+                    num: '226',
+                    price: 20
+                }
+            ]
+        };
+    },
+    methods: {
+        order() {
+            this.navigateTo('/pages/orderdetails');
+        },
+        all() {
+            if (this.list.length == this.merchantorLists.length) {
+                this.list = [];
+            } else {
+                this.list = [...this.merchantorLists].map(item => {
+                    return item.id;
+                });
+            }
+        },
+        admini() {
+            if (this.flag) {
+                this.flag = false;
+            } else {
+                this.flag = true;
+            }
+        },
+        checkId(id) {
+            return this.list.includes(id);
+        },
+        pushId(id) {
+            if (this.checkId(id)) {
+                this.list.splice(this.list.indexOf(id), 1);
+            } else {
+                this.list.push(id);
+            }
+        },
+        onChange(e) {
+            this.count = e.detail;
+        },
+        add(price) {
+            this.tal = this.tal + price + this.count;
+        },
+        minus(price) {
+            this.min = 0;
+            this.tal = price * this.count;
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    background: #f5f7fa;
+    min-height: 600px;
+    padding-bottom: 140px;
+    /deep/ .van-button {
+        width: 120px;
+        height: 44px;
+        background: #159eff;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        margin-right: 16px;
+        border: 0;
+    }
+    /deep/ .van-stepper__minus {
+        width: 28px;
+        height: 24px;
+        background: #159eff;
+        color: #fff;
+    }
+    /deep/ .van-stepper__plus {
+        width: 28px;
+        height: 24px;
+        background: #159eff;
+        color: #fff;
+    }
+    /deep/ .van-stepper__input {
+        width: 28px;
+        height: 24px;
+        background: #f5f7fa;
+        border-radius: 2px;
+        margin: 0 2px;
+    }
+    .top {
+        padding: 108px 12px 0;
+        .mytest {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            width: 100%;
+            height: 200px;
+            z-index: -1;
+            img {
+                width: 100vw;
+                display: block;
+            }
+        }
+        .text {
+            .flex();
+            justify-content: space-between;
+            margin-bottom: 10px;
+            .text1 {
+                font-size: 13px;
+                font-weight: 400;
+                padding-left: 5px;
+                color: #ffffff;
+                line-height: 18px;
+                &.text2 {
+                    font-size: 14px;
+                    padding-right: 5px;
+                }
+            }
+        }
+        .box {
+            width: 351px;
+            background: #ffffff;
+            padding: 16px 0 22px;
+            border-radius: 12px;
+            .tit {
+                .flex();
+                margin-left: 43px;
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+                .tit1 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #000000;
+                    margin-right: 5px;
+                    line-height: 24px;
+                }
+            }
+            .merchantroCon {
+                .flex();
+                margin-bottom: 10px;
+                img {
+                    width: 80px;
+                    height: 80px;
+                    border-radius: 8px;
+                    margin: 0 10px 0 7px;
+                }
+                .text1 {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #1c1c1c;
+                    line-height: 24px;
+                }
+                .text2 {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 18px;
+                    margin: 2px 0 6px;
+                }
+                .bottom {
+                    .flex();
+                    justify-content: space-between;
+                    width: 208px;
+                    .price {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #ff7f1f;
+                        line-height: 24px;
+                    }
+                }
+            }
+            .order {
+                .flex();
+                margin: 0 0 4px 32px;
+                justify-content: space-between;
+                padding: 0 12px;
+                .text1 {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                    &.text2 {
+                        color: #ff7f1f;
+                    }
+                }
+            }
+        }
+        .border {
+            border: 1px solid @bg;
+            margin: 10px 12px 10px 43px;
+        }
+        .pay {
+            .flex();
+            margin-left: 147px;
+            span {
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+                margin-right: 6px;
+            }
+            img {
+                width: 13px;
+                height: 13px;
+                margin: 7px 0 4px 6px;
+            }
+            p {
+                font-size: 24px;
+                font-family: 'OSP';
+                font-weight: normal;
+                color: #ff7f1f;
+                line-height: 24px;
+                margin-right: 10px;
+            }
+            .btn {
+                /deep/ .van-button {
+                    width: 80px;
+                    height: 36px;
+                    font-size: 14px;
+                    padding: 0;
+                    margin: 0;
+                }
+            }
+        }
+    }
+    .box-total {
+        .bottom();
+        .flex();
+        height: 56px;
+        justify-content: space-between;
+        background: #ffffff;
+        width: 100%;
+        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
+        position: fixed;
+        bottom: 0;
+        .box-con-num {
+            .flex();
+            margin-left: 14px;
+            span {
+                font-size: 14px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 24px;
+            }
+            img {
+                width: 13px;
+                height: 13px;
+                margin: 7px 0 0 5px;
+            }
+            p {
+                font-family: 'OSP';
+                font-size: 34px;
+                font-weight: normal;
+                color: #ff7f1f;
+                line-height: 34px;
+            }
+            .all {
+                font-size: 14px;
+                font-weight: 400;
+                margin: 0 20px 0 7px;
+                color: #939599;
+                line-height: 20px;
+            }
+        }
+    }
+}
+</style>

src/pages/storedetails.vue

@@ -28,7 +28,10 @@
                 </div>
                 <div class="buttom">
                     <div class="text">
-                        <img src="../native/imgs/icon_jiage@3x.png" alt="" />
+                        <img
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
+                            alt=""
+                        />
                         <div class="text1">20.00</div>
                         <div class="text2">另外配送费2元</div>
                     </div>
@@ -106,7 +109,10 @@
                 />
                 <div>
                     <div class="box-con-num">
-                        <img src="../native/imgs/icon_jiage@3x.png" alt="" />
+                        <img
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
+                            alt=""
+                        />
                         <p>22.00</p>
                     </div>
                     <div class="text1">另外配送费2元</div>