|
|
@@ -12,7 +12,16 @@
|
|
|
<view class="navigator" @click="navToLogin">去登陆></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-else>
|
|
|
+ <view v-else>
|
|
|
+ <!-- 购物车头部 -->
|
|
|
+ <view class="cart-hand flex">
|
|
|
+ <view class="hand-tit">
|
|
|
+ 购物车共 <text>{{ ' '+cartList.length}} 件</text>商品
|
|
|
+ </view>
|
|
|
+ <view class="hand-btn" @click="clearCart()">
|
|
|
+ 清空购物车
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 列表 -->
|
|
|
<view class="cart-list">
|
|
|
<block v-for="(item, index) in cartList" :key="item.id">
|
|
|
@@ -30,9 +39,9 @@
|
|
|
</view>
|
|
|
<view class="item-right">
|
|
|
<text class="clamp title">{{ item.productInfo.store_name }}</text>
|
|
|
- <text class="attr">{{ item.attr_val }}</text>
|
|
|
+ <text class="attr">{{ item.productInfo.attrInfo.suk }}</text>
|
|
|
<text class="price">¥{{ item.productInfo.price }}</text>
|
|
|
- <uni-number-box
|
|
|
+ <!-- <uni-number-box
|
|
|
class="step"
|
|
|
:min="1"
|
|
|
:max="item.productInfo.stock"
|
|
|
@@ -41,9 +50,14 @@
|
|
|
:isMin="item.cart_num === 1"
|
|
|
:index="index"
|
|
|
@eventChange="numberChange"
|
|
|
- ></uni-number-box>
|
|
|
+ ></uni-number-box> -->
|
|
|
+ <view class="munbox flex" >
|
|
|
+ <image src="../../static/icon/reduce.png" mode="" @click="reduce(item,index)"></image>
|
|
|
+ <input type="number" :value="item.cart_num" disabled/>
|
|
|
+ <image src="../../static/icon/add.png" mode="" @click="add(item)"></image>
|
|
|
+ </view>
|
|
|
</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,7 +65,7 @@
|
|
|
<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="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view> -->
|
|
|
</view>
|
|
|
<view class="total-box">
|
|
|
<text class="price">¥{{ total }}</text>
|
|
|
@@ -64,24 +78,21 @@
|
|
|
<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script>
|
|
|
+ import weixinObj from "@/plugin/jweixin-module/index.js";
|
|
|
import { getCartList, getCartNum, cartDel } from '@/api/user.js';
|
|
|
import { mapState } from 'vuex';
|
|
|
import uniNumberBox from '@/components/uni-number-box.vue';
|
|
|
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
|
|
|
-import { tabbar } from '@/utils/tabbar.js';
|
|
|
export default {
|
|
|
components: {
|
|
|
uniNumberBox
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- tabbar: tabbar,
|
|
|
- current: 3,
|
|
|
total: 0, //总价格
|
|
|
allChecked: false, //全选状态 true|false
|
|
|
empty: false, //空白页现实 true|false
|
|
|
@@ -92,7 +103,8 @@ export default {
|
|
|
// 只有登录时才加载数据
|
|
|
if (this.hasLogin) {
|
|
|
this.loadData();
|
|
|
- }
|
|
|
+ }
|
|
|
+ weixinObj.hideAllNonBaseMenuItem();
|
|
|
},
|
|
|
watch: {
|
|
|
//显示空白页
|
|
|
@@ -106,7 +118,32 @@ export default {
|
|
|
computed: {
|
|
|
...mapState('user', ['hasLogin'])
|
|
|
},
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
+ reduce(item,index) {
|
|
|
+ if(item.cart_num == 1) {
|
|
|
+ uni.showModal({
|
|
|
+ content: '删除该商品？',
|
|
|
+ success: e => {
|
|
|
+ if (e.confirm) {
|
|
|
+ this.deleteCartItem(index)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }else {
|
|
|
+ item.cart_num--
|
|
|
+ this.newNumberChange(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ add(item) {
|
|
|
+ console.log(item)
|
|
|
+ if(item.productInfo.stock > item.cart_num) {
|
|
|
+ item.cart_num++
|
|
|
+ this.newNumberChange(item)
|
|
|
+ }else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
//请求数据
|
|
|
async loadData() {
|
|
|
let obj = this;
|
|
|
@@ -179,6 +216,16 @@ export default {
|
|
|
console.log(e);
|
|
|
});
|
|
|
this.calcTotal();
|
|
|
+ },
|
|
|
+ newNumberChange(item) {
|
|
|
+ getCartNum({ id: item.id, number: item.cart_num })
|
|
|
+ .then(e => {
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
+ .catch(function(e) {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ this.calcTotal();
|
|
|
},
|
|
|
//删除
|
|
|
deleteCartItem(index) {
|
|
|
@@ -275,20 +322,27 @@ export default {
|
|
|
font-size: $font-sm + 2rpx;
|
|
|
color: $font-color-disabled;
|
|
|
.navigator {
|
|
|
- color: $uni-color-primary;
|
|
|
+ color: #f65067;
|
|
|
margin-left: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/* 购物车列表项 */
|
|
|
-.cart-item {
|
|
|
+.cart-item {
|
|
|
+ width: 710rpx;
|
|
|
+ height: 210rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
- padding: 30rpx 40rpx;
|
|
|
+ padding: 30rpx 26rpx 30rpx 80rpx;
|
|
|
.image-wrapper {
|
|
|
- width: 230rpx;
|
|
|
- height: 230rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
flex-shrink: 0;
|
|
|
position: relative;
|
|
|
image {
|
|
|
@@ -297,8 +351,11 @@ export default {
|
|
|
}
|
|
|
.checkbox {
|
|
|
position: absolute;
|
|
|
- left: -16rpx;
|
|
|
- top: -16rpx;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: -65rpx;
|
|
|
+ margin: auto 0;
|
|
|
+ height: 50rpx;
|
|
|
z-index: 8;
|
|
|
font-size: 44rpx;
|
|
|
line-height: 1;
|
|
|
@@ -313,7 +370,23 @@ export default {
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
- padding-left: 30rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ .munbox {
|
|
|
+ width: 144rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ input {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.title,
|
|
|
.price {
|
|
|
font-size: $font-base + 2rpx;
|
|
|
@@ -325,14 +398,30 @@ export default {
|
|
|
font-size: $font-sm + 2rpx;
|
|
|
color: $font-color-light;
|
|
|
height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
.price {
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
+ // height: 50rpx;
|
|
|
+ // line-height: 50rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4C4C;
|
|
|
}
|
|
|
.step {
|
|
|
margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
}
|
|
|
.del-btn {
|
|
|
@@ -402,7 +491,8 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
text-align: right;
|
|
|
- padding-right: 40rpx;
|
|
|
+ padding-right: 40rpx;
|
|
|
+
|
|
|
.price {
|
|
|
font-size: $font-lg;
|
|
|
color: $font-color-dark;
|
|
|
@@ -429,5 +519,35 @@ export default {
|
|
|
.action-section .checkbox.checked,
|
|
|
.cart-item .checkbox.checked {
|
|
|
color: $base-color;
|
|
|
+}
|
|
|
+.cart-hand {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 88rpx;
|
|
|
+ padding-left: 28rpx;
|
|
|
+ padding-right: 26rpx;
|
|
|
+ .hand-tit {
|
|
|
+ text {
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .hand-btn {
|
|
|
+ width: 164rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ border: 2rpx solid #FF4C4C;
|
|
|
+ border-radius: 31rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4C4C;
|
|
|
+ line-height: 62rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
