<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-30 18:04:49
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2021-01-04 15:28:08
|
* @Description:
|
-->
|
/*
|
* @Author: c.y
|
* @Date: 2018-12-24 15:28:12
|
* @Last Modified by: mikey.zhaopeng
|
* @Last Modified time: 2019-11-20 09:52:07
|
* @文件说明:花呗分期--开通花呗--选择个人或者启企业支付宝类型
|
*/
|
<template>
|
<div class="huabei-alipay-page h-100-g">
|
<x-header
|
:title="'开通' + this.$route.query.title"
|
:left-options="{backText:'',preventGoBack:true}"
|
@on-click-back="pageGoBack()"
|
></x-header>
|
<group>
|
<popup-picker
|
placeholder="请选择省市区"
|
ref="Area"
|
:title="tit"
|
:data="areaList"
|
:columns="3"
|
v-model="areValue"
|
show-name
|
cancel-text="取消"
|
confirm-text="确定"
|
@on-hide="setAreaValue(true)"
|
></popup-picker>
|
<x-input
|
title="支付宝账号"
|
:max="40"
|
placeholder="请输入支付宝账号"
|
text-align="right"
|
v-model.trim="alipayInfo.accountNumber"
|
></x-input>
|
<x-input
|
title="支付宝名称"
|
:max="40"
|
placeholder="请输入支付名称"
|
text-align="right"
|
v-model.trim="alipayInfo.accountName"
|
></x-input>
|
<x-input
|
title="客服电话"
|
:max="12"
|
placeholder="请输入客服电话"
|
text-align="right"
|
v-model.trim="alipayInfo.servicePhone"
|
></x-input>
|
<!-- <van-cell @click="showPop=true" title="请选择经营类目：" v-show="isddxt" is-link :value="categoryStr" /> -->
|
<!-- <popup-picker title="请选择经营类目：" v-show="isddxt" :columns="1" :data="mccList" v-model="category" :placeholder="$t('please select')"></popup-picker> -->
|
</group>
|
<f-space></f-space>
|
<f-button @on-click="handleNextStep">下一步</f-button>
|
<!-- <van-popup v-model="showPop" position="bottom" :style="{ height: '30%' }" >
|
<van-picker
|
title="经营类目"
|
value-key="name"
|
show-toolbar
|
:columns="mccList"
|
@confirm="onConfirm"
|
@cancel="onCancel"
|
/>
|
</van-popup> -->
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { PopupPicker } from "vux";
|
import sysApi from "../../../../api/oldapi";
|
import { calcArea } from "@/utils/index";
|
export default {
|
components: {
|
PopupPicker
|
},
|
name: "add-account",
|
data() {
|
return {
|
showPop:false,
|
tit: "请选择省市区",
|
areValue: [],
|
category:'',
|
categoryStr:'',
|
areaList: [],
|
// mccList:[],//类目数组
|
showArea: false, // 省市区选择器显示控制
|
addrText: "", //省市区
|
addr: {
|
province: {
|
code: "",
|
name: ""
|
},
|
city: {
|
code: "",
|
name: ""
|
},
|
area: {
|
code: "",
|
name: ""
|
}
|
},
|
alipayInfo: {
|
// addr: '', //省市区
|
accountNumber: "", // 账号
|
accountName: "", // 账号名称
|
servicePhone: "" // 客服电话
|
},
|
aliAreaList: {
|
city_list: {},
|
county_list: {},
|
province_list: {}
|
}
|
};
|
},
|
computed: {
|
...mapState(["areaList"]),
|
isddxt(){
|
if(sessionStorage.isddxt == 1){
|
return true
|
}else{
|
return false
|
}
|
}
|
},
|
created() {
|
|
// this.mccList = JSON.parse(sessionStorage.getItem('huabei_mccList'))
|
// console.log(this.mccList)
|
this.$nextTick(() => {
|
console.log(this.areaList);
|
});
|
this.getMyMation()
|
this.$api.getAliAreaList().then(res => {
|
this.areaList = res.body.provList;
|
});
|
},
|
methods: {
|
onConfirm(val){
|
console.log(val)
|
this.categoryStr = val.name
|
this.category = val.code
|
this.showPop = false
|
},
|
onCancel(){
|
this.showPop = false
|
},
|
// 获取返显资料
|
getMyMation(){
|
if(sessionStorage.getItem('huabei_detailInfo')){
|
console.log(JSON.parse(sessionStorage.getItem('huabei_detailInfo')))
|
var obj = JSON.parse(sessionStorage.getItem('huabei_detailInfo'))
|
if(obj.addr){
|
this.areValue[0] = obj.addr.province.code
|
this.areValue[1] = obj.addr.city.code
|
this.areValue[2] = obj.addr.area.code
|
this.addr = obj.addr
|
}
|
if(obj.aliAccount){
|
this.alipayInfo.accountNumber = obj.aliAccount
|
}
|
if(obj.aliAccountName){
|
this.alipayInfo.accountName = obj.aliAccountName
|
}
|
if(obj.servicePhone){
|
this.alipayInfo.servicePhone = obj.servicePhone
|
}
|
}
|
},
|
//地区选择确认事件
|
setAreaValue() {
|
this.addrText = this.$refs.Area.getNameValues();
|
this.alipayInfo.addr = this.addr = {
|
province: {
|
code: this.areValue[0],
|
name: this.addrText.split(" ")[0]
|
},
|
city: {
|
code: this.areValue[1],
|
name: this.addrText.split(" ")[1]
|
},
|
area: {
|
code: this.areValue[2],
|
name: this.addrText.split(" ")[2]
|
}
|
};
|
console.log(this.areValue)
|
},
|
// 点击下一步
|
handleNextStep() {
|
console.log(this.addr);
|
if (this.$tool.checkValEmpty(this.addr.area.code)) {
|
this.$notify_success("请选择省市区");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.alipayInfo.accountNumber)) {
|
this.$notify_success("请输入支付宝账号");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.alipayInfo.accountName)) {
|
this.$notify_success("请输入支付宝名称");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.alipayInfo.servicePhone)) {
|
this.$notify_success("请输入客服电话");
|
return false;
|
}
|
var req = / ^[\-]?\d+(\.\d+)?$/
|
if (req.test(this.alipayInfo.servicePhone)) {
|
this.$notify_success("请输入正确客服电话");
|
return false;
|
}
|
// if (this.$tool.checkValEmpty(this.category)&&sessionStorage.isddxt == 1) {
|
// this.$notify_success("请选择经营类目");
|
// return false;
|
// }
|
// if (
|
// !(
|
// this.$tool.checkPhone(this.alipayInfo.accountNumber) ||
|
// this.$tool.checkEmail(this.alipayInfo.accountNumber)
|
// )
|
// ) {
|
// this.$notify_success("请输入正确的支付宝账号");
|
// return false;
|
// }
|
// 由于支付宝名称，可以有个人账号或者企业账号，并不知道其具体的规则，所以
|
// 不进行具体规则的效验，只进行必填的验证。
|
// 存在在本地，统一提交开通花呗分期
|
|
sessionStorage.setItem(
|
"huabei_accountNumber",
|
this.alipayInfo.accountNumber
|
);
|
sessionStorage.setItem("huabei_accountName", this.alipayInfo.accountName);
|
sessionStorage.setItem(
|
"huabei_servicePhone",
|
this.alipayInfo.servicePhone
|
);
|
sessionStorage.setItem("huabei_addr", JSON.stringify(this.addr));
|
if(sessionStorage.isddxt == 1){
|
sessionStorage.setItem("huabei_category", JSON.stringify(this.category));
|
}
|
|
|
this.$router.push({
|
path: "/huabei/store-pictures",
|
query: {
|
...this.$route.query
|
}
|
});
|
},
|
pageGoBack() {
|
if(this.$route.query.isApp == 1){
|
this.$router.go(-1)
|
}else{
|
if (this.$route.query.typeId) {
|
this.$router.push({
|
path: "/huabei/open",
|
query: { ...this.$route.query }
|
});
|
} else {
|
this.$router.push({ path: "/huabei/open" });
|
}
|
}
|
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.huabei-alipay-page {
|
padding-top: 54px;
|
background-color: #f1f1f1;
|
}
|
/deep/.vux-cell-value {
|
color: #333;
|
font-size: 16px;
|
}
|
.choose {
|
font-size: 14px;
|
}
|
/deep/.van-cell__value {
|
position: relative;
|
overflow: hidden;
|
color: #333;
|
font-size: 16px;
|
text-align: right;
|
vertical-align: middle;
|
word-wrap: break-word;
|
}
|
</style>
|
