332 lines
9.7 KiB
Vue
332 lines
9.7 KiB
Vue
<template>
|
||
<view>
|
||
<view class="w-full fixed-lt z-20" :style="{'padding-top': sysHeight + 'px'}">
|
||
<view class="h-80 px-20 flex-between-center">
|
||
<text class="iconfont icon-ic_leftarrow fs-40 text--w111-fff" @tap="pageBack"></text>
|
||
</view>
|
||
</view>
|
||
<view class="header-top relative" :style="[headerBg]">
|
||
<view class="rule-btn w-124 flex-center fs-24 text--w111-fff" :style="{top: 100 + sysHeight + 'px'}"
|
||
@tap="goRecord">申请记录</view>
|
||
</view>
|
||
<view class="bg-v-gradient pl-20 pr-20 pb-24" :style="{minHeight: mainHeight + 'px'}">
|
||
<view class="bg--w111-fff rd-24rpx content-box">
|
||
<view class="fs-30 fw-500 lh-42rpx">请填写以下信息</view>
|
||
<view class="cell flex-between-center mt-64">
|
||
<view class="fs-28 lh-40rpx">供应商名称</view>
|
||
<input type="text" v-model="form.system_name" placeholder="请输入代理商名称" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
|
||
</view>
|
||
<view class="cell flex-between-center mt-64">
|
||
<view class="fs-28 lh-40rpx">用户姓名</view>
|
||
<input type="text" v-model="form.name" placeholder="请输入姓名" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
|
||
</view>
|
||
<view class="cell flex-between-center mt-64">
|
||
<view class="fs-28 lh-40rpx">联系电话</view>
|
||
<input type="number" v-model="form.phone" placeholder="请输入手机号" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
|
||
</view>
|
||
<view class="cell flex-between-center mt-64">
|
||
<view class="fs-28 lh-40rpx">验证码</view>
|
||
<view class="flex-y-center">
|
||
<input type="number" v-model="form.captcha" placeholder="请输入验证码" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
|
||
<button class="code-btn w-168 h-56 flex-center fs-24 ml-20"
|
||
:disabled="disabled" @tap="code">{{ text }}</button>
|
||
</view>
|
||
</view>
|
||
<view class="fs-28 lh-40rpx mt-64">请上传营业执照及相关资质证明图片</view>
|
||
<view class="fs-24 lh-34rpx text--w111-ccc mt-12">(图片最多可上传8张，图片格式支持JPJ、PNG、JPEG）</view>
|
||
<view class="grid-column-4 grid-gap-24rpx mt-24">
|
||
<view class="relative w-148 h-148" v-for="(item,index) in form.images" :key="index">
|
||
<image :src="item" mode="aspectFill" class="w-148 h-148 rd-16rpx"></image>
|
||
<view class="abs-rt w-32 h-32 del-pic flex-center" @click="DelPic(index)">
|
||
<text class="iconfont icon-ic_close text--w111-fff fs-24"></text>
|
||
</view>
|
||
</view>
|
||
<view class="h-148 flex-col flex-center upload bg--w111-f5f5f5 text--w111-999 rd-16rpx"
|
||
@click='uploadpic' v-if="form.images.length < 8">
|
||
<text class="iconfont icon-ic_camera fs-42"></text>
|
||
<text class="fs-24 lh-34rpx pt-8">上传图片</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-y-center mt-32">
|
||
<text class="iconfont fs-30" :class="isSelect ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect'" @tap="proviceSelect"></text>
|
||
<text class="fs-24 text--w111-999 pl-12">已阅读并同意</text>
|
||
<text class="font-red fs-24" @tap="getAgreement">《供应商协议》</text>
|
||
</view>
|
||
<view class="w-full h-88 rd-44rpx flex-center text--w111-fff fs-28 mt-48"
|
||
:class="isSelectStar ? 'bg-red' : 'bg-disabled'" @tap="submitSupply">提交申请</view>
|
||
</view>
|
||
</view>
|
||
<Verify @success="success" captchaType="blockPuzzle" :imgSize="{ width: '330px', height: '155px' }"
|
||
ref="verify"></Verify>
|
||
<tui-modal :show="showModal" maskClosable custom @cancel="hideModal">
|
||
<view class="tui-modal-custom" @touchmove.stop.prevent>
|
||
<view class="fs-32 fw-500 lh-44rpx text-center">供应商协议</view>
|
||
<view class="fs-28 text--w111-666 lh-44rpx mt-24">
|
||
<scroll-view scroll-y="true" style="max-height: 700rpx">
|
||
<jyf-parser :html="supplierAgreement" ref="article" :tag-style="tagStyle"></jyf-parser>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="w-full h-72 rd-36rpx flex-center bg-red fs-26 text--w111-fff mt-32" @tap="hideModal">知道了</view>
|
||
</view>
|
||
</tui-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
|
||
import {toLogin} from '@/libs/login.js';
|
||
import {mapGetters} from "vuex";
|
||
import { spplyCreateApi, getCodeApi, registerVerify, userApply, getUserAgreement } from "@/api/user.js";
|
||
import colors from "@/mixins/color";
|
||
import sendVerifyCode from "@/mixins/SendVerifyCode";
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
import Verify from '../components/verify/verify.vue';
|
||
import tuiModal from "@/components/tui-modal/index.vue";
|
||
import parser from "@/components/jyf-parser/jyf-parser";
|
||
export default {
|
||
data() {
|
||
return {
|
||
sysHeight:sysHeight,
|
||
form:{
|
||
system_name:'',
|
||
name:'',
|
||
phone:'',
|
||
captcha:'',
|
||
images:[]
|
||
},
|
||
canvasWidth: "",
|
||
canvasHeight: "",
|
||
canvasStatus: false,
|
||
isSelect: false,
|
||
keyCode:'',
|
||
id:0,
|
||
showModal: false,
|
||
supplierAgreement:'',
|
||
tagStyle:{
|
||
img: 'width:100%;display:block;',
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
Verify,
|
||
tuiModal,
|
||
parser
|
||
},
|
||
mixins: [sendVerifyCode, colors],
|
||
watch: {
|
||
isLogin: {
|
||
handler: function(newV, oldV) {
|
||
if (newV) {
|
||
// #ifndef MP
|
||
this.getOrderProduct();
|
||
// #endif
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
computed:{
|
||
...mapGetters(['isLogin']),
|
||
isSelectStar(){
|
||
if(this.form.system_name && this.form.name && this.form.phone && this.form.captcha && this.form.images.length ) return true
|
||
},
|
||
headerBg(){
|
||
return {
|
||
backgroundImage: 'url('+ HTTP_REQUEST_URL + '/statics/images/supplier/apply_header.png'+')'
|
||
}
|
||
},
|
||
mainHeight(){
|
||
let {windowHeight } = uni.getSystemInfoSync();
|
||
return windowHeight - 90 - this.sysHeight
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id || 0;
|
||
if(options.id){
|
||
this.getInfo();
|
||
}
|
||
},
|
||
methods: {
|
||
/*** 删除图片* */
|
||
DelPic: function(index) {
|
||
let that = this, pic = this.form.images[index];
|
||
that.form.images.splice(index, 1);
|
||
that.$set(that.form, 'images', that.form.images);
|
||
},
|
||
/*** 上传文件 **/
|
||
uploadpic: function() {
|
||
let that = this;
|
||
this.canvasStatus = true
|
||
that.$util.uploadImageChange({count:8,url:'upload/image'}, function(res) {
|
||
that.form.images.push(res.data.url);
|
||
}, (res) => {
|
||
this.canvasStatus = false
|
||
}, (res) => {
|
||
this.canvasWidth = res.w
|
||
this.canvasHeight = res.h
|
||
});
|
||
},
|
||
code(){
|
||
if (!this.form.phone) return that.$util.Tips({
|
||
title: '请填写手机号码'
|
||
});
|
||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.form.phone)) return this.$util.Tips({
|
||
title: '请输入正确的手机号码'
|
||
});
|
||
this.$refs.verify.show()
|
||
},
|
||
success(data) {
|
||
this.$refs.verify.hide()
|
||
getCodeApi()
|
||
.then(res => {
|
||
this.keyCode = res.data.key;
|
||
this.getCode(data);
|
||
})
|
||
.catch(res => {
|
||
this.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
async getCode(data){
|
||
let that = this;
|
||
if (!this.form.phone) return that.$util.Tips({
|
||
title: '请填写手机号码'
|
||
});
|
||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.form.phone)) return this.$util.Tips({
|
||
title: '请输入正确的手机号码'
|
||
});
|
||
|
||
await registerVerify({
|
||
phone: that.form.phone,
|
||
type: 'supplier',
|
||
key: that.keyCode,
|
||
captchaType: 'blockPuzzle',
|
||
captchaVerification: data.captchaVerification
|
||
})
|
||
.then(res => {
|
||
that.$util.Tips({
|
||
title: res.msg
|
||
});
|
||
that.sendCode();
|
||
})
|
||
.catch(res => {
|
||
that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
proviceSelect(){
|
||
this.isSelect = !this.isSelect;
|
||
},
|
||
getInfo(){
|
||
userApply(this.id).then(res=>{
|
||
let data = res.data;
|
||
this.form.system_name = data.system_name;
|
||
this.form.name = data.name;
|
||
this.form.phone = data.phone;
|
||
this.form.images = data.images;
|
||
}).catch(err=>{
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
},
|
||
submitSupply(){
|
||
if(!this.isSelectStar) return this.$util.Tips({
|
||
title: '请完整填写表单信息'
|
||
});
|
||
if(!this.isSelect) return this.$util.Tips({
|
||
title: '请阅读并同意协议'
|
||
});
|
||
spplyCreateApi(this.id,this.form).then(res=>{
|
||
uni.showToast({
|
||
title:res.msg
|
||
})
|
||
uni.navigateTo({
|
||
url: '/pages/users/supplier/state?id='+ res.data.id
|
||
})
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
pageBack(){
|
||
uni.navigateBack()
|
||
},
|
||
goRecord(){
|
||
uni.navigateTo({
|
||
url: '/pages/users/supplier/record'
|
||
})
|
||
},
|
||
getAgreement(){
|
||
getUserAgreement('supplier').then(res => {
|
||
this.supplierAgreement = res.data.content;
|
||
this.showModal = true;
|
||
}).catch(err => {
|
||
that.$util.Tips({
|
||
title: err.msg
|
||
});
|
||
})
|
||
},
|
||
hideModal(){
|
||
this.showModal = false;
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.header-top{
|
||
width: 100%;
|
||
height: 358rpx;
|
||
background-size: cover;
|
||
}
|
||
.rule-btn{
|
||
height: 48rpx;
|
||
background: rgba(0,0,0,0.15);
|
||
border-radius: 24rpx 0 0 24rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
.bg-v-gradient{
|
||
background: linear-gradient(180deg, #FE7015 0%, #EB3B26 100%);
|
||
}
|
||
.content-box{
|
||
padding: 48rpx 32rpx 40rpx;
|
||
}
|
||
.code-btn{
|
||
border: 1px solid #e93323;
|
||
color: #e93323;
|
||
border-radius: 28rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
}
|
||
.upload{
|
||
border: 1rpx dashed #ccc;
|
||
}
|
||
.del-pic{
|
||
background-color: #999;
|
||
border-radius: 0 16rpx 0 16rpx;
|
||
}
|
||
.icon-a-ic_CompleteSelect, .font-red{
|
||
color: #e93323;
|
||
}
|
||
.icon-ic_unselect{
|
||
color: #ccc;
|
||
}
|
||
.bg-red{
|
||
background-color: #e93323;
|
||
}
|
||
.bg-disabled{
|
||
background-color: rgba(233, 51, 35, 0.5);
|
||
}
|
||
.modal-bottom{
|
||
height: 136rpx;
|
||
border-radius: 0 0 32rpx 32rpx;
|
||
background-color: #fff;
|
||
}
|
||
</style>
|