新增购物车页面
This commit is contained in:
parent
06b801ed25
commit
7c9e474871
|
|
@ -1,11 +1,77 @@
|
|||
<template>
|
||||
<app-layout headerBackgroundColor="#00418c" textColor="light">
|
||||
<view class="cart-container"> </view>
|
||||
<app-layout
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 {
|
||||
name: "order-cart",
|
||||
data() {
|
||||
|
|
@ -37,7 +103,7 @@ export default {
|
|||
id: 3,
|
||||
name: "厨房下水道",
|
||||
icon: require("@/static/temp/cate/1.png"),
|
||||
buyNumber: 1,
|
||||
buyNumber: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -46,14 +112,135 @@ export default {
|
|||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
WidgetTips,
|
||||
WidgetCheckBox,
|
||||
WidgetCountModify,
|
||||
WidgetLoadMore,
|
||||
ServicePreviewItem,
|
||||
},
|
||||
onLoad() {
|
||||
this.list = this.parseList(this.list);
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
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>
|
||||
|
||||
<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