修改登录流程

src/app.tsx

@@ -40,6 +40,7 @@ class App extends Component {
       'pages/home/tempaltes/index',
       'pages/home/tempaltes/index',
       'pages/home/film/index',
       'pages/home/film/index',
       'pages/login/index',
       'pages/login/index',
+      'pages/agreement/index',
       'pages/home/device/device_detail/index',
       'pages/home/device/device_detail/index',
       'pages/home/device/shop_device_detail/index',
       'pages/home/device/shop_device_detail/index',
       'pages/system/wifi_list/index',
       'pages/system/wifi_list/index',

src/pages/agreement/index.scss

+@import '@styles/var.scss';
+@import '~taro-ui/dist/style/components/button.scss';
+@import '~taro-ui/dist/style/components/loading.scss';
+
+.container {
+  width: 100%;
+  min-height: 100%;
+  flex-direction: column;
+  box-sizing: border-box;
+  line-height: 48px;
+  font-size: 28px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: rgba(51, 51, 51, 1);
+  padding: 0 42px;
+  padding-top: 72px;
+  padding-bottom: 42px;
+}

src/pages/agreement/index.tsx

+import { ComponentClass } from 'react'
+import { connect } from '@tarojs/redux'
+// import { HONE } from '../../constants/router'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+type PageStateProps = {
+  counter: {
+    num: number
+  }
+}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  checked: boolean
+  userPhone: string
+  checkCode: string
+  getCodeTime: number
+  step: number
+  weixinToken?: string
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface Login {
+  props: IProps
+  state: PageState
+}
+
+@connect(({ counter }) => ({
+  counter
+}))
+class Login extends Component {
+  config: Config = {
+    navigationBarTitleText: '服务协议'
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      userPhone: '15501259989',
+      checkCode: '123456',
+      checked: false,
+      getCodeTime: 0,
+      step: 2
+    }
+  }
+
+  render() {
+    return (
+      <View className="container">
+        <View>一、特别提示</View>
+        <View>
+          在此特别提醒您（用户）在注册成为理想屏用户之前，请认真阅读本《理想屏用户服务协议》
+          （以下简称“协议”），确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
+        </View>
+        <View>二、账号注册 </View>
+        <View>
+          1、鉴于理想屏账号的绑定注册方式，您同意临理想屏在注册时将允许您的手机号码及手机
+          设备识别码等信息用于注册。
+          2、在用户注册及使用本服务时，北京数字理想科技有限公司需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。
+        </View>
+        <View>三、账户安全</View>
+        <View>
+          1、用户一旦注册成功，成为理想屏的用户，将得到一个用户名和密码，并有权利使用自己的用户名及密码随时登陆理想屏。
+        </View>
+        <View>四、服务内容</View>
+        <View>
+          1、理想屏具体服务内容由北京数字理想有限公司提供： （1）屏幕与手机建立投屏的联系；
+          （2）使用理想屏可以将模板投在屏幕上；
+          2、北京数字理想科技有限公司将根据实际情况发布推送各类信息。
+          3、所有发给用户的通告及其他消息都可通过 APP 或者用户所提供的联系方式发送。
+        </View>
+        <View>五、服务的终止</View>
+        <View>
+          1、在下列情况下，北京数字理想科技有限公司有权终止向用户提供服务：
+          1）在用户违反本服务协议相关规定时，北京数字理想科技有限公司有权终止向该用户提供服务。
+          2）用户不得通过程序或人工方式进行对本APP破解及其它危害本APP的操作，若发现用户有该类行为，北京数字理想科技有限公司将立即终止服务，并有权扣留账户内金额。
+        </View>
+        <view>六、免责与赔偿声明</view>
+        <view>
+          1、请用户在使用过程中，对自己的账号密码妥善保管，不要告知他人，避免给您带来不必要的损失。
+          2、本协议最终解释权归北京数字理想科技有限公司所有。 3、本协议从 2019年12月15日起适用
+        </view>
+      </View>
+    )
+  }
+}
+export default Login as ComponentClass<PageOwnProps, PageState>

src/pages/login/index.scss

@@ -5,21 +5,101 @@
 .login {
 .login {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
-  padding-top: 90px;
   flex-direction: column;
   flex-direction: column;
-  background-color: white;
+  box-sizing: border-box;
+  // background-color: white;
+  background: white url('https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/loginbg.png') no-repeat center;
+  background-size: cover;
+
+  &-step1 {
+    padding-top: 200px;
+
+    .login-register {
+      width: 550px;
+      height: 86px;
+      margin: 0 auto;
+      line-height: 86px;
+      text-align: center;
+      font-size: 36px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 1);
+      border-radius: 54px;
+      border: 2px solid rgba(255, 255, 255, 1);
+      margin-top: 500px;
+    }
+  }
 
 
   &-logo {
   &-logo {
-    font-size: 60px;
-    color: #5ea1fb;
+    font-size: 86px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 1);
+    width: 671px;
+    height: 200px;
+    line-height: 200px;
+    margin: 0 auto;
+    // margin-top: 200px;
     text-align: center;
     text-align: center;
+    background: url('https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/visideal@2x.png') no-repeat center;
+    background-size: contain;
 
 
     @include eject(display, block);
     @include eject(display, block);
   }
   }
 
 
   &-content {
   &-content {
     width: 100%;
     width: 100%;
-    padding: 60px 38px 0;
+    padding-top: 60px;
+
+    .title {
+      text-align: center;
+      font-size: 36px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 1);
+    }
+
+    .auth-title {
+      padding-left: 60px;
+      padding-top: 150px;
+      font-size: 52px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 1);
+      padding-bottom: 35px;
+    }
+
+    .auth-tips {
+      padding-left: 60px;
+      width: 484px;
+      // height: 104px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      line-height: 40px;
+    }
+
+    .login-agree {
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+
+      .checkbox {
+        width: 36px;
+        height: 36px;
+        margin-right: 21px;
+      }
+
+      .liner {
+        text-decoration: underline;
+      }
+    }
 
 
     @include eject(box-sizing, border-box);
     @include eject(box-sizing, border-box);
   }
   }
@@ -76,6 +156,18 @@
   }
   }
 
 
   &-bottom-btn {
   &-bottom-btn {
-    margin-top: 120px;
+    margin-top: 90px;
+    margin-bottom: 103px;
+    width: 550px;
+    height: 86px;
+    border-radius: 54px;
+    background: none;
+    border: 2px solid rgba(255, 255, 255, 1);
+    opacity: 1;
+  }
+
+  &-bottom-btn-active {
+    color: rgba(241, 123, 48, 1);
+    background-color: #fff;
   }
   }
 }
 }

src/pages/login/index.tsx

@@ -6,7 +6,7 @@ import token from '../../common/token'
 // import { HONE } from '../../constants/router'
 // import { HONE } from '../../constants/router'
 import { checkPhone, showMyToast } from '../../common/utils'
 import { checkPhone, showMyToast } from '../../common/utils'
 import Taro, { Component, Config } from '@tarojs/taro'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Text, Input, Button, Checkbox, Label } from '@tarojs/components'
+import { View, Text, Input, Button, Checkbox, Label, Image } from '@tarojs/components'
 import { AtButton } from 'taro-ui'
 import { AtButton } from 'taro-ui'
 
 
 import './index.scss'
 import './index.scss'
@@ -26,6 +26,7 @@ type PageState = {
   userPhone: string
   userPhone: string
   checkCode: string
   checkCode: string
   getCodeTime: number
   getCodeTime: number
+  step: number | string
   weixinToken?: string
   weixinToken?: string
 }
 }
 
 
@@ -42,7 +43,7 @@ interface Login {
 class Login extends Component {
 class Login extends Component {
   config: Config = {
   config: Config = {
     navigationBarTitleText: '授权',
     navigationBarTitleText: '授权',
-    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
+    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'custom'
   }
   }
 
 
   constructor(props) {
   constructor(props) {
@@ -53,11 +54,13 @@ class Login extends Component {
     //   checked: false,
     //   checked: false,
     //   getCodeTime: 0
     //   getCodeTime: 0
     // }
     // }
+    const step = Taro.getStorageSync('step')
     this.state = {
     this.state = {
       userPhone: '15501259989',
       userPhone: '15501259989',
       checkCode: '123456',
       checkCode: '123456',
-      checked: true,
-      getCodeTime: 0
+      checked: false,
+      getCodeTime: 0,
+      step: step || 1
     }
     }
     this.OngetPhoneNumber = this.OngetPhoneNumber.bind(this)
     this.OngetPhoneNumber = this.OngetPhoneNumber.bind(this)
   }
   }
@@ -162,9 +165,9 @@ class Login extends Component {
           content: '您已获得3个月会员资格，可以使用全部精美模板。'
           content: '您已获得3个月会员资格，可以使用全部精美模板。'
         }).then(() => {
         }).then(() => {
           if (process.env.TARO_ENV !== 'rn') {
           if (process.env.TARO_ENV !== 'rn') {
-            Taro.switchTab({ url: '/pages/home/tempaltes/index' })
+            Taro.switchTab({ url: '/pages/home/device/index' })
           } else {
           } else {
-            Taro.redirectTo({ url: '/pages/home/tempaltes/index' })
+            Taro.redirectTo({ url: '/pages/home/device/index' })
           }
           }
         })
         })
         // if (process.env.TARO_ENV !== 'rn') {
         // if (process.env.TARO_ENV !== 'rn') {
@@ -194,26 +197,80 @@ class Login extends Component {
     console.log(e, 'getPhoneNumber', arguments)
     console.log(e, 'getPhoneNumber', arguments)
     const { weixinToken } = this.state
     const { weixinToken } = this.state
     const detail = e.detail
     const detail = e.detail
+    if (detail.encryptedData) {
       api.user.sendPhoneData(detail.encryptedData, detail.iv, weixinToken).then(res => {
       api.user.sendPhoneData(detail.encryptedData, detail.iv, weixinToken).then(res => {
         this.loginTohome(res)
         this.loginTohome(res)
         console.log(res, 'sendPhoneData')
         console.log(res, 'sendPhoneData')
       })
       })
     }
     }
+  }
 
 
-  shouldComponentUpdate(_nextProps, _nextState) {
-    const { userPhone, checkCode, checked, getCodeTime } = _nextState
-    const { userPhone: UP, checkCode: CC, checked: CK, getCodeTime: GT } = this.state
-    return userPhone !== UP || checkCode !== CC || checked !== CK || getCodeTime !== GT
+  // shouldComponentUpdate(_nextProps, _nextState) {
+  //   const { userPhone, checkCode, checked, getCodeTime } = _nextState
+  //   const { userPhone: UP, checkCode: CC, checked: CK, getCodeTime: GT } = this.state
+  //   return userPhone !== UP || checkCode !== CC || checked !== CK || getCodeTime !== GT
+  // }
+  setStep() {
+    this.setState({
+      step: 2
+    })
+  }
+  goAgree() {
+    Taro.setStorage({
+      key: 'step',
+      data: '2'
+    })
+    Taro.navigateTo({
+      url: '/pages/agreement/index'
+    })
   }
   }
 
 
   render() {
   render() {
-    const { checked, userPhone, checkCode, getCodeTime } = this.state
+    const { checked, userPhone, checkCode, getCodeTime, step } = this.state
     const loginBtnState = checkPhone(userPhone) && checked && checkCode.length === 6
     const loginBtnState = checkPhone(userPhone) && checked && checkCode.length === 6
     const getCodeing = getCodeTime > 0
     const getCodeing = getCodeTime > 0
     return (
     return (
       <View className="login">
       <View className="login">
-        <Text className="login-logo">VISIDEAL</Text>
+        {step === 1 && (
+          <View className="login-step1">
+            <View className="login-logo">理想屏</View>
+            <View className="login-register" onClick={this.setStep}>
+              立即注册
+            </View>
+          </View>
+        )}
+        {(step === '2' || step === 2) && (
           <View className="login-content">
           <View className="login-content">
+            <View className="title">注册</View>
+            <View className="auth-title">微信授权</View>
+            <View className="auth-tips">为了让您的账户更安全，请设置常用的联系方式</View>
+            <AtButton
+              className={checked ? 'login-bottom-btn login-bottom-btn-active' : 'login-bottom-btn'}
+              type="primary"
+              disabled={!checked}
+              openType="getPhoneNumber"
+              onGetPhoneNumber={this.OngetPhoneNumber}
+            >
+              获取您的手机号
+            </AtButton>
+            <View className="login-agree">
+              <Image
+                onClick={this.changeCheckBox}
+                className="checkbox"
+                src={
+                  checked
+                    ? 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/checkbox-login.png'
+                    : 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/checkbox-login2.png'
+                }
+              />
+              阅读并同意以下协议
+              <Text className="liner" onClick={this.goAgree}>
+                《服务协议》
+              </Text>
+            </View>
+          </View>
+        )}
+
         {/* <View className="login-user-phone">
         {/* <View className="login-user-phone">
             <Input
             <Input
               type="number"
               type="number"
@@ -257,15 +314,6 @@ class Login extends Component {
 
 
             </Text>
             </Text>
           </Label> */}
           </Label> */}
-          <AtButton
-            className="login-bottom-btn"
-            type="primary"
-            openType="getPhoneNumber"
-            onGetPhoneNumber={this.OngetPhoneNumber}
-          >
-            获取您的手机号
-          </AtButton>
-        </View>
       </View>
       </View>
     )
     )
   }
   }

src/pages/system/wifi_list/index.tsx

@@ -177,12 +177,26 @@ class WifiList extends Component {
   }
   }
 
 
   async getWifiInlineState(state: string) {
   async getWifiInlineState(state: string) {
+    // WIFI 连接信息
     let { wifiList, recordList, recordObj } = this.state
     let { wifiList, recordList, recordObj } = this.state
-    if (state === 'PWDFAILED' || state === 'FAILED') {
+    if (state === 'SUCCESS') {
+      const { activeWLAN, password } = this
+      const { ssid, type } = activeWLAN
+      await api.common.addMyequipmentWifi({
+        equipmentId: '',
+        wifiType: type,
+        wifiSsid: ssid,
+        wifiIdentity: '',
+        wifiPassword: password
+      })
+    }
+    if (state === 'PWDFAILED' || state === 'FAILED' || state === 'NETFAILED') {
+      if (recordObj[this.activeWLAN.ssid]) {
         await api.common.deleteMyequipmentWifi(this.activeWLAN.ssid)
         await api.common.deleteMyequipmentWifi(this.activeWLAN.ssid)
         wifiList.unshift(this.activeWLAN)
         wifiList.unshift(this.activeWLAN)
         recordList.splice(recordList.indexOf(this.activeWLAN), 1)
         recordList.splice(recordList.indexOf(this.activeWLAN), 1)
         delete recordObj[this.activeWLAN.ssid]
         delete recordObj[this.activeWLAN.ssid]
+      }
       this.setState({ openModal: true, wifiList, recordList, recordObj })
       this.setState({ openModal: true, wifiList, recordList, recordObj })
     }
     }
   }
   }
@@ -264,15 +278,7 @@ class WifiList extends Component {
     try {
     try {
       Taro.showLoading({ title: '连接中...' })
       Taro.showLoading({ title: '连接中...' })
       await Ble.postWifiPassword(id, password, deviceId)
       await Ble.postWifiPassword(id, password, deviceId)
-      const { activeWLAN } = this
-      const { ssid } = activeWLAN
-      await api.common.addMyequipmentWifi({
-        equipmentId: '',
-        wifiType: type,
-        wifiSsid: ssid,
-        wifiIdentity: '',
-        wifiPassword: password
-      })
+
       if (mode && mode === 'OWNRESET') {
       if (mode && mode === 'OWNRESET') {
         setTimeout(() => {
         setTimeout(() => {
           // Taro.navigateBack()
           // Taro.navigateBack()