smart-tourism/smart-ui-app/pages/shop/apply.vue

<template>
	<view>
		<view class="cn">
			<u-steps :list="numList" mode="number" :current="num" active-color="#c74547"></u-steps>
			<u-subsection :list="subsection" :current="current" @change="section" button-color="#c74547" active-color="#ffffff"></u-subsection>
			<view class="info">
				<view class="form_group hr">
					<view class="lable">商铺名称</view>
					<input type="text" placeholder="请输入商铺名称" v-model="item.name" />
				</view>
				<view class="form_group hr">
					<view class="lable">商铺地址</view>
					<input type="text" placeholder="请输入商铺地址" v-model="item.addres" />
				</view>
				<view class="form_group hr">
					<view class="lable">老板名称</view>
					<input type="text" placeholder="请输入老板名称" v-model="item.bossName" />
				</view>
				<view class="form_group hr">
					<view class="lable">老板电话</view>
					<input type="number" placeholder="请输入老板电话" v-model="item.bossPhone" />
				</view>
				<view class="form_group hr">
					<view class="lable">地图坐标</view>
					<input type="number" placeholder="请在地图上选择坐标" @click="wz()" v-model="zb" :disabled="true" />
				</view>
				<view class="form_group hr">
					<view class="lable">商铺简介</view>
					<textarea placeholder="请输入商铺简介" v-model="item.briefContent" />
				</view>
			</view>
			<button class="btn" @click="up()" v-if="!item.auditFlag">申请开通</button>
			<button class="btn" @click="up()" v-if="item.auditFlag == 0">更新资料</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			subsection: [{ name: '商铺', value: 1 }, { name: '酒店', value: 2 }],
			numList: [{ name: '资料填写' }, { name: '资料审核' }, { name: '审核通过' }],
			num: 0,
			current: 0,
			item: {},
			zb: ''
		};
	},
	onLoad(e) {
		if (e.item) {
			this.item = JSON.parse(e.item);
			if(this.item.lat){
				this.zb = '纬度:' + this.item.lat + ' 经度:' + this.item.lng;
			}
			this.subsection.forEach((item,index)=>{
				if(item.value==this.item.shopType){
					this.current=index;
				}
			})
			this.item.shopType = this.subsection[this.current].value;
			if (this.item.auditFlag == 0) {
				this.num = 1;
			}
			if (this.item.auditFlag == 1) {
				this.num = 2;
			}
		}
	},
	methods: {
		section(current) {
			this.current = current;
		},
		wz() {
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: res => {
					uni.chooseLocation({
						success: r => {
							this.zb = '纬度:' + r.latitude + ' 经度:' + r.longitude;
							this.item.lat = r.latitude;
							this.item.lng = r.longitude;
						}
					});
				},
				fail: res => {
					console.log('zx:' + JSON.stringify(res));
				}
			});
		},
		up() {
			this.item.shopType = this.subsection[this.current].value;
			this.item.memberId = this.$getUser().memberId;
			let rule = [
				{ name: 'name', checkType: 'notnull', errorMsg: '请输入商铺名称' },
				{ name: 'addres', checkType: 'notnull', errorMsg: '请输入商铺地址' },
				{ name: 'bossName', checkType: 'notnull', errorMsg: '请输入老板名称' },
				{ name: 'bossPhone', checkType: 'notnull', errorMsg: '请输入老板电话' },
				{ name: 'lat', checkType: 'notnull', errorMsg: '请在地图上选择坐标' }
			];
			if (!this.$verify.check(this.item, rule)) {
				uni.showModal({ content: this.$verify.error, showCancel: false });
				return;
			}
			this.$http.request({
				method: 'POST',
				url: this.item.shopId ? this.$http.urls.updateShop : this.$http.urls.shopApply,
				data: this.item,
				success: res => {
					uni.showToast({ title: '提交成功' });
					setTimeout(() => {
						uni.$emit('shop');
						uni.navigateBack();
					}, 700);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.steps {
	text-align: center;
	margin-top: 20px;
}
.u-subsection {
	margin-top: 20px;
}
.cn {
	padding: 15px;
	.info {
		background-color: white;
		border-radius: 5px;
		margin-top: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.btn {
		margin-top: 25px;
	}
}
</style>