415 lines
11 KiB
Vue
415 lines
11 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<!-- <view class="form-title redtitle">嗨粉会员信息</view> -->
|
||
|
|
<view class="prefecture form-group mb20">
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('w_0240')}}
|
||
|
|
</view>
|
||
|
|
<view class="disabled-input">{{ form.pkGradeVal }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-item" @click="openCPop('pkCountry')">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('PER_DA_3')}}
|
||
|
|
</view>
|
||
|
|
<view class="flex-1 d-s-c">
|
||
|
|
<image class="queryimg mr10" mode="heightFix"
|
||
|
|
:src="pkCountry>=0&&countryList[pkCountry] ? countryList[pkCountry].nationalFlag1 : ''"></image>
|
||
|
|
<view class="flex-1">
|
||
|
|
{{pkCountry>=0&&countryList[pkCountry] ? countryList[pkCountry].shortName : ''}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<text class="icon iconfont icon-jiantou"></text>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="form-item" @click="openCPop('pkSettleCountry')"> -->
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('PER_DA_4')}}
|
||
|
|
</view>
|
||
|
|
<view class="flex-1 d-s-c">
|
||
|
|
<image class="queryimg mr10" mode="heightFix"
|
||
|
|
:src="pkSettleCountry>=0&&countryList[pkSettleCountry] ? countryList[pkSettleCountry].nationalFlag1 : ''">
|
||
|
|
</image>
|
||
|
|
<view class="flex-1">
|
||
|
|
{{pkSettleCountry>=0&&countryList[pkSettleCountry] ? countryList[pkSettleCountry].shortName : ''}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <text class="icon iconfont icon-jiantou"></text> -->
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('N_I_164')}}
|
||
|
|
</view>
|
||
|
|
<input @blur="changeInput('parent')" class="form-input" type="text" v-model="form.parent"
|
||
|
|
:placeholder="$t('w_0264')" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('N_I_165')}}
|
||
|
|
</view>
|
||
|
|
<view class="disabled-input">{{ form.parentName || '' }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('CK_KS_14')}}
|
||
|
|
</view>
|
||
|
|
<input class="form-input" type="text" v-model="form.memberName" :placeholder="$t('S_C_70')" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('MN_F_23')}}
|
||
|
|
</view>
|
||
|
|
<input class="form-input" type="text" v-model="form.phone" :placeholder="$t('S_C_70')" />
|
||
|
|
</view>
|
||
|
|
<!-- <view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
证件号码
|
||
|
|
</view>
|
||
|
|
<input class="form-input" type="text" v-model="form.idCard" :placeholder="$t('S_C_70')" />
|
||
|
|
</view> -->
|
||
|
|
<!-- <picker :range="accountList" range-key="bankName" @change="changeAccount">
|
||
|
|
<view class="form-item" style="border-bottom: 1rpx solid #eee;">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
银行名称
|
||
|
|
</view>
|
||
|
|
<input class="form-input" disabled type="text" :value="bank_index == -1 ? '请选择' : accountList[bank_index].bankName" placeholder="" />
|
||
|
|
<text class="icon iconfont icon-jiantou"></text>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
银行账号
|
||
|
|
</view>
|
||
|
|
<input class="form-input" type="text" v-model="form.cardNumber" :placeholder="$t('S_C_70')" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
开户支行
|
||
|
|
</view>
|
||
|
|
<input class="form-input" type="text" v-model="form.subBankName" :placeholder="$t('S_C_70')" />
|
||
|
|
</view> -->
|
||
|
|
<!-- <view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
邮箱
|
||
|
|
</view>
|
||
|
|
<input class="form-input" type="text" v-model="form.email" :placeholder="$t('S_C_70')" />
|
||
|
|
</view> -->
|
||
|
|
<picker :range="deliveryList" :disabled="userCountry==1" range-key="label" @change="changeDelivery">
|
||
|
|
<view class="form-item" style="border-bottom: 1rpx solid #eee;" v-if="deliveryList[deliveryIndex]">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
<!-- 发货方式 -->
|
||
|
|
{{$t('MN_F_T_140')}}
|
||
|
|
</view>
|
||
|
|
<input class="form-input" disabled type="text" :value="deliveryList[deliveryIndex].label"
|
||
|
|
placeholder="" />
|
||
|
|
<text class="icon iconfont icon-jiantou" v-if="userCountry!=1"></text>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
<!-- 运输方式 -->
|
||
|
|
<!-- <picker :range="transportType" :disabled="userCountry==1" range-key="label" @change="changeTransport">
|
||
|
|
<view class="form-item" v-if="transportType[transportIndex]">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
{{$t('MN_F_T_163')}}
|
||
|
|
</view>
|
||
|
|
<input class="form-input" disabled type="text" :value="transportType[transportIndex].label"
|
||
|
|
placeholder="" />
|
||
|
|
<text class="icon iconfont icon-jiantou" v-if="userCountry!=1"></text>
|
||
|
|
</view>
|
||
|
|
</picker> -->
|
||
|
|
<picker :range="storeList" v-if="userCountry!=1" range-key="storeName" @change="changeStore">
|
||
|
|
<view class="form-item" style="border-bottom: 1rpx solid #eee;">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="white mr10">*</text>
|
||
|
|
<!-- 会员店铺 -->
|
||
|
|
{{$t('w_0100')}}
|
||
|
|
</view>
|
||
|
|
<input class="disabled-input" disabled type="text"
|
||
|
|
:value="storeList&&storeList[storeIndex]&&storeList[storeIndex].storeName || ''"
|
||
|
|
placeholder="" />
|
||
|
|
<text class="icon iconfont icon-jiantou"></text>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
<picker :range="storehouse" v-if="userCountry!=1" range-key="name" @change="changeStorehouse">
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="white mr10">*</text>
|
||
|
|
<!-- 仓库 -->
|
||
|
|
{{$t('w_0102')}}
|
||
|
|
</view>
|
||
|
|
<input class="disabled-input" disabled type="text"
|
||
|
|
:value="storehouse&&storehouse[storehouseIndex]&&storehouse[storehouseIndex].name || ''"
|
||
|
|
placeholder="" />
|
||
|
|
<text class="icon iconfont icon-jiantou"></text>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
<view v-if="isQuery" @touchmove.stop.prevent="moveHandle">
|
||
|
|
<view class="pop-up-bg" @click="isQuery = false"></view>
|
||
|
|
<view class="pop-up">
|
||
|
|
<view class="d-e-c p20">
|
||
|
|
<view class="blue f28" @click="closeQuery">完成</view>
|
||
|
|
</view>
|
||
|
|
<picker-view :indicator-style="'height: 80px;'" @change="changeQuery" class="picker-view">
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="item d-c d-c-c" v-for="(item, index) in countryList" :key="index">
|
||
|
|
<image style="height: 50px;" mode="heightFix" :src="item.nationalFlag1"></image>
|
||
|
|
<view class="f28 gray9 mt10">{{ item.name }}</view>
|
||
|
|
</view>
|
||
|
|
</picker-view-column>
|
||
|
|
</picker-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// registType: 0,
|
||
|
|
pkCountry: -1,
|
||
|
|
pkSettleCountry: -1,
|
||
|
|
isQuery: false,
|
||
|
|
contactAddress: '',
|
||
|
|
deliveryIndex: 0,
|
||
|
|
storeIndex: '',
|
||
|
|
storehouseIndex: '',
|
||
|
|
transportIndex: 0,
|
||
|
|
bank_index: -1,
|
||
|
|
poptype: '',
|
||
|
|
queryValue: 0,
|
||
|
|
placeDeptList: ['安置左区', '安置右区']
|
||
|
|
};
|
||
|
|
},
|
||
|
|
inject: ['form'],
|
||
|
|
props: ['deliveryList', 'registType', 'transportType', 'accountList', 'countryList', 'userCountry', 'storeList',
|
||
|
|
'storehouse'
|
||
|
|
],
|
||
|
|
watch: {
|
||
|
|
countryList: function(n, o) {
|
||
|
|
let self = this;
|
||
|
|
if (n != o) {
|
||
|
|
let num = 0;
|
||
|
|
n.some((item, index) => {
|
||
|
|
if (item.pkId == self.userCountry) {
|
||
|
|
num = index;
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
self.pkSettleCountry = num;
|
||
|
|
self.pkCountry = num;
|
||
|
|
if (n) {
|
||
|
|
self.form.pkSettleCountry = n[self.pkSettleCountry].pkId;
|
||
|
|
self.form.pkCountry = n[self.pkCountry].pkId;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
console.log(this.form);
|
||
|
|
console.log(this.deliveryList);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeStore(e) {
|
||
|
|
this.storeIndex = e.detail.value;
|
||
|
|
this.form.pkMemberStore = this.storeList[this.storeIndex].pkId;
|
||
|
|
},
|
||
|
|
changeStorehouse(e) {
|
||
|
|
this.storehouseIndex = e.detail.value;
|
||
|
|
this.form.pkStorehouse = this.storehouse[this.storehouseIndex].pkId;
|
||
|
|
},
|
||
|
|
changeInput(e) {
|
||
|
|
this.$emit('changeInput', e)
|
||
|
|
},
|
||
|
|
changeDelivery(e) {
|
||
|
|
this.deliveryIndex = e.detail.value;
|
||
|
|
this.form.deliveryWay = this.deliveryList[this.deliveryIndex].value;
|
||
|
|
this.$emit('queryOrderPostage');
|
||
|
|
},
|
||
|
|
|
||
|
|
changeTransport(e) {
|
||
|
|
this.transportIndex = e.detail.value;
|
||
|
|
this.form.transType = this.transportType[this.transportIndex].value;
|
||
|
|
this.$emit('queryOrderPostage');
|
||
|
|
},
|
||
|
|
changeAccount(e) {
|
||
|
|
this.bank_index = e.detail.value;
|
||
|
|
console.log(this.bank_index);
|
||
|
|
this.form.pkBank = this.accountList[this.bank_index].value;
|
||
|
|
},
|
||
|
|
changeType(n) {
|
||
|
|
this.registType = n;
|
||
|
|
},
|
||
|
|
closeQuery() {
|
||
|
|
this[this.poptype] = this.queryValue;
|
||
|
|
if (this.poptype == 'pkSettleCountry') {
|
||
|
|
this.form.pkSettleCountry = this.countryList[this.pkSettleCountry].pkId;
|
||
|
|
} else {
|
||
|
|
this.form.pkCountry = this.countryList[this.pkCountry].pkId;
|
||
|
|
}
|
||
|
|
this.isQuery = false;
|
||
|
|
},
|
||
|
|
changeQuery(e) {
|
||
|
|
this.queryValue = e.detail.value[0];
|
||
|
|
},
|
||
|
|
moveHandle() {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
openCPop(name) {
|
||
|
|
this.poptype = name;
|
||
|
|
this.isQuery = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.pop-up-bg {
|
||
|
|
position: fixed;
|
||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pop-up {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 60vh;
|
||
|
|
background-color: #ffffff;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.picker-view {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 600rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 80px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.queryimg {
|
||
|
|
height: 60rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-top-nav {
|
||
|
|
height: 94rpx;
|
||
|
|
background: #fb3024;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-top-nav-item {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 1.5;
|
||
|
|
word-break: break-all;
|
||
|
|
flex: 1;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
height: 94rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-top-nav-item.active::before {
|
||
|
|
content: '';
|
||
|
|
width: 52rpx;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 12rpx;
|
||
|
|
margin: auto;
|
||
|
|
height: 6rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-title {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 106rpx;
|
||
|
|
background: #fb3024;
|
||
|
|
padding-left: 44rpx;
|
||
|
|
padding-right: 25rpx;
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #ffffff;
|
||
|
|
line-height: 106rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-title.redtitle {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 106rpx;
|
||
|
|
background: #fb3024;
|
||
|
|
padding-left: 44rpx;
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 106rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-title::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
margin: auto;
|
||
|
|
left: 25rpx;
|
||
|
|
width: 6rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
background-color: #fb3024;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redtitle.form-title::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
margin: auto;
|
||
|
|
left: 25rpx;
|
||
|
|
width: 6rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
</style>
|