收货地址页面优化

pages/user/address/edit.vue

@@ -1,70 +1,34 @@
 <!-- 收货地址的新增/编辑 -->
 <template>
 	<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
-    <uni-forms
+		<uni-forms ref="addressFormRef" v-model="state.model" :rules="rules" validateTrigger="bind" labelWidth="160"
-      ref="addressFormRef"
+			labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
-      v-model="state.model"
-      :rules="rules"
-      validateTrigger="bind"
-      labelWidth="160"
-      labelAlign="left"
-      border
-      :labelStyle="{ fontWeight: 'bold' }"
-    >
 			<view class="bg-white form-box ss-p-x-30">
 				<uni-forms-item name="name" label="收货人" class="form-item">
-          <uni-easyinput
+					<uni-easyinput v-model="state.model.name" placeholder="请填写收货人姓名" :inputBorder="false"
-            v-model="state.model.name"
+						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
-            placeholder="请填写收货人姓名"
-            :inputBorder="false"
-            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
-          />
 				</uni-forms-item>
 
 				<uni-forms-item name="mobile" label="手机号" class="form-item">
-          <uni-easyinput
+					<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
-            v-model="state.model.mobile"
+						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
-            type="number"
-            placeholder="请输入手机号"
-            :inputBorder="false"
-            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
-          >
 					</uni-easyinput>
 				</uni-forms-item>
-        <uni-forms-item
+				<uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
-          name="areaName"
+					<uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
-          label="省市区"
-          @tap="state.showRegion = true"
-          class="form-item"
-        >
-          <uni-easyinput
-            v-model="state.model.areaName"
-            disabled
-            :inputBorder="false"
 						:styles="{ disableColor: '#fff', color: '#333' }"
 						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
-            placeholder="请选择省市区"
+						placeholder="请选择省市区">
-          >
 						<template v-slot:right>
 							<uni-icons type="right" />
 						</template>
 					</uni-easyinput>
 				</uni-forms-item>
-        <uni-forms-item
+				<uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
-          name="detailAddress"
+					:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
-          label="详细地址"
+					<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress"
-          :formItemStyle="{ alignItems: 'flex-start' }"
-          :labelStyle="{ lineHeight: '5em' }"
-          class="textarea-item"
-        >
-          <uni-easyinput
-            :inputBorder="false"
-            type="textarea"
-            v-model="state.model.detailAddress"
 						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
-            placeholder="请输入详细地址"
+						placeholder="请输入详细地址" clearable />
-            clearable
-          />
 				</uni-forms-item>
 			</view>
 			<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
@@ -84,20 +48,24 @@
 		</su-fixed>
 
 		<!-- 省市区弹窗 -->
-    <su-region-picker
+		<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
-      :show="state.showRegion"
-      @cancel="state.showRegion = false"
-      @confirm="onRegionConfirm"
-    />
 	</s-layout>
 </template>
 
 <script setup>
-  import { ref, reactive, unref } from 'vue';
+	import {
+		ref,
+		reactive,
+		unref
+	} from 'vue';
 	import sheep from '@/sheep';
-  import { onLoad } from '@dcloudio/uni-app';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
 	import _ from 'lodash';
-  import { mobile } from '@/sheep/validate/form';
+	import {
+		mobile
+	} from '@/sheep/validate/form';
 	import AreaApi from '@/sheep/api/system/area';
 	import AddressApi from '@/sheep/api/member/address';
 
@@ -105,40 +73,31 @@
 	const state = reactive({
 		showRegion: false,
 		model: {
-      name: '',
+
-      mobile: '',
-      detailAddress: '',
 			defaultStatus: false,
-      areaName: '',
 		},
 		rules: {},
 	});
 
 	const rules = {
 		name: {
-      rules: [
+			rules: [{
-        {
 				required: true,
 				errorMessage: '请输入收货人姓名',
-        },
+			}, ],
-      ],
 		},
 		mobile,
 		detailAddress: {
-      rules: [
+			rules: [{
-        {
 				required: true,
 				errorMessage: '请输入详细地址',
-        },
+			}, ],
-      ],
 		},
 		areaName: {
-      rules: [
+			rules: [{
-        {
 				required: true,
 				errorMessage: '请选择您的位置',
-        },
+			}, ],
-      ],
 		},
 	};
 
@@ -176,10 +135,12 @@
 		const formData = {
 			...state.model,
 		};
-    const { code } =
+		const {
-      state.model.id > 0
+			code
-        ? await AddressApi.updateAddress(formData)
+		} =
-        : await AddressApi.createAddress(formData);
+		state.model.id > 0 ?
+			await AddressApi.updateAddress(formData) :
+			await AddressApi.createAddress(formData);
 		if (code === 0) {
 			sheep.$router.back();
 		}
@@ -194,7 +155,9 @@
 				if (!res.confirm) {
 					return;
 				}
-        const { code } = await AddressApi.deleteAddress(state.model.id);
+				const {
+					code
+				} = await AddressApi.deleteAddress(state.model.id);
 				if (code === 0) {
 					sheep.$router.back();
 				}
@@ -207,7 +170,10 @@
 		getAreaData();
 		// 情况一：基于 id 获得收件地址
 		if (options.id) {
-      let { code, data } = await AddressApi.getAddress(options.id);
+			let {
+				code,
+				data
+			} = await AddressApi.getAddress(options.id);
 			if (code !== 0) {
 				return;
 			}

pages/user/address/list.vue

@@ -2,47 +2,41 @@
 <template>
 	<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
 		<view v-if="state.list.length">
-      <s-address-item
+			<s-address-item hasBorderBottom v-for="item in state.list" :key="item.id" :item="item" @tap="onSelect(item)"
-        hasBorderBottom
+				@cc="getList" />
-        v-for="item in state.list"
-        :key="item.id"
-        :item="item"
-        @tap="onSelect(item)"
-      />
 		</view>
 
 		<su-fixed bottom placeholder>
 			<view class="footer-box ss-flex ss-row-between ss-p-20">
 				<!-- 微信小程序和微信H5 -->
-        <button
+				<button v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
-          v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
 					@tap="importWechatAddress"
-          class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center"
+					class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center">
-        >
 					<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
 					导入微信地址
 				</button>
-        <button
+				<button class="add-btn ss-reset-button ui-Shadow-Main"
-          class="add-btn ss-reset-button ui-Shadow-Main"
+					@tap="sheep.$router.go('/pages/user/address/edit')">
-          @tap="sheep.$router.go('/pages/user/address/edit')"
-        >
 					新增收货地址
 				</button>
 			</view>
 		</su-fixed>
-    <s-empty
+		<s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
-      v-if="state.list.length === 0 && !state.loading"
-      text="暂无收货地址"
-      icon="/static/data-empty.png"
-    />
 	</s-layout>
 </template>
 
 <script setup>
-  import { reactive, onBeforeMount } from 'vue';
+	import {
-  import { onShow } from '@dcloudio/uni-app';
+		reactive,
+		onBeforeMount
+	} from 'vue';
+	import {
+		onShow
+	} from '@dcloudio/uni-app';
 	import sheep from '@/sheep';
-  import { isEmpty } from 'lodash';
+	import {
+		isEmpty
+	} from 'lodash';
 	import AreaApi from '@/sheep/api/system/area';
 	import AddressApi from '@/sheep/api/member/address';
 
@@ -110,6 +104,11 @@
 		// #endif
 	}
 
+	function getList(val) {
+		AddressApi.getAddressList().then((res) => {
+			state.list = res.data
+		})
+	}
 	onShow(async () => {
 		state.list = (await AddressApi.getAddressList()).data;
 		state.loading = false;

sheep/components/s-address-item/s-address-item.vue

@@ -1,11 +1,12 @@
 <!-- 地址卡片 -->
 <template>
-  <view
+	<view class="address-item ss-flex ss-row-between ss-col-center"
-    class="address-item ss-flex ss-row-between ss-col-center"
+		:class="[{ 'border-bottom': props.hasBorderBottom }]">
-    :class="[{ 'border-bottom': props.hasBorderBottom }]"
+		<image class="imgs"
-  >
+			src="https://zysc.fjptzykj.com:3000/shangcheng/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png">
+		</image>
 		<view class="item-left" v-if="!isEmpty(props.item)">
-      <view class="area-text ss-flex ss-col-center">
+			<!-- <view class="area-text ss-flex ss-col-center">
 				<uni-tag
 				  class="ss-m-r-10"
 				  size="small"
@@ -14,22 +15,45 @@
 				  text="默认"
 				/>
 				{{ props.item.areaName }}
-      </view>
+			  </view> -->
 			<view class="address-text">
-        {{ props.item.detailAddress }}
+				收货人：{{ props.item.name }} {{ props.item.mobile }}
 			</view>
-      <view class="person-text"> {{ props.item.name }} {{ props.item.mobile }} </view>
+			<view class="person-text">收货地址： {{ props.item.areaName }} {{ props.item.detailAddress }}</view>
 		</view>
 		<view v-else>
 			<view class="address-text ss-m-b-10">请选择收货地址</view>
 		</view>
 		<slot>
-      <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
+			<!-- <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
 				<view class="edit-icon ss-flex ss-row-center ss-col-center">
-          <image :src="sheep.$url.static('/static/img/shop/user/address/edit.png')" />
+					<image
+						:src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/f6c484a459e843baeb729603ae221b6d3ab384b56c2d891ae53b0ee4205477a9.png')" />
 				</view>
-      </button>
+			</button> -->
 		</slot>
+		<view class="bottom">
+			<view class="left" @click.stop="auto(props.item)">
+				<view class="radio">
+					<image class="img"
+						v-if="props.item.defaultStatus"
+						src="https://zysc.fjptzykj.com:3000/shangcheng/1d07aff7a6a0a3a5f09ed68407bd4bb9c589b62dba04b23d61b7027453b2894e.png">
+					</image>
+				</view>设为默认
+			</view>
+			<view class='right'>
+				<view class="edit-icon" @click.stop="onEdit">
+					<image class="img"
+						src="https://zysc.fjptzykj.com:3000/shangcheng/82a9c12d309bf1a7f11e581ac31230e3847f2aaf2f31591b4d3aed7ee506ff54.png" />
+					编辑
+				</view>
+				<view class="edit-icon" @click.stop="onDelete(props.item.id)">
+					<image class="img"
+						src="https://zysc.fjptzykj.com:3000/shangcheng/efbc57f84ba2740666f17f3cfcd1b607af5e3c520eca27814e5cda11c9715494.png" />
+					删除
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -45,7 +69,11 @@
 	 * @slot 								 - 默认插槽
 	 */
 	import sheep from '@/sheep';
-  import { isEmpty } from 'lodash';
+	import AddressApi from '@/sheep/api/member/address';
+	import {
+		isEmpty
+	} from 'lodash';
+	const emits = defineEmits(['cc']);
 	const props = defineProps({
 		item: {
 			type: Object,
@@ -57,19 +85,104 @@
 		},
 	});
 
+	// 删除收货地址
+	const onDelete = (id) => {
+	  uni.showModal({
+	    title: '提示',
+	    content: '确认删除此收货地址吗？',
+	    success: async function (res) {
+	      if (!res.confirm) {
+	        return;
+	      }
+	      const { code } = await AddressApi.deleteAddress(id);
+	      if (code === 0) {
+			emits("cc", "2222")
+	      }
+	    },
+	  });
+	};
+
 	const onEdit = () => {
 		sheep.$router.go('/pages/user/address/edit', {
 			id: props.item.id,
 		});
 	};
+	
+	function auto(item){
+		item.defaultStatus = !item.defaultStatus;
+		AddressApi.updateAddress(item).then((res)=>{
+			emits("cc", "2222")
+		})
+	}
 </script>
 
 <style lang="scss" scoped>
 	.address-item {
+		background: white;
 		padding: 24rpx 30rpx;
+		position: relative;
+		flex-wrap: wrap;
+		padding-bottom: 0;
+
+		.bottom {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			margin: 10px 0;
+
+			.img {
+				width: 20px;
+				height: 20px;
+				margin-right: 10px;
+			}
+
+			.left {
+				display: flex;
+				align-items: center;
+				font-size: 15px;
+				font-weight: 500;
+				.radio {
+					border: 1px solid #dddddd;
+					border-radius: 50%;
+					width: 20px;
+					height: 20px;
+					margin-right: 10px;
+				}
+			}
+
+			.right {
+				display: flex;
+				align-items: center;
+
+				.edit-icon {
+					display: flex;
+					align-items: center;
+					font-size: 15px;
+					font-weight: 500;
+					.img {
+						margin-right: 5px;
+					}
+
+					&:first-child {
+						margin-right: 20px;
+					}
+				}
+			}
+		}
+
+		.imgs {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 2px;
+		}
 
 		.item-left {
-      width: 600rpx;
+			width: 100%;
+			border-bottom: 1px solid #fafafa;
+			padding: 6px 0;
+			padding-bottom: 13px;
 		}
 
 		.area-text {
@@ -79,15 +192,16 @@
 		}
 
 		.address-text {
-      font-size: 32rpx;
+			font-size: 15px;
-      font-weight: 500;
+			font-weight: 600;
 			color: #333333;
 			line-height: 48rpx;
+			margin-bottom: 8px;
 		}
 
 		.person-text {
-      font-size: 28rpx;
+			font-size: 15px;
-      font-weight: 400;
+			font-weight: 500;
 			color: $dark-9;
 		}
 	}
@@ -103,6 +217,7 @@
 			height: 24rpx;
 		}
 	}
+
 	image {
 		width: 100%;
 		height: 100%;