yuebeilian-c/src/packages/user/business/examine.vue

<template>
	<view class="add-business-box">
		<Navbar :title="_userInfo.balance === 1 ? '顾客审核' : '顾客审核'" color="#333"></Navbar>
		<view class="content">
			<view class="item">
				<view class="label">店铺名称</view>
				{{info.shopName}}
			</view>
			<view class="item">
				<view class="label">主营项目</view>
				{{info.manageContent}}
			</view>
			<view class="item">
				<view class="label">商家类型</view>
				{{info.typeName}}
			</view>
			<view class="item">
				<view class="label">联系方式</text></view>
				{{info.shopPhone}}
			</view>
			<view class="item">
				<view class="label">引荐人</view>
				{{info.bindingUid}}
			</view>
			<view class="item item2">
				<view class="label">地址信息</view>
				{{info.shopAddress}}
			</view>
			<view class="item item2">
				<view class="label">商家描述</view>
				{{info.describe}}
			</view>
			<view class="item item2 master-img-box">
				<view class="label">商家主图</view>
				<view class="master-img">
					<image :src="info.shopIcon" class="img" mode=""></image>
					<!-- <IconText :code="`\ue84a`" size="12" color="#BDBBBB"></IconText> -->
				</view>
			</view>
			<view class="item item2">
				<view class="label">商家图片</view>
				<view class="upload-box">
					<view class="pic-box" v-for="item in info.shopPics" :key="item">
						<image :src="item" class="pic" mode="aspectFill" @click="preview(item)"></image>
					</view>
				</view>
			</view>
			<view class="item item2">
				<view class="label">商家视频</view>
				<view class="upload-box">
					<view class="pic-box">
						<video v-if="info.shopVideo" :src="info.shopVideo" class="pic"></video>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<div class="btn btn2" @click="examineRefuse">
				拒绝
			</div>
			<div class="btn" @click="examinePass">
				审核通过
			</div>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({})

	export default class AddBusiness extends Vue {
		@baseModule.Getter('_userInfo') _userInfo: any;
		typeList: any = [];
		shopType: any = {};
		addressInfo: any = {};
		info: any = {};
		data: any = {
			shopName: '',
			shopPhone: '',
			manageContent: '',
			bindingUid: null,
			shopType: null,
			shopAddress: '',
			house: '',
			describe: '',
			shopIcon: '',
			shopPics: [],
			lng: null,
			lat: null
		};

		onLoad() {
			let query = this.$Route.query;
			if (query.id) this.getInfo();
			// this.getTypeList();
		}
		
		preview(url: string): void {
			uni.previewImage({
				current: url, // 当前显示图片的http链接
				urls: [url] // 需要预览的图片http链接列表
			});
		}

		getInfo() {
			this.$http
				.get({
					url: this.$api.examineInfo,
					data: {
						id: this.$Route.query.id
					}
				})
				.then((res: any) => {
					this.info = res;
				}, (err: any) => {
					console.log(err);
				});
		}

		getTypeList() {
			this.$http
				.get({
					url: this.$api.getBusinessTypeList,
				})
				.then((res: any) => {
					this.typeList = res.list;
				}, (err: any) => {
					console.log(err);
				});
		}

		changeType(val: any) {
			let value = +val.detail.value;
			this.shopType = this.typeList[value];
			this.data.shopType = this.shopType.id;
		}

		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,
									shopAddress: info.address
								};
								console.log(this.data)
							}
						});
					}
				}
			});
		}
		handleMasterImg() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: (res) => {
					const tempFilePaths: any = res.tempFilePaths;
					uni.showLoading({
						title: '上传中...'
					});
					this.$http
						.upPic({
							filePath: res.tempFilePaths[0]
						})
						.then((res: any) => {
							this.data.shopIcon = res;
							uni.hideLoading();
						})
						.catch((err: any) => {
							uni.hideLoading();
							console.log(err);
						});
				}
			});
		}
		getImgs(pics: any) {
			this.data.shopPics = pics;
		}
		handleConfirm() {
			// console.log(this.data)
			uni.showLoading({
				title: '加载中...'
			});
			this.$http
				.post({
					url: this.$api.addBusiness,
					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.updateBusinessInfo,
					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();
				});
		}
		examineRefuse() {
			this.$http
				.put({
					url: this.$api.examineRefuse,
					data: {
						id: this.info.id,
						rollback: '已拒绝'
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					uni.showToast({
						title: '已拒绝审核',
						icon: 'none'
					});
					this.$Router.back(1);
					this.getInfo();
				}, (err: any) => {
					console.log(err);
					uni.hideLoading();
				});
		}
		examinePass() {
			this.$http
				.put({
					url: this.$api.examinePass,
					data: {
						id: this.info.id,
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					uni.showToast({
						title: '已通过审核',
						icon: 'none'
					});
					this.$Router.back(1);
					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(55);
				background: #fff;
				margin-top: vw(1);
				@include flex-x(flex-start);
				padding: 0 vw(15);
				font-size: vw(15);

				.label {
					@include word-vw(14, #333);
					width: vw(120);
					flex-shrink: 1;

					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: auto;
				min-height: vw(55);
				padding: vw(12) vw(15);
				@include flex-x(flex-start, flex-start);

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

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

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

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

			.upload-box {
				@include flex-x(flex-start);
				flex-wrap: wrap;
			}

			.pic-box {
				width: 1/3 * 100%;
				@include flex-y(center, center);
			}

			.pic {
				width: vw(66);
				height: vw(66);
				border-radius: vw(5);
				margin-bottom: vw(8);
			}
		}

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

			.btn {
				@include flex-x(center);
				@include solid-btn(148, 50, #fff, 10);
				margin: vw(5);
				box-sizing: border-box;
			}

			.btn2 {
				background: #FFF7F8;
				color: #333;
				border: vw(1) solid $btn-color;
			}
		}
	}
</style>