|
|
@@ -13,10 +13,22 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
+ <view class="header">
|
|
|
+ <view class="">
|
|
|
+ 购物车共3件商品
|
|
|
+ </view>
|
|
|
+ <view class="" @click="allChecked ? clearCart() : ''">
|
|
|
+ 清空购物车
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 列表 -->
|
|
|
<view class="cart-list">
|
|
|
<block v-for="(item, index) in cartList" :key="item.id">
|
|
|
<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
|
|
|
+ <view class="iconfont iconroundcheckfill checkbox"
|
|
|
+ :class="{ checked: item.checked }" @click="check('item', index)">
|
|
|
+
|
|
|
+ </view>
|
|
|
<view class="image-wrapper">
|
|
|
<image
|
|
|
:src="item.productInfo.image"
|
|
|
@@ -26,13 +38,32 @@
|
|
|
@load="onImageLoad('cartList', index)"
|
|
|
@error="onImageError('cartList', index)"
|
|
|
></image>
|
|
|
- <view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }" @click="check('item', index)"></view>
|
|
|
+ <!-- <view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }" @click="check('item', index)"></view> -->
|
|
|
</view>
|
|
|
<view class="item-right">
|
|
|
- <text class="clamp title">{{ item.productInfo.store_name }}</text>
|
|
|
- <text class="attr">{{ item.attr_val }}</text>
|
|
|
- <text class="price">¥{{ item.productInfo.price }}</text>
|
|
|
- <uni-number-box
|
|
|
+ <view class="item-top">
|
|
|
+ <text class="title">{{ item.productInfo.store_name }}</text>
|
|
|
+ <text class="attr">{{ item.attr_val }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-footer">
|
|
|
+ <view class="price">¥{{ item.productInfo.price }}</view>
|
|
|
+ <view class="num">
|
|
|
+ <view class="del"@click="changeNum('del',index,item)">
|
|
|
+ -
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ <!-- <input type="number"
|
|
|
+ v-model="item.cart_num > item.productInfo.stock ? item.productInfo.stock : item.cart_num"/> -->
|
|
|
+ {{ item.cart_num > item.productInfo.stock ? item.productInfo.stock : item.cart_num }}
|
|
|
+ </view>
|
|
|
+ <view class="add" @click="changeNum('add',index,item)">
|
|
|
+ +
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <uni-number-box
|
|
|
class="step"
|
|
|
:min="1"
|
|
|
:max="item.productInfo.stock"
|
|
|
@@ -41,9 +72,9 @@
|
|
|
:isMin="item.cart_num === 1"
|
|
|
:index="index"
|
|
|
@eventChange="numberChange"
|
|
|
- ></uni-number-box>
|
|
|
+ ></uni-number-box> -->
|
|
|
</view>
|
|
|
- <text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text>
|
|
|
+ <!-- <text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text> -->
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
@@ -51,17 +82,21 @@
|
|
|
<view class="action-section">
|
|
|
<view class="checkbox">
|
|
|
<view class="iconfont iconroundcheckfill icon-checked-box" @click="check('all')" :class="{ 'icon-checked': allChecked }"></view>
|
|
|
- <view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view>
|
|
|
+ <view class="text">全选</view>
|
|
|
+ <!-- <view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view> -->
|
|
|
</view>
|
|
|
<view class="total-box">
|
|
|
- <text class="price">¥{{ total }}</text>
|
|
|
+ <text class="price"><text style="color: #333333;">合计：</text>¥{{ total }}</text>
|
|
|
<!-- <text class="coupon">
|
|
|
已优惠
|
|
|
<text>74.35</text>
|
|
|
元
|
|
|
</text> -->
|
|
|
</view>
|
|
|
- <button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
|
|
|
+ <view class="button" @click="createOrder">
|
|
|
+ 去结算 ({{choseNum}})
|
|
|
+ </view>
|
|
|
+ <!-- <button type="primary" class="no-border confirm-btn"></button> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -81,7 +116,8 @@ export default {
|
|
|
total: 0, //总价格
|
|
|
allChecked: false, //全选状态 true|false
|
|
|
empty: false, //空白页现实 true|false
|
|
|
- cartList: []
|
|
|
+ cartList: [],
|
|
|
+ choseNum: 0,
|
|
|
};
|
|
|
},
|
|
|
onShow() {
|
|
|
@@ -163,11 +199,22 @@ export default {
|
|
|
}
|
|
|
this.calcTotal(type);
|
|
|
},
|
|
|
+ changeNum(type,index,item) {
|
|
|
+ const cartList = this.cartList[index]
|
|
|
+ if(type == "add") {
|
|
|
+ cartList.cart_num >= cartList.productInfo.stock || cartList.cart_num++
|
|
|
+ }else if(type == "del") {
|
|
|
+ cartList.cart_num <= 1 || cartList.cart_num--
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ number: cartList.cart_num,
|
|
|
+ id: item.id
|
|
|
+ }
|
|
|
+ this.numberChange(data)
|
|
|
+ },
|
|
|
//数量
|
|
|
numberChange(data) {
|
|
|
- let arr = this.cartList[data.index];
|
|
|
- arr.cart_num = data.number;
|
|
|
- getCartNum({ id: arr.id, number: data.number })
|
|
|
+ getCartNum({ id: data.id, number: data.number })
|
|
|
.then(e => {
|
|
|
console.log(e);
|
|
|
})
|
|
|
@@ -209,6 +256,7 @@ export default {
|
|
|
},
|
|
|
//计算总价
|
|
|
calcTotal() {
|
|
|
+ let num = 0
|
|
|
let list = this.cartList;
|
|
|
if (list.length === 0) {
|
|
|
this.empty = true;
|
|
|
@@ -218,12 +266,15 @@ export default {
|
|
|
let checked = true;
|
|
|
list.forEach(item => {
|
|
|
if (item.checked === true) {
|
|
|
+ num++
|
|
|
+
|
|
|
total += item.productInfo.price * item.cart_num;
|
|
|
} else if (checked === true) {
|
|
|
checked = false;
|
|
|
}
|
|
|
});
|
|
|
this.allChecked = checked;
|
|
|
+ this.choseNum = num
|
|
|
this.total = Number(total.toFixed(2));
|
|
|
},
|
|
|
//创建订单
|
|
|
@@ -245,6 +296,33 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ .header {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ z-index: 99;
|
|
|
+ view {
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+ view:nth-child(1) {
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ view:nth-child(2) {
|
|
|
+ border: solid 1rpx #EF3A55;
|
|
|
+ color: #EF3A55;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.container {
|
|
|
padding-bottom: 134rpx;
|
|
|
background-color: $page-color-base;
|
|
|
@@ -281,10 +359,13 @@ export default {
|
|
|
.cart-item {
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
- padding: 30rpx 40rpx;
|
|
|
+ margin: 15rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
.image-wrapper {
|
|
|
- width: 230rpx;
|
|
|
- height: 230rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
flex-shrink: 0;
|
|
|
position: relative;
|
|
|
image {
|
|
|
@@ -292,9 +373,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.checkbox {
|
|
|
- position: absolute;
|
|
|
- left: -16rpx;
|
|
|
- top: -16rpx;
|
|
|
+ // position: absolute;
|
|
|
+ // left: -16rpx;
|
|
|
+ // top: -16rpx;
|
|
|
+ margin: auto 0;
|
|
|
+ margin-right: 20rpx;
|
|
|
z-index: 8;
|
|
|
font-size: 44rpx;
|
|
|
line-height: 1;
|
|
|
@@ -304,8 +387,8 @@ export default {
|
|
|
border-radius: 50px;
|
|
|
}
|
|
|
.item-right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ display: grid;
|
|
|
+ align-content: space-between;
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
@@ -317,6 +400,13 @@ export default {
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
+ .title {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ }
|
|
|
.attr {
|
|
|
font-size: $font-sm + 2rpx;
|
|
|
color: $font-color-light;
|
|
|
@@ -324,12 +414,40 @@ export default {
|
|
|
line-height: 50rpx;
|
|
|
}
|
|
|
.price {
|
|
|
+ font-size: $font-base + 4rpx;
|
|
|
+ color: #EF3A55;
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
}
|
|
|
.step {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
+ .item-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .num {
|
|
|
+ display: flex;
|
|
|
+ view {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .del {
|
|
|
+ border: solid 1rpx #767477;
|
|
|
+ color: #767477;
|
|
|
+ line-height: 30rpx;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #438BED;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ width: 70rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.del-btn {
|
|
|
padding: 4rpx 10rpx;
|
|
|
@@ -338,26 +456,43 @@ export default {
|
|
|
color: $font-color-light;
|
|
|
}
|
|
|
}
|
|
|
+.button {
|
|
|
+ background: linear-gradient(90deg, #438BED 0%, #44BFEC 100%);
|
|
|
+ background-color: #438BED;
|
|
|
+ height: 70rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
/* 底部栏 */
|
|
|
.action-section {
|
|
|
/* #ifdef H5 */
|
|
|
- margin-bottom: 100rpx;
|
|
|
+ margin-bottom: 70rpx;
|
|
|
/* #endif */
|
|
|
position: fixed;
|
|
|
- left: 30rpx;
|
|
|
+ // left: 30rpx;
|
|
|
bottom: 30rpx;
|
|
|
z-index: 95;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- width: 690rpx;
|
|
|
- height: 100rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 140rpx;
|
|
|
padding: 0 30rpx;
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
- box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 16rpx;
|
|
|
+ // box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
+ // border-radius: 16rpx;
|
|
|
.checkbox {
|
|
|
+ display: flex;
|
|
|
height: 52rpx;
|
|
|
position: relative;
|
|
|
+ .text {
|
|
|
+ color: #767477;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
.icon-checked-box {
|
|
|
border-radius: 50rpx;
|
|
|
background-color: #ffffff;
|
|
|
@@ -370,7 +505,7 @@ export default {
|
|
|
color: $font-color-light;
|
|
|
}
|
|
|
.icon-checked {
|
|
|
- color: $base-color;
|
|
|
+ color: #438BED;
|
|
|
}
|
|
|
}
|
|
|
.clear-btn {
|
|
|
@@ -401,7 +536,7 @@ export default {
|
|
|
padding-right: 40rpx;
|
|
|
.price {
|
|
|
font-size: $font-lg;
|
|
|
- color: $font-color-dark;
|
|
|
+ color: #EF3A55;
|
|
|
}
|
|
|
.coupon {
|
|
|
font-size: $font-sm;
|
|
|
@@ -424,6 +559,6 @@ export default {
|
|
|
/* 复选框选中状态 */
|
|
|
.action-section .checkbox.checked,
|
|
|
.cart-item .checkbox.checked {
|
|
|
- color: $base-color;
|
|
|
+ color: #438BED;
|
|
|
}
|
|
|
</style>
|
