Forráskód Böngészése

【综合修复】改造拼团装修(仍需优化);处理无法发布到微信小程序的问题;【新增接口】新增系统字典查询接口

Xiao_123 9 hónapja
szülő
commit
819217744e

+ 3 - 2
manifest.json

@@ -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": true,
+      "es6": false
     },
     "optimization": {
       "subPackages": true

+ 11 - 0
sheep/api/promotion/combination.js

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

+ 16 - 0
sheep/api/system/dict.js

@@ -0,0 +1,16 @@
+import request from '@/sheep/request';
+
+const DictApi = {
+  // 根据字典类型查询字典数据信息
+  getDictDataListByType: (type) => {
+    return request({
+      url: `/system/dict-data/type`,
+      method: 'GET',
+	  params: {
+	    type,
+	  },
+    });
+  },
+};
+
+export default DictApi;

+ 2 - 2
sheep/components/s-goods-card/s-goods-card.vue

@@ -165,8 +165,8 @@
     },
   });
 
-  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(() => {

+ 284 - 144
sheep/components/s-groupon-block/s-groupon-block.vue

@@ -1,171 +1,311 @@
-<!-- 装修组件 - 拼团 -->
-<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',},]">
+<!-- 装修商品组件:商品卡片 -->
+<!-- 商品卡片 -->
+<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-card"
-					size="sm"
-					:goodsFields="goodsFields"
-					:tagStyle="badge"
-					:data="product"
+					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"
-					@click="sheep.$router.go('/pages/goods/groupon', { id: props.data.activityId, })">
+					: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>
-		<!-- 样式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' }]">
+		<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-card" size="lg"
-					:grouponTag="true"
-					:goodsFields="goodsFields"
-					:tagStyle="badge"
-					:data="product"
+					class="goods-md-box"
+					size="md"
+					:goodsFields="data.fields"
+					:tagStyle="data.badge"
+					:data="item"
 					:titleColor="data.fields.name?.color"
-					:subTitleColor="data.fields.introduction?.color"
+					:subTitleColor="data.fields.introduction.color"
 					:topRadius="data.borderRadiusTop"
 					:bottomRadius="data.borderRadiusBottom"
-					@click="sheep.$router.go('/pages/goods/groupon', { id: props.data.activityId, })">
+					: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 : '去拼团' }}
+							{{ 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";
-
-	// 接收参数
-	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 },
-	});
-
-	let {
-		layoutType,
-		badge,
-		btnBuy,
-		space,
-	} = props.data;
-	let {
-		marginLeft,
-		marginRight
-	} = props.styles;
-
-	// 购买按钮样式(暂未实现)
-	const buyStyle = computed(() => {
-		let btnBuy = props.data.btnBuy;
-		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];
-	});
+   * 商品卡片
+   */
+	 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 LayoutTypeEnum = {
+    // 单列大图
+    ONE_COL_BIG_IMG: 'oneColBigImg',
+    // 双列
+    TWO_COL: 'twoCol',
+    // 单列小图
+    ONE_COL_SMALL_IMG: 'oneColSmallImg',
+  };
+
+  const state = reactive({
+    spuList: [],
+    leftSpuList: [],
+    rightSpuList: [],
+  });
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {
+      },
+    },
+    styles: {
+      type: Object,
+      default() {
+      },
+    },
+  });
+
+  const { layoutType, btnBuy, activityIds } = props.data || {};
+  const { marginLeft, marginRight } = props.styles || {};
+
+  // 购买按钮样式
+  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%',
+      };
+    }
+  });
+
+  //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;
-
-		.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 {
-		&:nth-last-of-type(1) {
-			margin-bottom: 0 !important;
-		}
-	}
-
-	.goods-sm-box {
-		margin: 0 auto;
-		box-sizing: border-box;
-
-		.goods-card-box {
-			flex-shrink: 0;
-			overflow: hidden;
-			width: 33.3%;
-			box-sizing: border-box;
-		}
-	}
+	.goods-md-wrap {
+    width: 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-box {
+    &:nth-last-of-type(1) {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .goods-md-box,
+  .goods-sl-box,
+  .goods-lg-box {
+    position: relative;
+
+    .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>

+ 1 - 1
sheep/helper/index.js

@@ -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 || ''}`;
 }
 
 /**