219 lines
6.1 KiB
Vue
219 lines
6.1 KiB
Vue
<template>
|
|
<view class="content bg myZt-500w" style="background-image: url('@@:static/bags_bg.png');">
|
|
|
|
<view class="" style="width: 100%; overflow: auto;">
|
|
|
|
<view class=""
|
|
style="width: 689.58rpx; margin: 201.39rpx auto 114.58rpx; display: flex; flex-direction: column;">
|
|
<view class="" v-for="(item,index) in dataList"
|
|
style="width: 100%; height: 161.81rpx; background-color: #FFFBF0; border-radius: 30rpx; margin-bottom: 29.17rpx; display: flex; align-items: center; position: relative;">
|
|
|
|
<image :src="item.isCheck?'@@:static/ic_check_s.png':'@@:static/ic_check.png'"
|
|
@click="toggleItem(index)" style="width: 29.17rpx; height: 29.17rpx; margin-left: 20.83rpx;"
|
|
mode=""></image>
|
|
|
|
<image :src="item.imgurl"
|
|
style="width: 125rpx; height: 125rpx; background-color: #9B9285; border-radius: 30rpx; margin-left: 19.44rpx;"
|
|
mode="">
|
|
</image>
|
|
|
|
<text
|
|
style="position: absolute; left: 210.42rpx; top: 24.31rpx; font-size: 23.58rpx; color: #6E5B51;">{{item.title}}</text>
|
|
|
|
<text
|
|
style="position: absolute; left: 210.42rpx; top: 60.42rpx; font-size: 19.42rpx; color: #6E5B51;">{{item.name}}</text>
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; position: absolute; left: 205.81rpx; bottom: 26.39rpx;">
|
|
<text style="font-size: 29.13rpx; color: #6E5B51;">￥{{item.price}}</text>
|
|
<text
|
|
style="font-size: 19.42rpx; color: #6E5B51; margin-left: 17.36rpx; margin-top: 10rpx;">库存紧张</text>
|
|
</view>
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; position: absolute; bottom: 23.61rpx; right: 23.61rpx; align-items: center;">
|
|
<image src="@@:static/ic_minus.png" @click="decrease(index)"
|
|
style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
|
<text
|
|
style="width: 70.83rpx; font-size: 29.17rpx; color: #6E5B51; text-align: center;">{{item.num}}</text>
|
|
<image src="@@:static/ic_add.png" @click="increase(index)"
|
|
style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class=""
|
|
style="width: 100%; height: 114.58rpx; background-color: #FFFDF1; position: fixed; bottom: 0; display: flex; flex-direction: row-reverse; align-items: center;">
|
|
|
|
<view class=""
|
|
style="width: 164.58rpx; height: 68.75rpx; position: relative; margin-right: 19.44rpx; display: flex; align-items: center; justify-content: center;">
|
|
<image src="https://guyu-1308826010.cos.ap-shanghai.myqcloud.com/static/pay_bg.png" style="width: 100%; height: 100%;position: absolute;" mode=""></image>
|
|
<text class="myZt-600w" style="position: absolute; font-size: 20.83rpx; color: #66594E;">结算 ({{checkNum}})</text>
|
|
</view>
|
|
|
|
<text style="font-size: 29.13rpx; color: #6E5B51; margin-right: 30.56rpx;">￥{{sumPrice}}</text>
|
|
<text style="font-size: 19.42rpx; color: #8C8574;">共</text>
|
|
<text style="font-size: 19.42rpx; color: #8C8574; margin-right: 30rpx;">合计： {{checkNum}}件</text>
|
|
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; align-items: center; position: fixed; left: 46rpx;">
|
|
<image :src="selectAll?'@@:static/ic_check_s.png':'@@:static/ic_check.png'" @click="toggleSelectAll"
|
|
style="width: 29.17rpx; height: 29.17rpx;" mode=""></image>
|
|
<text style="font-size: 19.42rpx; color: #8C8574; margin-left: 13rpx; margin-bottom: 2rpx;">全选</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
checkNum: 0, //选中几个
|
|
sumPrice: 0, //总价
|
|
selectAll: false,
|
|
dataList: [{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: 20,
|
|
num: 1,
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: 20,
|
|
num: 1,
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: 20,
|
|
num: 1,
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: 20,
|
|
num: 1,
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: 20,
|
|
num: 1,
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: 20,
|
|
num: 1,
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: 20,
|
|
num: 1,
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
}
|
|
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 切换单个项目的选中状态
|
|
toggleItem(index) {
|
|
this.dataList[index].isCheck = !this.dataList[index].isCheck;
|
|
this.updateSelectAllStatus();
|
|
},
|
|
|
|
// 全选/取消全选
|
|
toggleSelectAll() {
|
|
this.selectAll = !this.selectAll;
|
|
this.dataList.forEach(item => {
|
|
item.isCheck = this.selectAll;
|
|
});
|
|
this.selectedCount();
|
|
this.totalPrice();
|
|
},
|
|
|
|
// 更新全选状态（当手动选择所有项时自动勾选全选）
|
|
updateSelectAllStatus() {
|
|
this.selectAll = this.dataList.every(item => item.isCheck);
|
|
this.selectedCount();
|
|
this.totalPrice();
|
|
},
|
|
|
|
|
|
// 增加数量
|
|
increase(index) {
|
|
this.dataList[index].num++;
|
|
this.selectedCount();
|
|
this.totalPrice();
|
|
},
|
|
|
|
// 减少数量
|
|
decrease(index) {
|
|
if (this.dataList[index].num > 1) {
|
|
this.dataList[index].num--;
|
|
}
|
|
this.selectedCount();
|
|
this.totalPrice();
|
|
},
|
|
|
|
// 选中的商品总数量
|
|
selectedCount() {
|
|
this.checkNum = this.dataList.reduce((total, item) => {
|
|
return total + (item.isCheck ? item.num : 0);
|
|
}, 0);
|
|
},
|
|
|
|
// 选中的商品总价格
|
|
totalPrice() {
|
|
this.sumPrice = this.dataList.reduce((total, item) => {
|
|
return total + (item.isCheck ? item.price * item.num : 0);
|
|
}, 0);
|
|
}
|
|
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
</style> |