用户地址列表页面制作及其接口对接

order-app/src/api/user.js

@@ -49,4 +49,12 @@ export const userLogin = async () => {
 //新增地址
 export const addAddressApi = (parm) => {
 	return http.post("/wxapi/address", parm)
+}
+//地址列表
+export const addressListApi = (parm) => {
+	return http.get("/wxapi/address/list", parm)
+}
+//编辑地址
+export const editAddressApi = (parm) => {
+	return http.put("/wxapi/address", parm)
 }

order-app/src/pages.json

@@ -51,6 +51,13 @@
 			"style": {
 				"navigationBarTitleText": "确认订单"
 			}
+		},
+		{
+			"path" : "pages/addresslist/addresslist",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

order-app/src/pages/address/address.vue

@@ -26,7 +26,7 @@
 					<view class="tips">提醒：每次下单会默认推荐该地址</view>
 				</view>
 				<view class="right">
-					<switch color="red" @change="setDefault" />
+					<switch :checked="address.status == '1'" color="red" @change="setDefault" />
 				</view>
 			</view>
 		</view>
@@ -41,7 +41,11 @@
 		ref
 	} from 'vue'
 	import {
-		addAddressApi
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		addAddressApi,
+		editAddressApi
 	} from '../../api/user.js'
 	const show = ref(false)
 	const finalAddress = ref('')
@@ -74,9 +78,63 @@
 	//提交
 	const addBtn = async () => {
 		console.log(address)
-		let res = await addAddressApi(address)
+		//表单验证
+		if (!address.userName) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写姓名'
+			})
+			return;
+		}
+		if (!address.phone) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写电话'
+			})
+			return;
+		}
+		if (!address.area) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写区域'
+			})
+			return;
+		}
+		if (!address.address) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写详细地址'
+			})
+			return;
+		}
+		let res = null;
+		if (type.value == '0') {
+			res = await addAddressApi(address)
+		} else {
+			res = await editAddressApi(address)
+		}
 		console.log(res)
+		if (res && res.code == 200) {
+			//返回列表
+			uni.navigateBack()
+		}
 	}
+	//区分是新增 还是编辑
+	const type = ref('0')
+	onLoad((options) => {
+		console.log(options)
+		//编辑设置值
+		if (options.item) {
+			type.value = '1';
+			const item = JSON.parse(options.item)
+			address.addressId = item.addressId
+			address.phone = item.phone
+			address.userName = item.userName
+			address.area = item.area
+			address.address = item.address
+			address.status = item.status
+		}
+	})
 </script>
 
 <style lang="scss" scoped>

order-app/src/pages/addresslist/addresslist.vue

@@ -0,0 +1,136 @@
+<template>
+	<view>
+		<view class="item" v-for="(res, index) in siteList.list" :key="res.id">
+			<view class="top">
+				<view class="name">{{ res.userName }}</view>
+				<view class="phone">{{ res.phone }}</view>
+				<view class="tag">
+					<text v-if="res.status == '1'" style="background-color: #F3AF28;">默认</text>
+				</view>
+			</view>
+			<view class="bottom">
+				{{res.area}},{{res.address}}
+				<u-icon @click="update(res)" name="edit-pen" :size="40" color="#999999"></u-icon>
+			</view>
+		</view>
+		<view class="addSite" @tap="toAddSite">
+			<view class="add">
+				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app';
+	import {
+		reactive,
+		ref
+	} from 'vue'
+	import {
+		addressListApi
+	} from '../../api/user.js'
+	//地址数据
+	const siteList = reactive({
+		list: []
+	})
+	//查询地址数据
+	const getList = async () => {
+		let res = await addressListApi({
+			openid: uni.getStorageSync('openid')
+		})
+		console.log(res)
+		if (res && res.code == 200) {
+			siteList.list = res.data
+		}
+	}
+	//跳转新增地址
+	const toAddSite = () => {
+		uni.navigateTo({
+			url: '../address/address'
+		});
+	}
+	//修改
+	const update = (item) => {
+		console.log(item)
+		uni.navigateTo({
+			url: '../address/address'
+		});
+	}
+	onShow(() => {
+		getList()
+	})
+</script>
+
+<style lang="scss" scoped>
+	.item {
+		padding: 40rpx 20rpx;
+
+		.top {
+			display: flex;
+			font-weight: bold;
+			font-size: 34rpx;
+
+			.phone {
+				margin-left: 60rpx;
+			}
+
+			.tag {
+				display: flex;
+				font-weight: normal;
+				align-items: center;
+
+				text {
+					display: block;
+					width: 60rpx;
+					height: 34rpx;
+					line-height: 34rpx;
+					color: #ffffff;
+					font-size: 20rpx;
+					border-radius: 6rpx;
+					text-align: center;
+					margin-left: 30rpx;
+					background-color: rgb(49, 145, 253);
+				}
+
+				.red {
+					background-color: red
+				}
+			}
+		}
+
+		.bottom {
+			display: flex;
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			justify-content: space-between;
+			color: #999999;
+		}
+	}
+
+	.addSite {
+		display: flex;
+		justify-content: space-around;
+		width: 600rpx;
+		line-height: 100rpx;
+		position: absolute;
+		bottom: 30rpx;
+		left: 80rpx;
+		background-color: #F3AF28;
+		border-radius: 60rpx;
+		font-size: 30rpx;
+
+		.add {
+			display: flex;
+			align-items: center;
+			color: #ffffff;
+
+			.icon {
+				margin-right: 10rpx;
+			}
+		}
+	}
+</style>

order-app/src/pages/detail/detail.vue

@@ -88,16 +88,20 @@
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
-	import { carStore } from '../../store/car.js' 
+	import {
+		carStore
+	} from '../../store/car.js'
 	import {
 		orderStore
 	} from '../../store/order.js'
-	import {userLogin} from '../../api/user.js'
+	import {
+		userLogin
+	} from '../../api/user.js'
 	//获取store
 	const store = carStore()
 	const ostore = orderStore()
 	//购物车数量
-	const carCount = computed(()=>{
+	const carCount = computed(() => {
 		return store.carList.length
 	})
 	//菜品详情
@@ -153,11 +157,11 @@
 		swiperCurrent.value = index;
 	}
 	//加入购物车
-	const addCar = ()=>{
+	const addCar = () => {
 		store.addCar(carData.value)
 	}
 	//立即购买
-	const addBuy = ()=>{
+	const addBuy = () => {
 		//清空
 		ostore.orderList = []
 		ostore.addOrder(carData.value)
@@ -365,4 +369,4 @@
 	.page-box {
 		padding: 20rpx;
 	}
-</style>
+</style>