| @ -1,347 +0,0 @@ | |||||
| <template> | |||||
| <view class="refundsOrExchange"> | |||||
| <navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="frame"> | |||||
| <!-- 登录和注册 --> | |||||
| <view class="loginRegister" v-if='titleIndex!=2'> | |||||
| <!-- 标题 --> | |||||
| <view class="title">{{titleList[titleIndex]}}</view> | |||||
| <!-- 头像 --> | |||||
| <view class="userIamge"> | |||||
| <view> | |||||
| <img src="/static/image/center/11.svg" alt="" style="width: 100%;height: 100%;"> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 用户名&密码&隐私条款 --> | |||||
| <view class="form"> | |||||
| <view> | |||||
| <uv-input v-model="form.account" placeholder="请输入账号" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view> | |||||
| <uv-input v-model="form.password" password placeholder="请输入密码" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view> | |||||
| <uv-checkbox-group v-model="checkboxValue" shape="circle"> | |||||
| <view class="content"> | |||||
| <view style="display: flex;flex-wrap: wrap;"> | |||||
| <uv-checkbox size="30rpx" :name="1"></uv-checkbox> | |||||
| 请你阅读并同意我们的<span style="color: #fd5100" | |||||
| @click="$refs.popup.open('getPrivacyPolicy')">《隐私条款》</span>和<span | |||||
| style="color: #fd5100" | |||||
| @click="$refs.popup.open('getUserAgreement')">《服务协议》</span> | |||||
| </view> | |||||
| </view> | |||||
| </uv-checkbox-group> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 忘记密码 --> | |||||
| <view class='forgetPassword' v-if='titleIndex==2'> | |||||
| <!-- 标题 --> | |||||
| <view class="title">{{titleList[titleIndex]}}</view> | |||||
| <!-- 表单 --> | |||||
| <view class="form1"> | |||||
| <view class="userName"> | |||||
| <uv-input v-model="form1.userName" placeholder="请输入手机号/用户/邮箱" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view class="code"> | |||||
| <view class="left"> | |||||
| <uv-input v-model="form1.code" placeholder="请输入验证码" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view class="right"> | |||||
| <view> | |||||
| <uv-toast ref="toast"></uv-toast> | |||||
| <uv-code :seconds="seconds" @end="end" @start="start" ref="code" | |||||
| @change="codeChange"></uv-code> | |||||
| <uv-button @tap="getCode" iconSize='10rpx' color='#fd5100' | |||||
| shape='circle'>{{tips}}</uv-button> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="password1"> | |||||
| <uv-input v-model="form1.password1" placeholder="设置您的新密码(6到50个字符)" password clearable | |||||
| border="surround" shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view class="password2"> | |||||
| <uv-input v-model="form1.password2" placeholder="重新确认密码" password clearable border="surround" | |||||
| shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 按钮 --> | |||||
| <view class="btn" | |||||
| @click="submit"> | |||||
| <button class='a'>{{titleList[titleIndex]}}</button> | |||||
| </view> | |||||
| <!-- tab --> | |||||
| <!-- <view class="bottomTab"> | |||||
| <span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(0)'>注册账号</span> | |||||
| <span style="color: #9c9fa4">|</span> | |||||
| <span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(1)'>账号登录</span> | |||||
| <span style="color: #9c9fa4">|</span> | |||||
| <span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(2)'>忘记密码</span> | |||||
| </view> --> | |||||
| </view> | |||||
| <configPopup ref="popup"></configPopup> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import configPopup from '@/components/config/configPopup.vue'; | |||||
| export default { | |||||
| components: { | |||||
| configPopup | |||||
| }, | |||||
| onLoad(option) { | |||||
| this.titleIndex = option.index || 1 | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| titleIndex: 0, | |||||
| titleList: ['注册', '登录', '重置密码'], | |||||
| checkboxValue: [], | |||||
| form: { | |||||
| account: '13135294009', | |||||
| password: 'lzx123456', | |||||
| }, | |||||
| form1: { | |||||
| userName: '', | |||||
| code: '', | |||||
| password1: '', | |||||
| password2: '', | |||||
| }, | |||||
| tips: '获取验证码', | |||||
| seconds: 60, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| submit(){ | |||||
| if(!this.checkboxValue.length){ | |||||
| return uni.showToast({ | |||||
| title: '请先同意隐私协议', | |||||
| icon:'none' | |||||
| }) | |||||
| } | |||||
| if(this.$utils.verificationAll(this.form, { | |||||
| account: '请输入账号', | |||||
| password: '请输入密码', | |||||
| })){ | |||||
| return | |||||
| } | |||||
| this.$store.commit('accountLogin', this.form) | |||||
| }, | |||||
| // 切换页面 | |||||
| changePage(index) { | |||||
| this.titleIndex = index | |||||
| }, | |||||
| confirm() { | |||||
| }, | |||||
| codeChange(text) { | |||||
| this.tips = text; | |||||
| }, | |||||
| getCode() { | |||||
| if (this.$refs.code.canGetCode) { | |||||
| // 模拟向后端请求验证码 | |||||
| uni.showLoading({ | |||||
| title: '正在获取验证码' | |||||
| }) | |||||
| setTimeout(() => { | |||||
| uni.hideLoading(); | |||||
| // 这里此提示会被this.start()方法中的提示覆盖 | |||||
| uni.$uv.toast('验证码已发送'); | |||||
| // 通知验证码组件内部开始倒计时 | |||||
| this.$refs.code.start(); | |||||
| }, 2000); | |||||
| } else { | |||||
| uni.$uv.toast('请勿重复发送'); | |||||
| } | |||||
| }, | |||||
| end() { | |||||
| // uni.$uv.toast('倒计时结束'); | |||||
| }, | |||||
| start() { | |||||
| // uni.$uv.toast('倒计时开始'); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| * { | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .refundsOrExchange { | |||||
| background-color: #FFF; | |||||
| height: 100vh; | |||||
| .frame { | |||||
| background-color: #FFF; | |||||
| .loginRegister { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 40rpx; | |||||
| .title { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: flex-end; | |||||
| height: 10vh; | |||||
| color: #000; | |||||
| font-size: 40rpx; | |||||
| font-weight: 700; | |||||
| } | |||||
| .userIamge { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| height: 10vh; | |||||
| >view:nth-of-type(1) { | |||||
| width: 25%; | |||||
| height: 100%; | |||||
| border-radius: 50%; | |||||
| overflow: hidden; | |||||
| } | |||||
| } | |||||
| .form { | |||||
| line-height: 50rpx; | |||||
| >view:nth-of-type(1) { | |||||
| padding: 20rpx 100rpx; | |||||
| } | |||||
| >view:nth-of-type(2) { | |||||
| padding: 0 100rpx; | |||||
| } | |||||
| >view:nth-of-type(3) { | |||||
| display: flex; | |||||
| padding: 30rpx 100rpx 0 100rpx; | |||||
| font-size: 22rpx | |||||
| } | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| // height: 5vh; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| margin: 90rpx 0 0 0; | |||||
| .a { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 70%; | |||||
| height: 80rpx; | |||||
| color: #FFF; | |||||
| background-color: $uni-color; | |||||
| border: 1px solid red; | |||||
| border-radius: 100rpx; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| } | |||||
| .bottomTab { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| height: 10vh; | |||||
| padding: 0 80rpx; | |||||
| margin-top: 30rpx; | |||||
| .tabbarItemActive { | |||||
| color: $uni-color; | |||||
| } | |||||
| .tabbarItemNoActive { | |||||
| color: #9c9fa4; | |||||
| } | |||||
| } | |||||
| .forgetPassword { | |||||
| padding: 100rpx 40rpx 0 40rpx; | |||||
| .title { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: flex-end; | |||||
| height: 10vh; | |||||
| color: #000; | |||||
| font-size: 40rpx; | |||||
| font-weight: 700; | |||||
| } | |||||
| .form1 { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 30rpx; | |||||
| margin-top: 20rpx; | |||||
| padding: 20rpx 80rpx; | |||||
| .userName { | |||||
| // padding: 20rpx 100 rpx; | |||||
| } | |||||
| .code { | |||||
| display: flex; | |||||
| width: 100%; | |||||
| .left { | |||||
| width: 55%; | |||||
| } | |||||
| .right { | |||||
| width: 45%; | |||||
| height: 100%; | |||||
| >view:nth-of-type(1) { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| .password1 {} | |||||
| .password2 {} | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -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> | |||||