11 changed files with 491 additions and 19 deletions
|
After Width: | Height: | Size: 544 B |
|
After Width: | Height: | Size: 580 B |
@ -0,0 +1,382 @@ |
|||
<template> |
|||
<v-page |
|||
style="height:auto!important;min-height: 100%!important;background: none;background-color: #121212 !important;"> |
|||
<v-header :title="$t('auth.a1')"></v-header> |
|||
<main class=" m-lg bg-panel-3 rounded-md p-x-md box-shadow"> |
|||
<!-- 姓名 --> |
|||
<view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.a9')}}</view> |
|||
<view class="input color-light"> |
|||
<v-input v-model="form.realname" :placeholder="$t('auth.b0')"></v-input> |
|||
</view> |
|||
</view> |
|||
<!-- 出生日期 --> |
|||
<view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.c5')}}</view> |
|||
<view class="input color-light"> |
|||
<uni-datetime-picker type="date" :placeholder="$t('auth.d4')" start="1873-1-01" |
|||
:end="new Date().toLocaleDateString()" :clear-icon="false" v-model="form.birthday" |
|||
@maskClick="maskClick" /> |
|||
</view> |
|||
</view> |
|||
<!-- 证件号类型 --> |
|||
<view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.c6')}}</view> |
|||
<view class="input color-light"> |
|||
<uni-data-select :placeholder="$t('auth.d5')" v-model="form.identification_type" |
|||
:localdata="id_range" @change="changeID"></uni-data-select> |
|||
</view> |
|||
</view> |
|||
<!-- 证件号 --> |
|||
<view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.b1')}}</view> |
|||
<view class="input color-light"> |
|||
<v-input v-model="form.id_card" :placeholder="$t('auth.b2')"></v-input> |
|||
</view> |
|||
</view> |
|||
<!-- 居住地址 --> |
|||
<view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.c7')}}</view> |
|||
<view class="input color-light"> |
|||
<v-input v-model="form.address" :placeholder="$t('auth.c8')"></v-input> |
|||
</view> |
|||
</view> |
|||
<!-- 城市 --> |
|||
<!-- <view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.d7')}}</view> |
|||
<view class="input color-light"> |
|||
<v-input v-model="form.city" :placeholder="$t('auth.d8')"></v-input> |
|||
</view> |
|||
</view> --> |
|||
<!-- 邮政区号 --> |
|||
<!-- <view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.d9')}}</view> |
|||
<view class="input color-light"> |
|||
<v-input v-model="form.postal_code" :placeholder="$t('auth.d10')"></v-input> |
|||
</view> |
|||
</view> --> |
|||
<!-- 国籍区号 --> |
|||
<view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.a7')}}</view> |
|||
<view class="input color-light"> |
|||
<v-picker :value="form.country_id" @change="selectCountry" :list="countryList" range-value="id" |
|||
range-label="name2"> |
|||
<v-input disabled :value="activeCountry.name2" :placeholder="$t('auth.a8')"> |
|||
<template #right> |
|||
<van-icon class="color-default" name="arrow" /> |
|||
</template> |
|||
</v-input> |
|||
</v-picker> |
|||
</view> |
|||
</view> |
|||
<!-- 电话 --> |
|||
<view class="form-item border-b p-md m-b-md"> |
|||
<view class="label m-b-xs">{{$t('auth.c9')}}</view> |
|||
<view class="input color-light"> |
|||
<v-input v-model="form.phone" :placeholder="$t('auth.d0')"></v-input> |
|||
</view> |
|||
</view> |
|||
<div class="form-item border-b p-md"> |
|||
<div class="color-light p-b-xs">1、{{$t('auth.b5')}}</div> |
|||
<div class="d-flex justify-between m-t-md "> |
|||
<div class="examples m-r-xs bg-panel-4 p-md rounded-sm"> |
|||
<img src="static/img/fill6.png" /> |
|||
</div> |
|||
<div @click="getFile('front_img')" |
|||
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-4"> |
|||
<van-icon v-if="!form.front_img" class="color-light fn-30" name="photograph" /> |
|||
<img v-else :src="form.front_img" alt /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-item border-b p-md"> |
|||
<div class="color-light p-b-xs">2、{{$t('auth.b6')}}</div> |
|||
<div class="d-flex justify-between m-t-md"> |
|||
<div class="examples m-r-xs bg-panel-4 p-md rounded-sm"> |
|||
<img src="static/img/fill7.png" /> |
|||
</div> |
|||
<div @click="getFile('back_img')" |
|||
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-4"> |
|||
<van-icon v-if="!form.back_img" class="color-light fn-30" name="photograph" /> |
|||
<img v-else :src="form.back_img" alt /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<view class="p-md "> |
|||
<v-button block type="white" class="w-max rounded-md" ref="btn" |
|||
@click="primaryAuth">{{$t('auth.b3')}}</v-button> |
|||
</view> |
|||
</main> |
|||
|
|||
|
|||
|
|||
<van-toast id="van-toast" /> |
|||
</v-page> |
|||
</template> |
|||
<script> |
|||
import Profile from "@/api/profile"; |
|||
import Member from "@/api/member"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
countryList: [], |
|||
form: { |
|||
// area_code: "", |
|||
realname: "", |
|||
birthday: "", |
|||
identification_type: "", |
|||
id_card: "", |
|||
address: "", |
|||
// city: "", |
|||
// postal_code: "", |
|||
country_id: "", |
|||
phone: "", |
|||
country_code: "", |
|||
back_img: "", |
|||
front_img: "", |
|||
}, |
|||
id_range: [{ |
|||
value: 0, |
|||
text: this.$t('auth.d1') |
|||
}, { |
|||
value: 1, |
|||
text: this.$t('auth.d2') |
|||
}, { |
|||
value: 2, |
|||
text: this.$t('auth.d3') |
|||
}], |
|||
}; |
|||
}, |
|||
computed: { |
|||
activeCountry() { |
|||
return ( |
|||
this.countryList.find((item) => item.id == this.form.country_id) || {} |
|||
); |
|||
}, |
|||
activeIndex() { |
|||
return this.countryList.findIndex((item) => item.id == this.form.country_id) |
|||
}, |
|||
}, |
|||
methods: { |
|||
getFile(name) { |
|||
// console.log(name) |
|||
this.$getFile({count: 9}).then((res) => { |
|||
this.upLoadImg(res, name); |
|||
}) |
|||
}, |
|||
// 上传图片 |
|||
upLoadImg(chooseImageRes, name) { |
|||
Member.uploadImage(chooseImageRes).then((res) => { |
|||
this.form[name] = res.data.url; |
|||
this.$toast.success(this.$t('auth.c1')); |
|||
}); |
|||
}, |
|||
getAuthInfo() { |
|||
Profile.getAuthInfo().then((res) => { |
|||
this.detail = res.data; |
|||
}); |
|||
}, |
|||
// 获取区号 |
|||
getCountryCode() { |
|||
Member.getCountryCode() |
|||
.then((res) => { |
|||
// console.info(res) |
|||
// this.countryList = res.data; |
|||
this.countryList = res.data.map(item => { |
|||
return { |
|||
...item, |
|||
name2: '+' + item.country_code + '(' + item.name + ')' |
|||
} |
|||
}); |
|||
this.form.country_id = this.countryList[res.data.length - 1].id; |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
selectCountry(value) { |
|||
this.form.country_id = value |
|||
}, |
|||
// 认证 |
|||
primaryAuth() { |
|||
let data = this.form; |
|||
data.country_code = this.activeCountry.country_code; |
|||
// console.log(data); |
|||
if (!data.realname) { |
|||
uni.showToast({ |
|||
title: this.$t('auth.b0'), |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (!data.birthday) { |
|||
uni.showToast({ |
|||
title: this.$t('auth.d4'), |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (data.identification_type === "") { |
|||
uni.showToast({ |
|||
title: this.$t('auth.d5') + this.$t('auth.c6'), |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (!data.id_card) { |
|||
uni.showToast({ |
|||
title: this.$t('auth.b2'), |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (!data.address) { |
|||
uni.showToast({ |
|||
title: this.$t('auth.c8'), |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (!data.phone) { |
|||
uni.showToast({ |
|||
title: this.$t('auth.d0'), |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (!data.back_img) { |
|||
this.$toast(this.$t('auth.c2')); |
|||
return; |
|||
} |
|||
if (!data.front_img) { |
|||
this.$toast(this.$t('auth.c3')); |
|||
return; |
|||
} |
|||
|
|||
Profile.newAuth(data, {btn: this.$refs.btn}).then((res) => { |
|||
this.$toast.success(this.$t('auth.b4')); |
|||
setTimeout(() => { |
|||
this.$back(); |
|||
}, 1500) |
|||
}).catch(() => {}); |
|||
}, |
|||
changeID(e) { |
|||
// console.log(e); |
|||
this.form.identification_type = this.id_range[e].text; |
|||
} |
|||
}, |
|||
created() { |
|||
this.getAuthInfo(); |
|||
this.getCountryCode(); |
|||
}, |
|||
options: { |
|||
styleIsolation: 'shared' |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
/deep/.uni-date-x--border { |
|||
border: none; |
|||
} |
|||
|
|||
/deep/.uni-date-x { |
|||
background-color: transparent; |
|||
color: $plain; |
|||
} |
|||
|
|||
/deep/.uni-date__x-input { |
|||
padding-left: 0px; |
|||
// color: grey; |
|||
} |
|||
|
|||
/deep/.uni-select__selector { |
|||
// background-color: $panel-3; |
|||
background-color: #242424; |
|||
} |
|||
|
|||
/deep/.uni-select__input-text { |
|||
color: $plain; |
|||
} |
|||
|
|||
/deep/.uni-select__input-placeholder { |
|||
color: grey; |
|||
} |
|||
|
|||
// 修改uni-datetime-picker的年月列表样式 |
|||
.uni-picker-view-indicator, |
|||
.uni-picker-view-mask { |
|||
background-color: rgba(255, 255, 255, 0.5) !important; |
|||
} |
|||
|
|||
// 修改uni-datetime-picker的年月列表样式,以下的修改无效 |
|||
/deep/.uni-picker-view-indicator, |
|||
/deep/uni-resize-sensor { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
/deep/.uni-picker-view-mask::before, |
|||
uni-picker-view-column::before { |
|||
content: '' !important; |
|||
width: 100% !important; |
|||
height: 34px !important; |
|||
background: rgba(255, 255, 255, 0.5) !important; |
|||
position: absolute !important; |
|||
top: calc(50% - 17px) !important; |
|||
border-top: 1px solid #c9c9c9 !important; |
|||
border-bottom: 1px solid #c9c9c9 !important; |
|||
} |
|||
|
|||
::v-deep.uni-picker-view-mask::before { |
|||
content: ''; |
|||
width: 100%; |
|||
height: 34px; |
|||
background: rgba(255, 255, 255, 0.5); |
|||
position: absolute; |
|||
top: calc(50% - 17px); |
|||
border-top: 1px solid #c9c9c9; |
|||
border-bottom: 1px solid #c9c9c9; |
|||
} |
|||
|
|||
>>>.uni-picker-view-mask::before { |
|||
content: ''; |
|||
width: 100%; |
|||
height: 34px; |
|||
background: rgba(255, 255, 255, 0.5); |
|||
position: absolute; |
|||
top: calc(50% - 17px); |
|||
border-top: 1px solid #c9c9c9; |
|||
border-bottom: 1px solid #c9c9c9; |
|||
} |
|||
|
|||
.bg-panel-3 { |
|||
background-color: #242424; |
|||
} |
|||
|
|||
.bg-panel-4 { |
|||
background-color: #000; |
|||
} |
|||
|
|||
::v-deep uni-input { |
|||
border: 1px solid #e5e5e5; |
|||
} |
|||
.examples { |
|||
width: 122px; |
|||
height: 70px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.upload-box { |
|||
width: 150px; |
|||
height: 100px; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
// object-fit: cover; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue