|
|
|
|
@ -2,14 +2,18 @@
|
|
|
|
|
<view class="container">
|
|
|
|
|
<!-- 空白页 -->
|
|
|
|
|
<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">
|
|
|
|
|
空空如也
|
|
|
|
|
<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
|
|
|
|
|
<text>您的购物车空空如也</text>
|
|
|
|
|
<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">
|
|
|
|
|
<button type="">去首页逛逛</button>
|
|
|
|
|
</navigator>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else class="empty-tips">
|
|
|
|
|
空空如也
|
|
|
|
|
<view class="navigator" @click="navToLogin">去登陆></view>
|
|
|
|
|
<text>您的购物车空空如也</text>
|
|
|
|
|
<view class="navigator" @click="navToLogin">
|
|
|
|
|
<button type="">去登录</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else>
|
|
|
|
|
@ -25,8 +29,11 @@
|
|
|
|
|
<view class="item-right">
|
|
|
|
|
<text class="clamp title">{{item.productName}}</text>
|
|
|
|
|
<text class="attr">{{item.spDataStr}}</text>
|
|
|
|
|
<view class="price-box">
|
|
|
|
|
<text class="price">¥{{item.price}}</text>
|
|
|
|
|
<uni-number-box class="step" :min="1" :max="100" :value="item.quantity" :index="index" @eventChange="numberChange"></uni-number-box>
|
|
|
|
|
<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>
|
|
|
|
|
</view>
|
|
|
|
|
@ -245,12 +252,18 @@
|
|
|
|
|
|
|
|
|
|
.empty-tips {
|
|
|
|
|
display: flex;
|
|
|
|
|
font-size: $font-sm+2upx;
|
|
|
|
|
color: $font-color-disabled;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: $font-base+2upx;
|
|
|
|
|
color: $font-color-base;
|
|
|
|
|
|
|
|
|
|
.navigator {
|
|
|
|
|
color: $uni-color-primary;
|
|
|
|
|
margin-left: 16upx;
|
|
|
|
|
button {
|
|
|
|
|
background-color: $uni-color-primary;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border-radius: 60upx;
|
|
|
|
|
margin-top: 36upx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -264,19 +277,24 @@
|
|
|
|
|
|
|
|
|
|
.image-wrapper {
|
|
|
|
|
width: 230upx;
|
|
|
|
|
height: 230upx;
|
|
|
|
|
height: 192upx;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
text-align: right;
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
border-radius: 8upx;
|
|
|
|
|
width: 192upx;
|
|
|
|
|
height: 192upx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: -16upx;
|
|
|
|
|
top: -16upx;
|
|
|
|
|
left: -24upx;
|
|
|
|
|
top: 50%;
|
|
|
|
|
margin-top: -22upx;
|
|
|
|
|
z-index: 8;
|
|
|
|
|
font-size: 44upx;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
@ -294,6 +312,25 @@
|
|
|
|
|
position: relative;
|
|
|
|
|
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,
|
|
|
|
|
.price {
|
|
|
|
|
font-size: $font-base + 2upx;
|
|
|
|
|
@ -302,6 +339,7 @@
|
|
|
|
|
line-height: 40upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.attr {
|
|
|
|
|
font-size: $font-sm + 2upx;
|
|
|
|
|
color: $font-color-light;
|
|
|
|
|
|
