code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-08-06 10:57:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 更新多个页面的样式和结构

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-07-01 16:05:08 +08:00
parent 6654c1de51
commit 5f293d929d
50 changed files with 3337 additions and 1837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
pages/product/comment.vue
View File

@@ -1,7 +1,14 @@
<template>
<view class="comment">
<u-navbar
title="商品评价"
:fixed="true"
:placeholder="true"
:border="false"
:auto-back="true"
></u-navbar>
<view class="top-tab">
<view class="tab-btn" :v-if="commentDetail">
<view class="tab-btn" v-if="commentDetail">
<view @click="select(0)" :class="{ cur: selectIndex == 0 }">全部</view>
<view @click="select(1)" :class="{ cur: selectIndex == 1 }">好评{{ commentDetail.good }}</view>
<view @click="select(2)" :class="{ cur: selectIndex == 2 }">中评{{ commentDetail.moderate }}</view>
@@ -9,36 +16,42 @@
<view @click="select(4)" :class="{ cur: selectIndex == 4 }">有图{{ commentDetail.haveImage }}</view>
</view>
</view>
<!-- 评价 -->
<div class="goodsBoxOver">
<div class="scoll-page">
<view class="goodsBoxOver">
<view class="scoll-page">
<view class="eva-section">
<div class="empty" v-if="commDetail.length < 1">
<view>
<u-empty mode="message" text="赞无评论"></u-empty>
</view>
</div>
<view class="empty" v-if="commDetail.length < 1">
<u-empty mode="message" text="暂无评论"></u-empty>
</view>
<view class="eva-box" v-for="(item, index) in commDetail" :key="index">
<view class="section-info">
<image class="portrait" :src="item.memberProfile || userImage" mode="aspectFit"></image>
<image class="portrait" :src="item.memberProfile || userImage" mode="aspectFill"></image>
<view class="star-content">
<text class="name">{{noPassByName(item.memberName) }}</text>
<text class="name">{{ noPassByName(item.memberName) }}</text>
<text class="time">{{ item.createTime }}</text>
</view>
<view class="stars">
<text :class="{ star: item.deliveryScore > 0 }"></text>
<text :class="{ star: item.deliveryScore > 1 }"></text>
<text :class="{ star: item.deliveryScore > 2 }"></text>
<text :class="{ star: item.deliveryScore > 3 }"></text>
<text :class="{ star: item.deliveryScore > 4 }"></text>
<text
v-for="starIndex in 5"
:key="starIndex"
class="star-item"
:class="{ active: commentScore(item) >= starIndex }"
></text>
</view>
</view>
<view class="section-contant">
<div class="content">{{ item.content }}</div>
<view class="img">
<!-- 循环出用户评价的图片 -->
<u-image width="140rpx" height="140rpx" v-if="item.images" v-for="(img, i) in splitImg(item.images)" :src="img" :key="i" @click="preview(splitImg(item.images), i)">
</u-image>
<view class="content">{{ item.content }}</view>
<view class="img-list" v-if="splitImg(item.images)">
<u-image
v-for="(img, i) in splitImg(item.images)"
:key="i"
class="comment-img"
width="160rpx"
height="160rpx"
mode="aspectFill"
border-radius="12"
:src="img"
@click="preview(splitImg(item.images), i)"
></u-image>
</view>
<view class="bot">
<text class="attr">{{ item.goodsName }} - {{ gradeList[item.grade] }}</text>
@@ -46,35 +59,41 @@
</view>
<view class="commentStyle" v-if="item.reply">
商家回复：
<span class="addCommentSpan">{{ item.reply }}</span>
<view class="img">
<!-- 循环出商家回复评价的图片 -->
<u-image width="140rpx" height="140rpx" v-if="item.replyImage" v-for="(replyImg, replyIndex) in splitImg(item.replyImage)" :src="replyImg" :key="replyIndex"
@click="preview(splitImg( item.replyImage), index)">
</u-image>
<text class="addCommentSpan">{{ item.reply }}</text>
<view class="img-list" v-if="splitImg(item.replyImage)">
<u-image
v-for="(replyImg, replyIndex) in splitImg(item.replyImage)"
:key="replyIndex"
class="comment-img"
width="160rpx"
height="160rpx"
mode="aspectFill"
border-radius="12"
:src="replyImg"
@click="preview(splitImg(item.replyImage), replyIndex)"
></u-image>
</view>
</view>
</view>
<u-loadmore bg-color="transparent" style="margin:40rpx 0" :status="status" @loadmore="loadmore()" icon-type="iconType" />
</view>
</div>
</div>
</view>
</view>
</view>
</template>
<script>
// import { getGoodsDetail } from '@/api/goods.js';
import * as membersApi from "@/api/members.js";
import configs from '@/config/config'
export default {
data() {
return {
configs,
status: "loadmore", //底部刷新状态
userImage:configs.defaultUserPhoto,
commentDetail: "", //评价详情
selectIndex: "0", //检索条件
params: { // 评论分页提交数据
status: "loadmore",
userImage: configs.defaultUserPhoto,
commentDetail: "",
selectIndex: "0",
params: {
pageNumber: 1,
pageSize: 10,
grade: "",
@@ -85,10 +104,9 @@ export default {
WORSE: "差评",
HAVEIMAGE: "有图",
},
// 评论详情
commDetail: [],
dataTotal: 0, //评论的总total数量
opid: "", //上级传参id
dataTotal: 0,
opid: "",
};
},
async onLoad(options) {
@@ -96,19 +114,17 @@ export default {
this.getGoodsCommentsNum(options.id);
this.opid = options.id;
},
/**
* 触底加载
*/
onReachBottom() {
this.params.pageNumber++;
this.getGoodsCommentsFun(this.opid);
},
methods: {
/**
* 切割图像
*/
commentScore(item) {
return item.descriptionScore || item.deliveryScore || 0;
},
splitImg(val) {
if (val && val.split(",")) {
return val.split(",");
@@ -119,12 +135,8 @@ export default {
}
},
/**
* 获取商品评论
*/
getGoodsCommentsFun(id) {
this.status = "loading";
// getGoodsComments
membersApi.getGoodsComments(id, this.params).then((res) => {
if (
res.data.result.records == [] ||
@@ -140,9 +152,6 @@ export default {
});
},
/**
* 获取商品评论数
*/
getGoodsCommentsNum(id) {
membersApi.getGoodsCommentsCount(id).then((res) => {
if (res.statusCode === 200) {
@@ -151,9 +160,6 @@ export default {
});
},
/**
* 顶部筛选条件
*/
select(index) {
this.params = {
pageNumber: 1,
@@ -172,27 +178,23 @@ export default {
grade: "",
};
}
// 重新加载评论
this.getGoodsCommentsFun(this.opid);
},
/**
* 点击图片放大或保存
*/
preview(urls, index) {
uni.previewImage({
current: index,
urls: urls,
longPressActions: {
itemList: ["保存图片"],
success: function (data) {
success: function () {
uni.showToast({
title: "保存成功",
duration: 2000,
icon: "none",
});
},
fail: function (err) {
fail: function () {
uni.showToast({
title: "保存失败",
duration: 2000,
@@ -207,74 +209,35 @@ export default {
</script>
<style lang="scss" scoped>
.commentStyle {
margin-top: 16rpx;
padding: 14rpx 26rpx;
background: #f5f5f5;
border-radius: 6px;
font-size: 22rpx;
font-weight: 700;
text-align: left;
line-height: 40rpx;
}
.addCommentSpan {
color: $u-tips-color !important;
padding-left: 20rpx;
}
.img {
display: flex;
flex-wrap: wrap;
/* height: 140rpx; */
overflow: hidden;
image {
width: 166rpx;
height: 166rpx;
margin: 0 15rpx 15rpx 0;
&:nth-of-type(3n + 0) {
margin: 0 0 15rpx 0;
}
}
}
.goodsBoxOver {
overflow-y: scroll;
}
page {
background: #f7f7f7;
}
.comment {
min-height: 100vh;
color: #333;
background: #f7f7f7;
overflow: hidden;
.top-tab {
margin: 0 20rpx 20rpx;
background: #fff;
margin-bottom: 10rpx;
border-radius: 20rpx;
display: flex;
flex-direction: column;
padding: 0 30rpx 0 30rpx;
padding: 24rpx 24rpx 4rpx;
font-size: 24rpx;
.tab-btn {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
gap: 20rpx;
view {
min-width: 118rpx;
text-align: center;
height: 50rpx;
line-height: 50rpx;
padding: 0 10rpx;
padding: 0 20rpx;
background: #f8f8fe;
border-radius: 25rpx;
margin: 0 20rpx 30rpx 0;
&.cur {
background: $aider-light-color;
@@ -285,92 +248,117 @@ page {
}
.eva-section {
padding: 20rpx 0;
padding: 0 20rpx 20rpx;
.eva-box {
padding: 40rpx;
margin-bottom: 10rpx;
padding: 32rpx 30rpx;
margin-bottom: 20rpx;
background: #fff;
border-radius: 20rpx;
/* star */
.star-content {
display: flex;
flex-direction: column;
view {
flex: 1;
display: flex;
align-items: center;
}
.time {
font-size: 24rpx;
color: #999;
}
}
.section-info {
display: flex;
align-items: flex-start;
.stars {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.star {
width: 30rpx;
height: 30rpx;
background: url("/static/star.png");
background-size: 100%;
}
}
.portrait {
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
border-radius: 100px;
border-radius: 50%;
margin-right: 20rpx;
}
}
.section-contant {
display: flex;
flex-direction: column;
.content {
font-size: 24rpx;
line-height: 46rpx;
font-weight: 400;
color: $font-color-dark;
color: #333;
padding: 26rpx 0;
.star-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 4rpx;
.name {
font-size: 28rpx;
color: #333;
line-height: 1.4;
}
.time {
margin-top: 8rpx;
font-size: 24rpx;
color: #999;
line-height: 1.4;
}
}
.img {
.stars {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6rpx;
padding-top: 8rpx;
.star-item {
width: 28rpx;
height: 28rpx;
background: url("/static/star.png");
background-size: 100%;
opacity: 0.25;
&.active {
opacity: 1;
}
}
}
}
.section-contant {
.content {
font-size: 26rpx;
line-height: 1.6;
color: #333;
padding: 20rpx 0 12rpx;
}
.img-list {
display: flex;
flex-wrap: wrap;
/* height: 140rpx; */
overflow: hidden;
gap: 16rpx;
margin-bottom: 8rpx;
}
.bot {
display: flex;
justify-content: space-between;
font-size: $font-sm;
color: $font-color-light;
margin-top: 20rpx;
margin-top: 8rpx;
padding-top: 8rpx;
.attr {
font-size: 22rpx;
color: #999;
line-height: 1.5;
}
}
}
}
}
}
.commentStyle {
margin-top: 20rpx;
padding: 20rpx 24rpx;
background: #f5f5f5;
border-radius: 12rpx;
font-size: 24rpx;
font-weight: 700;
line-height: 1.6;
}
.addCommentSpan {
color: $u-tips-color !important;
font-weight: 400;
}
.empty {
padding-top: 300rpx;
color: #999999;
padding: 200rpx 0;
color: #999;
text-align: center;
}
</style>

15
pages/product/goods.vue
View File

@@ -49,7 +49,7 @@
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page"
:scroll-top="tabScrollTop" @scroll="pageScroll">
<view>
<view class="scroll-inner">
<!-- 轮播图 -->
<GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />
@@ -186,11 +186,16 @@
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
<!-- 宝贝详情 -->
<GoodsIntro id="main9" :res="goodsDetail" :goodsParams="goodsParams" :goodsId="goodsDetail.goodsId"
v-if="goodsDetail.id" />
<GoodsIntro
id="main9"
:res="goodsDetail"
:goodsParams="goodsParams"
:goodsId="goodsDetail.goodsId"
v-if="goodsDetail.id && (goodsDetail.mobileIntro || (goodsParams && goodsParams.length))"
/>
<!-- 宝贝推荐 -->
<GoodsRecommend id="main11" :res="likeGoodsList" />
<GoodsRecommend id="main11" v-if="likeGoodsList.length" :res="likeGoodsList" />
</view>
</scroll-view>
@@ -422,7 +427,7 @@ export default {
pageSize: 10,
},
likeGoodsList: "", //相似商品列表
likeGoodsList: [], //相似商品列表
PromotionList: "", //活动,促销，列表
specList: [],
selectedSpec: [],

205
pages/product/product/evaluation/-evaluation.vue
View File

@@ -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;
}
}
}
}

24
pages/product/product/goods/-goods-intro.vue
View File

@@ -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) {

4
pages/product/product/goods/-goods-recommend.vue
View File

@@ -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>

4
pages/product/product/promotion/-promotion-assemble-list.vue
View File

@@ -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",
},

133
pages/product/product/promotion/-promotion-assemble-promotions.vue
View File

@@ -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 "距离活动结束";
},
},
};

31
pages/product/product/promotion/group.scss
View File

@@ -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;
}

46
pages/product/product/shop/-shop.vue
View File

@@ -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 {

8
pages/product/product/style.scss
View File

@@ -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));
}
}

31
pages/product/shopList.vue
View File

@@ -1,8 +1,19 @@
<template>
<div>
<u-navbar>
<u-search placeholder="请输入店铺名称" @search="search" @clear="search" @custom="search" v-model="params.storeName">
</u-search>
<u-navbar
:border="false"
:fixed="true"
:placeholder="true"
left-icon="arrow-left"
:auto-back="false"
@left-click="back"
>
<template #center>
<view class="search-wrap">
<u-search placeholder="请输入店铺名称" @search="search" @clear="search" @custom="search" v-model="params.storeName">
</u-search>
</view>
</template>
</u-navbar>
<div class="wrapper" v-if="storeList.length!=0">
<div class="store-item" @click="handleClickStore(item)" v-for="(item,index) in storeList" :key="index">
@@ -73,6 +84,14 @@ export default {
this.init();
},
methods: {
back() {
uni.navigateBack({
delta: 1,
fail: () => {
uni.switchTab({ url: "/pages/tabbar/home/index" });
},
});
},
handleClickStore(val){
uni.navigateTo({
url: `/pages/product/shopPage?id=${val.id}`
@@ -154,4 +173,10 @@ export default {
font-size: 34rpx;
font-weight: bold;
}
.search-wrap {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
}
</style>

325
pages/product/shopPage.vue
View File

@@ -2,46 +2,68 @@
<view>
<!-- 楼层装修店铺信息 -->
<div>
<u-navbar :border="false">
<u-search
v-model="keyword"
@search="search"
@click="search"
placeholder="请输入搜索"
></u-search>
<!-- 基础店铺：返回 + 搜索；楼层装修无顶部搜索时：仅返回 -->
<u-navbar
v-if="!enablePageData || !floorHasTopSearch"
class="shop-navbar"
:border="false"
:fixed="true"
:placeholder="true"
left-icon=""
:auto-back="false"
>
<template #left>
<view class="shop-navbar-inner">
<view class="nav-back" @click.stop="back">
<u-icon name="arrow-left" size="20"></u-icon>
</view>
<view v-if="!enablePageData" class="search-wrap" @click.stop>
<u-search
v-model="keyword"
@search="search"
@click="search"
placeholder="请输入搜索"
:show-action="false"
></u-search>
</view>
</view>
</template>
</u-navbar>
<div class="wrapper">
<!-- 店铺信息模块 -->
<div class="store flex">
<u-image
border-radius="10"
width="150"
height="150"
:src="storeInfo.storeLogo || config.logo"
mode="aspectFit"
>
</u-image>
<div class="box">
<div class="store-name" @click="getStoreLicencePhoto">
{{ storeInfo.storeName || "" }}
<u-icon style="margin-left: 10rpx" name="arrow-right"></u-icon>
</div>
<div class="flex store-message">
<div>
<span>{{ storeInfo.collectionNum || 0 }}</span
>关注
</div>
<div>
<span>{{ storeInfo.goodsNum || 0 }}</span
>件商品
</div>
</div>
</div>
<div class="collection">
<div class="collection-btn" @click="whetherCollection">
{{ isCollection ? "已关注" : "+ 关注" }}
</div>
</div>
<div class="store">
<view class="store-logo">
<u-image
border-radius="10"
width="100"
height="100"
:src="storeInfo.storeLogo || config.logo"
mode="aspectFit"
>
</u-image>
</view>
<view class="store-main">
<view class="store-top">
<view class="store-name" @click="getStoreLicencePhoto">
<text class="store-name-text">{{ storeInfo.storeName || "" }}</text>
</view>
<view class="collection">
<view class="collection-btn" @click.stop="whetherCollection">
{{ isCollection ? "已关注" : "+ 关注" }}
</view>
</view>
</view>
<view class="store-message">
<view class="store-stat">
<text class="stat-num">{{ storeInfo.collectionNum || 0 }}</text>
<text class="stat-label">关注</text>
</view>
<view class="store-stat">
<text class="stat-num">{{ storeInfo.goodsNum || 0 }}</text>
<text class="stat-label">件商品</text>
</view>
</view>
</view>
</div>
<!-- 店铺简介 -->
<div class="store-desc wes-2">
@@ -114,16 +136,26 @@
<!-- 楼层装修模式 -->
<div v-if="enablePageData">
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
<div v-for="(item, index) in pageData.list" :key="index">
<div v-for="(item, index) in pageData.list || []" :key="index">
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
<u-navbar
class="navbar"
class="navbar shop-navbar"
v-if="item.type == 'search'"
:fixed="index === 1 ? false : true"
:placeholder="index === 1 ? false : true"
left-icon=""
:auto-back="false"
>
<div class="navbar-right"></div>
<search style="width: 100%" :res="item.options" :storeId = "storeId"/>
<template #left>
<view class="shop-navbar-inner">
<view class="nav-back" @click.stop="back">
<u-icon name="arrow-left" size="20"></u-icon>
</view>
<view class="floor-search-wrap" @click.stop>
<search style="width: 100%" :res="item.options" :storeId="storeId" />
</view>
</view>
</template>
</u-navbar>
<carousel v-if="item.type == 'carousel'" :res="item.options" />
<titleLayout v-if="item.type == 'title'" :res="item.options" />
@@ -199,7 +231,7 @@ export default {
data() {
return {
config,
pageData: "", //楼层页面数据
pageData: { list: [] }, //楼层页面数据
enablePageData: false, //是否显示楼层装修内容
basePageData: false, //基础店铺信息
scrollTop: 0,
@@ -265,6 +297,14 @@ export default {
},
},
computed: {
floorHasTopSearch() {
const list = this.pageData && this.pageData.list;
if (!list || !list.length) return false;
return list.some((item, index) => item.type === "search" && index !== 1);
},
},
/**
* 加载
*/
@@ -302,21 +342,50 @@ export default {
this.talkIm(this.storeInfo.storeId)
},
back() {
uni.navigateBack();
const pages = getCurrentPages();
if (pages.length > 1) {
uni.navigateBack({ delta: 1 });
} else {
uni.switchTab({ url: "/pages/tabbar/home/index" });
}
},
/**
* 实例化首页数据楼层
*/
initPageData() {
this.pageData = "";
this.pageData = { list: [] };
getFloorStoreData({
pageType: "STORE",
num: this.storeId,
}).then((res) => {
if (res.data.success) {
this.pageData = JSON.parse(res.data.result.pageData);
}
});
})
.then((res) => {
const result = res.data && res.data.result;
const pageDataStr = result && result.pageData;
if (res.data.success && pageDataStr) {
try {
const parsed = JSON.parse(pageDataStr);
this.pageData =
parsed && Array.isArray(parsed.list)
? parsed
: { list: [] };
this.enablePageData = true;
} catch (e) {
this.fallbackToBasePage();
}
} else {
this.fallbackToBasePage();
}
})
.catch(() => {
this.fallbackToBasePage();
});
},
fallbackToBasePage() {
this.enablePageData = false;
this.basePageData = true;
this.pageData = { list: [] };
this.getGoodsData();
this.getCategoryData();
},
getStoreLicencePhoto() {
uni.navigateTo({
@@ -414,7 +483,6 @@ export default {
if(res.data.result.pageShow == '1'){
// 开启了楼层装修店铺
this.initPageData();
this.enablePageData = true;
}
else{
// 商品信息
@@ -514,50 +582,102 @@ export default {
}
.store {
display: flex;
align-items: center;
> .box {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 30rpx;
font-size: 24rpx;
color: #999;
flex: 2;
.store-logo {
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
overflow: hidden;
> .store-name {
font-size: 34rpx;
color: #333;
letter-spacing: 1rpx;
font-weight: bold;
}
> .store-message {
margin-top: 25rpx;
> div {
font-size: 26rpx;
margin: 0 5rpx;
> span {
font-size: 26rpx;
font-weight: bold;
color: #333;
margin-right: 8rpx;
}
}
:deep(.u-image),
:deep(.u-image__image) {
width: 100rpx !important;
height: 100rpx !important;
}
}
.store-main {
flex: 1;
min-width: 0;
margin-left: 20rpx;
}
.store-top {
position: relative;
display: flex;
align-items: center;
min-height: 56rpx;
}
.store-name {
width: 100%;
font-size: 34rpx;
color: #333;
letter-spacing: 1rpx;
font-weight: bold;
text-align: center;
}
.store-name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
padding: 0 150rpx;
box-sizing: border-box;
}
.store-message {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
margin-top: 12rpx;
font-size: 24rpx;
color: #999;
}
.store-stat {
display: flex;
align-items: baseline;
white-space: nowrap;
margin-right: 24rpx;
font-size: 26rpx;
color: #999;
}
.stat-num {
font-size: 26rpx;
font-weight: bold;
color: #333;
margin-right: 4rpx;
}
.stat-label {
font-size: 26rpx;
color: #999;
}
}
.collection {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
flex-shrink: 0;
}
.collection-btn {
background: $main-color;
padding: 6rpx 0;
padding: 8rpx 0;
width: 140rpx;
font-size: 24rpx;
color: #fff;
border-radius: 100px;
text-align: center;
line-height: 1.2;
}
.store-desc {
@@ -740,4 +860,47 @@ export default {
font-size: 24rpx;
color: #999;
}
.shop-navbar {
:deep(.u-navbar__content__left) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
width: auto !important;
padding: 0 24rpx 0 8rpx !important;
box-sizing: border-box;
}
}
.shop-navbar-inner {
display: flex;
align-items: center;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.search-wrap {
flex: 1;
min-width: 0;
box-sizing: border-box;
}
.floor-search-wrap {
flex: 1;
min-width: 0;
box-sizing: border-box;
}
.nav-back {
display: flex;
align-items: center;
justify-content: center;
width: 64rpx;
height: 100%;
flex-shrink: 0;
}
</style>

8
pages/product/shopPageGoods.vue
View File

@@ -1,6 +1,12 @@
<template>
<div>
<u-navbar :title="title"></u-navbar>
<u-navbar
:title="title"
:fixed="true"
:placeholder="true"
:border="false"
:auto-back="true"
></u-navbar>
<!-- 商品 -->
<div class="contant">
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>