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/91/head
卢越 2024-09-03 15:36:18 +08:00
parent 7268659193
commit 36289d526c
9 changed files with 366 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
manifest.json
View File

@ -3,7 +3,7 @@
"appid": "__UNI__460BC4C",
"description": "基于 uni-app + Vue3 技术驱动的在线商城系统，内含诸多功能与丰富的活动，期待您的使用和反馈。",
"versionName": "2.1.0",
"versionCode": 183,
"versionCode": "183",
"transformPx": false,
"app-plus": {
"usingComponents": true,
@ -188,7 +188,8 @@
"setting": {
"urlCheck": false,
"minified": true,
"postcss": true
"postcss": false,
"es6": false
},
"optimization": {
"subPackages": true
@ -236,4 +237,4 @@
"_spaceID": "192b4892-5452-4e1d-9f09-eee1ece40639",
"locale": "zh-Hans",
"fallbackLocale": "zh-Hans"
}
}

6
pages/user/goods_details_store/index.vue
View File

@ -75,7 +75,6 @@
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (jsWxSdk.isWechat()) {
jsWxSdk.getLocation((res) => {
console.log(res);
state.user_latitude = res.latitude;
state.user_longitude = res.longitude;
uni.setStorageSync(LATITUDE, res.latitude);
@ -92,7 +91,8 @@
state.user_longitude = res.longitude;
uni.setStorageSync(LATITUDE, res.latitude);
uni.setStorageSync(LONGITUDE, res.longitude);
} catch {
} catch (e) {
console.error(e);
}
getList();
},
@ -172,7 +172,7 @@
state.user_latitude = uni.getStorageSync(LATITUDE);
state.user_longitude = uni.getStorageSync(LONGITUDE);
} catch (e) {
// error
console.error(e)
}
});
</script>

11
sheep/api/promotion/combination.js
View File

@ -31,6 +31,17 @@ const CombinationApi = {
});
},
// 获得拼团活动明细列表
getCombinationActivityDetailList: (combinationActivityIds) => {
return request({
url: '/promotion/combination-activity/get-detail-list',
method: 'GET',
params: {
combinationActivityIds
},
});
},
// 获得最近 n 条拼团记录（团长发起的）
getHeadCombinationRecordList: (activityId, status, count) => {
return request({

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

@ -147,7 +147,7 @@
TWO_COL: 'twoCol',
// 单列小图
ONE_COL_SMALL_IMG: 'oneColSmallImg',
}
};
const state = reactive({
goodsList: [],
@ -157,16 +157,16 @@
const props = defineProps({
data: {
type: Object,
default() {},
default: () => ({})
},
styles: {
type: Object,
default() {},
default: () => ({})
},
});
const { layoutType, btnBuy, spuIds } = props.data ?? {};
const { marginLeft, marginRight } = props.styles ?? {};
const { layoutType, btnBuy, spuIds } = props.data || {};
const { marginLeft, marginRight } = props.styles || {};
// 购买按钮样式
const buyStyle = computed(() => {
@ -215,6 +215,7 @@
// 计数
count++;
}
//endregion
/**
@ -232,7 +233,7 @@
// 加载商品列表
state.goodsList = await getGoodsListByIds(spuIds.join(','));
// 只有双列布局时需要
if (layoutType === LayoutTypeEnum.TWO_COL){
if (layoutType === LayoutTypeEnum.TWO_COL) {
// 分列
calculateGoodsColumn();
}
@ -247,11 +248,13 @@
.goods-list-box {
width: 50%;
box-sizing: border-box;
.left-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
.right-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;

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

@ -155,7 +155,7 @@
<view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
<view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center"> 秒杀 </view>
<view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center">秒杀</view>
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
<view class="tag-icon">拼团</view>
</view>
@ -285,9 +285,9 @@
</view>
</view>
<slot name="cart"
><view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view></slot
>
<slot name="cart">
<view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view>
</slot>
</view>
</view>
</template>
@ -297,35 +297,34 @@
* 商品卡片
*
* @property {Array} size = [xs | sm | md | lg | sl ] - 列表数据
* @property {String} tag - md及以上才有
* @property {String} img - 图片
* @property {String} background - 背景色
* @property {String} topRadius - 上圆角
* @property {String} bottomRadius - 下圆角
* @property {String} title - 标题
* @property {String} titleColor - 标题颜色
* @property {String} tag - md及以上才有
* @property {String} img - 图片
* @property {String} background - 背景色
* @property {String} topRadius - 上圆角
* @property {String} bottomRadius - 下圆角
* @property {String} title - 标题
* @property {String} titleColor - 标题颜色
* @property {Number} titleWidth = 0 - 标题宽度，默认0，单位rpx
* @property {String} subTitle - 副标题
* @property {String} subTitleColor - 副标题颜色
* @property {String} subTitleBackground - 副标题背景
* @property {String | Number} price - 价格
* @property {String} priceColor - 价格颜色
* @property {String | Number} originPrice - 原价/划线价
* @property {String} originPriceColor - 原价颜色
* @property {String | Number} sales - 销售数量
* @property {String} salesColor - 销售数量颜色
* @property {String} subTitle - 副标题
* @property {String} subTitleColor - 副标题颜色
* @property {String} subTitleBackground - 副标题背景
* @property {String | Number} price - 价格
* @property {String} priceColor - 价格颜色
* @property {String | Number} originPrice - 原价/划线价
* @property {String} originPriceColor - 原价颜色
* @property {String | Number} sales - 销售数量
* @property {String} salesColor - 销售数量颜色
*
* @slots activity - 活动插槽
* @slots cart - 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
*
* @event {Function()} click - 点击卡片
* @event {Function()} click - 点击卡片
*
*/
import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
import sheep from '@/sheep';
import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods';
import { formatStock } from '@/sheep/hooks/useGoods';
import goodsCollectVue from '@/pages/user/goods-collect.vue';
import { isArray } from 'lodash-es';
// 数据
@ -354,11 +353,11 @@
},
tagStyle: {
type: Object,
default: {},
default: () => ({}),
},
data: {
type: Object,
default: {},
default: () => ({}),
},
size: {
type: String,
@ -451,6 +450,7 @@
// 获取卡片实时高度
const { proxy } = getCurrentInstance();
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
function getGoodsPriceCardWH() {
if (props.size === 'md') {
const view = uni.createSelectorQuery().in(proxy);
@ -469,6 +469,7 @@
});
}
}
onMounted(() => {
nextTick(() => {
getGoodsPriceCardWH();
@ -482,11 +483,13 @@
left: 0;
top: 0;
z-index: 2;
.tag-icon {
width: 72rpx;
height: 44rpx;
}
}
.seckill-tag {
position: absolute;
left: 0;
@ -501,6 +504,7 @@
color: #ffffff;
line-height: 32rpx;
}
.groupon-tag {
position: absolute;
left: 0;
@ -515,14 +519,17 @@
color: #ffffff;
line-height: 32rpx;
}
.goods-img {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.price-unit {
margin-right: -4px;
}
.sales-text {
display: table;
font-size: 24rpx;
@ -586,10 +593,12 @@
width: 100%;
height: 208rpx;
}
.sm-goods-content {
padding: 20rpx 16rpx;
box-sizing: border-box;
}
.sm-goods-title {
font-size: 26rpx;
color: #333;
@ -619,6 +628,7 @@
color: #333;
width: 100%;
}
.md-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
@ -669,6 +679,7 @@
// line-height: 36rpx;
// width: 410rpx;
}
.lg-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
@ -695,6 +706,7 @@
font-size: 24rpx;
color: #ffffff;
}
.tag-box {
width: 100%;
}
@ -708,10 +720,12 @@
z-index: 1;
width: 100%;
background-color: $white;
.sl-goods-content {
padding: 20rpx 20rpx;
box-sizing: border-box;
}
.sl-img-box {
width: 100%;
height: 360rpx;
@ -722,6 +736,7 @@
color: #333;
font-weight: 500;
}
.sl-goods-subtitle {
font-size: 24rpx;
font-weight: 400;

449
sheep/components/s-groupon-block/s-groupon-block.vue
View File

@ -1,171 +1,312 @@
<!-- 装修组件 - 拼团 -->
<!-- 装修商品组件：商品卡片 -->
<template>
<view>
<view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap" :style="[{ margin: '-' + data.space + 'rpx' }]">
<view v-for="product in productList" class="goods-card-box" :key="product.id" :style="[{padding: data.space + 'rpx',},]">
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="goodsFields"
:tagStyle="badge"
:data="product"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/groupon', { id: props.data.activityId, })">
</s-goods-column>
</view>
</view>
<!-- 样式2 一行一个 图片左 文案右 -->
<view class="goods-box" v-if="layoutType === 'oneCol'">
<view class="goods-list" v-for="(product, index) in productList" :key="index" :style="[{ marginBottom: space + 'px' }]">
<s-goods-column
class="goods-card" size="lg"
:grouponTag="true"
:goodsFields="goodsFields"
:tagStyle="badge"
:data="product"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/groupon', { id: props.data.activityId, })">
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy?.type === 'text' ? btnBuy.text : '去拼团' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
<!-- 商品卡片 -->
<view>
<!-- 布局1. 单列大图（上图，下内容）-->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length" class="goods-sl-box">
<view
class="goods-box"
v-for="item in state.spuList"
:key="item.id"
:style="[{ marginBottom: data.space * 2 + 'rpx' }]"
>
<s-goods-column
class=""
size="sl"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- 布局2. 双列（每一列：上图，下内容）-->
<view
v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
>
<view class="goods-list-box">
<view
class="left-list"
:style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
v-for="item in state.leftSpuList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="calculateGoodsColumn($event, 'left')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<view class="goods-list-box">
<view
class="right-list"
:style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
v-for="item in state.rightSpuList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="calculateGoodsColumn($event, 'right')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
<!-- 布局3. 单列小图（左图，右内容） -->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length" class="goods-lg-box">
<view
class="goods-box"
:style="[{ marginBottom: data.space + 'px' }]"
v-for="item in state.spuList"
:key="item.id"
>
<s-goods-column
class="goods-card"
size="lg"
:goodsFields="data.fields"
:data="item"
:tagStyle="data.badge"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
</template>
<script setup>
/**
* 拼团
*/
import {
computed,
onMounted,
reactive,
ref
} from 'vue';
import sheep from '@/sheep';
import SpuApi from "@/sheep/api/product/spu";
import CombinationApi from "@/sheep/api/promotion/combination";
/**
* 商品卡片
*/
import {
computed,
onMounted,
reactive,
ref,
} from 'vue';
import sheep from '@/sheep';
import CombinationApi from '@/sheep/api/promotion/combination';
import SpuApi from '@/sheep/api/product/spu';
// 接收参数
const props = defineProps({
// 装修数据
data: {
type: Object,
default: () => ({}),
},
// 装修样式
styles: {
type: Object,
default: () => ({}),
},
});
// 设置相关信息是否显示
const goodsFields = reactive({
// 商品价格
price: { show: true },
// 库存
stock: { show: true },
// 商品名称
name: { show: true },
// 商品介绍
introduction: { show: true },
// 市场价
marketPrice: { show: true },
// 销量
salesCount: { show: true },
});
// 布局类型
const LayoutTypeEnum = {
// 单列大图
ONE_COL_BIG_IMG: 'oneColBigImg',
// 双列
TWO_COL: 'twoCol',
// 单列小图
ONE_COL_SMALL_IMG: 'oneColSmallImg',
};
let {
layoutType,
badge,
btnBuy,
space,
} = props.data;
let {
marginLeft,
marginRight
} = props.styles;
const state = reactive({
spuList: [],
leftSpuList: [],
rightSpuList: [],
});
const props = defineProps({
data: {
type: Object,
default() {
},
},
styles: {
type: Object,
default() {
},
},
});
// 购买按钮样式（暂未实现）
const buyStyle = computed(() => {
let btnBuy = props.data.btnBuy;
if (btnBuy?.type === 'text') {
return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
const { layoutType, btnBuy, activityIds } = props.data || {};
const { marginLeft, marginRight } = props.styles || {};
if (btnBuy?.type === 'img') {
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
// 购买按钮样式
const buyStyle = computed(() => {
if (btnBuy.type === 'text') {
// 文字按钮：线性渐变背景颜色
return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
if (btnBuy.type === 'img') {
// 图片按钮
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
const productList = ref([]);
onMounted(async () => {
// todo：@owen 与Yudao结构不一致，待重构
const {
data: activity
} = await CombinationApi.getCombinationActivity(props.data.activityId);
const {
data: spu
} = await SpuApi.getSpuDetail(activity.spuId)
// 循环活动信息，赋值拼团最低价格
activity.products.forEach((product) => {
spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
});
productList.value = [spu];
});
//region 商品瀑布流布局
// 下一个要处理的商品索引
let count = 0;
// 左列的高度
let leftHeight = 0;
// 右列的高度
let rightHeight = 0;
/**
* 计算商品在左列还是右列
* @param height 商品的高度
* @param where 添加到哪一列
*/
function calculateGoodsColumn(height = 0, where = 'left') {
// 处理完
if (!state.spuList[count]) return;
// 增加列的高度
if (where === 'left') leftHeight += height;
if (where === 'right') rightHeight += height;
// 添加到矮的一列
if (leftHeight <= rightHeight) {
state.leftSpuList.push(state.spuList[count]);
} else {
state.rightSpuList.push(state.spuList[count]);
}
// 计数
count++;
}
//endregion
/**
* 根据商品编号列表，获取商品列表
* @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表
*/
async function getCombinationActivityDetailList(ids) {
const { data } = await CombinationApi.getCombinationActivityDetailList(ids);
return data;
}
/**
* 根据商品编号，获取商品详情
* @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表
*/
async function getSpuDetail(spuId) {
const { data: spu } = await SpuApi.getSpuDetail(spuId)
return spu;
}
// 初始化
onMounted(async () => {
// 加载商品列表
const activityList = await getCombinationActivityDetailList(activityIds.join(','));
// 创建 SPU 请求的 Promise 数组
const spuPromises = activityList.map(activity => getSpuDetail(activity.spuId));
// 等待所有 SPU 请求完成
// 处理 spuList
state.spuList = await Promise.all(spuPromises);
// 只有双列布局时需要
if (layoutType === LayoutTypeEnum.TWO_COL) {
// 分列
calculateGoodsColumn();
}
});
</script>
<style lang="scss" scoped>
.goods-list {
position: relative;
.goods-md-wrap {
width: 100%;
}
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
}
}
.goods-list-box {
width: 50%;
box-sizing: border-box;
.left-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
.right-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
}
.goods-list {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-box {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-sm-box {
margin: 0 auto;
box-sizing: border-box;
.goods-md-box,
.goods-sl-box,
.goods-lg-box {
position: relative;
.goods-card-box {
flex-shrink: 0;
overflow: hidden;
width: 33.3%;
box-sizing: border-box;
}
}
.cart-btn {
position: absolute;
bottom: 18rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
}
}
</style>

4
sheep/components/s-live-block/s-live-block.vue
View File

@ -70,8 +70,8 @@
default() {},
},
});
const { mode, goodsFields, mpliveIds } = props.data ?? {};
const { marginLeft, marginRight } = props.styles ?? {};
const { mode, goodsFields, mpliveIds } = props.data || {};
const { marginLeft, marginRight } = props.styles || {};
async function getLiveListByIds(ids) {
const { data } = await sheep.$api.app.mplive.getRoomList(ids);

2
sheep/helper/index.js
View File

@ -621,7 +621,7 @@ function setProperty(obj, key, value) {
function page() {
const pages = getCurrentPages();
// 某些特殊情况下(比如页面进行redirectTo时的一些时机)，pages可能为空数组
return `/${pages[pages.length - 1]?.route ?? ''}`;
return `/${pages[pages.length - 1]?.route || ''}`;
}
/**

3
sheep/platform/share.js
View File

@ -186,7 +186,8 @@ const bindBrokerageUser = async (val= undefined) => {
}
await BrokerageApi.bindBrokerageUser({ bindUserId: shareId });
uni.removeStorageSync('shareId');
} catch {
} catch (e) {
console.error(e);
}
};