wxapp_shuibei/pages/users/vault/storeMetal/metalExchangeWithdraw.vue

<template>
  <view class="withdraw">
    <view class="withdrawContent">
      <!-- 金属类型 -->
      <view class="metal-type">
        <view class="info-label">金属类型</view>
        <view class="info-value">{{ metalTypeName }}</view>
      </view>

      <!-- 收货地址模块 -->
      <view class="address" @click="onAddress">
        <view class="addressCon" v-if="addressInfo.realName">
          <view class="name">
            {{ addressInfo.realName }}
            <text class="phone">{{ addressInfo.phone }}</text>
          </view>
          <view class="address-detail">
            <text class="default" v-if="addressInfo.isDefault">[默认]</text>
            <text class="address-text"
              >{{ addressInfo.province }}{{ addressInfo.city
              }}{{ addressInfo.district }}{{ addressInfo.detail }}</text
            >
          </view>
        </view>
        <view class="addressCon" v-else>
          <view class="setaddress">设置收货地址</view>
        </view>
      </view>

      <!-- 快递公司选择 -->
      <view class="courier-section">
        <view class="section-title">选择快递公司</view>
        <view class="courier-list">
          <view
            class="courier-item"
            :class="{ active: item.isSelected }"
            v-for="(item, index) in courierList"
            :key="index"
            @click="handleSelectCourier(index)"
          >
            <image class="courier-logo" :src="item.logo"></image>
            <view class="courier-price" v-if="isSvip && item.price > 0">
              <text class="original-price">¥{{ item.price }}</text>
              <text class="svip-price">¥{{ (item.price / 2).toFixed(2) }}</text>
            </view>
            <view class="courier-price" v-else-if="item.price > 0">
              ¥{{ item.price }}
            </view>
            <view class="courier-price" v-else> 到付 </view>
            <image
              v-show="item.isSelected"
              class="courier-checked"
              src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/courier/dui.png"
            ></image>
          </view>
        </view>
      </view>

      <!-- 详情 -->
      <view class="detail-card">
        <view class="detail-item">
          <view class="detail-label">预约提料克重</view>
          <view class="detail-value">{{ extract }}g</view>
        </view>
        <view class="detail-item">
          <view class="detail-label">预约日期</view>
          <view class="detail-value">
            {{ reservationDetail.reservationDate || "未知" }}
          </view>
        </view>
        <view class="detail-item">
          <view class="detail-label">手续费</view>
          <view class="detail-value">
            {{ totalFee }}元({{ feePerGram }}元/g)
          </view>
        </view>
        <view class="detail-item">
          <view class="detail-label">运费</view>
          <view class="detail-value">
            <span class="svip-discount-tag" v-if="isSvip">SVIP减半</span>
            {{ courierPrice }}元
          </view>
        </view>
        <view class="detail-item">
          <view class="detail-label">总费用</view>
          <view class="detail-value">
            {{ (Number(totalFee) + Number(courierPrice)).toFixed(2) }}元
          </view>
        </view>
      </view>

      <!-- 提示信息 -->
      <view class="tips">
        <view class="tips-item">* 提料克重以预约信息为准，不可修改</view>
        <view class="tips-item">* 提料预计1-5个工作日送达</view>
        <view class="tips-item" v-if="reservationDetail.remark">
          * 备注：{{ reservationDetail.remark }}
        </view>
        <view class="tips-item" v-if="isSvip">* SVIP用户享运费5折优惠</view>
      </view>

      <!-- 操作按钮区 -->
      <view class="operation-area">
        <button class="cancel-btn" @click="gotoOrderList">返回列表</button>
        <button
          class="submit-btn"
          @click="handleSubmit"
          :disabled="isSubmitting || isDetailLoading"
          :loading="isSubmitting"
        >
          确认提交提料并支付
        </button>
      </view>
    </view>

    <!-- 收货地址组件 -->
    <addressWindow
      ref="addressWindowRef"
      :address="address"
      :pagesUrl="pagesUrl"
      @OnDefaultAddress="OnDefaultAddress"
      @OnChangeAddress="OnChangeAddress"
      @changeClose="changeClose"
    />
  </view>
</template>

<script setup>
import { ref, computed, nextTick, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import { useAppStore } from "@/stores/app";
import { nest_exchangeMetalOrder, getReservationDetail } from "@/api/vault";

import addressWindow from "@/components/addressWindow";
import { getAddressDetail, getAddressDefault } from "@/api/user.js";

const appStore = useAppStore();
const { wxConfig, userInfo, isWxConfigReady } = storeToRefs(appStore);

const isSvip = computed(() => {
  return appStore.isLogin && !!appStore?.userInfo?.svip;
});

const reservationId = ref("");
const reservationDetail = ref({});
const isDetailLoading = ref(true);
const detailError = ref("");
const isSubmitting = ref(false);
const metalTypeMap = { 1: "黄金", 2: "铂金", 3: "白银" };
const metalConfigs = ref([]);
const extract = ref(0);

// 地址相关数据
const pagesUrl = ref("/pages/users/user_address_list/index");
const addressWindowRef = ref(null);
const address = ref({ address: false, addressId: 0 });
const addressInfo = ref({});

// 快递公司数据
const courierList = ref([
  {
    type: 2,
    name: "顺丰陆运",
    logo: "https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/luyun_20251011172420_906_6.png",
    isSelected: true,
    price: 15,
  },
  {
    type: 3,
    name: "顺丰空运",
    logo: "https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/kongyun_20251011172421_908_6.png",
    isSelected: false,
    price: 24,
  },
  {
    type: 4,
    name: "顺丰到付",
    logo: "https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/daofu_20251011172420_907_6.png",
    isSelected: false,
    price: 0,
  },
]);

const selectedCourierType = ref(2);

const courierPrice = computed(() => {
  const selectedCourier =
    courierList.value.find((item) => item.isSelected) || courierList.value[0];
  const originalPrice = selectedCourier.price;
  const finalPrice = isSvip.value ? originalPrice / 2 : originalPrice;
  return finalPrice.toFixed(2);
});

// 原有计算属性
const metalTypeName = computed(() => {
  return metalTypeMap[reservationDetail.value.metalType] || "未知金属";
});
const feePerGram = computed(() => {
  if (!metalConfigs.value.length || !reservationDetail.value.metalType)
    return "0.00";
  const typeMap = { 1: "au", 2: "pt", 3: "ag" };
  const currentType = typeMap[reservationDetail.value.metalType];
  const config = metalConfigs.value.find(
    (item) => item.metalType === currentType
  );
  return config?.feePerGram ? Number(config.feePerGram).toFixed(2) : "0.00";
});
const totalFee = computed(() => {
  return (Number(feePerGram.value) * Number(extract.value)).toFixed(2);
});
const accountWeight = computed(() => {
  const weightMap = {
    1: userInfo.value.goldBalance || 0,
    2: userInfo.value.ptBalance || 0,
    3: userInfo.value.agBalance || 0,
  };
  return Number(weightMap[reservationDetail.value.metalType || 1]).toFixed(2);
});

// 页面加载
onLoad((options) => {
  if (!options.reservationId) {
    detailError.value = "未获取到预约信息，请返回重新选择";
    isDetailLoading.value = false;
    return;
  }
  reservationId.value = options.reservationId;
  metalConfigs.value = wxConfig.value?.metalConfigs || [];
  fetchReservationDetail();

  if (appStore.isLogin) {
    getAddressInfo();
    nextTick(() => {
      addressWindowRef.value?.fetchAddressList();
    });
  }
});

// 监听wxConfig
watch(
  isWxConfigReady,
  (isReady) => {
    if (isReady) {
      metalConfigs.value = appStore.wxConfig?.metalConfigs || [];
    }
  },
  { immediate: true }
);

const fetchReservationDetail = async () => {
  try {
    isDetailLoading.value = true;
    const res = await getReservationDetail(reservationId.value);
    if (!res.data) throw new Error("预约详情为空");

    reservationDetail.value = res.data;
    extract.value = reservationDetail.value.reservedWeight || 0;
    detailError.value = "";
  } catch (err) {
    detailError.value = "获取预约详情失败：" + (err.message || "未知错误");
    console.error("查询预约详情失败：", err);
  } finally {
    isDetailLoading.value = false;
  }
};

const gotoOrderList = () => {
  uni.redirectTo({
    url: "/pages/users/vault/storeMetal/metalExchangeList",
  });
};

const getAddressInfo = () => {
  const fetchFn = address.value.addressId
    ? getAddressDetail(address.value.addressId)
    : getAddressDefault();
  fetchFn
    .then((res) => {
      if (res.data) {
        res.data.isDefault = parseInt(res.data.isDefault);
        addressInfo.value = res.data;
        address.value.addressId = res.data.id || 0;
      }
    })
    .catch((err) => console.error("获取地址失败：", err));
};

const OnDefaultAddress = (e) => {
  addressInfo.value = e;
  address.value.addressId = e.id || 0;
};

const onAddress = () => {
  address.value.address = true;
  nextTick(() => addressWindowRef.value?.fetchAddressList());
};

const OnChangeAddress = (e) => {
  addressInfo.value = e;
  address.value.addressId = e.id || 0;
  address.value.address = false;
};

const changeClose = () => {
  address.value.address = false;
};

const handleSelectCourier = (index) => {
  courierList.value.forEach((item, i) => (item.isSelected = i === index));
  selectedCourierType.value = courierList.value[index].type;
};

// 提交校验
const validateSubmit = () => {
  if (!appStore.isLogin) return { valid: false, msg: "请先登录" };
  if (!reservationId.value) return { valid: false, msg: "预约ID异常" };
  if (Number(extract.value) <= 0) return { valid: false, msg: "预约克重异常" };
  if (!address.value.addressId) return { valid: false, msg: "请选择收货地址" };
  if (!selectedCourierType.value)
    return { valid: false, msg: "请选择快递公司" };
  return { valid: true };
};

// 提交方法
const handleSubmit = async () => {
  const check = validateSubmit();
  if (!check.valid) {
    uni.showToast({ title: check.msg, icon: "none", duration: 2000 });
    return;
  }

  const params = {
    metalType: reservationDetail.value.metalType,
    plateWeight: extract.value,
    reservationId: reservationId.value,
    addressId: address.value.addressId,
    expressCompany: selectedCourierType.value,
    freightAmount: Number(courierPrice.value),
  };

  try {
    isSubmitting.value = true;
    uni.showLoading({ title: "提交中...", mask: true });
    const res = await nest_exchangeMetalOrder(params);

    uni.hideLoading();
    uni.showToast({ title: "提料订单提交成功", icon: "success" });
    setTimeout(gotoOrderList, 1000);
  } catch (err) {
    uni.hideLoading();
    uni.showToast({ title: "网络异常，请重试", icon: "none" });
    console.error("提料下单失败：", err);
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<style lang="scss" scoped>
$primary: #dca12b;
$text-main: #333;
$text-secondary: #666;
$text-light: #999;
$bg-gray: #f7f7f7;
$border-gray: #eee;
$svip-color: #ff4500;

page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

// 原有样式（不变）
.page-title {
  padding: 30rpx 40rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: $text-main;
  background-color: #fff;
  border-bottom: 1px solid $border-gray;
}
.withdrawContent {
  padding: 40rpx;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 20rpx;
  margin: 20rpx 20rpx 0;
}
.metal-type {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid $border-gray;
  margin-bottom: 30rpx;

  .info-label {
    font-size: 30rpx;
    color: $text-secondary;
    width: 180rpx;
  }
  .info-value {
    font-size: 32rpx;
    color: $primary;
    font-weight: bold;
  }
}
.address {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 25rpx 20rpx;
  background-color: $bg-gray;
  border-radius: 16rpx;
  margin-bottom: 30rpx;

  .addressCon {
    flex: 1;
    margin-right: 20rpx;
    .name {
      font-size: 28rpx;
      color: $text-main;
      font-weight: 500;
      margin-bottom: 10rpx;
      .phone {
        margin-left: 30rpx;
        color: $text-secondary;
        font-weight: normal;
      }
    }
    .address-detail {
      font-size: 26rpx;
      color: $text-secondary;
      line-height: 1.4;
      .default {
        color: $primary;
        margin-right: 10rpx;
      }
      .address-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    .setaddress {
      font-size: 28rpx;
      color: $text-secondary;
    }
  }
  .icon-arrow-right {
    width: 24rpx;
    height: 40rpx;
    margin-top: 5rpx;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAyNCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMjBDMjAgMjAgMTkuMzA3IDIwLjY5MyAxOC4wNTQgMjIgMTcuNTI2IDIyLjQyNyAxNi41IDIyLjQyNyAxNS40NzQgMjIuNDI3IDE0Ljk0NiAyMiAxNC4wNTQgMjEuMTA3IDE0IDIwIDE0IDIwIDE0Ljk0NiAxNC4wNTQgMTUuNDI3IDE0Ljk0NiAxNi41IDI0Ljk0NiAxNy41MjYgMjQgMTguMDU0IDI1LjEwNyAxOS4zMDcgMjYgMjAgMjYgMjAgMjAuOTQ2IDI1LjkxMyAxOS45OTcgMjcgMTkuMzA3IDI3IDE4LjA1NCAyOC4wNTQgMTcuNTI2IDI4LjQyNyAxNi41IDI4LjQyNyAxNS40NzQgMjguNDI3IDE0Ljk0NiAyOCAxNC4wNTQgMjguOTA3IDE0IDI5IDI0IDI5IDI0Ljk0NiAyOC4wNTQgMjUuNDI3IDI4Ljk0NiAyNi41IDI4Ljk0NiAyNy41MjYgMjkgMjguMDU0IDI5LjkwNyAyOS4zMDcgMzAgMzAgMzAgMjkuMDU0IDI5LjkwNyAyOC4wNTQgMjkgMjcuNTI2IDI4LjU3MyAyNi41IDI4LjU3MyAxNS40NzQgMjguNTczIDE0Ljk0NiAyOCAxNC4wNTQgMjcuMTA3IDI0IDI3IDI0IDI2LjA1NCAyNC45NTcgMjUuMDUyIDI0IDI1IDI0IDI0LjA1NCAyNC4wNTQgMjMuMDUyIDI1IDIyIDI1IDIyIDI0LjA1NCAyMi45NTcgMjMuMDUyIDI0IDIyIDI0IDIyIDI0LjA1NCAyMS4wNTcgMjAuOTU3IDIwIDIwIDIwIDIwLjk0NiAyMC4wNTQgMjEuOTUyIDIwIDIyIDIwIDIyIDIxIDIyIDIxIDIwLjk0NiAyMS4wNTQgMjAuOTU3IDIwIDIwIDIwIDIwLjk0NiAyMCAyMSAyMCAyMSAyMC45NDYgMjAgMjAuOTU3IDIwIDIwIDIwIDIwLjk0NiAyMCAyMSAyMCAyMSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=")
      no-repeat center;
    background-size: contain;
  }
}

.courier-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  border: 2rpx solid $border-gray;
  border-radius: 16rpx;
  position: relative;

  &.active {
    border-color: $primary;
  }
  .courier-logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 10rpx;
  }
  // 新增：快递价格显示（区分原价/折后价）
  .courier-price {
    font-size: 24rpx;
    color: $text-main;
    margin-top: 8rpx;
  }
  .original-price {
    text-decoration: line-through;
    color: $text-light;
    font-size: 20rpx;
    margin-right: 8rpx;
  }
  .svip-price {
    color: $svip-color;
    font-weight: 500;
  }
  .courier-checked {
    position: absolute;
    right: 10rpx;
    bottom: 10rpx;
    width: 36rpx;
    height: 36rpx;
  }
}
// 新增：详情卡片中的SVIP优惠标签
.svip-discount-tag {
  background-color: rgba(255, 69, 0, 0.1);
  color: $svip-color;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
}

// 原有样式（不变）
.courier-section {
  margin-bottom: 30rpx;
  .section-title {
    font-size: 28rpx;
    color: $text-secondary;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
    border-left: 4rpx solid $primary;
  }
  .courier-list {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
  }
}
.detail-card {
  background-color: $bg-gray;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .detail-item {
    display: flex;
    justify-content: space-between;
    padding: 15rpx 0;
    border-bottom: 1px dashed $border-gray;

    &:last-child {
      border-bottom: none;
    }
    .detail-label {
      font-size: 28rpx;
      color: $text-secondary;
    }
    .detail-value {
      font-size: 28rpx;
      color: $text-main;
      font-weight: 500;
    }
  }
}
.tips {
  margin-bottom: 40rpx;
  padding: 20rpx;
  background-color: rgba(220, 161, 43, 0.1);
  border-radius: 12rpx;

  .tips-item {
    font-size: 24rpx;
    color: $primary;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
.operation-area {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;

  .cancel-btn,
  .submit-btn {
    flex: 1;
    height: 90rpx;
    border-radius: 45rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancel-btn {
    background-color: #fff;
    color: $text-secondary;
    border: 1px solid $border-gray;
  }
  .submit-btn {
    background-color: $primary;
    color: #fff;
    border: none;

    &:disabled {
      background-color: #c4bba6;
      opacity: 0.8;
    }
  }
}
.error-view {
  padding: 40rpx;
  text-align: center;
  color: #ff1e0f;
  font-size: 28rpx;
}
.loading-view {
  padding: 40rpx;
  text-align: center;
  color: $text-light;
  font-size: 28rpx;
}
</style>