|
|
|
@ -1,282 +0,0 @@ |
|
|
|
<template> |
|
|
|
<view class="page_view"> |
|
|
|
|
|
|
|
<image class="bg" src="@/pages_order/static/auth/bg.png" mode="aspectFill"></image> |
|
|
|
|
|
|
|
<view class="content flex flex-column"> |
|
|
|
<!-- todo: 替换为配置项 --> |
|
|
|
<image class="logo" src="@/pages_order/static/auth/logo.png" mode="widthFix"></image> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view class="box-intro">Hi ></view> |
|
|
|
|
|
|
|
<uv-input |
|
|
|
v-model="form.account" |
|
|
|
placeholder="请输入账号" |
|
|
|
border="none" |
|
|
|
shape='circle' |
|
|
|
clearable |
|
|
|
:customStyle="{ |
|
|
|
'margin-top': '64rpx', |
|
|
|
'padding': '37rpx 52rpx', |
|
|
|
'background-color': '#FAFAFF', |
|
|
|
'box-shadow': 'inset -10rpx -10rpx 20rpx 0 rgba(255, 255, 255, 0.77), inset 10rpx 10rpx 20rpx 0 rgba(170, 170, 204, 0.12), inset 4rpx 4rpx 8rpx 0 rgba(170, 170, 204, 0.25), inset -4rpx -4rpx 8rpx 0 rgba(255, 255, 255, 0.5)', |
|
|
|
}" |
|
|
|
> |
|
|
|
<template #prefix> |
|
|
|
<image class="input-prefix-icon" src="@/pages_order/static/auth/account.png" mode="widthFix"></image> |
|
|
|
</template> |
|
|
|
</uv-input> |
|
|
|
<uv-input |
|
|
|
v-model="form.password" |
|
|
|
placeholder="请输入密码" |
|
|
|
:type="passwordInputType" |
|
|
|
border="none" |
|
|
|
shape='circle' |
|
|
|
clearable |
|
|
|
:customStyle="{ |
|
|
|
'margin-top': '24rpx', |
|
|
|
'padding': '37rpx 52rpx', |
|
|
|
'background-color': '#FAFAFF', |
|
|
|
'box-shadow': 'inset -10rpx -10rpx 20rpx 0 rgba(255, 255, 255, 0.77), inset 10rpx 10rpx 20rpx 0 rgba(170, 170, 204, 0.12), inset 4rpx 4rpx 8rpx 0 rgba(170, 170, 204, 0.25), inset -4rpx -4rpx 8rpx 0 rgba(255, 255, 255, 0.5)', |
|
|
|
}" |
|
|
|
> |
|
|
|
<template #prefix> |
|
|
|
<image class="input-prefix-icon" src="@/pages_order/static/auth/account.png" mode="widthFix"></image> |
|
|
|
</template> |
|
|
|
<template #suffix v-if="form.password"> |
|
|
|
<image class="input-prefix-icon" src="@/pages_order/static/auth/hide.png" mode="widthFix" |
|
|
|
@click="switchPasswordInputType" |
|
|
|
></image> |
|
|
|
</template> |
|
|
|
</uv-input> |
|
|
|
|
|
|
|
<button class="btn flex" @click="onAccountLogin" >登 录</button> |
|
|
|
|
|
|
|
<view class="agreement"> |
|
|
|
<uv-checkbox-group |
|
|
|
v-model="checkboxValue" |
|
|
|
shape="circle" |
|
|
|
> |
|
|
|
<uv-checkbox |
|
|
|
size="36rpx" |
|
|
|
icon-size="36rpx" |
|
|
|
activeColor="#7451DE" |
|
|
|
:name="1" |
|
|
|
></uv-checkbox> |
|
|
|
</uv-checkbox-group> |
|
|
|
<view class="desc"> |
|
|
|
我已阅读并同意 |
|
|
|
<!-- todo: 替换配置项key --> |
|
|
|
<text class="highlight" @click="$refs.popup.open('config_privacy')">《服务协议与隐私条款》</text> |
|
|
|
和 |
|
|
|
<!-- todo: 替换配置项key --> |
|
|
|
<text class="highlight" @click="$refs.popup.open('config_agreement')">《个人信息保护指引》</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="other"> |
|
|
|
<view class="title">—其他登录方式—</view> |
|
|
|
<view class="btns"> |
|
|
|
<button class="btn flex" @click="onPhoneLogin" > |
|
|
|
<image class="btn-icon" src="@/pages_order/static/auth/phone.png" mode="widthFix"></image> |
|
|
|
</button> |
|
|
|
<button class="btn flex" @click="onWxLogin" > |
|
|
|
<image class="btn-icon" src="@/pages_order/static/auth/wx.png" mode="widthFix"></image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<configPopup ref="popup"></configPopup> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
export default { |
|
|
|
name : 'Login', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
checkboxValue : [], |
|
|
|
form: { |
|
|
|
account: null, |
|
|
|
password: null, |
|
|
|
}, |
|
|
|
passwordInputType: 'password', |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onAccountLogin() { |
|
|
|
// todo |
|
|
|
}, |
|
|
|
onPhoneLogin() { |
|
|
|
// todo |
|
|
|
}, |
|
|
|
onWxLogin() { |
|
|
|
// todo |
|
|
|
}, |
|
|
|
wxLogin(){ |
|
|
|
if(!this.checkboxValue.length){ |
|
|
|
return uni.showToast({ |
|
|
|
title: '请先同意隐私协议', |
|
|
|
icon:'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
this.$store.commit('login') |
|
|
|
}, |
|
|
|
openModal() { |
|
|
|
this.$refs.modal.open() |
|
|
|
}, |
|
|
|
onConfirmAggrement(confirm) { |
|
|
|
if (confirm) { |
|
|
|
this.checkboxValue = [1] |
|
|
|
} else { |
|
|
|
this.checkboxValue = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
onCancel() { |
|
|
|
console.log('--onCancel') |
|
|
|
uni.reLaunch({ |
|
|
|
url: '/pages/index/index' |
|
|
|
}) |
|
|
|
}, |
|
|
|
switchPasswordInputType() { |
|
|
|
this.passwordInputType = this.passwordInputType === 'password' ? 'text' : 'password' |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page_view { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
.bg, |
|
|
|
.content { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
justify-content: flex-start; |
|
|
|
padding: 208rpx 40rpx 0 40rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.logo { |
|
|
|
width: 366rpx; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.box { |
|
|
|
margin-top: 48rpx; |
|
|
|
width: 100%; |
|
|
|
padding: 64rpx 40rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: rgba(255, 255, 255, 0.48); |
|
|
|
border: 1rpx solid #FFFFFF; |
|
|
|
border-radius: 48rpx; |
|
|
|
|
|
|
|
&-intro { |
|
|
|
color: $uni-color; |
|
|
|
font-size: 44rpx; |
|
|
|
line-height: 1.4; |
|
|
|
font-weight: 600; |
|
|
|
font-family: PingFang SC; |
|
|
|
} |
|
|
|
|
|
|
|
.input-prefix-icon { |
|
|
|
width: 32rpx; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-input__content__prefix-icon { |
|
|
|
margin-right: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
margin-top: 64rpx; |
|
|
|
border-radius: 44rpx; |
|
|
|
padding: 23rpx 0; |
|
|
|
font-size: 30rpx; |
|
|
|
line-height: 1.4; |
|
|
|
font-weight: 600; |
|
|
|
font-family: PingFang SC; |
|
|
|
color: #FFFFFF; |
|
|
|
background-image: linear-gradient(to right, #007FFF, #644CFF, #BE76F7); |
|
|
|
box-shadow: 12rpx 12rpx 36rpx 0 rgba(0, 0, 0, 0.06), |
|
|
|
-8rpx -8rpx 26rpx 0 #FFFFFF, |
|
|
|
8rpx 8rpx 14rpx 0 rgba(0, 0, 0, 0.07); |
|
|
|
} |
|
|
|
|
|
|
|
.agreement { |
|
|
|
margin-top: 24rpx; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.desc { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 400; |
|
|
|
line-height: 1.4; |
|
|
|
color: #8B8B8B; |
|
|
|
} |
|
|
|
|
|
|
|
.highlight { |
|
|
|
color: $uni-color; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.other { |
|
|
|
margin-top: 48rpx; |
|
|
|
width: 100%; |
|
|
|
padding: 0 57rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
padding: 8rpx 0; |
|
|
|
text-align: center; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 26rpx; |
|
|
|
line-height: 1.4; |
|
|
|
font-family: PingFang SC; |
|
|
|
color: #FFFFFF; |
|
|
|
background-image: linear-gradient(to right, #007FFF00, #644CFF, #BE76F700); |
|
|
|
} |
|
|
|
|
|
|
|
.btns { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-top: 48rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: #EEEEF7; |
|
|
|
box-shadow: -10rpx -10rpx 20rpx 0 #FFFFFFBF, |
|
|
|
10rpx 10rpx 40rpx 0 #AAAACC80, |
|
|
|
4rpx 4rpx 10rpx 0 #AAAACC40, |
|
|
|
-4rpx -4rpx 10rpx 0 #FFFFFFED; |
|
|
|
|
|
|
|
&-icon { |
|
|
|
width: 48rpx; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.btn + .btn { |
|
|
|
margin-left: 64rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |