add product/rights pages

pages.json

@@ -46,6 +46,20 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/goodsDetail/goodsDetail",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
+		},
+		{
+			"path" : "pages/rightsDetail/rightsDetail",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

pages/goodsDetail/goodsDetail.vue

+<template>
+	<view class="goods-detail">
+		<!-- 产品图片列表 -->
+		<view class="product-images" v-if="productImages.length > 0">
+			<image v-for="(imageUrl, index) in productImages" :key="index" :src="$baseUrl + imageUrl"
+				class="product-image" mode="widthFix" :lazy-load="true" @error="onImageError" @load="onImageLoad" />
+		</view>
+
+		<!-- 固定底部按钮区域 -->
+		<view class="fixed-bottom">
+			<view class="button-group">
+				<image class="rights-btn" :src="$baseUrl + rightsBtn" @click="handleGoToRights">
+				</image>
+				<button class="share-btn" :src="$baseUrl + shareBtn" open-type="share">
+					<image class="share-btn-img" :src="$baseUrl + shareBtn" />
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, getCurrentInstance } from 'vue'
+import { getProductById, getProductImagesById, getShareImageById, getShareTextById, shareBtn, rightsBtn } from '@/utils/constant.js'
+
+// 响应式数据
+const productId = ref('')
+const currentProduct = ref(null)
+const isLoading = ref(true)
+
+// 计算属性
+const productImages = computed(() => {
+	return currentProduct.value ? currentProduct.value.productImages : []
+})
+
+// 页面加载时获取商品ID和产品信息
+onMounted(() => {
+	// 获取页面参数
+	const pages = getCurrentPages()
+	const currentPage = pages[pages.length - 1]
+	const options = currentPage.options || {}
+
+	// 获取goodId参数
+	productId.value = options.goodId || ''
+
+	console.log('接收到的产品ID:', productId.value)
+
+	if (productId.value) {
+		loadProductInfo()
+	}
+
+})
+
+// 加载产品信息
+const loadProductInfo = () => {
+	const product = getProductById(productId.value)
+	if (product) {
+		currentProduct.value = product
+		console.log('产品信息加载成功:', product)
+	} else {
+		console.warn('未找到对应的产品信息:', productId.value)
+	}
+
+}
+
+// 图片加载成功
+const onImageLoad = (e) => {
+	console.log('图片加载成功:', e.target.src)
+}
+
+// 图片加载失败
+const onImageError = (e) => {
+	console.error('图片加载失败:', e.target.src)
+}
+
+// 跳转权益页面
+const handleGoToRights = () => {
+	uni.navigateTo({
+		url: `/pages/rightsDetail/rightsDetail?rightsId=rights1`
+	})
+}
+</script>
+
+<script>
+// 微信小程序分享配置 - 使用 Options API
+export default {
+	// 自定义分享内容
+	onShareAppMessage() {
+		const pages = getCurrentPages()
+		const currentPage = pages[pages.length - 1]
+		const options = currentPage.options || {}
+		const productId = options.goodId || ''
+
+		// 获取产品信息
+		const product = getProductById(productId)
+
+		const { proxy } = getCurrentInstance();
+		const $baseUrl = proxy.$baseUrl;
+		console.log('product', product)
+
+
+		return {
+			title: product.shareText || product.name,
+			path: `/pages/goodsDetail/goodsDetail?goodId=${productId}`,
+			imageUrl: product.shareImage ? `${$baseUrl + product.shareImage}` : undefined
+		}
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-detail {
+	min-height: 100vh;
+}
+
+.product-images {
+	width: 100%;
+}
+
+.product-image {
+	width: 100%;
+	display: block;
+}
+
+.fixed-bottom {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 20rpx 30rpx;
+	z-index: 999;
+}
+
+.button-group {
+	display: flex;
+	gap: 20rpx;
+}
+
+.share-btn {
+	width: 350rpx;
+	height: 75rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	padding: 0;
+}
+
+.share-btn-img {
+	width: 100%;
+	height: 100%;
+}
+
+.rights-btn {
+	width: 350rpx;
+	height: 75rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.fixed-bottom {
+	padding-bottom: calc(20rpx + var(--window-bottom));
+}
+
+.fixed-bottom {
+	padding-bottom: 20rpx;
+}
+</style>

pages/rightsDetail/rightsDetail.vue

+<template>
+	<view class="rights-detail">
+		<!-- 权益图片列表 -->
+		<view class="rights-images" v-if="rightsImages.length > 0">
+			<image v-for="(imageUrl, index) in rightsImages" :key="index" :src="$baseUrl + imageUrl"
+				class="rights-image" mode="widthFix" :lazy-load="true" @error="onImageError" @load="onImageLoad" />
+		</view>
+		
+		<!-- 固定底部按钮区域 -->
+		<view class="fixed-bottom">
+			<view class="button-group">
+				<button class="share-btn" open-type="share">
+					<image class="share-btn-img" :src="$baseUrl + rightsShareBtn" />
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, getCurrentInstance } from 'vue'
+import { rightsShareBtn ,getRightsById} from '@/utils/constant.js'
+
+// 响应式数据
+const rightsId = ref('')
+const currentRights = ref(null)
+const isLoading = ref(true)
+
+// 计算属性
+const rightsImages = computed(() => {
+	return currentRights.value ? currentRights.value.productImages : []
+})
+
+// 页面加载时获取权益ID和权益信息
+onMounted(() => {
+	// 获取页面参数
+	const pages = getCurrentPages()
+	const currentPage = pages[pages.length - 1]
+	const options = currentPage.options || {}
+	
+	// 获取rightsId参数
+	rightsId.value = options.rightsId || ''
+	
+	console.log('接收到的权益ID:', rightsId.value)
+	
+	if (rightsId.value) {
+		loadRightsInfo()
+	}
+})
+
+// 加载权益信息
+const loadRightsInfo = () => {
+	const rights = getRightsById(rightsId.value)
+	if (rights) {
+		currentRights.value = rights
+		console.log('权益信息加载成功:', rights)
+	} else {
+		console.warn('未找到对应的权益信息:', rightsId.value)
+	}
+}
+
+// 图片加载成功
+const onImageLoad = (e) => {
+	console.log('图片加载成功:', e.target.src)
+}
+
+// 图片加载失败
+const onImageError = (e) => {
+	console.error('图片加载失败:', e.target.src)
+}
+
+// 返回功能
+const handleGoBack = () => {
+	uni.navigateBack({
+		delta: 1,
+		fail: () => {
+			// 如果返回失败，可以跳转到首页或其他页面
+			uni.switchTab({
+				url: '/pages/index/index'
+			})
+		}
+	})
+}
+</script>
+
+<script>
+// 微信小程序分享配置 - 使用 Options API
+export default {
+	// 自定义分享内容
+	onShareAppMessage() {
+		const pages = getCurrentPages()
+		const currentPage = pages[pages.length - 1]
+		const options = currentPage.options || {}
+		const rightsId = options.rightsId || ''
+		
+		// 获取权益信息
+		const rights = getRightsById(rightsId)
+		const { proxy } = getCurrentInstance();
+		const $baseUrl = proxy.$baseUrl;
+
+			return {
+				title: rights.shareText || rights.name,
+				path: `/pages/rightsDetail/rightsDetail?rightsId=${rightsId}`,
+				imageUrl: rights.shareImage ? `${$baseUrl}${rights.shareImage}` : undefined
+			}
+	
+	},
+	
+	
+}
+</script>
+
+<style lang="scss" scoped>
+.rights-detail {
+	min-height: 100vh;
+}
+
+.rights-images {
+	width: 100%;
+}
+
+.rights-image {
+	width: 100%;
+	display: block;
+}
+
+.fixed-bottom {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 20rpx 30rpx;
+	z-index: 999;
+}
+
+.button-group {
+	display: flex;
+	gap: 20rpx;
+}
+
+.back-btn {
+	width: 350rpx;
+	height: 75rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.share-btn {
+	width: 718rpx;
+	height: 75rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	padding: 0;
+}
+
+.share-btn-img {
+	width: 100%;
+	height: 100%;
+}
+
+.fixed-bottom {
+	padding-bottom: calc(20rpx + var(--window-bottom));
+}
+
+.fixed-bottom {
+	padding-bottom: 20rpx;
+}
+</style>