wxapp_shuibei/pages/users/order_confirm/index.vue

<template>
  <view>
    <view class="order-submission">
      <view class="order-submission-box">
        <view class="allAddress">
          <view
            class="address acea-row row-between-wrapper"
            @tap="onAddress"
            v-if="shippingType == 0"
            :style="
              store_self_mention
                ? ''
                : 'border-top-left-radius: 14rpx;border-top-right-radius: 14rpx;'
            "
          >
            <view class="addressCon" v-if="addressInfo.realName">
              <view class="selected-address">
                <text class="default" v-if="addressInfo.isDefault">默认</text>
                <view class="">
                  <view class="acea-row">
                    <text class="line2"
                      >{{ addressInfo.province }}{{ addressInfo.city
                      }}{{ addressInfo.district }}{{ addressInfo.detail }}</text
                    >
                  </view>
                  <view class="name"
                    >{{ addressInfo.realName }}
                    <text class="phone">{{ addressInfo.phone }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="addressCon" v-else>
              <view class="setaddress">设置收货地址</view>
            </view>
          </view>
          <view
            class="address acea-row row-between-wrapper"
            v-else
            @tap="showStoreList"
          >
            <block v-if="storeList.length > 0">
              <view class="addressCon">
                <view class="name"
                  >{{ system_store.name }}
                  <text class="phone">{{ system_store.phone }}</text>
                </view>
                <view class="line1">
                  {{ system_store.address
                  }}{{ ", " + system_store.detailedAddress }}
                </view>
              </view>
              <view class="iconfont icon-jiantou"></view>
            </block>
            <block v-else>
              <view>暂无门店信息</view>
            </block>
          </view>
          <view class="line">
            <image src="/static/images/line.png"></image>
          </view>
        </view>
        <view class="goods">
          <orderGoods
            :mallType="orderInfoVo.mallType"
            :cartInfo="cartInfo"
            :orderProNum="orderProNum"
          >
          </orderGoods>
          <view
            class="line-item acea-row row-between-wrapper"
            @tap="couponTap"
            v-if="orderInfoVo.mallType === 0"
          >
            <view class="item-label">优惠券</view>
            <view
              class="discount none"
              :class="{ none: couponTitle == '请选择' }"
            >
              {{ couponTitle }}
              <image
                class="rt-arr"
                src="@/static/images/right.png"
                mode=""
              ></image>
            </view>
          </view>
          <view class="line-item acea-row row-between-wrapper">
            <view class="item-label">快递费用</view>
            <block v-if="orderInfoVo.mallType === 0">
              <view
                class="discount"
                v-if="
                  parseFloat(orderInfoVo.freightFee) > 0 &&
                  orderInfoVo.mallType === 0
                "
              >
                +￥{{ orderInfoVo.freightFee }}
              </view>
              <view class="discount" v-else>免运费</view>
            </block>
            <view class="discount" v-else>邮费到付</view>
          </view>
        </view>
        <view class="wrapper">
          <view class="item" v-if="textareaStatus">
            <view>备注信息</view>
            <textarea
              v-if="coupon.coupon === false"
              placeholder-class="placeholder"
              @input="bindHideKeyboard"
              value=""
              name="mark"
              placeholder="请输入备注(可选，如特殊定制需求)"
            ></textarea>
          </view>
        </view>

        <view v-if="orderInfoVo.mallType === 0" class="moneyList">
          <view class="item acea-row row-between-wrapper">
            <view>商品总价：</view>
            <view v-if="orderInfoVo.mallType === 0" class="money">
              ￥{{ orderInfoVo.payFee || 0 }}
            </view>
            <view v-else class="money">
              贝币: {{ Number(orderInfoVo.proTotalFee) || 0 }}
            </view>
          </view>
          <view
            class="item acea-row row-between-wrapper"
            v-if="orderInfoVo.couponFee > 0"
          >
            <view>优惠券抵扣：</view>
            <view class="money">-￥{{ orderInfoVo.couponFee }}</view>
          </view>
          <!-- <view
				  class="item acea-row row-between-wrapper"
				  v-if="orderInfoVo.deductionPrice > 0"
				>
				  <view>积分抵扣：</view>
				  <view class="money">-￥{{ orderInfoVo.deductionPrice }}</view>
				</view> -->
          <view
            class="item acea-row row-between-wrapper"
            v-if="
              orderInfoVo?.proTotalWeight && orderInfoVo?.proTotalWeight > 0
            "
          >
            <view>总克重：</view>
            <view class="money">{{ orderInfoVo.proTotalWeight }} g</view>
          </view>

          <view
            class="item acea-row row-between-wrapper"
            v-if="orderInfoVo.mallType === 0"
          >
            <view>工费：</view>
            <view class="money">￥{{ orderInfoVo.totalLaborCost }}</view>
          </view>

          <view
            class="item acea-row row-between-wrapper"
            v-if="
              orderInfoVo.mallType === 0 && orderInfoVo?.totalAdditionalAmount
            "
          >
            <view>附加费：</view>
            <view class="money">￥{{ orderInfoVo.totalAdditionalAmount }}</view>
          </view>

          <view
            class="item acea-row row-between-wrapper"
            v-if="orderInfoVo.freightFee > 0"
          >
            <view>运费：</view>
            <view class="money">￥{{ orderInfoVo.freightFee }}</view>
          </view>
          <view
            v-if="
              orderInfoVo.mallType === 0 &&
              Number(orderInfoVo.vipLevelDis) !== 0
            "
            class="item acea-row row-between-wrapper"
          >
            <view>会员折扣：</view>
            <view class="money">-￥{{ orderInfoVo.vipLevelDis }}</view>
          </view>
        </view>
        <!-- 是否使用余料支付 -->

        <view class="pay-container">
          <view class="item">
            <view class="zf-box" v-if="orderInfoVo.mallType == 0">
              <view>余料支付方式</view>
            </view>
            <view class="list" v-if="orderInfoVo.mallType == 0">
              <view class="payItem">
                <view class="name acea-row row-center-wrapper">
                  <image
                    class="pay-icon"
                    src="@/static/images/au_icon.png"
                  ></image>
                  余料支付
                </view>
                <view class="tip">
                  <text class="balance"
                    >可用余料:
                    {{ metalTypeMap[metalType].name }}
                    :{{ metalTypeMap[metalType].balance || 0 }}g</text
                  >
                </view>
              </view>
            </view>
            <view class="zf-box">
              <view>工费支付方式</view>
            </view>
            <view class="list">
              <view
                v-for="(item, index) in avaliablePayments"
                class="payItem"
                :class="active == index ? 'on' : ''"
                @tap="payItem(index)"
                :key="index"
              >
                <view class="name acea-row row-center-wrapper">
                  <image
                    class="pay-icon"
                    src="https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20260302114032_816_219.png"
                  ></image>
                  <image
                    class="pay-icon"
                    v-if="item.name == '余额支付'"
                    src="@/static/images/balance-icon.png"
                  ></image>
                  {{ item.name }}
                </view>
                <view class="tip">
                  <text class="balance">{{ item.title }}</text>
                  <image
                    class="select-icon"
                    v-show="active == index"
                    src="@/static/images/select-active@2x.png"
                    mode=""
                  ></image>
                  <image
                    class="select-icon"
                    v-show="active != index"
                    src="@/static/images/select@2x.png"
                    mode=""
                  >
                  </image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="kong"></view>
      <view class="footer acea-row row-between-wrapper">
        <view>
          合计:
          <text class="price" v-if="orderInfoVo.mallType === 0">
            ￥{{ orderInfoVo.payFee || 0 }}
          </text>
          <text class="price" v-else>
            {{ Number(orderInfoVo.proTotalFee) || 0 }}贝币
          </text>
        </view>
        <view class="settlement" style="z-index: 100" @tap="SubOrder">
          立即结算
        </view>
      </view>
    </view>
    <couponListWindow
      :coupon="coupon"
      @close="closeCouponPopup"
      :showPopup="showCouponPopup"
      :openType="openType"
      @ChangCoupons="ChangCoupons"
      :orderShow="orderShow"
    ></couponListWindow>
    <addressWindow
      ref="addressWindowRef"
      @changeTextareaStatus="changeTextareaStatus"
      :address="address"
      :pagesUrl="pagesUrl"
      @OnDefaultAddress="OnDefaultAddress"
      @OnChangeAddress="OnChangeAddress"
      @changeClose="changeClose"
    />

    <!-- 余额不足modal -->
    <up-modal
      :showCancelButton="true"
      :show="showModal"
      title="余额不足"
      confirmText="去充值"
      @cancel="showModal = false"
      @confirm="modalConfirm"
    ></up-modal>
    <WechatPayment ref="wechatPaymentRef" />
  </view>
</template>

<script setup>
// 导入UniApp页面加载生命周期函数
import { onLoad } from "@dcloudio/uni-app";
// 导入Vue3响应式API（ref创建响应式变量、computed计算属性等）
import { ref, computed, watch, onMounted, nextTick } from "vue";
// 导入应用状态管理（全局状态，如登录状态、用户信息等）
import { useAppStore } from "@/stores/app.js";
// 导入提示框工具（封装的toast提示函数）
import { useToast } from "@/hooks/useToast.js";
// 导入支付相关工具（封装的支付逻辑，如提交支付、验证支付渠道等）
import { usePayment } from "@/hooks/usePayment.js";
import WechatPayment from "@/components/payment/WechatPayment.vue";
// 导入订单相关API接口（优惠券、创建订单、计算价格等接口）
import {
  getUserAvailableCoupons, // 根据用户和使用位置查询可用优惠券接口
  orderCreate, // 创建订单接口
  postOrderComputed, // 计算订单价格接口
  wechatOrderPay, // 微信支付接口
  wechatQueryPayResult, // 微信支付结果查询接口
  loadPreOrderApi, // 加载预订单接口
  alipayPaymentResult, // 支付宝支付结果查询接口
} from "@/api/order.js";

// 导入用户地址详情API接口
import { getAddressDetail } from "@/api/user.js";
// 导入门店列表API接口
import { storeListApi } from "@/api/store.js";
// 导入工具类（封装的通用工具函数）
import util from "@/utils/util";
// 导入优惠券弹窗组件
import couponListWindow from "@/components/couponListWindow";
// 导入地址选择组件
import addressWindow from "@/components/addressWindow";
// 导入订单商品列表组件
import orderGoods from "@/components/orderGoods";
// 导入登录工具（未登录时跳转登录页）
import { toLogin } from "@/libs/login.js";
import useRealGoldPrice from "@/hooks/useRealGoldPrice";
const { realGoldprice, fetchGoldPrice } = useRealGoldPrice("RTJ_Au");

// 初始化应用状态管理实例（用于获取全局状态）
const appStore = useAppStore();
// 初始化提示框工具（获取toast方法）
const { Toast } = useToast();

// 初始化支付工具（仅支付宝使用）
const { submitPayment, paymentConfig, getAvailableChannels } = usePayment();

// 微信支付状态文案
const WX_PAY_STATUS = {
  SUCCESS: "支付成功",
  FAIL: "支付失败",
  CANCEL: "用户取消支付",
};

// 响应式变量：订单页面标识（用于优惠券组件，控制不显示tab切换）
const orderShow = ref("orderShow");
// 响应式变量：控制备注输入框是否显示
const textareaStatus = ref(true);

// 响应式变量：支付方式列表（包含支付宝、微信、余额等支付方式配置）
const payments = ref([
  // {
  //   name: "支付宝支付", // 支付方式名称
  //   icon: "icon-zhifubao", // 图标类名
  //   value: "alipay", // 支付标识值
  //   title: "支付宝快捷支付", // 支付说明
  //   payType: "alipay", // 支付类型
  //   payStatus: 0, // 支付状态（1-可用，0-不可用）
  //   payChannel: "appAliPay",
  // },
  {
    name: "微信支付",
    icon: "icon-wechat",
    value: "weixin",
    title: "微信快捷支付",
    payType: "weixin",
    payStatus: 0,
    payChannel: "routine",
  },
  // {
  //   name: "余额支付",
  //   icon: "icon-balance",
  //   value: "yue",
  //   title: "可用余额:",
  //   payType: "yue",
  //   payStatus: 1,
  //   payChannel: "weixinh5",
  // },
  // {
  //   name: "贝币支付",
  //   icon: "icon-balance",
  //   value: "yue",
  //   title: "可用贝币:",
  //   payType: "yue",
  //   payStatus: 0,
  //   payChannel: "weixinh5",
  // },
]);

// 计算属性：过滤出可用的支付方式（只保留payStatus为1的项）
const avaliablePayments = computed(() => {
  return payments.value.filter((item) => item.payStatus === 1);
});

// 响应式变量：当前选中的支付方式（默认余额支付）
const payType = ref("alipay");
// 响应式变量：优惠券打开方式（1表示"使用"场景）
const openType = ref(1);
// 响应式变量：当前选中的支付方式索引（用于UI高亮）
const active = ref(0);
// 响应式变量：优惠券相关配置（控制弹窗显示、列表数据等）
const coupon = ref({
  coupon: false, // 是否显示优惠券弹窗
  list: [], // 优惠券列表数据
  statusTile: "立即使用", // 按钮文字
});
// 响应式变量：地址相关配置（控制弹窗显示、选中地址ID等）
const address = ref({
  address: false,
  addressId: 0,
}); // 地址组件
const addressInfo = ref({}); // 地址信息
const addressId = ref(0); // 地址id
const couponId = ref(0); // 优惠券id
const userInfo = ref({}); // 用户信息
const mark = ref(""); // 备注信息
const couponTitle = ref("请选择"); // 优惠券
const useIntegral = ref(false); // 是否使用积分
const status = ref(0);
// 响应式变量：是否有地址（用于判断是否需要提示用户添加地址）
const is_address = ref(false);
// 响应式变量：支付页面刷新标识（修复支付页面隐藏后刷新问题）
const toPay = ref(false);
// 响应式变量：配送方式（0-快递配送，1-到店自提）
const shippingType = ref(0);
// 响应式变量：选中的门店信息（自提时使用）
const system_store = ref({});
const contacts = ref("");
// 响应式变量：联系人电话（自提时可能需要）
const contactsTel = ref("");
const storeList = ref([]);
// 响应式变量：是否支持门店自提（1-支持，0-不支持）
const store_self_mention = ref(0);
// 响应式变量：购物车商品信息（订单中的商品列表）
const cartInfo = ref([]);
const animated = ref(false);
// 响应式变量：订单总价
const totalPrice = ref(0);
const pagesUrl = ref("");
// const usableCoupon = ref({});
const payChannel = ref("");
// 响应式变量：订单信息详情（包含商品总价、运费、折扣等）
const orderInfoVo = ref({});
// 响应式变量：地址列表数据（用于地址选择组件）
const addressList = ref([]);
// 响应式变量：订单商品总数
const orderProNum = ref(0);
const preOrderNo = ref(""); // 预下单订单号
const addressWindowRef = ref(null); // 地址组件引用
const showCouponPopup = ref(false); // 显示优惠券弹窗
const showModal = ref(false);
const userSelectPayTypeItem = ref(null);
const wechatPaymentRef = ref(null);
// 监听 isLogin
watch(
  () => appStore.isLogin, // 监听的数据源：全局登录状态
  (newV) => {
    // newV是登录状态的新值（true/false）
    if (newV) {
      // 若已登录
      getloadPreOrder(); // 加载预订单信息
      this.getaddressInfo(); // 获取地址信息（this指向当前组件实例）
    }
  },
  {
    deep: true,
  } // 深度监听（确保复杂数据类型变化也能触发）
);
// 商品总价

// 页面加载时触发的生命周期函数
onLoad((options) => {
  // options是页面跳转时传递的参数
  console.log(appStore.userInfo); // 打印用户信息（调试用）

  // #ifdef APP
  // 支付宝沙箱模式（测试环境用，正式环境注释）
  // var EnvUtils = plus.android.importClass("com.alipay.sdk.app.EnvUtils");
  // EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
  // #endif

  // #ifdef H5
  payChannel.value = "weixinh5"; // H5环境支付渠道为微信H5支付
  // #endif

  // #ifdef APP
  payChannel.value = "appAliPay"; // APP环境支付渠道为支付宝APP支付
  // #endif

  // 从参数中获取预订单号（若没有则默认为0）
  preOrderNo.value = options.preOrderNo || 0;
  // 从参数中获取地址ID（若没有则默认为0）
  addressId.value = options.addressId || 0;
  // 从参数中获取是否有地址的标识
  is_address.value = options.is_address ? true : false;

  // 若已登录，则加载预订单信息；否则跳转到登录页
  if (appStore.isLogin) {
    getloadPreOrder(); // 加载预订单
  } else {
    toLogin(); // 跳登录
  }
});

// 组件挂载后触发的生命周期函数（DOM渲染完成后）
onMounted(() => {
  textareaStatus.value = true; // 默认显示备注输入框
  // 若已登录且非支付页面，则获取地址信息（注释掉的逻辑，预留）
  if (appStore.isLogin && !toPay.value) {
    //this.getaddressInfo();
  }

  // 监听全局事件"handClick"（用于接收门店选择结果）
  uni.$on("handClick", (res) => {
    if (res) {
      // 若有结果
      system_store.value = res.address; // 更新选中的门店信息
    }
    // 清除监听（避免重复触发）
    uni.$off("handClick");
  });
});
// 是否选择余料支付
const useGoldPay = (e) => {
  computedPrice();
};
const metalTypeMap = {
  1: {
    name: "黄金",
    balance: 0,
  },
  2: {
    name: "铂金",
    balance: 0,
  },
  3: {
    name: "白银",
    balance: 0,
  },
};
const metalType = ref(1);

// 加载预订单信息（核心函数：初始化订单数据）
const getloadPreOrder = () => {
  // 调用加载预订单API，传入预订单号
  loadPreOrderApi(preOrderNo.value)
    .then((res) => {
      metalTypeMap[1].balance = res.data.auBalance || 0;
      metalTypeMap[2].balance = res.data.ptBalance || 0;
      metalTypeMap[3].balance = res.data.agBalance || 0;
      metalType.value = res.data.metalType || 1;
      // 接口成功回调
      let orderInfoVoData = res.data.orderInfoVo; // 订单基本信息
      orderInfoVo.value = orderInfoVoData; // 保存订单信息
      cartInfo.value = orderInfoVoData.orderDetailList; // 保存商品列表

      orderProNum.value = orderInfoVoData.orderProNum; // 保存商品总数

      // 设置地址ID（优先用参数传入的，没有则用订单默认的）
      address.value.addressId = addressId.value
        ? addressId.value
        : orderInfoVoData.addressId;

      // 判断是否支持门店自提（根据接口返回和全局状态）
      store_self_mention.value =
        res.data.storeSelfMention == "true" && // 接口返回支持自提
        appStore.productTypeComputed === "normal" // 全局状态为普通商品
          ? true
          : false;

      // 根据商城类型设置是否使用积分（mallType=1时默认使用）
      useIntegral.value = orderInfoVo.value.mallType === 1;
      // 根据商城类型设置默认支付方式（mallType=1时用贝币支付）
      payType.value = "yue";

      // 动态更新支付方式状态（根据接口返回的配置）
      payments.value.forEach((item) => {
        if (orderInfoVo.value.mallType === 1) {
          // 贝币商城：只开放贝币支付
          item.title = "可用贝币: " + orderInfoVoData.userIntegral;
          item.payStatus = item.name === "贝币支付" ? 1 : 0;
        } else {
          // 普通商城：根据各支付方式状态分别处理
          if (item.name === "余额支付") {
            item.title = "可用余额: " + orderInfoVoData.userBalance;
            item.payStatus = parseInt(res.data.yuePayStatus) === 1 ? 1 : 0;
          } else if (item.payType === "weixin") {
            // 微信支付：状态由接口返回的payWeixinOpen决定
            item.payStatus = parseInt(res.data.payWeixinOpen) === 1 ? 1 : 0;
          } else if (item.name === "贝币支付") {
            item.payStatus = 0;
          }
        }
      });

      // 初始化默认选中第一个可用支付方式
      const firstAvailable = payments.value.find(
        (item) => item.payStatus === 1
      );
      if (firstAvailable) {
        const idx = avaliablePayments.value.indexOf(firstAvailable);
        active.value = idx >= 0 ? idx : 0;
        payType.value = firstAvailable.value;
        userSelectPayTypeItem.value = firstAvailable;
      }

      if (addressId.value) {
        computedPrice();
      }
      // 调用子页面方法授权后执行获取地址列表
      nextTick(() => {
        addressWindowRef.value.fetchAddressList();
      });
    })
    .catch((err) => {
      // 接口失败回调
      console.error(err); // 打印错误
      uni.navigateTo({
        url: "/pages/order_list/index",
      }); // 跳转到订单列表
      Toast({
        title: err,
      }); // 提示错误信息
    });
};
// 授权回调事件（用户授权后触发，预留）
const onLoadFun = () => {
  //this.getaddressInfo();  // 获取地址信息（注释掉的逻辑）
  // 调用子组件方法获取地址列表（注释掉的逻辑）
  // this.$scope.selectComponent('#address-window').getAddressList();
};

// 获取门店列表数据（自提时使用）
const getList = () => {
  // 从本地存储获取用户经纬度（用于附近门店查询）
  let longitude = uni.getStorageSync("user_longitude");
  let latitude = uni.getStorageSync("user_latitude");
  // 构造请求参数
  let data = {
    latitude: latitude, // 纬度
    longitude: longitude, // 经度
    page: 1, // 页码
    limit: 10, // 每页条数
  };
  // 调用门店列表API
  storeListApi(data)
    .then((res) => {
      // 成功回调
      let list = res.data.list || []; // 门店列表
      storeList.value = list; // 保存门店列表
      system_store.value = list[0]; // 默认选中第一个门店
    })
    .catch((err) => {
      // 失败回调
      Toast({
        title: err,
      }); // 提示错误
    });
};

// 关闭地址弹窗
const changeClose = () => {
  address.value.address = false; // 隐藏地址弹窗
};

// 跳转门店列表页面（自提时选择门店）
const showStoreList = () => {
  // 若有门店列表数据，则跳转到门店详情页
  if (storeList.value.length > 0) {
    uni.navigateTo({
      url: "/pages/users/goods_details_store/index",
    });
  }
};

// 计算订单价格
function computedPrice() {
  let shippingTypeValue = shippingType.value;
  postOrderComputed({
    mallType: orderInfoVo.value.mallType, // 商城类型
    addressId: address.value.addressId, // 地址ID
    useIntegral: useIntegral.value ? true : false, // 是否用积分
    couponId: couponId.value, // 优惠券ID
    shippingType: parseInt(shippingTypeValue) + 1, // 配送方式（后端要求+1）
    preOrderNo: preOrderNo.value, // 预订单号
    goldNum: appStore.userInfo.goldBalance, // 余料数量
  })
    .then((res) => {
      // 成功回调
      let data = res.data; // 计算后的价格数据
      // 更新订单费用信息
      orderInfoVo.value.couponFee = data.couponFee; // 优惠券抵扣
      orderInfoVo.value.userIntegral = data.surplusIntegral; // 剩余积分
      orderInfoVo.value.deductionPrice = data.deductionPrice; // 积分抵扣金额
      orderInfoVo.value.freightFee = data.freightFee; // 运费
      orderInfoVo.value.payFee = data.payFee; // 实付金额
      orderInfoVo.value.proTotalFee = data.proTotalFee; // 商品总价
      orderInfoVo.value.useIntegral = data.useIntegral; // 是否使用积分
      orderInfoVo.value.usedIntegral = data.usedIntegral; // 已用积分
      orderInfoVo.value.surplusIntegral = data.surplusIntegral; // 剩余积分
      orderInfoVo.value.vipLevelDis = data.vipLevelDis; // 会员折扣
    })
    .catch((err) => {
      // 失败回调
      Toast({ title: err }); // 提示错误
    });
}

// 切换配送方式（快递/自提）
const addressType = (e) => {
  let index = e; // 0-快递，1-自提
  shippingType.value = parseInt(index); // 更新配送方式
  // 若为普通商城类型，重新计算价格
  if (orderInfoVo.value.mallType === 0) {
    computedPrice();
  }

  // if (index == 1) getList();
};

// 配送方式选择器变化事件（预留，用于下拉选择器）
const bindPickerChange = (e) => {
  let value = e.detail.value; // 选择的索引
  shippingType.value = value; // 更新配送方式
  computedPrice(); // 重新计算价格
};

// 关闭优惠券弹窗
const closeCouponPopup = () => {
  showCouponPopup.value = false; // 隐藏优惠券弹窗
};

// 改变备注框状态（优惠券选择后调用）
const changeTextareaStatus = () => {
  // 重置所有优惠券的选中状态
  for (let i = 0, len = coupon.value.list.length; i < len; i++) {
    coupon.value.list[i].use_title = "";
    coupon.value.list[i].is_use = 0;
  }
  textareaStatus.value = true; // 显示备注框
  status.value = 0; // 重置状态
  coupon.value.list = coupon.value.list; // 触发响应式更新
};

// 选择优惠券后的处理事件
const ChangCoupons = (e) => {
  // this.usableCoupon = e
  // this.coupon.coupon = false
  let index = e,
    list = coupon.value.list,
    couponTitleValue = "请选择",
    couponIdValue = 0;
  console.log("list", list);
  for (let i = 0, len = list.length; i < len; i++) {
    if (i != index) {
      list[i].use_title = "";
      list[i].isUse = 0;
    }
  }

  // 切换当前优惠券的选中状态
  if (list[index].isUse) {
    // 若已选中，则取消选择
    list[index].use_title = "";
    list[index].isUse = 0;
  } else {
    // 若未选中，则选中
    list[index].use_title = "不使用"; // 显示"不使用"按钮
    list[index].isUse = 1; // 标记为选中
    couponTitleValue = list[index].name; // 更新标题为优惠券名称
    couponIdValue = list[index].id; // 更新选中的优惠券ID
  }

  // 更新优惠券相关状态
  couponTitle.value = couponTitleValue;
  couponId.value = couponIdValue;
  coupon.value.coupon = false;
  // coupon.value.list = list;
  computedPrice();
};

// 首次进入页面时展示默认地址
const OnDefaultAddress = (e) => {
  addressInfo.value = e; // 保存默认地址详情
  address.value.addressId = e.id; // 更新选中地址ID
};

// 选择地址后触发的事件
const OnChangeAddress = (e) => {
  console.log("OnChangeAddress", e);
  addressInfo.value = e;
  address.value.addressId = e.id;
  textareaStatus.value = true;
  //orderInfoVo.value.addressId = e;
  address.value.address = false;
  //this.getaddressInfo();
  if (orderInfoVo.value.mallType === 0) {
    computedPrice();
  }
};

// 备注输入事件（实时保存输入内容）
const bindHideKeyboard = (e) => {
  mark.value = e.detail.value; // 保存输入的备注信息
};

// 获取当前订单可用的优惠券列表
const getCouponList = () => {
  // 调用获取优惠券API，传入预订单号
  getUserAvailableCoupons({ scenePositionId: 1 }).then((res) => {
    coupon.value.list = res.data; // 保存优惠券列表
    openType.value = 1; // 设置打开方式为"使用"
  });
};

// 获取默认地址或指定地址详情
const getaddressInfo = () => {
  if (addressId.value) {
    // 若有指定地址ID，获取该地址详情
    getAddressDetail(addressId.value).then((res) => {
      if (res.data) {
        // 若地址存在
        res.data.isDefault = parseInt(res.data.isDefault); // 转换默认地址标识为数字
        addressInfo.value = res.data || {}; // 保存地址详情
        addressId.value = res.data.id || 0; // 更新地址ID
        address.value.addressId = res.data.id || 0; // 更新选中地址ID
      }
    });
  } else {
    // 若没有指定地址ID，获取默认地址
    getAddressDefault().then((res) => {
      // 注意：原代码中未导入getAddressDefault，可能是遗漏
      if (res.data) {
        // 若默认地址存在
        res.data.isDefault = parseInt(res.data.isDefault);
        addressInfo.value = res.data || {};
        addressId.value = res.data.id || 0;
        address.value.addressId = res.data.id || 0;
      }
    });
  }
};

// 选择支付方式
const payItem = (e) => {
  let activeValue = e;
  active.value = activeValue;
  animated.value = true;
  payType.value = avaliablePayments.value[activeValue].value;
  userSelectPayTypeItem.value = avaliablePayments.value[activeValue];
  computedPrice();
  setTimeout(() => {
    car();
  }, 500);
};

// 打开优惠券弹窗
const couponTap = () => {
  // coupon.value.coupon = true;
  showCouponPopup.value = true;
  if (!coupon.value.list.length) getCouponList();
  // getCouponList();
};

// 关闭支付方式选择动画
const car = () => {
  animated.value = false; // 关闭动画
};

// 打开地址选择弹窗
const onAddress = () => {
  textareaStatus.value = false; // 隐藏备注框
  address.value.address = true; // 显示地址弹窗
  // 设置地址页面跳转链接（携带预订单号）
  pagesUrl.value =
    "/pages/users/user_address_list/index?preOrderNo=" + preOrderNo.value;
};

// 联系人输入事件（保存联系人）
const realName = (e) => {
  contacts.value = e.detail.value;
};

// 联系人电话输入事件（保存电话）
const phone = (e) => {
  contactsTel.value = e.detail.value;
};

// 创建订单并发起支付
const payment = (data) => {
  // 调用创建订单API
  orderCreate(data)
    .then((res) => {
      appStore.SET_CART_REFRESH(true);
      // 订单创建成功
      // 调用支付流程，传入订单号和成功提示
      getOrderPay(res.data.orderNo, "支付成功");
    })
    .catch((err) => {
      // 订单创建失败
      console.error("payment error", err); // 打印错误
      uni.hideLoading(); // 隐藏加载中
      Toast({
        title: err,
      }); // 提示错误
    });
};

// 处理支付流程（根据支付类型发起支付并处理结果）
const getOrderPay = async (orderNo, message) => {
  // 支付结果页地址（携带订单号）
  const goPages = "/pages/order_pay_status/index?order_id=" + orderNo;
  try {
    // 调用微信支付配置API（获取支付参数）
    // const res = await wechatOrderPay({
    //   mallType: orderInfoVo.value.mallType,
    //   orderNo: orderNo,
    //   // payChannel: payChannel.value,
    //   payChannel: userSelectPayTypeItem.value.payChannel,
    //   payType: payType.value,
    //   scene: appStore.productTypeComputed === "normal" ? 0 : 1177, // 下单时小程序的场景值
    // });
    // console.log("res-------------", res.data);

    switch (payType.value) {
      case "alipay":
        // 发起支付宝支付
        const result = await submitPayment({
          type: res.data.payType, // 支付类型
          orderInfo: res.data.alipayRequest, // 支付宝支付参数
        });
        console.log("result", result); // 打印支付结果
        // 失败提示信息（默认"支付失败"）
        let failMsg = result?.message || paymentConfig.PAYMENT_STATUS.FAIL;

        // 根据支付结果处理
        if (result.status === paymentConfig.PAYMENT_STATUS.SUCCESS) {
          // 支付成功：查询后端支付状态
          const params = {
            orderNo: orderNo,
            payType: "alipay",
          };
          console.log("进入成功判断", params);
          const res = await alipayPaymentResult(params); // 调用查询接口
          console.log("alipayPaymentResult", res);
          // 提示成功并跳转到结果页
          return Toast(
            {
              title: paymentConfig.PAYMENT_STATUS.SUCCESS,
              icon: "success",
            },
            {
              tab: 4,
              url: goPages,
            }
          );
        } else if (result.status === paymentConfig.PAYMENT_STATUS.FAIL) {
          // 支付失败：提示并跳转
          return Toast(
            {
              title: paymentConfig.PAYMENT_STATUS.FAIL,
            },
            {
              tab: 5,
              url: `${goPages}&msg=${failMsg}`,
            }
          );
        } else if (result.status === paymentConfig.PAYMENT_STATUS.CANCEL) {
          // 支付取消：提示并跳转
          return Toast(
            {
              title: paymentConfig.PAYMENT_STATUS.CANCEL,
            },
            {
              tab: 5,
              url: `${goPages}&msg=${paymentConfig.PAYMENT_STATUS.CANCEL}`,
            }
          );
        }
        break;
      case "yue":
        // 余额支付：直接提示成功并跳转
        console.log("余额支付");
        return Toast(
          {
            title: message,
          },
          {
            tab: 5,
            url: goPages + "&status=1",
          }
        );
        break;
      case "weixin": {
        try {
          await wechatPaymentRef.value.createUniPay({
            amount: Number(orderInfoVo.value.payFee) * 100,
            description: `商品（￥${orderInfoVo.value.payFee}）`,
            openId: appStore.$userInfo.openId,
            orderNo: orderNo,
            orderPrefix: "SHOP", // 订单号前缀（与公共组件generateCustomId匹配）
            /**
             * 回调2：支付成功（核心逻辑）
             * 作用：通知后端标记用户为SVIP，刷新用户状态
             */
            onUniPaySuccess: async (payStatusRes) => {
              try {
                return Toast(
                  {
                    title: "支付成功",
                    icon: "success",
                  },
                  {
                    tab: 4,
                    url: goPages,
                  }
                );
              } catch (err) {
                console.error("支付失败：", err);
                uni.showToast({ title: "支付失败，请重试", icon: "none" });
              }
            },
            onUniPayCancel: () => {
              uni.showToast({ title: "用户取消支付", icon: "none" });
              return Toast(
                { title: WX_PAY_STATUS.CANCEL },
                {
                  tab: 5,
                  url: `${goPages}&msg=${WX_PAY_STATUS.CANCEL}`,
                }
              );
            },
            onUniPayFail: (err) => {
              uni.showToast({ title: "支付失败，请重试", icon: "none" });
              return Toast(
                { title: WX_PAY_STATUS.FAIL },
                {
                  tab: 5,
                  url: `${goPages}&msg=${errMsg || WX_PAY_STATUS.FAIL}`,
                }
              );
            },
          });
          uni.hideLoading();
        } catch (wxErr) {
          uni.hideLoading();
          const errMsg = wxErr?.errMsg || "";
          if (errMsg.includes("cancel") || errMsg.includes("取消")) {
            return Toast(
              { title: WX_PAY_STATUS.CANCEL },
              { tab: 5, url: `${goPages}&msg=${WX_PAY_STATUS.CANCEL}` }
            );
          }
          return Toast(
            { title: WX_PAY_STATUS.FAIL },
            { tab: 5, url: `${goPages}&msg=${errMsg || WX_PAY_STATUS.FAIL}` }
          );
        }
      }
    }
    uni.hideLoading(); // 隐藏加载中
  } catch (error) {
    // 支付过程出错
    console.error("getOrderPay error", error, typeof error);
    let msg = "";
    // 处理错误信息
    if (typeof error === "string") {
      msg = error;
    } else if (typeof error === "object" && error.message) {
      msg = error.message;
    } else {
      msg = "支付失败，请稍后再试";
    }
    uni.hideLoading(); // 隐藏加载中
    // 跳转到结果页并携带错误信息
    uni.navigateTo({
      url: `/pages/order_pay_status/index?order_id=${orderNo}&msg=${msg}`,
    });
    return Toast({
      title: msg,
    }); // 提示错误
  }
};

function modalConfirm() {
  showModal.value = false;
  const webviewPageUrl = `/pages/webview/index?path=/pages/users/vault/rechargeRmb`;

  uni.navigateTo({
    url: webviewPageUrl,
    fail: (err) => {
      console.error("跳转到webview页面失败：", err);
      uni.showToast({
        title: "跳转失败，请重试",
        icon: "none",
        duration: 1500,
      });
    },
  });
}

const SubOrder = async (e) => {
  console.log("SubOrder", payType.value);
  //   return;
  // if (payType.value == "alipay") {
  //   return Toast({ title: "暂不支持支付宝支付,请使用余额支付" });
  // }

  let data = {}; // 订单提交数据
  // 验证：必须选择支付方式
  if (!payType.value || !userSelectPayTypeItem.value)
    return Toast({
      title: "请选择支付方式",
    });
  // 验证：快递配送时必须选择地址
  if (!address.value.addressId && !shippingType.value) {
    return Toast({
      title: "请选择收货地址",
    });
  }

  // #ifdef APP
  try {
    const channels = await getAvailableChannels();
    if (payType.value === "alipay" && !channels.includes("alipay")) {
      return Toast({
        title: "设备不支持支付宝支付",
      });
    }
  } catch (error) {
    console.error("获取支付渠道失败", error);
    return Toast({
      title: "获取支付渠道失败",
    });
  }
  // #endif

  // 构造订单提交数据
  data = {
    mallType: orderInfoVo.value.mallType,
    realName: contacts.value,
    phone: contactsTel.value,
    addressId: address.value.addressId,
    couponId: couponId.value,
    payType: payType.value,
    useIntegral: useIntegral.value,
    preOrderNo: preOrderNo.value,
    mark: mark.value,
    // storeId: system_store.value.id || 0,
    shippingType: util.$h.Add(shippingType.value, 1),
    // payChannel: payChannel.value || "weixinh5",
    payChannel: userSelectPayTypeItem.value.payChannel,
  };

  console.log(" data.payType", data.payType);

  // 验证：贝币支付时余额是否充足
  if (
    orderInfoVo.value.mallType === 1 &&
    Number(orderInfoVo.value.proTotalFee) > orderInfoVo.value.userIntegral
  ) {
    return Toast({
      title: "贝币余额不足!",
    });
  }
  // 验证：余额支付时余额是否充足
  else if (
    data.payType == "yue" &&
    parseFloat(appStore.$userInfo.nowMoney) <
      parseFloat(orderInfoVo.value.payFee)
  ) {
    // 余额不足
    showModal.value = true;
    return;
  }
  uni.showLoading({
    title: "订单支付中",
  });
  // 发起支付
  payment(data);
};
</script>
<style>
page {
  background: #f9f7f0;
}
</style>
<style lang="scss" scoped>
.order-submission {
  .order-submission-box {
    padding: 16rpx;
  }
  .line {
    width: 100%;
    height: 3rpx;

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

  .goods {
    background-color: #fff;
    padding: 16rpx;
    border-radius: 16rpx;
    margin-top: 20rpx;
  }

  .allAddress {
    .nav {
      width: 100%;
      margin: 0 auto;

      .item {
        width: 334rpx;

        &.on {
          position: relative;
          width: 230rpx;

          &::before {
            position: absolute;
            bottom: 0;
            content: "快递配送";
            font-size: 28rpx;
            display: block;
            height: 0;
            width: 336rpx;
            border-width: 0 20rpx 80rpx 0;
            border-style: none solid solid;
            border-color: transparent transparent #fff;
            z-index: 2;
            border-radius: 14rpx 36rpx 0 0;
            text-align: center;
            line-height: 80rpx;
          }
        }

        &:nth-of-type(2).on::before {
          content: "到店自提";
          border-width: 0 0 80rpx 20rpx;
          border-radius: 36rpx 14rpx 0 0;
        }

        &.on2 {
          position: relative;

          &::before {
            position: absolute;
            bottom: 0;
            content: "到店自提";
            font-size: 28rpx;
            display: block;
            height: 0;
            width: 401rpx;
            border-width: 0 0 60rpx 60rpx;
            border-style: none solid solid;
            border-color: transparent transparent #f7c1bd;
            border-radius: 36rpx 14rpx 0 0;
            text-align: center;
            line-height: 60rpx;
          }
        }

        &:nth-of-type(1).on2::before {
          content: "快递配送";
          border-width: 0 60rpx 60rpx 0;
          border-radius: 14rpx 36rpx 0 0;
        }
      }
    }

    .address {
      width: 100%;
      margin: 0 auto;
      padding: 20rpx 20rpx 16rpx;
      background-color: #fff;
      box-sizing: border-box;

      .addressCon {
        width: 100%;
        font-size: 26rpx;
        color: #666;

        .selected-address {
          display: flex;
          justify-content: flex-start;
          align-items: start;

          .default {
            min-width: 64rpx;
            padding: 0 8rpx;
            height: 40rpx;
            line-height: 40rpx;
            text-align: center;
            color: #333;
            background-color: #f8c008;
            border-radius: 8rpx;
            font-size: 24rpx;
            margin-right: 8rpx;
            position: relative;
            top: 5rpx;
          }
        }

        .name {
          font-size: 28rpx;
          color: #666;
          margin-top: 16rpx;
          line-height: 44rpx;

          .phone {
            margin-left: 50rpx;
          }
        }

        .default {
          margin-right: 12rpx;
        }

        .setaddress {
          color: #333;
          font-size: 28rpx;
        }
      }

      .iconfont {
        font-size: 35rpx;
        color: #707070;
      }
    }

    .line {
      width: 100%;
      margin: 0 auto;
    }
  }

  .pay-container {
    .zf-box {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      line-height: 48rpx;
      margin: 16rpx 0;
    }

    .list {
      background-color: #fff;
      border-radius: 16rpx;

      .payItem {
        border-radius: 14rpx;
        width: 100%;
        font-size: 28rpx;
        color: #282828;
        height: 108rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16rpx;

        .name {
          text-align: center;
          justify-content: flex-start;

          .pay-icon {
            width: 60rpx;
            height: 60rpx;
            margin-right: 10rpx;
          }
        }

        .tip {
          font-size: 24rpx;
          color: #f8c008;
          display: flex;
          align-items: center;
          justify-content: end;

          .select-icon {
            width: 28rpx;
            height: 28rpx;
            margin-left: 20rpx;
          }
        }
      }
    }
  }

  .wrapper {
    background-color: #fff;
    margin-top: 15rpx;
    border-radius: 16rpx;
    .item {
      padding: 16rpx;

      font-size: 28rpx;
      color: #333333;
      font-weight: bold;

      // border-bottom: 1px solid #f5f5f5;
      .zf-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .swicth-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 2rpx solid #eee;
        height: 86rpx;
        font-size: 28rpx;
        padding: 0 0 0 12%;
        box-sizing: border-box;
        margin: 20rpx 0;
        border-radius: 14rpx;

        .lable-box {
          display: flex;
          align-items: center;

          .iconfont {
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 44rpx;
            background-color: #fe960f;
            color: #fff;
            font-size: 30rpx;
            margin-right: 15rpx;

            &.icon-touzijintiao1 {
              background-color: #f0cb88;
            }
          }

          .lable-icon {
            display: flex;

            flex-direction: column;
            justify-content: center;
          }

          .value {
            font-size: 20rpx;
            color: #fe960f;
          }
        }
      }

      .discount {
        font-size: 28rpx;
        color: #333;

        .iconfont {
          color: #515151;
          font-size: 30rpx;
          margin-left: 15rpx;
        }

        .num {
          font-size: 32rpx;
          margin-right: 20rpx;
        }

        .placeholder {
          color: #ccc;
        }
      }

      .shipping {
        font-size: 30rpx;
        color: #999;
        position: relative;
        padding-right: 58rpx;

        .iconfont {
          font-size: 35rpx;
          color: #707070;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 30rpx;
        }
      }

      textarea {
        font-size: 28rpx;
        background-color: #f9f7f0;
        width: auto !important;
        height: 264rpx;
        border-radius: 16rpx;
        margin-top: 16rpx;
        padding: 16rpx;
        box-sizing: border-box;
        font-weight: 400;
      }

      .placeholder {
        color: #999;
      }

      .list {
        margin-top: 35rpx;

        .payItem {
          border: 1px solid #eee;
          border-radius: 14rpx;
          height: 86rpx;
          width: 100%;
          box-sizing: border-box;
          margin-top: 20rpx;
          font-size: 28rpx;
          color: #282828;

          &.on {
            border-color: #fc5445;
            color: $theme-color;
          }

          .name {
            flex: 1;
            // width: 50%;
            text-align: center;
            border-right: 1px solid #eee;
            justify-content: flex-start;
            padding: 0 0 0 12%;

            .iconfont {
              width: 44rpx;
              height: 44rpx;
              border-radius: 50%;
              text-align: center;
              line-height: 44rpx;
              background-color: #fe960f;
              color: #fff;
              font-size: 30rpx;
              margin-right: 15rpx;

              &.icon-wechat {
                background-color: #41b035;
              }

              &.icon-zhifubao {
                background-color: #06b4fd;
              }
            }
          }

          .tip {
            width: 49%;
            text-align: center;
            font-size: 26rpx;
            color: #aaa;
          }
        }
      }
    }
  }

  .moneyList {
    margin-top: 16rpx;
    background-color: #fff;
    padding: 16rpx;
    border-radius: 16rpx;

    .item {
      font-size: 28rpx;
      color: #282828;

      & ~ .item {
        margin-top: 20rpx;
      }

      .money {
        color: #333;
        font-weight: bold;
      }
    }
  }
  .kong {
    height: calc(132rpx + constant(safe-area-inset-bottom));
    height: calc(132rpx + env(safe-area-inset-bottom));
  }
  .footer {
    display: flex;
    align-items: center;
    padding: 22rpx 32rpx calc(22rpx + constant(safe-area-inset-bottom));
    padding: 22rpx 32rpx calc(22rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    z-index: 100;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #f1f3f8;

    .price {
      font-size: 36rpx;
      line-height: 44rpx;
      font-weight: bold;
      color: #fd5f3c;
    }

    .settlement {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      width: 410rpx;
      height: 88rpx;
      background-color: #f8c008;
      border-radius: 16rpx;
      text-align: center;
      line-height: 88rpx;
      z-index: 100;
    }

    .transparent {
      opacity: 0;
    }
  }
}

.line2 {
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}

.textR {
  text-align: right;
}

.line-item {
  margin-top: 16rpx;

  .item-label {
    font-size: 28rpx;
    line-height: 44rpx;
    color: #333;
  }

  .discount {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;

    &.none {
      color: #999;
      font-weight: normal;
    }
    .rt-arr {
      width: 32rpx;
      height: 32rpx;
      margin-left: 8rpx;
    }
  }
}
</style>