2025-10-17

收货地址添加修改
2025-10-17 17:21:11 +08:00
parent da61a7955b
commit a5a5534c36
8 changed files with 217 additions and 40 deletions
--- a/api/address.js
+++ b/api/address.js
@@ -0,0 +1,16 @@
+import {
+	http
+} from "../util/api"
+
+// const baseURL = "http://192.168.0.12:3005/term"
+const baseURL = "http://192.168.0.26:3000/api"
+
+// 项目相关API
+export const addressAPI = {
+	// 列表
+	getList: (params) => http.get(baseURL + '/addresses', params),
+}
+
+export default {
+	addressAPI
+}
--- a/api/common.js
+++ b/api/common.js
@@ -1,7 +1,9 @@
 import { http } from "../util/api";

+const baseURL = "http://192.168.0.26:3000/api"
+
 export const commonAPI = {
-	getRegion: () => http.get('/common/provinces'),
+	getRegion: () => http.get(baseURL + '/regions/provinces'),
 } 

 export default {
--- a/manifest.json
+++ b/manifest.json
@@ -1,5 +1,5 @@
 {
-    "name" : "jurong_circle_front_app",
+    "name" : "炬融圈",
    "appid" : "__UNI__11908F8",
    "description" : "",
    "versionName" : "1.0.0",
@@ -18,9 +18,7 @@
        },
        /* 模块配置 */
        "modules" : {
-            "Payment" : {},
-            "Record" : {},
-            "Camera" : {}
+            "Payment" : {}
        },
        /* 应用发布信息 */
        "distribute" : {
--- a/pages.json
+++ b/pages.json
@@ -4,7 +4,8 @@
 			"path": "pages/home/index",
 			"style": {
 				"navigationBarTitleText": "主页",
-				"navigationStyle": "custom"
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -1,6 +1,8 @@
 <template>
 	<view class="message-container">
-		<scroll-view scroll-y="true" style="height: 100%;">
+		<scroll-view scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="loadMallData"
+			:refresher-threshold="50" :refresher-triggered="isRefresher" refresher-background="transparent"
+			refresher-enabled="true" @refresherrefresh="reflash">
 			<view class="header-search">
 				<u-search :action-style="searchBtn" shape="square" bg-color="#CADBFF" placeholder="输入商品名称或商品种类"
 					v-model="keyword"></u-search>
@@ -133,22 +135,32 @@
 						</view>
 					</template>
 				</u-waterfall>
-				<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
 			</view>
-
+			<u-loadmore margin-top="20" :status="loadStatus" color="#fff"></u-loadmore>
 			<view class="box-div"></view>
-
 		</scroll-view>
 	</view>
 	<Tabbar id="tabbarId"></Tabbar>
 </template>
-
 <script setup lang="ts">
 	import {
-		ref, onMounted
+		ref, onMounted, getCurrentInstance
 	} from 'vue';
 	import { mallAPI } from '../../api/mall';
 	import { getImageUrl } from '../../util/common';
+	const instance = getCurrentInstance();
+
+	const height = ref(0)
+	const loadHeight = () => {
+		uni.getSystemInfo({
+			success(res) {
+				let screenHeight = res.screenHeight
+				uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
+					height.value = screenHeight - data.height
+				}).exec()
+			}
+		})
+	}

 	const keyword = ref('')
 	const searchBtn = {
@@ -167,11 +179,10 @@
 		})
 	}

-
 	const params = ref({
 		keyword: '',
 		page: 1,
-		limit: 5,
+		limit: 10,
 		category: ''
 	})
 	const mallList = ref([])
@@ -192,17 +203,28 @@

 	// 加载数据
 	const loadMallData = () => {
+		console.log(111);
 		if (loadStatus.value == 'nomore') return
 		mallAPI.getMallList(params.value).then((res) => {
-			console.log(res.data);
 			mallList.value = mallList.value.concat(res.data.products)
 			maxPage.value = res.data.pagination.pages
 			params.value.page++
 			if (maxPage.value < params.value.page) {
 				loadStatus.value = 'nomore'
 			}
+		}).finally(() => {
+			isRefresher.value = false
 		})
 	}
+	const isRefresher = ref(false)
+	const reflash = () => {
+		isRefresher.value = true
+		params.value.page = 1
+		params.value.category = ''
+		params.value.keyword = ''
+		loadStatus.value = 'loadmore'
+		loadMallData()
+	}

 	const handleCheck = (item : any) => {
 		uni.navigateTo({
@@ -211,6 +233,7 @@
 	}

 	onMounted(() => {
+		loadHeight()
 		loadMallData()
 	})
 </script>
@@ -333,7 +356,7 @@


 		.box-div {
-			padding: 30rpx 0rpx;
+			padding: 60rpx 0rpx;
 		}
 	}
 </style>
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -155,7 +155,6 @@

 	onMounted(() => {
 		user.value = uni.getStorageSync("user")
-		console.log(user.value);
 	})

 	const loginOut = () => {
--- a/pages/my/shippingAddress.vue
+++ b/pages/my/shippingAddress.vue
@@ -10,18 +10,18 @@
 					<view v-if="isManage" class="u-m-l-10 del-text" @click="showDelModel">
 						删除
 					</view>
-					<view class="u-m-l-10 add-text">
+					<view class="u-m-l-10 add-text" @click="handleAdd">
 						新增地址
 					</view>
 				</view>
 			</template>
 		</u-navbar>
-		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
+		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
 			<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}}
+							{{item.province_name + " " + item.city_name + " " + item.district_name}}
 						</view>
 						<view class="specific-address u-m-b-18">
 							{{item.detailed_address}}
@@ -44,18 +44,83 @@
 						</template>
 					</view>
 				</view>
-				<u-loadmore :status="status" />
 			</view>
 		</scroll-view>

+		<!-- 新增/修改 -->
+		<u-popup v-model="showForm" mode="bottom" length="60%" class="form-popup" @close="form={}">
+			<view class="form">
+				<view class="form-item u-m-b-30">
+					<view class="item-title">
+						<image class="must-icon" src="/static/my/must.png" mode=""></image>
+						<u-input v-model="form.regionLabel" type="select" placeholder="请选择省市区" @click="openProvince" />
+					</view>
+				</view>
+				<view class="form-item">
+					<view class="item-title">
+						<image class="must-icon" src="/static/my/must.png" mode=""></image>详细地址与门牌号
+					</view>
+					<view class="item-value">
+						<u-input v-model="form.detailed_address" placeholder="请输入详细地址与门牌号" type="text" />
+					</view>
+				</view>
+				<view class="form-item">
+					<view class="item-title">
+						<image class="must-icon" src="/static/my/must.png" mode=""></image>收货人名字
+					</view>
+					<view class="item-value">
+						<u-input v-model="form.receiver_name" placeholder="请输入收货人名字" type="text" />
+					</view>
+				</view>
+				<view class="form-item">
+					<view class="item-title">
+						<image class="must-icon" src="/static/my/must.png" mode=""></image>手机号
+					</view>
+					<view class="item-value">
+						<u-input v-model="form.receiver_phone" placeholder="请输入收货人名字" type="text" />
+					</view>
+				</view>
+				<view class="form-item">
+					<view class="item-title">
+						标签
+					</view>
+					<view class="item-tag u-m-t-10">
+						<span class="active">家</span>
+						<span>公司</span>
+						<span>学校</span>
+					</view>
+				</view>
+				<view class="form-item">
+					<view class="item-title">
+						<span class="u-m-r-10">是否设置为默认</span><u-checkbox v-model="form.is_default"
+							:disabled="false"></u-checkbox>
+					</view>
+				</view>
+			</view>
+			<u-button class="submit" hover-class="none" @click="handleSubmit">确定</u-button>
+		</u-popup>
+
+		<!-- 省市区 -->
+		<u-select v-model="showRegitionPicker" :list="regionOptions" mode="mutil-column-auto" label-name="label"
+			value-name="code" child-name="children" @confirm="handleRegion"></u-select>
 		<!-- 确认是否删除 -->
 		<u-modal v-model="showDel" content="是否删除选中的地址" :show-cancel-button="true" @confirm="handleDel"></u-modal>
 	</view>
 </template>

-<script setup lang="ts">
-	import { computed, getCurrentInstance, onMounted, ref } from 'vue'
-import { addressAPI } from '../../api/address'
+<script setup>
+	import {
+		computed,
+		getCurrentInstance,
+		onMounted,
+		ref
+	} from 'vue'
+	import {
+		addressAPI
+	} from '../../api/address'
+	import {
+		commonAPI
+	} from '../../api/common'

 	const navBarTitle = {
 		fontWeight: '510',
@@ -66,7 +131,13 @@ import { addressAPI } from '../../api/address'

 	const isManage = ref(false)
 	const showDel = ref(false)
+	const showForm = ref(false)
+	const showRegitionPicker = ref(false)
+	const form = ref({})

+	const handleAdd = () => {
+		showForm.value = true
+	}
 	const handleManage = () => {
 		if (isManage.value) {
 			ids.value = []
@@ -79,6 +150,22 @@ import { addressAPI } from '../../api/address'
 	const handleDel = () => {
 		// TODO 删除
 	}
+	// 打开省市区选择
+	const openProvince = () => {
+		showRegitionPicker.value = true
+	}
+	// 选择省市区
+	const handleRegion = (e) => {
+		form.value.regionLabel = e[0].label + "/" + e[1].label + "/" + e[2].label
+		form.value.province = e[0].value
+		form.value.city = e[1].value
+		form.value.district = e[2].value
+		form.value.district_id = e[2].value
+	}
+	// 确认提交
+	const handleSubmit = () => {
+		
+	}

 	const scrollHeight = ref(0)
 	const instance = getCurrentInstance();
@@ -86,39 +173,33 @@ import { addressAPI } from '../../api/address'
 		uni.getSystemInfo({
 			success(res) {
 				let screenHeight = res.screenHeight
-				uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((data : any) => {
+				uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((
+					data) => {
 					scrollHeight.value = screenHeight - data.height
 				}).exec()
 			}
 		})
 	}

-	const defaultSize = 10
-	const params = ref({
-		page: 1,
-		size: defaultSize,
-		keyword: ''
-	})
-	const status = ref('loadmore')
-	const maxPage = ref()
 	const dataList = ref([])
+	const regionOptions = ref([])
 	const loadData = () => {
-		if (status.value == 'nomore') return
-		addressAPI.getList(params.value).then(res => {
-			console.log(res);
-		}).finally(() => {
-			uni.stopPullDownRefresh()
+		addressAPI.getList().then((res) => {
+			dataList.value = res.data
+		})
+		commonAPI.getRegion().then(res => {
+			regionOptions.value = res.data
 		})
 	}

 	const ids = ref([])
-	const handleClick = (item : any) => {
+	const handleClick = (item) => {
 		if (isManage.value) { // 开始管理
 			ids.value.push(item.id)
 		}
 	}

-	const isIncludeId = (id : any) => {
+	const isIncludeId = (id) => {
 		return ids.value.includes(id);
 	}

@@ -199,5 +280,62 @@ import { addressAPI } from '../../api/address'
 				}
 			}
 		}
+
+		.form-popup {
+			.form {
+				padding: 30rpx 28rpx;
+
+				.form-item {
+					margin-bottom: 20rpx;
+					line-height: 100%;
+
+					.item-title {
+						display: flex;
+						align-items: center;
+						font-weight: 400;
+						font-size: 24rpx;
+
+						.must-icon {
+							width: 24rpx;
+							height: 24rpx;
+						}
+					}
+
+					.item-value {}
+
+					.item-tag {
+						font-weight: 400;
+						font-size: 26rpx;
+						line-height: 100%;
+						letter-spacing: -2%;
+
+						span {
+							padding: 0 20rpx;
+							background: #D9D9D9;
+							border-radius: 12rpx;
+							margin-left: 16rpx;
+						}
+
+						.active {
+							background: #BFCEFF;
+							color: #305DEF;
+						}
+					}
+				}
+			}
+
+			.submit {
+				position: absolute;
+				bottom: 10rpx;
+				width: 248rpx;
+				left: 0;
+				right: 0;
+				text-align: center;
+				background: #7B99FF;
+				border: none;
+				border-radius: 24rpx;
+				color: #fff;
+			}
+		}
 	}
 </style>
--- a/static/my/must.png
+++ b/static/my/must.png