You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

205 lines
6.7 KiB

<template>
<view>
<!-- 导航条 -->
<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
<view class="cu-bar bg-bgcolor fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
<view class="action" @tap="$wanlshop.back(1)">
<text class="wlIcon-fanhui1"></text>
</view>
<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
申请入驻
</view>
<view class="action" @tap="$wanlshop.to('/pages/user/service')">
<text class="wlIcon-kefu"></text>
</view>
</view>
</view>
<form @submit="formSubmit">
<view class="cu-form-group">
<view class="title">店铺类型</view>
<picker @change="PickerChange" :value="shopdata.state" :range="state_text">
<view class="picker">
{{state_text[shopdata.state]}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">{{name_text[shopdata.state]}}</view>
<input name="name" v-model="shopdata.name" :placeholder="'请输入'+name_text[shopdata.state]"></input>
</view>
<view class="cu-form-group">
<view class="title">{{number_text[shopdata.state]}}</view>
<input name="number" v-model="shopdata.number" :placeholder="'请输入'+number_text[shopdata.state]"></input>
</view>
<view class="cu-form-group margin-top-bj" :class="shopdata.state == 2 ? '':'margin-bottom-bj'">
<view class="title">{{image_text[shopdata.state]}}</view>
<input name="image" v-model="shopdata.image" :placeholder="'点击上传'+image_text[shopdata.state]" disabled @tap="chooseImg('image')"></input>
<view class="cu-avatar radius" v-if="shopdata.image" @tap="previewImage(0)">
<image :src="$wanlshop.oss(shopdata.image, 32, 0, 1)" mode="widthFix"></image>
</view>
</view>
<view class="cu-form-group margin-bottom-bj" v-if="shopdata.state == 2">
<view class="title">商标证书</view>
<input name="trademark" v-model="shopdata.trademark" placeholder="点击上传商标证书" disabled @tap="chooseImg('trademark')"></input>
<view class="cu-avatar radius" v-if="shopdata.trademark" @tap="previewImage(1)">
<image :src="$wanlshop.oss(shopdata.trademark, 32, 0, 1)" mode="widthFix"></image>
</view>
</view>
<view class="cu-form-group">
<view class="title">微信号</view>
<input name="wechat" v-model="shopdata.wechat" placeholder="请输入微信号"></input>
<text class='wlIcon-WeChat text-green'></text>
</view>
<view class="cu-form-group">
<view class="title">联系方式</view>
<input name="mobile" v-model="shopdata.mobile" maxlength="11" type="number" placeholder="请输入手机号"></input>
</view>
<view class="edgeInsetBottom"></view>
<view class="wanlian cu-bar tabbar foot flex flex-direction">
<button form-type="submit" :disabled="shopdata.verify == 3" class="cu-btn wanl-bg-orange lg">{{verify_text[shopdata.verify]}}</button>
</view>
</form>
</view>
</template>
<script>
import graceChecker from '@/common/graceChecker';
export default {
data() {
return {
state_text: ['个人', '企业', '旗舰店'],
name_text: ['姓名', '企业名称', '企业名称'],
number_text: ['身份证号码', '统一信用代码', '统一信用代码'],
image_text: ['手持身份证', '营业执照', '营业执照'],
verify_text: ['立即入驻','已申请 修改','入驻审核中','已入驻不可操作','未通过审核','已修改成功'],
shopdata:{
state: 0,
verify: 0,
image: '',
trademark: ''
}
}
},
onLoad(option) {
var data = JSON.parse(option.data);
if (data.id) {
this.shopdata = data;
}
},
methods: {
PickerChange(e) {
this.shopdata.state = e.detail.value
},
// 提交申请
formSubmit(e) {
// verify:0=提交资质,1=提交店铺,2=提交审核,3=通过,4=未通过
if (this.shopdata.verify != 3) {
this.wanlChecker(e);
}else{
this.$wanlshop.msg('已成功入驻,不可修改再修改申请信息');
}
},
async wanlChecker(e){
//定义表单规则
let rule = [
{name: 'name', checkType: 'notnull', errorMsg: '请输入'+ this.name_text[this.shopdata.state]},
{name: 'number', checkType: 'notnull', errorMsg: '请输入'+ this.number_text[this.shopdata.state]},
{name: 'image', checkType: 'notnull', errorMsg: '请上传'+ this.image_text[this.shopdata.state]},
// {name: 'trademark', checkType: 'notnull', errorMsg: '请上传商标证书'},
{name: 'wechat', checkType: 'notnull', errorMsg: '请输入微信号'},
{name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号'}
];
//进行表单检查
let formData = e.detail.value;
let checkRes = graceChecker.check(formData, rule);
if(checkRes){
var shopdata = this.shopdata;
this.$api.post({
url: '/wanlshop/shop/apply',
data: shopdata,
success: res => {
this.shopdata = res;
if (shopdata.verify == 0) {
shopdata.verify = 2;
this.$wanlshop.msg('提交成功,平台将于7个工作日内与您联系');
}else{
shopdata.verify = 5;
this.$wanlshop.msg('修改成功!');
}
}
});
}else{
this.$wanlshop.msg(graceChecker.error);
}
},
// 选择图片
chooseImg(name) {
uni.chooseImage({
sourceType: ["camera", "album"],
sizeType: "compressed",
count: 1,
success: res => {
this.$api.get({
url: '/wanlshop/common/uploadData',
success: updata => {
this.$api.upload({
url: updata.uploadurl,
filePath: res.tempFilePaths[0],
name: 'file',
formData: updata.storage == 'local' ? null : updata.multipart,
success: data => {
this.shopdata[name] = data.fullurl;
}
});
}
});
}
})
},
//预览图片
previewImage(key) {
let urls = [];
let shopdata = this.shopdata;
if (shopdata.state == 2) {
urls = [this.$wanlshop.oss(shopdata.image, 320, 0, 1), this.$wanlshop.oss(shopdata.trademark, 320, 0, 1)];
}else{
urls = [this.$wanlshop.oss(shopdata.image, 320, 0, 1)];
}
uni.previewImage({
urls: urls,
current: urls[key],
indicator: 'number'
});
}
}
}
</script>
<style>
.cu-btn[disabled] {
opacity: 1;
color: #ffffff;
background: #fe660059;
}
.wanlian.cu-bar.tabbar {
background-color: transparent;
}
.wanlian.cu-bar.tabbar .cu-btn {
width: calc(100% - 50rpx);
}
.wanlian.cu-bar.tabbar .cu-btn.lg {
font-size: 32rpx;
height: 86rpx;
}
.cu-form-group .title, .cu-form-group uni-input{
font-size: 28rpx;
}
.cu-avatar image{
width: 64rpx;
height: 64rpx;
}
</style>