1.微信一键登录：新增“同意用户协议”之后才可登录

陶杰

2025-01-13 efa9bfe98ba906e4c9b8f49c89f5da162a46bb0f

 pages/login/supplier-login.vue

@@ -20,20 +20,22 @@
                     <!-- #endif -->

                  </view>

               </view>

               <view class="t-a input form-input" v-if="loginType=='pwd'">

               <view class="t-a input form-input" v-if="loginType == 'pwd'">

                  <!-- <input type="text" name="userName" placeholder="请输入账号" v-model="userName" /> -->

                  <u-input placeholder="请输入账号" :border="false" v-model="userName" @blur="validatePhoneNumber()"></u-input>

                  <u-input placeholder="请输入账号" :border="false" v-model="userName"

                     @blur="validatePhoneNumber()"></u-input>



               </view>

               <view class="t-a input form-input" v-if="loginType=='pwd'">

               <view class="t-a input form-input" v-if="loginType == 'pwd'">

                  <u-input :password="true" :border="false" placeholder="请输入密码" v-model="password"></u-input>

               </view>

               <view class="t-a input form-input" v-if="loginType=='code'">

               <view class="t-a input form-input" v-if="loginType == 'code'">





                  <u-input placeholder="请输入手机号" :border="false" v-model="phoneNumber" @blur="validatePhoneNumber()">

                  <u-input placeholder="请输入手机号" :border="false" v-model="phoneNumber"

                     @blur="validatePhoneNumber()">

                     <template slot="suffix">

                        <view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">

                        <view class="get-code" :style="{ 'color': getCodeBtnColor }" @click.stop="getCode()">

                           {{ getCodeText }}

                        </view>

                     </template>

@@ -41,14 +43,14 @@
               </view>





               <view class="t-a form-input" v-if="loginType=='code'">

               <view class="t-a form-input" v-if="loginType == 'code'">

                  <u-input placeholder="请输入手机验证码" :border="false" v-model="smsCode"></u-input>



               </view>



               <view class="flex flex-wrap-normal" v-if="true">

                  <view :style="{'margin-top': '24rpx','margin-right': '12rpx','font-size':'24rpx'}"

                     @click="protocal=!protocal" class="component-radio" :class="[protocal?'cur':'']">

                  <view :style="{ 'margin-top': '24rpx', 'margin-right': '12rpx', 'font-size': '24rpx' }"

                     @click="protocal = !protocal" class="component-radio" :class="[protocal ? 'cur' : '']">



                  </view>

                  <!-- /pages/help/content?id=新手帮助 -->

@@ -56,24 +58,24 @@


                  <!-- #ifdef PUB_PARTNER -->

                  <view class="topic-gray">

                     请仔细阅读<span class="t-red" @click="goto('/pages/help/content?id=用户协议',false)">《用户协议》</span>、

                     <span class="t-red" @click="goto('/pages/help/content?id=隐私政策',false)">《隐私政策》</span>

                     、<span class="t-red" @click="goto('/pages/help/content?id=合伙人入驻协议',false)">《合伙人入驻协议》</span>

                     请仔细阅读<span class="t-red" @click="goto('/pages/help/content?id=用户协议', false)">《用户协议》</span>、

                     <span class="t-red" @click="goto('/pages/help/content?id=隐私政策', false)">《隐私政策》</span>

                     、<span class="t-red" @click="goto('/pages/help/content?id=合伙人入驻协议', false)">《合伙人入驻协议》</span>

                     如您同意该指引，请勾选开始使用本小程序

                  </view>

                  <!-- #endif -->

                  <!-- #ifdef PUB_SUPPLIER -->

                  <view class="topic-gray">

                     请仔细阅读<span class="t-red" @click="goto('/pages/help/content?id=用户协议',false)">《用户协议》</span>、

                     <span class="t-red" @click="goto('/pages/help/content?id=隐私政策',false)">《隐私政策》</span>

                     、<span class="t-red" @click="goto('/pages/help/content?id=卖家入驻协议',false)">《卖家入驻协议》</span>

                     请仔细阅读<span class="t-red" @click="goto('/pages/help/content?id=用户协议', false)">《用户协议》</span>、

                     <span class="t-red" @click="goto('/pages/help/content?id=隐私政策', false)">《隐私政策》</span>

                     、<span class="t-red" @click="goto('/pages/help/content?id=卖家入驻协议', false)">《卖家入驻协议》</span>

                     如您同意该指引，请勾选开始使用本小程序

                  </view>

                  <!-- #endif -->

                  <!-- #ifdef PUB_CUSTOMER -->

                  <view class="topic-gray">

                     请仔细阅读<span class="t-red" @click="goto('/pages/help/content?id=用户协议',false)">《用户协议》</span>和

                     <span class="t-red" @click="goto('/pages/help/content?id=隐私政策',false)">《隐私政策》</span>

                     请仔细阅读<span class="t-red" @click="goto('/pages/help/content?id=用户协议', false)">《用户协议》</span>和

                     <span class="t-red" @click="goto('/pages/help/content?id=隐私政策', false)">《隐私政策》</span>

                     如您同意该指引，请勾选开始使用本小程序

                  </view>

                  <!-- #endif -->

@@ -87,28 +89,29 @@
               <button @tap="login()" class="bottom-button">登 录</button>



               <view class="flex">

                  <view class="topic-font" v-if="loginType=='pwd'&&apitype!=='loginAdmin'"

                     @click="loginType='code'">手机验证码登录</view>

                  <view class="topic-font" v-if="loginType=='code'&&apitype!=='loginAdmin'"

                     @click="loginType='pwd'">账号密码登录</view>



                  <view class="topic-font m-l-a m-r-0" v-if="apitype!=='loginAdmin'" @click="toReg">前往注册</view>

                  <view class="topic-font" v-if="loginType == 'pwd' && apitype !== 'loginAdmin'"

                     @click="loginType = 'code'">手机验证码登录</view>

                  <view class="topic-font" v-if="loginType == 'code' && apitype !== 'loginAdmin'"

                     @click="loginType = 'pwd'">账号密码登录</view>



                  <view class="topic-font m-l-a m-r-0" v-if="apitype !== 'loginAdmin'" @click="toReg">前往注册</view>



                  <!-- #ifdef PUB_CUSTOMER -->

                  <view class="topic-font m-l-a m-r-0" @click="toHome" v-if="!source">返回首页</view>

                  <view class="topic-font m-l-a m-r-0" @click="backpage" v-if="source==='jump'">返回上一页</view>

                  <view class="topic-font m-l-a m-r-0" @click="backpage" v-if="source === 'jump'">返回上一页</view>



                  <!-- #endif -->

                  <!-- #ifdef PUB_PARTNER -->

                  <view class="topic-font m-l-a m-r-0" @click="()=>{

                     if(apitype==='loginPartner'){

                  <view class="topic-font m-l-a m-r-0" @click="() => {

                     if (apitype === 'loginPartner') {

                        apitype = 'loginAdmin'

                        loginType = 'pwd'

                     }else{

                     } else {

                        apitype = 'loginPartner'

                     }

                  }">

                     切换为{{apitype!=='loginPartner'?'合伙人':'质检人员'}}登录

                     切换为{{ apitype !== 'loginPartner' ? '合伙人' : '质检人员' }}登录

                  </view>

                  <!-- #endif -->

               </view>

@@ -119,66 +122,116 @@
            {{optionsStr}}

         </view> -->

      </view>



      <!-- #ifdef PUB_CUSTOMER -->

      <view class="flex" style="justify-content: center; margin-top: 150px;">

         <u--image :showLoading="true" v-if="false"

            src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/6e/6e74997e6d4c4a29be3903b35bc1f38fwechat.png"

            width="40rpx" height="40rpx">

         </u--image>

         <u-grid :border="false" :col="1">

            <u-grid-item v-if="wxUser.user" @click="handleWechatClick">

               <u--image :showLoading="true"

                  src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/6e/6e74997e6d4c4a29be3903b35bc1f38fwechat.png"

                  width="60rpx" height="60rpx" >

               </u--image>

					
					
            </u-grid-item>

				
               <u-grid-item v-else>

						
                  <button class="component-button-contact" style="font-size: 18rpx; margin: auto;" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber" >

                     <view style="display: flex; align-items: center;">

                        <u--image :showLoading="true"

                           src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/6e/6e74997e6d4c4a29be3903b35bc1f38fwechat.png"

                           width="60rpx" height="60rpx" >

                        </u--image>

							
                     </view>

                  </button>

						
               </u-grid-item>

				
         </u-grid>

      </view>

      <!-- #endif -->



   </view>

</template>

<script>

   export default {

      async onLoad(options) {

         this.source = options.source || ''

         this.sharePartnerUserId = options.sharePartnerUserId || ''

         // #ifdef PUB_CUSTOMER

         var query = options.q && decodeURIComponent(options.q) || ''

         var querydto = {}

         if (query) {

            try {

               var keyvalues = query.split("?")[1].split("&")

export default {

   async onLoad(options) {



      // this.getOpenId();





      this.source = options.source || ''

      this.sharePartnerUserId = options.sharePartnerUserId || ''

      // #ifdef PUB_CUSTOMER

      var query = options.q && decodeURIComponent(options.q) || ''

      var querydto = {}

      if (query) {

         try {

            var keyvalues = query.split("?")[1].split("&")

            for (var item of keyvalues) {

               var tarr = item.split("=")

               querydto[tarr[0]] = tarr[1]

            }

         } catch (e) {

            console.error('error', e)

         }

      }

      try {

         if (!querydto.partnerUserId) {

            if (options.query && options.query.scene || options.scene) {

               //说明是特殊小程序二维码扫码跳转的

               var keyvalues = decodeURIComponent(options.query && options.query.scene || options.scene).split("&")

               for (var item of keyvalues) {

                  var tarr = item.split("=")

                  querydto[tarr[0]] = tarr[1]

               }

            } catch (e) {

               console.error('error', e)

            }

         }

         try {

            if (!querydto.partnerUserId) {

               if (options.query && options.query.scene || options.scene) {

                  //说明是特殊小程序二维码扫码跳转的

                  var keyvalues = decodeURIComponent(options.query&&options.query.scene || options.scene).split("&")

                  for (var item of keyvalues) {

                     var tarr = item.split("=")

                     querydto[tarr[0]] = tarr[1]

                  }

               }

            }



         } catch (e) {

            console.error('error2', e)

         }

      } catch (e) {

         console.error('error2', e)

      }





         console.log('options query111', options, querydto)

         // this.optionsStr = JSON.stringify(options) || ''

         if (querydto.partnerUserId) {

            //通过接口获取名称，兼容，url上不能放中文的情况

      console.log('options query111', options, querydto)

      // this.optionsStr = JSON.stringify(options) || ''

      if (querydto.partnerUserId) {

         //通过接口获取名称，兼容，url上不能放中文的情况







            if (this.$storage.getItem('token')) {

               console.log('to login 1')

               this.$message.showLoading()

               //稍微等一会，避免currentInfo还在同步

               let tmp = this

               setTimeout(async () => {

                  try {

                     tmp.$message.hideLoading()

                     if (tmp.currentInfo && tmp.currentInfo.id || tmp.$storage.getItem('token')) {

                        await tmp.$store.dispatch('getCurrentInfo');

                        //已经登录的直接判断，并且绑定

                        tmp.$nextTick(async () => {

                           if (!tmp.currentInfo.customerDTO) {

         if (this.$storage.getItem('token')) {

            console.log('to login 1')

            this.$message.showLoading()

            //稍微等一会，避免currentInfo还在同步

            let tmp = this

            setTimeout(async () => {

               try {

                  tmp.$message.hideLoading()

                  if (tmp.currentInfo && tmp.currentInfo.id || tmp.$storage.getItem('token')) {

                     await tmp.$store.dispatch('getCurrentInfo');

                     //已经登录的直接判断，并且绑定

                     tmp.$nextTick(async () => {

                        if (!tmp.currentInfo.customerDTO) {

                           tmp.$message.showToast(

                              '您尚未完善信息无法绑定')

                           setTimeout(() => {

                              uni.reLaunch({

                                 url: '/pages/home/home'

                              })

                           }, 500)

                           return

                        } else {

                           if (tmp.currentInfo.customerDTO

                              .partnerId) {

                              tmp.$message.showToast(

                                 '您尚未完善信息无法绑定')

                                 '您已绑定，请联系客服解除绑定')

                              setTimeout(() => {

                                 uni.reLaunch({

                                    url: '/pages/home/home'

@@ -186,619 +239,814 @@
                              }, 500)

                              return

                           } else {

                              if (tmp.currentInfo.customerDTO

                                 .partnerId) {

                                 tmp.$message.showToast(

                                    '您已绑定，请联系客服解除绑定')

                              //前往绑定页面

                              //直接绑定

                              //调用接口绑定

                              tmp.$message.showLoading()

                              const {

                                 code,

                                 data

                              } = await tmp.$http.request('post',

                                 '/api/customer/bind/partner', {

                                 data: {

                                    partnerUserId: querydto

                                       .partnerUserId

                                 }

                              })

                              tmp.$message.hideLoading()

                              if (code == 0) {

                                 tmp.$message.showToast(`绑定合伙人成功`)

                                 await tmp.$store.dispatch('getCurrentInfo')

                                 //跳转到个人页面

                                 setTimeout(() => {

                                    uni.reLaunch({

                                       url: '/pages/home/home'

                                    })

                                 }, 500)

                                 return

                              } else {

                                 //前往绑定页面

                                 //直接绑定

                                 //调用接口绑定

                                 tmp.$message.showLoading()

                                 const {

                                    code,

                                    data

                                 } = await tmp.$http.request('post',

                                    '/api/customer/bind/partner', {

                                       data: {

                                          partnerUserId: querydto

                                             .partnerUserId

                                       }

                                    })

                                 tmp.$message.hideLoading()

                                 if (code == 0) {

                                    tmp.$message.showToast(`绑定合伙人成功`)

                                    await tmp.$store.dispatch('getCurrentInfo')

                                    //跳转到个人页面

                                    setTimeout(() => {

                                       uni.reLaunch({

                                          url: '/pages/home/home'

                                       })

                                    }, 500)



                                 }



                              }



                           }

                        })







                        //这种已经登录的

                        //确定是注册绑定还是重新绑定

                        // tmp.$nextTick(() => {

                        //    var tt = {

                        //       title: '提示:您已登录,是直接用该账号绑定，还是退出并注册新账号绑定合伙人',

                        //       content: '',

                        //       showCancel: true,

                        //       cancelText: '直接绑定',

                        //       cancelColor: '#000000',

                        //       confirmText: '退出注册',

                        //       confirmColor: '#20613D'

                        //    }

                        //    uni.showModal({

                        //       ...tt,

                        //       success: async (res) => {



                        //          if (res.confirm) {

                        //             //清空登录信息，

                        //             this.$store.commit('updateLogin',

                        //                false)

                        //             setTimeout(() => {

                        //                uni.navigateTo({

                        //                   url: `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

                        //                })

                        //             }, 200)

                        //          }

                        //          if (res.cancel) {

                        //             if (!tmp.currentInfo.customerDTO) {

                        //                tmp.$message.showToast(

                        //                   '您尚未完善信息无法绑定')

                        //                return

                        //             } else {

                        //                if (tmp.currentInfo.customerDTO

                        //                   .partnerId) {

                        //                   tmp.$message.showToast(

                        //                      '您已绑定，请联系客服解除绑定')

                        //                   return

                        //                } else {

                        //                   //前往绑定页面

                        //                   uni.reLaunch({

                        //                      url: `/pages/user/supplier-user?partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

                        //                   })

                        //                }

                        //             }

                        //          }

                        //       },

                        //       fail(res) {

                        //          console.log('res uni model', res)

                        //       }

                        //    })



                        // })





                     } else {

                        console.log('to login 3')

                        //退出登录了，或者失效了

                        // uni.navigateTo({

                        //    url: `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

                        // })

                        if (!querydto.partnerUserName) {

                           tmp.$message.showLoading()

                           const resname = await tmp.$http.request('get',

                              '/api/customer/partner/name', {

                                 params: {

                                    id: querydto.partnerUserId

                                 }

                              })

                           tmp.$message.hideLoading()

                           if (resname.code == 0) {

                              querydto.partnerUserName = resname.data || ''

                           }



                        }

                        uni.navigateTo({

                           url: `/pages/login/supplier-reg?partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName||''}`

                     })







                     //这种已经登录的

                     //确定是注册绑定还是重新绑定

                     // tmp.$nextTick(() => {

                     //    var tt = {

                     //       title: '提示:您已登录,是直接用该账号绑定，还是退出并注册新账号绑定合伙人',

                     //       content: '',

                     //       showCancel: true,

                     //       cancelText: '直接绑定',

                     //       cancelColor: '#000000',

                     //       confirmText: '退出注册',

                     //       confirmColor: '#20613D'

                     //    }

                     //    uni.showModal({

                     //       ...tt,

                     //       success: async (res) => {



                     //          if (res.confirm) {

                     //             //清空登录信息，

                     //             this.$store.commit('updateLogin',

                     //                false)

                     //             setTimeout(() => {

                     //                uni.navigateTo({

                     //                   url: `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

                     //                })

                     //             }, 200)

                     //          }

                     //          if (res.cancel) {

                     //             if (!tmp.currentInfo.customerDTO) {

                     //                tmp.$message.showToast(

                     //                   '您尚未完善信息无法绑定')

                     //                return

                     //             } else {

                     //                if (tmp.currentInfo.customerDTO

                     //                   .partnerId) {

                     //                   tmp.$message.showToast(

                     //                      '您已绑定，请联系客服解除绑定')

                     //                   return

                     //                } else {

                     //                   //前往绑定页面

                     //                   uni.reLaunch({

                     //                      url: `/pages/user/supplier-user?partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

                     //                   })

                     //                }

                     //             }

                     //          }

                     //       },

                     //       fail(res) {

                     //          console.log('res uni model', res)

                     //       }

                     //    })



                     // })





                  } else {

                     console.log('to login 3')

                     //退出登录了，或者失效了

                     // uni.navigateTo({

                     //    url: `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

                     // })

                     if (!querydto.partnerUserName) {

                        tmp.$message.showLoading()

                        const resname = await tmp.$http.request('get',

                           '/api/customer/partner/name', {

                           params: {

                              id: querydto.partnerUserId

                           }

                        })

                     }

                  } catch (e2) {

                     console.log('to login error', e2)

                  }

               }, 2000)

                        tmp.$message.hideLoading()

                        if (resname.code == 0) {

                           querydto.partnerUserName = resname.data || ''

                        }



            } else {

               if (!querydto.partnerUserName) {

                  this.$message.showLoading()

                  const resname = await this.$http.request('get', '/api/customer/partner/name', {

                     params: {

                        id: querydto.partnerUserId

                     }

                  })

                  this.$message.hideLoading()

                  if (resname.code == 0) {

                     querydto.partnerUserName = resname.data || ''

                     uni.navigateTo({

                        url: `/pages/login/supplier-reg?partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName || ''}`

                     })

                  }



               } catch (e2) {

                  console.log('to login error', e2)

               }

               // console.log('to login 2',

               //    `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

               // )

               // uni.navigateTo({

               //    url: `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

               // })

               uni.navigateTo({

                  url: `/pages/login/supplier-reg?partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName||''}`

            }, 2000)



         } else {

            if (!querydto.partnerUserName) {

               this.$message.showLoading()

               const resname = await this.$http.request('get', '/api/customer/partner/name', {

                  params: {

                     id: querydto.partnerUserId

                  }

               })

               this.$message.hideLoading()

               if (resname.code == 0) {

                  querydto.partnerUserName = resname.data || ''

               }



            }





            // console.log('to login 2',

            //    `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

            // )

            // uni.navigateTo({

            //    url: `/sub_pages/customer/customer-info/customer-info?source=step&partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName}`

            // })

            uni.navigateTo({

               url: `/pages/login/supplier-reg?partnerUserId=${querydto.partnerUserId}&partnerUserName=${querydto.partnerUserName || ''}`

            })

         }





      }

      // #endif



   },



   onShow() {

      // #ifdef PUB_CUSTOMER

          this.getOpenId();

      // #endif

   },

   onShareAppMessage() {

      let that = this;

      var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

         that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''

      var url =

         `/pages/login/supplier-login?shareId=${this.currentInfo && this.currentInfo.id || ''}&shareName=${name || ''}`; //你的转发页面路径拼接参数

      return {

         title: "花满芫",

         path: url,

      }

   },

   onShareTimeline() {

      let that = this;

      var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

         that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''

      var url =

         `/pages/login/supplier-login?shareId=${this.currentInfo && this.currentInfo.id || ''}&shareName=${name || ''}`; //你的转发页面路径拼接参数

      return {

         title: "花满芫",

         path: url,

      }

   },

   data() {

      return {

         optionsStr: '',

         openId: '-1',

         userName: '',

         password: '',

         // userName: '',

         // password: '',



         phoneNumber: '',

         smsCode: '',

         source: '', //来源

         sharePartnerUserId: '', //分享跳转登录的id



         checked: false,

         loginType: 'pwd', //pwd和code，密码和验证码登录

         pcfvalue: undefined,

         getCodeText: '获取验证码',

         getCodeBtnColor: "#20613D",

         getCodeisWaiting: false,

         Timer: undefined,

         protocal: false,

         // #ifdef PUB_SUPPLIER

         apitype: 'loginSupplier',

         // #endif

         // #ifdef PUB_PARTNER

         apitype: 'loginPartner',

         // #endif

         // #ifdef PUB_CUSTOMER

         apitype: 'loginCustomer',

         // #endif

         // return 'loginPartner'

			


      },

      onShareAppMessage() {

         let that = this;

         var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

            that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''

         var url =

            `/pages/login/supplier-login?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数

         return {

            title: "花满芫",

            path: url,

         }

      },

      onShareTimeline() {

         let that = this;

         var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

            that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''

         var url =

            `/pages/login/supplier-login?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数

         return {

            title: "花满芫",

            path: url,

         }

      },

      data() {

         return {

            optionsStr: '',

            openId: '-1',

            userName: '',

            password: '',

            // userName: '',

            // password: '',

         wxUser:{

            openId:'',

            sessionKey:'',

            unionId:'',

            user:{},

            phoneNumber:'',

            purePhoneNumber:'',

         },



            phoneNumber: '',

            smsCode: '',

            source: '', //来源

            sharePartnerUserId: '', //分享跳转登录的id

      };

   },

   methods: {



            checked: false,

            loginType: 'pwd', //pwd和code，密码和验证码登录

            pcfvalue: undefined,

            getCodeText: '获取验证码',

            getCodeBtnColor: "#20613D",

            getCodeisWaiting: false,

            Timer: undefined,

            protocal:false,

            // #ifdef PUB_SUPPLIER

            apitype: 'loginSupplier',

            // #endif

            // #ifdef PUB_PARTNER

            apitype: 'loginPartner',

            // #endif

            // #ifdef PUB_CUSTOMER

            apitype: 'loginCustomer',

            // #endif

            // return 'loginPartner'

         };

      },

      methods: {

            // 手机号码正则表达式校验

            validatePhoneNumber() {

      getOpenId(){

         let that=this

         uni.login({

            "provider": "weixin",

            "onlyAuthorize": true, // 微信登录仅请求授权认证

            success: async function (event) {

               console.log("aaaa")

               console.log(event)

               const { code } = event

               await that.getExistUserByOpenId(code);

               that.wxLoginCode=code

               console.log("wxUser")

               console.log(that.wxUser)



                // 手机号码正则表达式，可以根据需要调整

                const phoneRegex = /^[1][3-9][0-9]{9}$/;

                if (this.loginType == 'pwd') {

                    if (!phoneRegex.test(this.userName)) {

                        this.$message.showToast('请填写正确手机号码')

                    }

                }

                if (this.loginType == 'code') {

                    if (!phoneRegex.test(this.phoneNumber)) {

                        this.$message.showToast('请填写正确手机号码')

                    }

                }



            },

         async getCode() {

            console.log('getCode')

            uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。

            if (this.getCodeisWaiting) {

               return;

            },

            fail: function (err) {

               // 登录授权失败

               // err.code是错误码

            }

            if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误

               this.$message.showToast('请填写正确手机号码')

               return false;

            }

            this.getCodeText = "发送中..." //发送验证码

            this.getCodeisWaiting = true;

            this.getCodeBtnColor = "#000" //追加样式，修改颜色

            //示例用定时器模拟请求效果

            //setTimeout(()用于在指定的毫秒数后调用函数或计算表达式

         })

      },







      async handleGetPhoneNumber(e){

         let that = this

         if (!this.protocal) {

            this.$message.showToast('请同意用户协议')

            return

         }

         console.log(e)

         console.log(e.detail.code)  // 动态令牌

         console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）

         console.log(e.detail.errno)  // 错误码（失败时返回）

         if (e.detail.errMsg == 'getPhoneNumber:ok') {

            console.log('获取成功')

            const {

               code

            } = await this.$http.request('post', '/api/sms/send/code', {

               code,data

            } = await that.$http.request('post', '/api/wx/getuserphonenumber', {

               data: {

                  tel: this.phoneNumber,

                  userType: this.apitype.replace("login", "").toLowerCase()

                  code: e.detail.code,

                  userType: that.apitype.replace("login", "").toLowerCase()

               }

            })

            if (code == 0) {

               uni.showToast({

                  title: '验证码已发送',

                  icon: "none"

               });

               this.setTimer(); //调用定时器方法

               // 获取手机号码后，实现微信登录

               console.log(data)

               const phoneNumber=data.phone_info.phoneNumber;

               const purePhoneNumber=data.phone_info.purePhoneNumber;

               that.wxUser.phoneNumber=phoneNumber

               that.wxUser.purePhoneNumber=purePhoneNumber

               that.handleWechatClick()

            } else {

               this.getCodeText = "获取验证码" //发送验证码

					
            }

         }else{

            this.$message.showToast('获取授权失败，无法登录！')

         }

      },



      async getExistUserByOpenId(accessCode){

         let that=this;

         const {

               code,data

            } = await that.$http.request('post', '/api/wx/getExistUserByOpenId', {

               data: {

                  code: accessCode,

                  userType: that.apitype.replace("login", "").toLowerCase()

               }

            })

            if (code == 0) {

               console.log("查看当前用户是否已经绑定过")

               console.log(data)

               that.wxUser=data

               if(that.wxUser&&that.wxUser.user){

                  return true

               }

               return false

            } else {

               this.$message.showToast('系统异常，无法获取当前微信是否已经绑定过账号')

            }

      },



      handleWechatClick22() {

         uni.login({

            provider: 'univerify',

            univerifyStyle: {

               fullScreen: true

            }

         })

      },



      handleWechatClick_new() {

         let that = this

         // 微信登录

         uni.login({

            "provider": "weixin",

            "onlyAuthorize": true, // 微信登录仅请求授权认证

            success: async function (event) {

               const { code } = event

               that.$message.showLoading();

               // 1.解析当前code，查看当前的openid是否已经绑定过用户，

               // 2.如果没有的话，则获取当前手机号，并注册信息用户绑定再登录

               // 3.如果已经绑定过用户，则直接登录

               console.log("查看当前用户是否已经绑定过")

               const resp = await that.getExistUserByOpenId(code)

               if(resp){

                  // 已经绑定过用户，则直接登录

                  const resp = await that.$store.dispatch('loginwx', { code })

                  if (resp && resp.data) {

                     that.$forceUpdate()

                     uni.reLaunch({

                        url: '/pages/home/home'

                     })

                  }

               }else{

                  // 没有绑定过用户，则获取当前手机号，并注册信息用户绑定再登录

                  // let el = uni.createSelectorQuery().in(this).select('#phoneButton');

                  // console.log(el)

                  // 使用 uni.createSelectorQuery 获取按钮元素

                  uni.createSelectorQuery().select('#phoneButton').boundingClientRect((rect) => {

                     if (rect) {

                     // 获取到按钮后，模拟点击

                     uni.createSelectorQuery().select('#phoneButton').node((res) => {

                        if (res.node) {

                        res.node.click(); // 模拟点击

                        }

                     }).exec();

                     }

                  }).exec();

               }

					


               // const resp = await that.$store.dispatch('loginwx', { code })

               // if (resp && resp.data) {

               //    that.$forceUpdate()

               //    uni.reLaunch({

               //       url: '/pages/home/home'

               //    })

               // }

               that.$message.hideLoading();

            },

            fail: function (err) {

               // 登录授权失败

               // err.code是错误码

            }

         })



      },



		
      handleWechatClick() {



         if (!this.protocal) {

            this.$message.showToast('请同意用户协议')

            return

         }



         let that = this

         // 微信登录

         uni.login({

            "provider": "weixin",

            "onlyAuthorize": true, // 微信登录仅请求授权认证

            success: async function (event) {

               const { code } = event

               that.$message.showLoading();

               const resp = await that.$store.dispatch('loginwx', { code,phoneNumber:that.wxUser.phoneNumber,purePhoneNumber:that.wxUser.purePhoneNumber })

               if (resp && resp.data) {

                  that.$forceUpdate()

                  uni.reLaunch({

                     url: '/pages/home/home'

                  })

               }

               that.$message.hideLoading();

            },

            fail: function (err) {

               // 登录授权失败

               // err.code是错误码

            }

         })



      },

      // 手机号码正则表达式校验

      validatePhoneNumber() {



         // 手机号码正则表达式，可以根据需要调整

         const phoneRegex = /^[1][3-9][0-9]{9}$/;

         if (this.loginType == 'pwd') {

            if (!phoneRegex.test(this.userName)) {

               this.$message.showToast('请填写正确手机号码')

            }

         }

         if (this.loginType == 'code') {

            if (!phoneRegex.test(this.phoneNumber)) {

               this.$message.showToast('请填写正确手机号码')

            }

         }



      },

      async getCode() {

         console.log('getCode')

         uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。

         if (this.getCodeisWaiting) {

            return;

         }

         if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误

            this.$message.showToast('请填写正确手机号码')

            return false;

         }

         this.getCodeText = "发送中..." //发送验证码

         this.getCodeisWaiting = true;

         this.getCodeBtnColor = "#000" //追加样式，修改颜色

         //示例用定时器模拟请求效果

         //setTimeout(()用于在指定的毫秒数后调用函数或计算表达式

         const {

            code

         } = await this.$http.request('post', '/api/sms/send/code', {

            data: {

               tel: this.phoneNumber,

               userType: this.apitype.replace("login", "").toLowerCase()

            }

         })

         if (code == 0) {

            uni.showToast({

               title: '验证码已发送',

               icon: "none"

            });

            this.setTimer(); //调用定时器方法

         } else {

            this.getCodeText = "获取验证码" //发送验证码

            this.getCodeisWaiting = false;

            this.getCodeBtnColor = "#20613D";

         }

         // setTimeout(() => {

         //    uni.showToast({

         //       title: '验证码已发送',

         //       icon: "none"

         //    }); //弹出提示框

         //    //示例默认1234，生产中请删除这一句。

         //    // this.code = '1234'; //发送验证码，进行填入

         //    this.setTimer(); //调用定时器方法

         // }, 1000)

      },

      //setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数

      setTimer() {

         let holdTime = 60; //定义变量并赋值

         this.getCodeText = "重新获取(60)"

         //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。

         //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。

         this.Timer = setInterval(() => {

            if (holdTime <= 0) {

               this.getCodeisWaiting = false;

               this.getCodeBtnColor = "#20613D";

               this.getCodeText = "获取验证码"

               clearInterval(this.Timer); //清除该函数

               return; //返回前面

            }

            // setTimeout(() => {

            //    uni.showToast({

            //       title: '验证码已发送',

            //       icon: "none"

            //    }); //弹出提示框

            //    //示例默认1234，生产中请删除这一句。

            //    // this.code = '1234'; //发送验证码，进行填入

            //    this.setTimer(); //调用定时器方法

            // }, 1000)

         },

         //setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数

         setTimer() {

            let holdTime = 60; //定义变量并赋值

            this.getCodeText = "重新获取(60)"

            //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。

            //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。

            this.Timer = setInterval(() => {

               if (holdTime <= 0) {

                  this.getCodeisWaiting = false;

                  this.getCodeBtnColor = "#20613D";

                  this.getCodeText = "获取验证码"

                  clearInterval(this.Timer); //清除该函数

                  return; //返回前面

               }

               this.getCodeText = "重新获取(" + holdTime + ")"

               holdTime--;

            }, 1000)

         },

         toHome() {

            uni.reLaunch({

               url: '/pages/home/home'

            })

         },

         toReg() {

            // uni.switchTab({

            //    url: '/pages/index/index'

            // })

            var addstr = ''

            // #ifdef PUB_PARTNER

            addstr = '?source=step'

            uni.navigateTo({

               url: '/sub_pages/partner/partner-info/partner-info' + addstr

            })

            // #endif

            // #ifdef PUB_SUPPLIER

            uni.reLaunch({

               url: '/pages/login/supplier-reg'

            })

            // #endif

            // #ifdef PUB_CUSTOMER

            // addstr = '?source=step'

            // uni.navigateTo({

            //    url: '/sub_pages/customer/customer-info/customer-info' + addstr

            // })

            uni.reLaunch({

               url: '/pages/login/supplier-reg'

            })

            // todo 如果是有分享id的，可能需要提前进行绑定

            this.getCodeText = "重新获取(" + holdTime + ")"

            holdTime--;

         }, 1000)

      },

      toHome() {

         uni.reLaunch({

            url: '/pages/home/home'

         })

      },

      toReg() {

         // uni.switchTab({

         //    url: '/pages/index/index'

         // })

         var addstr = ''

         // #ifdef PUB_PARTNER

         addstr = '?source=step'

         uni.navigateTo({

            url: '/sub_pages/partner/partner-info/partner-info' + addstr

         })

         // #endif

         // #ifdef PUB_SUPPLIER

         uni.reLaunch({

            url: '/pages/login/supplier-reg'

         })

         // #endif

         // #ifdef PUB_CUSTOMER

         // addstr = '?source=step'

         // uni.navigateTo({

         //    url: '/sub_pages/customer/customer-info/customer-info' + addstr

         // })

         uni.reLaunch({

            url: '/pages/login/supplier-reg'

         })

         // todo 如果是有分享id的，可能需要提前进行绑定





            // #endif

         },

         changeAll(e) {

            this.pcfvalue = e.detail.value[0]

         },

         async login() {

            if(!this.protocal){

               this.$message.showToast('请同意用户协议')

               return

            }

            uni.showLoading({

               title: '登陆中'

            });

            var that = this;

            if (this.loginType == 'pwd') {

               if (!that.userName) {

                  uni.showToast({

                     title: '请输入用户名',

                     icon: 'none'

                  });

                  return;

               }

               if (!that.password) {

                  uni.showToast({

                     title: '请输入密码',

                     icon: 'none'

                  });

                  return;

               }

               that.phoneNumber = ''

            }

            if (this.loginType == 'code') {

               if (!that.phoneNumber) {

                  uni.showToast({

                     title: '请输入手机号',

                     icon: 'none'

                  });

                  return;

               }

               if (!that.smsCode) {

                  uni.showToast({

                     title: '请输入手机验证码',

                     icon: 'none'

                  });

                  return;

               }

            }

            // if (this.pcfvalue == undefined) {

            //    util.showMyToast('必须勾选《用户服务协议》及《隐私政策》');

            //    return;

            // }

            let post = {

               username: this.userName,

               password: this.password,

               tel: this.phoneNumber,

               smsCode: this.smsCode

               // openId: '123456789'

            }

            // const {

            // code

            // } = await this.$http.request('get', '/api/login/admin')

            const resp = await this.$store.dispatch(this.apitype, post);

            // uni.hideLoading()



            if (resp.code === 0) {



               // myCache.cache("userToken", res.data.accessToken)

               // let userRes = await gzmzApi.getMemberInfo();

               // if (userRes.status) {

               //    myCache.cache("userInfo", JSON.stringify(userRes.data))

               // }

               // setTimeout(() => {

               //    uni.navigateBack();

               // }, 1000);







            } else {

               // uni.showToast({

               //    title: '登录失败！',

               //    icon: 'none'

               // });

         // #endif

      },

      changeAll(e) {

         this.pcfvalue = e.detail.value[0]

      },

      async login() {

         if (!this.protocal) {

            this.$message.showToast('请同意用户协议')

            return

         }

         uni.showLoading({

            title: '登陆中'

         });

         var that = this;

         if (this.loginType == 'pwd') {

            if (!that.userName) {

               uni.showToast({

                  title: '请输入用户名',

                  icon: 'none'

               });

               return;

            }



         },

         tc1(id) {

            uni.navigateTo({

               url: '/pages/users/xieyi?id=' + id,

            });

            if (!that.password) {

               uni.showToast({

                  title: '请输入密码',

                  icon: 'none'

               });

               return;

            }

            that.phoneNumber = ''

         }

         if (this.loginType == 'code') {

            if (!that.phoneNumber) {

               uni.showToast({

                  title: '请输入手机号',

                  icon: 'none'

               });

               return;

            }

            if (!that.smsCode) {

               uni.showToast({

                  title: '请输入手机验证码',

                  icon: 'none'

               });

               return;

            }

         }

         // if (this.pcfvalue == undefined) {

         //    util.showMyToast('必须勾选《用户服务协议》及《隐私政策》');

         //    return;

         // }

         let post = {

            username: this.userName,

            password: this.password,

            tel: this.phoneNumber,

            smsCode: this.smsCode

            // openId: '123456789'

         }

         // const {

         // code

         // } = await this.$http.request('get', '/api/login/admin')

         const resp = await this.$store.dispatch(this.apitype, post);

         // uni.hideLoading()



         if (resp.code === 0) {



            // myCache.cache("userToken", res.data.accessToken)

            // let userRes = await gzmzApi.getMemberInfo();

            // if (userRes.status) {

            //    myCache.cache("userInfo", JSON.stringify(userRes.data))

            // }

            // setTimeout(() => {

            //    uni.navigateBack();

            // }, 1000);







         } else {

            // uni.showToast({

            //    title: '登录失败！',

            //    icon: 'none'

            // });

            return;

         }



      },

      tc1(id) {

         uni.navigateTo({

            url: '/pages/users/xieyi?id=' + id,

         });

      }

   };

   }

};

</script>

<style lang="scss" scoped>

   .form-input {

      background-color: #f8f7fc;

      border-radius: 50rpx;

      margin-bottom: 50rpx;

      border: 1px solid #e9e9e9;

.form-input {

   background-color: #f8f7fc;

   border-radius: 50rpx;

   margin-bottom: 50rpx;

   border: 1px solid #e9e9e9;



      /deep/ .u-input {

         padding-left: 60rpx !important;

         padding-right: 40rpx !important;

      }

   /deep/ .u-input {

      padding-left: 60rpx !important;

      padding-right: 40rpx !important;

   }



      /deep/ input {

         height: 70rpx;

         line-height: 70rpx;



      }

   /deep/ input {

      height: 70rpx;

      line-height: 70rpx;



   }



}

</style>

<style lang="scss" scoped>

   @import './login.scss';

@import './login.scss';



   .main-container {

      margin: 20px 0;

.main-container {

   margin: 20px 0;

}



.img-a {

   position: absolute;

   width: 100%;

   top: -150rpx;

   right: 0;

}



.img-b {

   position: absolute;

   width: 50%;

   bottom: 0;

   left: -120rpx;

}



.to-home {

   margin-top: 30rpx;

   font-size: 30rpx;

   color: #5af;

   display: flex;

   flex-direction: row-reverse;

}



.t-login {

   width: 100%;

   margin: 0 auto;

   font-size: 28rpx;

   color: #000;

}



.t-login .bg {

   width: 100%;

   position: relative;

}



.t-login .login {

   width: 650rpx;

   margin: 60rpx auto;

   margin-top: 0rpx;

   font-size: 28rpx;

   color: #000;

}



.t-login button {

   font-size: 28rpx;

   background: #5677fc;

   color: #fff;

   height: 90rpx;

   line-height: 90rpx;

   border-radius: 50rpx;

   box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);

}



.t-login input {

   padding: 0 20rpx 0 60rpx;

   height: 90rpx;

   line-height: 90rpx;

   margin-bottom: 50rpx;

   background: #f8f7fc;

   border: 1px solid #e9e9e9;

   font-size: 28rpx;

   border-radius: 50rpx;

}



.t-login .t-a {

   position: relative;



   .get-code {

      // position: absolute;

      // right: 40rpx;

      // top: 25rpx;

   }

}



   .img-a {

      position: absolute;

      width: 100%;

      top: -150rpx;

      right: 0;

   }

.t-login .t-a .icon {

   width: 40rpx;

   height: 40rpx;

   position: absolute;

   left: 24rpx;

   top: 14rpx;

   margin-right: 20rpx;

}



   .img-b {

      position: absolute;

      width: 50%;

      bottom: 0;

      left: -120rpx;

   }

.t-login .t-a .line {

   width: 2rpx;

   height: 40rpx;

   background-color: #dedede;

   position: absolute;

   top: 28rpx;

   left: 98rpx;

}



   .to-home {

      margin-top: 30rpx;

      font-size: 30rpx;

      color: #5af;

      display: flex;

      flex-direction: row-reverse;

   }

.t-login .t-b {

   text-align: left;

   font-size: 46rpx;

   color: #000;

   padding: 300rpx 0 30rpx 0;

   font-weight: bold;

}



   .t-login {

      width: 100%;

      margin: 0 auto;

      font-size: 28rpx;

      color: #000;

   }

.t-login .t-b2 {

   text-align: left;

   font-size: 32rpx;

   color: #aaaaaa;

   padding: 0rpx 0 120rpx 0;

}



   .t-login .bg {

      width: 100%;

      position: relative;

   }

.t-login .t-c {

   position: absolute;

   right: 22rpx;

   top: 22rpx;

   background: #5677fc;

   color: #fff;

   font-size: 24rpx;

   border-radius: 50rpx;

   height: 50rpx;

   line-height: 50rpx;

   padding: 0 25rpx;

   z-index: 999;

}



   .t-login .login {

      width: 650rpx;

      margin: 60rpx auto;

      margin-top: 0rpx;

      font-size: 28rpx;

      color: #000;

   }

.t-login .t-d {

   text-align: center;

   color: #999;

   margin: 80rpx 0;

}



   .t-login button {

      font-size: 28rpx;

      background: #5677fc;

      color: #fff;

      height: 90rpx;

      line-height: 90rpx;

      border-radius: 50rpx;

      box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);

   }

.t-login .t-e {

   text-align: center;

   width: 250rpx;

   margin: 80rpx auto 0;

}



   .t-login input {

      padding: 0 20rpx 0 60rpx;

      height: 90rpx;

      line-height: 90rpx;

      margin-bottom: 50rpx;

      background: #f8f7fc;

      border: 1px solid #e9e9e9;

      font-size: 28rpx;

      border-radius: 50rpx;

   }

.t-login .t-g {

   float: left;

   width: 50%;

}



   .t-login .t-a {

      position: relative;

.t-login .t-e image {

   width: 50rpx;

   height: 50rpx;

}



      .get-code {

         // position: absolute;

         // right: 40rpx;

         // top: 25rpx;

      }

   }

.t-login .t-f {

   text-align: center;

   margin: 200rpx 0 0 0;

   color: #666;

}



   .t-login .t-a .icon {

      width: 40rpx;

      height: 40rpx;

      position: absolute;

      left: 24rpx;

      top: 14rpx;

      margin-right: 20rpx;

   }

.t-login .t-f text {

   margin-left: 20rpx;

   color: #aaaaaa;

   font-size: 27rpx;

}



   .t-login .t-a .line {

      width: 2rpx;

      height: 40rpx;

      background-color: #dedede;

      position: absolute;

      top: 28rpx;

      left: 98rpx;

   }

// .t-login .uni-input-placeholder {

//    color: #000;

// }



   .t-login .t-b {

      text-align: left;

      font-size: 46rpx;

      color: #000;

      padding: 300rpx 0 30rpx 0;

      font-weight: bold;

   }

.cl {

   zoom: 1;

}



   .t-login .t-b2 {

      text-align: left;

      font-size: 32rpx;

      color: #aaaaaa;

      padding: 0rpx 0 120rpx 0;

   }

.cl:after {

   clear: both;

   display: block;

   visibility: hidden;

   height: 0;

   content: '\20';

}



   .t-login .t-c {

      position: absolute;

      right: 22rpx;

      top: 22rpx;

      background: #5677fc;

      color: #fff;

      font-size: 24rpx;

      border-radius: 50rpx;

      height: 50rpx;

      line-height: 50rpx;

      padding: 0 25rpx;

      z-index: 999;

   }

.third-login-text{

   font-size: 18rpx;

   margin-top:5rpx;

}



   .t-login .t-d {

      text-align: center;

      color: #999;

      margin: 80rpx 0;

   }



   .t-login .t-e {

      text-align: center;

      width: 250rpx;

      margin: 80rpx auto 0;

   }



   .t-login .t-g {

      float: left;

      width: 50%;

   }



   .t-login .t-e image {

      width: 50rpx;

      height: 50rpx;

   }



   .t-login .t-f {

      text-align: center;

      margin: 200rpx 0 0 0;

      color: #666;

   }



   .t-login .t-f text {

      margin-left: 20rpx;

      color: #aaaaaa;

      font-size: 27rpx;

   }



   // .t-login .uni-input-placeholder {

   //    color: #000;

   // }



   .cl {

      zoom: 1;

   }



   .cl:after {

      clear: both;

      display: block;

      visibility: hidden;

      height: 0;

      content: '\20';

   }

</style>