yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

待商榷

pull/100/head
岳琳红 2024-08-30 18:00:28 +08:00
parent 2396819644
commit a6543dc7ca
10 changed files with 1121 additions and 788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages/activity/index.vue
View File

@ -123,6 +123,7 @@
if (code !== 0) { if (code !== 0) {
return; return;
} }
console.log('nibuhao ')
state.pagination.list = _.concat(state.pagination.list, data.list); state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total; state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'; state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';

193
pages/goods/index.vue
View File

@ -14,7 +14,37 @@
<!-- 商品轮播图 --> <!-- 商品轮播图 -->
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)" <su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
otStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" /> otStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
<!-- 限时折扣 -->
<view class="discount">
<image class="disImg" src="../../static/images/dis.png"></image>
<view class="discountCont">
<view class="disContT">
<view class="disContT1">
<view class="disContT1P">
￥0.7
</view>
<view class="disContT1End">
限时到手￥0.4
</view>
</view>
<view class="disContT2">
限时折扣
</view>
</view>
<view class="disContB">
<view class="disContB1">
价格：￥1 丨 剩余：100
</view>
<view class="disContB2">
距结束仅剩
<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'"
:minuteText="':'" :secondText="' '" :datatime="1725033600000 / 1000"
:isDay="false" />
</view>
</view>
</view>
</view>
<!-- 限时折扣 -->
<!-- 价格+标题 --> <!-- 价格+标题 -->
<view class="title-card detail-card ss-p-y-40 ss-p-x-20"> <view class="title-card detail-card ss-p-y-40 ss-p-x-20">
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26"> <view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
@ -34,15 +64,15 @@
<!-- 满减送/限时折扣活动的提示 --> <!-- 满减送/限时折扣活动的提示 -->
<div class="tag-content"> <div class="tag-content">
<view class="tag-box ss-flex"> <view class="tag-box ss-flex">
<view class="tag ss-m-r-10" v-for="promos in state.activityInfo" <view class="tag ss-m-r-10" v-for="promos in state.activityInfo" :key="promos.id"
:key="promos.id" @tap="onActivity"> @tap="onActivity">
{{ promos.name }} {{ promos.name }}
</view> </view>
</view> </view>
</div> </div>
<!-- 优惠劵 --> <!-- 优惠劵@tap="state.showModel = true" -->
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true" <view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="onActivity"
v-if="state.couponInfo.length"> v-if="state.couponInfo.length">
<view class="discounts-title ss-m-r-8">领券</view> <view class="discounts-title ss-m-r-8">领券</view>
<text class="cicon-forward"></text> <text class="cicon-forward"></text>
@ -87,8 +117,8 @@
</detail-tabbar> </detail-tabbar>
<!-- 优惠劵弹窗 --> <!-- 优惠劵弹窗 -->
<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false" <!-- <s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
@get="onGet" /> @get="onGet" /> -->
<!-- 满减送/限时折扣活动弹窗 --> <!-- 满减送/限时折扣活动弹窗 -->
<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel" <s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
@ -99,13 +129,24 @@
</template> </template>
<script setup> <script setup>
import { reactive, computed } from 'vue'; import {
import { onLoad, onPageScroll } from '@dcloudio/uni-app'; reactive,
computed,
ref
} from 'vue';
import {
onLoad,
onPageScroll
} from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import CouponApi from '@/sheep/api/promotion/coupon'; import CouponApi from '@/sheep/api/promotion/coupon';
import ActivityApi from '@/sheep/api/promotion/activity'; import ActivityApi from '@/sheep/api/promotion/activity';
import FavoriteApi from '@/sheep/api/product/favorite'; import FavoriteApi from '@/sheep/api/product/favorite';
import { formatSales, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods'; import {
formatSales,
formatGoodsSwiper,
fen2yuan
} from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue'; import detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue'; import detailCellSku from './components/detail/detail-cell-sku.vue';
import detailTabbar from './components/detail/detail-tabbar.vue'; import detailTabbar from './components/detail/detail-tabbar.vue';
@ -113,11 +154,20 @@
import detailCommentCard from './components/detail/detail-comment-card.vue'; import detailCommentCard from './components/detail/detail-comment-card.vue';
import detailContentCard from './components/detail/detail-content-card.vue'; import detailContentCard from './components/detail/detail-content-card.vue';
import detailActivityTip from './components/detail/detail-activity-tip.vue'; import detailActivityTip from './components/detail/detail-activity-tip.vue';
import { isEmpty } from 'lodash-es'; import {
isEmpty
} from 'lodash-es';
import SpuApi from '@/sheep/api/product/spu'; import SpuApi from '@/sheep/api/product/spu';
onPageScroll(() => {}); onPageScroll(() => {});
import countDown from '@/sheep/components/countDown/index.vue'
const bgColor = {
'bgColor': '#E93323',
'Color': '#fff',
'width': '44rpx',
'timeTxtwidth': '16rpx',
'isDay': true
}
const isLogin = computed(() => sheep.$store('user').isLogin); const isLogin = computed(() => sheep.$store('user').isLogin);
const state = reactive({ const state = reactive({
goodsId: 0, goodsId: 0,
@ -170,7 +220,9 @@
// 立即领取 // 立即领取
async function onGet(id) { async function onGet(id) {
const { code } = await CouponApi.takeCoupon(id); const {
code
} = await CouponApi.takeCoupon(id);
if (code !== 0) { if (code !== 0) {
return; return;
} }
@ -203,12 +255,22 @@
}); });
async function getCoupon() { async function getCoupon() {
const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10); const {
code,
data
} = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
if (code === 0) { if (code === 0) {
state.couponInfo = data; state.couponInfo = data;
} }
} }
//获取结算信息
const settleData = ref()
async function getSettlementByIds(ids) {
const { data } = await SpuApi.getSettlementProduct(ids);
settleData.value = data
console.log('结算信息',data)
return data;
}
onLoad((options) => { onLoad((options) => {
// 非法参数 // 非法参数
if (!options.id) { if (!options.id) {
@ -226,7 +288,7 @@
// 加载到商品 // 加载到商品
state.skeletonLoading = false; state.skeletonLoading = false;
state.goodsInfo = res.data; state.goodsInfo = res.data;
console.log('sku',res.data)
// 加载是否收藏 // 加载是否收藏
if (isLogin.value) { if (isLogin.value) {
FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => { FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
@ -256,6 +318,8 @@
} }
}) })
}); });
//获取结算信息
getSettlementByIds(state.goodsId)
}); });
</script> </script>
@ -404,4 +468,101 @@
color: #333333; color: #333333;
} }
} }
// 限时折扣
.discount {
width: 750rpx;
height: 100rpx;
// background-color: red;
overflow: hidden;
position: relative;
}
.disImg {
width: 750rpx;
height: 100rpx;
position: absolute;
top: 0;
z-index: -1;
}
.discountCont {
width: 680rpx;
height: 90rpx;
margin: 10rpx auto 0 auto;
// background-color: gold;
}
.disContT {
width: 680rpx;
height: 50rpx;
display: flex;
justify-content: space-between;
}
.disContT1 {
width: 300rpx;
height: 50rpx;
// background-color: green;
display: flex;
justify-content: flex-start;
align-items: center;
}
.disContT2 {
width: 300rpx;
height: 50rpx;
line-height: 50rpx;
// background-color: green;
font-size: 30rpx;
text-align: end;
color: white;
font-weight: bolder;
font-style: oblique 20deg;
letter-spacing: .1rem;
}
.disContT1P {
color: white;
font-weight: bold;
font-size: 28rpx;
}
.disContT1End {
// width: 180rpx;
padding: 0 10rpx;
height: 30rpx;
line-height: 28rpx;
text-align: center;
font-weight: bold;
background-color: white;
color: #ff3000;
font-size: 23rpx;
border-radius: 20rpx;
margin-left: 10rpx;
}
.disContB {
width: 680rpx;
height: 40rpx;
display: flex;
justify-content: space-between;
font-size: 20rpx;
color: white;
align-items: center;
}
.disContB1 {
width: 300rpx;
height: 40rpx;
line-height: 40rpx;
}
.disContB2 {
width: 300rpx;
height: 40rpx;
line-height: 40rpx;
display: flex;
justify-content: flex-end;
}
</style> </style>

61
pages/goods/list.vue
View File

@ -118,7 +118,7 @@
</template> </template>
<script setup> <script setup>
import { reactive } from 'vue'; import { reactive,ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import _ from 'lodash-es'; import _ from 'lodash-es';
@ -277,7 +277,16 @@
if (code !== 0) { if (code !== 0) {
return; return;
} }
state.pagination.list = _.concat(state.pagination.list, data.list); console.log('数据流',data)
// 使用 map 提取每个对象的 id 属性
const ids = data.list.map(item => item.id);
// 使用 join 方法将 id 数组连接成一个用逗号分隔的字符串
const idsString = ids.join(',');
// 获取结算信息
settleData.value = await getSettlementByIds(idsString)
// 处理获得的数据
const ms = enrichDataWithSkus(data.list,settleData.value)
state.pagination.list = _.concat(state.pagination.list, ms);
state.pagination.total = data.total; state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'; state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
mountMasonry(); mountMasonry();
@ -291,7 +300,55 @@
state.pagination.pageNo++; state.pagination.pageNo++;
getList(state.currentSort, state.currentOrder); getList(state.currentSort, state.currentOrder);
} }
//获取结算信息
const settleData = ref()
async function getSettlementByIds(ids) {
const { data } = await SpuApi.getSettlementProduct(ids);
// console.log('结算信息',data)
return data;
}
//计算展示价格的函数
function enrichDataWithSkus(data, array) {
// 创建一个映射，以 id 为键，存储 data 数组中的对象
const dataMap = new Map(data.map(item => [item.id, { ...item }]));
// 遍历 array 数组
array.forEach(item => {
// 初始化 discountPrice 和 vipPrice 为 null
let discountPrice = null;
let vipPrice = null;
let foundType4 = false;
let foundType6 = false;
// 遍历 skus 数组，寻找 type 为 4 和 6 的首个条目
item.skus.forEach(sku => {
if (!foundType4 && sku.type === 4) {
discountPrice = sku.price;
foundType4 = true;
}
if (!foundType6 && sku.type === 6) {
vipPrice = sku.price;
foundType6 = true;
}
// 如果已经找到 type 为 4 和 6 的条目，则不需要继续遍历
if (foundType4 && foundType6) {
return;
}
});
// 更新 dataMap 中对应的对象
if (dataMap.has(item.id)) {
dataMap.get(item.id).discountPrice = discountPrice;
dataMap.get(item.id).vipPrice = vipPrice;
dataMap.get(item.id).reward = item.reward;
}
});
// 返回更新后的数据数组
return Array.from(dataMap.values());
}
onLoad((options) => { onLoad((options) => {
state.categoryId = options.categoryId; state.categoryId = options.categoryId;
state.keyword = options.keyword; state.keyword = options.keyword;

1
pages/index/category.vue
View File

@ -90,6 +90,7 @@
if (code !== 0) { if (code !== 0) {
return; return;
} }
console.log('nihao ')
state.categoryList = handleTree(data); state.categoryList = handleTree(data);
} }

12
sheep/api/product/spu.js
View File

@ -13,6 +13,18 @@ const SpuApi = {
}, },
}); });
}, },
// 获得商品结算信息
getSettlementProduct: (ids) => {
return request({
url: '/trade/order/settlementProduct',
method: 'GET',
params: { ids },
custom: {
showLoading: false,
showError: false,
},
});
},
// 获得商品 SPU 分页 // 获得商品 SPU 分页
getSpuPage: (params) => { getSpuPage: (params) => {
return request({ return request({

52
sheep/components/s-activity-pop/s-activity-pop.vue
View File

@ -2,20 +2,23 @@
<template> <template>
<su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose> <su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose>
<view class="model-box"> <view class="model-box">
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">营销活动</view> <view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠</view>
<scroll-view <scroll-view
class="model-content ss-m-t-50" class="model-content ss-m-t-50"
scroll-y scroll-y
:scroll-with-animation="false" :scroll-with-animation="false"
:enable-back-to-top="true" :enable-back-to-top="true"
> >
<view v-for="item in state.activityInfo" :key="item.id"> <view class="actBox" v-for="item in state.activityInfo" :key="item.id">
<view class="ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)"> <view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)">
<view class="model-content-tag ss-flex ss-row-center">满减</view> <view class="model-content-tag ss-flex ss-row-center">活动</view>
<view class="ss-m-l-20 model-content-title ss-flex-1"> <view class="ss-m-l-20 model-content-title ss-flex-1">
<view class="ss-m-b-24" v-for="rule in state.activityMap[item.id]?.rules" :key="rule"> <view class="contBu ss-m-b-24" v-for="rule in state.activityMap[item.id]?.rules" :key="rule">
{{ formatRewardActivityRule(state.activityMap[item.id], rule) }} {{ formatRewardActivityRule(state.activityMap[item.id], rule) }}
</view> </view>
<view class="contBu ss-m-b-24">
2024.08.05-2025.10.10
</view>
</view> </view>
<text class="cicon-forward" /> <text class="cicon-forward" />
</view> </view>
@ -45,7 +48,7 @@
activityInfo: computed(() => props.modelValue), activityInfo: computed(() => props.modelValue),
activityMap: {} activityMap: {}
}); });
console.log('shuju',state)
watch( watch(
() => props.show, () => props.show,
() => { () => {
@ -73,6 +76,7 @@
.model-box { .model-box {
height: 60vh; height: 60vh;
.title { .title {
justify-content: center;
font-size: 36rpx; font-size: 36rpx;
height: 80rpx; height: 80rpx;
font-weight: bold; font-weight: bold;
@ -80,26 +84,50 @@
} }
} }
.model-content { .model-content {
height: 300rpx;
padding: 0 20rpx; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
background-color: red;
.model-content-tag { .model-content-tag {
background: rgba(#ff6911, 0.1); // background: rgba(#ff6911, 0.1);
font-size: 24rpx; font-size: 35rpx;
font-weight: 500; font-weight: 500;
color: #ff6911; color: #ff6911;
line-height: 42rpx; line-height: 150rpx;
width: 68rpx; width: 150rpx;
height: 32rpx; height: 150rpx;
border-radius: 5rpx; text-align: center;
// border-radius: 5rpx;
} }
.model-content-title { .model-content-title {
height: 150rpx;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
background-color: gold;
overflow: hidden;
} }
.cicon-forward { .cicon-forward {
font-size: 28rpx; font-size: 28rpx;
color: #999999; color: #999999;
} }
} }
// 新增的
.actBox{
width: 700rpx;
height: 150rpx;
background-color: #fff2f2;
margin: 10rpx auto;
border-radius: 10rpx;
}
.boxCont{
width: 700rpx;
height: 150rpx;
align-items: center;
}
.contBu{
height: 75rpx;
line-height: 75rpx;
}
</style> </style>

59
sheep/components/s-goods-card/s-goods-card.vue
View File

@ -135,7 +135,7 @@
/** /**
* 商品卡片 * 商品卡片
*/ */
import { computed, reactive, onMounted } from 'vue'; import { computed, reactive, onMounted,ref } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu'; import SpuApi from '@/sheep/api/product/spu';
@ -202,6 +202,8 @@
*/ */
function calculateGoodsColumn(height = 0, where = 'left') { function calculateGoodsColumn(height = 0, where = 'left') {
// 处理完 // 处理完
console.log('用来处理的数据',state.goodsList)
console.log(11111)
if (!state.goodsList[count]) return; if (!state.goodsList[count]) return;
// 增加列的高度 // 增加列的高度
if (where === 'left') leftHeight += height; if (where === 'left') leftHeight += height;
@ -224,16 +226,69 @@
*/ */
async function getGoodsListByIds(ids) { async function getGoodsListByIds(ids) {
const { data } = await SpuApi.getSpuListByIds(ids); const { data } = await SpuApi.getSpuListByIds(ids);
// console.log('商品信息',data)
return data;
}
//获取结算信息
const settleData = ref()
async function getSettlementByIds(ids) {
const { data } = await SpuApi.getSettlementProduct(ids);
// console.log('结算信息',data)
return data; return data;
} }
//计算展示价格的函数
function enrichDataWithSkus(data, array) {
// 创建一个映射，以 id 为键，存储 data 数组中的对象
const dataMap = new Map(data.map(item => [item.id, { ...item }]));
// 遍历 array 数组
array.forEach(item => {
// 初始化 discountPrice 和 vipPrice 为 null
let discountPrice = null;
let vipPrice = null;
let foundType4 = false;
let foundType6 = false;
// 遍历 skus 数组，寻找 type 为 4 和 6 的首个条目
item.skus.forEach(sku => {
if (!foundType4 && sku.type === 4) {
discountPrice = sku.price;
foundType4 = true;
}
if (!foundType6 && sku.type === 6) {
vipPrice = sku.price;
foundType6 = true;
}
// 如果已经找到 type 为 4 和 6 的条目，则不需要继续遍历
if (foundType4 && foundType6) {
return;
}
});
// 更新 dataMap 中对应的对象
if (dataMap.has(item.id)) {
dataMap.get(item.id).discountPrice = discountPrice;
dataMap.get(item.id).vipPrice = vipPrice;
dataMap.get(item.id).reward = item.reward;
}
});
// 返回更新后的数据数组
return Array.from(dataMap.values());
}
// 初始化 // 初始化
onMounted(async () => { onMounted(async () => {
// 加载商品列表 // 加载商品列表
state.goodsList = await getGoodsListByIds(spuIds.join(',')); const ms = await getGoodsListByIds(spuIds.join(','));
settleData.value = await getSettlementByIds(spuIds.join(','))
state.goodsList = await enrichDataWithSkus(ms,settleData.value)
// console.log('计算后',state.goodsList)
// 只有双列布局时需要 // 只有双列布局时需要
if (layoutType === LayoutTypeEnum.TWO_COL){ if (layoutType === LayoutTypeEnum.TWO_COL){
// 分列 // 分列
console.log('用来分流的数据',state.goodsList)
calculateGoodsColumn(); calculateGoodsColumn();
} }
}); });

322
sheep/components/s-goods-column/s-goods-column.vue
View File

@ -2,36 +2,19 @@
<template> <template>
<view class="ss-goods-wrap"> <view class="ss-goods-wrap">
<!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边 --> <!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边 -->
<view <view v-if="size === 'xs'" class="xs-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
v-if="size === 'xs'"
class="xs-goods-card ss-flex ss-col-stretch"
:style="[elStyles]"
@tap="onClick"
>
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
class="xs-img-box" <view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
:src="sheep.$url.cdn(data.image || data.picUrl)" class="xs-goods-content ss-flex-col ss-row-around">
mode="aspectFit" <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="xs-goods-title ss-line-1"
></image> :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
<view
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="xs-goods-content ss-flex-col ss-row-around"
>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="xs-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<view <view v-if="goodsFields.price?.show" class="xs-goods-price font-OPPOSANS"
v-if="goodsFields.price?.show" :style="[{ color: goodsFields.price.color }]">
class="xs-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</view> </view>
@ -43,28 +26,16 @@
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image <image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
class="sm-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
></image>
<view <view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show" class="sm-goods-content" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
class="sm-goods-content" <view v-if="goodsFields.title?.show || goodsFields.name?.show"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" class="sm-goods-title ss-line-1 ss-m-b-16">
>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="sm-goods-title ss-line-1 ss-m-b-16"
>
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<view <view v-if="goodsFields.price?.show" class="sm-goods-price font-OPPOSANS"
v-if="goodsFields.price?.show" :style="[{ color: goodsFields.price.color }]">
class="sm-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</view> </view>
@ -76,58 +47,43 @@
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
class="md-img-box" <view class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" :id="elId">
:src="sheep.$url.cdn(data.image || data.picUrl)" <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="md-goods-title ss-line-1"
mode="widthFix" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
></image>
<view
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
:id="elId"
>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="md-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<view <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="md-goods-subtitle ss-m-t-16 ss-line-1" class="md-goods-subtitle ss-m-t-16 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]" :style="[{ color: subTitleColor, background: subTitleBackground }]">
>
{{ data.subtitle || data.introduction }} {{ data.subtitle || data.introduction }}
</view> </view>
<slot name="activity"> <slot name="activity">
<view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center"> <view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
<view <view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
class="activity-tag ss-m-r-10 ss-m-t-16"
v-for="item in data.promos"
:key="item.id"
>
{{ item.title }} {{ item.title }}
</view> </view>
</view> </view>
</slot> </slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{iconShow}}</view>
<view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view class="ss-flex ss-col-bottom"> <view class="ss-flex ss-col-bottom">
<view <view v-if="goodsFields.price?.show" class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
v-if="goodsFields.price?.show" :style="[{ color: goodsFields.price.color }]">
class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
<text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
<text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
</view> </view>
<view <view v-if="
v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) && (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
(data.original_price > 0 || data.marketPrice > 0) (data.original_price > 0 || data.marketPrice > 0)
" " class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" :style="[{ color: originPriceColor }]">
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
:style="[{ color: originPriceColor }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text> <text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view> <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
</view> </view>
@ -146,12 +102,7 @@
</view> </view>
<!-- lg卡片：横向型，一行放一个，图片左内容右边 --> <!-- lg卡片：横向型，一行放一个，图片左内容右边 -->
<view <view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
v-if="size === 'lg'"
class="lg-goods-card ss-flex ss-col-stretch"
:style="[elStyles]"
@tap="onClick"
>
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
@ -159,25 +110,16 @@
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center"> <view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
<view class="tag-icon">拼团</view> <view class="tag-icon">拼团</view>
</view> </view>
<image <image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
class="lg-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
></image>
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20"> <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
<view> <view>
<view <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="lg-goods-title ss-line-2"
v-if="goodsFields.title?.show || goodsFields.name?.show" :style="[{ color: titleColor }]">
class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]"
>
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<view <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="lg-goods-subtitle ss-m-t-10 ss-line-1" class="lg-goods-subtitle ss-m-t-10 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]" :style="[{ color: subTitleColor, background: subTitleBackground }]">
>
{{ data.subtitle || data.introduction }} {{ data.subtitle || data.introduction }}
</view> </view>
</view> </view>
@ -190,22 +132,16 @@
</view> </view>
</slot> </slot>
<view class="ss-flex ss-col-bottom ss-m-t-10"> <view class="ss-flex ss-col-bottom ss-m-t-10">
<view <view v-if="goodsFields.price?.show"
v-if="goodsFields.price?.show"
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS" class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]" :style="[{ color: goodsFields.price.color }]">
>
<text class="ss-font-24">{{ priceUnit }}</text> <text class="ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</view> </view>
<view <view v-if="
v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) && (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
(data.original_price > 0 || data.marketPrice > 0) (data.original_price > 0 || data.marketPrice > 0)
" " class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS" :style="[{ color: originPriceColor }]">
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: originPriceColor }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text> <text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view> <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
</view> </view>
@ -227,54 +163,45 @@
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
class="sl-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
></image>
<view class="sl-goods-content"> <view class="sl-goods-content">
<view> <view>
<view <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sl-goods-title ss-line-1"
v-if="goodsFields.title?.show || goodsFields.name?.show" :style="[{ color: titleColor }]">
class="sl-goods-title ss-line-1"
:style="[{ color: titleColor }]"
>
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<view <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="sl-goods-subtitle ss-m-t-16" class="sl-goods-subtitle ss-m-t-16"
:style="[{ color: subTitleColor, background: subTitleBackground }]" :style="[{ color: subTitleColor, background: subTitleBackground }]">
>
{{ data.subtitle || data.introduction }} {{ data.subtitle || data.introduction }}
</view> </view>
</view> </view>
<view> <view>
<slot name="activity"> <slot name="activity">
<view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap"> <view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap">
<view <view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
class="activity-tag ss-m-r-10 ss-m-t-16"
v-for="item in data.promos"
:key="item.id"
>
{{ item.title }} {{ item.title }}
</view> </view>
</view> </view>
</slot> </slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{iconShow}}</view>
<view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS"> <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
<view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]"> <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
<text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
<text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
</view> </view>
<view <view v-if="
v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) && (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
(data.original_price > 0 || data.marketPrice > 0) (data.original_price > 0 || data.marketPrice > 0)
" " class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" :style="[{ color: originPriceColor }]">
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
:style="[{ color: originPriceColor }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text> <text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view> <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
</view> </view>
@ -285,9 +212,9 @@
</view> </view>
</view> </view>
<slot name="cart" <slot name="cart">
><view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view></slot <view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view>
> </slot>
</view> </view>
</view> </view>
</template> </template>
@ -321,13 +248,26 @@
* @event {Function()} click - 点击卡片 * @event {Function()} click - 点击卡片
* *
*/ */
import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue'; import {
computed,
reactive,
getCurrentInstance,
onMounted,
nextTick,
ref
} from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods'; import {
import { formatStock } from '@/sheep/hooks/useGoods'; fen2yuan,
formatSales
} from '@/sheep/hooks/useGoods';
import {
formatStock
} from '@/sheep/hooks/useGoods';
import goodsCollectVue from '@/pages/user/goods-collect.vue'; import goodsCollectVue from '@/pages/user/goods-collect.vue';
import { isArray } from 'lodash-es'; import {
isArray
} from 'lodash-es';
// 数据 // 数据
const state = reactive({}); const state = reactive({});
@ -335,20 +275,32 @@
const props = defineProps({ const props = defineProps({
goodsFields: { goodsFields: {
type: [Array, Object], type: [Array, Object],
default() { default () {
return { return {
// 商品价格 // 商品价格
price: { show: true }, price: {
show: true
},
// 库存 // 库存
stock: { show: true }, stock: {
show: true
},
// 商品名称 // 商品名称
name: { show: true }, name: {
show: true
},
// 商品介绍 // 商品介绍
introduction: { show: true }, introduction: {
show: true
},
// 市场价 // 市场价
marketPrice: { show: true }, marketPrice: {
show: true
},
// 销量 // 销量
salesCount: { show: true }, salesCount: {
show: true
},
}; };
}, },
}, },
@ -417,7 +369,26 @@
default: false, default: false,
}, },
}); });
//判断限时优惠和会员价标签内容暂时导致页面出错，又舍不得丢，等着把新的数据整合到商品信息中，也用起来
const iconShow = handle()
function handle() {
console.log('传来的数据',props.data)
if (props.data.discountPrice === null && props.data.vipPrice === null) {
// 如果两个值都为 null，则不展示任何内容
return '';
} else if (props.data.discountPrice === null) {
// 如果 discountPrice 为 null，展示 vipPrice
return '会员价';
} else if (props.data.vipPrice === null) {
// 如果 vipPrice 为 null，展示 discountPrice
return '限时优惠';
} else if (props.data.discountPrice < props.data.vipPrice) {
return '限时优惠';
} else if (props.data.discountPrice > props.data.vipPrice) {
return '会员价';
}
}
// 组件样式 // 组件样式
const elStyles = computed(() => { const elStyles = computed(() => {
return { return {
@ -449,12 +420,18 @@
}; };
// 获取卡片实时高度 // 获取卡片实时高度
const { proxy } = getCurrentInstance(); const {
proxy
} = getCurrentInstance();
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`; const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
function getGoodsPriceCardWH() { function getGoodsPriceCardWH() {
if (props.size === 'md') { if (props.size === 'md') {
const view = uni.createSelectorQuery().in(proxy); const view = uni.createSelectorQuery().in(proxy);
view.select(`#${elId}`).fields({ size: true, scrollOffset: true }); view.select(`#${elId}`).fields({
size: true,
scrollOffset: true
});
view.exec((data) => { view.exec((data) => {
let totalHeight = 0; let totalHeight = 0;
const goodsPriceCard = data[0]; const goodsPriceCard = data[0];
@ -482,11 +459,13 @@
left: 0; left: 0;
top: 0; top: 0;
z-index: 2; z-index: 2;
.tag-icon { .tag-icon {
width: 72rpx; width: 72rpx;
height: 44rpx; height: 44rpx;
} }
} }
.seckill-tag { .seckill-tag {
position: absolute; position: absolute;
left: 0; left: 0;
@ -501,6 +480,7 @@
color: #ffffff; color: #ffffff;
line-height: 32rpx; line-height: 32rpx;
} }
.groupon-tag { .groupon-tag {
position: absolute; position: absolute;
left: 0; left: 0;
@ -515,14 +495,17 @@
color: #ffffff; color: #ffffff;
line-height: 32rpx; line-height: 32rpx;
} }
.goods-img { .goods-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.price-unit { .price-unit {
margin-right: -4px; margin-right: -4px;
} }
.sales-text { .sales-text {
display: table; display: table;
font-size: 24rpx; font-size: 24rpx;
@ -586,10 +569,12 @@
width: 100%; width: 100%;
height: 208rpx; height: 208rpx;
} }
.sm-goods-content { .sm-goods-content {
padding: 20rpx 16rpx; padding: 20rpx 16rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.sm-goods-title { .sm-goods-title {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #333;
@ -619,6 +604,7 @@
color: #333; color: #333;
width: 100%; width: 100%;
} }
.md-goods-subtitle { .md-goods-subtitle {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
@ -669,6 +655,7 @@
// line-height: 36rpx; // line-height: 36rpx;
// width: 410rpx; // width: 410rpx;
} }
.lg-goods-subtitle { .lg-goods-subtitle {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
@ -695,6 +682,7 @@
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
} }
.tag-box { .tag-box {
width: 100%; width: 100%;
} }
@ -708,10 +696,12 @@
z-index: 1; z-index: 1;
width: 100%; width: 100%;
background-color: $white; background-color: $white;
.sl-goods-content { .sl-goods-content {
padding: 20rpx 20rpx; padding: 20rpx 20rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.sl-img-box { .sl-img-box {
width: 100%; width: 100%;
height: 360rpx; height: 360rpx;
@ -722,6 +712,7 @@
color: #333; color: #333;
font-weight: 500; font-weight: 500;
} }
.sl-goods-subtitle { .sl-goods-subtitle {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
@ -748,4 +739,31 @@
color: #ffffff; color: #ffffff;
} }
} }
.card {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: red;
color: #ffffff;
font-size: 24rpx;
}
.card2 {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: rgb(255, 242, 241);
color: #ff2621;
font-size: 24rpx;
margin-left: 5rpx;
}
.iconBox {
width: 100%;
height: fit-content;
margin-top: 10rpx;
display: flex;
justify-content: flex-start;
}
</style> </style>

2
sheep/components/s-select-sku/s-select-sku.vue
View File

@ -82,7 +82,7 @@
}); });
const propertyList = convertProductPropertyList(props.goodsInfo.skus); const propertyList = convertProductPropertyList(props.goodsInfo.skus);
console.log('传递来的sku信息',props.goodsInfo.skus)
// SKU 列表 // SKU 列表
const skuList = computed(() => { const skuList = computed(() => {
let skuPrices = props.goodsInfo.skus; let skuPrices = props.goodsInfo.skus;

BIN
static/images/dis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB