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" v-if="item.payType=='alipay'"
										src="@/static/images/bbmall/zfb-icon.png"></image>
									<image class="pay-icon" v-if="item.payType=='weixin'"
										src="@/static/images/bbmall/wx-icon.png"></image> -->
									<image class="pay-icon" v-if="item.name=='余额支付'"
										src="@/static/images/balance-icon.png"></image>
									<!-- <image class="pay-icon" v-if="item.name=='贝币支付'"
										src="@/static/images/bbmall/sign_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>
	</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";
	// 导入订单相关API接口（优惠券、创建订单、计算价格等接口）
	import {
		getCouponsOrderPrice, // 获取可用优惠券接口
		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();

	// 响应式变量：订单页面标识（用于优惠券组件，控制不显示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: "weixinApp",
	  // },
	  {
	    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(payments.value[0]);

	// 监听 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 (item.name === "余额支付") {
						// 余额支付：显示可用余额，状态由接口返回的yuePayStatus决定
						item.title = "可用余额: " + orderInfoVoData.userBalance;
						item.payStatus = parseInt(res.data.yuePayStatus) === 1 ? 1 : 2;
					} else if (item.payType === "weixin") {
						// 微信支付：状态由接口返回的payWeixinOpen决定
						item.payStatus = parseInt(res.data.payWeixinOpen) === 1 ? 1 : 0;
					}

					// 贝币支付：仅在mallType=1时可用
					if (orderInfoVo.value.mallType === 1) {
						item.title = "可用贝币: " + orderInfoVoData.userIntegral;
						item.payStatus = item.name === "贝币支付" ? 1 : 0;
					} else {
						item.payStatus = item.name === "贝币支付" ? 0 : 1;
					}
				});

				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，传入预订单号
		getCouponsOrderPrice(preOrderNo.value).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 = payments.value[activeValue].value;
		userSelectPayTypeItem.value = payments.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) => {
				// 订单创建成功
				// 调用支付流程，传入订单号和成功提示
				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);
			let jsConfig = res.data.prepayWithRequestPaymentResponse;
			switch (res.data.payType) {
				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 "weixinApp":
					const wxPayResult = await submitPayment({
						type: res.data.payType,
						orderInfo: res.data.prepayWithRequestPaymentResponse,
					});
					let wxPayFailMsg =
						wxPayResult?.message || paymentConfig.PAYMENT_STATUS.FAIL;
					if (wxPayResult.status === paymentConfig.PAYMENT_STATUS.SUCCESS) {
						// 查询后端支付状态接口
						let params = {
							orderNo: orderNo,
							payType: "weixinApp",
						};
						let res = await alipayPaymentResult(params);
						return Toast({
							title: paymentConfig.PAYMENT_STATUS.SUCCESS,
							icon: "success"
						}, {
							tab: 4,
							url: goPages
						});
					} else if (wxPayResult.status === paymentConfig.PAYMENT_STATUS.FAIL) {
						return Toast({
							title: paymentConfig.PAYMENT_STATUS.FAIL
						}, {
							tab: 5,
							url: `${goPages}&msg=${wxPayFailMsg}`
						});
					} else if (wxPayResult.status === paymentConfig.PAYMENT_STATUS.CANCEL) {
						return Toast({
							title: paymentConfig.PAYMENT_STATUS.CANCEL
						}, {
							tab: 5,
							url: `${goPages}&msg=${paymentConfig.PAYMENT_STATUS.CANCEL}`,
						});
					}
					break;
			}
			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);
		// if (payType.value == "alipay") {
		//   return Toast({ title: "暂不支持支付宝支付,请使用余额支付" });
		// }

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

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

		// 构造订单提交数据
		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>