OfficeApp/subpkg/merchantDetails/merchantDetails.vue
weipengfei 6cafffd4fe 更新
2023-09-23 11:37:52 +08:00

423 lines
11 KiB
Vue

<template>
<view class="">
<view class="p_list">
<view class="card">
<view class="nav_bar">
<view class="left">
<image src="../../static/img/company/company.png"></image>
<view>{{extend.company_name}}</view>
</view>
</view>
<view class="body">
<view class="b_item name">
<view class="text">
<view>审核类型:</view>
<view>{{formData.name}}</view>
</view>
<view class="type">
<text v-if="formData.check_status==1" style="color: #ff7c32;">审核中</text>
<text v-else-if="formData.check_status==2" style="color: #47be62;">已通过</text>
<text v-else-if="formData.check_status==3" style="color: #FF0000;">未通过</text>
</view>
</view>
<view class="b_item">
<view>商户分类:</view>
<view>{{extend.category_name}}</view>
</view>
<view class="b_item">
<view>店铺类型:</view>
<view>{{extend.type_name}}</view>
</view>
<view class="b_item">
<view>店铺名称:</view>
<view>{{extend.mer_name}}</view>
</view>
<view class="b_item">
<view>申请时间:</view>
<view>{{formData.create_time}}</view>
</view>
<view class="b_item">
<view>联系方式:</view>
<view>{{extend.master_phone}}</view>
</view>
<!-- <view class="b_item">
<view>店铺所在地:</view>
<view>泸州市江阳区通滩镇通滩社区</view>
</view> -->
<view class="b_item">
<view>详细地址:</view>
<view>{{extend.address}}</view>
</view>
<view class="b_item">
<view>公司名称:</view>
<view>{{extend.company_name}}</view>
</view>
<view class="b_item">
<view>法人姓名:</view>
<view>{{extend.master_name}}</view>
</view>
<view class="b_item">
<view>社会代码:</view>
<view>{{extend.organization_code}}</view>
</view>
</view>
</view>
<view class="card">
<view class="nav_bar">
<view class="left">
<image src="../../static/img/company/SHZZ.png"></image>
<view>商户资质信息</view>
</view>
</view>
<view class="body">
<block v-for="(item, index) in extend.qualification">
<image @click="priview(item)" :src="item"></image>
<view v-if="index<extend.qualification.length-1" style="border-top: 1px dashed #0022c7;margin: 28rpx 0;">
</view>
</block>
</view>
</view>
<view v-if="is_transaction" class="card">
<view class="nav_bar">
<view class="left">
<image src="../../static/img/company/SHZZ.png"></image>
<view>身份证明信息</view>
</view>
</view>
<view class="body">
<view class="b_item">
<view>银行账户姓名:</view>
<view>{{extend.bank_username}}</view>
</view>
<view class="b_item">
<view>开户行:</view>
<view>{{extend.bank_opening}}</view>
</view>
<view class="b_item">
<view>银行卡正面:</view>
</view>
<image @click="priview(extend.bank_front)" :src="extend.bank_front"></image>
<view class="b_item">
<view>银行卡反面:</view>
</view>
<image @click="priview(extend.bank_back)" :src="extend.bank_back"></image>
<view class="b_item">
<view>身份证正面:</view>
</view>
<image @click="priview(extend.cardno_front)" :src="extend.cardno_front"></image>
<view class="b_item">
<view>身份证反面:</view>
</view>
<image @click="priview(extend.cardno_back)" :src="extend.cardno_back"></image>
</view>
</view>
</view>
<block v-if="formData.check_status!=2&&formData.check_status!=3&&formData.check_status">
<button class="btn" @click="tipShow = true">通过</button>
<button class="btn" @click="modalShow = true" style="background-color: #fff;color: #0122c7;">拒绝</button>
</block>
<block v-else-if="formData.check_status==3">
<view class="refuse">
未通过原因: {{formData.remark}}
</view>
</block>
<u-popup :show="modalShow" :round="13" mode="center">
<view class="popup">
<view class="header">
<text>请输入拒绝原因</text>
<image @click="modalShow=false" src="../../static/icons/close.png"></image>
</view>
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
<u-form-item prop="remark">
<u-textarea class="textarea" v-model="formData.remark" placeholder="请输入拒绝原因" type="textarea"
height="100"></u-textarea>
</u-form-item>
</u--form>
<view class="p_btn">
<view></view>
<view class="right_btn">
<button class="cal" @click="modalShow=false">取消</button>
<button class="pri" @click="$u.throttle(noPass, 1500)">确认</button>
</view>
</view>
</view>
</u-popup>
<u-modal :show="tipShow" title="提示" content='确认信息无误再通过' closeOnClickOverlay showCancelButton @close="tipShow=false"
@cancel="tipShow=false" @confirm="$u.throttle(pass, 1500)"></u-modal>
</view>
</template>
<script>
import { Toast } from '../../libs/uniApi'
import { approveAudit, approveDetails } from "@/api/approve.js"
export default {
data() {
return {
modalShow: false,
tipShow: false,
formData: {
id: '',
remark: ''
},
extend: {
},
is_transaction: false, // 是否为交易申请
rules: {
remark: {
type: 'string',
required: true,
message: '请输入原因',
trigger: ['blur', 'change']
}
}
}
},
onLoad(options) {
this.formData.id = +options.id;
options.name ? uni.setNavigationBarTitle({
title: options.name
}) : null;
if (options.name.includes('交易')) this.is_transaction = true;
this.initData();
},
onShow() {},
methods: {
async initData() {
try {
let res = await approveDetails({
id: this.formData.id
});
this.formData = res.data;
this.extend = this.formData?.extend;
this.extend.qualification ? this.extend.qualification = JSON.parse(this.extend.qualification) : this.extend
.qualification = []
} catch (e) {
//TODO handle the exception
}
},
async pass() {
// check_status 2通过,3拒绝
await approveAudit({
id: this.formData.id,
check_status: 2
})
this.tipShow = false;
this.$nextTick(() => {
Toast('已通过');
uni.navigateBack();
})
},
async noPass() {
await this.$refs.uForm.validate();
await approveAudit({
id: this.formData.id,
check_status: 3,
remark: this.formData.remark
})
this.modalShow = false;
this.$nextTick(() => {
Toast('已拒绝');
uni.navigateBack();
})
},
priview(url) {
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ['保存图片'],
success: function(data) {
if (data.tapIndex === 0) {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '保存成功',
icon: 'success'
})
},
fail: function() {
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
}
}
})
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.p_list {
padding-top: 28rpx;
.card {
margin: 0 auto;
margin-bottom: 28rpx;
width: 694rpx;
background-color: #fff;
border-radius: 26rpx;
overflow: hidden;
.nav_bar {
background-color: #0122c7;
padding: 28rpx;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
font-size: 32rpx;
image {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
}
.right {
display: flex;
font-size: 28rpx;
align-items: center;
}
}
.body {
font-size: 28rpx;
padding: 28rpx;
.b_item {
padding-bottom: 16rpx;
display: flex;
view:nth-child(1) {
flex-shrink: 0;
padding-right: 10rpx;
}
}
.name {
display: flex;
justify-content: space-between;
.text {
flex: 1;
display: flex;
view:nth-child(1) {
flex-shrink: 0;
}
}
.type {
flex-shrink: 0;
}
}
image {
width: 638rpx;
height: 400rpx;
}
}
}
}
.btn {
width: 694rpx;
height: 100rpx;
margin: 28rpx auto;
background-color: #0122c7;
border: 1rpx solid #0122c7;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
width: 694rpx;
border-radius: 26rpx;
background-color: #fff;
overflow: hidden;
.header {
text-align: center;
background-color: #0122c7;
color: #fff;
font-size: 32rpx;
height: 100rpx;
line-height: 100rpx;
position: relative;
image {
width: 50rpx;
height: 50rpx;
position: absolute;
right: 28rpx;
top: 50%;
transform: translate(0, -50%);
}
}
.textarea {
margin: 0 28rpx;
margin-top: 8rpx;
padding: 28rpx;
background-color: #f4f4f4;
font-size: 32rpx !important;
border-radius: 26rpx;
}
.p_btn {
margin: 28rpx;
display: flex;
justify-content: space-between;
.right_btn {
display: flex;
align-items: center;
.cal {
width: 150rpx;
font-size: 30rpx;
height: 86rpx;
line-height: 86rpx;
border-radius: 43rpx;
font-size: 30rpx;
}
.pri {
background-color: #0122c7;
color: #fff;
width: 238rpx;
height: 86rpx;
line-height: 86rpx;
border-radius: 43rpx;
font-size: 30rpx;
}
}
}
}
.refuse {
width: 694rpx;
padding: 28rpx;
margin: 0 auto;
margin-bottom: 28rpx;
border-radius: 26rpx;
// border: 1px solid #ff7c32;
background-color: rgba(#ff7c32, 0.2);
color: #ff7c32;
}
</style>