yuezhilian-c/src/packages/user/business/yyzx-apply.vue

<template>
	<view class="add-business-box">
		<Navbar title="分公司申请" color="#333"></Navbar>
		<view class="content">
			<view class="item">
				<view class="label">分公司名称</view>
				<input type="text" class="input" v-model="data.companyName" placeholder="点击输入分公司名称">
			</view>
			<view class="item">
				<view class="label">联系方式</view>
				<input type="text" class="input" v-model="data.companyPhone" placeholder="输入联系电话">
			</view>
			<view class="item item2 item3">
				<view class="label">地址信息</view>
				<view class="position" @click="getLocation">{{data.address || '点击定位地址'}}
					<IconText :code="`\ue853`" size="12" class="icon" color="#FA402B"></IconText>
				</view>
			</view>
			<view class="item mph">
				<view class="label">门牌号</view>
				<textarea class="input" v-model="data.house" placeholder-class="placeholder"
					placeholder="详细地址，例：8号楼1单元5层501室" cols="30" rows="10"></textarea>
			</view>
			<view class="item item3 pics">
				<view class="label">门头图片</view>
				<view class="upload-box">
					<MulImgUpload @update="getImgs" :imgs="data.pics" :max="5" :width="66 / 3.75" :height="66 / 3.75"
						addColor="#FA402B">
					</MulImgUpload>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" v-if="info.status === 1">审核中...</view>
			<view class="btn" @click="handleUpdate" v-else-if="info.status === 2" style="background: #00BA66;">
				更新运营中心信息</view>
			<view class="btn" @click="handleUpdate" v-else-if="info.status === 3">重新提交申请</view>
			<view class="btn" @click="handleConfirm" v-else-if="info.status === 0">提交申请</view>
		</view>
		<ShowModal ref="rejectTip" title="提示" :content="info.remark" btnText="确认" />
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	@Component({})

	export default class AddBusiness extends Vue {
		typeList: any = [];
		shopType: any = {};
		addressInfo: any = {};
		videoImg: string = "";
		info: any = {};
		data: any = {
			companyName: '',
			companyPhone: '',
			address: '',
			house: '',
			pics: []
		};

		onLoad() {
			this.getInfo();
		}

		getInfo() {
			return this.$http
				.get({
					url: this.$api.applyInfo2,
				})
				.then((res: any) => {
					this.info = res;
					let data = {
						...this.data
					};
					for (let key in this.data) {
						data[key] = res[key];
					}
					this.data = data;
					if (res.status === 3) {
						(this.$refs.rejectTip as any).open();
					}
				}, (err: any) => {
					console.log(err);
				});
		}


		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: (res: any) => {
					// console.log(res, '经纬度')
					if (res.errMsg == 'getLocation:ok') {
						uni.chooseLocation({
							// 传入你要去的纬度
							latitude: this.data.lat || res.latitude,
							// 传入你要去的经度
							longitude: this.data.lng || res.longitude,
							// 传入你要去的地址信息 不填则为空
							// 缩放大小
							success: (info: any) => {
								this.data = {
									...this.data,
									lat: info.latitude,
									lng: info.longitude,
									address: info.address
								};
								console.log(this.data)
							}
						});
					}
				}
			});
		}
		getImgs(pics: any) {
			this.data.pics = pics;
		}
		handleConfirm() {
			// console.log(this.data)
			uni.showLoading({
				title: '加载中...'
			});
			this.$http
				.post({
					url: this.$api.applyAdd2,
					data: this.data
				})
				.then((res: any) => {
					uni.hideLoading();
					uni.showToast({
						title: '店铺入驻申请审核中,请稍后...',
						icon: 'none'
					});
					this.getInfo();
				}, (err: any) => {
					console.log(err);
					uni.hideLoading();
				});
		}
		handleUpdate() {
			console.log(this.data)
			uni.showLoading({
				title: '加载中...'
			});
			this.$http
				.put({
					url: this.$api.applyUpdate2,
					data: {
						id: this.info.id,
						...this.data
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					uni.showToast({
						title: '店铺入驻申请审核中,请稍后...',
						icon: 'none'
					});
					this.getInfo();
				}, (err: any) => {
					console.log(err);
					uni.hideLoading();
				});
		}
	}
</script>

<style lang="scss" scoped>
	.add-business-box {
		.content {
			padding-bottom: vw(100);

			.item {
				height: vw(66);
				background: #fff;
				margin-top: vw(1);
				@include flex-x();
				padding: 0 vw(15);

				.label {
					@include word-vw(14, #333);

					text {
						@include word-vw(14, #999);
					}
				}

				.input {
					width: vw(240);
					height: vw(50);
					background: #F6F6F6;
					border-radius: vw(5);
					padding: 0 vw(16);
					font-size: vw(14);
					box-sizing: border-box;
				}

				.selector {
					@include flex-x();
					@include word-vw(15, #999);

					.icon {
						margin-left: vw(5);
					}
				}

				.position {
					@include word-vw(14, #999);
					@include flex-x(flex-end);
					width: vw(240);

					.icon {
						margin-left: vw(5);
					}
				}
			}

			.item2 {
				height: vw(55);
			}

			.item3 {
				margin-top: vw(10);
			}

			.mph,
			.des,
			.pics {
				height: auto;
				padding: vw(15) vw(12);

				.label {
					align-self: flex-start;
					padding-top: vw(3);

					text {
						font-size: vw(10);
					}
				}
			}

			.mph {
				.input {
					height: vw(66);
					padding: vw(12) vw(16);
					line-height: vw(21);
				}

				/deep/ .placeholder {
					line-height: vw(21);
				}
			}

			.des {
				.input {
					height: vw(100);
					padding: vw(12) vw(16);
				}
			}

			.master-img {
				@include flex-x();

				.img {
					width: vw(40);
					height: vw(40);
					background: #ccc;
					border-radius: vw(20);
					margin-right: vw(5);
				}
			}

			.upload-box {
				width: vw(240);

				.empty {
					width: vw(66);
					height: vw(66);
					border-radius: vw(5);
					@include flex-x(center);
					background: #F6F6F6;
				}

				.video {
					width: vw(66);
					height: vw(66);
					// background: #ccc;
					border-radius: vw(5);
				}

				.img-box {
					position: relative;
					display: inline-block;

					.delete-icon {
						position: absolute;
						top: vw(-6);
						right: vw(-6);
					}
				}
			}
		}

		.bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			height: vw(70);
			background: #fff;
			@include flex-x(center);

			.btn {
				@include flex-x(center);
				@include solid-btn(335, 50, #fff, 25);
			}
		}
	}
</style>