<template>
|
<view class="cart">
|
<u-swipe-action>
|
<u-swipe-action-item :options="options" v-for="(item, index) in list" :name="index" :key="index">
|
<view class="cart-item">
|
<view class="cart-item-check">
|
<image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!item.active"></image>
|
<image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></image>
|
</view>
|
<view class="cart-item-image">
|
<view class="cart-item-image-xj" v-if="item.status === 1">商品下架</view>
|
<image :src="item.imgUrl" mode="widthFix"></image>
|
</view>
|
<view class="cart-item-info">
|
<view class="title">{{item.goodsName}}</view>
|
<view class="bottom">
|
<view class="bottom-price">
|
<text>{{item.price[0]}}</text>
|
<text>.{{item.price[1]}}</text>
|
</view>
|
<u-number-box v-model="item.num"></u-number-box>
|
</view>
|
</view>
|
</view>
|
</u-swipe-action-item>
|
</u-swipe-action>
|
<view class="footer">
|
<view class="edit">
|
<view class="edit-left">
|
<image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
|
<text>全选</text>
|
</view>
|
<view class="edit-right">
|
<view class="edit-right-label">合计：</view>
|
<view class="edit-right-price">
|
<text>499</text>
|
<text>.00</text>
|
</view>
|
<view class="edit-right-btn">结算</view>
|
</view>
|
</view>
|
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
value: 1,
|
options: [
|
{ text: '删除', style: { backgroundColor: '#E4001D' } },
|
],
|
list: [],
|
page: 1,
|
next: true
|
};
|
},
|
onLoad() {
|
this.getList()
|
},
|
methods: {
|
getList() {
|
if (!this.next) return;
|
this.$u.api.shopCartPage({
|
capacity: 10,
|
page: this.page,
|
model: {}
|
}).then(res => {
|
if (res.code === 200) {
|
console.log(res)
|
res.data.records.forEach(item => {
|
item.price = item.price.toFixed(2).split('.')
|
item.active = false
|
})
|
this.list.push(...res.data.records)
|
this.page++
|
if (this.list.length === res.data.total) {
|
this.next = false
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.cart {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
|
.footer {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0,0,0,0.06);
|
background-color: #ffffff;
|
height: calc(env(safe-area-inset-bottom) + 108rpx);
|
.edit {
|
width: 100%;
|
height: 108rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.edit-left {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 20rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
}
|
.edit-right {
|
display: flex;
|
align-items: baseline;
|
.edit-right-label {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
.edit-right-price {
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 36rpx;
|
color: #E4001D;
|
&::before {
|
content: '￥';
|
font-weight: 500;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
&:nth-child(2) {
|
font-weight: 500;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
}
|
.edit-right-btn {
|
width: 200rpx;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #004096;
|
border-radius: 44rpx;
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #FFFFFF;
|
margin-left: 40rpx;
|
}
|
}
|
}
|
}
|
|
.cart-item {
|
width: 100%;
|
height: 160rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
margin-bottom: 40rpx;
|
|
.cart-item-check {
|
flex-shrink: 0;
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 30rpx;
|
|
image {
|
width: 100%;
|
}
|
}
|
|
.cart-item-image {
|
flex-shrink: 0;
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 8rpx;
|
border: 1rpx solid #EEEEEE;
|
margin-right: 24rpx;
|
position: relative;
|
|
.cart-item-image-xj {
|
width: 120rpx;
|
height: 40rpx;
|
line-height: 40rpx;
|
text-align: center;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background: rgba(0,0,0,0.5);
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
}
|
|
image {
|
width: 100%;
|
}
|
}
|
|
.cart-item-info {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.title {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #111111;
|
}
|
|
.bottom {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.bottom-price {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #E4001D;
|
|
&::before {
|
content: '￥';
|
font-weight: 500;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
|
&:nth-child(2) {
|
font-weight: 500;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
