13 changed files with 932 additions and 126 deletions
Split 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 |