template-parking-h5/src/pages/login/login.vue

<template>
  <div class="page" ref="showAuth">
    <div class="authorize__head">
      <div class="head__info">
        <div class="head__logo">
          <img :src="getLogo" mode="heightFix" />
        </div>
      </div>
    </div>
    <div class="authorize__form">
      <div class="form__item line" style="border-bottom: 1px solid #d8dae0">
        <div class="form__label">手机号码</div>
        <div class="form__input">
          <!-- <input type="number" placeholder="请输入您的手机号" v-model="mobile" /> -->
          <van-field
            v-model="mobile"
            type="number"
            placeholder="请输入您的手机号"
          />
        </div>
      </div>
      <div class="form__item">
        <div class="form__label">验证码</div>
        <div class="form__input">
          <!-- <input type="number" placeholder="请输入验证码" v-model="codeNum"> -->
          <van-field
            v-model="codeNum"
            type="number"
            placeholder="请输入验证码"
          />
        </div>
        <div class="form__code">
          <wyb-button
            type="hollow"
            :count-down="true"
            :count-down-num="59"
            width="240px"
            height="70px"
            color="#1D1D1D"
            font-size="28"
            border-size="1"
            :radius="['50px']"
            @click="onCode"
            :mobile="mobile"
            @pre-click="handlePreClick"
          >
            获取验证码
          </wyb-button>
        </div>
      </div>
    </div>

    <div class="mgt40">
      <button class="authorize_btn authorize_btn--phone" @click="onLogin">
        注册/登录
      </button>
    </div>
    <div class="mgt20">
      <button class="authorize_btn authorize_btn--phone" @click="passLogin">
        未登录使用
      </button>
    </div>

    <div class="mgt34">
      <div style="margin: 0 30px">
        <div class="protocolName">
          <van-checkbox
            @click="protocolChange"
            :value="protocolChecked"
            color="#ED1C24"
            name="protocol"
            icon-size="17"
            checked-color="#064C8A"
            shape="square"
          ></van-checkbox>
          <div
            style="color: #666666; font-size: 32px; flex: 1; margin-left: 15px"
            v-if="brandInfo && brandInfo.protocolName"
          >
            已阅读并同意<span
              style="color: #627ecf"
              @click="gotoProtocol('protocol')"
              >《{{ brandInfo.protocolName }}》</span
            >
            和<span
              style="color: #627ecf"
              @click="gotoProtocol('privacyPolicy')"
              >《{{ brandInfo.privacyPolicyName }}》</span
            >
          </div>
        </div>
      </div>
    </div>
    <div v-if="showAuth">
      <van-popup
        v-model="showAuth"
        :close-on-click-overlay="false"
        position="center"
        :get-container="getContainer"
      >
        <div class="auth-popup">
          <div class="auth-popup__head">
            <span>微信授权</span>
          </div>
          <div class="auth-popup__main">
            <div class="head__logo">
              <img :src="getLogo" mode="heightFix" />
            </div>
            <div style="margin-bottom: 20px; font-size: 30px">
              申请获取以下权限
            </div>
            <div
              style="
                height: 80px;
                line-height: 80px;
                border-top: 1px solid #f0f0f0;
                color: #999999;
                font-size: 32px;
              "
            >
              获得你的公开信息(个人信息等)
            </div>
          </div>
          <div class="auth-popup__footer">
            <div class="cancel" @click="noWechatAuthPhoneLogin">取消</div>
            <div style="flex: 1; border-left: 1px solid #f0f0f0">
              <button class="phone-btn" @click="getWxProfile">确认授权</button>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import log from '@/utils/log';
// import wybButton from '@/components/wyb-button/wyb-button.vue'
import {
  kipSendRegisterSMS,
  kipPhoneLogin,
  loginWeixinH5,
  kipUpdateWxMember,
  kipGetUserDetail,
  kipGetBrandInfo,
  kipAgreementSave,
} from '@/utils/api-kip.js';
import MemberCacheTool from '@/utils/member-cache-tool.js';
import KipCacheTool from '@/utils/kip-cache-tool.js';
import {
  crmQueryMemberInfo,
  crmSaveMemberSource,
} from '@/utils/api-crm-member.js';
// var app = getApp()
import { mapState } from 'vuex';
import { getUTMSource } from '@/utils/utils.js';
import CacheTool from '@/utils/cache-tool.js';

// const { KERRY_ON_BRAND_ID, HANGZHOU_LBS_ID } = CacheTool.getCurEnvConst();
import { REG_SOURCE } from '@/constants.js';
import uni from '@/utils/uniHooks.js';

const app = {};

export default {
  name: 'Login',
  data() {
    return {
      mobile: '', // 手机号
      codeNum: '', // 验证码
      timer: 60, // 时间
      url: '',
      protocolChecked: false,
      brandInfo: null,
      lbsInfo: null,
      preUrl: '',
      showAuth: false, // 展示授权弹窗
    };
  },
  created() {
    const option = this.$route.query;
    if (option && JSON.stringify(option) !== '{}') {
      this.url = JSON.parse(decodeURIComponent(option?.url || '{}'));
    }
    this.preUrl = uni.getStorageSync('previousUrl');
    uni.setStorageSync('previousUrl', '/pages/wxLogin/login.vue');
  },
  computed: {
    ...mapState({
      custTypeId: (state) => state.custTypeId,
      mallid: (state) => state.mallId,
      groupId: (state) => state.groupId,
      member: (state) => state.member,
    }),
    getLogo() {
      // TODO: logo 需要更具lbs区分进入
      // return CacheTool.getLogoByMallid(this.mallid)
      return this.brandInfo?.logo || CacheTool.getLogoByMallid(this.mallid);
      // return 'https://kip-public-qa.oss-cn-shanghai.aliyuncs.com/1634707859342-qldc5c.jpg';
    },
    // isHangzhou() {
    //   return uni.getStorageSync('mallid') == HANGZHOU_LBS_ID;
    // },
    // isKerryOn() {
    //   return uni.getStorageSync('groupId') == KERRY_ON_BRAND_ID;
    // },
  },
  watch: {
    groupId(val) {
      console.log('groupId', val);
    },
    mallid(val) {
      console.log('mallid', val);
    },
  },
  mounted() {
    // console.log(154,this.groupId,this.mallid);
    this.getBrandInfo();
  },
  methods: {
    getContainer() {
      return this.$refs.showAuth;
    },
    // 获取验证码
    onCode: function () {
      if (this.check()) {
        this.getCodeData();
      }
      return false;
    },
    passLogin() {
      this.$store.commit('SET_IS_LOGIN', 'loginDenied');
      this.$router.replace({ path: 'home' });
    },
    // 获取验证码
    getCodeData: function () {
      uni.showLoading({
        title: '加载中',
      });
      var datas = {
        phoneNumber: this.mobile,
      };
      kipSendRegisterSMS(datas)
        .then((resp) => {
          uni.hideLoading();
          console.log(resp);
          // return
          // const result = resp.data;
          if (resp.code == '000000' && resp.data) {
            uni.showToast({
              title: '获取验证码成功!',
              duration: 2000,
              icon: 'none',
            });
          } else {
            const message = resp.message || '发送失败';
            uni.showToast({
              title: message,
              duration: 2000,
              icon: 'none',
            });
            log.error(`短信发送失败, 手机号: ${datas.phoneNumber}`);
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: '发送注册信息错误',
            duration: 2000,
            icon: 'none',
          });
          log.error(err);
        });
    },
    //授权
    getWxProfile: function () {
      let _this = this;
      this.closeAuthPopup();
      uni.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          _this.updateKipMemberByWxProfile(res);
        },
        fail: (res) => {
          console.warn(`用户取消授权, ${JSON.stringify(res)}`);
          log.warn(`用户取消授权`);
          // 此时用户已注册，即使用户取消授权，也需要用随机头像昵称登录
          const isClosePopup = false;
          _this.noWechatAuthPhoneLogin(isClosePopup);
        },
      });
    },
    queryMember: function (callback) {
      let _this = this;
      uni.showLoading({
        title: '正在加载',
        mask: true,
      });
      kipGetUserDetail()
        .then((result) => {
          uni.hideLoading();
          // const result = resp.data;
          console.log(323, result);
          if (result.code === '000000' && result.data) {
            const member = result.data;
            console.log(326, member);
            if (member) {
              _this.getKipMemberInfoAfter(member, callback);
            } else {
              MemberCacheTool.cleanMemberCache(app);
              uni.showToast({
                title: result.message,
                duration: 2000,
                icon: 'none',
              });
              log.warn(`查询会员信息成功：没有会员信息`);
            }
          } else {
            MemberCacheTool.cleanMemberCache(app);
            uni.showToast({
              title: result.message,
              duration: 2000,
              icon: 'none',
            });
            log.warn(`查询会员信息失败，${result.message}`);
          }
        })
        .catch((err) => {
          console.log(349, err);
          uni.hideLoading();
          console.error(err);
          MemberCacheTool.cleanMemberCache(app);
          uni.showToast({
            title: '查询会员信息错误',
            duration: 2000,
            icon: 'none',
          });
          log.warn(`查询会员信息错误`);
        });
    },
    // 登录
    onLogin: function () {
      let _this = this;
      // 判断会员协议
      if (!_this.protocolChecked) {
        uni.showModal({
          title: '请阅读并勾选下方的协议',
          showCancel: false,
        });
        return false;
      }
      if (_this.check()) {
        if (_this.codeNum === '') {
          uni.showToast({
            title: '请输入验证码',
            duration: 2000,
            icon: 'none',
          });
          return false;
        }

        // 调登录接口
        uni.showLoading({
          title: '正在登录',
          mask: true,
        });
        // console.log('===> 手机号登录 ', loginRes);
        const params = {
          verifyCode: _this.codeNum,
          phoneNumber: _this.mobile,
        };
        kipPhoneLogin(params)
          .then((result) => {
            uni.hideLoading();
            // const result = resp.data;
            console.log(399, result);
            if (result.code == '000000' && result.data) {
              log.info(`手机号登录成功：保存授权信息`);
              this.$store.commit('SET_MOBILE', _this.mobile);
              const authInfo = result.data;
              const needLogin = authInfo.needLogin;
              // 此接口返回的needLogin暂时没有true
              KipCacheTool.setKipCache(authInfo);

              // if (!needLogin) {
              // 	KipCacheTool.setKipCache(authInfo);
              // 	// 请求用户信息
              // 	_this.queryMember()
              // }

              // if (_this.isHangzhou) {
              //   uni.setStorageSync('comfirLocation', 'login.vue');
              //   uni.setStorageSync('comfirHangzhou', true);
              // } else if (_this.isKerryOn) {
              //   uni.setStorageSync('comfirLocation', 'login.vue');
              //   uni.setStorageSync('comfirKerryOn', true);
              // }
              _this.saveAgreementAction();
              _this.queryMember(() => {
                // 返回首页
                setTimeout(() => {
                  window.location.href = `${
                    window.location.origin
                  }/tparking/${uni.getStorageSync(
                    'groupId'
                  )}/${uni.getStorageSync('mallId')}/`;
                }, 200)
              });

              // _this.$router.push({ path: 'home' });
              // setTimeout(() => {
              //   window.location.reload();
              // }, 700);
            } else {
              log.warn(`手机号登录请求成功: 未获取到授权信息`);
              uni.showModal({
                title: '登录失败',
                content: result.message,
                showCancel: false,
              });
              KipCacheTool.cleanKipCache();
              MemberCacheTool.cleanMemberCache(app);
            }
          })
          .catch((err) => {
            uni.hideLoading();
            console.log(err);
            uni.showToast({
              title: '登录失败',
              duration: 2000,
              icon: 'none',
            });
            log.warn(`手机号登录请求失败`);
            KipCacheTool.cleanKipCache();
            MemberCacheTool.cleanMemberCache(app);
          });
        // uni.login({
        //   provider: 'weixin',
        //   success: function (loginRes) {
        //   },
        //   fail: function (loginRes) {
        //     uni.showModal({
        //       title: '登录失败',
        //       content: loginRes.errMsg,
        //       showCancel: false,
        //     });
        //     log.warn(`授权手机号失败`);
        //     KipCacheTool.cleanKipCache();
        //     MemberCacheTool.cleanMemberCache(app);
        //   },
        // });
      }
    },
    check: function () {
      if (this.mobile === '') {
        uni.showToast({
          title: '请输入手机号',
          duration: 2000,
          icon: 'none',
        });
        return false;
      }
      const regPhone = '/^1[3456789]d{9}$/';
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.mobile)) {
        uni.showToast({
          title: '请输入正确的手机号',
          duration: 2000,
          icon: 'none',
        });
        return false;
      }
      return true;
    },
    handlePreClick(e) {
      console.log(428, e);
      uni.showToast({
        title: '请输入正确的手机号',
        duration: 2000,
        icon: 'none',
      });
    },
    gotoProtocol(type) {
      const brandId = this.brandInfo.id || '';
      const lbsId = this.lbsInfo[0].id || '';
      const isChecked = this.protocolChecked;
      uni.navigateTo({
        url: `/pages/protocol/protocol?type=${type}&brandId=${brandId}&lbsId=${lbsId}&isChecked=${isChecked}`,
      });
    },
    protocolChange(e) {
      console.log(447, e);
      this.protocolChecked = !this.protocolChecked;
      // const mallid = this.mallid;
      // CacheTool.setAgreeProtocoByMallid(mallid, this.protocolChecked);
    },
    getBrandInfo() {
      const _this = this;
      // const HZ_BRAND_ID = this.groupId;
      const HZ_BRAND_ID = this.$route.query.groupId;
      const HZ_LBS_ID = this.$route.query.mallid;
      // return
      const params = {
        id: HZ_BRAND_ID,
        lbsId: HZ_LBS_ID,
      };
      console.log(509, params);
      uni.showLoading({
        title: '正在加载',
        mask: true,
      });
      kipGetBrandInfo(params)
        .then((resp) => {
          uni.hideLoading();
          // console.log(468, resp);
          // return
          if (!resp || !resp.data.length || resp.code != '000000') {
            log.warn(`获取会员绑定的brand请求成功：未获取到数据`);
            console.log(`获取会员绑定的brand请求成功：未获取到数据`);
            const message = resp?.data?.message || '服务不可用';
            uni.showToast({
              title: message,
              duration: 2000,
              icon: 'none',
            });
          } else {
            const brandArray = resp.data;
            console.log(484, brandArray);
            if (brandArray && brandArray.length > 0 && brandArray[0]) {
              const brandInfo = brandArray[0].brand;
              _this.brandInfo = brandInfo;
              console.log(488, brandInfo);
              const lbsInfo = brandArray[0].lbs;
              _this.lbsInfo = lbsInfo;
            }
            console.log(487, _this.lbsInfo);
          }
        })
        .catch((err) => {
          uni.hideLoading();
          console.error(err);
        });
    },
    getKipMemberInfoAfter(kipMemberInfo, callback) {
      console.log(550, kipMemberInfo);
      MemberCacheTool.setKipMember(app, kipMemberInfo);

      const _this = this;
      // 查询 crm 会员
      uni.showLoading({
        title: '正在加载',
        mask: true,
      });
      const newGroupId = uni.getStorageSync('groupId');
      const newMallid = uni.getStorageSync('mallId');
      const params = {
        groupId: newGroupId,
        kipUserId: kipMemberInfo.id,
        mallId: newMallid,
      };
      crmQueryMemberInfo(params)
        .then((result) => {
          uni.hideLoading();
          log.info(`获取crm会员请求失败`);
          // const result = resp.data;
          if (result && result.code == '0') {
            const member = result.data;
            const optionsQuery = uni.getStorageSync('options_query') || {};
            if (member) {
              // 这里埋点-登录过但是清空缓存
              console.log(
                '==>这里走埋点--手机号码---crmQueryMemberInfo',
                member
              );
              this.$store.commit('SET_USER_INFO', member);
              this.$store.commit('SET_MEMBER', member);
              callback && callback();
            } else {
              uni.hideLoading();
              log.error(`获取crm会员请求失败`);
              console.error(err);
              uni.showToast({
                title: '登录注册失败',
                duration: 2000,
                icon: 'none',
              });
              KipCacheTool.cleanKipCache();
              MemberCacheTool.cleanMemberCache(app);
            }
          } else {
            uni.hideLoading();
            log.error(`获取crm会员请求失败`);
            console.error(err);
            uni.showToast({
              title: '登录注册失败',
              duration: 2000,
              icon: 'none',
            });
            KipCacheTool.cleanKipCache();
            MemberCacheTool.cleanMemberCache(app);
          }
        })
        .catch((err) => {
          uni.hideLoading();
          log.error(`获取crm会员请求错误`);
          console.error(err);
          uni.showToast({
            title: '登录注册错误',
            duration: 2000,
            icon: 'none',
          });
          KipCacheTool.cleanKipCache();
          MemberCacheTool.cleanMemberCache(app);
        });
    },
    openAuthPopup() {
      // this.$refs.popup.value = true
      this.showAuth = true;
    },
    closeAuthPopup() {
      this.showAuth = false;
      // this.$refs.popup.value = false
      // this.$refs.popup.inited = false
    },
    checkIsNewUser() {
      // 除静安和浦东外，完善信息只显示一次
      if (this.custTypeId == '0') {
        const isNewUser = KipCacheTool.getKipIsNewUser();
        if (isNewUser) {
          uni.navigateTo({
            url: '/pages/personInfo/personInfo',
          });
        } else {
          uni.redirectTo({
            url: '/pages/automatic/automaticMy',
          });
        }
      } else {
        const member = this.member;
        if (member && (!member.isCompleted || member.isCompleted == '0')) {
          uni.navigateTo({
            url: '/pages/personInfo/personInfo',
          });
        } else {
          uni.redirectTo({
            url: '/pages/automatic/automaticMy',
          });
        }
      }
    },

    updateKipMemberByWxProfile(wxProfile) {
      const _this = this;
      const wxProfileParams = {
        encryptedData: wxProfile.encryptedData,
        iv: wxProfile.iv,
      };
      uni.showLoading({
        title: '正在加载',
        mask: true,
      });
      // 根据微信授权更新kip会员信息
      kipUpdateWxMember(wxProfileParams)
        .then((updateRespResult) => {
          uni.hideLoading();
          // const updateRespResult = updateResp.data;
          if (updateRespResult.code === '000000') {
            uni.showLoading({
              title: '正在加载',
            });
            kipGetUserDetail()
              .then((result) => {
                uni.hideLoading();
                // const result = resp.data;
                if (result.code === '000000' && result.data) {
                  // 存储用户信息
                  const member = result.data;
                  _this.saveMemberSource(member);
                  _this.getKipMemberInfoAfter(member);
                } else {
                  MemberCacheTool.cleanMemberCache(app);
                  uni.showToast({
                    title: result.message,
                    duration: 2000,
                    icon: 'none',
                  });
                }
              })
              .catch((err) => {
                uni.hideLoading();
                MemberCacheTool.cleanMemberCache(app);
                console.log(err);
              });
          } else {
            const message = updateRespResult.message || '更新会员失败';
            uni.showToast({
              title: message,
              duration: 2000,
              icon: 'none',
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: '更新会员失败',
            duration: 2000,
            icon: 'none',
          });
          log.error('更新会员信息错误', err);
        });
    },
    noWechatAuthPhoneLogin(isClosePopup = true) {
      if (isClosePopup) {
        this.closeAuthPopup();
      }

      const _this = this;
      uni.showLoading({
        title: '正在加载',
        mask: true,
      });
      kipGetUserDetail()
        .then((result) => {
          uni.hideLoading();
          // const result = resp.data;
          if (result.code === '000000' && result.data) {
            // 存储用户信息
            const member = result.data;
            _this.saveMemberSource(member);
            _this.getKipMemberInfoAfter(member);
          } else {
            MemberCacheTool.cleanMemberCache(app);
            uni.showToast({
              title: result.message,
              duration: 2000,
              icon: 'none',
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          MemberCacheTool.cleanMemberCache(app);
          console.log(err);
        });
    },
    saveMemberSource(kipMember) {
      const { phoneNumber, id } = kipMember;
      const groupId = uni.getStorageSync('groupId');
      const mallid = uni.getStorageSync('mallid');
      const params = {
        kipUserId: id,
        mobile: phoneNumber,
        groupId,
        mallid,
      };
      const regSource = app?.globalData.regSource;
      if (regSource) {
        params.registerSource = regSource.value;
        params.registerSourceLabel = regSource.label;
      } else {
        const defaultRegSource = REG_SOURCE.MINI_APP;
        params.registerSource = defaultRegSource.value;
        params.registerSourceLabel = defaultRegSource.label;
      }

      const tpName = app?.globalData?.tpName || '';
      const tpId = app?.globalData?.tpId || '';
      if (tpName || tpId) {
        params.registerSourceRemark = tpName + ':' + tpId;
      } else {
        params.registerSourceRemark = '';
      }
      const utmStr = getUTMSource();
      if (utmStr) {
        params.regMemberSourceOriginalParams = JSON.stringify(utmStr);
      }
      crmSaveMemberSource(params)
        .then((data) => {
          if (data.code !== 0) {
            console.error(data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    saveAgreementAction() {
      const params = {
        protocolStatus: 1,
        privacyStatus: 1,
      };
      kipAgreementSave(params)
        .then((result) => {
          // const result = resp.data;
          console.log('=>[kipAgreementSave]: ', result);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style scoped lang="less">
.page {
  background-color: #f4f7ff;
  height: 100vh;
}

.authorize__head {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  padding-top: 100px;
  margin-bottom: 54px;

  .head__info {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-flow: column;

    .head__logo {
      height: 75px;
      text-align: center;

      img {
        height: 100%;
      }
    }

    .head__text {
      font-size: 26px;
      color: #666;
      margin-top: 16px;
    }
  }
}

.mgt40 {
  margin-top: 54px;
}
.mgt20 {
  margin-top: 20px;
}

.mgt34 {
  margin-top: 34px;
}

.authorize_btn {
  height: 100px;
  width: calc(100% - 60px);
  border-radius: 100px;
  line-height: 100px;
  font-size: 36px;
  margin: 0 30px;
}

.authorize_btn--phone {
  background-color: #333333;
  color: #ffffff;
}

.authorize__form {
  width: 100%;
  border-top: 1px solid #d8dae0;
  border-bottom: 1px solid #d8dae0;
}

.authorize__form > .form__item {
  height: 130px;
  line-height: 130px;
  margin-left: 36px;
  display: flex;
  flex-direction: row;

  &.line {
    border-bottom: 1px solid #d8dae0;
  }
}

.authorize__form > .form__item > .form__label {
  width: 190px;
  font-size: 34px;
}

.authorize__form > .form__item > .form__input {
  flex: 1;
  margin-right: 30px;
  height: 130px;
  line-height: 130px;
  display: flex;
  align-items: center;

  input {
    height: 66px;
    line-height: 66px;
  }

  .van-cell {
    background-color: transparent;
    font-size: 30px;
    padding-right: 0;
  }
}

.authorize__form > .form__item > .form__code {
  display: flex;
  align-items: center;
  height: 130px;
  line-height: 130px;
  margin-right: 30px;
}

.protocolName {
  display: flex;
  align-items: flex-start;

  .van-checkbox {
    margin-top: 5px;
  }
}

.auth-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: space-between;
  width: 600px;
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 10px;

  .auth-popup__head {
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
  }

  .auth-popup__main {
    text-align: center;

    .head__logo {
      height: 75px;
      margin-bottom: 40px;
      margin: 52px auto 27px auto;
      text-align: center;

      img {
        height: 100%;
      }
    }
  }

  .auth-popup__footer {
    display: flex;
    font-size: 34px;
    text-align: center;
    height: 92px;
    line-height: 92px;
    border-top: 1px solid #f0f0f0;

    .cancel {
      flex: 1;
      line-height: 92px;
    }

    .phone-btn {
      color: #6578c1;
      background-color: transparent;

      &::after {
        border: none;
      }
    }
  }
}
</style>