新增购物车页面
This commit is contained in:
parent
06b801ed25
commit
7c9e474871
|
|
@ -1,11 +1,77 @@
|
||||||
<template>
|
<template>
|
||||||
<app-layout headerBackgroundColor="#00418c" textColor="light">
|
<app-layout
|
||||||
<view class="cart-container"> </view>
|
headerBackgroundColor="#F6F6F6"
|
||||||
|
backgroundColor="#F6F6F6"
|
||||||
|
title="购物车"
|
||||||
|
textColor="dark"
|
||||||
|
>
|
||||||
|
<widget-tips
|
||||||
|
text="为什么会拆成多个订单?根据师傅服务能力与服务类型进行订单拆分"
|
||||||
|
/>
|
||||||
|
<view class="cart-container">
|
||||||
|
<view class="cart-group" v-for="(item, index) in list" :key="index">
|
||||||
|
<view
|
||||||
|
class="group-title limit-line clamp-1"
|
||||||
|
@click="clickGroup(index)"
|
||||||
|
>
|
||||||
|
<view class="group-checkbox">
|
||||||
|
<widget-check-box :checked="item.checked" />
|
||||||
|
</view>
|
||||||
|
<view class="title">
|
||||||
|
<text>{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="group-items">
|
||||||
|
<view
|
||||||
|
class="cart-item"
|
||||||
|
v-for="(v, i) in item.list"
|
||||||
|
:key="i"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="item-checkbox"
|
||||||
|
@click="clickItem(index, i)"
|
||||||
|
>
|
||||||
|
<widget-check-box :checked="v.checked" />
|
||||||
|
</view>
|
||||||
|
<view class="item-box">
|
||||||
|
<service-preview-item :data="v" />
|
||||||
|
<widget-count-modify
|
||||||
|
class="component-add"
|
||||||
|
:initNumber="v.buyNumber"
|
||||||
|
@change="
|
||||||
|
changeNumber($event, {
|
||||||
|
parentIndex: index,
|
||||||
|
index: i,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-btn-box">
|
||||||
|
<view class="total-price">
|
||||||
|
<text class="text">合计：</text>
|
||||||
|
<text class="price">¥ {{ item.total }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="button">
|
||||||
|
<text>去下单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="more">
|
||||||
|
<widget-load-more :hasMore="false" />
|
||||||
|
</view>
|
||||||
</app-layout>
|
</app-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AppLayout from "@/components/layout/layout";
|
import AppLayout from "@/components/layout/layout";
|
||||||
|
import WidgetTips from "@/components/widgets/tips";
|
||||||
|
import WidgetCheckBox from "@/components/widgets/checkbox";
|
||||||
|
import WidgetCountModify from "@/components/widgets/count-modify";
|
||||||
|
import WidgetLoadMore from "@/components/widgets/loadmore";
|
||||||
|
import ServicePreviewItem from "@/components/service/preview-item";
|
||||||
export default {
|
export default {
|
||||||
name: "order-cart",
|
name: "order-cart",
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -37,7 +103,7 @@ export default {
|
||||||
id: 3,
|
id: 3,
|
||||||
name: "厨房下水道",
|
name: "厨房下水道",
|
||||||
icon: require("@/static/temp/cate/1.png"),
|
icon: require("@/static/temp/cate/1.png"),
|
||||||
buyNumber: 1,
|
buyNumber: 10,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -46,14 +112,135 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
AppLayout,
|
AppLayout,
|
||||||
|
WidgetTips,
|
||||||
|
WidgetCheckBox,
|
||||||
|
WidgetCountModify,
|
||||||
|
WidgetLoadMore,
|
||||||
|
ServicePreviewItem,
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.list = this.parseList(this.list);
|
||||||
},
|
},
|
||||||
onLoad() {},
|
|
||||||
onShow() {},
|
onShow() {},
|
||||||
onReady() {},
|
onReady() {},
|
||||||
onReachBottom() {},
|
onReachBottom() {},
|
||||||
onPullDownRefresh() {},
|
onPullDownRefresh() {},
|
||||||
methods: {},
|
methods: {
|
||||||
|
parseList(list) {
|
||||||
|
let newList = [];
|
||||||
|
list.forEach((item, index) => {
|
||||||
|
list[index].checked = false;
|
||||||
|
list[index].total = 0;
|
||||||
|
list[index].list.forEach((v, i) => {
|
||||||
|
list[index].list[i].checked = false;
|
||||||
|
});
|
||||||
|
newList.push(list[index]);
|
||||||
|
});
|
||||||
|
return newList;
|
||||||
|
},
|
||||||
|
clickGroup(parentIndex) {
|
||||||
|
this.list[parentIndex].list.forEach((item, itemIndex) => {
|
||||||
|
this.checkedItem(parentIndex, itemIndex);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clickItem(parentIndex, itemIndex) {
|
||||||
|
this.checkedItem(parentIndex, itemIndex);
|
||||||
|
},
|
||||||
|
// 选中单项
|
||||||
|
checkedItem(parentIndex, itemIndex) {
|
||||||
|
this.list[parentIndex].list[itemIndex].checked =
|
||||||
|
!this.list[parentIndex].list[itemIndex].checked;
|
||||||
|
let allChecked = true;
|
||||||
|
this.list[parentIndex].list.forEach((item, index) => {
|
||||||
|
if (!item.checked) {
|
||||||
|
allChecked = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.list[parentIndex].checked = allChecked;
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
changeNumber(e, d) {
|
||||||
|
console.log(e);
|
||||||
|
console.log(d);
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped>
|
||||||
|
.cart-container {
|
||||||
|
width: 710rpx;
|
||||||
|
margin: 24rpx auto 0 auto;
|
||||||
|
}
|
||||||
|
.cart-group {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 22rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
.group-title {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 22rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
margin-left: 22rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.group-items {
|
||||||
|
width: 100%;
|
||||||
|
.cart-item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 22rpx;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
}
|
||||||
|
.item-box {
|
||||||
|
position: relative;
|
||||||
|
width: 609rpx;
|
||||||
|
.component-add {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 9rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom-btn-box {
|
||||||
|
width: 670rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-top: 2rpx solid #e1e1e1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 26rpx 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.total-price {
|
||||||
|
.text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ec7655;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
width: 183rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
line-height: 54rpx;
|
||||||
|
background: linear-gradient(-90deg, #8194f2, #8194f2);
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 23rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.more {
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue