store/pages/shop-info/shop-info.vue

<template>
	<view class="shop_info">
		<view class="base_info" v-if="statusShow == 0">
			<view class="title">基本信息</view>
			<view class="info">
				<view class="flexB">
					<view class="label">店铺头像：</view>
					<view class="flexS">
						<image :src="info.img"></image>
					</view>
				</view>
				<view class="flexB">
					<view class="label">店铺名称：</view>
					<view class="inp flexS" style="font-size:32rpx;">{{ info.name | getName(10) }}的店铺</view>
				</view>
				<view class="flexB">
					<view class="label">商户电话：</view>
					<view class="flexB inp"><input type="text" disabled v-model="info.phone" /></view>
				</view>
				<view class="flexB">
					<view class="label">店铺地址：</view>
					<view class="flexB inp">
						<textarea disabled v-model="location" auto-height />
						<view>
							<text @click="edit(3)">{{ location ? '修改' : '添加' }}</text>
							<text class="iconfont iconiconfontjiantou2"></text>
						</view>
					</view>
				</view>
				<w-picker ref="Selector" mode="region" themeColor="#F76454" @confirm="onConfirm" />
				<view class="flexB">
					<view class="label">详细地址：</view>
					<view class="flexB inp"><input type="text" disabled v-model="adsParams.address" /></view>
				</view>
				<view class="flexT">
					<view class="label">微信二维码：</view>
					<view>
						<image :src="imgUrl" class="wx_img" @click="uploadCode"></image>
						<view v-if="info.qr_code" class="code_hint">点击二维码可重新上传</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 修改店铺名称 -->
		<view class="edit_name" v-if="statusShow == 1">
			<view class="name">
				<view class="hint">名称建议在10字以内，超出在店铺页可能展示不全*</view>
				<input type="text" placeholder="在此修改店铺名称" placeholder-style="font-size:28rpx;color:#999;" v-model="name"
					maxlength="10" />
				<view class="notice">
					<view>好的店铺名称具备以下特点：</view>
					<view>1.简单易懂，朗朗上口，避免雷同，避免生僻字，尽量体现主营商品。</view>
					<view>2.凸显店铺特色，体现店长风格。</view>
					<view>3.不适用国家法律法规禁止的违规词、敏感词不出现。</view>
					<view>4.不出现“淘宝”“微信”“代理”等会屏蔽的词汇。</view>
					<view>5.建议12字以内，超出在店铺页面可能展示不全。</view>
				</view>
				<view class="sub_btn" @click="finish">完成</view>
			</view>
		</view>
		<!-- 修改店铺手机号 -->
		<view class="flexCC edit_phone" v-if="statusShow == 2">
			<view class="old" v-if="step == 0">
				<view class="hint">为保证账号安全，须短信验证{{ phone }}</view>
				<view class="inp flexB">
					<input type="text" placeholder="请输入验证码" maxlength="6" placeholder-style="font-size:28rpx;color:#999"
						v-model="oldSms" />
					<text @click="getOld">{{ oldDown ? `重新获取(${oldDown}s)` : '获取验证码' }}</text>
				</view>
				<view class="sub_btn" @click="next">下一步</view>
			</view>
			<view class="new" v-else>
				<input type="text" placeholder="请输入手机号" maxlength="11" placeholderk-style="font-size:28rpx;color:#999"
					class="phone_inp" v-model="newPhone" :disabled="isEdit" />
				<view class="inp flexB">
					<input type="text" placeholder="请输入验证码" maxlength="6" placeholder-style="font-size:28rpx;color:#999"
						v-model="newSms" />
					<text @click="getNew">{{ newDown ? `重新获取(${newDown}s)` : '获取验证码' }}</text>
				</view>
				<view class="sub_btn" @click="editPhone">完成</view>
			</view>
		</view>
		<!-- 修改店铺地址 -->
		<view class="edit_ads" v-if="statusShow == 3">
			<view>
				<view class="label">
					<text>店铺地址</text>
					<text>*</text>
				</view>
				<picker mode="region" @change="bindRegionChange" :value="location" :custom-item="customItem">
					<view class="flexB picker">
						<text style="font-size:32rpx;padding-left:15rpx;">{{location?location:'请点击选择店铺地址'}}</text>
						<text class="iconfont iconzhcc_xiangxiajiantou"></text>
					</view>
				</picker>
			</view>
			<w-picker ref="Selector" mode="region" themeColor="#F76454" @confirm="onConfirm" />
			<view>
				<view class="label">
					<text>店铺详细地址</text>
					<text>*</text>
				</view>
				<view><input type="text" placeholder="请输入详细地址" v-model="adsParams.address"
						placeholder-style="color:#999;" /></view>
			</view>
			<view @click="editAds" class="sub_btn">{{ location ? '确认修改' : '确认添加' }}</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreInfo,
		sendSms,
		checkPhone,
		editPhone,
		editName,
		editAds
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				info: '', //店铺信息
				statusShow: 0,
				step: 0, //修改手机步骤
				name: '', //店铺名称
				store_id: '', //店铺id
				phone: '', //手机号
				oldPhone: '', //旧手机号
				oldSms: '', //旧手机短信验证码
				oldDown: 0, //手机验证码倒计时
				newPhone: '', //新手机号
				newSms: '', //新手机短信验证码
				newDown: 0, //手机验证码倒计时，
				isSend: true, //是否发送
				timer: null,
				isEdit: false, //是否禁止输入手机号
				location: '', //店铺地址，
				adsParams: {
					province: '',
					city: '',
					area: '',
					address: ''
				},
				imgUrl: '/static/imgs/shop/upload_wx.png'
			};
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			//选择店铺地址
			bindRegionChange(e) {
				let ads = e.detail.value;
				this.location = `${ads[0]}-${ads[1]}-${ads[2]}`;
				this.adsParams.province = ads[0];
				this.adsParams.city = ads[1];
				this.adsParams.area = ads[2];
			},
			uploadCode() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						// const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
						// let type = res.tempFiles[0].type;
						// if (imgType.indexOf(type) === -1) {
						// 	uni.showModal({
						// 		content: '图片格式不正确',
						// 		showCancel: false
						// 	});
						// 	return false;
						// }
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: `${this.$config.redirect_uri}/api/store_goods/upload_wx_qr_code_img`,
							filePath: res.tempFilePaths[0],
							name: 'img',
							header: {
								Authorization: 'Bearer ' + uni.getStorageSync('token')
								// Authorization:
								// 'Bearer ' +
								// 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hcGkuYXBwLmppdXdlaXl1bi5jblwvYXBpXC9sb2dpblwvZ2V0X3VzZXJfb3BlbmlkIiwiaWF0IjoxNjE3MTA1MTI5LCJleHAiOjE2MTc5NjkxMjksIm5iZiI6MTYxNzEwNTEyOSwianRpIjoidElBRHBwakZMUXVkSmtpSiIsInN1YiI6NDk0MjgsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.g8YdgFXY_hzN308um5hWrKf7OPlo5Q9SVgwTjO_8Bdw'
							},
							success: upload => {
								let data = JSON.parse(upload.data);
								uni.hideLoading();
								if (data.code == 200) {
									this.imgUrl = data.data;
									uni.showToast({
										title: '修改成功'
									});
								} else {
									uni.showModal({
										content: data.data || '上传二维码失败，请重试',
										showCancel: false
									});
								}
							},
							fail: err => {
								console.log(33333)
								uni.hideLoading();
								uni.showModal({
									content: '上传二维码失败，请重试',
									showCancel: false
								});
							}
						});
					}
				});
			},
			//获取旧手机号验证码
			getOld() {
				let that = this;
				if (that.oldDown) {
					uni.showModal({
						content: '验证码已发送，请稍后重试',
						showCancel: false
					});
					return false;
				}
				if (!that.oldPhone || that.oldPhone.length != 11) {
					uni.showModal({
						content: '手机号格式不正确',
						showCancel: false
					});
					return false;
				}
				sendSms({
					phone: that.oldPhone,
					type: 'phone'
				}).then(res => {
					if (res.code == 200) {
						uni.showModal({
							content: '验证码发送成功',
							showCancel: false
						});
						this.oldDown = 60;
						this.timer = setInterval(() => {
							this.oldDown--;
							if (!this.oldDown) {
								this.oldDown = 0;
								clearInterval(this.timer);
							}
						}, 1000);
					} else {
						uni.showModal({
							content: res.data || '获取验证码失败',
							showCancel: false
						});
						return false;
					}
				});
			},
			//获取新手机号验证码
			getNew() {
				let that = this;
				if (that.newDown) {
					uni.showModal({
						content: '验证码已发送，请稍后重试',
						showCancel: false
					});
					return false;
				}
				if (!that.newPhone || that.newPhone.length != 11) {
					uni.showModal({
						content: '手机号格式不正确',
						showCancel: false
					});
					return false;
				}
				sendSms({
						phone: that.newPhone,
						type: 'phone'
					})
					.then(res => {
						if (res.code == 200) {
							this.isEdit = true; //禁止编辑手机号
							uni.showModal({
								content: '验证码发送成功',
								showCancel: false
							});
							this.newDown = 60;
							this.timer = setInterval(() => {
								this.newDown--;
								if (!this.newDown) {
									this.newDown = 0;
									clearInterval(this.timer);
								}
							}, 1000);
						} else {
							uni.showModal({
								content: res.data || '获取验证码失败',
								showCancel: false
							});
							return false;
						}
					})
					.finally(() => {
						this.isEdit = false;
					});
			},
			/*修改新手机号*/
			editPhone() {
				let that = this;
				if (!that.newPhone || that.newPhone.length != 11) {
					uni.showModal({
						content: '手机号格式不正确'
					});
					return false;
				}
				if (!that.newSms || that.newSms.length != 6) {
					uni.showModal({
						content: '验证码格式不正确'
					});
					return false;
				}
				if (!that.isSend) return false;
				that.isSend = false;
				editPhone({
						phone: this.newPhone,
						phone_code: this.newSms,
						store_id: this.store_id
					})
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功'
							});
							this.statusShow = 0;
							this.getInfo();
						} else {
							uni.showModal({
								content: res.data || '修改手机号失败',
								showCancel: false
							});
							if (res.data == '新手机号不能与旧手机号相同') {
								this.newDown = 0;
								this.newSms = '';
								this.isEdit = false;
								clearInterval(this.timer);
							}
						}
					})
					.catch(e => {})
					.finally(() => {
						that.isSend = true;
						this.isEdit = false;
					});
			},
			/*修改地址*/
			editAds() {
				if (!this.location) {
					uni.showModal({
						content: '请选择店铺地址',
						showCancel: false
					});
					return false;
				}
				if (!this.adsParams.address) {
					uni.showModal({
						content: '请填写店铺详细地址',
						showCancel: false
					});
					return false;
				}
				let params = this.adsParams;
				editAds(params).then(res => {
					if (res.code == 200) {
						this.statusShow = 0;
						this.getInfo();
						uni.showToast({
							title: '修改成功'
						});
					} else {
						uni.showModal({
							content: res.msg || '修改店铺地址失败',
							showCancel: false
						});
					}
				});
			},
			/*验证手机号下一步*/
			next() {
				let that = this;
				if (!that.oldSms || that.oldSms.length != 6) {
					uni.showModal({
						content: '验证码格式不正确',
						showCancel: false
					});
					return false;
				}
				if (!that.isSend) return false;
				that.isSend = false;
				checkPhone({
						phone: that.oldPhone,
						phone_code: that.oldSms
					})
					.then(res => {
						if (res.code == 200) {
							that.step = 1;
							uni.setNavigationBarTitle({
								title: '绑定新手机号'
							});
						} else {
							uni.showModal({
								content: res.data,
								showCancel: false
							});
						}
					})
					.catch(e => {})
					.finally(() => {
						that.isSend = true;
					});
			},
			//修改店铺名称
			finish() {
				if (!this.name) {
					uni.showModal({
						content: '店铺名称不能为空',
						showCancel: false
					});
					return false;
				}
				editName({
					name: this.name,
					store_id: this.info.id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功！',
							duration: 3000
						});
						this.statusShow = 0;
						this.getInfo();
					} else {
						uni.showModal({
							content: res.data || '修改失败',
							showCancel: false
						});
					}
				});
			},
			/*获取店铺信息*/
			getInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				getStoreInfo()
					.then(res => {
						if (res.code == 200) {
							this.info = res.data.store;
							const {
								province,
								city,
								area,
								address,
								qr_code
							} = res.data.store;
							this.imgUrl = qr_code;
							this.adsParams.province = province;
							this.adsParams.city = city;
							this.adsParams.area = area;
							this.adsParams.address = address ? address : '';
							if (province && city && area) {
								this.location = `${province}-${city}-${area}`;
							}
							this.phone = this.info.phone.substr(0, 3) + '****' + this.info.phone.substr(7);
							this.oldPhone = this.info.phone;
							this.$forceUpdate();
						} else {
							uni.showModal({
								content: res.data || '获取店铺信息失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			/*编辑名称或者手机号*/
			edit(type) {
				this.statusShow = type;
				this.name = this.info.name;
			},
			skipAuth(type) {
				let url = '';
				url = type == 0 ? '../real-name-auth/real-name-auth' : '../auth-center/auth-center';
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>
<style lang="scss">
	.shop_info {
		width: 100%;
		min-height: 100%;
		background-color: #fff;
	}

	.edit_name {
		.name {
			.hint {
				font-size: 28rpx;
				color: $base-color;
				margin-left: 16rpx;
				padding: 30rpx 0 20rpx;
			}

			input {
				width: 100%;
				background: #f9f9fb;
				height: 98rpx;
				padding-left: 20rpx;
			}

			.notice {
				width: 690rpx;
				margin: 0 auto 162rpx;

				view {
					padding-top: 5rpx;
				}

				view:first-child {
					font-size: 32rpx;
					font-weight: bold;
					padding: 40rpx 0 20rpx;
				}
			}
		}
	}

	.edit_phone {

		.phone_inp,
		.inp {
			width: 580rpx;
			height: 88rpx;
			background: #f8f8f8;
			padding: 0 30rpx;
			border-radius: 44rpx;
			box-sizing: border-box;
		}

		.inp {
			margin-bottom: 78rpx;

			input {
				width: 60%;
				height: 90%;
			}
		}

		.phone_inp {
			margin: 94rpx 0 30rpx;
		}

		.old {
			.hint {
				margin: 94rpx 0 30rpx;
			}
		}
	}

	.edit_ads {
		width: 690rpx;
		margin: 30rpx auto 0;

		.sub_btn {
			margin-top: 50rpx;
		}

		.label {
			font-size: 32rpx;
			padding: 10rpx 0;
			color: #333;
			font-weight: 600;

			text:last-child {
				color: #f00;
				margin-left: 4rpx;
				font-size: 45rpx;
			}
		}

		input,
		.picker {
			height: 96rpx;
			line-height: 96rpx;
			background: #f8f8f8;
			border-radius: 8rpx;
		}

		.picker {
			padding-right: 30rpx;

			input {
				width: 90%;
			}
		}

		input {
			font-size: 32rpx;
			padding-left: 30rpx;
		}
	}

	.title {
		color: #999;
		font-size: 28rpx;
		padding: 30rpx 0;
	}

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

	.label {
		font-size: 28rpx;
	}

	.auth,
	.base_info {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.base_info {
		.info {
			.wx_img {
				width: 300rpx;
				height: 300rpx;
			}

			>view {
				margin-bottom: 30rpx;

				.inp {
					width: 75%;
					min-height: 72rpx;
					background: #f8f8f8;
					border-radius: 8rpx;
					padding: 0 15rpx;
					box-sizing: border-box;
				}

				input,
				textarea {
					width: 75%;
					font-size: 32rpx;
				}

				.iconfont {
					font-size: 35rpx;
					color: #999;
				}
			}

			image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.code_hint {
				color: $base-color;
				font-size: 28rpx;
				margin-top: 30rpx;
			}
		}

		.upload {
			.up_title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.wx_icon {
				width: 250rpx;
				height: 250rpx;
				margin: 40rpx 0;
			}
		}
	}

	.block {
		width: 100%;
		height: 20rpx;
		background: #f9f9fb;
	}

	.auth {
		.auth_con {
			>view {
				margin-top: 30rpx;
			}

			.iconrenzheng {
				color: $base-color;
				font-size: 45rpx;
				vertical-align: middle;
				margin-right: 5rpx;
			}

			.iconiconfontjiantou2 {
				font-size: 35rpx;
				vertical-align: -2rpx;
			}
		}
	}
</style>