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

<template>
	<view>
		<view class="cn">
			<u-steps :list="numList" mode="number" :current="item.auditFlag + 1" active-color="#c74547"></u-steps>
			<view class="info">
				<view class="form_group hr">
					<view class="lable">商铺类型</view>
					<u-radio-group v-model="item.shopType" active-color="#c74547">
						<u-radio :name="1">商铺</u-radio>
						<u-radio :name="2">酒店</u-radio>
					</u-radio-group>
				</view>
				<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 class="dw icon" @click="wz(1)">&#xe64a;</view>
				</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">
					<view class="lable">营业执照</view>
					<view class="text">请上传1张营业执照</view>
				</view>
				<view class="pl5">
					<u-upload
						:ip="ip"
						:action="upload.action"
						:header="upload.header"
						:size-type="upload.size"
						:max-count="1"
						:name="upload.name"
						:file-list="item.pic"
						:deletable="item.auditFlag != 1"
						:show-progress="item.auditFlag != 1"
						:custom-btn="item.auditFlag == 1"
						ref="pic"
						width="140"
						height="140"
					></u-upload>
				</view>
				<view class="form_group">
					<view class="lable">图片展示</view>
					<view class="text">最多上传5张展示图片</view>
				</view>
				<view class="pl5">
					<u-upload
						:ip="ip"
						:action="upload.action"
						:header="upload.header"
						:size-type="upload.size"
						:max-count="upload.count"
						:name="upload.name"
						:file-list="item.showPictures"
						:deletable="item.auditFlag != 1"
						:show-progress="item.auditFlag != 1"
						:custom-btn="item.auditFlag == 1"
						ref="uUpload"
						width="140"
						height="140"
					></u-upload>
				</view>
				<view class="form_group"><view class="lable">商铺简介</view></view>
				<textarea placeholder="请输入商铺简介(200字以内)" v-model="item.briefContent" maxlength="200" />
			</view>
			<button class="btn" @click="up()" v-if="item.auditFlag == -1">申请开通</button>
			<button class="btn" @click="up()" v-if="item.shopId && item.auditFlag == 0">更新资料</button>
			<button class="btn" @click="up()" v-if="item.auditFlag == 2">重新提交资料</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			numList: [{ name: '资料填写' }, { name: '资料审核' }, { name: '审核通过' }],
			item: { showPictures: [], auditFlag: -1, pic: [] },
			zb: '', //坐标
			upload: {
				header: { apiToken: this.$getUser().apiToken },
				name: 'img',
				action: this.$http.urls.uploadImg,
				size_type: 'compressed ',
				count: 5
			}
		};
	},
	onLoad(e) {
		if (e.item) {
			this.item = JSON.parse(e.item);
			if (this.item.lat) {
				this.zb = '纬度:' + this.item.lat + ' 经度:' + this.item.lng;
			}
			uni.setNavigationBarTitle({
				title: '店铺信息'
			});
			if (this.item.auditFlag == 2) {
				this.numList[2].name = '审核不通过';
				uni.setNavigationBarTitle({
					title: '重新提交审核'
				});
			}
		}
	},
	methods: {
		//定位
		wz(index) {
			uni.chooseLocation({
				success: r => {
					if (index == 1) {
						this.item.addres = r.address;
					}
					this.zb = '纬度:' + r.latitude + ' 经度:' + r.longitude;
					this.item.lat = r.latitude;
					this.item.lng = r.longitude;
					this.$forceUpdate();
				}
			});
		},
		up() {
			this.item.showPictures = [];
			this.item.pic = [];
			let pic = this.$refs.pic.lists.filter(val => {
				return val.progress == 100;
			});
			let files = this.$refs.uUpload.lists.filter(val => {
				return val.progress == 100;
			});
			//营业执照
			pic.forEach(item => {
				if (item.response) {
					this.item.pic.push(item.response.fileName); //获取上传成功的网络地址
				} else {
					this.item.pic.push(item.url); //原来的地址
				}
			});
			//商铺展示图片
			files.forEach(item => {
				if (item.response) {
					this.item.showPictures.push(item.response.fileName); //获取上传成功的网络地址
				} else {
					this.item.showPictures.push(item.url); //原来的地址
				}
			});
			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: '请在地图上选择坐标' },
				{ name: 'pic', checkType: 'notnull', errorMsg: '请上传营业执照' },
				{ name: 'showPictures', checkType: 'notnull', errorMsg: '请上传至少1张展示图' }
			];
			if (!this.$verify.check(this.item, rule)) {
				uni.showModal({ content: this.$verify.error, showCancel: false });
				return;
			}
			this.item.memberId = this.$getUser().memberId;
			this.item.showPictures = this.item.showPictures.toString();
			this.item.pic = this.item.pic.toString();
			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;
		padding-bottom: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.dw {
			top: 11px;
			font-size: 19px;
			right: 9px;
			position: absolute;
		}
	}
	textarea {
		margin-left: 17px;
		font-size: 14px;
		padding: 10px;
		width: 85%;
		height: 85px;
		border: 1px solid #f1f1f1;
		border-radius: 5px;
	}
	.btn {
		margin-top: 25px;
	}
}
.text {
	font-size: 11px;
	font-weight: normal;
	color: $dar;
	flex: 0.8;
	text-align: right;
}
</style>