| <template> | 
|     <view class="box"> | 
|         <view class="box-title">欢迎使用近快</view> | 
|         <view class="box-tips">请登录</view> | 
|         <view class="box-btn" > | 
|             <button  class="box-btn"  v-if="agree" open-type="getPhoneNumber" @getphonenumber="getPhone" >手机号一键登录</button> | 
|             <button  class="box-btn"  v-if="!agree" @click="tipAgree">手机号一键登录</button>  | 
|         </view> | 
|         <view class="box-footer"> | 
|             <image src="/static/icon/ic_notagree@2x.png" mode="widthFix" v-if="!agree" @click="agreeDo"></image> | 
|             <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="agree" @click="agreeDo"></image>  | 
|             <text @click="agreeDo">我已阅读并同意<text class="bluetxt" @click="jumpService(4)">《用户协议》</text>,<text class="bluetxt" @click="jumpService(5)"> 《隐私协议政策》</text></text> | 
|         </view> | 
|     </view> | 
| </template> | 
| <script> | 
| import { mapState } from 'vuex' | 
|     export default { | 
|         computed: { | 
|             ...mapState(['userInfo','openid']) | 
|         }, | 
|         data() { | 
|             return { | 
|                 agree:false | 
|             } | 
|         }, | 
|         methods: { | 
|             jumpService(flag) { | 
|                 uni.navigateTo({ | 
|                     url: '/pages/rich-text-page/rich-text-page?flag='+flag | 
|                 }) | 
|             }, | 
|             agreeDo(){ | 
|                 this.agree = !this.agree | 
|             }, | 
|             tipAgree(){ | 
|                 uni.showToast({ title: '请先已阅读并同意《用户协议》,《隐私协议政策》', icon: 'error', duration: 2000 }); | 
|             }, | 
|             getPhone(e) { | 
|                 console.log(e) | 
|                 if(!this.agree ){ | 
|                     return | 
|                 } | 
|                 if (e.detail.errMsg !== 'getPhoneNumber:ok') { | 
|                     uni.showToast({ title: '获取授权手机号失败', icon: 'error', duration: 2000 }); | 
|                     return | 
|                 } | 
|                 var that = this; | 
|                 that.$u.api.wxAuthPhone({ | 
|                     code: e.detail.code, | 
|                     openid: that.openid||'' | 
|                 }).then(result => { | 
|                     if (result.code === 200) { | 
|                         that.$store.commit('setUserInfo', result.data.member) | 
|                         that.$store.commit('setToken', result.data.token) | 
|                         uni.$emit('refresh') | 
|                         uni.navigateBack({ delta: 1 }); | 
|                     } | 
|                 }) | 
|             } | 
|         } | 
|     } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .box { | 
|         width: 100%; | 
|         padding: 0 40rpx; | 
|         box-sizing: border-box; | 
|         display: flex; | 
|         flex-direction: column; | 
|         align-items: center; | 
|         justify-content: center; | 
|         .box-title { | 
|             font-weight: 600; | 
|             font-size: 48rpx; | 
|             color: #222222; | 
|             margin-top: 310rpx; | 
|             margin-bottom: 20rpx; | 
|         } | 
|         .box-tips { | 
|             font-weight: 400; | 
|             font-size: 28rpx; | 
|             color: #999999; | 
|             margin-bottom: 180rpx; | 
|         } | 
|         .box-btn { | 
|             width: 100%; | 
|             height: 88rpx; | 
|             line-height: 88rpx; | 
|             text-align: center; | 
|             font-weight: 500; | 
|             font-size: 32rpx; | 
|             color: #FFFFFF; | 
|             background: #00BC12; | 
|             box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(91,190,56,0.16); | 
|             border-radius: 44rpx; | 
|             margin-bottom: 72rpx; | 
|         } | 
|         .box-footer { | 
|             width: 100%; | 
|             display: flex; | 
|             align-items: center; | 
|             image { | 
|                 width: 36rpx; | 
|                 height: 36rpx; | 
|                 flex-shrink: 0; | 
|                 margin-right: 14rpx; | 
|             } | 
|             text { | 
|                 font-weight: 400; | 
|                 font-size: 26rpx; | 
|                 color: #888888; | 
|             } | 
|         } | 
|     } | 
|     .bluetxt{ | 
|         color: royalblue !important; | 
|     } | 
| </style> |