|
|
@@ -34,10 +34,14 @@
|
|
|
<!-- 已降价标签 -->
|
|
|
<view class="tag green-tag" v-if="item.currReduceMoney > 0">
|
|
|
<text>已降¥{{ item.currReduceMoney }}</text>
|
|
|
+ <image src="../static/down.jpg"
|
|
|
+ style="width: 20rpx; height: 20rpx; margin-left: 4rpx;position: relative;top: 4rpx;"></image>
|
|
|
</view>
|
|
|
<!-- 可降价标签 -->
|
|
|
- <view class="tag orange-tag" v-if="canReduce" @click.stop="handleReduce">
|
|
|
+ <view class="tag green-tag" v-if="canReduce" @click.stop="handleReduce">
|
|
|
<text>可降¥{{ item.reduceMoney }}</text>
|
|
|
+ <image src="../static/down.jpg"
|
|
|
+ style="width: 20rpx; height: 20rpx; margin-left: 4rpx;position: relative;top: 4rpx;"></image>
|
|
|
</view>
|
|
|
|
|
|
<!-- 倒计时 -->
|
|
|
@@ -71,273 +75,273 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- item: {
|
|
|
- type: Object,
|
|
|
- default: () => ({})
|
|
|
- }
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ item: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ conditionName() {
|
|
|
+ // 如果是数字,映射;如果是字符串,直接显示
|
|
|
+ return this.$conditionMap[this.item.conditionType] || '-';
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- };
|
|
|
+ isValid() {
|
|
|
+ // stockStatus: 1-有库存 2-库存紧张 3-暂无库存
|
|
|
+ return this.item.stockStatus !== 3 && this.item.availableStock > 0;
|
|
|
},
|
|
|
- computed: {
|
|
|
- conditionName() {
|
|
|
- // 如果是数字,映射;如果是字符串,直接显示
|
|
|
- return this.$conditionMap[this.item.conditionType] || '-';
|
|
|
- },
|
|
|
- isValid() {
|
|
|
- // stockStatus: 1-有库存 2-库存紧张 3-暂无库存
|
|
|
- return this.item.stockStatus !== 3 && this.item.availableStock > 0;
|
|
|
- },
|
|
|
- statusText() {
|
|
|
- if (this.item.stockStatus === 3 || this.item.availableStock <= 0) return '暂无库存';
|
|
|
- // 如果后端定义了其他状态,你可能需要处理它们
|
|
|
- return '';
|
|
|
- },
|
|
|
- canReduce() {
|
|
|
- // 逻辑:如果成功减价次数少于允许的最大次数,且 reduceMoney > 0
|
|
|
- // 或者简单地如果 reduceMoney > 0 且我们还没有达到限制?
|
|
|
- // 假设 reduceMoney 是单价减少额。
|
|
|
- return (this.item.reduceNum < this.item.maxReduceNum) && (this.item.reduceMoney > 0);
|
|
|
- }
|
|
|
+ statusText() {
|
|
|
+ if (this.item.stockStatus === 3 || this.item.availableStock <= 0) return '暂无库存';
|
|
|
+ // 如果后端定义了其他状态,你可能需要处理它们
|
|
|
+ return '';
|
|
|
},
|
|
|
- methods: {
|
|
|
- toggleCheck() {
|
|
|
- if (!this.isValid) return;
|
|
|
- const newChecked = !this.item.checked;
|
|
|
- this.item.checked = newChecked;
|
|
|
- this.$emit('check', { id: this.item.id, checked: newChecked });
|
|
|
- },
|
|
|
- onCheckChange(val) {
|
|
|
- this.$emit('check', { id: this.item.id, checked: val.value });
|
|
|
- },
|
|
|
- onNumChange(val) {
|
|
|
- this.$emit('changeNum', { id: this.item.id, num: val.value });
|
|
|
- },
|
|
|
- handleReduce() {
|
|
|
- this.$emit('reduce', this.item);
|
|
|
- },
|
|
|
- handleSelectCondition() {
|
|
|
- this.$emit('selectCondition', this.item);
|
|
|
- },
|
|
|
- onCountdownFinish() {
|
|
|
- this.$emit('countdown-finish', this.item);
|
|
|
- },
|
|
|
- goToDetail() {
|
|
|
- const isbn = this.item.isbn || this.item.bookIsbn || this.item.id;
|
|
|
- if (isbn) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages-sell/pages/detail?isbn=${isbn}`
|
|
|
- });
|
|
|
- }
|
|
|
+ canReduce() {
|
|
|
+ // 逻辑:如果成功减价次数少于允许的最大次数,且 reduceMoney > 0
|
|
|
+ // 或者简单地如果 reduceMoney > 0 且我们还没有达到限制?
|
|
|
+ // 假设 reduceMoney 是单价减少额。
|
|
|
+ return (this.item.reduceNum < this.item.maxReduceNum) && (this.item.reduceMoney > 0);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleCheck() {
|
|
|
+ if (!this.isValid) return;
|
|
|
+ const newChecked = !this.item.checked;
|
|
|
+ this.item.checked = newChecked;
|
|
|
+ this.$emit('check', { id: this.item.id, checked: newChecked });
|
|
|
+ },
|
|
|
+ onCheckChange(val) {
|
|
|
+ this.$emit('check', { id: this.item.id, checked: val.value });
|
|
|
+ },
|
|
|
+ onNumChange(val) {
|
|
|
+ this.$emit('changeNum', { id: this.item.id, num: val.value });
|
|
|
+ },
|
|
|
+ handleReduce() {
|
|
|
+ this.$emit('reduce', this.item);
|
|
|
+ },
|
|
|
+ handleSelectCondition() {
|
|
|
+ this.$emit('selectCondition', this.item);
|
|
|
+ },
|
|
|
+ onCountdownFinish() {
|
|
|
+ this.$emit('countdown-finish', this.item);
|
|
|
+ },
|
|
|
+ goToDetail() {
|
|
|
+ const isbn = this.item.isbn || this.item.bookIsbn || this.item.id;
|
|
|
+ if (isbn) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages-sell/pages/detail?isbn=${isbn}`
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .cart-item {
|
|
|
+.cart-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ border-bottom: 1rpx dashed #f5f5f5;
|
|
|
+
|
|
|
+ .checkbox-box {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 200rpx;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20rpx 20rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- border-bottom: 1rpx dashed #f5f5f5;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: -20rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ &.disabled-checkbox {
|
|
|
+ .circle {
|
|
|
+ width: 34rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .checkbox-box {
|
|
|
- width: 80rpx;
|
|
|
+ .image-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .book-cover {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- min-height: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-right: -20rpx;
|
|
|
- position: relative;
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- &.disabled-checkbox {
|
|
|
- .circle {
|
|
|
- width: 34rpx;
|
|
|
- height: 34rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #e5e5e5;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .image-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 150rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- overflow: hidden;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-right: 20rpx;
|
|
|
-
|
|
|
- .book-cover {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .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;
|
|
|
+ .stock-mask {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: #38C148; // 绿色背景
|
|
|
+ opacity: 0.8;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- text {
|
|
|
- color: #fff;
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .stock-mask {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- background-color: #38C148; // 绿色背景
|
|
|
- opacity: 0.8;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ .info-box {
|
|
|
+ flex: 1;
|
|
|
+ height: 220rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- text {
|
|
|
- color: #fff;
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ ::v-deep .u-countdown-colon {
|
|
|
+ font-size: 24rpx !important;
|
|
|
}
|
|
|
|
|
|
- .info-box {
|
|
|
- flex: 1;
|
|
|
- height: 220rpx;
|
|
|
+ .title-row {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
-
|
|
|
- ::v-deep .u-countdown-colon {
|
|
|
- font-size: 24rpx !important;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.4;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 10rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .title-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .title {
|
|
|
- flex: 1;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
- line-height: 1.4;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- font-weight: 600;
|
|
|
- margin-right: 10rpx;
|
|
|
+ .tags-quality-row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20rpx 0 0 0;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ border: 1rpx solid transparent;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+
|
|
|
+ &.green-tag {
|
|
|
+ color: #38C148;
|
|
|
+ background-color: rgba(56, 193, 72, 0.1);
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .tags-quality-row {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin: 20rpx 0 0 0;
|
|
|
-
|
|
|
- .tag {
|
|
|
- font-size: 22rpx;
|
|
|
- padding: 2rpx 8rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- border: 1rpx solid transparent;
|
|
|
- margin-bottom: 6rpx;
|
|
|
-
|
|
|
- &.green-tag {
|
|
|
- color: #38C148;
|
|
|
- border-color: #38C148;
|
|
|
- background-color: rgba(56, 193, 72, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- &.orange-tag {
|
|
|
- color: #ff6a00;
|
|
|
- border-color: #ff6a00;
|
|
|
- background-color: rgba(255, 106, 0, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- &.red-text-tag {
|
|
|
- background-color: #38C148;
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- }
|
|
|
+ &.orange-tag {
|
|
|
+ color: #ff6a00;
|
|
|
+ border-color: #ff6a00;
|
|
|
+ background-color: rgba(255, 106, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
- .quality-selector {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- background-color: #f5f5f5;
|
|
|
- padding: 4rpx 12rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- width: fit-content;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- order: -1; // 移到前面
|
|
|
+ &.red-text-tag {
|
|
|
+ background-color: #38C148;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .countdown-wrap {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 24rpx !important;
|
|
|
- color: #db0702;
|
|
|
- margin-left: 6rpx;
|
|
|
-
|
|
|
- text {
|
|
|
- margin-right: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .quality-selector {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ width: fit-content;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ order: -1; // 移到前面
|
|
|
}
|
|
|
|
|
|
- .bottom-row {
|
|
|
+ .countdown-wrap {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: auto;
|
|
|
+ font-size: 24rpx !important;
|
|
|
+ color: #db0702;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
|
|
|
- .price-box {
|
|
|
- color: #e02020;
|
|
|
- font-weight: bold;
|
|
|
+ text {
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .symbol {
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
+ .bottom-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: auto;
|
|
|
|
|
|
- .amount {
|
|
|
- font-size: 36rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .price-box {
|
|
|
+ color: #e02020;
|
|
|
+ font-weight: bold;
|
|
|
|
|
|
- .reduce-btn {
|
|
|
- background-color: #38C148;
|
|
|
- color: #fff;
|
|
|
+ .symbol {
|
|
|
font-size: 24rpx;
|
|
|
- padding: 6rpx 16rpx;
|
|
|
- border-radius: 26rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- margin-right: auto; // 将数字框推到右边
|
|
|
}
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .reduce-btn {
|
|
|
+ background-color: #38C148;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-right: auto; // 将数字框推到右边
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|