13 changed files with 932 additions and 126 deletions
Unified View
Diff Options
-
+3 -108api/model/index.js
-
+5 -0api/model/login.js
-
+188 -0components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue
-
+2 -2config.js
-
+19 -0pages.json
-
+17 -8pages/index/center.vue
-
+12 -6pages/index/index.vue
-
+347 -0pages_login/loginAndRegisterAndForgetPassword.vue
-
+118 -0pages_login/wxLogin.vue
-
+214 -0pages_login/wxUserInfo.vue
-
BINstatic/image/home/hdqd-img.png
-
BINstatic/image/logo-img.jpg
-
+7 -2store/store.js
+ 3
- 108
api/model/index.js
View File
+ 5
- 0
api/model/login.js
View File
+ 188
- 0
components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue
View File
| @ -0,0 +1,188 @@ | |||||
| <template> | |||||
| <uv-popup ref="popup" z-index="99999" :closeOnClickOverlay="false" | |||||
| :customStyle="{ backgroundColor: 'transparent' }"> | |||||
| <view class="privacyPopup"> | |||||
| <view class="icon"> | |||||
| <image src="@/static/image/PrivacyAgreementPoup/icon.png" mode="widthFix"></image> | |||||
| </view> | |||||
| <view class="title"> | |||||
| <view>协议与隐私政策</view> | |||||
| </view> | |||||
| <view class="content_pri"> | |||||
| <view class="text"> | |||||
| 请您务必审慎阅读、充分理解用户协议和隐私政策各条款，包括但不限于用户注意事项、用户行为规范以及为了向你提供服务而收集、使用、存储你个人信息的情况等。你可阅读<text | |||||
| class="blk" @tap="handleOpenPrivacyContract">《工程项目打卡平台用户服务协议》</text>和<text | |||||
| class="blk" @tap="handleOpenPrivacyContract">《工程项目打卡平台隐私权政策》</text>了解详细信息。如你同意，请点击下方按钮开始接受我们的服务。 | |||||
| </view> | |||||
| </view> | |||||
| <!-- <view class="config"> | |||||
| <uv-checkbox-group v-model="checkboxValue" shape="circle"> | |||||
| <view class="content"> | |||||
| <view style="display: flex;"> | |||||
| <uv-checkbox size="30rpx" :name="1"></uv-checkbox> | |||||
| 同意<text @tap="handleOpenPrivacyContract">《工程项目打卡平台用户服务协议》</text> | |||||
| </view> | |||||
| <view class=""> | |||||
| 以及<text @tap="handleOpenPrivacyContract">《工程项目打卡平台隐私权政策》</text> | |||||
| </view> | |||||
| </view> | |||||
| </uv-checkbox-group> | |||||
| </view> --> | |||||
| <view class="pri_btn"> | |||||
| <button class="confuse_btn" @click="confusePrivacy">拒绝</button> | |||||
| <button class="confirm_btn" id="agree-btn" open-type="agreePrivacyAuthorization" | |||||
| @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> | |||||
| </view> | |||||
| </view> | |||||
| </uv-popup> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'PrivacyAgreementPoup', | |||||
| data() { | |||||
| return { | |||||
| resolvePrivacyAuthorization: {}, | |||||
| checkboxValue: false | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| if (wx.getPrivacySetting) { | |||||
| wx.getPrivacySetting({ | |||||
| success: res => { | |||||
| // console.log(res) | |||||
| if (res.needAuthorization) { | |||||
| // 需要弹出隐私协议 | |||||
| this.init() | |||||
| } | |||||
| }, | |||||
| fail: () => {} | |||||
| }) | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| //初始化 | |||||
| init(resolve) { | |||||
| this.$refs.popup.open('center') | |||||
| this.resolvePrivacyAuthorization = resolve | |||||
| }, | |||||
| // 打开隐私协议 | |||||
| goToPrivacy() { | |||||
| wx.openPrivacyContract({ | |||||
| success: () => { | |||||
| console.log('打开成功'); | |||||
| }, // 打开成功 | |||||
| fail: () => { | |||||
| uni.showToast({ | |||||
| title: '打开失败，稍后重试', | |||||
| icon: 'none' | |||||
| }) | |||||
| } // 打开失败 | |||||
| }) | |||||
| }, | |||||
| // 拒绝 | |||||
| confusePrivacy() { | |||||
| this.$refs.popup.close() | |||||
| this.resolvePrivacyAuthorization({ | |||||
| event: 'disagree' | |||||
| }) | |||||
| }, | |||||
| // 同意 | |||||
| handleAgreePrivacyAuthorization() { | |||||
| // 告知平台用户已经同意，参数传同意按钮的id | |||||
| this.resolvePrivacyAuthorization({ | |||||
| buttonId: 'agree-btn', | |||||
| event: 'agree' | |||||
| }) | |||||
| this.$refs.popup.close() | |||||
| }, | |||||
| handleOpenPrivacyContract() { | |||||
| // 打开隐私协议页面 | |||||
| wx.openPrivacyContract({ | |||||
| success: () => {}, // 打开成功 | |||||
| fail: () => {}, // 打开失败 | |||||
| complete: () => {} | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .privacyPopup { | |||||
| width: 90%; | |||||
| margin: 0rpx auto; | |||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 40rpx 30rpx; | |||||
| .icon { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| image { | |||||
| width: 100rpx; | |||||
| } | |||||
| } | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 36rpx; | |||||
| margin: 30rpx 0rpx; | |||||
| } | |||||
| .content_pri { | |||||
| margin-bottom: 30rpx; | |||||
| font-size: 28rpx; | |||||
| color: #707070; | |||||
| .text { | |||||
| .blk { | |||||
| color: black; | |||||
| } | |||||
| } | |||||
| } | |||||
| .config { | |||||
| font-size: 28rpx; | |||||
| text-align: center; | |||||
| line-height: 40rpx; | |||||
| margin-bottom: 30rpx; | |||||
| text { | |||||
| color: #00aaff; | |||||
| } | |||||
| .content { | |||||
| display: flex; | |||||
| } | |||||
| } | |||||
| .pri_btn { | |||||
| display: flex; | |||||
| justify-content: space-around; | |||||
| flex-wrap: wrap; | |||||
| button { | |||||
| width: 40%; | |||||
| padding: 5rpx 0rpx; | |||||
| // background: $main-color; | |||||
| outline: none; | |||||
| color: white; | |||||
| font-size: 30rpx; | |||||
| &:nth-child(1){ | |||||
| background: #F2F2F2; | |||||
| color: #707070; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 2
- 2
config.js
View File
+ 19
- 0
pages.json
View File
+ 17
- 8
pages/index/center.vue
View File
+ 12
- 6
pages/index/index.vue
View File
+ 347
- 0
pages_login/loginAndRegisterAndForgetPassword.vue
View File
| @ -0,0 +1,347 @@ | |||||
| <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> | |||||
+ 118
- 0
pages_login/wxLogin.vue
View File
| @ -0,0 +1,118 @@ | |||||
| <template> | |||||
| <div class="login"> | |||||
| <!-- logo --> | |||||
| <div class="logo"> | |||||
| <image src="@/static/image/logo-img.jpg" mode=""></image> | |||||
| </div> | |||||
| <!-- 标题 --> | |||||
| <view class="login-title">vtrip</view> | |||||
| <!-- 登录按钮 --> | |||||
| <view @click="login" class="login-btn"> | |||||
| <uni-icons type="weixin" size="30" color="#fff"></uni-icons> | |||||
| <text class="wx">微信登录</text> | |||||
| </view> | |||||
| <!-- 隐私政策 --> | |||||
| <view class="privacy"> | |||||
| <uv-radio-group> | |||||
| <uv-checkbox-group v-model="consent"> | |||||
| <uv-checkbox :size="30" shape="circle" active-color="#05C160" :name="privacy"></uv-checkbox> | |||||
| </uv-checkbox-group> | |||||
| 已同意<text class="privacy-title">《隐私政策》</text> | |||||
| <text class="privacy-title">《服务条款》</text> | |||||
| </uv-radio-group> | |||||
| </view> | |||||
| <!-- 隐私政策弹框 --> | |||||
| <PrivacyAgreementPoup></PrivacyAgreementPoup> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import PrivacyAgreementPoup from '@/components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue' | |||||
| export default { | |||||
| name : "wxLogin", | |||||
| components : { PrivacyAgreementPoup }, | |||||
| data() { | |||||
| return { | |||||
| consent : [] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| login() { | |||||
| if(this.consent.length <= 0){ | |||||
| return uni.showToast({ | |||||
| icon: "none", | |||||
| title: "请勾选隐私协议" | |||||
| }) | |||||
| } | |||||
| this.$store.commit('login') | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .login { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| min-height: 100vh; | |||||
| background: white; | |||||
| // logo | |||||
| .logo { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| image { | |||||
| width: 200rpx; | |||||
| height: 200rpx; | |||||
| border-radius: 20rpx; | |||||
| } | |||||
| } | |||||
| // 标题 | |||||
| .login-title { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| margin: 20rpx 0rpx; | |||||
| } | |||||
| //登录按钮 | |||||
| .login-btn { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 70%; | |||||
| background: #05C160; | |||||
| height: 90rpx; | |||||
| border-radius: 45rpx; | |||||
| color: white; | |||||
| margin-top: 200rpx; | |||||
| .wx { | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| //隐私政策 | |||||
| .privacy { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| margin-top: 20rpx; | |||||
| &::v-deep .uv-checkbox-group { | |||||
| align-items: center !important; | |||||
| justify-content: center !important; | |||||
| flex-wrap : nowrap !important; | |||||
| } | |||||
| .privacy-title { | |||||
| color: #05C160; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 214
- 0
pages_login/wxUserInfo.vue
View File
| @ -0,0 +1,214 @@ | |||||
| <template> | |||||
| <view class="login"> | |||||
| <view class="logo"> | |||||
| <image src="@/static/image/logo-img.jpg" mode=""></image> | |||||
| </view> | |||||
| <view class="title"> | |||||
| vtrip | |||||
| </view> | |||||
| <view class="title"> | |||||
| 申请获取你的头像、昵称 | |||||
| </view> | |||||
| <button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> | |||||
| <view class="line"> | |||||
| <view class=""> | |||||
| 头像 | |||||
| </view> | |||||
| <view class=""> | |||||
| <image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" style="width: 60rpx;height: 60rpx;" | |||||
| mode=""></image> | |||||
| <image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image> | |||||
| </view> | |||||
| </view> | |||||
| </button> | |||||
| <view class="line"> | |||||
| <view class=""> | |||||
| 昵称 | |||||
| </view> | |||||
| <view class=""> | |||||
| <input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" | |||||
| v-model="userInfoForm.nickName" /> | |||||
| </view> | |||||
| </view> | |||||
| <view class="line"> | |||||
| <view class=""> | |||||
| 手机号 | |||||
| </view> | |||||
| <view class="" | |||||
| v-if="userInfoForm.phone"> | |||||
| <input placeholder="请输入手机号" style="text-align: right;" | |||||
| disabled | |||||
| v-model="userInfoForm.phone" /> | |||||
| </view> | |||||
| <view class="" | |||||
| v-else> | |||||
| <button | |||||
| class="getPhoneNumber" | |||||
| open-type="getPhoneNumber" | |||||
| @getphonenumber="getPhone"> | |||||
| 获取电话号码 | |||||
| </button> | |||||
| </view> | |||||
| </view> | |||||
| <view class="btn" @click="submit"> | |||||
| 确认 | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| userInfoForm: { | |||||
| headImage: '', | |||||
| nickName: '', | |||||
| phone : '', | |||||
| } | |||||
| }; | |||||
| }, | |||||
| onShow() {}, | |||||
| onLoad() { | |||||
| this.userInfoForm.phone = this.userInfo.phone || '' | |||||
| this.userInfoForm.nickName = this.userInfo.nickName || '' | |||||
| this.userInfoForm.headImage = this.userInfo.headImage || '' | |||||
| }, | |||||
| computed: {}, | |||||
| methods: { | |||||
| onChooseAvatar(res) { | |||||
| let self = this | |||||
| self.$Oss.ossUpload(res.target.avatarUrl) | |||||
| .then(url => { | |||||
| self.userInfoForm.headImage = url | |||||
| }) | |||||
| }, | |||||
| getPhone(e){ | |||||
| console.log(e,'e') | |||||
| this.$api('bindPhone', { | |||||
| phoneCode : e.detail.code | |||||
| }, res => { | |||||
| if(res.code == 200){ | |||||
| let phoneObj = JSON.parse(res.result) | |||||
| if(phoneObj.errmsg == 'ok'){ | |||||
| this.userInfoForm.phone = phoneObj.phone_info.phoneNumber | |||||
| }else{ | |||||
| uni.showModal({ | |||||
| title: phoneObj.errmsg | |||||
| }) | |||||
| } | |||||
| console.log(phoneObj); | |||||
| } | |||||
| }) | |||||
| }, | |||||
| submit() { | |||||
| let self = this | |||||
| uni.createSelectorQuery().in(this) | |||||
| .select("#nickName") | |||||
| .fields({ | |||||
| properties: ["value"], | |||||
| }) | |||||
| .exec((res) => { | |||||
| const nickName = res?.[0]?.value | |||||
| self.userInfoForm.nickName = nickName | |||||
| if (self.$utils.verificationAll(self.userInfoForm, { | |||||
| headImage: '请选择头像', | |||||
| nickName: '请填写昵称', | |||||
| phone: '请填写昵称', | |||||
| })) { | |||||
| return | |||||
| } | |||||
| self.$api('updateInfo', { | |||||
| avatarUrl : self.userInfoForm.headImage, | |||||
| nickName : self.userInfoForm.nickName, | |||||
| phone : self.userInfoForm.phone, | |||||
| }, res => { | |||||
| if (res.code == 200) { | |||||
| this.$store.commit('getUserInfo') | |||||
| uni.reLaunch({ | |||||
| url:'/pages/index/index' | |||||
| }) | |||||
| } | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .login { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| height: 100vh; | |||||
| background-color: #fff; | |||||
| .logo{ | |||||
| height: 140rpx; | |||||
| width: 140rpx; | |||||
| image{ | |||||
| height: 140rpx; | |||||
| width: 140rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| margin-bottom: 20rpx; | |||||
| } | |||||
| .title { | |||||
| line-height: 45rpx; | |||||
| font-weight: 900; | |||||
| } | |||||
| .line { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| width: 80%; | |||||
| border-bottom: 1px solid #00000023; | |||||
| padding: 30rpx 0; | |||||
| margin: 0 auto; | |||||
| } | |||||
| .chooseAvatar { | |||||
| width: 100%; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| margin-top: 10vh; | |||||
| border: none; | |||||
| } | |||||
| .btn { | |||||
| // background: $uni-linear-gradient-btn-color; | |||||
| background: $uni-color; | |||||
| color: #fff; | |||||
| width: 80%; | |||||
| padding: 20rpx 0; | |||||
| text-align: center; | |||||
| border-radius: 15rpx; | |||||
| margin-top: 10vh; | |||||
| } | |||||
| .getPhoneNumber{ | |||||
| all: unset; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| // background: $uni-linear-gradient-btn-color; | |||||
| background: $uni-color; | |||||
| color: #fff; | |||||
| width: 200rpx; | |||||
| height: 60rpx; | |||||
| border-radius: 30rpx; | |||||
| font-size: 24rpx; | |||||
| } | |||||
| } | |||||
| </style> | |||||
BIN
static/image/home/hdqd-img.png
View File
| Before | After |
|---|---|
|
|
| Width: 302 | Height: 292 | Size: 85 KiB | Width: 302 | Height: 292 | Size: 18 KiB |
BIN
static/image/logo-img.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 1280 | Height: 1504 | Size: 32 KiB |