guosen-ldt-mall/pages/shopAudit/detail.vue

<template>
	<view class="safe-area-inset-bottom">
		<view class="card">
			<view class="title">
				申请信息
			</view>
			<view class="item">
				<text  class="left">状态</text>
				<text v-if="detail.auditStatus==0" class="right" style="color: #ff9900;">待审核</text>
				<text v-if="detail.auditStatus==1" class="right" style="color: #19be6b;">已通过</text>
				<text v-if="detail.auditStatus==2" class="right" style="color: #E13939;">已拒绝</text>
				<text v-if="detail.auditStatus==3" class="right" style="color: #E13939;">已停用</text>
			</view>
			<view class="item" v-if="detail.auditStatus==2">
				<text  class="left">拒绝原因</text>
				<text class="right">{{detail.auditAdvice}}</text>
			</view>
			<view class="item">
				<text  class="left">申请时间</text>
				<text class="right">{{detail.createTime}}</text>
			</view>
			<view class="item">
				<text  class="left">商户名</text>
				<text class="right">{{detail.name}}</text>
			</view>
			<view class="item">
				<text  class="left">申请人</text>
				<text class="right">{{detail.personName}}</text>
			</view>
			<view class="item">
				<text  class="left">身份证号码</text>
				<text class="right">{{detail.personIdCard}}</text>
			</view>
			<view class="item" style="justify-content: space-around;">
				<image @click="$util.preview(detail.idCardFront)" style="width: 48%;height: 160rpx;" :src="detail.idCardFront"></image>
				<image @click="$util.preview(detail.idCardContrary)" style="width: 48%;height: 160rpx;" :src="detail.idCardContrary" ></image>
			</view>
		</view>
		
		<view class="card">
			<text class="title">商户信息</text>
			<view class="item">
				<text  class="left">门店地区</text>
				<text class="right">{{detail.province}} - {{detail.city}} - {{detail.area}}</text>
			</view>
			<view class="item">
				<text class="left">所属商场</text>
				<text class="right">{{detail.mallName}}</text>
			</view>
			<view class="item">
				<text class="left">具体地址</text>
				<text class="right">{{detail.address || '暂无'}}</text>
			</view>
			<view class="item">
				<text class="left">商场区域</text>
				<text class="right">{{detail.mallAreaName || '暂无'}}</text>
			</view>
			<view class="item">
				<text class="left">单位全称</text>
				<text class="right">{{detail.fullName}}</text>
			</view>
			<view class="item">
				<text class="left">公司网址</text>
				<text class="right">{{detail.webUrl}}</text>
			</view>
			<view class="item">
				<text class="left">公司法人姓名</text>
				<text class="right">{{detail.legalPersonName}}</text>
			</view>
			<view class="item">
				<text class="left">公司总类</text>
				<view class="right">
					<view class="cu-tag tag-bg round sm" v-for="(item,index) in tags" :key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="item" style="justify-content: flex-start;flex-direction: column;">
				<text class="left">营业执照</text>
				<view class="center padding-top-20">
					<image @click="$util.preview(detail.businessLicense)" style="width: 50%;height: 250rpx;" :src="detail.businessLicense" mode=""></image>
				</view>
			</view>
			<view class="item" style="justify-content: flex-start;flex-direction: column;">
				<text class="left">店铺实况</text>
				<view class="flex justify-start padding-top-20 flex-wrap">
					<image @click="$util.preview(detail.businessLicense)" style="width: 30%;height: 120rpx;margin: 10rpx;" :src="detail.businessLicense" mode=""></image>
				</view>
			</view>
		</view>
		
		<block  v-if="detail.auditStatus==0">
			<view class="" style="height: 90rpx;"></view>
			<view :style="{paddingBottom:safeAreaBottom}" class="footer-fixed padding-20  bg-white flex justify-end margin-right-30" style="box-sizing: border-box;z-index: 999;border-top: 1rpx solid #f1f1f1;">
				<view @click="pass" class="cu-btn df btn-bg-color  round margin-right-20" style="padding-left: 46rpx;padding-right: 46rpx;">
					通过
				</view>
				<view @click="opinionShow=true" class="cu-btn df btn-line-color  round " style="padding-left: 46rpx;padding-right: 46rpx;">
					拒绝
				</view>
			</view>
		</block>
		
		<u-modal :show-cancel-button="true" confirm-color="#FF9447" @confirm="opinionConfirm" title="审核意见" :mask-close-able="true"
			v-model="opinionShow">
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150" ref="uForm">
					<u-form-item :border-bottom="false">
						<u-input height="150" placeholder="请输入审核意见(选填)" v-model="opinion" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				detail:{},
				tags:[],
				opinionShow:false,
				auditAdvice:''
			}
		},
		onLoad(options) {
			this.id=options.id
			this.fetchDetail()
		},
		methods: {
			fetchDetail(){
				this.$api.shop.detail({id:this.id}).then(res=>{
					this.detail=res.data
					this.tags=this.detail.labelNames.split(',')
				})
			},
			opinionConfirm() {
				let item = this.$u.deepClone(this.detail)
				item.auditStatus = 2
				this.$api.shop.submit(item).then(res => {
					if (res.success == true) {
						this.$u.toast(res.msg)
						this.fetchDetail()
					}
				})
			},
			pass(data){
				let item=this.$u.deepClone(this.detail)
				this.$dialog.showModal("确定通过？").then(res=>{
					item.auditStatus=1
					this.$api.shop.submit(item).then(res=>{
						if (res.success==true) {
							this.$u.toast(res.msg)
							this.fetchDetail()
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card{
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.title{
			font-size: 32rpx;
			font-weight: 800;
			padding-bottom: 10rpx;
		}
		
		.item{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			
			.left{
				color: #999999;
			}
			
			.right{
				color: #252525;
			}
		}
	}
</style>