新增套餐推广

pageMarket/packagePopularize/selectGoods.vue

@@ -0,0 +1,95 @@
+<template>
+	<view class="list">
+		<view class="item" v-for="item in list" :key="item.id" @click="selectGoods(item)">
+			<image class="cover" :src="item.coverImg" mode="aspectFill"></image>
+			<view class="info">
+				<text class="name">{{ item.name }}</text>
+				<text class="price">￥{{ returnPrice(item.skuList) }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { getProductList } from '@/http/api/product.js';
+
+// 商品列表
+const list = ref([]);
+
+// 选择商品
+function selectGoods(item) {
+	uni.setStorageSync('packageSelectGoods', {
+		coverImg: item.coverImg,
+		name: item.name,
+		price: returnPrice(item.skuList)
+	});
+	uni.navigateBack();
+}
+
+// 返回规格最高价
+function returnPrice(skuList) {
+	return Math.max(...skuList.map((item) => item.salePrice));
+}
+
+// 获取商品列表
+async function getProductListAjax() {
+	try {
+		uni.showLoading({
+			title: '加载中...',
+			mask: true
+		});
+		const res = await getProductList();
+		list.value = res;
+	} catch (error) {
+		console.log(error);
+	}
+	uni.hideLoading();
+}
+
+onLoad(() => {
+	getProductListAjax();
+});
+</script>
+
+<style>
+page {
+	background-color: #f8f8f8;
+}
+</style>
+<style scoped lang="scss">
+.list {
+	padding: 28upx;
+	.item {
+		padding: 28upx;
+		background-color: #fff;
+		border-radius: 20upx;
+		display: flex;
+		&:not(:first-child) {
+			margin-top: 28upx;
+		}
+		.cover {
+			$size: 120upx;
+			width: $size;
+			height: $size;
+			border-radius: 16upx;
+		}
+		.info {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			gap: 12upx;
+			padding-left: 28upx;
+			.name {
+				font-size: 32upx;
+				color: #333;
+			}
+			.price {
+				font-size: 32upx;
+				color: red;
+			}
+		}
+	}
+}
+</style>