front-end/hdApp/src/pagesStore/me/expressSet.vue

<template>
  <view class="app-content">
    <!-- 门店地址管理 -->
    <view class="shop-address-section">
      <view class="section-header">
        <text class="section-title">门店地址</text>
      </view>
      
      <view class="shop-info-card" v-if="shopAddress">
        <view class="shop-status success">
          <text class="status-icon">✓</text>
          <text class="status-text">已创建门店地址</text>
        </view>
        <!-- <view class="shop-details">
          <view class="detail-item">
            <text class="detail-label">门店名称：</text>
            <text class="detail-value">{{ shopAddress.shopName || '未设置' }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">门店地址：</text>
            <text class="detail-value">{{ shopAddress.fullAddress || '未设置' }}</text>
          </view>
        </view> -->
        <button class="update-btn" @click="updateShopAddressFn">
          <text class="btn-text">更新门店地址</text>
        </button>
      </view>
      
      <view class="shop-info-card empty" v-else>
        <view class="shop-status warning">
          <text class="status-icon">!</text>
          <text class="status-text">暂未创建门店地址</text>
        </view>
        <view class="shop-desc">
          <text class="desc-text">请先创建门店地址，以便正常使用跑腿服务</text>
        </view>
        <button class="create-btn" @click="createShopAddress">
          <text class="btn-text">创建门店</text>
        </button>
      </view>
    </view>

    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="balance-left">
        <view class="balance-header">
          <text class="balance-title">账户余额</text>
        </view>
        <view class="balance-amount">
          <text class="amount-text">{{ balance.toFixed(2) }}</text>
          <text class="balance-unit">元</text>
        </view>
        <view class="balance-desc">
          <text class="desc-text">用于支付跑腿费用</text>
        </view>
      </view>
      <view class="balance-right">
        <view class="sub-balance sf">
          <text class="sub-balance-label">达达</text>
          <text class="sub-balance-amount">{{ dadaBalance.toFixed(2) }}元</text>
        </view>
        <view class="sub-balance dada">
          <text class="sub-balance-label">顺丰同城</text>
          <text class="sub-balance-amount">{{ sfBalance.toFixed(2) }}元</text>
        </view>
      </view>
    </view>

    <!-- 充值按钮 -->
    <view class="recharge-section">
      <button class="recharge-btn" @click="showRechargeModal">
        <text class="btn-text">立即充值</text>
      </button>
    </view>

    <!-- 充值记录 -->
    <!-- <view class="record-section">
      <view class="section-header">
        <text class="section-title">充值记录</text>
      </view>
      <view class="record-list" v-if="rechargeRecords.length > 0">
        <view class="record-item" v-for="(record, index) in rechargeRecords" :key="index">
          <view class="record-info">
            <text class="record-amount">+{{ record.amount }}元</text>
            <text class="record-time">{{ record.time }}</text>
          </view>
          <text class="record-status" :class="record.status">{{ record.statusText }}</text>
        </view>
      </view>
      <view class="empty-record" v-else>
        <text class="empty-text">暂无充值记录</text>
      </view>
    </view> -->

    <!-- 充值弹窗 -->
    <view class="modal-overlay" v-if="showModal" @click="hideRechargeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">账户充值</text>
          <text class="modal-close" @click="hideRechargeModal">×</text>
        </view>
        
        <view class="modal-body">
          <view v-if="!showPayUrl">
            <!-- 配送公司选择 -->
            <view class="form-item">
              <text class="form-label">选择跑腿</text>
              <view class="express-company-options">
                <view 
                  class="express-option" 
                  :class="{ active: expressCompany === 'DADA' }"
                  @click="selectExpressCompany('DADA')"
                >
                  <text class="express-option-text">达达</text>
                </view>
                <view 
                  class="express-option" 
                  :class="{ active: expressCompany === 'SFTC' }"
                  @click="selectExpressCompany('SFTC')"
                >
                  <text class="express-option-text">顺丰同城</text>
                </view>
              </view>
            </view>
            
            <view class="form-item">
              <text class="form-label">充值金额</text>
              <view class="amount-input-wrapper">
                <text class="currency-symbol">¥</text>
                <input 
                  class="amount-input" 
                  type="digit" 
                  v-model="rechargeAmount"
                  placeholder="充值金额"
                  @input="onAmountInput"
                />
              </view>
              <view style="color:red;margin:10upx 0 10upx 0;font-size:24upx;font-weight:bold;">充值金额不能少于50元，用不完可以退</view>
            </view>
            
            <!-- 快捷金额选择 -->
            <view class="quick-amounts">
              <text class="quick-title">快捷选择</text>
              <view class="amount-options">
                <view 
                  class="amount-option" 
                  v-for="amount in quickAmounts" 
                  :key="amount"
                  :class="{ active: rechargeAmount == amount }"
                  @click="selectAmount(amount)"
                >
                  <text class="option-text">{{ amount }}元</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 支付链接展示区域 -->
          <view v-if="showPayUrl" class="pay-url-section">
            <view class="pay-url-title">
              <text>请复制以下链接在浏览器中打开完成支付</text>
            </view>
            <view class="pay-url-box">
              <text class="pay-url-text" user-select>{{ payUrl }}</text>
            </view>
            <view class="copy-btn-wrapper">
              <button class="copy-btn" @click="copyPayUrl">
                <text class="copy-btn-text">复制链接</text>
              </button>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="hideRechargeModal">
            <text class="cancel-text">{{ showPayUrl ? '关闭' : '取消' }}</text>
          </button>
          <button v-if="!showPayUrl" class="confirm-btn" @click="confirmRecharge" :disabled="!canRecharge">
            <text class="confirm-text">获取充值链接</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import { createStore, updateStore, getStore, getStoreBalance, rechargeStore } from "@/api/shop-express";
import { getWxStoreId } from "@/api/main/index";
export default {
  name: "expressSet",
  components: {
    TuiListCell,
  },
  data() {
    return {
      balance: 0.00, // 总账户余额
      sfBalance: 0.00, // 顺丰余额
      dadaBalance: 0.00, // 达达余额
      showModal: false, // 是否显示充值弹窗
      rechargeAmount: '', // 充值金额
      expressCompany: 'DADA', // 跑腿公司，默认达达
      quickAmounts: [50, 100, 200, 500], // 快捷金额选项
      rechargeRecords: [], // 充值记录
      shopAddress: null, // 门店地址信息
      loading: false,
      payUrl: '', // 支付链接
      showPayUrl: false, // 是否显示支付链接
      wxStoreId:''
    };
  },
  computed: {
    canRecharge() {
      const amount = parseFloat(this.rechargeAmount);
      return amount > 0 && amount <= 1000000; // 限制最大充值金额
    }
  },
  onLoad() {
    
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: `跑腿设置`,
    });
  },
  methods: {
    // 复制支付链接
    copyPayUrl() {
      uni.setClipboardData({
        data: this.payUrl,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          });
        }
      });
    },
    init() {
      getWxStoreId().then(res=>{
        if(res.code == 1){
          if(res.data.wx){
            this.wxStoreId = res.data.wx.wxStoreId
            if(this.wxStoreId!=''){
              this.initExpress()
            }
          }
        }
      })
    },
    async initExpress(){
      try {
        this.loading = true;
        // 获取门店地址信息
        this.getShopAddressInfo();
        // 获取账户余额和充值记录
        this.getBalance();
        this.getRechargeRecords();
      } catch (error) {
        console.error('初始化失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    // 获取门店地址信息
    async getShopAddressInfo() {
      try {
        const result = await getStore();

        console.log(result.data);
        if (result.data.id) {
          this.shopAddress = result.data ? {
            province: result.data.province,
            city: result.data.city,
            area: result.data.dist,
            floor: result.data.floor,
            address: result.data.address,
            lat: result.data.lat,
            lng: result.data.long,
            wxStoreId: result.data.wx_store_id
          } : null;
        } else {
          this.shopAddress = result.data ? {
            province: result.data.address_info.province,
            city: result.data.address_info.city,
            area: result.data.address_info.area,
            street: result.data.address_info.street,
            house: result.data.address_info.house,
            lat: result.data.address_info.lat,
            lng: result.data.address_info.lng,
            cityId: result.data.city_id,
            orderPattern: result.data.order_pattern,
            outStoreId: result.data.out_store_id,
            serviceTransPrefer: result.data.service_trans_prefer,
            wxStoreId: result.data.wx_store_id
          } : null;
          console.log(this.shopAddress);
        }
      } catch (error) {
        // console.error('获取门店地址失败:', error);
        // 如果接口不存在或失败，设置为null
        this.shopAddress = null;
      }
    },

    // 创建门店地址
    async createShopAddress() {
      try {
        uni.showLoading({
          title: '创建中...'
        });

        // 调用创建门店地址API
        const result = await createStore({
          // 这里可以传入默认的门店信息
          shopName: '默认门店',
          province: '',
          city: '',
          address: '',
          lat: 0,
          lng: 0
        });

        uni.hideLoading();

        if (result.code === 1) {
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          });
          
          // 刷新门店信息
          await this.getShopAddressInfo();
        } else {
          if(result.msg && result.msg.includes('address_info.house is empty')){
            this.$msg('门店的门牌号未填写')
          } else {
            console.log(result.message);
            uni.showToast({
              title: '创建失败',
              icon: 'none'
            });
          }
        }
      } catch (error) {
        uni.hideLoading();
        console.error('创建门店地址失败:', error);
        uni.showToast({
          title: '创建失败，请重试',
          icon: 'none'
        });
      }
    },

    // 更新门店地址
    async updateShopAddressFn() {
      try {
        uni.showLoading({
          title: '更新中...'
        });

        // 调用更新门店地址API
        const result = await updateStore({
          id: this.shopAddress.id,
          province: this.shopAddress.province,
          city: this.shopAddress.city,
          address: this.shopAddress.address,
          lat: this.shopAddress.lat,
          lng: this.shopAddress.lng
        });

        uni.hideLoading();

        if (result.code === 1) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          });
          
          // 刷新门店信息
          await this.getShopAddressInfo();
        } else {
          console.log(result);
          if(result.msg && result.msg.includes('content.address_info.house is empty')){
            this.$msg('门店的门牌号未填写')
          } else {
            console.log(result.msg);
            uni.showToast({
              title: '更新失败',
              icon: 'none'
            });
          }
        }
      } catch (error) {
        uni.hideLoading();
        console.error('更新门店地址失败:', error);
        if(error.msg && error.msg.includes('content.address_info.house is empty')){
          this.$msg('门店的门牌号未填写')
        } else {
          console.log(error.msg);
          this.$msg('更新失败')
        }
      }
    },

    // 获取账户余额
    async getBalance() {
      try {
        const result = await getStoreBalance();
        this.balance = result.data.all_balance || 0;
        // 获取顺丰和达达的余额
        this.sfBalance = result.data.sf_balance || 0;
        this.dadaBalance = result.data.dada_balance || 0;
      } catch (error) {
        console.log(error);
        // console.error('获取余额失败:', error);
      }
    },

    // 获取充值记录
    async getRechargeRecords() {
      try {
        // 这里调用实际的API获取充值记录
        // const result = await getRechargeRecords();
        // this.rechargeRecords = result.data || [];
        
        // 模拟数据
        this.rechargeRecords = [
          {
            amount: 100,
            time: '2024-01-15 14:30:25',
            status: 'success',
            statusText: '充值成功'
          },
          {
            amount: 200,
            time: '2024-01-10 09:15:30',
            status: 'success',
            statusText: '充值成功'
          }
        ];
      } catch (error) {
        console.error('获取充值记录失败:', error);
      }
    },

    // 显示充值弹窗
    showRechargeModal() {
      this.showModal = true;
      this.rechargeAmount = '';
      this.expressCompany = 'DADA'; // 默认选择顺丰
    },

    // 隐藏充值弹窗
    hideRechargeModal() {
      this.showModal = false;
      this.rechargeAmount = '';
      this.payUrl = '';
      this.showPayUrl = false;
    },
    
    // 选择跑腿公司
    selectExpressCompany(company) {
      this.expressCompany = company;
    },

    // 金额输入处理
    onAmountInput(e) {
      let value = e.detail.value;
      // 限制只能输入数字和小数点
      value = value.replace(/[^\d.]/g, '');
      // 限制小数点后两位
      if (value.includes('.')) {
        const parts = value.split('.');
        if (parts[1].length > 2) {
          value = parts[0] + '.' + parts[1].substring(0, 2);
        }
      }
      this.rechargeAmount = value;
    },

    // 选择快捷金额
    selectAmount(amount) {
      this.rechargeAmount = amount.toString();
    },

    // 确认充值
    async confirmRecharge() {
      if (!this.canRecharge) {
        uni.showToast({
          title: '请输入有效金额',
          icon: 'none'
        });
        return;
      }

      const amount = parseFloat(this.rechargeAmount);
      
      try {
        uni.showLoading({
          title: '获取中...'
        });

        // 调用实际的充值API，传入金额和跑腿公司
        const result = await rechargeStore({ 
          amount: amount,
          expressId: this.expressCompany // 添加跑腿公司参数
        });
        
        uni.hideLoading();
        
        if (result.code === 1 && result.data && result.data.payurl) {
          // 保存支付链接并显示
          this.payUrl = result.data.payurl;
          this.showPayUrl = true;
          
          // 不关闭弹窗，而是显示支付链接
        } else {
          // 充值单生成成功但没有支付链接
          uni.showToast({
            title: '充值单已生成',
            icon: 'success'
          });
          
          this.hideRechargeModal();
          
          // 刷新余额和记录
          await this.initExpress()
        }
        
      } catch (error) {
        uni.hideLoading();
        console.error('充值失败:', error);
        uni.showToast({
          title: '充值失败，请重试',
          icon: 'none'
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

// 门店地址管理样式
.shop-address-section {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  margin-bottom: 30rpx;
}

.section-title {
  color: #333333;
  font-size: 32rpx;
  font-weight: 600;
}

.shop-info-card {
  &.empty {
    text-align: center;
    padding: 40rpx 0;
  }
}

.shop-status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25rpx;
  
  &.success {
    .status-icon {
      color: #52c41a;
      background-color: #f6ffed;
      border: 2rpx solid #b7eb8f;
    }
  }
  
  &.warning {
    .status-icon {
      color: #faad14;
      background-color: #fffbe6;
      border: 2rpx solid #ffe58f;
    }
  }
}

.status-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 15rpx;
}

.status-text {
  color: #333333;
  font-size: 30rpx;
  font-weight: 500;
}

.shop-desc {
  margin-bottom: 30rpx;
  
  .desc-text {
    color: #666666;
    font-size: 26rpx;
    line-height: 1.5;
  }
}

.shop-details {
  margin-bottom: 30rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 15rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.detail-label {
  color: #666666;
  font-size: 26rpx;
  min-width: 140rpx;
}

.detail-value {
  color: #333333;
  font-size: 26rpx;
  flex: 1;
}

.create-btn, .update-btn {
  width: 60%;
  height: 80rpx;
  border-radius: 40rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s ease;
}

.create-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
  
  .btn-text {
    color: #ffffff;
  }
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
  }
}

.update-btn {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  box-shadow: 0 8rpx 24rpx rgba(82, 196, 26, 0.3);
  
  .btn-text {
    color: #ffffff;
  }
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
  }
}

// 余额卡片样式
.balance-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
  display: flex;
  justify-content: space-between;
}

.balance-left {
  flex: 1;
}

.balance-right {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 2rpx solid rgba(255, 255, 255, 0.2);
  padding-left: 30rpx;
  margin-left: 20rpx;
}

.balance-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.balance-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 28rpx;
  font-weight: 400;
}

.balance-amount {
  margin-bottom: 15rpx;
  display: flex;
  align-items: baseline;
}

.amount-text {
  color: #ffffff;
  font-size: 60rpx;
  font-weight: 600;
  font-family: 'DIN Alternate', sans-serif;
}

.balance-unit {
  color: rgba(255, 255, 255, 0.7);
  font-size: 24rpx;
  margin-left: 10rpx;
}

.balance-desc {
  .desc-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 21rpx;
  }
}

.sub-balance {
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
  
  &.sf {
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
  }
}

.sub-balance-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
  margin-bottom: 8rpx;
}

.sub-balance-amount {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  font-family: 'DIN Alternate', sans-serif;
}

// 充值按钮样式
.recharge-section {
  margin-bottom: 30rpx;
}

.recharge-btn {
  width: 60%;
  height: 88rpx;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  border-radius: 44rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

.recharge-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

.btn-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
}

// 记录区域样式
.record-section {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.record-list {
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .record-info {
    display: flex;
    flex-direction: column;
  }
  
  .record-amount {
    color: #333333;
    font-size: 30rpx;
    font-weight: 600;
    margin-bottom: 8rpx;
  }
  
  .record-time {
    color: #999999;
    font-size: 24rpx;
  }
  
  .record-status {
    font-size: 26rpx;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    
    &.success {
      color: #52c41a;
      background-color: #f6ffed;
    }
    
    &.pending {
      color: #faad14;
      background-color: #fffbe6;
    }
    
    &.failed {
      color: #ff4d4f;
      background-color: #fff2f0;
    }
  }
}

.empty-record {
  text-align: center;
  padding: 60rpx 0;
  
  .empty-text {
    color: #999999;
    font-size: 28rpx;
  }
}

// 支付链接样式
.pay-url-section {
  padding: 20rpx 0;
}

.pay-url-title {
  margin-bottom: 20rpx;
  text-align: center;
  
  text {
    color: #333333;
    font-size: 28rpx;
  }
}

.pay-url-box {
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  word-break: break-all;
  border: 2rpx dashed #ddd;
}

.pay-url-text {
  color: #0066cc;
  font-size: 26rpx;
  line-height: 1.5;
}

.copy-btn-wrapper {
  display: flex;
  justify-content: center;
}

.copy-btn {
  width: 60%;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 8rpx rgba(102, 126, 234, 0.3);
  }
}

.copy-btn-text {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 500;
}

// 弹窗样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  color: #333333;
  font-size: 32rpx;
  font-weight: 600;
}

.modal-close {
  color: #999999;
  font-size: 40rpx;
  line-height: 1;
  padding: 10rpx;
}

.modal-body {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  color: #333333;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  padding: 0 20rpx;
  background-color: #fafafa;
  transition: all 0.3s ease;
  
  &:focus-within {
    border-color: #667eea;
    background-color: #ffffff;
  }
}

.currency-symbol {
  color: #333333;
  font-size: 32rpx;
  font-weight: 600;
  margin-right: 15rpx;
}

.amount-input {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
  color: #333333;
  background: transparent;
  border: none;
}

.quick-amounts {
  margin-top: 30rpx;
}

.quick-title {
  display: block;
  color: #666666;
  font-size: 26rpx;
  margin-bottom: 20rpx;
}

.amount-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.amount-option {
  flex: 1;
  min-width: 120rpx;
  height: 70rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  transition: all 0.3s ease;
  
  &.active {
    border-color: #667eea;
    background-color: #667eea;
    
    .option-text {
      color: #ffffff;
    }
  }
  
  &:active {
    transform: scale(0.95);
  }
}

.option-text {
  color: #333333;
  font-size: 26rpx;
  font-weight: 500;
}

// 跑腿公司选择样式
.express-company-options {
  display: flex;
  flex-direction: row;
  gap: 30rpx;
  margin-bottom: 20rpx;
}

.express-option {
  height: 80rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  background-color: #ffffff;
  transition: all 0.3s ease;
  
  &.active {
    border-color: #667eea;
    background-color: #f0f4ff;
    
    .express-option-text {
      color: #667eea;
    }
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.express-option-text {
  color: #333333;
  font-size: 28rpx;
  font-weight: 500;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 88rpx;
  border: 1rpx solid #e8e8e8;
  border-radius: 8rpx;
  font-size: 30rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.confirm-btn {
  background-color: #52c41a;
  
  .confirm-text {
    color: #666666;
  }
  
  &:disabled {
    background-color: #f5f5f5 !important;
    
    .confirm-text {
      color: #666666 !important;
    }
  }
}
</style>