agent-test/pages/complete-info/complete-info.vue

<template>
	<view class="complete">
		<view v-if="showEdit == 0">
			<view class="com_item">
				<text class="label">国家/地区</text>
				<view class="phone_area">（{{areaCode}}）{{areaName}}</view>
			</view>
			<view class="com_item">
				<text class="label">客户手机号</text>
				<input type="number" class="phone" placeholder-class="place" v-model="userInfo.phone" disabled />
			</view>
			<view class="com_item">
				<view class="label">客户姓名</view>
				<view class="flexB inp">
					<input placeholder="请输入客户姓名" placeholder-class="place" v-model="userInfo.name" />
					<view class="change" v-if="userInfo.name" @click="edit(1)">
						<text>修改</text>
						<text class="iconfont iconiconfontjiantou2"></text>
					</view>
				</view>
			</view>
			<view class="com_item">
				<view class="label">客户昵称</view>
				<view class="flexB inp">
					<input type="text" placeholder="请输入客户昵称" placeholder-class="place" v-model="userInfo.nickname" />
					<view class="change" v-if="userInfo.nickname" @click="edit(2)">
						<text>修改</text>
						<text class="iconfont iconiconfontjiantou2"></text>
					</view>
				</view>
			</view>
			<view class="com_item">
				<view class="label">客户性别</view>
				<picker @change="bindPickerChange" :range="sexList" :range-key="'name'">
					<view class="picker flexB">
						<text
							:style="{ color: userInfo.sex ? '#333' : '#C7C7C7' }">{{ userInfo.sex ? getSex(userInfo.sex) : '请点击选择客户性别' }}</text>
						<text class="iconfont iconzhcc_xiangxiajiantou"></text>
					</view>
				</picker>
			</view>

			<view class="com_item">
				<view class="label">客户地址</view>
				<view class="flexB ads_box" @click="addressList()">
					<text style="font-size:32rpx;color:#c7c7c7;" v-if="!address && !defaultAds">添加地址信息</text>
					<view class="ads_info" v-else>
						<view class="shop_info">
							<text>{{ address ? address.name : defaultAds.name }}</text>
							<text>{{ address ? address.phone : defaultAds.phone }}</text>
						</view>
						<view class="C_B">
							{{ address ? address.province : defaultAds.province }}
							{{ address ? address.city : defaultAds.city }}
							{{ address ? address.area : defaultAds.area }}
							{{ address ? address.address : defaultAds.address }}
						</view>
					</view>
					<view class="change">
						<text class="iconfont iconiconfontjiantou2" style="color:#c7c7c7"></text>
					</view>
				</view>
			</view>
			<view class="com_item flexT">
				<view class="label">备注</view>
				<view class="text_box">
					<textarea placeholder="请输入备注信息" v-model="userInfo.remark" placeholder-class="place" />
				</view>

				<!-- 	<input  placeholder="请输入备注信息" placeholder-class="place" class="phone"
					v-model="userInfo.remark" /> -->
			</view>
			<view class="fixed_btn" @click="save">保存</view>
		</view>

		<view class="edit_name" v-if="showEdit == 1">
			<view class='flexB'>
				<view class="label">客户姓名</view>
				<view class="flexB inp"><input placeholder="请输入客户姓名" placeholder-class="place"
						v-model="userInfo.name" /></view>

			</view>
			<view class="sub_btn" @click="showEdit = 0">确定</view>
		</view>
		<view class="edit_name" v-if="showEdit == 2">

			<view class="flexB">
				<view class="label">客户昵称</view>
				<view class="flexB inp"><input placeholder="请输入客户姓名" placeholder-class="place"
						v-model="userInfo.nickname" /></view>
			</view>

			<view class="sub_btn" @click="showEdit = 0">确定</view>

		</view>
	</view>
</template>

<script>
	import {
		completeUser,
		getUser,
		getAds
	} from '../../apis/shop.js';
	import areaList from '@/common/util/phone-area.js'
	export default {
		data() {
			return {
				sexList: [{
					name: '男',
					val: 1
				}, {
					name: '女',
					val: 2
				}],
				index: '',
				userSex: '', //显示的用户性别
				user_id: '', //用户id
				userInfo: '',
				showEdit: 0,
				address: '', //地址信息
				defaultAds: '', //获取的默认地址
				areaCode: '+86',
				areaName: '中国大陆', // 手机号地区名称
				codeList: areaList, //手机号区域选择
			};
		},
		onLoad(ops) {
			this.getUser(ops.user_id);
			this.user_id = ops.user_id;
			this.store = uni.getStorageSync('store');


		},
		onShow() {
			this.otherFun();
			//如果没有从下个页面带来的地址，获取默认地址
			if (!this.address) {
				this.getAds();
			}
		},
		filters: {},
		methods: {
			/*添加地址*/
			addressList() {
				uni.navigateTo({
					url: '../ads-list/ads-list?user_id=' + this.user_id
				});
			},
			//从下个页面获取的数据
			otherFun(object) {
				if (!!object) {
					this.address = object;
				}
			},
			//获取默认地址
			getAds() {
				getAds({
					id: this.user_id
				}).then(res => {
					if (res.code == 200) {
						this.store = res.data.store;
						this.defaultAds = res.data.address;
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						});
					}
				});
			},
			getSex(val) {
				if (!val) return false;
				if (val == 1) {
					return '男';
				} else {
					return '女';
				}
			},
			edit(type) {
				this.showEdit = type;
			},
			//保存用户信息
			save() {
				let params = this.userInfo;
				params.user_id = this.user_id;
				completeUser(params).then(res => {
					if (res.code == 200) {
						uni.showModal({
							content: '保存成功',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.reLaunch({
										url: '../user-manage/user-manage'
									});
								}
							}
						});
					} else {
						uni.showModal({
							content: res.data || '保存失败',
							showCancel: false
						});
					}
				});
			},
			//获取用户信息
			getUser(user_id) {
				getUser({
					user_id
				}).then(res => {
					if (res.code == 200) {
						const {
							name,
							nickname,
							phone,
							sex,
							remark,
							area_code
						} = res.data;
						this.userInfo = {
							name,
							nickname,
							phone,
							sex: sex ? sex : '',
							remark: remark ? remark : '',
						};
						this.areaCode = area_code ? area_code : '+86'
						if (this.areaCode) {
							let index = this.areaCode.indexOf('+')
							let code = this.areaCode.substring(index + 1)
							this.codeList[0].list.map(i => {
								if (i.code === Number(code)) {
									this.areaName = i.name
								}
							})
						}
					} else {
						uni.showModal({
							content: res.data || '获取用户信息失败',
							showCancel: false
						});
					}
				});
			},
			//选择性别
			bindPickerChange(e) {
				let idx = e.target.value;
				this.userSex = this.sexList[idx].name;
				this.userInfo.sex = idx + 1;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.co_address {
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #f9f9fb;
		border-radius: 24rpx;
		margin-bottom: 30rpx;

		.icondizhi1 {
			color: $base-color;
			font-size: 50rpx;
			vertical-align: middle;
		}

		.gray {
			margin-left: 20rpx;
		}

		.iconiconfontjiantou2 {
			color: #999;
		}

		.ads_info {
			margin: 0 15rpx;

			.shop_info {
				font-size: 32rpx;
				font-weight: bold;

				text:last-child {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}

	.complete {
		width: 100%;
		min-height: 100%;
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 150rpx;

		.com_item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.phone_area {
				background: #f9f9fb;
				height: 92rpx;
				line-height: 92rpx;
				width: 75%;
			}

			.text_box {
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				background: #f9f9fb;
				width: 75%;
				border-radius: 8rpx;
				font-size: 30rpx;
			}


			.label {
				font-size: 32rpx;
				font-weight: bold;
				margin: 20rpx 0;
			}

			input,
			.inp,
			.picker {
				background: #f9f9fb;
				height: 92rpx;
				line-height: 92rpx;
				box-sizing: border-box;
			}

			.inp,
			.phone {
				width: 75%;
				padding: 0 30rpx;
				box-sizing: border-box;
			}

			.ads_box {
				width: 75%;
				box-sizing: border-box;
				background: #f9f9fb;
				padding: 24rpx 30rpx;

				text,
				view {
					font-size: 30rpx;
				}

				.shop_info {
					margin-bottom: 10rpx;
				}
			}

			picker {
				width: 75%;
			}

			.picker {
				font-size: 32rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.iconfont {
					font-size: 40rpx;
					color: #c7c7c7;
				}
			}

			.phone {
				background: #f9f9fb;
				border-radius: 8rpx;
			}

			.place {
				color: #c7c7c7;
				font-size: 30rpx;
			}

			.inp {
				.change {
					text {
						font-size: 30rpx;
						color: #c7c7c7;
					}
				}

				input {
					width: 70%;
					color: #333;
					height: 100%;
					font-size: 30rpx;
				}
			}
		}

		.edit_name {
			margin-top: 30rpx;

			.label {
				font-size: 32rpx;
				font-weight: bold;
			}

			.inp {
				width: 75%;
				padding: 0 15px;
				box-sizing: border-box;
				background: #f9f9fb;
				border-radius: 4px;
				height: 98rpx;
				line-height: 98rpx;
			}

			.sub_btn {
				margin-top: 60rpx;
			}
		}
	}
</style>