H5-Merchant/pages/user/login/index.vue

<template>
  <view class="login">
    <view class="login_header">
      <view class="login_header_top">
        <image
          src="https://cdn.bjtdba.com/vod/image/2025-01-21/20250121180855764.png"
          mode="widthFix"
        ></image>
      </view>
      <!-- <view class="login_header_botom">
				<image src="https://cdn.bjtdba.com/vod/image/2022-08-09/20220809135451815.png" mode="widthFix"></image>
			</view> -->
    </view>
    <view class="input-home">
      <view class="input">
        <input
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
          focus="true"
          placeholder-style="color:#9E9E9E;font-size:30rpx"
          v-model="form.phone"
          @input="inputphone"
        />
        <view class="input_code">
          <span
            v-show="show"
            @click="getCode"
            　:style="form.phone.length==11?'color:#1F7CFF':'color:#9E9E9E'"
            >获取验证码</span
          >
          <span v-show="!show" class="count" style="color: #9e9e9e"
            >重新发送({{ count }}S)</span
          >
        </view>
      </view>
      <view class="input">
        <input
          type="number"
          placeholder="请输入验证码"
          maxlength="4"
          placeholder-style="color:#9E9E9E;font-size:30rpx;"
          v-model="form.sms_code"
          @input="inputcode"
        />
      </view>
    </view>
    <view
      class="login-singn"
      @click="login"
      :style="
        form.sms_code.length == 4
          ? 'background-color:#1F7CFF'
          : 'background-color:rgba(31, 124, 255, 0.3)'
      "
    >
      <view
        class="login-singn-text"
        :style="form.sms_code.length == 4 ? 'color:#FFF' : 'color: #333'"
      >
        登录
      </view>
    </view>
    <view class="bottom-index">
      <view class="bottom-index-in">
        <image
          src="https://cdn.bjtdba.com/vod/image/2022-08-09/20220809155152572.png"
          v-if="is_wei"
          @click="gou"
          mode="widthFix"
        ></image>
        <image
          src="https://cdn.bjtdba.com/vod/image/2022-08-09/20220809155125568.png"
          v-if="is_yes"
          @click="gou"
          mode="widthFix"
        ></image>
      </view>
      <view class="bottom-index-ri">
        我已经阅读并同意<span style="color: #1f7cff" @click="xieyi()"
          >《注册协议》</span
        >、<span style="color: #1f7cff" @click="yincang()">《隐私协议》</span
        >、<span style="color: #1f7cff" @click="ruzhuxieyi()"
          >《商家入驻协议》</span
        >
      </view>
    </view>

    <view class="unLogin-singn" @click="unLogin">
      <view class="login-singn-text"> 暂不登录 </view>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
    <!-- #endif -->
  </view>
</template>

<script>
import {
  userPhoneLogOnCode,
  userPhoneLogOn,
  selectMerchant,
  queryStoreBranch,
  getImUser
} from "@/commit/api.js";
import emHandleReconnect from "@/EaseIM/utils/emHandleReconnect";
import { emConnect, emUserInfos } from "@/EaseIM/emApis";
const { updateUserInfosFromServer } = emUserInfos();
const { loginWithPassword } = emConnect();
import wxPrivacy from "@/uni_modules/ws-wx-privacy/components/ws-wx-privacy/ws-wx-privacy.vue";
import { getPhpToken } from "@/utils/readAppInfo.js";
export default {
  data() {
    return {
      show: true,
      count: "",
      timer: null,
      is_wei: true,
      is_yes: false,
      form: {
        phone:
          uni.getStorageSync("user_phone").length == 0
            ? ""
            : uni.getStorageSync("user_phone"),
        sms_code: "",
        type: "1"
      },

      type: ""
    };
  },
  onLoad(options) {
    //#ifdef MP-WEIXIN
    wx.requirePrivacyAuthorize({
      success: () => {
        console.log("点击同意");
      },
      fail: () => {
        console.log("点击拒绝");
      },
      complete: () => {
        console.log("用户已点击");
      }
    });
    //#endif

    this.type = options.type;
    console.log(options.type);
    console.log(this.type);
  },
  components: {
    wxPrivacy
  },
  methods: {
    handleDisagree() {
      // 处理用户不同意隐私协议的逻辑
    },
    handleAgree() {
      // 处理用户同意隐私协议的逻辑
    },

    getCode() {
      var mobileReg = /^1[3456789]\d{9}$/;
      if (this.form.phone == "") {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none"
        });
      } else if (!mobileReg.test(this.form.phone)) {
        uni.showToast({
          title: "手机号格式有误",
          icon: "none"
        });
      } else {
        // 点击获取验证码后 保存手机号
        uni.setStorageSync("user_phone", this.form.phone);
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          if (this.show == false) {
            // 获取验证码
            userPhoneLogOnCode({
              phone: this.form.phone
            })
              .then(
                (res) => {
                  if (res.data.status == 200) {
                    uni.showToast({
                      title: res.data.data.message,
                      icon: "none"
                    });
                  }
                },
                (fail) => {
                  uni.showToast({
                    title: fail,
                    icon: "error"
                  });
                }
              )
              .catch((err) => {
                console.log(err);
              });
          }
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    inputphone(e) {
      const o = e.target;
      const inputRule = /[^\d]/g;
      this.$nextTick(function () {
        this.form.phone = o.value.replace(inputRule, "");
        if (this.form.phone.length < 11) {
          if (this.show == false) {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }
      });
    },
    inputcode(e) {
      const o = e.target;
      const inputRule = /[^\d]/g;
      this.$nextTick(function () {
        this.form.sms_code = o.value.replace(inputRule, "");
      });
    },
    xieyi() {
      uni.setStorageSync("agreementType", "2");

      uni.navigateTo({
        url: "/pages/index/bottombat?type=2"
      });
    },
    yincang() {
      uni.setStorageSync("agreementType", "1");
      uni.navigateTo({
        url: "/pages/index/bottombat?type=1"
      });
    },
    ruzhuxieyi() {
      uni.setStorageSync("agreementType", "6");
      uni.navigateTo({
        url: "/pages/index/bottombat?type=6"
      });
    },
    gou() {
      if (this.is_wei == true) {
        this.is_wei = false;
        this.is_yes = true;
      } else {
        this.is_wei = true;
        this.is_yes = false;
      }
    },
    // 暂不登录
    unLogin() {
      setTimeout(function () {
        console.log("暂不登录");
        uni.switchTab({
          // url: '../../onlineproductselection/onlineproductselection'
          url: "../../my/index"
        });
      }, 300);
    },
    //lww
    // loginWithUserId (){
    // 	try {
    // 	  uni.setStorage({
    // 	    key: 'myUsername',
    // 	    data: loginState.name.toLowerCase(),
    // 	  });
    // 	  console.log('22222');
    // 	  loginStore.setLoginUserBaseInfos({ loginUserId: loginState.name });
    // 	  setUserTokenToStorage(loginState.name.toLowerCase(), res.accessToken);
    // 	} catch (error) {
    // 	  console.log('>>>>>>', error);
    // 	  uni.showToast({
    // 	    title: '登录失败',
    // 	    icon: 'none',
    // 	  });
    // 	  console.log('33333');
    // 	} finally {
    // 	  loginState.name = '';
    // 	  loginState.psd = '';
    // 	}
    // },
    //lww
    async loginWithUserId() {
      this.loginEaseIMId = uni.getStorageSync("im_userid");
      try {
        const res = await loginWithPassword(
          this.loginEaseIMId,
          uni.getStorageSync("im_pass")
        );
        this.$store.commit("SET_LOGIN_USER_BASE_INFOS", {
          loginUserId: this.loginEaseIMId
        });
        this.setEMUserLoginInfosToStorage(
          this.loginEaseIMId.toLowerCase(),
          res.accessToken
          //注意：res.accessToken
        );
        // this.updateHXUser();
      } catch (error) {
        console.log(">>>>>>", error);
        uni.showToast({
          title: "登录失败",
          icon: "none"
        });
      } finally {
        this.loginEaseIMId = "";
      }
    },
    setEMUserLoginInfosToStorage(userId, token) {
      const params = {
        key: `EM_LOGIN_INFOS`,
        data: { userId: userId, token: token }
      };
      uni.setStorage({ ...params });
    },
    updateHXUser() {
      console.log("修改环信的昵称");
      updateUserInfosFromServer({
        nickname: JSON.stringify(uni.getStorageSync("userinfo")).nickname,
        avatarurl: JSON.stringify(uni.getStorageSync("userinfo")).avatar
      });
      // {nickname: JSON.stringify(uni.getStorageSync('userinfo')).nickname,avatar:JSON.stringify(uni.getStorageSync('userinfo')).avatar}
    },
    //lww结束
    login() {
      const { actionEMReconnect } = emHandleReconnect();
      var mobileReg = /^1[3456789]\d{9}$/;
      if (this.form.phone == "") {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none"
        });
      } else if (!mobileReg.test(this.form.phone)) {
        uni.showToast({
          title: "手机号格式有误",
          icon: "none"
        });
      } else if (this.form.sms_code == "") {
        uni.showToast({
          title: "请输入验证码",
          icon: "none"
        });
      } else if (this.is_wei == true) {
        uni.showToast({
          title: "请勾选协议",
          icon: "none"
        });
        return;
      } else {
        // 登录注册
        userPhoneLogOn(this.form)
          .then(
            (res) => {
              if (
                res.data.status == 200 &&
                JSON.stringify(res.data.data) != "{}"
              ) {
                uni.setStorageSync("userinfo", res.data.data.user);
                uni.setStorageSync("authorization", res.data.data.x_token);
                uni.setStorageSync("storeStaff", res.data.data.storeStaff);
                // 用户状态判断
                selectMerchant({
                  uid: res.data.data.user.uid
                })
                  .then(
                    (data) => {
                      if (data.data.status == 200) {
                        uni.setStorageSync("selectmerchant", data.data.data);
                        let storeStaff = uni.getStorageSync("storeStaff");
						 getPhpToken()
                        if (storeStaff != null) {
                          queryStoreBranch({
                            id: storeStaff.department
                          }).then((res) => {
                            if (res.data.status == 200) {
                              uni.setStorageSync(
                                "jurisdiction",
                                res.data.data.jurisdiction
                              );
                            }
                          });
                        } else {
                          uni.setStorageSync("jurisdiction", [7, 9, 5, 3]);
                        }
						
                        uni.showToast({
                          title: res.data.message,
                          icon: "none"
                        });
                        setTimeout(function () {
                          uni.switchTab({
                            url: "../../cashier/index"
                          });
                        }, 700);
                      }
                    },
                    (fail) => {
                      uni.showToast({
                        title: fail,
                        icon: "none"
                      });
                    }
                  )
                  .catch((err) => {
                    console.log(err);
                  });
              } else {
                uni.showToast({
                  title: "信息异常请联系客服...",
                  icon: "none"
                });
              }
            },
            (fail) => {
              uni.showToast({
                title: fail,
                icon: "none"
              });
            }
          )
          .catch((data) => {
            console.log(data);
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .login_header {
    height: 211rpx;
    margin-top: 74rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .login_header_top {
      width: 216rpx;
      height: 242rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .login_header_botom {
      width: 156rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .input-home {
    width: 658rpx;
    height: 238rpx;
    margin-top: 67rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .input {
      width: 100%;
      height: 118rpx;
      border-bottom: 1rpx solid #e5e5e5;
      position: relative;

      input {
        width: 485rpx;
        height: 100rpx;
        margin: 20rpx 0 0 10rpx;
        color: #333333;
      }

      .input_code {
        position: absolute;
        top: 55rpx;
        right: 15rpx;
        font-size: 30rpx;
        font-weight: 400;
      }
    }
  }

  .login-singn {
    width: 658rpx;
    height: 88rpx;
    background-color: rgba(31, 124, 255, 0.3);
    border-radius: 10rpx;
    margin-top: 70rpx;
    font-size: 30rpx;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
  }

  .unLogin-singn {
    margin-top: 88rpx;
  }
  .bottom-index {
    width: 658rpx;
    height: 33rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60rpx;

    .bottom-index-in {
      width: 32rpx;
      height: 32rpx;
      line-height: 33rpx;
      transform: sale(2);
      image {
        width: 100%;
        height: 100%;
      }
      margin-right: 20rpx;
      // position: relative;
    }

    .bottom-index-ri {
      height: 100%;
      font-size: 24rpx;
    }
  }
}
</style>