mrr.sj.front/pages/ruzhu/qualification_sj.vue

<template>
  <view class="qualification-page">
    <view class="section">
      <view class="section-title">
        <view class="title-bar"></view>
        <text class="title-text">门店信息</text>
      </view>

      <view class="form-item-one box-cont">
        <view class="label-wrapper">
          <text class="label required">店铺名称</text>
        </view>
        <input type="text" v-model="formData.name" placeholder="请输入营业执照的店铺名称" placeholder-class="placeholder"
          class="input" @input="saveFormDataToLocalDebounce" />
      </view>
      <view class="form-item-two box-cont" @click="showLocationPopup">
        <text class="label required">门店所在地</text>
        <view class="picker-content">
          <text :class="formData.dependency ? 'picker-value' : 'placeholder'">
            {{ formData.dependency || '请选择' }}
          </text>
          <image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3"
            class="arrow-right" mode="aspectFit"></image>
        </view>
      </view>
      <view class="form-item-two box-cont" @click="getAddressInfo">
        <text class="label required">门店详细地址</text>
        <view class="picker-content">
          <text :class="formData.address ? 'picker-value' : 'placeholder'">
            {{ formData.address || '请选择' }}
          </text>
          <image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3"
            class="arrow-right" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">
        <view class="title-bar"></view>
        <text class="title-text">联系人信息</text>
      </view>

      <view class="form-item box-cont">
        <text class="label required">您的身份</text>
        <view class="radio-group">
          <view class="radio-item" @click="setContactType('1')">
            <view class="radio" :class="{ checked: formData.contact_type === '1' }">
              <image v-if="formData.contact_type === '1'"
                src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cb185ec8-9d30-4e53-b5dc-14b546013a60"
                class="radio-icon-image" mode="aspectFit"></image>
            </view>
            <text class="radio-label">法人</text>
          </view>
          <view class="radio-item" @click="setContactType('2')">
            <view class="radio" :class="{ checked: formData.contact_type === '2' }">
              <image v-if="formData.contact_type === '2'"
                src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cb185ec8-9d30-4e53-b5dc-14b546013a60"
                class="radio-icon-image" mode="aspectFit"></image>
            </view>
            <text class="radio-label">其他</text>
          </view>
        </view>
      </view>

      <view class="form-item-one box-cont">
        <text class="label required">联系人</text>
        <input type="text" v-model="formData.contact_name" placeholder="请输入" placeholder-class="placeholder"
          class="input" @input="saveFormDataToLocalDebounce" />
      </view>

      <view class="form-item-one box-cont">
        <text class="label required">联系人电话</text>
        <input type="number" v-model="formData.contact_phone" placeholder="请输入联系电话" placeholder-class="placeholder"
          class="input" @input="saveFormDataToLocalDebounce" />
      </view>

      <view class="form-item-one box-cont">
        <text class="label">备用联系人电话</text>
        <input type="number" v-model="formData.backup_phone" placeholder="请输入备用联系电话" placeholder-class="placeholder"
          class="input" @input="saveFormDataToLocalDebounce" />
      </view>
    </view>

    <view class="section">
      <view class="section-title">
        <view class="title-bar"></view>
        <text class="title-text">其他信息</text>
      </view>

      <view class="form-item-one box-cont">
        <text class="label required">邀请码</text>
        <input type="text" v-model="formData.invite_code" placeholder="请输入邀请码" placeholder-class="placeholder"
          class="input" @input="saveFormDataToLocalDebounce" />
      </view>
      <view class="invite-tip box-cont">
        <text class="invite-tip-text">请填写邀请人的邀请码，若没有邀请人请填写13131313</text>
      </view>
    </view>

    <view class="popup" :class="{ show: showLocationPopupFlag }">
      <view class="popup-mask" @click="hideLocationPopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择所在地</text>
          <text class="popup-close" @click="hideLocationPopup">×</text>
        </view>
        <view class="region-body">
          <picker-view @change="bindChangeLocation" class="picker-scroll" :indicator-style="indicatorStyle"
            :value="locationValue">
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in ChinaCitys" :key="index">
                {{ item.province }}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in locatinCitys" :key="index">
                {{ item.city }}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in locationAreas" :key="index">
                {{ item.area }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideLocationPopup">
            <text class="btn-text">取消</text>
          </view>
          <view class="popup-btn confirm" @click="confirmLocationSelect">
            <text class="btn-text">确定</text>
          </view>
        </view>
      </view>
    </view>

    <view class="tip-popup" :class="{ show: showTipPopupFlag }">
      <view class="tip-popup-mask" @click="hideTipPopup"></view>
      <view class="tip-popup-content">
        <image class="tip-popup-bg"
          src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ab410a5d-5819-47f2-a0fc-3fd6b90d6770"
          mode="aspectFit"></image>

        <view class="tip-popup-body">
          <view class="tip-title">{{ tipTitle }}</view>
          <view class="tip-image-container">
            <image class="tip-image" :src="tipImage" mode="widthFix"></image>
          </view>
          <view class="tip-buttons">
            <view class="tip-btn cancel" @click="hideTipPopup">
              <text class="btn-text">取消</text>
            </view>
            <view class="tip-btn confirm" @click="hideTipPopup">
              <text class="btn-text">我已了解</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '../../utils/request';
import { debounce } from '@/utils/debounce.js';
import ChinaCitys from '../../static/data/ChinaCitys.json';

export default {
  data() {
    const loadedData = this.loadFormDataFromLocal();

    return {
      userId: null,
      formData: loadedData || {
        name: '',
        contact_type: '1',
        contact_name: '',
        contact_phone: '',
        backup_phone: '',
        invite_code: '',
        dependency: '',
        address: '',
        dependency_code: '',
        dependency_province: '',
        dependency_city: '',
        longitude: '',
        latitude: ''
      },
      showTipPopupFlag: false,
      indicatorStyle: 'height: 68rpx;',
      tipTitle: '',
      tipImage: '',
      isSubmit: false,
      identity: 2,

      ChinaCitys: ChinaCitys,
      locatinCitys: [],
      locationAreas: [],
      locationValue: [0, 0, 0],
      showLocationPopupFlag: false
    }
  },
  computed: {

  },

  watch: {
    'formData.name'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.contact_name'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.contact_phone'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.backup_phone'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.invite_code'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.dependency'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.address'(newVal) {
      this.saveFormDataToLocalDebounce();
    }
  },

  created() {
    this.getUserInfo();
    this.checkGlobalData();
    this.setupAddressListener();
  },

  onShow() {
    const localData = this.loadFormDataFromLocal();
    if (localData) {
      this.formData = {
        ...this.formData,
        ...localData
      };
    }

    this.checkGlobalData();
    this.checkAddressData();
  },

  onUnload() {
    this.saveFormDataToLocal();
  },

  beforeDestroy() {
    if (this.addressListener) {
      uni.$off('address-selected', this.addressListener);
    }
    if (this.sjAddressListener) {
      uni.$off('address-selected-for-sj', this.sjAddressListener);
    }
  },

  mounted() {
    this.locatinCitys = this.ChinaCitys[0].citys;
    this.locationAreas = this.locatinCitys[0].areas;
  },

  onHide() {
    this.saveFormDataToLocal();
  },

  methods: {
    checkGlobalData() {
      if (getApp().globalData.qualificationData) {
        this.formData = {
          ...this.formData,
          ...getApp().globalData.qualificationData
        };
        this.saveFormDataToLocal();
        getApp().globalData.qualificationData = null;
      }
    },

    loadFormDataFromLocal() {
      try {
        const stored = uni.getStorageSync('qualification_form_data');
        if (stored) {
          console.log('从本地存储加载数据:', stored);
          return stored;
        }
      } catch (e) {
        console.log('读取本地存储失败:', e);
      }
      return null;
    },

    saveFormDataToLocalDebounce: debounce(function () {
      this.saveFormDataToLocal();
    }, 500),

    saveFormDataToLocal() {
      try {
        uni.setStorageSync('qualification_form_data', this.formData);
        console.log('数据已保存到本地存储');
      } catch (e) {
        console.log('保存数据失败:', e);
      }
    },

    clearFormDataLocal() {
      try {
        uni.removeStorageSync('qualification_form_data');
        console.log('已清空本地存储数据');
      } catch (e) {
        console.log('清空数据失败:', e);
      }
    },

    getUserInfo() {
      return new Promise((resolve, reject) => {
        request.post('/sj/user/getuser').then(result => {
          if (result.state === 1) {
            this.userId = result.data.id;
            console.log('用户ID获取成功:', this.userId);
            resolve(this.userId);
          } else {
            console.error('获取用户信息失败:', result.msg);
            reject(result.msg);
          }
        }).catch(error => {
          console.error('获取用户信息接口错误:', error);
          reject(error);
        });
      });
    },

    getFormData() {
      return { ...this.formData };
    },

    saveFormData() {
      if (!this.formData.name) {
        uni.showToast({ title: '请输入店铺名称', icon: 'none' });
        return false;
      }
      if (!this.formData.dependency) {
        uni.showToast({ title: '请选择门店所在地', icon: 'none' });
        return false;
      }
      if (!this.formData.address) {
        uni.showToast({ title: '请选择门店详细地址', icon: 'none' });
        return false;
      }
      if (!this.formData.contact_name) {
        uni.showToast({ title: '请输入联系人', icon: 'none' });
        return false;
      }
      if (!this.formData.contact_phone) {
        uni.showToast({ title: '请输入联系人电话', icon: 'none' });
        return false;
      }
      if (!/^1[3-9]\d{9}$/.test(this.formData.contact_phone)) {
        uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
        return false;
      }
      if (!this.formData.invite_code) {
        uni.showToast({ title: '请输入邀请码', icon: 'none' });
        return false;
      }
      this.saveFormDataToLocal();
      return true;
    },

    setContactType(type) {
      this.$set(this.formData, 'contact_type', type);
      this.saveFormDataToLocal();
    },

    showTipPopup(field) {
      const tipConfig = {
        'name': {
          title: '如何找到店铺名称',
          image: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4fb3e0a2-4c1a-4433-a181-b7a1dfefd030'
        }
      };

      if (tipConfig[field]) {
        this.tipTitle = tipConfig[field].title;
        this.tipImage = tipConfig[field].image;
        this.showTipPopupFlag = true;
      }
    },

    hideTipPopup() {
      this.showTipPopupFlag = false;
    },

    showLocationPopup() {
      this.showLocationPopupFlag = true;
    },

    hideLocationPopup() {
      this.showLocationPopupFlag = false;
    },

    bindChangeLocation(e) {
      this.locationValue = e.detail.value;
      let index1 = e.detail.value[0] || 0;
      let index2 = e.detail.value[1] || 0;
      this.locatinCitys = this.ChinaCitys[index1].citys;
      this.locationAreas = this.locatinCitys[index2].areas;
    },

    confirmLocationSelect() {
      let valueArr = this.locationValue;
      let index1 = valueArr[0] || 0;
      let index2 = valueArr[1] || 0;
      let index3 = valueArr[2] || 0;
      let province = this.ChinaCitys[index1].province;
      let city = this.locatinCitys[index2].city;
      let area = this.locationAreas[index3].area;
      this.formData.dependency = province + '-' + city + '-' + area;

      this.formData.address = '';
      this.formData.longitude = '';
      this.formData.latitude = '';

      if (this.ChinaCitys[index1] && this.ChinaCitys[index1].code) {
        let provinceCode = this.ChinaCitys[index1].code.toString();
        this.formData.dependency_province = provinceCode.substring(0, 6);
      }
      if (this.locatinCitys[index2] && this.locatinCitys[index2].code) {
        let cityCode = this.locatinCitys[index2].code.toString();
        this.formData.dependency_city = cityCode.substring(0, 6);
      }
      if (this.locationAreas[index3] && this.locationAreas[index3].code) {
        let areaCode = this.locationAreas[index3].code.toString();
        this.formData.dependency_code = areaCode.substring(0, 6);
      }

      this.saveFormDataToLocal();
      this.hideLocationPopup();
    },

    buildRegionTextForSearch() {
      const dependency = String(this.formData.dependency || '').trim();
      if (!dependency) return '';

      const parts = dependency.split('-');
      const province = parts[0] || '';
      const city = parts[1] || '';
      const district = parts[2] || '';

      let regionText = '';
      if (province) regionText += province;
      if (city && city !== province) regionText += city;
      if (district) regionText += district;

      return regionText;
    },

    getAddressValueForSearch() {
      const rawAddress = String(this.formData.address || '').trim();
      if (!rawAddress) return '';

      const dependencyText = String(this.formData.dependency || '').trim();
      const regionText = this.buildRegionTextForSearch();

      let detail = rawAddress;

      if (regionText && detail.indexOf(regionText) === 0) {
        detail = detail.slice(regionText.length).trim();
      } else if (dependencyText && detail.indexOf(dependencyText) === 0) {
        detail = detail.slice(dependencyText.length).trim();
      }

      detail = detail.replace(/^[\s,-]+/, '').trim();

      return detail || rawAddress;
    },

    getAddressInfo() {
      this.saveFormDataToLocal();

      const dependency = String(this.formData.dependency || '').trim();
      const dependencyCode = String(this.formData.dependency_code || '').trim();
      const address = this.getAddressValueForSearch();
      const longitude = String(this.formData.longitude || '').trim();
      const latitude = String(this.formData.latitude || '').trim();

      const hasDependency = !!dependency;
      const hasAddress = !!address;
      const hasLocation = !!(longitude && latitude);

      let params = 'source=sj_info';

      if (hasDependency) {
        params += `&dependency=${encodeURIComponent(dependency)}`;
        if (dependencyCode) {
          params += `&dependency_code=${dependencyCode}`;
        }
      }

      if (hasAddress) {
        params += `&address=${encodeURIComponent(address)}`;
      }

      if (hasLocation) {
        params += `&longitude=${longitude}&latitude=${latitude}`;
      }

      if (!hasDependency && !hasAddress && !hasLocation) {
        params += '&init_current_location=1&silent_locate=1';
      }

      uni.navigateTo({
        url: `/pages/address/search?${params}`
      });
    },

    setupAddressListener() {
      this.addressListener = (addressData) => {
        this.handleAddressSelected(addressData);
      };
      this.sjAddressListener = (addressData) => {
        this.handleAddressSelected(addressData);
      };
      uni.$on('address-selected', this.addressListener);
      uni.$on('address-selected-for-sj', this.sjAddressListener);
    },

    checkAddressData() {
      try {
        const storedAddress = uni.getStorageSync('sj_selected_address');
        if (storedAddress) {
          this.handleAddressSelected(storedAddress);
          uni.removeStorageSync('sj_selected_address');
          return;
        }
      } catch (e) { }

      if (getApp().globalData && getApp().globalData.selectedAddress) {
        this.handleAddressSelected(getApp().globalData.selectedAddress);
        delete getApp().globalData.selectedAddress;
      }

      try {
        const selectedAddress = uni.getStorageSync('selectedAddress');
        if (selectedAddress) {
          this.handleAddressSelected(selectedAddress);
          uni.removeStorageSync('selectedAddress');
        }
      } catch (e) { }
    },

    handleAddressSelected(addressData) {
      if (!addressData) return;

      let detailAddress = '';
      if (addressData.address) {
        detailAddress = String(addressData.address).trim();
      } else if (addressData.name) {
        detailAddress = String(addressData.name).trim();

        const regionParts = [];
        if (addressData.pname) regionParts.push(addressData.pname);
        if (addressData.cityname && addressData.cityname !== addressData.pname) regionParts.push(addressData.cityname);
        if (addressData.adname) regionParts.push(addressData.adname);

        const regionText = regionParts.join('');

        if (regionText && detailAddress.indexOf(regionText) === 0) {
          detailAddress = detailAddress.slice(regionText.length).trim();
        }

        detailAddress = detailAddress.replace(/^[\s,-]+/, '').trim();
      }

      this.formData.address = detailAddress;

      if (addressData.location) {
        const [longitude, latitude] = String(addressData.location).split(',');
        this.formData.longitude = longitude || '';
        this.formData.latitude = latitude || '';
      }

      if (addressData.pname || addressData.cityname || addressData.adname) {
        const locationParts = [];
        if (addressData.pname) locationParts.push(addressData.pname);
        if (addressData.cityname) locationParts.push(addressData.cityname);
        if (addressData.adname) locationParts.push(addressData.adname);
        this.formData.dependency = locationParts.join('-');
      }

      this.formData.dependency_province = addressData.provinceCode || '';
      this.formData.dependency_city = addressData.cityCode || '';
      this.formData.dependency_code = addressData.districtCode || '';

      this.saveFormDataToLocal();
      this.$forceUpdate();
    }
  }
}
</script>

<style scoped>
.qualification-page {}

.section {
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-bar {
  width: 6rpx;
  height: 30rpx;
  background-color: #E8101E;
  margin-right: 7rpx;
  border-radius: 5rpx;
}

.title-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #1D2129;
  line-height: 48rpx;
  text-align: left;
  font-style: normal;
}

.section-title text {
  font-size: 36rpx;
  color: #1D2129;
  font-weight: 500;
}

.box-cont {
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
  box-shadow: none;
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}

.form-item-one {
  display: flex;
  align-items: center;
  padding: 24rpx;
}

.form-item-two {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}

.form-item-two>text.label {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.label-wrapper {
  display: inline-flex;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  line-height: 1;
}

.label-icon {
  width: 26rpx;
  height: 26rpx;
  margin-left: 8rpx;
  align-items: center;
}

.required::before {
  content: '*';
  color: #FF0000;
  margin-right: 4rpx;
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.picker-content text {
  margin-right: 19rpx;
}

.arrow-right {
  width: 14rpx;
  height: 26rpx;
}

.placeholder {
  color: #999999;
  font-size: 28rpx;
}

.picker-value {
  font-size: 28rpx;
  color: #333333;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  text-align: right;
  margin-left: 20rpx;
}

.radio-group {
  display: flex;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 130rpx;
}

.radio {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #DDDDDD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.radio.checked {
  background-color: #E8101E;
  border-color: #E8101E;
}

.radio-icon-image {
  width: 32rpx;
  height: 32rpx;
}

.radio-label {
  font-size: 28rpx;
  color: #333333;
}

.invite-tip {
  padding: 24rpx;
}

.invite-tip-text {
  font-size: 26rpx;
  color: #999999;
  line-height: 40rpx;
}

.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 70vh;
}

.popup.show .popup-content {
  transform: translateY(0);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
}

.popup-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.popup-close {
  font-size: 40rpx;
  color: #999999;
  padding: 16rpx;
}

.popup-footer {
  margin-top: 32rpx;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  padding: 0 24rpx 24rpx;
}

.popup-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
}

.popup-btn.cancel {
  background-color: #F5F5F5;
}

.popup-btn.confirm {
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
}

.popup-btn .btn-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #FFFFFF;
}

.popup-btn.cancel .btn-text {
  color: #666666;
}

.popup-btn.confirm .btn-text {
  color: #FFFFFF;
}

.region-body {
  height: 400rpx;
}

.picker-scroll {
  height: 400rpx;
}

.picker-item {
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  font-size: 28rpx;
}

.tip-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.tip-popup.show {
  visibility: visible;
  opacity: 1;
}

.tip-popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.tip-popup-content {
  position: relative;
  width: 620rpx;
  height: 810rpx;
}

.tip-popup-bg {
  width: 620rpx;
  height: 810rpx;
  position: absolute;
  top: 0;
  left: 0;
}

.tip-popup-body {
  position: relative;
  flex-direction: column;
  padding: 80rpx 20rpx 40rpx 20rpx;
  box-sizing: border-box;
}

.tip-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 107rpx;
  margin-bottom: 37rpx;
}

.tip-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
}

.tip-image {
  width: 90%;
  max-height: 400rpx;
}

.tip-buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 28rpx;
}

.tip-btn {
  width: 250rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
}

.tip-btn.cancel {
  border: #E8101E 2rpx solid;
  background-color: transparent;
  color: #e8101e;
}

.tip-btn.confirm {
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
  color: #FFFFFF;
}

.tip-btn .btn-text {
  color: inherit;
}
</style>