sadjv3_user/pages/my/joinUs/index.vue

476 lines
11 KiB
Vue

<template>
<view class="hehuo_view">
<view class="advantage-title">
<image style="width: 35rpx; height: 35rpx; margin-right:10rpx; margin-top: 5rpx;" src="../../../static/technician.png"></image>招商加盟</view>
<view class="advantage-bor" style="margin-right: 10rpx;"></view>
<view class="text_view">
<view class="item_view">
<view class="item_title">姓名</view>
<u-input type="text" v-model="userName" placeholder="请输入姓名" />
<view class="xian"></view>
</view>
<view class="item_view">
<view class="item_title">联系电话</view>
<u-input type="number" v-model="phone" maxlength="11" placeholder="请输入联系电话" />
<view class="xian"></view>
</view>
<view class="item_view">
<view class="item_title">联系电话</view>
<u-input type="number" v-model="phone" maxlength="11" placeholder="请输入联系电话" />
<view class="xian"></view>
</view>
<view class="item_view" v-if="applyContent">
<uni-forms ref="baseForm" :disabled="true">
<uni-forms-item label="申请加入的区域" :disabled="true">
<picker class="addRess" :disabled="true" range-key="AreaName" mode="multiSelector">
<view class="uni-input">
<text>{{applyContent}}</text>
</view>
</picker>
</uni-forms-item>
</uni-forms>
</view>
<view class="item_view" v-else>
<uni-forms ref="baseForm" >
<uni-forms-item label="申请加入的区域">
<picker class="addRess" @change="bindPickerChange" @columnchange="pluginclass" :value="pickVal" :range="cityArr"
range-key="AreaName" mode="multiSelector">
<view class="qing" v-if="pickVal2.length==0">请输入您想代理得区域</view>
<view v-else class="uni-input">
<text>{{cityData}}</text>
</view>
</picker>
</uni-forms-item>
</uni-forms>
</view>
</view>
<view class="text_view" style="margin-bottom: 20px;">
<view class="jibie">
<view class="d-title title-font">代理类型</view>
<view class="jibie-list" v-for="(item,index) in jbList" :key="index">
<view class="jibie-title">
<span class="item_title">{{item.title}}</span>
</view>
<radio-group name="openWay" style="margin-left: 20upx;" @tap='selectWay(item)'>
<label class="tui-radio">
<radio color="#019c88" :checked="openWay === item.id ? true : false" />
</label>
</radio-group>
</view>
</view>
</view>
<view class="push-button">
<view class="que-btn" @tap="pay()">提交申请</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userName: '',
phone: '',
textareaData:'',
jbList:[
{'title':'省代理','id':1},
{'title':'城市代理','id':2},
{'title':'区县代理','id':3},
],
openWay:'1',
money:'',
oneFee:'',
twoFee:'',
pickVal: [0, 0, 0], // 选择器默认值
pickVal2:[], // 辅助城市名字线索
cityArr: [], // 所有城市
applyContent: '',
}
},
onLoad() {
this.getChannel();
this.loadProvinces()
},
methods: {
loadProvinces() { // 加载省份
uni.request({
url: 'http://test-api.tiananhub.com/api/province/GetListProvince',
method: 'get',
success: async (res) => {
let {
data
} = res.data
console.log(data)
this.cityArr[0] = data
this.loadCities(data[0].AreaId)
this.$forceUpdate()
},
fail: async (res) => {}
})
},
// 请求地级市
loadCities(AreaId) {
uni.request({
url: 'http://test-api.tiananhub.com/api/province/GetListCity',
data: {
AreaId
},
method: 'get',
success: async (res) => {
let {
data
} = res.data
this.cityArr[1] = data
this.loadAreas(data[0].AreaId)
this.$forceUpdate()
},
fail: async (res) => {}
})
},
// 请求县区市
loadAreas(AreaId) {
uni.request({
url: 'http://test-api.tiananhub.com/api/province/GetListCity',
data: {
AreaId
},
method: 'get',
success: async (res) => {
let {
data
} = res.data
this.cityArr[2] = data
this.$forceUpdate()
},
fail: async (res) => {}
})
},
// 确定其他选择的值
bindPickerChange(data) {
this.pickVal=data.target.value;
this.pickVal2=data.target.value;
this.cityData=this.cityArr[0][this.pickVal2[0]].AreaName+'-'+this.cityArr[1][this.pickVal2[1]].AreaName+'-'+this.cityArr[2][this.pickVal2[2]].AreaName
},
// 选择时且未点击确定是的值
pluginclass(e) {
if (e.detail.column == 0) {
this.loadCities(this.cityArr[0][e.detail.value].AreaId);
}
if (e.detail.column == 1) {
this.loadAreas(this.cityArr[1][e.detail.value].AreaId);
}
},
// 支付订单
pay() {
let that = this
this.showpay = false;
if (this.userName === '') {
this.$queue.showToast('请输入姓名')
return;
}
if (this.phone === '' || this.phone.length != 11) {
this.$queue.showToast('请输入正确的手机号!')
return;
}
uni.showModal({
title: '付款提示',
content: '是否确定提交申请!',
success: function(re) {
if (re.confirm) {
that.$queue.showLoading('支付中...')
let data = {
level:that.openWay,
money:that.money,
name:that.userName,
phone:that.phone,
remarks:that.textareaData,
type: 2
}
that.$Request.post('/app/wxPay/payFxyMoney', data).then(rea => {
uni.hideLoading();
if (rea.code == 0) {
uni.showToast({
title: '支付成功'
})
that.callPay(rea.data);
} else {
uni.showToast({
title: rea.msg,
icon: 'none'
})
}
});
} else if (re.cancel) {
uni.hideLoading();
console.log('用户点击取消');
}
}
})
},
selectWay: function(item) {
this.openWay = item.id;
this.money=item.money
},
textareaChange(e){//备注
this.textareaData=e.detail.value
},
getChannel() {
this.$Request.getT('/app/commission/fxy/fxyConfig').then(res => {
if (res.code == 0) {
var data=[]
// for(var i=0;i<this.jbList.length;i++){
// if(this.jbList[i].id==1){
// data.push({
// 'title':'一级分销员',
// 'money':'',
// 'id':1,
// 'money':res.data.oneFee
// })
// }else{
// data.push({
// 'title':'二级分销员',
// 'money':'',
// 'id':2,
// 'money':res.data.twoFee
// })
// }
// }
this.openWay=data[0].id;
this.money=data[0].money;
this.jbList=data;
}
});
},
}
}
</script>
<style lang="less" scoped>
@import '../../../static/less/index.less';
@import '../../../static/css/index.css';
.qing{
color: rgb(192, 196, 204);
font-size: 13px;
}
/deep/.uni-forms-item__label{
font-size: 15px;
font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
color: #333333;
width: 100% !important;
}
/deep/.is-direction-left{
flex-direction: column !important;
}
.weixin{
margin-left: 5px;
}
.foot-beizhu{
border: 1px dashed #fe912e;
border-radius: 5px;
padding: 7px;
color: #fe912e;
margin-top: 10px;
}
.item_title_money{
font-size: 32rpx;
font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
color: #fb672b;
font-weight: bold;
}
.jibie-title-w{
display: flex;
flex-direction: row;
align-items: center;
}
.jibie-title{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
}
.jibie-list{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.jibie{
width: 100%;
display: flex;
flex-direction: column;
}
/deep/uni-radio .uni-radio-input{
width: 38.86rpx;
height: 38.86rpx;
margin: -1px 2px 0px -8px;
}
.chong-list-radio{
width: 29.86rpx;
height: 29.86rpx;
border-radius: 50%;
}
/deep/.uni-textarea-textarea{
font-weight: 400;
font-size: 26rpx;
}
/deep/.uni-textarea-placeholder{
font-weight: 400;
font-size: 28rpx;
color: rgb(192, 196, 204);
}
.textarea-pay-list{
width: 100%;
height: 120px;
margin-top: 10px;
}
.textarea-pay{
background-color: #f3f3f3;
width: 100%;
height: 100%;
background: #F3F3F3;
border-radius: 14rpx;
padding: 7px;
}
.list-pay{
width: 100%;
}
.title-font{
font-size:30rpx;
color: #333333;
}
.d-title{
font-size: 15px;
font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
color: #333333;
}
.header-view{
background-color: #fff;
border-radius: 11px;
}
.header-padd{
padding:30rpx;
}
.header-margin{
margin:20rpx;
}
.push-button{
width: 100%;
height: 48px;
// position: fixed;
// bottom: 0px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.que-btn{
display: inline-block;
width: 90%;
text-align: center;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
height: 40px;
border-radius: 28px;
color: #ffffff;
line-height: 40px;
margin-top: 4px;
font-size: 34rpx;
}
.margin-top-view{
width: 150upx;
height: 150upx;
background: #f7f7f7;
}
.advantage-title{
font-size: 32rpx;
font-weight: bold;
margin-top: 60rpx;
margin-left: 35rpx;
}
.advantage-bor{
width: 96px;
height: 6px;
border-radius: 3px;
bottom: 0;
background: linear-gradient(90deg, rgba(234, 248, 245, 0.7), rgba(132, 211, 196, 0.7));
margin-bottom: 80rpx;
margin-left: 35rpx;
}
.hehuo_view {
width: 100%;
padding-top: 10px;
height: 100vh;
background:#f7f7f7 url(../../../static/cooperate/cooperate6.png)no-repeat ;
background-size: 100%;
position: relative;
display: flex;
flex-direction: column;
//align-items: center;
.text_view {
width: 95%;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
.audit_message {
color: red;
width: 650rpx;
height: 50rpx;
margin-top: 50rpx;
}
.save_btn1 {
width: 650rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-top: 100rpx;
text-align: center;
line-height: 88rpx;
}
.item_view {
margin-top: 30rpx;
.item_title {
font-size: 32rpx;
font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
color: #333333;
}
input {
margin-top: 20rpx;
height: 40rpx;
font-size: 24rpx;
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
font-weight: 400;
color: #333333;
}
.xian {
width: 100%;
border-bottom: 1rpx solid #f7f7f7;
margin-top: 10rpx;
}
}
}
}
</style>