1

api/productMall.js

@@ -10,3 +10,15 @@ export function getMallist(data = {}) {
     timeout: 20000
   })
 }
+
+export function mallCardInfo(data = {}) {
+  return request({
+    'url': '/app/card/info',
+    headers: {
+      isToken: true
+    },
+    method: 'post',
+    data,
+    timeout: 20000
+  })
+}

pages/mall/mallPage.vue

@@ -31,7 +31,7 @@
 								</view>
 							</view>
 							<view class="mall-bottom-row">
-								<view v-if="item.type ==1" class="kcb-btn" @click="productBtn">课程包明细<icon>
+								<view v-if="item.type ==1" class="kcb-btn" @click="productBtn(item)">课程包明细<icon>
 									</icon>
 								</view>
 								<view class="hdj-text">活动价：{{item.xianjia}}</view>
@@ -75,6 +75,7 @@
 		</view>
 		<detail-dialog ref="mallDetailPopup" :selected-list="getSelectedProducts"></detail-dialog>
 
+
 		<product-dialog ref="mallProductPopup" @payBtn="payBtn"></product-dialog>
 	</view>
 </template>
@@ -144,8 +145,8 @@
 		payType.value = payType.value == 'weixin' ? 'zhifubao' : 'weixin'
 	}
 
-	function productBtn() {
-		mallProductPopup.value.detailShow();
+	function productBtn(item) {
+		mallProductPopup.value.detailShow(item.id);
 	}
 
 	function detailBtn() {

pages/mall/productDialog.vue

@@ -1,43 +1,69 @@
 <template>
 	<uni-popup ref="detailPopup" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(51, 137, 217, 0.65);" style="z-index: 101;">
-	 <view class="mall-detail-dialog">
-		 <view class="detail-content-box">
-			 <icon class="cpmx-title"></icon>
-			 <icon class="dialog-close-btn" @click="detailCloseBtn"></icon>
-			 <view class="product-body-box">
-				 <!-- ↓需要换成从接口中取得 wgy -->
-			 	<view class="detail-item-box">
-			 		<img src="/static/images/my/about-icon.png" class="mall-image"/>
-			 		<view class="content-body-box">
-			 			<view class="content-name">
-			 				<view class="name-text">数学暑假进阶L1</view>
-			 			</view>
-			 			<view class="content-text">适用于L1和学前，介绍介绍，适用于L1和学前，介绍介绍适用于L1和学前，介绍介绍</view>
-			 		</view>
-			 	</view>
-			 </view>
-		 </view>
-	 </view>
+		mask-background-color="rgba(51, 137, 217, 0.65);" style="z-index: 101;">
+		<view class="mall-detail-dialog">
+			<view class="detail-content-box">
+				<icon class="cpmx-title"></icon>
+				<icon class="dialog-close-btn" @click="detailCloseBtn"></icon>
+				<view class="product-body-box">
+					<!-- ↓需要换成从接口中取得 wgy -->
+					<view class="detail-item-box" v-for="(item,index) in productList " :key="index">
+						<img :src="item.cover" class="mall-image" />
+						<view class="content-body-box">
+							<view class="content-name">
+								<view class="name-text">{{item.name}}</view>
+							</view>
+							<view class="content-text">{{item.intro}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
 	</uni-popup>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
+	import {
+		mallCardInfo
+	} from "@/api/productMall.js"
+	import {
+		toast,
+		debounce,
+		getUserIdentity
+	} from "@/utils/common";
+	import {
+		ref
+	} from 'vue';
 	const $emit = defineEmits(['payBtn'])
 	const detailPopup = ref(null); // 索引
+	let productList = ref([])
 	// 打开弹窗
-	function detailShow() {
-		detailPopup.value.open();
+	function detailShow(data) {
+
+		let req = {
+			id: data
+		}
+		mallCardInfo(req).then(res => {
+			console.log('res', res);
+			if (res.code == 0) {
+				productList.value = res.data
+				detailPopup.value.open();
+			} else {
+				toast('获取产品明细失败')
+				return false
+			}
+		})
+
 	}
 	// 开启提分之旅按钮
-	function detailPayBtn(){
+	function detailPayBtn() {
 		$emit('payBtn')
 	}
-	function detailCloseBtn(){
+
+	function detailCloseBtn() {
 		detailPopup.value.close();
 	}
 	defineExpose({
-			detailShow
-		})
+		detailShow
+	})
 </script>