|
@@ -10,7 +10,13 @@
|
|
|
|
|
|
|
|
<!-- Book Info -->
|
|
<!-- Book Info -->
|
|
|
<view class="book-info" @click.stop="navigateToDetail">
|
|
<view class="book-info" @click.stop="navigateToDetail">
|
|
|
- <image :src="item.bookImg" class="book-cover" mode="aspectFill"></image>
|
|
|
|
|
|
|
+ <view class="image-wrapper">
|
|
|
|
|
+ <image :src="item.bookImg" class="book-cover" mode="aspectFill"></image>
|
|
|
|
|
+ <!-- 状态遮罩 -->
|
|
|
|
|
+ <view class="status-mask" v-if="item.availableStock === 0">
|
|
|
|
|
+ <text>暂无库存</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
<view class="info-right">
|
|
<view class="info-right">
|
|
|
<text class="title">{{ item.bookName || '-' }}</text>
|
|
<text class="title">{{ item.bookName || '-' }}</text>
|
|
@@ -23,8 +29,10 @@
|
|
|
<text class="original">¥{{ item.bookOriginalPrice }}</text>
|
|
<text class="original">¥{{ item.bookOriginalPrice }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <view class="cart-btn" @click.stop="handleAddToCart">
|
|
|
|
|
- <text>加入购物车</text>
|
|
|
|
|
|
|
+ <view class="cart-btn" :class="{ 'gray-btn': item.availableStock === 0 && item.hasArrivalNotice === 1 }" @click.stop="handleAction">
|
|
|
|
|
+ <text v-if="item.availableStock === 0 && item.hasArrivalNotice === 1">取消到货通知</text>
|
|
|
|
|
+ <text v-else-if="item.availableStock === 0">到货通知</text>
|
|
|
|
|
+ <text v-else>加入购物车</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -59,6 +67,29 @@ export default {
|
|
|
url: '/pages-sell/pages/detail?isbn=' + this.item.bookIsbn || ''
|
|
url: '/pages-sell/pages/detail?isbn=' + this.item.bookIsbn || ''
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ handleAction() {
|
|
|
|
|
+ if (this.item.availableStock === 0) {
|
|
|
|
|
+ this.handleNotify();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.handleAddToCart();
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ handleNotify() {
|
|
|
|
|
+ const isCancel = this.item.hasArrivalNotice === 1;
|
|
|
|
|
+ const apiUrl = isCancel ? '/token/shop/user/noticeArrivalCancel' : '/token/shop/user/noticeArrival';
|
|
|
|
|
+
|
|
|
|
|
+ uni.$u.http.post(apiUrl, {
|
|
|
|
|
+ isbn: this.item.bookIsbn,
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ const newValue = isCancel ? 0 : 1;
|
|
|
|
|
+ this.$emit('update-item', { ...this.item, hasArrivalNotice: newValue });
|
|
|
|
|
+ this.$set(this.item, 'hasArrivalNotice', newValue);
|
|
|
|
|
+ this.item.hasArrivalNotice = newValue;
|
|
|
|
|
+ this.$u.toast(isCancel ? '已取消到货通知' : '到货通知设置成功');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
handleAddToCart() {
|
|
handleAddToCart() {
|
|
|
this.item.isbn = this.item.bookIsbn || '';
|
|
this.item.isbn = this.item.bookIsbn || '';
|
|
|
this.$refs.popup.open(this.item, 1);
|
|
this.$refs.popup.open(this.item, 1);
|
|
@@ -102,13 +133,37 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
|
|
- .book-cover {
|
|
|
|
|
|
|
+ .image-wrapper {
|
|
|
|
|
+ position: relative;
|
|
|
width: 140rpx;
|
|
width: 140rpx;
|
|
|
height: 180rpx;
|
|
height: 180rpx;
|
|
|
border-radius: 4rpx;
|
|
border-radius: 4rpx;
|
|
|
background-color: #f5f5f5;
|
|
background-color: #f5f5f5;
|
|
|
margin-right: 24rpx;
|
|
margin-right: 24rpx;
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .book-cover {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .status-mask {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ text {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.info-right {
|
|
.info-right {
|
|
@@ -175,6 +230,10 @@ export default {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
+ &.gray-btn {
|
|
|
|
|
+ background: #cccccc;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
text {
|
|
text {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
color: #fff;
|
|
color: #fff;
|