个人资料、修改密码、地址管理、我的收货地址页面

components/x-form.vue

@@ -46,6 +46,13 @@
 						<u-line></u-line>
 					</view>
 				</u-form-item>
+				<u-form-item labelPosition="left" :label="item.label" :prop="item.field"
+					v-else-if="item.type == 'default' && !item.visible">
+					<view class="card_form_item" style="display: flex;justify-content: flex-end">
+						<u-switch v-model="model[`${item.field}`]" inactiveColor="rgb(230, 230, 230)"
+							size="20"></u-switch>
+					</view>
+				</u-form-item>
 			</view>
 		</u--form>
 		<u-picker :show="show" ref="uPicker" :columns="addressColumns" :defaultIndex="areaDetault" keyName="label"
@@ -53,7 +60,7 @@
 		<view style="width: 100%;height: 170rpx;"></view>
 		<view class="check_btn">
 			<view class="btn_submit">
-				<u-button type="primary" text="提交" @click="clientele"></u-button>
+				<u-button type="primary" :text="btnTitle" @click="clientele"></u-button>
 			</view>
 		</view>
 	</view>
@@ -91,6 +98,12 @@
 					return null
 				}
 			},
+			btnTitle: {
+				type: String,
+				default () {
+					return '提交'
+				}
+			}
 		},
 		data() {
 			return {
@@ -240,6 +253,7 @@
 	}
 
 	.check_btn {
+		z-index: 2024;
 		position: fixed;
 		display: flex;
 		align-items: center;

pages.json

@@ -79,6 +79,18 @@
 			}
 		},
 		{
+			"path": "pages/mine/address",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/mine/addAddress",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
 			"path": "pages/order/orderDetails",
 			"style": {
 				"navigationStyle": "custom" // 隐藏系统导航栏

pages/mine/addAddress.vue

@@ -0,0 +1,100 @@
+<template>
+	<view>
+		<u-navbar title="我的收货地址" :rightText="deleteState ? '删除' : ''" autoBack placeholder
+			@rightClick="rightClick"></u-navbar>
+		<view class="card_form">
+			<x-form ref="personage" :list="list" :model="model" :rules="rules" btnTitle="保存地址" @confirm="confirm"
+				@clientele="clientele"></x-form>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				deleteState: false,
+				list: [{
+					field: 'name',
+					label: '姓名',
+					placeholder: '请输入姓名',
+					type: 'input',
+					required: true,
+				}, {
+					field: 'principalPhone',
+					label: '手机号码',
+					placeholder: '请输入手机号码',
+					type: 'input',
+					required: true,
+				}, {
+					field: 'region',
+					label: '所在城市/地区',
+					placeholder: '请选择所在城市/地区',
+					type: 'cascader',
+					required: true,
+				}, {
+					field: 'address',
+					label: '详细地址',
+					placeholder: '请输入详细地址',
+					type: 'input',
+					required: true,
+				}, {
+					field: 'default',
+					label: '设置默认地址',
+					type: 'default',
+				}],
+				model: {
+					name: '',
+					principalPhone: '',
+					type: '',
+					region: '',
+					address: '',
+					default: false,
+				},
+				rules: {
+					'name': {
+						type: 'string',
+						required: true,
+						message: '请输入姓名',
+						trigger: ['blur', 'change']
+					},
+					'principalPhone': {
+						type: 'string',
+						required: true,
+						message: '请输入手机号码',
+						trigger: ['blur', 'change']
+					},
+					'type': {
+						type: 'number',
+						required: true,
+						message: '请选择客户类型',
+						trigger: ['blur', 'change']
+					},
+					'region': {
+						type: 'string',
+						required: true,
+						message: '请选择所在城市/地区',
+						trigger: ['blur', 'change']
+					},
+					'address': {
+						type: 'string',
+						required: true,
+						message: '请输入详细地址',
+						trigger: ['blur', 'change']
+					},
+				},
+			}
+		},
+		onLoad(value) {
+			if (value.revamp == 'true') {
+				this.deleteState = true
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.card_form {
+		margin: 10rpx 40rpx;
+	}
+</style>

pages/mine/address.vue

@@ -0,0 +1,107 @@
+<template>
+	<view>
+		<u-navbar title="地址管理" rightText="新增地址" autoBack placeholder @rightClick="rightClick"></u-navbar>
+		<view>
+			<view class="card_address" v-for="(item,index) in list" :key="index">
+				<view class="center_item">
+					<view class="title_item">{{item.title}}</view>
+					<view class="phone_title">
+						<view class="title_item">{{hidePhone(item.phone)}}</view>
+						<view class="tag_phone" v-if="item.flag">默认</view>
+					</view>
+				</view>
+				<view class="center_item address_item">
+					<view class="title_address">{{item.address}}{{item.detailed}}</view>
+					<view @click="goAmend"><u-icon name="edit-pen" size="30"></u-icon></view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					title: 'gadga',
+					phone: '17673255533',
+					address: '贵州省贵阳市观山湖区',
+					detailed: '金融城c座',
+					flag: true,
+				}, {
+					title: '熊',
+					phone: '17673255533',
+					address: '贵州省贵阳市观山湖区',
+					detailed: '金融城c座',
+				}, ]
+			}
+		},
+		methods: {
+			hidePhone(phoneNumber) {
+				function hidePhoneNumber(phoneNumber) {
+					return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(-4);
+				}
+				const hiddenPhoneNumber = hidePhoneNumber(phoneNumber);
+				return hiddenPhoneNumber
+			},
+			// 新增地址
+			rightClick() {
+				uni.navigateTo({
+					url: '/pages/mine/addAddress'
+				});
+			},
+			// 修改地址
+			goAmend() {
+				uni.navigateTo({
+					url: '/pages/mine/addAddress?revamp=' + true
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.card_address {
+		margin: 30rpx 20rpx 20rpx 20rpx;
+		padding: 10rpx;
+		border-bottom: 1rpx solid #e7e6e4;
+	}
+
+	.center_item {
+		display: flex;
+		align-items: center;
+	}
+
+	.title_item {
+		font-size: 26rpx;
+		color: #606266;
+	}
+
+	.phone_title {
+		position: relative;
+		margin-left: 30rpx;
+	}
+
+	.tag_phone {
+		position: absolute;
+		right: -53rpx;
+		top: -14rpx;
+		padding: 2rpx 4rpx;
+		border: 1rpx solid #2b85e4;
+		font-size: 20rpx;
+		color: #2b85e4;
+	}
+
+	.title_address {
+		font-size: 30rpx;
+		color: #303133;
+		font-weight: 600;
+	}
+
+	.address_item {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 6rpx;
+	}
+</style>

pages/mine/index.vue

@@ -20,7 +20,7 @@
 			<view class="option_title">修改密码</view>
 			<u-icon name="arrow-right" size="20"></u-icon>
 		</view>
-		<view class="space_between card_mine_option" @click="goPersonal">
+		<view class="space_between card_mine_option" @click="goAddress">
 			<view class="option_title">地址管理</view>
 			<u-icon name="arrow-right" size="20"></u-icon>
 		</view>
@@ -99,6 +99,16 @@
 					uni.$u.toast('请先登录')
 				}
 			},
+			// 地址管理
+			goAddress() {
+				if (this.token) {
+					uni.navigateTo({
+						url: '/pages/mine/address'
+					});
+				} else {
+					uni.$u.toast('请先登录')
+				}
+			},
 			// 系统设置
 			goSet() {
 				if (this.token) {

pages/mine/password.vue

@@ -59,6 +59,6 @@
 	}
 
 	.card_btn {
-		margin: 20rpx;
+		margin: 40rpx;
 	}
 </style>

pages/mine/personal.vue

@@ -18,74 +18,60 @@
 					label: '姓名',
 					placeholder: '请输入姓名',
 					type: 'input',
-					disabled: true,
 					required: true,
 				}, {
-					field: 'idCard',
-					label: '身份证号',
-					placeholder: '请输入身份证号',
+					field: 'principalPhone',
+					label: '手机号码',
+					placeholder: '请输入手机号码',
 					type: 'input',
-					disabled: true,
 					required: true,
 				}, {
-					field: 'phone',
-					label: '电话',
-					placeholder: '请输入电话',
-					type: 'input',
+					field: 'type',
+					label: '类型',
+					placeholder: '请选择类型',
+					type: 'radio',
 					required: true,
+					options: [{
+							label: '商户',
+							value: 0,
+						},
+						{
+							label: '私人',
+							value: 1,
+						}
+					],
 				}, {
-					field: 'description',
-					label: '备注',
-					placeholder: '请输入备注',
-					type: 'textarea',
-				}, {
-					field: 'line',
-					label: '《燃气从业资格证》信息',
-					type: 'line',
-				}, {
-					field: 'lines',
-					label: '《道路运输从业人员从业资格证》信息',
-					type: 'line',
+					field: 'region',
+					label: '所在城市/地区',
+					placeholder: '请选择所在城市/地区',
+					type: 'cascader',
+					required: true,
 				}, {
-					field: 'certificateNo',
-					label: '证书编号',
-					placeholder: '请输入证书编号',
+					field: 'address',
+					label: '地址',
+					placeholder: '请输入详细地址',
 					type: 'input',
 					required: true,
 				}, {
-					field: 'issueAuthority',
-					label: '发证机关',
-					placeholder: '请输入发证机关',
-					type: 'input',
+					field: 'addressImg',
+					label: '现场图片',
+					placeholder: '请上传现场图片',
+					type: 'upload',
 					required: true,
 				}, {
-					field: 'remarks',
+					field: 'remark',
 					label: '备注',
 					placeholder: '请输入备注',
 					type: 'textarea',
-				}, {
-					field: 'imgUrl',
-					label: '燃气从业资格证',
-					placeholder: '请上传燃气从业资格证',
-					type: 'upload',
-					required: true,
-				}, {
-					field: 'imgUrls',
-					label: '道路运输从业人员从业资格证',
-					placeholder: '请上传道路运输从业人员从业资格证',
-					type: 'upload',
-					required: true,
 				}],
 				model: {
 					name: '',
-					idCard: '',
-					phone: '',
-					description: '',
-					certificateNo: '',
-					issueAuthority: '',
-					remarks: '',
-					imgUrl: '',
-					imgUrls: '',
+					principalPhone: '',
+					type: '',
+					region: '',
+					address: '',
+					addressImg: '',
+					remark: '',
 				},
 				rules: {
 					'name': {
@@ -94,34 +80,33 @@
 						message: '请输入姓名',
 						trigger: ['blur', 'change']
 					},
-					'idCard': {
+					'principalPhone': {
 						type: 'string',
 						required: true,
-						message: '请输入身份证号码',
+						message: '请输入手机号码',
 						trigger: ['blur', 'change']
 					},
-					'phone': {
-						type: 'string',
+					'type': {
+						type: 'number',
 						required: true,
-						message: '请输入电话号码',
+						message: '请选择客户类型',
 						trigger: ['blur', 'change']
 					},
-					'certificateNo': {
+					'region': {
 						type: 'string',
 						required: true,
-						message: '请输入证书编号',
+						message: '请选择所在城市/地区',
 						trigger: ['blur', 'change']
 					},
-					'issueAuthority': {
+					'address': {
 						type: 'string',
 						required: true,
-						message: '请输入发证机关',
+						message: '请输入详细地址',
 						trigger: ['blur', 'change']
 					},
-					'imgUrl': {
-						type: 'string',
+					'addressImg': {
 						required: true,
-						message: '请上传燃气从业资格证',
+						message: '请上传现场图片',
 						trigger: ['blur', 'change']
 					},
 				},
@@ -140,50 +125,10 @@
 						this.userInfo = param
 						this.$nextTick(() => {
 							this.userType = param.provUser.userType
-							this.list.forEach(value => {
-								if (this.userType == 3) {
-									if (value.field == 'imgUrls' || value.field == 'lines') {
-										value.visible = true
-									}
-								} else if (this.userType == 4) {
-									if (value.field == 'imgUrl' || value.field == 'line') {
-										value.visible = true
-									}
-								} else {
-									if (value.field == 'imgUrl' || value.field == 'imgUrls' ||
-										value.field == 'line' || value.field == 'lines' || value
-										.field == 'certificateNo' ||
-										value.field == 'issueAuthority' || value.field ==
-										'issueAuthority' || value.field == 'remarks') {
-										value.visible = true
-									}
-								}
-							})
 							this.model.name = param.provUser.name
 							this.model.idCard = param.provUser.idCard
 							this.model.phone = param.provUser.phone
 							this.model.description = param.provUser.description
-							if (this.userType == 3) {
-								this.model.certificateNo = param.provStoreUserBindCertificate.certificateNo
-								this.model.issueAuthority = param.provStoreUserBindCertificate
-									.issueAuthority
-								this.model.imgUrl = param.provStoreUserBindCertificate.imgUrl
-								if (param.provStoreUserBindCertificate.remarks) {
-									this.model.remarks = param.provStoreUserBindCertificate.remarks
-								} else {
-									this.model.remarks = ''
-								}
-							} else if (this.userType == 4) {
-								this.model.certificateNo = param.provTruckUserBindCertificate.certificateNo
-								this.model.issueAuthority = param.provTruckUserBindCertificate
-									.issueAuthority
-								this.model.imgUrls = param.provTruckUserBindCertificate.imgUrl
-								if (param.provTruckUserBindCertificate.remarks) {
-									this.model.remarks = param.provTruckUserBindCertificate.remarks
-								} else {
-									this.model.remarks = ''
-								}
-							}
 							let arrImg = []
 							let arrImg1 = []
 							if (param.provStoreUserBindCertificate.imgUrl && this.userType == 3) {