|
|
@@ -41,174 +41,174 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import SelectGoodPopup from '../select-good-popup/index.vue';
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'RecommendItem',
|
|
|
- components: {
|
|
|
- SelectGoodPopup
|
|
|
- },
|
|
|
- props: {
|
|
|
- item: {
|
|
|
- type: Object,
|
|
|
- required: true
|
|
|
- },
|
|
|
- showDesc: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- highlightedName() {
|
|
|
- return this.parseEmTag(this.item.name || this.item.title || '');
|
|
|
- },
|
|
|
- highlightedAuthor() {
|
|
|
- return this.parseEmTag(this.item.author || '');
|
|
|
- },
|
|
|
- highlightedDesc() {
|
|
|
- return this.parseEmTag(this.item.description || this.item.desc || '暂无简介');
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- parseEmTag(text) {
|
|
|
- if (!text) return '';
|
|
|
- return text.replace(/<em>/g, '<span style="color: #38C148">').replace(/<\/em>/g, '</span>');
|
|
|
+ import SelectGoodPopup from '../select-good-popup/index.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'RecommendItem',
|
|
|
+ components: {
|
|
|
+ SelectGoodPopup
|
|
|
},
|
|
|
- handleAddToCart() {
|
|
|
- // Open the popup using ref
|
|
|
- // 加入购物车时,传递 sourceFrom 参数为 2
|
|
|
- this.$refs.popup.open(this.item, 1);
|
|
|
+ props: {
|
|
|
+ item: {
|
|
|
+ type: Object,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ showDesc: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
},
|
|
|
- onPopupConfirm(data) {
|
|
|
- // Emit the confirmed data
|
|
|
- this.$emit('add-cart', data);
|
|
|
+ computed: {
|
|
|
+ highlightedName() {
|
|
|
+ return this.parseEmTag(this.item.name || this.item.title || '');
|
|
|
+ },
|
|
|
+ highlightedAuthor() {
|
|
|
+ return this.parseEmTag(this.item.author || '');
|
|
|
+ },
|
|
|
+ highlightedDesc() {
|
|
|
+ return this.parseEmTag(this.item.description || this.item.desc || '暂无简介');
|
|
|
+ }
|
|
|
},
|
|
|
- //图书详情页
|
|
|
- handleClick() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages-sell/pages/detail?isbn=' + this.item.isbn
|
|
|
- });
|
|
|
+ methods: {
|
|
|
+ parseEmTag(text) {
|
|
|
+ if (!text) return '';
|
|
|
+ return text.replace(/<em>/g, '<span style="color: #38C148">').replace(/<\/em>/g, '</span>');
|
|
|
+ },
|
|
|
+ handleAddToCart() {
|
|
|
+ // Open the popup using ref
|
|
|
+ // 加入购物车时,传递 sourceFrom 参数为 2
|
|
|
+ this.$refs.popup.open(this.item, props.showDesc ? 2 : 1);
|
|
|
+ },
|
|
|
+ onPopupConfirm(data) {
|
|
|
+ // Emit the confirmed data
|
|
|
+ this.$emit('add-cart', data);
|
|
|
+ },
|
|
|
+ //图书详情页
|
|
|
+ handleClick() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages-sell/pages/detail?isbn=' + this.item.isbn
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.recommend-item {
|
|
|
- padding: 30rpx 0;
|
|
|
- border-bottom: 1rpx dashed #EEEEEE;
|
|
|
-
|
|
|
- .main-info {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .book-cover {
|
|
|
- width: 172rpx;
|
|
|
- height: 220rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
+ .recommend-item {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 1rpx dashed #EEEEEE;
|
|
|
|
|
|
- .info-right {
|
|
|
- flex: 1;
|
|
|
+ .main-info {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 4rpx 0;
|
|
|
-
|
|
|
- .title-author {
|
|
|
- .title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- display: block;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
-
|
|
|
- .author {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .book-cover {
|
|
|
+ width: 172rpx;
|
|
|
+ height: 220rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
- .price-action {
|
|
|
+ .info-right {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- align-items: flex-end;
|
|
|
+ padding: 4rpx 0;
|
|
|
|
|
|
- .price-box {
|
|
|
- .currency {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FF4B4B;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #FF4B4B;
|
|
|
+ .title-author {
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
- margin-right: 12rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ display: block;
|
|
|
+ line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
- .original {
|
|
|
+ .author {
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
- text-decoration: line-through;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .cart-btn {
|
|
|
- background: #38C248;
|
|
|
- border-radius: 30rpx;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
+ .price-action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ .currency {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF4B4B;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #FF4B4B;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .original {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #fff;
|
|
|
+ .cart-btn {
|
|
|
+ background: #38C248;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .desc-section {
|
|
|
- .desc-header {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- margin-bottom: 16rpx;
|
|
|
-
|
|
|
- .label {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ .desc-section {
|
|
|
+ .desc-header {
|
|
|
position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
|
|
- .indicator {
|
|
|
- position: absolute;
|
|
|
- bottom: 4rpx;
|
|
|
- right: 4rpx;
|
|
|
- width: 30rpx;
|
|
|
- height: 8rpx;
|
|
|
- background: #4ED964;
|
|
|
- border-radius: 4rpx;
|
|
|
- z-index: 0;
|
|
|
+ .label {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .indicator {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 4rpx;
|
|
|
+ right: 4rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #4ED964;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .desc-content {
|
|
|
- font-family: Source Han Sans SC;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #8D8D8D;
|
|
|
- line-height: 1.6;
|
|
|
- display: block;
|
|
|
- text-align: justify;
|
|
|
+ .desc-content {
|
|
|
+ font-family: Source Han Sans SC;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #8D8D8D;
|
|
|
+ line-height: 1.6;
|
|
|
+ display: block;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|