<template>
|
<view class="apply-team">
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
<view class="ww100" :style="'height:'+topBarTop()+'px;'"></view>
|
<view class="tc head_top" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
|
<view class="reg180" @click="goback"><text class="icon iconfont icon-jiantou"></text></view>
|
<view class="fb">{{titel}}</view>
|
</view>
|
<!-- #endif -->
|
<view class="banner d-c-c d-c" v-if="top_background!=''">
|
<image :src="top_background" mode="widthFix"></image>
|
</view>
|
<view class="banner-fill"></view>
|
<!--申请成功-->
|
<template v-if="!is_applying && is_pass">
|
<view class="form-wrap p30 f30">
|
<view class="pb30 d-c-c gray3 f40 fb">
|
{{words.apply.words.title.value||''}}
|
</view>
|
<form @submit="formCheck" @reset="formReset">
|
<view class="form-item border-b">
|
<view class="field-name">选择代理级别</view>
|
<view @click="choose(0)" class="choose-level-item ml20 d-s-c flex-1">
|
<view class="flex-1" :style="{'color':`${choose_level.value > 0 ? '#353535': '#999'}`}">{{choose_level.label}}</view>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
<view class="form-item border-b">
|
<view class="field-name">选择省</view>
|
<view @click="choose(1)" class="choose-level-item ml20 d-s-c flex-1">
|
<view class="flex-1" :style="{'color':`${choose_province.value > 0 ? '#353535': '#999'}`}">{{choose_province.label}}</view>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
<view class="form-item border-b" v-if="choose_level.value > 1">
|
<view class="field-name">选择市</view>
|
<view @click="choose(2)" class="choose-level-item ml20 d-s-c flex-1">
|
<view class="flex-1" :style="{'color':`${choose_city.value > 0 ? '#353535': '#999'}`}">{{choose_city.label}}</view>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
<view class="form-item border-b" v-if="choose_level.value > 2">
|
<view class="field-name">选择区/县</view>
|
<view @click="choose(3)" class="choose-level-item ml20 d-s-c flex-1">
|
<view class="flex-1" :style="{'color':`${choose_area.value > 0 ? '#353535': '#999'}`}">{{choose_area.label}}</view>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
<view class="form-item border-b">
|
<view class="field-name">姓名</view>
|
<input class="flex-1 ml20" name="name" type="text" value="" placeholder-class="grary" placeholder="请输入姓名" />
|
</view>
|
<view class="form-item border-b">
|
<view class="field-name">手机号</view>
|
<input class="flex-1 ml20" name="mobile" type="number" value="" placeholder-class="grary" placeholder="请输入手机" />
|
</view>
|
<view class="d-c-c p-20-0 f28">
|
<checkbox-group @change="changeFunc">
|
<checkbox value="checkbox" :checked="is_read" />
|
</checkbox-group>
|
<text>我已阅读并了解</text>
|
<text class="red" @click="isPopup=true">
|
【{{ words.apply.words.license.value }}】
|
</text>
|
</view>
|
<view class="d-c-c mt30">
|
<button class="btn-red" form-type="submit">{{ words.apply.words.submit.value }}</button>
|
</view>
|
</form>
|
</view>
|
</template>
|
<!--分销商审核中-->
|
<template v-if="is_applying">
|
<view class="form-wrap p30 f30">
|
<view class="d-c-c pt30">
|
<text style=" font-size: 100rpx;" class="icon iconfont icon-icon_xianshi-xian"></text>
|
</view>
|
<view class="p-30-0 d-c-c gray6 f30">
|
{{ words.apply.words.wait_audit.value }}
|
</view>
|
<view class="p30 mt30 d-c-c">
|
<button type="primary" class="btn-red" @click="gotoShop">{{ words.apply.words.goto_mall.value }}</button>
|
</view>
|
</view>
|
</template>
|
|
<Condition :checkData="checkData" :words="words" v-on:reset="resetChoose" v-if="!is_pass"></Condition>
|
|
<!--协议-->
|
<Popup :show="isPopup" msg="申请协议">
|
<view class="agreement-content f28 lh150">
|
{{agreement}}
|
</view>
|
<view class="ww100 pt20 d-c-c">
|
<button type="primary" class="btn-red" @click="isPopup=false">我已阅读</button>
|
</view>
|
</Popup>
|
<!-- 选择弹窗 -->
|
<view class="modal" @click="close" v-show="show_dialog || show_list">
|
<view :class="['select-dialog', `${iphone_x?'iphone_x':''}`]" @click.stop="">
|
<view class="select-title">
|
<view>{{dialog_title}}</view>
|
<view @click.stop="confirm" class="submit-btn">确定</view>
|
</view>
|
<picker-view v-show="show_dialog" :style="{ 'height': `${dialog_title == '选择代理级别' ? '360' : '536'}rpx`}" indicator-style="height: 44px;" @change="bindChange" :value="chooseIndex">
|
<picker-view-column>
|
<view
|
v-for="(item,idx) in choose_list" :key="item.label"
|
:class="[`picker-view`,{
|
'sure-color': newIndex == idx
|
}]">
|
{{item.label}}
|
</view>
|
</picker-view-column>
|
</picker-view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Popup from '@/components/uni-popup.vue'
|
import Condition from './part/condition.vue';
|
export default {
|
components: {
|
Popup,
|
Condition
|
},
|
data() {
|
return {
|
/*弹窗是否打开*/
|
isPopup: false,
|
/*是否阅读了规则*/
|
is_read:false,
|
agreement: '',
|
is_applying: false,
|
referee_name:'',
|
words:{},
|
is_region:'',
|
/*顶部背景*/
|
top_background: '',
|
/*小程序订阅消息*/
|
temlIds: [],
|
province: [],
|
city: [],
|
area: [],
|
level_list: [
|
{value: '1',label:'省代理'},
|
{value: '2',label:'市代理'},
|
{value: '3',label:'区/县代理'}
|
],
|
choose_list: [],
|
choose_level: {
|
value: 0,
|
label: '请选择代理级别'
|
},
|
choose_province: {
|
value: 0,
|
label: '请选择省'
|
},
|
choose_city: {
|
value: 0,
|
label: '请选择市'
|
},
|
choose_area: {
|
value: 0,
|
label: '请选择区/县'
|
},
|
show_dialog: false,
|
show_list: false,
|
dialog_title: '',
|
newIndex: 0,
|
chooseIndex: [0],
|
first: true,
|
check: {},
|
titel: '',
|
iphone_x: false,
|
up: false,
|
cityAll: [],
|
areaAll: [],
|
chooseAllIndex: [0, 0, 0, 0],
|
chooseNow: 0,
|
is_pass: true,
|
checkData: []
|
}
|
},
|
mounted() {
|
/*数据*/
|
this.getData();
|
},
|
created() {
|
let self = this;
|
uni.getSystemInfo({
|
success: function (res) {
|
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
|
model.forEach(item => {
|
//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
|
if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
|
self.iphone_x = true;
|
}
|
})
|
}
|
});
|
},
|
methods: {
|
resetChoose() {
|
this.is_pass = true;
|
this.choose_level = {
|
value: 0,
|
label: '请选择代理级别'
|
}
|
this.choose_province = {
|
value: 0,
|
label: '请选择省'
|
}
|
this.choose_city = {
|
value: 0,
|
label: '请选择市'
|
}
|
this.choose_area = {
|
value: 0,
|
label: '请选择区/县'
|
}
|
},
|
close() {
|
this.show_list = false;
|
this.show_dialog = false;
|
// this.chooseIndex = [0];
|
// this.newIndex = 0;
|
// this.choose_list = [];
|
},
|
choose(index) {
|
// this.show_list = false;
|
this.show_dialog = false;
|
// this.chooseIndex = [0];
|
// this.newIndex = 0;
|
this.chooseNow = index;
|
// this.choose_list = [];
|
if(index == 0 && !this.up) {
|
this.dialog_title = '选择代理级别';
|
this.choose_list = this.level_list;
|
for(let i in this.level_list) {
|
if(this.level_list[i].value == this.choose_level.value) {
|
this.chooseIndex[0] = +i;
|
this.newIndex = +i;
|
}
|
}
|
this.show_dialog = true;
|
}else if(index == 1 && !this.up) {
|
this.dialog_title = '选择省';
|
this.choose_list = this.province;
|
for(let i in this.province) {
|
if(this.province[i].value == this.choose_province.value) {
|
this.chooseIndex[0] = +i;
|
this.newIndex = +i;
|
this.provinceIndex = +i;
|
}
|
}
|
this.show_dialog = true;
|
}else if(index == 2) {
|
this.dialog_title = '选择市';
|
this.choose_list = this.city;
|
for(let i in this.city) {
|
if(this.city[i].value == this.choose_city.value) {
|
this.chooseIndex[0] = +i;
|
this.newIndex = +i;
|
}
|
}
|
this.show_dialog = true;
|
}else if(index == 3 && !this.up) {
|
this.dialog_title = '选择区/县';
|
this.choose_list = this.area;
|
for(let i in this.choose_list) {
|
if(this.area[i].value == this.choose_area.value) {
|
this.chooseIndex[0] = +i;
|
this.newIndex = +i;
|
}
|
}
|
this.show_dialog = true;
|
}
|
this.$forceUpdate();
|
},
|
confirm() {
|
this.chooseAllIndex[this.chooseNow] = this.newIndex;
|
if(this.dialog_title == '选择代理级别') {
|
this.choose_level = this.choose_list[this.newIndex];
|
console.log(this.choose_level);
|
if(this.newIndex != this.chooseIndex[0]) {
|
// if(this.choose_level.value == 3) {
|
// this.choose_city = {
|
// value: 0,
|
// label: '请选择市'
|
// }
|
// this.choose_area = [];
|
// }else if(this.choose_level.value == 2) {
|
// this.choose_city = []
|
// }
|
|
}else {
|
this.chooseIndex[0] = this.newIndex;
|
|
}
|
}else if(this.dialog_title == '选择省') {
|
this.choose_province = this.choose_list[this.newIndex];
|
this.city = this.cityAll[this.newIndex];
|
console.log(this.chooseAllIndex);
|
if(this.newIndex != this.chooseIndex[0]) {
|
this.choose_city = {
|
value: 0,
|
label: '请选择市'
|
}
|
this.choose_area = {
|
value: 0,
|
label: '请选择区/县'
|
}
|
}else {
|
this.chooseIndex[0] = this.newIndex;
|
|
}
|
}else if(this.dialog_title == '选择市') {
|
this.choose_city = this.choose_list[this.newIndex];
|
this.area = this.areaAll[this.chooseAllIndex[1]][this.newIndex];
|
if(this.newIndex != this.chooseIndex[0]) {
|
this.choose_area = {
|
value: 0,
|
label: '请选择区/县'
|
}
|
}else {
|
this.chooseIndex[0] = this.newIndex;
|
}
|
}else if(this.dialog_title == '选择区/县') {
|
this.choose_area = this.choose_list[this.newIndex];
|
}
|
this.show_dialog = false;
|
this.show_list = false;
|
},
|
bindChange(e) {
|
this.newIndex = +e.detail.value[0];
|
console.log(this.newIndex);
|
},
|
/*获取数据*/
|
getData() {
|
let self = this;
|
uni.showLoading({
|
title: '加载中'
|
})
|
self._get('user.region/apply', {
|
platform: self.getPlatform()
|
}, function(res) {
|
uni.hideLoading();
|
self.titel = res.data.words.apply.title.value;
|
self.top_background = res.data.background;
|
self.is_applying = res.data.is_applying;
|
self.is_region=res.data.is_region;
|
self.words = res.data.words;
|
self.temlIds = res.data.template_arr;
|
self.agreement = res.data.license;
|
self.province = res.data.regionData[0];
|
self.cityAll = res.data.regionData[1];
|
self.areaAll = res.data.regionData[2];
|
/*设置标题*/
|
uni.setNavigationBarTitle({
|
title: self.words.apply.title.value
|
});
|
if(self.is_region){
|
uni.navigateBack({});
|
}
|
});
|
},
|
|
/*申请*/
|
formCheck: function(e) {
|
let formdata = e.detail.value;
|
console.log(formdata);
|
let self = this;
|
formdata.region_level = self.choose_level.value;
|
formdata.province_id = self.choose_province.value;
|
formdata.city_id = self.choose_city.value;
|
formdata.area_id = self.choose_area.value;
|
if (formdata.region_level == 0) {
|
uni.showToast({
|
title: '请选择代理级别！',
|
icon:'none'
|
});
|
return;
|
}
|
if (formdata.province_id == 0) {
|
uni.showToast({
|
title: '请选择省！',
|
icon:'none'
|
});
|
return;
|
}
|
if (formdata.region_level == 2 && formdata.city_id == 0) {
|
uni.showToast({
|
title: '请选择市！',
|
icon:'none'
|
});
|
return;
|
}
|
if (formdata.region_level == 3 && formdata.area_id == 0) {
|
uni.showToast({
|
title: '请选择区/县！',
|
icon:'none'
|
});
|
return;
|
}
|
if(formdata.name==''){
|
uni.showToast({
|
title: '请输入姓名！',
|
icon:'none'
|
});
|
return;
|
}
|
if(formdata.mobile.length==''){
|
uni.showToast({
|
title: '请输入手机号！',
|
icon: 'none'
|
});
|
return;
|
}
|
if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.mobile)) {
|
uni.showToast({
|
title: '手机有误,请重填！',
|
icon: 'none'
|
});
|
return;
|
}
|
|
if(!self.is_read){
|
uni.showToast({
|
title: '请同意协议！',
|
icon:'none'
|
});
|
return;
|
}
|
|
uni.showLoading({
|
title: '正在提交',
|
mask: true
|
})
|
self._post('plus.region.apply/check', formdata, function(res) {
|
self.is_pass = res.data.is_pass;
|
if (res.data.is_pass) {
|
self.formSubmit(formdata);
|
} else {
|
uni.hideLoading();
|
self.checkData = res.data.checkData;
|
self.checkData.level_name = self.choose_level.label;
|
self.checkData.province_name = self.choose_province.label;
|
self.checkData.city_name = self.choose_city.label;
|
self.checkData.area_name = self.choose_area.label;
|
}
|
});
|
},
|
|
formSubmit(e) {
|
let self = this;
|
let callback = function(){
|
self._post('plus.region.apply/submit', e, function(res) {
|
uni.hideLoading();
|
uni.showToast({
|
title: '申请成功'
|
});
|
self.getData();
|
});
|
};
|
self.subMessage(self.temlIds, callback);
|
},
|
|
/*去商城看看*/
|
gotoShop(){
|
uni.switchTab({
|
url:'/pages/index/index'
|
})
|
},
|
|
/*同意协议*/
|
changeFunc(e){
|
if(e.target.value.length>0){
|
this.is_read=true;
|
}else{
|
this.is_read=false;
|
}
|
},
|
goback() {
|
uni.navigateBack();
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.apply-team .banner {
|
position: absolute;
|
width: 100%;
|
z-index: 0;
|
min-height: 167rpx;
|
background-repeat: no-repeat;
|
background-size: 100%;
|
top: 0;
|
}
|
.apply-team .banner image{ width: 100%;}
|
.apply-team .banner-fill {
|
margin-top: 292rpx;
|
}
|
.form-wrap {
|
background: #FFFFFF;
|
// box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, .2);
|
position: relative;
|
}
|
|
.form-item {
|
padding: 20rpx 0;
|
margin-bottom: 20rpx;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
font-size: 28rpx;
|
}
|
|
.form-item .field-name {
|
width: 180rpx;
|
}
|
|
.form-item input {
|
font-size: 28rpx;
|
}
|
|
.agreement-content {
|
max-height: 60vh;
|
overflow-y: auto;
|
}
|
.apply-team .btn-red {
|
width: 600rpx;
|
height: 88rpx;
|
line-height: 88rpx;
|
border-radius: 44rpx;
|
box-shadow: 0 8rpx 16rpx 0 rgba(226,35,26,.6);
|
}
|
.choose-level {
|
padding: 80rpx 40rpx;
|
font-size: 32rpx;
|
color: #353535;
|
background-color: #fff;
|
>view {
|
border-bottom: 2rpx solid #e2e2e2;
|
margin-bottom: 36rpx;
|
}
|
.choose-level-item {
|
color: #999;
|
padding-top: 20rpx;
|
padding-bottom: 34rpx;
|
.area-list {
|
width: 530rpx;
|
text {
|
margin: 0 10rpx;
|
}
|
}
|
.more {
|
width: 22rpx;
|
height: 12rpx;
|
margin-left: 12rpx;
|
}
|
}
|
}
|
.modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 100%;
|
width: 100%;
|
z-index: 99;
|
background-color: rgba(0, 0, 0, 0.3);
|
.dialog-list {
|
padding: 46rpx 30rpx;
|
.dialog-item {
|
margin: 10rpx;
|
height: 62rpx;
|
line-height: 60rpx;
|
display: inline-block;
|
padding: 0 32rpx;
|
font-size: 32rpx;
|
color: #353535;
|
border-radius: 32rpx;
|
border: 2rpx solid #bbbbbb;
|
&.active {
|
color: #ff4544;
|
border: 2rpx solid #ff4544;
|
}
|
}
|
}
|
.protocol {
|
position: relative;
|
z-index: 99;
|
background-color: #fff;
|
width: 80%;
|
border-radius: 20rpx;
|
.protocol-name {
|
text-align: center;
|
height: 100rpx;
|
line-height: 100rpx;
|
color: #666;
|
}
|
.protocol-content {
|
padding: 10rpx 20rpx;
|
height: 720rpx;
|
overflow: auto;
|
color: #353535;
|
}
|
.read-over {
|
height: 100rpx;
|
text-align: center;
|
line-height: 100rpx;
|
background-color: #ff4544;
|
color: #fff;
|
font-size: 30rpx;
|
border-bottom-right-radius: 20rpx;
|
border-bottom-left-radius: 20rpx;
|
}
|
image {
|
height: 200rpx;
|
width: 200rpx;
|
}
|
}
|
.select-dialog {
|
&.iphone_x {
|
padding-bottom: 50rpx;
|
}
|
position: fixed;
|
border-top-left-radius: 16rpx;
|
border-top-right-radius: 16rpx;
|
width: 100%;
|
bottom: 0;
|
left: 0;
|
background-color: #fff;
|
.select-title {
|
border-top-left-radius: 16rpx;
|
border-top-right-radius: 16rpx;
|
position: relative;
|
width: 100%;
|
height: 100rpx;
|
line-height: 100rpx;
|
border-bottom: 2rpx solid #e2e2e2;
|
text-align: center;
|
font-size: 32rpx;
|
.submit-btn {
|
position: absolute;
|
right: 24rpx;
|
top: 0;
|
color: #ff4544;
|
}
|
}
|
picker-view {
|
width: 100%;
|
.picker-view {
|
line-height: 88rpx;
|
text-align:center;
|
font-size: 32rpx;
|
&.sure-color {
|
font-size: 36rpx;
|
}
|
}
|
}
|
}
|
}
|
.head_top {
|
position: absolute;
|
width: 100%;
|
height: 30px;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 32rpx;
|
z-index: 2;
|
}
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
}
|
|
.head_top .icon-jiantou {
|
|
color: #FFFFFF;
|
font-size: 30rpx;
|
}
|
|
</style>
|
