|
|
@@ -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>
|
xuqiang
