效果图:
代码:
<!--
* @description 购物车-列表
* @author yxf
* @date 2020-07-01
* @version 1.0.0
* @lastModifiedBy yxf
* @lastModifiedTime 2020-07-01
-->
<template>
<div class="wrap">
<view class="list">
<view class="list_item" v-for="(item,index) in list" :key="index">
<view class="list_item_t flex">
<view class="checkbox" style="margin:0 30rpx" @click="checkAllGoods(item)">
<image
v-if="item.checkAll"
src="/static/images/car-checked.png"
mode="widthFix"
/>
<image v-else src="/static/images/pay-unchecked.png" mode="widthFix" />
<!-- <image src="/static/images/pay-lock.png " mode="widthFix" /> -->
</view>
<view>{{item.shopName}}店铺1111A</view>
</view>
<view
class="list_item_act"
>{{item.startTime}} - {{item.endTime}} {{item.activityName}}本店商品满100元减20元</view>
<view v-for="(item2,index2) in item.goods" :key="index2">
<view class="list_item_goods">
<view class="checkbox list_item_goods_l" @click="checkGoods(item2,item)">
<image
v-if="item2.checked"
src="/static/images/car-checked.png"
mode="widthFix"
/>
<image v-else src="/static/images/pay-unchecked.png" mode="widthFix" />
<!-- <image src="/static/images/pay-lock.png" mode="widthFix" /> -->
</view>
<view class="list_item_goods_c">
<!-- <image
src="http://jz.uat1.rscloud.com/img/logo.3c167510.png"
mode="widthFix"
/> -->
</view>
<view class="list_item_goods_r">
<view class="list_item_goods_rt">{{item2.prodName}}商品</view>
<view class="list_item_goods_rc">{{item2.specsValue}}150/80/xs</view>
<view class="list_item_goods_rb">¥{{item2.price}}</view>
</view>
<view class="u-number-box">
<u-number-box
:disabled-input="true"
:min="1"
:max="999999"
v-model="item2.goodsNum"
@minus="(val,obj)=>delNum(val,item2)"
@plus="(val,obj)=>addNum(val,item2)"
></u-number-box>
</view>
</view>
<view class="list_item_goods_b">
<text>配送方式</text>
<text>支持自提</text>
</view>
</view>
</view>
</view>
<view class="footer">
<view class="checkbox" @click="checkAllShops">
<image
style="margin:0 30rpx"
v-if="allCheck"
src="/static/images/car-checked.png"
mode="widthFix"
/>
<image
style="margin:0 30rpx"
v-else
src="/static/images/pay-unchecked.png"
mode="widthFix"
/>
<text>全选</text>
<!-- <image src="/static/images/pay-lock.png" mode="widthFix" />-->
</view>
<view>
<text>
合计:
<text style="color:#EA5205;font-weight:bold">¥{{totalMoney}}</text>
</text>
<button class="submit_btn">提交订单</button>
</view>
</view>
</div>
</template>
<script>
import uNumberBox from '@/components/uview/u-number-box'
/**
* 参数说明
* @property {String} shopName 店铺名称
* @property {String} startTime 活动开始时间
* @property {String} endTime 活动结束时间
* @property {String} activityName 活动名称
* @property {Array} goods 商品列表
* @property {Number} distributeWay 配送方式 1:自提 2: 快递
* @property {Number} goodsId 商品ID
* @property {String} prodName 商品名称
* @property {String} skuImageUrl 商品图片
* @property {Number} goodsNum 商品数量
* @property {String} goodsSku 商品sku
* @property {Number} id ID
* @property {Number} price 价格
* @property {String} specsValue 规格
* @property {Number} status 状态 1:正常;2:无效
* @property {String} endTime 活动结束时间
* @property {String} endTime 活动结束时间
* @event {Function} delNum 减少商品数量
* @event {Function} addNum 增加商品数量
*
*/
export default {
components: { uNumberBox },
data() {
return {
// allCheck: false,
list: [
{
shopName: '',
startTime: '',
endTime: '',
activityName: '',
checkAll: false,
goods: [
{
skuImageUrl: '',
prodName: 'a',
specsValue: '',
price: 10,
goodsNum: 1,
distributeWay: '',
checked: false
},
{
skuImageUrl: '',
prodName: '',
specsValue: '',
price: 20,
goodsNum: 2,
distributeWay: '',
checked: false
}
]
},
{
shopName: '',
startTime: '',
endTime: '',
activityName: '',
checkAll: false,
goods: [
{
skuImageUrl: '',
prodName: 'a',
specsValue: '',
price: 30,
goodsNum: 3,
distributeWay: '',
checked: false
},
{
skuImageUrl: '',
prodName: '',
specsValue: '',
price: 40,
goodsNum: 4,
distributeWay: '',
checked: false
}
]
}
]
}
},
created() {
this.getData()
},
computed: {
allCheck: {
get: function() {
return this.list.every(e => e.checkAll) //是否选中所有店铺
},
set: function(params) {
this.list.map(item => (item.checkAll = params))
}
},
totalMoney: function() {
let sum = 0
if (this.list.length) {
this.list.map(item => {
if (item.goods.length) {
item.goods.map(item2 => {
if (item2.checked) {
sum += item2.goodsNum * item2.price
}
})
}
})
} else {
sum = 0
}
return sum
}
},
methods: {
delNum(val, item) {
console.log(val)
console.log(item)
},
addNum(val, item) {
console.log(val)
console.log(item)
},
getData() {
// if (this.list.length) {
// this.list.map(item => {
// item.checkAll = false;
// if (item.goods.length) {
// item.goods.map(item2 => item2.checked = false)
// }
// }
// }
},
//选中店铺下的所有商品
checkAllGoods(item) {
item.checkAll = !item.checkAll
item.goods.forEach(item2 => {
item2.checked = item.checkAll
})
},
//选中所有店铺和商品
checkAllShops() {
this.allCheck = !this.allCheck
this.list.map(item => {
item.checkAll = this.allCheck
item.goods.map(item2 => (item2.checked = this.allCheck))
})
},
//选中某个商品
checkGoods(item2, item) {
item2.checked = !item2.checked
let isCheckAllGoods = item.goods.every(e => e.checked) //是否选中该店铺下的全部商品
item.checkAll = isCheckAllGoods ? true : false
}
}
}
</script>
<style lang="less" scoped>
.wrap {
background: #f7f7f7;
}
.list {
overflow: hidden;
padding-bottom: 150rpx;
}
.list_item {
background: #fff;
margin-top: 20rpx;
.list_item_t {
display: flex;
padding: 30rpx 0 20rpx;
}
.list_item_act {
margin: 0 30rpx 0 96rpx;
background: rgba(153, 117, 243, 0.1);
color: #9975f3;
border-radius: 12rpx;
font-size: 24rpx;
padding: 10rpx;
}
.list_item_goods {
height: 220rpx;
display: flex;
align-items: center;
margin: 0 30rpx;
position: relative;
.u-number-box {
position: absolute;
right: 0;
bottom: 30rpx;
}
.list_item_goods_l {
flex-shrink: 0;
image {
margin: 30rpx 30rpx 30rpx 0;
}
}
.list_item_goods_c {
background: #efefef;
border-radius: 12rpx;
width: 160rpx;
height: 160rpx;
line-height: 160rpx;
flex-shrink: 0;
text-align: center;
image {
width: 90%;
vertical-align: middle;
}
}
.list_item_goods_r {
margin-left: 20rpx;
.list_item_goods_rt {
.line_2;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
height: 100rpx;
}
.list_item_goods_rc {
font-size: 24rpx;
color: #999;
}
.list_item_goods_rb {
font-size: 28rpx;
color: #ea5205;
font-weight: bold;
}
}
}
.list_item_goods_b {
margin: 0 30rpx;
padding: 0 0 20rpx 60rpx;
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #f1f1f1;
text {
font-size: 24rpx;
color: #999;
}
}
}
.checkbox {
display: flex;
justify-content: center;
align-items: center;
image {
width: 36rpx;
height: 36rpx;
}
}
.footer {
width: 100%;
height: 140rpx;
background: #fff;
position: fixed;
bottom: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #f3f3f3;
.submit_btn {
display: inline-block;
vertical-align: middle;
width: 240rpx;
height: 88rpx;
background: linear-gradient(144deg, rgba(179, 116, 248, 1) 0%, rgba(109, 120, 238, 1) 100%);
border-radius: 44px;
color: #fff;
margin-left: 15rpx;
}
}
//一行
.line_1 {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
//两行
.line_2 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>>
图片素材:
uNumberBox 步进器组件:https://download.csdn.net/download/qq_42816550/12569264