feat: modify cart

dev_1.0.1
hu-qi 5 months ago
parent a2b4cf369e
commit c51d0fbd4c
Signed by: huqi
GPG Key ID: B66F8F763A3A3251

@ -2,14 +2,18 @@
<view class="container"> <view class="container">
<!-- 空白页 --> <!-- 空白页 -->
<view v-if="!hasLogin || empty===true" class="empty"> <view v-if="!hasLogin || empty===true" class="empty">
<image src="/static/emptyCart.jpg" mode="aspectFit"></image> <!-- <image src="/static/emptyCart.jpg" mode="aspectFit"></image> -->
<view v-if="hasLogin" class="empty-tips"> <view v-if="hasLogin" class="empty-tips">
空空如也 <text>您的购物车空空如也</text>
<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">便></navigator> <navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">
<button type="">去首页逛逛</button>
</navigator>
</view> </view>
<view v-else class="empty-tips"> <view v-else class="empty-tips">
空空如也 <text>您的购物车空空如也</text>
<view class="navigator" @click="navToLogin">></view> <view class="navigator" @click="navToLogin">
<button type="">去登录</button>
</view>
</view> </view>
</view> </view>
<view v-else> <view v-else>
@ -25,9 +29,12 @@
<view class="item-right"> <view class="item-right">
<text class="clamp title">{{item.productName}}</text> <text class="clamp title">{{item.productName}}</text>
<text class="attr">{{item.spDataStr}}</text> <text class="attr">{{item.spDataStr}}</text>
<text class="price">¥{{item.price}}</text> <view class="price-box">
<uni-number-box class="step" :min="1" :max="100" :value="item.quantity" :index="index" @eventChange="numberChange"></uni-number-box> <text class="price">¥{{item.price}}</text>
</view> <uni-number-box class="step" :min="1" :max="100" :size="14" :value="item.quantity" :index="index" @eventChange="numberChange"></uni-number-box>
</view>
</view>
<text class="del-btn yticon icon-fork" @click="handleDeleteCartItem(index)"></text> <text class="del-btn yticon icon-fork" @click="handleDeleteCartItem(index)"></text>
</view> </view>
</block> </block>
@ -245,12 +252,18 @@
.empty-tips { .empty-tips {
display: flex; display: flex;
font-size: $font-sm+2upx; flex-direction: column;
color: $font-color-disabled; justify-content: center;
font-size: $font-base+2upx;
color: $font-color-base;
.navigator { .navigator {
color: $uni-color-primary; button {
margin-left: 16upx; background-color: $uni-color-primary;
color: #ffffff;
border-radius: 60upx;
margin-top: 36upx;
}
} }
} }
} }
@ -264,19 +277,24 @@
.image-wrapper { .image-wrapper {
width: 230upx; width: 230upx;
height: 230upx; height: 192upx;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
text-align: right;
background: #fff;
image { image {
border-radius: 8upx; border-radius: 8upx;
width: 192upx;
height: 192upx;
} }
} }
.checkbox { .checkbox {
position: absolute; position: absolute;
left: -16upx; left: -24upx;
top: -16upx; top: 50%;
margin-top: -22upx;
z-index: 8; z-index: 8;
font-size: 44upx; font-size: 44upx;
line-height: 1; line-height: 1;
@ -293,6 +311,25 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding-left: 30upx; padding-left: 30upx;
.price-box {
display: flex;
flex: 1;
align-items: flex-end;
position: relative;
.step {
.uni-numbox{
bottom: initial;
left: initial;
right: 0;
margin-top: -70upx;
border-radius: 16upx;
}
}
.price {
color: $uni-color-primary;
}
}
.title, .title,
.price { .price {
@ -301,6 +338,7 @@
height: 40upx; height: 40upx;
line-height: 40upx; line-height: 40upx;
} }
.attr { .attr {
font-size: $font-sm + 2upx; font-size: $font-sm + 2upx;

@ -363,7 +363,7 @@
await this.handleReadHistory(); await this.handleReadHistory();
this.initProductCollection(); this.initProductCollection();
}); });
this.getCartNum() await this.getCartNum()
}, },
// //
toggleSpec() { toggleSpec() {

Loading…
Cancel
Save