fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by yyq
Commit 2b932e08fccd44b2360f26cff0d40acb8ab0e83d 1 parent e6db09f3

bind style

Inline Side-by-side
Showing 8 changed files with 178 additions and 112 deletions
... ... @@ -29,7 +29,7 @@ export default {
// queryString中携带bind_code，则弹出绑定弹框
if (this.$route.query.bind_code) {
this.$createThirdBind().show();
this.$root.$createThirdBind().open();
}
},
watch: {
... ... @@ -47,7 +47,7 @@ export default {
.route-view-forword-leave-active,
.route-view-back-enter-active,
.route-view-back-leave-active {
will-change: true;
will-change: transform;
width: 100%;
height: 100%;
position: absolute;
... ... @@ -57,12 +57,12 @@ export default {
.route-view-forword-leave-active,
.route-view-back-leave-active {
transition: all 200ms;
transition: all 300ms ease;
}
.route-view-forword-enter-active,
.route-view-back-enter-active {
transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.route-view-forword-enter {
... ... @@ -79,12 +79,16 @@ export default {
}
.route-view-back-enter {
z-index: -1;
transform: translate3d(-30%, 0, 0);
}
.route-view-back-enter-active {
z-index: -1;
}
.route-view-back-leave-active {
transform: translate3d(100%, 0, 0);
z-index: 2;
}
</style>
... ...
<template>
<div v-if="showBind" class="third-bind-wrapper">
<div v-if="dialogEnable" class="third-bind-wrapper">
<div class="bind-dialog">
<p class="bind-title">关联有货UFO账户</p>
<div class="under-row">
<div class="left-row-title">
<CubeSelect class="area-code-select" v-model="code" :options="options" :title="selectTitle"></CubeSelect>
<span @click="chooseArea">{{code}}</span>
<span class="iconfont icondownn"></span>
</div>
<CubeInput class="bind-input" :class="phone ? '' : 'bind-input-phone'" v-model="phone"></CubeInput>
</div>
... ... @@ -24,74 +25,44 @@
<script>
import { Button, Input, Select } from 'cube-ui';
import { Button, Input } from 'cube-ui';
import { mapActions, mapState } from 'vuex';
const areaList = [{
value: '+61',
name: '澳大利亚'
}, {
value: '+82',
text: '韩国'
}, {
value: '+1',
text: '加拿大'
}, {
value: '+60',
text: '马来西亚'
}, {
value: '+1',
text: '美国'
}, {
value: '+81',
text: '日本'
}, {
value: '+65',
text: '新加坡'
}, {
value: '+44',
text: '英国'
}, {
value: '+86',
text: '中国'
}, {
value: '+853',
text: '中国澳门'
}, {
value: '+886',
text: '中国台湾'
}, {
value: '+852',
text: '中国香港'
}];
export default {
name: 'ThirdBind',
data() {
return {
showBind: false,
code: '+86',
options: areaList,
selectTitle: '选择国家和地区',
phone: '',
smsCode: '',
sendBtnText: ''
sendBtnText: '',
binded: false
}
},
computed: {
dialogEnable() {
return this.showBind && !this.binded;
},
submitDisable() {
return !(this.phone && this.smsCode);
}
},
methods: {
...mapActions(['sendBindSms', 'submitThirdBind']),
show() {
open() {
this.bindCode = this.$route.query.bind_code;
this.showBind = true;
this.phone = '';
this.smsCode = '';
this.clearSendTimer();
this.show();
},
close() {
this.showBind = false;
},
show() {
this.showBind = true;
},
toast(msg, time = 2000) {
this.$createToast && this.$createToast({
txt: msg,
... ... @@ -99,14 +70,22 @@ export default {
time
}).show();
},
chooseArea() {
this.$router.push({
name: 'passport.area'
});
},
changeArea(code) {
code && (this.code = code);
},
sendSMS() {
let total = 60;
let timer = setInterval(() => {
this.timer = setInterval(() => {
if (--total) {
this.sendBtnText = '重发' + total;
} else {
this.sendBtnText = '';
clearInterval(timer);
this.clearSendTimer();
}
}, 1000);
this.sendBtnText = '重发' + total;
... ... @@ -116,6 +95,10 @@ export default {
bindCode: this.bindCode
});
},
clearSendTimer() {
this.sendBtnText = '';
clearInterval(this.timer);
},
bindSubmit() {
if (this.phone && this.smsCode) {
this.submitThirdBind({
... ... @@ -124,6 +107,7 @@ export default {
bindCode: this.bindCode
}).then(res => {
if (res.code === 200) {
this.binded = true;
this.close();
} else {
this.toast(res.message);
... ... @@ -136,7 +120,6 @@ export default {
},
components: {
CubeInput: Input,
CubeSelect: Select,
CubeButton: Button
}
};
... ... @@ -183,17 +166,9 @@ export default {
flex-shrink: 0;
color: #999;
}
}
.area-code-select {
display: inline-block;
&:after {
border: 0;
}
/deep/ .cube-select-text {
font-size: 14px;
.iconfont {
font-size: 28px;
}
}
... ...
... ... @@ -47,6 +47,7 @@ export default {
font-size: 24px;
display: flex;
flex-direction: column;
background-color: #fff;
.layout-context {
flex: 1;
... ...
... ... @@ -121,6 +121,13 @@ router.onReady(() => {
}
router.beforeResolve((to, from, next) => {
if (from.query.bind_code) {
app.$createThirdBind().close();
} else if (to.query.bind_code) {
app.$createThirdBind().show();
}
try {
trackPage(to.fullPath);
const matched = router.getMatchedComponents(to);
... ...
<template>
<LayoutApp class="yohoufo-area-choose-page" title="选择国家或地区">
<div class="area-list">
<div class="area-item" v-for="(item, index) in list" :key="index" @click="chooseArea(item.value)">
<span class="code">{{item.value}}</span>
{{item.name}}
</div>
</div>
</LayoutApp>
</template>
<script>
const areaList = [{
value: '+61',
name: '澳大利亚'
}, {
value: '+82',
name: '韩国'
}, {
value: '+1',
name: '加拿大'
}, {
value: '+60',
name: '马来西亚'
}, {
value: '+1',
name: '美国'
}, {
value: '+81',
name: '日本'
}, {
value: '+65',
name: '新加坡'
}, {
value: '+44',
name: '英国'
}, {
value: '+86',
name: '中国'
}, {
value: '+853',
name: '中国澳门'
}, {
value: '+886',
name: '中国台湾'
}, {
value: '+852',
name: '中国香港'
}];
export default {
name: 'areaChoose',
data() {
return {
list: areaList
};
},
mounted() {
// this.$yoho.authRealName();
},
methods: {
chooseArea(code) {
this.$root.$createThirdBind().changeArea(code);
this.$router.go(-1);
}
}
};
</script>
<style lang="scss" scoped>
.area-list {
padding: 0 40px;
max-height: 100%;
overflow-y: scroll;
}
.area-item {
height: 100px;
line-height: 100px;
font-size: 32px;
color: #222;
border-bottom: 1px solid #e8e8e8;
&:last-child {
border-bottom: 0;
}
.code {
float: right;
}
}
</style>
... ...
<template>
<LayoutApp class="
">
<LayoutApp class="yohoufo-real-auth-page" title="实名认证">
<div class="auth-content">
<div class="auth-title">实名认证</div>
<p class="auth-sub-title">信息仅用于身份验证，不对外展示，有货UFO平台将严保您的信息安全，请认证填写如下信息，确保上传的图片文字清晰可见。</p>
<p class="auth-sub-title">UFO平台将严格保密您的认证信息，请按照种类分别填写以下信息，保证上传的图片文字清晰可见。</p>
<div class="auth-form">
<p class="form-title">姓名</p>
<div class="form-input-block">
<CubeInput class="auth-input" v-model="name" :disabled="!!certName" placeholder="请输入真实姓名"></CubeInput>
<CubeInput class="auth-input" v-model="name" :disabled="!!certName" placeholder="请填写姓名"></CubeInput>
</div>
<p class="form-title">身份证号</p>
<div class="form-input-block">
<CubeInput class="auth-input" v-model="idCode" :disabled="!!certIdCode" placeholder="请输入身份证号"></CubeInput>
<CubeInput class="auth-input" v-model="idCode" :disabled="!!certIdCode" placeholder="请填写身份证号"></CubeInput>
</div>
<p class="form-title">上传身份证正面照片 <a :href="exampleLink" class="upload-intro">示例照片</a></p>
<p class="form-title">上传身份证正面照片 <a :href="exampleLink" class="upload-intro"><span class="iconfont iconquestion"></span>示例照片</a></p>
<div class="form-input-block">
<div class="upload-btn" @click="uploadFrontCard">
<div v-if="idCardFrontUrl" class="delete-img" @click.stop="clearInfo(['idCardFront', 'idCardFrontUrl'])">ㄨ</div>
... ... @@ -173,24 +169,18 @@ export default {
};
</script>
<style lang="scss" scoped>
.auth-content {
height: calc(100% - 200px);
height: calc(100% - 144px);
padding: 0 40px;
overflow-y: scroll;
.auth-title {
font-size: 68px;
line-height: 96px;
font-weight: 900;
}
.auth-sub-title {
font-size: 24px;
color: #999;
line-height: 1.5;
margin-top: 20px;
margin: 40px 0 10px;
text-align: center;
}
.auth-form {
... ... @@ -201,11 +191,12 @@ export default {
font-size: 36px;
padding-top: 40px;
line-height: 1.6;
font-weight: 500;
}
.form-input-block {
padding-bottom: 16px;
border-bottom: 1px solid #f6f6f6;
border-bottom: 1px solid #eee;
position: relative;
}
... ... @@ -223,10 +214,19 @@ export default {
}
.upload-intro {
font-size: 28px;
font-size: 24px;
line-height: 58px;
color: #999;
float: right;
display: flex;
align-items: center;
font-weight: 300;
.iconfont {
font-size: 30px;
color: #d8d8d8;
margin-right: 10px;
}
}
.upload-btn {
... ... @@ -319,11 +319,18 @@ export default {
}
.auth-footer {
padding: 40px;
padding: 28px 40px;
.submit-btn {
height: 120px;
height: 88px;
line-height: 88px;
padding: 0;
background: #022c46;
border-radius: 44px;
&:after {
border: 0;
}
&.cube-btn_disabled {
background: #ccc;
... ...
<template>
<div class="yohoufo-bind-page">
<div class="ufo-logo">UFO飞碟好物</div>
</div>
</template>
<script>
export default {
name: 'bind',
activated() {
},
beforeRouteUpdate(to, from, next) {
},
mounted() {
// this.$yoho.authRealName();
},
methods: {
}
};
</script>
export default [{
name: 'passport.bind',
path: '/xianyu/passport/bind',
component: () => import(/* webpackChunkName: "passport.bind" */ './bind')
name: 'passport.area',
path: '/xianyu/passport/area/choose',
component: () => import(/* webpackChunkName: "passport.area" */ './area')
}, {
name: 'passport.auth',
path: '/xianyu/passport/real/auth',
... ...