You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
12 KiB
324 lines
12 KiB
4 months ago
|
<template>
|
||
|
|
<!-- 推荐的商品 -->
|
||
|
|
<view v-if="!isLoading && setting.enabled && $checkModule('market-recommended') && goodsList.length" :style="appThemeStyle"
|
||
|
|
class="recommended">
|
||
|
|
<!-- 商品推荐标题 -->
|
||
|
|
<view class="header">
|
||
|
|
<view class="left">
|
||
|
|
<image class="image"
|
||
|
|
src="data:image/png;base64,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">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
<view class="title">{{ setting.style.title }}</view>
|
||
|
|
<image class="image"
|
||
|
|
src="data:image/png;base64,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">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
<!-- 商品列表 -->
|
||
|
|
<view class="goods-list" :class="[`display__${setting.style.display}`, `column__${setting.style.column}`]">
|
||
|
|
<view class="goods-item" v-for="(dataItem, index) in goodsList" :key="index" @click="onTargetGoods(dataItem.goods_id)">
|
||
|
|
<!-- 单列商品 -->
|
||
|
|
<block v-if="setting.style.column === 1">
|
||
|
|
<view class="dis-flex">
|
||
|
|
<!-- 商品图片 -->
|
||
|
|
<view class="goods-item-left">
|
||
|
|
<image class="image" :src="dataItem.goods_image"></image>
|
||
|
|
</view>
|
||
|
|
<view class="goods-item-right">
|
||
|
|
<!-- 商品名称 -->
|
||
|
|
<view v-if="setting.style.show.includes('goodsName')" class="goods-name">
|
||
|
|
<text class="twoline-hide">{{ dataItem.goods_name }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="goods-item-desc">
|
||
|
|
<!-- 商品卖点 -->
|
||
|
|
<view v-if="setting.style.show.includes('sellingPoint')" class="desc-selling-point dis-flex">
|
||
|
|
<text class="oneline-hide">{{ dataItem.selling_point }}</text>
|
||
|
|
</view>
|
||
|
|
<!-- 商品销量 -->
|
||
|
|
<view v-if="setting.style.show.includes('goodsSales')" class="desc-goods-sales dis-flex">
|
||
|
|
<text>已售{{ dataItem.goods_sales }}件</text>
|
||
|
|
</view>
|
||
|
|
<!-- 商品价格 -->
|
||
|
|
<view class="desc-footer">
|
||
|
|
<text v-if="setting.style.show.includes('goodsPrice')" class="price-x">¥{{ dataItem.goods_price_min }}</text>
|
||
|
|
<text v-if="setting.style.show.includes('linePrice') && dataItem.line_price_min > 0"
|
||
|
|
class="price-y col-9">¥{{ dataItem.line_price_min }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<!-- 多列商品 -->
|
||
|
|
<block v-else>
|
||
|
|
<!-- 商品图片 -->
|
||
|
|
<view class="goods-image">
|
||
|
|
<image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
|
||
|
|
</view>
|
||
|
|
<view class="detail">
|
||
|
|
<!-- 商品标题 -->
|
||
|
|
<view v-if="setting.style.show.includes('goodsName')" class="goods-name">
|
||
|
|
<text class="twoline-hide">{{ dataItem.goods_name }}</text>
|
||
|
|
</view>
|
||
|
|
<!-- 商品价格 -->
|
||
|
|
<view class="detail-price oneline-hide">
|
||
|
|
<text v-if="setting.style.show.includes('goodsPrice')" class="goods-price">￥{{ dataItem.goods_price_min }}</text>
|
||
|
|
<text v-if="setting.style.show.includes('linePrice') && dataItem.line_price_min > 0"
|
||
|
|
class="line-price col-9 f-24">￥{{ dataItem.line_price_min }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as GoodsApi from '@/api/goods'
|
||
|
|
import SettingKeyEnum from '@/common/enum/setting/Key'
|
||
|
|
import SettingModel from '@/common/model/Setting'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "Recommended",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 正在加载
|
||
|
|
isLoading: true,
|
||
|
|
// 商品列表
|
||
|
|
goodsList: [],
|
||
|
|
// 推荐商品设置
|
||
|
|
setting: {
|
||
|
|
enabled: 1,
|
||
|
|
style: {
|
||
|
|
show: []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async created() {
|
||
|
|
const app = this
|
||
|
|
app.isLoading = true
|
||
|
|
await app.getSetting()
|
||
|
|
if (app.setting.enabled && app.$checkModule('market-recommended')) {
|
||
|
|
await app.getRecommended()
|
||
|
|
}
|
||
|
|
app.isLoading = false
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 组件的方法列表
|
||
|
|
* 更新属性和数据的方法与更新页面数据的方法类似
|
||
|
|
*/
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
// 获取推荐商品列表
|
||
|
|
async getRecommended() {
|
||
|
|
const app = this
|
||
|
|
await GoodsApi.recommended().then(result => app.goodsList = result.data.goodsList)
|
||
|
|
},
|
||
|
|
|
||
|
|
// 获取商城设置
|
||
|
|
async getSetting() {
|
||
|
|
const app = this
|
||
|
|
await SettingModel.item(SettingKeyEnum.RECOMMENDED.value)
|
||
|
|
.then(setting => app.setting = setting)
|
||
|
|
},
|
||
|
|
|
||
|
|
// 跳转商品详情页
|
||
|
|
onTargetGoods(goodsId) {
|
||
|
|
this.$navTo(`pages/goods/detail`, { goodsId })
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.recommended {
|
||
|
|
margin-top: 60rpx;
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
|
||
|
|
.image {
|
||
|
|
display: block;
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin: 0 26rpx;
|
||
|
|
color: #333333;
|
||
|
|
letter-spacing: 4rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-list {
|
||
|
|
// background: rgb(246, 246, 246);
|
||
|
|
padding: 4rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
clear: both;
|
||
|
|
content: " ";
|
||
|
|
display: table;
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-item {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 6rpx;
|
||
|
|
|
||
|
|
.goods-image {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 0;
|
||
|
|
padding-bottom: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #fff;
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
margin-top: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
-o-object-fit: cover;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail {
|
||
|
|
padding: 8rpx;
|
||
|
|
background: #fff;
|
||
|
|
|
||
|
|
.goods-name {
|
||
|
|
min-height: 68rpx;
|
||
|
|
line-height: 1.3;
|
||
|
|
white-space: normal;
|
||
|
|
color: #484848;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-price {
|
||
|
|
.goods-price {
|
||
|
|
margin-right: 8rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: $main-bg;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line-price {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.display__slide {
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: 0;
|
||
|
|
|
||
|
|
.goods-item {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.display__list {
|
||
|
|
.goods-item {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.column__2 {
|
||
|
|
.goods-item {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.column__3 {
|
||
|
|
.goods-item {
|
||
|
|
width: 33.33333%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.column__1 {
|
||
|
|
.goods-item {
|
||
|
|
width: 100%;
|
||
|
|
height: 280rpx;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: #fff;
|
||
|
|
line-height: 1.6;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-item-left {
|
||
|
|
display: flex;
|
||
|
|
width: 40%;
|
||
|
|
background: #fff;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.image {
|
||
|
|
display: block;
|
||
|
|
width: 240rpx;
|
||
|
|
height: 240rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-item-right {
|
||
|
|
position: relative;
|
||
|
|
width: 60%;
|
||
|
|
|
||
|
|
.goods-name {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
min-height: 68rpx;
|
||
|
|
line-height: 1.3;
|
||
|
|
white-space: normal;
|
||
|
|
color: #484848;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-item-desc {
|
||
|
|
margin-top: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.desc-selling-point {
|
||
|
|
width: 400rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #e49a3d;
|
||
|
|
}
|
||
|
|
|
||
|
|
.desc-goods-sales {
|
||
|
|
color: #999;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.desc-footer {
|
||
|
|
font-size: 24rpx;
|
||
|
|
|
||
|
|
.price-x {
|
||
|
|
margin-right: 16rpx;
|
||
|
|
color: $main-bg;
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-y {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|