mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 19:07:23 +08:00
refactor: 更新多个页面的样式和结构
This commit is contained in:
pikachu1995@126.com
@@ -2,27 +2,45 @@
|
||||
<view class="evaluate-box">
|
||||
<view class="eva-section" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)">
|
||||
<view class="e-header">
|
||||
|
||||
<view class="evaluate-title">评价</view>
|
||||
<text class="evaluate-num">{{ commDetail.total || '0' }}+</text>
|
||||
<text class="tip">好评率 {{ grade || '100' }}%</text>
|
||||
</view>
|
||||
<div v-if="commDetail && commDetail.records && commDetail.records.length > 0">
|
||||
<view class="eva-box" v-for="(commItem,commIndex) in commDetail.records.slice(0,2)" :key="commIndex">
|
||||
<view v-if="commDetail && commDetail.records && commDetail.records.length">
|
||||
<view class="eva-box" v-for="(commItem, commIndex) in commDetail.records.slice(0, 2)" :key="commIndex">
|
||||
<view class="section-info">
|
||||
<u-avatar mode="circle" size="60" class="portrait" :src="commItem.memberProfile"></u-avatar>
|
||||
<u-avatar
|
||||
mode="circle"
|
||||
size="40"
|
||||
class="portrait"
|
||||
:src="commItem.memberProfile"
|
||||
></u-avatar>
|
||||
<view class="star-con">
|
||||
<text class="name">{{noPassByName(commItem.memberName) }}</text>
|
||||
<text class="name">{{ noPassByName(commItem.memberName) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section-contant">
|
||||
<u-read-more ref="uReadMore" :color="lightColor">
|
||||
<rich-text @load="parseLoaded" :nodes="commItem.content " class="con"></rich-text>
|
||||
<u-read-more
|
||||
ref="uReadMore"
|
||||
:color="lightColor"
|
||||
text-indent="0"
|
||||
:show-height="120"
|
||||
>
|
||||
<rich-text @load="parseLoaded(commIndex)" :nodes="commItem.content" class="con"></rich-text>
|
||||
</u-read-more>
|
||||
<scroll-view scroll-x class="scroll-x" v-if="commItem.image">
|
||||
<view class="img">
|
||||
<u-image border-radius="12" class="commImg" width="160rpx" height="160rpx" v-for="(item, index) in commItem.image.split(',')" :src="item" :key="index"
|
||||
@click.stop="previewImg(commItem.image, index)"></u-image>
|
||||
<scroll-view scroll-x class="scroll-x" v-if="commentImages(commItem).length">
|
||||
<view class="img-list">
|
||||
<u-image
|
||||
border-radius="12"
|
||||
class="commImg"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
mode="aspectFill"
|
||||
v-for="(item, index) in commentImages(commItem)"
|
||||
:src="item"
|
||||
:key="index"
|
||||
@click.stop="previewImg(commentImages(commItem), index)"
|
||||
></u-image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="bot">
|
||||
@@ -30,14 +48,17 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<div v-else class="goodsNoMore">
|
||||
<view v-else class="goodsNoMore">
|
||||
<u-empty text="该商品暂无评论" mode="message"></u-empty>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 查看全部评价按钮 -->
|
||||
<view v-if="commDetail && commDetail.records && commDetail.records.length > 0" class="eva-section-btn" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)">
|
||||
<view
|
||||
v-if="commDetail && commDetail.records && commDetail.records.length"
|
||||
class="eva-section-btn"
|
||||
@click="toComment(goodsDetail.goodsId, goodsDetail.grade)"
|
||||
>
|
||||
<text class="btn-text">查看全部评价</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -49,10 +70,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$lightColor,
|
||||
// 评论集合
|
||||
commDetail: [],
|
||||
grade: "",
|
||||
// 评论分页提交数据
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -62,7 +81,7 @@ export default {
|
||||
},
|
||||
props: {
|
||||
goodsDetail: {
|
||||
default: {},
|
||||
default: () => ({}),
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
@@ -70,40 +89,47 @@ export default {
|
||||
watch: {
|
||||
goodsDetail: {
|
||||
handler(val) {
|
||||
this.grade = val.grade;
|
||||
this.getGoodsCommentsMethods();
|
||||
if (val && val.goodsId) {
|
||||
this.grade = val.grade;
|
||||
this.getGoodsCommentsMethods();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseLoaded() {
|
||||
this.$refs.uReadMore.init();
|
||||
commentImages(item) {
|
||||
const images = item.images || item.image;
|
||||
if (!images) return [];
|
||||
return typeof images === "string" ? images.split(",").filter(Boolean) : images;
|
||||
},
|
||||
|
||||
// 获取商品评论
|
||||
getGoodsCommentsMethods() {
|
||||
API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then(
|
||||
(res) => {
|
||||
this.commDetail = res.data.result;
|
||||
}
|
||||
);
|
||||
parseLoaded(index) {
|
||||
this.$nextTick(() => {
|
||||
const refs = this.$refs.uReadMore;
|
||||
const target = Array.isArray(refs) ? refs[index] : refs;
|
||||
target && target.init && target.init();
|
||||
});
|
||||
},
|
||||
|
||||
getGoodsCommentsMethods() {
|
||||
if (!this.goodsDetail.goodsId) return;
|
||||
API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then((res) => {
|
||||
this.commDetail = res.data.result;
|
||||
});
|
||||
},
|
||||
|
||||
toComment(id, grade) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/comment?id=${id}&grade=${grade}`,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 点击图片放大或保存
|
||||
*/
|
||||
previewImg(url, index) {
|
||||
|
||||
previewImg(urls, index) {
|
||||
uni.previewImage({
|
||||
urls: url,
|
||||
urls,
|
||||
indicator: "number",
|
||||
current: index,
|
||||
});
|
||||
@@ -114,33 +140,31 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../product.scss";
|
||||
.commImg {
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #262626;
|
||||
font-size: 22rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.eva-section-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40rpx 40rpx 50rpx;
|
||||
margin: 2px 0 20rpx 0;
|
||||
padding: 24rpx 0 40rpx;
|
||||
background: #fff;
|
||||
|
||||
.btn-text {
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 46rpx;
|
||||
min-width: 200rpx;
|
||||
height: 56rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
border: 2rpx solid #ededed;
|
||||
box-sizing: border-box;
|
||||
border-radius: 30px;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,30 +173,21 @@ export default {
|
||||
text-align: center;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
/* 评价 */
|
||||
|
||||
.eva-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: #fff;
|
||||
|
||||
.e-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
|
||||
font-size: $font-sm + 2rpx;
|
||||
color: $font-color-light;
|
||||
> .evaluate-num {
|
||||
.evaluate-num {
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
color: $font-color-dark;
|
||||
font-weight: 500;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
flex: 1;
|
||||
@@ -180,55 +195,69 @@ export default {
|
||||
color: #8c8c8c;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.icon-you {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-x {
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
overflow-x: auto;
|
||||
.scroll-x {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eva-box {
|
||||
padding: 36rpx 0 30rpx 0;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.section-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.portrait {
|
||||
flex-shrink: 0;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 100px;
|
||||
margin-right: 20rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
> .star-con > .name {
|
||||
margin-left: 6rpx;
|
||||
.star-con {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-contant {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
|
||||
:deep(.u-read-more__content) {
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
.con {
|
||||
font-size: 26rpx;
|
||||
line-height: 46rpx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.img-list {
|
||||
display: inline-flex;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx 0 4rpx;
|
||||
}
|
||||
|
||||
.commImg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
margin-top: 12rpx;
|
||||
|
||||
.attr {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<view class="detail-box">
|
||||
<view v-if="hasDetailContent">
|
||||
<view class="detail-box" v-if="res.mobileIntro">
|
||||
<view class="goods-detail">
|
||||
<view class="detail_padding">
|
||||
<div class="goods-detail-box">
|
||||
<div class="goods-detail-item goods-active">商品介绍</div>
|
||||
</div>
|
||||
<u-empty
|
||||
class="empty"
|
||||
text="暂无商品介绍"
|
||||
mode="data"
|
||||
v-if="!res.mobileIntro"
|
||||
></u-empty>
|
||||
<u-parse
|
||||
class="vhtml"
|
||||
:lazy-load="true"
|
||||
@@ -22,17 +16,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-box">
|
||||
<view class="detail-box" v-if="goodsParams && goodsParams.length">
|
||||
<view class="goods-detail">
|
||||
<view class="detail_padding">
|
||||
<div class="goods-detail-box">
|
||||
<div class="goods-detail-item goods-active">商品参数</div>
|
||||
</div>
|
||||
<!-- <u-divider>商品参数</u-divider> -->
|
||||
<div class="param-list" v-if="goodsParams.length == 0">
|
||||
<u-empty text="暂无商品参数" mode="list"></u-empty>
|
||||
</div>
|
||||
<div class="param-list" v-else>
|
||||
<div class="param-list">
|
||||
<div
|
||||
class="param-item"
|
||||
v-for="(param, index) in goodsParams"
|
||||
@@ -45,7 +36,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -60,6 +51,11 @@ export default {
|
||||
};
|
||||
},
|
||||
props: ["res", "goodsId", "goodsParams"],
|
||||
computed: {
|
||||
hasDetailContent() {
|
||||
return !!(this.res?.mobileIntro || (this.goodsParams && this.goodsParams.length));
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
let res = await getGoodsMessage(this.goodsId);
|
||||
if (res.data.success) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="recommend-box" >
|
||||
<view class="recommend-box" v-if="res && res.length">
|
||||
<h4 class="goods-recommend-title">热门商品</h4>
|
||||
<goodsList :res='res' v-if="res" :storeName="false" />
|
||||
<goodsList :res='res' :storeName="false" :tabBarGap="false" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<span class="group-item-name">还差{{ order.toBeGroupedNum }}人成团</span>
|
||||
</view>
|
||||
<view>
|
||||
<u-button size="mini" :custom-style="customStyle" @click="buy(order)"
|
||||
<u-button size="mini" :custom-style="joinBtnStyle" @click="buy(order)"
|
||||
>去参团</u-button
|
||||
>
|
||||
</view>
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
configs,
|
||||
userImage:configs.defaultUserPhoto,
|
||||
|
||||
customStyle: {
|
||||
joinBtnStyle: {
|
||||
background: this.$lightColor,
|
||||
color: "#fff",
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<div v-for="(promotion, promotion_index) in res" :key="promotion_index">
|
||||
<div v-for="(promotion, promotion_index) in promotionList" :key="promotion_index">
|
||||
<div
|
||||
class="showBox"
|
||||
v-if="
|
||||
@@ -46,7 +46,6 @@
|
||||
goodsFormatPrice(promotion.groupbuy_goods_vo.price)[1]
|
||||
}}</span
|
||||
>
|
||||
<!-- <span v-if="promotion.point">+{{promotion.point}}积分</span> -->
|
||||
</span>
|
||||
<view class="u-group-flex">
|
||||
<span
|
||||
@@ -89,17 +88,16 @@
|
||||
</view>
|
||||
<view class="showBox_R" v-if="promotion && promotion.endTime">
|
||||
<u-tag :text="getIsTimer(promotion)" size="mini" type="error" />
|
||||
<u-count-down
|
||||
:hide-zero-day="true"
|
||||
font-size="25"
|
||||
color="#fff"
|
||||
bg-color="#f71471"
|
||||
separator-size="25"
|
||||
separator-color="#f71471"
|
||||
:show-hours="true"
|
||||
:show-minutes="true"
|
||||
:timestamp="getCountDownTime(promotion.endTime)"
|
||||
></u-count-down>
|
||||
<view class="promotion-countdown" v-if="countdownData[promotion_index]">
|
||||
<text v-if="countdownData[promotion_index].days > 0" class="countdown-day">
|
||||
{{ countdownData[promotion_index].days }}天
|
||||
</text>
|
||||
<text class="countdown-num">{{ padTime(countdownDisplayHours(promotion_index)) }}</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">{{ padTime(countdownData[promotion_index].minutes) }}</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">{{ padTime(countdownData[promotion_index].seconds) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
@@ -111,50 +109,113 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
countdownData: {},
|
||||
countdownTimer: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
// 活动，促销数据
|
||||
res: {
|
||||
type: null,
|
||||
default: {},
|
||||
},
|
||||
// 商品详情
|
||||
detail: {
|
||||
type: null,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
promotionList() {
|
||||
if (!this.res || typeof this.res !== "object") return [];
|
||||
return Object.keys(this.res).map((key) => ({
|
||||
...(this.res[key] || {}),
|
||||
__key: key.split("-")[0],
|
||||
}));
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
res: {
|
||||
handler() {
|
||||
if (this.res && this.res.length != 0) {
|
||||
Object.keys(this.res).forEach((item) => {
|
||||
let key = item.split("-")[0];
|
||||
this.res[item].__key = key;
|
||||
// 针对现实向
|
||||
});
|
||||
}
|
||||
promotionList: {
|
||||
handler(list) {
|
||||
this.refreshCountdown(list);
|
||||
this.startCountdownTimer();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
beforeUnmount() {
|
||||
this.clearCountdownTimer();
|
||||
},
|
||||
methods: {
|
||||
getCountDownTime(val) {
|
||||
let date = new Date(val);
|
||||
let timeSimple = new Date(date).getTime() / 1000;
|
||||
return timeSimple - new Date().getTime() / 1000;
|
||||
clearCountdownTimer() {
|
||||
if (this.countdownTimer) {
|
||||
clearInterval(this.countdownTimer);
|
||||
this.countdownTimer = null;
|
||||
}
|
||||
},
|
||||
startCountdownTimer() {
|
||||
this.clearCountdownTimer();
|
||||
this.countdownTimer = setInterval(() => {
|
||||
this.refreshCountdown(this.promotionList);
|
||||
}, 1000);
|
||||
},
|
||||
refreshCountdown(list = this.promotionList) {
|
||||
const next = {};
|
||||
list.forEach((promotion, index) => {
|
||||
next[index] = this.msToTimeData(this.getCountDownMs(promotion));
|
||||
});
|
||||
this.countdownData = next;
|
||||
},
|
||||
padTime(val) {
|
||||
return String(val ?? 0).padStart(2, "0");
|
||||
},
|
||||
countdownDisplayHours(index) {
|
||||
const data = this.countdownData[index];
|
||||
if (!data) return 0;
|
||||
return data.days * 24 + data.hours;
|
||||
},
|
||||
msToTimeData(ms) {
|
||||
const DAY = 86400000;
|
||||
const HOUR = 3600000;
|
||||
const MINUTE = 60000;
|
||||
const SECOND = 1000;
|
||||
const time = Math.max(Number(ms) || 0, 0);
|
||||
return {
|
||||
days: Math.floor(time / DAY),
|
||||
hours: Math.floor((time % DAY) / HOUR),
|
||||
minutes: Math.floor((time % HOUR) / MINUTE),
|
||||
seconds: Math.floor((time % MINUTE) / SECOND),
|
||||
};
|
||||
},
|
||||
parsePromotionTime(val) {
|
||||
if (val == null || val === "") return 0;
|
||||
if (typeof val === "number" && !Number.isNaN(val)) {
|
||||
return val < 1e12 ? val * 1000 : val;
|
||||
}
|
||||
const text = String(val).trim();
|
||||
if (/^\d+$/.test(text)) {
|
||||
const num = Number(text);
|
||||
return num < 1e12 ? num * 1000 : num;
|
||||
}
|
||||
const parsed = Date.parse(text.replace(/-/g, "/"));
|
||||
return Number.isNaN(parsed) ? 0 : parsed;
|
||||
},
|
||||
getCountDownMs(promotion) {
|
||||
if (!promotion || !promotion.endTime) return 0;
|
||||
const now = Date.now();
|
||||
const startMs = this.parsePromotionTime(promotion.startTime || promotion.start_time);
|
||||
const endMs = this.parsePromotionTime(promotion.endTime);
|
||||
if (!endMs) return 0;
|
||||
const target = startMs && now < startMs ? startMs : endMs;
|
||||
const remain = target - now;
|
||||
return remain > 0 ? remain : 0;
|
||||
},
|
||||
getIsTimer(val) {
|
||||
var timestamp = new Date().getTime();
|
||||
|
||||
if (timestamp < val.start_time) {
|
||||
this.startTimer = true;
|
||||
const now = Date.now();
|
||||
const startMs = this.parsePromotionTime(val.startTime || val.start_time);
|
||||
if (startMs && now < startMs) {
|
||||
return "距离活动开始";
|
||||
} else {
|
||||
return "距离活动结束";
|
||||
}
|
||||
return "距离活动结束";
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
padding: 4rpx 0 !important;
|
||||
background: #ffe7e6 !important;
|
||||
text-align: center !important;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .u-mode-light-error {
|
||||
border: none;
|
||||
@@ -78,3 +79,33 @@
|
||||
margin-left: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.promotion-countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.countdown-day {
|
||||
font-size: 22rpx;
|
||||
color: #f71471;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.countdown-num {
|
||||
display: inline-block;
|
||||
min-width: 36rpx;
|
||||
padding: 0 4rpx;
|
||||
font-size: 25rpx;
|
||||
color: #fff;
|
||||
background-color: #f71471;
|
||||
border-radius: 4rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.countdown-colon {
|
||||
font-size: 25rpx;
|
||||
color: #f71471;
|
||||
margin: 0 2rpx;
|
||||
}
|
||||
|
||||
@@ -20,14 +20,13 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-recommend">
|
||||
<view class="store-recommend" v-if="recommendGoods.length">
|
||||
<view class="store-recommend-title">店内其他商品</view>
|
||||
<view class="recommend-list">
|
||||
<view class="recommend-item" @click="clickGoods(item)" v-for="(item, index) in res" :key="index">
|
||||
<u-image class="recommend-item-img" :fade="true" duration="450" :lazy-load="true" :src="item.thumbnail" height="218rpx">
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
<template #error><view style="font-size: 24rpx; ">加载失败</view></template>
|
||||
</u-image>
|
||||
<view class="recommend-item" @click="clickGoods(item)" v-for="(item, index) in recommendGoods" :key="item.id || index">
|
||||
<view class="recommend-item-img">
|
||||
<image class="recommend-thumb" :src="item.thumbnail" mode="aspectFill" lazy-load />
|
||||
</view>
|
||||
<view class="recommend-item-name">
|
||||
{{ item.goodsName }}
|
||||
</view>
|
||||
@@ -46,6 +45,11 @@ export default {
|
||||
return {};
|
||||
},
|
||||
props: ["res", "goodsDetail", "storeDetail"],
|
||||
computed: {
|
||||
recommendGoods() {
|
||||
return (this.res || []).filter((item) => item && item.thumbnail && item.goodsName);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 点击商品
|
||||
@@ -82,21 +86,26 @@ export default {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.recommend-item {
|
||||
width: 30%;
|
||||
margin: 10rpx 0rpx;
|
||||
width: calc(33.333% - 12rpx);
|
||||
margin-bottom: 16rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx;
|
||||
|
||||
::v-deep .u-image__image {
|
||||
height: 218rpx;
|
||||
border-radius: 12rpx !important;
|
||||
}
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recommend-item-img {
|
||||
::v-deep .u-image__image {
|
||||
width: 100% !important;
|
||||
}
|
||||
width: 100%;
|
||||
height: 218rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.recommend-thumb {
|
||||
width: 100%;
|
||||
height: 218rpx;
|
||||
display: block;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.recommend-list-view {
|
||||
@@ -168,7 +177,8 @@ export default {
|
||||
.recommend-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
gap: 12rpx;
|
||||
|
||||
::v-deep .u-row {
|
||||
width: 100%;
|
||||
@@ -200,8 +210,8 @@ export default {
|
||||
|
||||
.store-recommend {
|
||||
background: #fff;
|
||||
|
||||
margin: 20rpx 0 0 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.goodsNum,
|
||||
.collectionNum {
|
||||
|
||||
@@ -342,6 +342,14 @@ page {
|
||||
.scroll-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.scroll-inner {
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #f0f0f0;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user