feat:集装箱更改

yangan

2024-11-04 1db172e1eb09be68008659c9f05bf18144df553a

 pages/login/login.vue

@@ -1,215 +1,330 @@
<template>
   <view class="login">
      <!-- <view class="loginBtn">
      <u-button text="微信一键登录" type="success" shape="circle" icon="weixin-fill" @click="apiLogin"></u-button>
    </view> -->

      <!--国际化-->
      <js-lang title="login.title" :showBtn="false"></js-lang>
      <view class="logo">无人值守</view>
      <!-- 租户列表 -->
      <!-- <view class="tenantList">
         <u-input v-model="tenantId" placeholder="请输入内容" type="select" border="true" @click="show = true" />
         <u-action-sheet :list="tenantList" v-model="show" @click="selectTenant"></u-action-sheet>
      </view> -->
      <!--用户名密码登录-->
      <user-password />
      <user-password :btnText="0" :userList="userList"/>
      <!-- 微信openid登录 -->
    <!--  #ifdef MP-WEIXIN  -->
      <view class="loginBtn">
         <u-button class="button"
            @click.stop="beforeLoginEvent"
            :disabled="btnLoading"
            :loading="btnLoading"
            type="primary"
            text="微信一键登录"></u-button>
      </view>
    <!--  #endif  -->
      <view class="utils-block">
         <!--  #ifdef MP-WEIXIN  -->
         <view @click="forgetPassword"><text>忘记密码?</text></view>
          <!--  #endif  -->
   <!--  #ifdef MP-WEIXIN  -->
         <view @click="PrivacyAgreementHandle"><text>新用户注册</text></view>
    <!--  #endif  -->
      </view>

      <!-- #ifdef MP -->
      <view class="loginBtn"><u-button class="button" @click.stop="getUserProfile" :disabled="btnLoading" :loading="btnLoading" type="primary" text="微信一键登录"></u-button></view>
      <view class="register" @click="registerClick"><text>注册</text></view>
      <!-- #endif -->
      <view class="login-bottom-box"><view class="copyright">2023冀中能源无人值守微信小程序</view></view>
      <view class="login-bottom-box">
         <view class="copyright">沧州聚隆化工无人值守微信小程序</view>
         <view class="copyright">小程序仅供已拥有系统账号特定内部人员使用</view>
      </view>

    <!--  #ifdef MP-WEIXIN  -->
      <!-- 微信授权前的弹框 -->
      <view class="loginPopup">
         <u-popup :show="loginPopupShow"
            mode="bottom"
            @close="closePopup"
            @open="openPopup"
            round="10"
            :safeAreaInsetBottom="true">
            <view class="popup-warp">
               <view class="body"><text>本小程序，仅供已拥有系统账号特定内部人员登录使用，点击同意即表示您已同意相应信息授权。</text></view>
               <view class="btn">
                  <u-button @click="loginPopupShow = false"
                     type="error"
                     text="不同意"
                     shape="circle"
                     :plain="true"></u-button>
                  <u-button @click="wxLogin"
                     type="error"
                     text="同意"
                     throttleTime="3000"
                     shape="circle"></u-button>
               </view>
            </view>
         </u-popup>
      </view>
      <!-- 询问是否绑定微信 -->
      <view class="bindWxModel">
         <u-modal :show="bindWxModelShow"
            :title="bindWxModelTitle"
            showCancelButton
            :content="bindWxContent"
            @confirm="bindWxConfirm"
            @cancel="bindWxCancel"></u-modal>
      </view>
    <!--  #endif  -->
   </view>
</template>

<script>
import { apiLogin, apiLogin2, apiLoginPassword } from '@/api/publicInterface.js';
import { mapMutations } from 'vuex';
import userPassword from './userPassword.vue';

export default {
   data() {
      return {
         // wxcode: '31363631363534303739323636', // 客户
         // wxcode: '31363631363534303700000000', // 货代1
         // wxcode: '31363631363534303700000004', // 货代2
         wxcode: '31363631363534303700000001', // 司机1
         // wxcode: '31363631363534303700000005', // 司机2
         // wxcode: '', // 客户
         openid: '',
         roleId: 0,

         tenantId: undefined,
         btnLoading: false,
         show: false,
         tenantList: []
      };
   },
   components: {
      userPassword
   },
   methods: {
      ...mapMutations(['setUserTabbar']),
      // 访问wx.login,获取code
      login() {
         // let _this = this;
         // 获取登录用户code
         uni.login({
            success: res => {
               console.log('登录loginRes', res);
               if (res.code) {
                  this.wxcode = res.code;
               } else {
                  uni.showToast({
                     title: '微信登录失败！',
                     duration: 2000
                  });
               }
               // this.apiLogin();
            }
         });
   import { apiLoginWx, apiLoginPassword } from '@/api/publicInterface.js';
   import { mapMutations } from 'vuex';
   import userPassword from './userPassword.vue';
   import { setToken, setRefreshToken, setUsernameKey, setCustomerId, redirectHome } from '@/utils/status.js';
   export default {
      data() {
         return {
            btnLoading: false,
            loginPopupShow: false,
            // 绑定微信模态框
            bindWxModelShow: false,
            bindWxModelTitle: '提示',
            bindWxContent: '如果已拥有系统账号，可以直接跳转绑定微信页面',
            appid: "",
            secret: "",
            userList:[]
         };
      },
      // 登录接口
      apiLogin() {
         // console.log(this.$uStoreKey.roleType);
         apiLogin2({ code: this.wxcode })
            .then(res => {
               console.log('请求登录', res);
               if (res.msg == '需绑定') {
                  uni.navigateTo({
                     url: `/pages/register/register?code=${res.data}`
                  });
               }
               if (res.msg == '登录成功') {
                  uni.setStorageSync('userInfo', res.data);
                  this.setUserTabbar(res.data.type);
                  uni.switchTab({
                     url: '/pages/tabbar-page/index-tabbar/index-tabbar'
                  });
               }
      components: {
         userPassword
      },
      onShow() {
         this.userList=uni.getStorageSync('userList')?JSON.parse(uni.getStorageSync('userList')):[];
      },
      methods: {
         ...mapMutations(['setUserTabbar', 'changeisLogin']),
         getAppidAndSercet() {
            this.$reqGet('getAppidAndSercet').then(res => {
               this.appid = res.data.appid;
               this.secret = res.data.secret
            })
            .catch(err => {
               console.log('错误', err);
         },
         // 访问wx.login,获取code
         beforeLoginEvent() {
            this.loginPopupShow = true;
            this.getAppidAndSercet();
         },
         wxLogin() {
            // 获取登录用户code
            uni.login({
               success: res => {
                  if (res.code) {
                     uni.setStorageSync('code', res.code);
                     this.apiLogin(res.code);
                  } else {
                     uni.showToast({
                        title: '微信登录失败！',
                        duration: 2000
                     });
                  }
               }
            });
      },
      registerClick(){
         uni.navigateTo({
            url:"/pages/register/register"
         })
         },
         // 登录接口
         apiLogin(code) {
            // 获取微信用户openid,微信一键登录暂无相关接口，用于测试呼叫客服功能
            uni.showLoading({
               title: '加载中...'
            });
            // wx.request({
            //    url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${code}&grant_type=authorization_code`,
            //    success(res) {
            //       console.log(res, 'openid');
            //       uni.setStorageSync('openid', res.data.openid);
            //       // uni.showToast({
            //       //    title: '成功获取测试openid',
            //       //    icon: 'none'
            //       // });
            //    }
            // });
            this.$nextTick(() => {
               apiLoginWx({ code: code }).then(res => {
                  if (res.code != 1) {
                     this.$u.toast('登录成功');
                     this.changeisLogin(true);
                     // 登陆成功，存储相关信息
                     setToken(res.access_token);
                     setRefreshToken(res.refresh_token);
                     setUsernameKey(res.username);
                     //查询用户详细信息并储存
                     this.$reqGet('getUserEntity').then(res => {
                        this.setUserTabbar(res.data.type);
                        uni.setStorageSync('roleType', res.data.type);
                        uni.setStorageSync("userId", res.data.userId)
                        uni.setStorageSync("carNo", res.data.carNo)
                        uni.setStorageSync("isFirstMeet", false)
                        setCustomerId(res.data.customerid);
                        uni.hideLoading();
                        //跳转页面
                        this.$nextTick(() => {
                           redirectHome();
                        });
                     });
                  } else {
                     this.$u.toast(res.msg);
                     this.bindWxModelShow = true;
                  }
               }).catch((err) => {
                  this.loginPopupShow = false;
               });
            });
            this.loginPopupShow = false;
         },
         bindWxConfirm() {
            uni.navigateTo({
               url: `/pages/login/wxLogin?code=${uni.getStorageSync('code')}`
            });
            this.bindWxModelShow = false;
         },
         bindWxCancel() {
            this.bindWxModelShow = false;
         },
         // 弹出层时间
         closePopup() {
            this.loginPopupShow = false;
         },
         openPopup() {
            console.log('打开了');
         },
         forgetPassword() {
            uni.navigateTo({
               url: '/pages/login/forgetPassword/forgetPassword'
            })
         },
         PrivacyAgreementHandle() {
            uni.navigateTo({
               url: '/pages/login/PrivacyAgreementText/PrivacyAgreementText'
            })
         },
      }
   }
};
   };
</script>

<style lang="scss">
@import 'index.scss';
.login {
   // height: 100vh;
   // display: flex;
   // align-items: center;
   @import 'index.scss';

   // .loginBtn {
   //   margin: 0 auto;
   //   width: 80%;
   .PrivacyAgreement {
      color: rgb(60, 156, 255)
   }

   //   .u-button {
   //     .u-icon {
   //       .u-icon__icon {
   //         font-size: vww(20) !important;
   //       }
   //     }
   //   }
   .login {
      .loginBtn {
         margin-top: vww(20);

   //   .u-button--success {
   //     border-style: none;
   //   }
   // }
   .loginBtn {
      margin-top: vww(20);
      .u-button {
         .u-button {
            width: 80%;
         }
      }

      .utils-block {
         width: 80%;
      }
   }
   .logo {
      width: 80%;
      font-size: 64rpx;
      color: #497bff;
      margin: 50rpx auto 0;
      text-align: center;
   }

   .list-call-icon {
      color: #ff0000;
   }

   .currentPhone-box {
      text-align: center;
      padding: 40rpx 80rpx;

      .number-text {
         color: #000000;
         font-size: 60rpx;
         margin: vww(20) auto;
         display: flex;
         justify-content: space-between;
         color: #497bff;
         font-size: vww(17);
      }

      .other-text {
         color: #999999;
         font-size: 26rpx;
         padding: 20rpx 0;
      .logo {
         width: 80%;
         font-size: 64rpx;
         color: #497bff;
         margin: vww(100) auto 0;
         text-align: center;
      }

      .u-btn {
         margin: 30rpx auto;
      .list-call-icon {
         color: #ff0000;
      }

      .u-hairline-border {
         border: 1px solid #fff;
      .currentPhone-box {
         text-align: center;
         padding: 40rpx 80rpx;

         .number-text {
            color: #000000;
            font-size: 60rpx;
         }

         .other-text {
            color: #999999;
            font-size: 26rpx;
            padding: 20rpx 0;
         }

         .u-btn {
            margin: 30rpx auto;
         }

         .u-hairline-border {
            border: 1px solid #fff;
         }
      }

      .register {
         color: #497bff;
         height: 40rpx;
         line-height: 40rpx;
         font-size: 28rpx;
         position: fixed;
         bottom: vww(70);
         text-align: center;
         width: 100%;
      }

      .register-link {
         float: right;
         padding: 0 16rpx;
      }

      .reg-link {
         display: inline-block;
         color: #497bff;
      }

      .oauth2 {
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         margin: 0rpx 100rpx 30rpx;

         image {
            height: 80rpx;
            width: 80rpx;
         }
      }

      .u-tabs {
         padding: 0 70rpx;
      }

      // 弹出框
      .loginPopup {
         .u-popup {
            .u-transition {
               .u-popup__content {
                  .popup-warp {
                     height: vww(200);
                     padding: vww(10) vww(20);

                     .body {
                        width: 100%;
                        height: 70%;
                     }

                     .btn {
                        display: flex;
                        justify-content: space-between;

                        .u-button {
                           width: 40%;
                        }
                     }
                  }
               }
            }
         }
      }
   }

   .register {
      color: #497bff;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      position: fixed;
      bottom: vww(70);
      text-align: center;
      width: 100%;
   }

   .register-link {
      float: right;
      padding: 0 16rpx;
   }

   .reg-link {
      display: inline-block;
      color: #497bff;
   }

   .oauth2 {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin: 0rpx 100rpx 30rpx;

      image {
         height: 80rpx;
         width: 80rpx;
      }
   }

   .u-tabs {
      padding: 0 70rpx;
   }

   .tenantList {
      font-size: 32rpx;
      width: 80%;
      height: 80rpx;
      text-align: center;
      margin: 50rpx auto 0;
   }
}
</style>