wxapp_shuibei/pages/order_details/index.vue

<template>
	<view>
		<view class="order-details">
			<view class="header" v-if="orderInfo.shippingType === 1">
				<view class="picTxt" v-if="orderInfo.status!=6">
					<image v-if="!orderInfo.paid" src="@/static/images/shop/daifukuan@2x.png" mode=""></image>
					<image v-else-if="orderInfo.status === 0 || orderInfo.status === 1" src="@/static/images/shop/daifahuo@2x.png" mode=""></image>
					<image v-else-if="orderInfo.status === 3" src="@/static/images/shop/yiwancheng@2x.png" mode=""></image>
					<view class="data">{{ curOrderStepTxt }}</view>
					<view class="state">{{ orderInfo.orderStatusMsg }}</view>
				</view>
				<view class="header-bot">
					<image src="@/static/images/shop/dingwei@2x.png" mode=""></image>
					<view class="header-bot-right">
						<view class="header-bot-address">{{ orderInfo.userAddress }}</view>
						<view class="header-bot-name">
							<text>{{ orderInfo.realName
            }}</text>
							<text>{{ orderInfo.userPhone }}</text>
						</view>
					</view>
				</view>
			</view>

			<view v-if="!isGoodsReturn">
				<view v-if="orderInfo.shippingType == 2 && orderInfo.paid" class="writeOff borRadius14">
					<view class="title">核销信息</view>
					<view class="grayBg">
						<view class="pictrue">
							<image :src="codeImg"></image>
						</view>
					</view>
					<view class="gear">
						<image src="@/static/images/writeOff.jpg"></image>
					</view>
					<view class="num">{{ orderInfo.verifyCode }}</view>
					<view class="rules" v-if="orderInfo.systemStore">
						<view class="item">
							<view class="rulesTitle acea-row row-middle">
								<text class="iconfont icon-shijian"></text>核销时间
							</view>
							<view class="info">
								每日：<text class="time">{{
                  orderInfo.systemStore.dayTime.replace(",", "-")
                }}</text>
							</view>
						</view>
						<view class="item">
							<view class="rulesTitle acea-row row-middle">
								<text class="iconfont icon-shuoming1"></text>使用说明
							</view>
							<view class="info">可将二维码出示给店员扫描或提供数字核销码</view>
						</view>
					</view>
				</view>
				<view v-if="orderInfo.shippingType === 1" class=""></view>
				<view v-else class="address" style="margin-top: 15rpx">
					<view class="name" @tap="makePhone">{{ orderInfo.systemStore ? orderInfo.systemStore.name : ""
            }}<text class="phone">{{
              orderInfo.systemStore ? orderInfo.systemStore.phone : ""
            }}</text><text class="iconfont icon-tonghua font-color"></text></view>
					<view>{{
            orderInfo.systemStore ? orderInfo.systemStore.detailedAddress : ""
          }}</view>
				</view>



			</view>

			<view class="wrapper">
				<orderGoods :mallType="orderInfo.mallType" :evaluate="evaluate" :productType="orderInfo.type"
					:orderId="order_id" :ids="id" :uniId="uniId" :cartInfo="cartInfo" 
					:sbMerchant="orderInfo.sbMerchant"></orderGoods>
				<view class="wrapper-return" v-if="
						    orderInfo.paid === true &&
						    orderInfo.type !== 1 &&
						    orderInfo.mallType !== 1 &&
						    type === 'normal'
						  ">
          <view v-if="orderInfo.status == 3">
            <view hover-class="none" @click="changeProduct"
                  class="cancel" style="margin-right: 10rpx;"  v-if="orderInfo.exchangeStatus === 0 && orderInfo.refundStatus === 0 && isGoodsReturn == false">
              申请换货
            </view>
            <navigator hover-class="none" :url="
						    '/pages/users/goods_change/index?orderId=' + orderInfo.orderId"
                       class="cancel" style="margin-right: 10rpx;"  v-if="orderInfo.exchangeStatus === 2 && orderInfo.refundStatus === 0 && isGoodsReturn == false">
              退货信息填写
            </navigator>
            <view hover-class="none"
                  class="cancel" style="margin-right: 10rpx;"  v-if="orderInfo.exchangeStatus === 4 && orderInfo.refundStatus === 0 && isGoodsReturn == false">
              换货中
            </view>
            <view hover-class="none"
                  class="cancel" style="margin-right: 10rpx;"  v-if="orderInfo.exchangeStatus === 1 && orderInfo.refundStatus === 0 && isGoodsReturn == false">
              换货申请中
            </view>
          </view>

					<navigator hover-class="none" :url="
						    '/pages/users/goods_return/index?orderId=' + orderInfo.orderId
						  " class="cancel" v-if="orderInfo.refundStatus === 0 && isGoodsReturn == false && orderInfo.exchangeStatus === 0">
						申请退款
					</navigator>
				</view>
				<view class="wrapper-list">
					<view class="item">
						<view class="">商品总价</view>
						<view class="txt">￥{{ orderInfo.proTotalPrice  }}</view>
					</view>
					<view class="item" v-if="orderInfo.payPostage > 0">
						<view class="">运费</view>
						<view class="txt">￥{{ orderInfo.payPostage }}</view>
					</view>
					<view class="item" v-if="orderInfo.payPostage > 0 && orderInfo?.additionalAmount">
						<view class="">附加费</view>
						<view class="txt">￥{{ orderInfo.additionalAmount }}</view>
					</view>
					<view class="item" v-if="orderInfo.mallType === 0">
						<view class="">会员折扣</view>
						<view class="red">-￥{{ orderInfo.vipLevelDis }}</view>
					</view>
					<view class="item">
						<view class="">实付款</view>
						<view class="txt">
							{{ orderInfo.mallType === 0 ? `￥${orderInfo.payPrice}` : `${ Number(orderInfo.proTotalPrice)}贝币` }}
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="wrapper-title">订单信息</view>
				<view class="item">
					<view>订单编号</view>
					<view class="conter acea-row row-middle row-right">{{ orderInfo.orderId }}
						<!-- #ifndef H5 -->
						<text class="copy" @tap="copy">复制</text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<text class="copy copy-data" @click="setOrderId">复制</text>
						<!-- #endif -->
					</view>
				</view>
				<view class="item">
					<view>下单时间</view>
					<view class="conter">{{ orderInfo.createTime || 0 }}</view>
				</view>
				<view class="item">
					<view>支付状态</view>
					<view class="conter" v-if="orderInfo.paid">已支付</view>
					<view class="conter" v-else>未支付</view>
				</view>
				<view class="item">
					<view>支付方式</view>
					<view class="conter" v-if="orderInfo.mallType === 0">{{
			      orderInfo.payTypeStr
			    }}</view>
					<view class="conter" v-else>贝币</view>
				</view>
				<view class="item" v-if="orderInfo.mark">
					<view>买家留言</view>
					<view class="conter">{{ orderInfo.mark }}</view>
				</view>
			</view>

			<view class="">
				<view class="nav refund" v-if="orderInfo.refundStatus > 0">
					<view class="title">
						<image src="@/static/images/shuoming.png" mode=""></image>
						{{ getRefundStatus() }}
					</view>
					<view class="con pad30">{{ getRefundReason() }}</view>
				</view>

				<!-- 退款订单详情 "-->
				<view v-if="isGoodsReturn" class="wrapper">
					<view class="wrapper-title">退款信息</view>
					<view class="item">
						<view>收货人</view>
						<view class="conter">{{ orderInfo.realName }}</view>
					</view>
					<view class="item">
						<view>联系电话</view>
						<view class="conter">{{ orderInfo.userPhone }}</view>
					</view>
					<view class="item">
						<view>收货地址</view>
						<view class="conter">{{ orderInfo.userAddress }}</view>
					</view>
					<view class="item">
						<view>退款快递单号</view>
						<view class="conter">{{ orderInfo.refundExpressNum }}</view>
					</view>
				</view>
				<view v-if="orderInfo.status > 0">
					<view class="wrapper" v-if="orderInfo.deliveryType == 'express'">
						<view class="wrapper-title">物流信息</view>
						<view class="item">
							<view>配送方式</view>
							<view class="conter">发货</view>
						</view>
						<view class="item">
							<view>快递公司</view>
							<view class="conter">{{ orderInfo.deliveryName || "" }}</view>
						</view>
						<view class="item">
							<view>快递号</view>
							<view class="conter">{{ orderInfo.deliveryId || "" }}</view>
						</view>
					</view>
					<view class="wrapper" v-else-if="orderInfo.deliveryType == 'send'">
						
						<view class="item acea-row row-between">
							<view>配送方式：</view>
							<view class="conter">送货</view>
						</view>
						<view class="item acea-row row-between">
							<view>配送人姓名：</view>
							<view class="conter">{{ orderInfo.deliveryName || "" }}</view>
						</view>
						<view class="item acea-row row-between">
							<view>联系电话：</view>
							<view class="conter acea-row row-middle row-right">{{ orderInfo.deliveryId || ""
                }}<text class="copy" @tap="goTel">拨打</text></view>
						</view>
					</view>
					<view class="wrapper borRadius14" v-else-if="orderInfo.deliveryType == 'fictitious'">
						<view class="item acea-row row-between">
							<view>虚拟发货：</view>
							<view class="conter">已发货，请注意查收</view>
						</view>
					</view>
				</view>


			</view>
		</view>
<!-- && orderInfo.status != 0 -->
		<template v-if="isGoodsReturn == false && orderInfo.status != 0 || orderInfo.status == 0 && !orderInfo.paid">
			<view class="kong"></view>
			<view class="footer" v-if="orderInfo.status!=6">
				<view class="footer-box">
					<view class="qs-btn" v-if="!orderInfo.paid" @click.stop="cancelOrder">
						<image src="@/static/images/shop/closeOrder@2x.png" mode=""></image>
						<view class="">取消订单</view>
					</view>
					<view class="buyPlay" v-if="!orderInfo.paid" @tap="pay_open(orderInfo.orderId)">
						<view class="buyPlay-left">
							<view class="buyPlay-left-top">
								<text>合计:</text>
								<text>{{ orderInfo.mallType === 0 ? `￥${orderInfo.payPrice}` : `${ Number(orderInfo.proTotalPrice)}贝币` }}</text>
							</view>
							<view class="buyPlay-left-bot" v-if="orderInfo.mallType === 0">共减￥{{ orderInfo.vipLevelDis }}</view>
						</view>
						<view class="buyPlay-btn">立即付款</view>
					</view>
					<view class="qs-btn" v-if="orderInfo.status == 3" @tap="delOrder">
						<image src="@/static/images/shop/delorder@2x.png" mode=""></image>
						<view class="">删除订单</view>
					</view>
					<navigator class="wuliu align-center" v-if="orderInfo.deliveryType == 'express' && orderInfo.status > 0"
						hover-class="none" :url="`/pages/users/goods_logistics/index?orderId=${orderInfo.orderId}`">查看物流
					</navigator>
					<view class="wuliu align-center buy" v-if="orderInfo.status == 3 && orderInfo.type !== 1" @click="goOrderConfirm">再次购买
					</view>
					<view class="align-center shouhuo" v-if="orderInfo.status == 1" @tap="confirmOrder" style="width: 100%;">确认收货</view>
					
					
				</view>

			</view>
		</template>


		<payment :payMode="payMode" :showPopup="showPopup" @payComplete="payComplete" @close="payClose"
			:order_id="pay_order_id" :totalPrice="totalPrice" :mallType="orderInfo.mallType"></payment>

<!--    申请换货弹窗-->
    <up-popup :show="changeProductShow" @close="changeProductShow = false" closeable>
      <view class="changeProductReasonPopup">
        <view class="title">理由</view>
        <up-textarea class="text-area" v-model="changeProductReason" placeholder="请输入换货理由" ></up-textarea>
        <view class="btnView">
          <button class="sure" @click="changeProductSure">确定</button>
          <button class="cancel" @click="changeProductShow = false">取消</button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from "vue";
	import {
		useAppStore
	} from "@/stores/app.js";
	import {
		onLoad,
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		getOrderDetail,
		orderTake,
		orderDel,
		orderCancel,
		qrcodeApi,
    applyExchange
	} from "@/api/order.js";
	import {
		openOrderRefundSubscribe
	} from "@/utils/SubscribeMessage.js";
	import payment from "@/components/payment";
	import orderGoods from "@/components/orderGoods";
	import {
		toLogin
	} from "@/libs/login.js";
	import {
		useToast
	} from "@/hooks/useToast";
	import {
		getPreOrder
	} from "@/libs/order";

	const appStore = useAppStore();
	const {
		Toast
	} = useToast();

	const codeImg = ref("");
	const order_id = ref("");
	const evaluate = ref(0);
	const cartInfo = ref([]);
	const orderInfo = reactive({
		systemStore: {},
		pstatus: {},
	});
	const system_store = ref({});
	const isGoodsReturn = ref(false);
	const status = ref({});
	const isClose = ref(false);
	const payMode = ref([
		// {
		// 	name: "支付宝支付",
		// 	icon: "icon-zhifubao",
		// 	value: "alipay",
		// 	title: "支付宝快捷支付",
		// 	payChannel: "appAliPay",
		// },
		// {
		// 	name: "微信支付",
		// 	icon: "icon-wechat",
		// 	value: "weixin",
		// 	title: "微信快捷支付",
		// 	payChannel: "weixinApp",
		// },
		{
			name: "余额支付",
			icon: "icon-balance",
			value: "yue",
			title: "可用余额:",
			payChannel: "yue",
			number: 0,
		},
	]);
	const showPopup = ref(false);
	const pay_order_id = ref("");
	const totalPrice = ref("0");
	const id = ref(0);
	const uniId = ref("");
	const type = ref("normal");

  const changeProductShow = ref(false);
  const changeProductReason = ref('');

	function payComplete() {
		showPopup.value = false;
		pay_order_id.value = "";
		getOrderInfo();
	}

	function openSubcribe(page) {
		uni.showLoading({
			title: "正在加载"
		});
		openOrderRefundSubscribe()
			.then(() => {
				uni.hideLoading();
				uni.navigateTo({
					url: page
				});
			})
			.catch(() => {
				uni.hideLoading();
			});
	}

	function makePhone() {
		uni.makePhoneCall({
			phoneNumber: system_store.value.phone,
		});
	}

	function payClose() {
		showPopup.value = false;
	}

	function pay_open() {
		showPopup.value = true;
		pay_order_id.value = orderInfo.orderId;
		totalPrice.value = orderInfo.payPrice;
	}

	function getRefundStatus() {
		const statusMap = {
			1: "商家审核中",
			2: "商家已退款",
			3: "商家退款中",
		};
		return orderInfo?.refundStatus ? statusMap[orderInfo.refundStatus] : "";
	}

	function getRefundReason() {
		if (orderInfo.refundStatus == 1) {
			return "您已成功发起退款申请，请耐心等待商家处理；退款前请与商家协商一致，有助于更好的处理售后问题";
		} else if (orderInfo.refundStatus == 2) {
			return "退款已成功受理，如商家已寄出商品请尽快退回；感谢您的支持";
		} else if (orderInfo?.refundReason) {
			return "拒绝原因：" + orderInfo?.refundReason;
		}
	}

	// 订单步骤配置
	const orderSteps = ref([{
			title: "待付款"
		},
		{
			title: "待发货"
		},
		{
			title: "待收货"
		},
		{
			title: "已完成"
		},
	]);

	// 当前的订单状态
	const curOrderStep = computed(() => {
		let step = 0;
		if (!orderInfo.paid) {
			step = 0; // 待付款
		} else if (orderInfo.status === 0) {
			step = 1; // 待发货
		} else if (orderInfo.status === 1) {
			step = 2; // 待收货
		} else if (orderInfo.status === 2 || orderInfo.status === 3) {
			step = 3; // 已完成
		}
		return step;
	});

	// 当前的订单状态
	const curOrderStepTxt = computed(() => {
		let step = '';
		if (!orderInfo.paid) {
			step = '待付款'; // 待付款
		} else if (orderInfo.status === 0) {
			step = '待发货'; // 待发货
		} else if (orderInfo.status === 1) {
			step = '待收货'; // 待收货
		} else if (orderInfo.status === 2 || orderInfo.status === 3) {
			step = '已完成'; // 已完成
		}
		return step;
	});

	function getOrderInfo() {
		uni.showLoading({
			title: "正在加载中"
		});
		getOrderDetail(order_id.value)
			.then((res) => {
				uni.hideLoading();
				Object.assign(orderInfo, res.data);
				evaluate.value = res.data.status == 2 ? 2 : 0;
				system_store.value = res.data.systemStore;
				id.value = res.data.id;
				cartInfo.value = res.data.orderInfoList;
				if (res.data.refundStatus != 0) isGoodsReturn.value = true;
				if (orderInfo.shippingType == 2 && orderInfo.paid)
					markCode(res.data.verifyCode);
				if (orderInfo.refundStatus > 0) {
					// uni.setNavigationBarColor({
					//   frontColor: "#ffffff",
					//   backgroundColor: "#666666",
					// });
				}
			})
			.catch((err) => {
				uni.hideLoading();
				Toast({
					title: err
				}, "/pages/users/order_list/index");
			});
	}

	function markCode(text) {
		qrcodeApi({
			height: "145",
			text: text,
			width: "145",
		}).then((res) => {
			codeImg.value = res.data.code;
		});
	}
	// #ifndef H5
	function copy() {
		uni.setClipboardData({
			data: orderInfo.orderId,
		});
	}
	// #endif
	function goTel() {
		uni.makePhoneCall({
			phoneNumber: orderInfo.deliveryId,
		});
	}

	function getOrderStatus() {
		let _orderInfo = orderInfo || {},
			_status = _orderInfo.pstatus || {
				type: 0
			},
			_statusObj = {};
		let typeVal = parseInt(_status.type),
			delivery_type = _orderInfo.deliveryType,
			seckill_id = _orderInfo.seckillId ? parseInt(_orderInfo.seckillId) : 0,
			bargain_id = _orderInfo.bargainId ? parseInt(_orderInfo.bargainId) : 0,
			combination_id = _orderInfo.combinationId ?
			parseInt(_orderInfo.combinationId) :
			0;
		_statusObj = {
			type: typeVal == 9 ? -9 : typeVal,
			class_status: 0,
		};
		if (typeVal == 1 && combination_id > 0) _statusObj.class_status = 1;
		if (typeVal == 2 && delivery_type == "express") _statusObj.class_status = 2;
		if (typeVal == 2) _statusObj.class_status = 3;
		if (typeVal == 4 || typeVal == 0) _statusObj.class_status = 4;
		if (
			!seckill_id &&
			!bargain_id &&
			!combination_id &&
			(typeVal == 3 || typeVal == 4)
		)
			_statusObj.class_status = 5;
		status.value = _statusObj;
	}

	function goJoinPink() {
		uni.navigateTo({
			url: "/pages/activity/goods_combination_status/index?id=" + orderInfo.pinkId,
		});
	}

	function goOrderConfirm() {
		const params = {
			mallType: orderInfo.mallType,
			preOrderType: "again",
			orderDetails: [{
				orderNo: order_id.value
			}],
		};
		getPreOrder(params);
	}

	function confirmOrder() {
		uni.showModal({
			title: "确认收货",
			content: "为保障权益，请收到货确认无误后，再确认收货",
			success: function(res) {
				if (res.confirm) {
					orderTake(id.value)
						.then(() => {
							Toast({
								title: "操作成功",
								icon: "success"
							}, function() {
								getOrderInfo();
							});
						})
						.catch((err) => {
							Toast({
								title: err
							});
						});
				}
			},
		});
	}

	function delOrder() {
		orderDel(id.value)
			.then(() => {
				Toast({
					title: "删除成功",
					icon: "success"
				}, {
					tab: 3,
					url: 1
				});
			})
			.catch((err) => {
				Toast({
					title: err
				});
			});
	}

	function cancelOrder() {
		uni.showModal({
			title: "提示",
			content: "确认取消该订单?",
			success: function(res) {
				if (res.confirm) {
					orderCancel(orderInfo.id)
						.then(() => {
							Toast({
								title: "取消成功"
							});
							uni.navigateTo({
								url: "/pages/order_list/index"
							});
						})
						.catch((err) => {
							Toast({
								title: err
							});
							getOrderInfo();
						});
				}
			},
		});
	}

	// 生命周期
	onLoad((options) => {
		type.value =
			options.type == undefined || options.type == null ? "normal" : options.type;
		if (!options.order_id && !options.uniId) {
			Toast({
				title: "缺少参数"
			}, {
				tab: 3,
				url: 1
			});
			return;
		}
		order_id.value = options.order_id;
	});
	onShow(() => {
		if (appStore.isLogin) {
			getOrderInfo();
			payMode.value[0].number = appStore.$userInfo.nowMoney;
			payMode.value = [...payMode.value];
		} else {
			toLogin();
		}
	});
	onHide(() => {
		isClose.value = true;
	});

	const setOrderId = () => {
		uni.setClipboardData({
			data: orderInfo.orderId,
			success: function() {
				Toast({
					title: "复制成功"
				});
			},
		});
	};
  // 申请换货
  const changeProduct = () => {
    changeProductShow.value = true;
    changeProductReason.value = '';
  }
  // 换货申请确认
  const changeProductSure = async () => {
    if(!changeProductReason.value){
      uni.showToast({title:"请输入换货理由",icon:'none'});
      return;
    }
    let obj = {
      text:changeProductReason.value,
      uni:orderInfo.orderId
    }
    const res = await applyExchange(obj);
    if(res.code == 200){
      changeProductShow.value = false;
      getOrderInfo();
      payMode.value[0].number = appStore.$userInfo.nowMoney;
      payMode.value = [...payMode.value];
    }
  }
</script>
<style>
	page {
		background: #F9F7F0;
	}
</style>
<style scoped lang="scss">
	.order-details {
		padding: 16rpx;

		.header {
			padding: 16rpx;
			border-radius: 16rpx;
			background: #FFFFFF;

			.picTxt {
				margin-bottom: 16rpx;
				display: flex;
				font-size: 28rpx;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.data {
					margin: 0 8rpx;
					color: #F8C008;
					font-weight: bold;
				}
			}

			.header-bot {
				display: flex;
				color: #333333;
				font-size: 28rpx;

				.header-bot-right {
					flex: 1;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}

				.header-bot-address {
					font-weight: bold;
				}

				.header-bot-name {
					text {
						&:first-child {
							margin-right: 32rpx;
						}
					}
				}
			}
		}

		.nav {
			background-color: #fff;
			font-size: 26rpx;
			color: #282828;
			padding: 27rpx 0;
			width: 100%;
			border-radius: 14rpx;
		}

		.address {
			font-size: 26rpx;
			color: #868686;
			background-color: #fff;
			margin-top: 15rpx;
			padding: 30rpx 24rpx;

			.name {
				font-size: 30rpx;
				color: #282828;
				margin-bottom: 15rpx;

				.phone {
					margin-left: 40rpx;
				}

				.iconfont {
					font-size: 34rpx;
					margin-left: 10rpx;
				}
			}
		}

		.line {
			width: 100%;
			height: 3rpx;

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

		.wrapper {
			background-color: #FFFFFF;
			margin-top: 16rpx;
			padding: 16rpx;
			border-radius: 16rpx;
			.wrapper-return {
				display: flex;
				margin-top: 16rpx;
				justify-content: flex-end;
				.cancel {
					color: #333333;
					width: 190rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					background: #F1F3F8;
					border-radius: 8rpx;
				}
			}
			.wrapper-title {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.item {
				font-size: 28rpx;
				color: #666666;
				display: flex;
				margin-top: 16rpx;
				justify-content: space-between;

				view {
					&:last-child {
						color: #333333;
					}

					&.red {
						color: #FD5F3C;
						font-weight: bold;
					}

					&.txt {
						font-weight: bold;
					}
				}

				.conter {
					flex: 1;
					text-align:right;
					margin-left: 16rpx;
					.copy {
						font-size: 28rpx;
						color: #F8C008;
						font-weight: bold;
						margin-left: 8rpx;
						padding-left: 8rpx;
						border-left: 2rpx solid #D8D8D8;
					}
				}
			}

			.actualPay {
				border-top: 1rpx solid #eee;
				margin-top: 30rpx;
				padding-top: 30rpx;

				.money {
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}


		.writeOff {
			background-color: #fff;
			margin-top: 15rpx;
			padding-bottom: 50rpx;

			.title {
				font-size: 30rpx;
				color: #282828;
				height: 87rpx;
				border-bottom: 1px solid #f0f0f0;
				padding: 0 24rpx;
				line-height: 87rpx;
			}

			.grayBg {
				background-color: #f2f5f7;
				width: 590rpx;
				height: 384rpx;
				border-radius: 20rpx 20rpx 0 0;
				margin: 50rpx auto 0 auto;
				padding-top: 55rpx;

				.pictrue {
					width: 290rpx;
					height: 290rpx;
					margin: 0 auto;

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

			.gear {
				width: 590rpx;
				height: 30rpx;
				margin: 0 auto;

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

			.num {
				background-color: #f0c34c;
				width: 590rpx;
				height: 84rpx;
				color: #282828;
				font-size: 48rpx;
				margin: 0 auto;
				border-radius: 0 0 20rpx 20rpx;
				text-align: center;
				padding-top: 4rpx;
			}

			.rules {
				margin: 46rpx 30rpx 0 30rpx;
				border-top: 1px solid #f0f0f0;
				padding-top: 10rpx;

				.item {
					margin-top: 20rpx;

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

						.iconfont {
							font-size: 30rpx;
							color: #333;
							margin-right: 8rpx;
							margin-top: 5rpx;
						}
					}

					.info {
						font-size: 28rpx;
						color: #999;
						margin-top: 7rpx;

						.time {
							margin-left: 20rpx;
						}
					}
				}
			}
		}

		.map {
			height: 86rpx;
			font-size: 30rpx;
			color: #282828;
			line-height: 86rpx;
			border-bottom: 1px solid #f0f0f0;
			margin-top: 15rpx;
			background-color: #fff;
			padding: 0 24rpx;

			.place {
				font-size: 26rpx;
				width: 176rpx;
				height: 50rpx;
				border-radius: 25rpx;
				line-height: 50rpx;
				text-align: center;

				.iconfont {
					font-size: 27rpx;
					height: 27rpx;
					line-height: 27rpx;
					margin: 2rpx 3rpx 0 0;
				}
			}
		}

		.refund {
			padding: 0 !important;
			margin-top: 15rpx;
			background-color: #fff;

			.title {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #333;
				height: 86rpx;
				border-bottom: 1px solid #f5f5f5;
				font-weight: 400;
				padding: 0 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.con {
				font-size: 25rpx;
				color: #666666;
				padding: 30rpx 24rpx;
			}
		}
	}

	.goodCall {
		color: $theme-color;
		text-align: center;
		width: 100%;
		height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		line-height: 86rpx;
		background: #fff;

		.icon-kefu {
			font-size: 36rpx;
			margin-right: 15rpx;
		}

		/* #ifdef MP */
		button {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 86rpx;
			font-size: 30rpx;
			color: $theme-color;
		}

		/* #endif */
	}

	.kong {
		height: calc(132rpx + constant(safe-area-inset-bottom));
		height: calc(132rpx + env(safe-area-inset-bottom));
	}

	.footer {

		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx #F1F3F8;

		.footer-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 32rpx;
			padding: 22rpx 32rpx;
		}

		.qs-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				color: #333333;
				font-size: 20rpx;
				line-height: 36rpx;
			}
		}

		.buyPlay {
			display: flex;
			align-items: center;

			.buyPlay-left {
				text-align: right;

				.buyPlay-left-top {

					text {
						color: #333333;
						font-size: 24rpx;
						font-weight: bold;

						&:last-child {
							color: #FD5F3C;
						}
					}
				}

				.buyPlay-left-bot {
					color: #FD5F3C;
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}

			.buyPlay-btn {
				color: #333333;
				width: 224rpx;
				height: 88rpx;
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				align-items: center;
				justify-content: center;
				background: #F8C008;
				border-radius: 16rpx;
				margin-left: 16rpx;
			}
		}
		.wuliu {
			width: 252rpx;
			
			background: rgba(248,192,8,0.1);
		}
		.shouhuo {
			width: 418rpx;
			
			background: #F8C008;
			
		}
		.align-center {
			height: 88rpx;
			border-radius: 16rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.buy {
			background: #F8C008;
		}
	}
  .changeProductReasonPopup{
    padding: 20rpx;
    box-sizing: border-box;
    .title{
      font-size: 28rpx;
      color: #333;
      text-align: center;
      padding: 10rpx 20rpx;
    }
    .text-area{
      border: 2rpx solid #dedede;
      border-radius: 20rpx;
      padding: 20rpx;
      margin-top: 20rpx;
    }
    .btnView{
      display: flex;
      width: 100%;
      gap: 20rpx;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      .sure{
        background: #F8C008;
        color: #fff;
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
      }
      .cancel{
        background-color: #F1F3F8;
        color: #333333;
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
      }
    }

  }
</style>