483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
<template>
|
|
<view class="submit-page">
|
|
<view class="info-tab bg-white">
|
|
<view @tap="changeTab(0)" :class="current == 0 ? 'primary' : ''">身份信息</view>
|
|
<view @tap="changeTab(1)" :class="current == 1 ? 'primary' : ''">批发价</view>
|
|
</view>
|
|
|
|
<view v-if="current == 0" class="form-area">
|
|
<view class="basic-info" v-if="show">
|
|
<view class="title-text"><text class="text-style">身份证信息</text></view>
|
|
|
|
<view>
|
|
<u-field label="身份证人像面" label-width="200" :border-bottom="false"
|
|
required disabled />
|
|
<view>
|
|
<u-upload :file-list="u_front_list" ref="upload1" :show-progress="false" :header="{token: $store.getters.token}"
|
|
:max-count="1" width="250" height="150" :action="action" custom-btn
|
|
@on-success="onSuccessFront" @on-remove="onRemoveFront" >
|
|
<view slot="addBtn" class="uplader-upload" hover-class="slot-btn__hover" hover-stay-time="150">
|
|
<u-icon size="48" color="#dcdee0" name="camera" />
|
|
<view class="xs m-t-10">
|
|
上传图片
|
|
</view>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<u-field label="身份证国徽面" label-width="200" :border-bottom="false"
|
|
required disabled />
|
|
<view>
|
|
<u-upload :file-list="u_opposite_list" ref="upload1" :show-progress="false" :header="{token: $store.getters.token}"
|
|
:max-count="1" width="250" height="150" :action="action" custom-btn
|
|
@on-success="onSuccessBack" @on-remove="onRemoveBack">
|
|
<view slot="addBtn" class="uplader-upload" hover-class="slot-btn__hover" hover-stay-time="150">
|
|
<u-icon size="48" color="#dcdee0" name="camera" />
|
|
<view class="xs m-t-10">
|
|
上传图片
|
|
</view>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basic-info" v-if="show">
|
|
<view class="title-text">
|
|
<view>
|
|
<text class="text-style">个人信息</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<u-field label="手持身份证自拍照" label-width="200" :border-bottom="false"
|
|
required disabled />
|
|
<view>
|
|
<u-upload :source-type="['camera']" :file-list="u_image_list" ref="upload1" :show-progress="false" :header="{token: $store.getters.token}"
|
|
:max-count="1" width="250" height="150" :action="action" custom-btn
|
|
@on-success="onSuccessPerson" @on-remove="onRemovePerson">
|
|
<view slot="addBtn" class="uplader-upload" hover-class="slot-btn__hover" hover-stay-time="150">
|
|
<u-icon size="48" color="#dcdee0" name="account" />
|
|
<view class="xs m-t-10">
|
|
上传图片
|
|
</view>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<u-field v-model="formData.u_name" label="姓名" label-width="160" placeholder="请输入姓名" required />
|
|
</view>
|
|
|
|
<view>
|
|
<u-field v-model="formData.u_phone" label="手机号码" label-width="160" placeholder="请输入手机号码" required />
|
|
</view>
|
|
|
|
<view @click="showAddress = true">
|
|
<u-field v-if="formData.province_name ==''" disabled label="现居地址" label-width="160" placeholder="请选择现居地址" required />
|
|
<u-field v-else v-model="formData.province_name + '-' + formData.city_name + '-' + formData.area_name" disabled label="现居地址" label-width="160" placeholder="现居地址" required />
|
|
</view>
|
|
|
|
<view class="flex m-t-20">
|
|
<u-checkbox shape="circle" active-color="#ff2c3c" v-model="isAgree" :disabled="radioDisable">
|
|
<text class="sm">已阅读并同意</text>
|
|
</u-checkbox>
|
|
<router-link :to="{path: '/bundle/pages/server_explan/server_explan', query: {type: 4}}">
|
|
<text class="primary sm">《集采协议》</text>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="formData.u_examine_state == 2" class="refuse" @click="seeRefuse">
|
|
审核未通过，查看原因
|
|
</view>
|
|
|
|
<view class="bottom-area">
|
|
<view class="submit-btn space-top">
|
|
<button v-if="formData.u_examine_state == 1" class="btn-success-style">审核已通过</button>
|
|
<button v-else :disabled="btnStatus" :class="btnStatus? 'disabled-style' : 'btn-style'" @click="submit()">提交</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="current == 1" class="form-area ">
|
|
<view class="wholesale-price-btn space-top">
|
|
<button v-if="wholesale_state == 0 || wholesale_state == 3" class="wholesale-price-btn-style" @click="wholesalePriceSubmit()">
|
|
<text v-if="wholesale_state == 0">申请批发价</text>
|
|
<text v-if="wholesale_state == 3">审核失败请重新提交</text>
|
|
</button>
|
|
<button v-if="wholesale_state == 1" class="wholesale-price-disabled-style">审核中</button>
|
|
<button v-if="wholesale_state == 2" class="wholesale-price-success-style">审核已通过</button>
|
|
</view>
|
|
</view>
|
|
|
|
<u-select v-model="showAddress" mode="mutil-column-auto" @confirm="addressChange" :list="addressList"></u-select>
|
|
<u-modal v-model="showModel" :content="content"></u-modal>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import area from '@/utils/area'
|
|
import {getProcurement, procurementAdd, subWholesale} from '@/api/procurement'
|
|
import {trottle} from "@/utils/tools";
|
|
import {baseURL} from '@/config/app';
|
|
export default {
|
|
//name: 'submit',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
wholesale_state: 0,
|
|
current: 0,
|
|
formData: {
|
|
u_phone: '', // 手机号码
|
|
u_name: '', //现居地址,
|
|
province_name: '', // 省
|
|
city_name: '', // 市
|
|
area_name: '', // 区
|
|
province_id: 0,
|
|
city_id: 0,
|
|
area_id: '',
|
|
},
|
|
showModel:false,
|
|
content: '',
|
|
showAddress: false,
|
|
addressList:[],// 地址列表
|
|
btnStatus: false,
|
|
wholesalePriceBtnStatus: false,
|
|
action: baseURL + '/api/Procurement/formimage',
|
|
u_front: [],
|
|
u_opposite: [],
|
|
u_image: [],
|
|
date: '',
|
|
showTime: false,
|
|
u_front_list:[],
|
|
u_opposite_list:[],
|
|
u_image_list:[],
|
|
u_examine_state: 0,
|
|
isAgree: false,
|
|
radioDisable: false,
|
|
show: true
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getData();
|
|
},
|
|
// 函数
|
|
methods: {
|
|
changeTab(index) {
|
|
this.current = index;
|
|
if (index == 1) {
|
|
if (this.wholesale_state == 3) {
|
|
if (uni.getStorageSync('wholesaleState') == '') {
|
|
this.$toast({
|
|
title:'您的批发价申请未通过审核'
|
|
})
|
|
uni.setStorageSync('wholesaleState', 'open');
|
|
}
|
|
} else {
|
|
uni.removeStorageSync('wholesaleState')
|
|
}
|
|
}
|
|
},
|
|
|
|
async getData(){
|
|
this.addressList = area;
|
|
let result = await getProcurement()
|
|
if (result.code == 1) {
|
|
this.formData = result.data.content;
|
|
|
|
this.u_front_list = [{url: baseURL + '/' + this.formData.u_front}];
|
|
this.u_front.push(this.formData.u_front);
|
|
|
|
this.u_opposite_list = [{url: baseURL + '/' + this.formData.u_opposite}];
|
|
this.u_opposite.push(this.formData.u_opposite);
|
|
|
|
this.u_image_list = [{url: baseURL + '/' + this.formData.u_image}];
|
|
this.u_image.push(this.formData.u_image);
|
|
|
|
this.u_examine_state = this.formData.u_examine_state;
|
|
this.wholesale_state = this.formData.wholesale_state;
|
|
if (this.u_examine_state == 0 ) {
|
|
this.btnStatus = true;
|
|
this.radioDisable = true;
|
|
this.isAgree = true;
|
|
}
|
|
|
|
if (this.u_examine_state == 1) {
|
|
this.show = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
seeRefuse() {
|
|
this.showModel = true;
|
|
this.content = this.formData.procurement_reason;
|
|
},
|
|
|
|
onSuccessFront(e) {
|
|
this.u_front.push(e.data.base_uri)
|
|
},
|
|
|
|
onRemoveFront(index) {
|
|
this.u_front.splice(index, 1)
|
|
},
|
|
|
|
onSuccessBack(e) {
|
|
this.u_opposite.push(e.data.base_uri)
|
|
},
|
|
|
|
onRemoveBack(index) {
|
|
this.u_opposite.splice(index, 1)
|
|
},
|
|
|
|
onSuccessPerson(e) {
|
|
this.u_image.push(e.data.base_uri)
|
|
},
|
|
|
|
onRemovePerson(index) {
|
|
this.u_image.splice(index, 1)
|
|
},
|
|
|
|
/**
|
|
* 地址选择变换
|
|
*/
|
|
addressChange(info){
|
|
this.formData.province_name = info[0]["label"];
|
|
this.formData.city_name = info[1]["label"];
|
|
this.formData.area_name = info[2]["label"];
|
|
|
|
this.formData.province_id = info[0]["value"]
|
|
this.formData.city_id = info[1]["value"]
|
|
this.formData.area_id = info[2]["value"]
|
|
},
|
|
|
|
async submit(){
|
|
if(this.u_front == false || this.u_opposite == false || this.u_image == false){
|
|
this.$toast({
|
|
title:'请先完善图片'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(!this.formData.u_name){
|
|
this.$toast({
|
|
title:'请填写您的姓名'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.$u.test.mobile(this.formData.u_phone)) {
|
|
this.$toast({
|
|
title:'请输入正确的手机号'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(this.formData.province_id == 0){
|
|
this.$toast({
|
|
title:'请选择现居地址'
|
|
})
|
|
return
|
|
}
|
|
if (!this.isAgree) return this.$toast({
|
|
title: '请先同意《集采协议》'
|
|
})
|
|
|
|
const {
|
|
formData,
|
|
u_front,
|
|
u_opposite,
|
|
u_image
|
|
} = this
|
|
|
|
const submitObj = {
|
|
...formData,
|
|
u_front,
|
|
u_opposite,
|
|
u_image
|
|
}
|
|
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = await procurementAdd(submitObj)
|
|
if(code == 1) {
|
|
this.$toast({
|
|
title: '提交完成，等待管理员审核'
|
|
})
|
|
|
|
this.btnStatus = true
|
|
}
|
|
},
|
|
|
|
async wholesalePriceSubmit() {
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = await subWholesale()
|
|
if (code == 1) {
|
|
this.$toast({
|
|
title: '提交完成，等待管理员审核'
|
|
})
|
|
this.wholesale_state = 1;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.submit-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f8f8f8;
|
|
|
|
.info-tab {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 68rpx;
|
|
margin: 20rpx 20rpx;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 22rpx;
|
|
|
|
>view {
|
|
text-align: center;
|
|
flex: 2;
|
|
}
|
|
}
|
|
|
|
.form-area {
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.basic-info {
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
.uplader-upload {
|
|
position: relative;
|
|
width: 264rpx;
|
|
height: 200rpx;
|
|
padding-top: 40rpx;
|
|
text-align: center;
|
|
margin: 11rpx;
|
|
border: 2px dashed #e5e5e5;
|
|
background-color: #FFFFFF;
|
|
|
|
>view {
|
|
color: #BBB;
|
|
}
|
|
}
|
|
.title-text {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 14rpx 0;
|
|
.text-style {
|
|
font-size: 34rpx;
|
|
color: #000;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.refuse {
|
|
text-align: center;
|
|
color: #9c9c9c;
|
|
font-size: 24rpx;
|
|
margin-top: 30rpx;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.bottom-area {
|
|
width: 100%;
|
|
.note-text {
|
|
width: 100%;
|
|
padding: 10rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.text-style {
|
|
font-size: 28rpx;
|
|
color: #9c9c9c;
|
|
}
|
|
}
|
|
.submit-btn {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
.btn-style {
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: 999rpx;
|
|
background: #fb2d2d;
|
|
color: #fdf8f4;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.disabled-style {
|
|
background: #ccc;
|
|
border-radius: 999rpx;
|
|
color: #9c9c9c;
|
|
}
|
|
.btn-success-style {
|
|
background: linear-gradient(#12c96e 0%, #0abd57 50.76%, #03b240 100%);
|
|
color: #fff;
|
|
border-radius: 999rpx;
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
width: 90%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wholesale-price-btn {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
.wholesale-price-btn-style {
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: 999rpx;
|
|
background: #fb2d2d;
|
|
color: #fdf8f4;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.wholesale-price-disabled-style {
|
|
background: #ccc;
|
|
border-radius: 999rpx;
|
|
color: #9c9c9c;
|
|
}
|
|
.wholesale-price-success-style {
|
|
background: linear-gradient(#12c96e 0%, #0abd57 50.76%, #03b240 100%);
|
|
color: #fff;
|
|
border-radius: 999rpx;
|
|
}
|
|
}
|
|
|
|
.space-top {
|
|
padding:30rpx 0 40rpx 0;
|
|
}
|
|
}
|
|
</style> |