2025-10-17

商城详情页
收获地址

api/mall.js

@@ -7,7 +7,7 @@ const baseUrl = "http://192.168.0.26:3000"
 export const mallAPI = {
 	getMallList: (params) => http.get(baseUrl + '/api/products', params),
 	getCategory: () => http.get(baseUrl + '/api/category'),
-	getMallDetail: (id) => http.get(baseUrl + '/products/' + id)
+	getMallDetail: (id) => http.get(baseUrl + '/api/products/' + id)
 }
 
 export default {

pages/home/mallDetail.vue

@@ -35,11 +35,13 @@
 
 <script setup lang="ts">
 	import { onMounted, ref, getCurrentInstance } from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import { mallAPI } from '../../api/mall';
 
 	const instance = getCurrentInstance();
-
 	const scrollHeight = ref(0)
-
 	const loadHeight = () => {
 		uni.getSystemInfo({
 			success(res) {
@@ -54,8 +56,21 @@
 		})
 	}
 
+	const dataId = ref()
+
+	const loadData = () => {
+		mallAPI.getMallDetail(dataId.value).then(res => {
+			console.log(res);
+		})
+	}
+
+	onLoad((val) => {
+		dataId.value = val.id
+	})
+
 	onMounted(() => {
 		loadHeight()
+		loadData()
 	})
 </script>
 

pages/my/shippingAddress.vue

@@ -1,11 +1,14 @@
 <template>
 	<view class="shipping-container">
-		<u-navbar id="uNavbarId" back-text="收货地址" :back-text-style="navBarTitle" :background="{background: 'transparent' }" :border-bottom="false"
-			back-icon-color="#000" title-color="#000">
+		<u-navbar id="uNavbarId" back-text="收货地址" :back-text-style="navBarTitle"
+			:background="{background: 'transparent' }" :border-bottom="false" back-icon-color="#000" title-color="#000">
 			<template v-slot:right>
 				<view class="right-menu">
-					<view class="">
-						管理
+					<view @click="handleManage">
+						{{isManage?'取消':'管理'}}
+					</view>
+					<view v-if="isManage" class="u-m-l-10 del-text" @click="showDelModel">
+						删除
 					</view>
 					<view class="u-m-l-10 add-text">
 						新增地址
@@ -13,15 +16,46 @@
 				</view>
 			</template>
 		</u-navbar>
-		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
-			<view> </view>
+		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
+			<view class="data-list">
+				<view class="data-item" v-for="item in dataList" @click="handleClick(item)">
+					<view class="item-text">
+						<view class="address u-m-b-18">
+							{{item.province + item.city + item.district}}
+						</view>
+						<view class="specific-address u-m-b-18">
+							{{item.detailed_address}}
+						</view>
+						<view class="info">
+							<div class="u-m-r-20">{{item.receiver_name}}</div>
+							<div class="u-m-r-20">{{item.receiver_phone}}</div>
+							<span v-if="item.is_default" class="u-m-r-10">默认</span>
+							<span class="u-m-r-10">{{item.label}}</span>
+						</view>
+					</view>
+					<view class="item-icon">
+						<image v-if="!isManage" style="width: 100%;height: 100%;" src="/static/icon/Edit.png" mode="">
+						</image>
+						<template v-else>
+							<image v-if="!isIncludeId(item.id)" style="width: 100%;height: 100%;"
+								src="/static/icon/chose.png" mode=""></image>
+							<image v-else style="width: 100%;height: 100%;" src="/static/icon/chose-active.png" mode="">
+							</image>
+						</template>
+					</view>
+				</view>
+				<u-loadmore :status="status" />
+			</view>
 		</scroll-view>
+
+		<!-- 确认是否删除 -->
+		<u-modal v-model="showDel" content="是否删除选中的地址" :show-cancel-button="true" @confirm="handleDel"></u-modal>
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { getCurrentInstance, onMounted, ref } from 'vue'
-	
+	import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+
 	const navBarTitle = {
 		fontWeight: '510',
 		fontStyle: 'Medium',
@@ -29,6 +63,22 @@
 		lineHeight: '52px'
 	}
 
+	const isManage = ref(false)
+	const showDel = ref(false)
+
+	const handleManage = () => {
+		if (isManage.value) {
+			ids.value = []
+		}
+		isManage.value = !isManage.value
+	}
+	const showDelModel = () => {
+		showDel.value = true
+	}
+	const handleDel = () => {
+		// TODO 删除
+	}
+
 	const scrollHeight = ref(0)
 	const instance = getCurrentInstance();
 	const loadHeight = () => {
@@ -42,8 +92,104 @@
 		})
 	}
 
+	const defaultSize = 10
+	const params = ref({
+		page: 1,
+		size: defaultSize,
+		keyword: ''
+	})
+	const status = ref('loadmore')
+	const maxPage = ref()
+	const dataList = ref([
+		{
+			id: 1,
+			receiver_name: '张三',
+			receiver_phone: '13800138000',
+			province: '广东省',
+			city: '深圳市',
+			district: '南山区',
+			detailed_address: '科技园南区1栋101室',
+			label: '家',
+			is_default: true,
+			created_at: '2023-10-01 12:00:00'
+		},
+		{
+			id: 2,
+			receiver_name: '李四',
+			receiver_phone: '13900139000',
+			province: '北京市',
+			city: '北京市',
+			district: '朝阳区',
+			detailed_address: '建国门外大街1号',
+			label: '公司',
+			is_default: false,
+			created_at: '2023-10-02 14:30:00'
+		},
+		{
+			id: 3,
+			receiver_name: '王五',
+			receiver_phone: '13700137000',
+			province: '上海市',
+			city: '上海市',
+			district: '浦东新区',
+			detailed_address: '陆家嘴环路1000号',
+			label: '公司',
+			is_default: false,
+			created_at: '2023-10-03 09:15:00'
+		},
+		{
+			id: 4,
+			receiver_name: '赵六',
+			receiver_phone: '13600136000',
+			province: '浙江省',
+			city: '杭州市',
+			district: '西湖区',
+			detailed_address: '文三路100号',
+			label: '学校',
+			is_default: false,
+			created_at: '2023-10-04 16:45:00'
+		},
+		{
+			id: 5,
+			receiver_name: '钱七',
+			receiver_phone: '13500135000',
+			province: '江苏省',
+			city: '南京市',
+			district: '鼓楼区',
+			detailed_address: '中山路1号',
+			label: '家',
+			is_default: false,
+			created_at: '2023-10-05 11:20:00'
+		}
+	])
+	const loadData = () => {
+		if (status.value == 'nomore') return
+		// programAPI.getList(params.value).then(res => {
+		// 	programList.value = programList.value.concat(res.data.list)
+		// 	maxPage.value = res.data.pages
+		// 	params.value.page++
+		// 	if (params.value.page > maxPage.value) {
+		// 		status.value = 'nomore'
+		// 	}
+		// }).finally(() => {
+		// 	uni.stopPullDownRefresh()
+		// })
+	}
+
+	const ids = ref([])
+	const handleClick = (item : any) => {
+		if (isManage.value) { // 开始管理
+			ids.value.push(item.id)
+		}
+	}
+
+	const isIncludeId = (id : any) => {
+		return ids.value.includes(id);
+	}
+
 	onMounted(() => {
 		loadHeight()
+		loadData()
 	})
 </script>
 
@@ -51,7 +197,8 @@
 	.shipping-container {
 		width: 100%;
 		height: 100vh;
-		background: #B9D5FF;
+		background: #E5ECFD;
+
 
 		.right-menu {
 			display: flex;
@@ -63,9 +210,59 @@
 			leading-trim: NONE;
 			line-height: 100%;
 			letter-spacing: -2%;
-			.add-text{
+
+			.del-text {
+				color: red;
+			}
+
+			.add-text {
 				color: #305DEF;
 			}
 		}
+
+		.data-list {
+			.data-item {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				padding: 28rpx 22rpx;
+				background: #F5F8FF;
+				margin-bottom: 4rpx;
+				align-items: center;
+
+				.item-text {
+					font-weight: 400;
+					line-height: 100%;
+
+					.address {
+						font-size: 20rpx;
+						color: #7B7E8F;
+					}
+
+					.specific-address {
+						font-size: 26rpx;
+					}
+
+					.info {
+						font-size: 24rpx;
+						display: flex;
+						align-items: center;
+
+						span {
+							padding: 2rpx 8rpx;
+							font-size: 16rpx;
+							background: #DADDEA;
+							color: #305DEF;
+							border-radius: 2rpx;
+						}
+					}
+				}
+
+				.item-icon {
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+		}
 	}
 </style>

pages/program/programDetail.vue

@@ -201,7 +201,7 @@
 	} from '../../api/program';
 	import {
 		onLoad
-	} from '@dcloudio/uni-app'
+	} from '@dcloudio/uni-app';
 	import {
 		groupAPI
 	} from '../../api/group';