xiongmao/pages/my-order/refund-details/refund-details.vue

<!-- 退款详情 -->
<template>
	<view class="wrap">

		<HeaderViewBar ref='HeaderViewBar' title='退款详情' :opacity="scrollTop / 20"
			backgroundColor='linear-gradient(90deg, #F58711, #E63D23)'
			style="position: fixed; top: 0; z-index: 999999999;" @tap="back">
		</HeaderViewBar>

		<view class="bg"></view>

		<view class="container-wrap">
			<view class="address-box">
			<view class="return-address-label">退货地址</view>
				<view class="address-box-module">
					<image src="../../../static/location-2.png" class="location-icon" mode="widthFix"></image>
					<view class="address-sidebar">
						<view class="address-column">
							<view class="return-address-msg">
								收货人:上海孩子王品牌旗舰店 0563-6988538
							</view>
							<view class="return-address-msg">
								安徽省宣城市广德县经济开发区建设北路安徽孩
								子王有限公司
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="refund-msg-box">
				<view class="refund-msg-title orange">等待商家确认收货</view> -->
			<!-- <view class="refund-msg-title orange">商家拒绝了你的申请</view> -->
			<!-- <view class="refund-msg-time">2021-11-1 20:40</view> -->
			<!-- <view class="refund-msg-msg">进行重新申请退款</view> -->
			<!-- 	<view class="refund-msg-msg">还剩2天23小时</view>
			</view> -->

			<!-- 退款关闭显示 -->
			<!-- <view class="refund-msg">
				因您撤销退款申请，退款关闭，交易将正常进行。请关注交易超时
			</view> -->

			<!-- <view class="refund-msg-list">
				<view class="refund-msg-label">因商家超时未处理，交易支持退款</view>
				<view class="refund-msg-item">
					<text class="red-color">退款总金额</text>
					<text class="red-color">￥16.20</text>
				</view>
				<view class="refund-msg-item">
					<text>未退回支付宝余额</text>
					<text>￥16.20</text>
				</view>
				<view class="refund-msg-item">
					<text>未退回积分</text>
					<text>￥16.20</text>
				</view>
			</view> -->

			<!-- 拒绝申请显示 -->
			<!-- <view class="refund-application-box">
				<view class="refund-application-title">你已成功发起退款申请,请耐心等待商家处理。</view>
				<view class="refund-application-list">
					<view class="refund-application-item">
						商家同意,请按照给出的退货地址退货,并请记录退货运单号。
					</view>
					<view class="refund-application-item">
						如商家拒绝,您可以修改申请后再次发起,商家将会重新处理
					</view>
					<view class="refund-application-item">
						如商家超时未处理，退货申请达成，请按照系统给出的退货地址退货
					</view>
				</view>
				<view class="refund-application-btnBox">
					<button type="default" class="border-red">再次申请</button>
				</view>
			</view> -->

			<!-- 等待商家确认收货 -->
			<!-- <view class="wait-box">
				<view class="wait-top">你的快递已寄出等待商家确认</view>
				<view class="wait-module">
					<view class="wait-module-label">快递信息</view>
					<view class="express-information-row">
						<text>物流公司</text>
						顺丰快递
					</view>
					<view class="express-information-row">
						<text>物流单号</text>
						YT4518713483541
					</view>
				</view>
				<view class="wait-module">
					<view class="wait-module-label">快递信息</view>
					<view class="wait-module-list">
						<view class="refund-application-item">
							未与商家协商一致，请勿使用到付或平邮，以免商家拒签货物。
						</view>
						<view class="refund-application-item">
							交易的钱款还在平台中间账户，确保您资金安全
						</view>
						<view class="refund-application-item">
							请填写真实物流信息，逾期未填写，退货申请将撒销
						</view>
					</view>
				</view>
			</view> -->
			
			<!-- 等待商家确认收货 -->
			<view class="wait-box">
				<view class="wait-top">商家已同意退货申请，请尽早发货</view>
				<view class="address-box-wrap">
					<image src="../../../static/location-2.png" class="location-icon" mode="widthFix"></image>
					<view class="address-sidebar">
						<view class="address-column">
							<view class="address-text">
								收货人:上海孩子王品牌旗舰店  0563-6988538
							</view>
							<view class="address-text">
								安徽省宣城市广德县经济开发区建设北路安徽孩
								子王有限公司
							</view>
						</view>
					</view>
				</view>
				<view class="wait-module" style="border: none;">
					<view class="wait-module-label">退货说明:</view>
					<view class="wait-module-list">
						<view class="refund-application-item">
							未与商家协商一致，请勿使用到付或平邮，以免商家拒签货物。
						</view>
						<view class="refund-application-item">
							交易的钱款还在平台中间账户，确保您资金安全
						</view>
						<view class="refund-application-item">
							请填写真实物流信息，逾期未填写，退货申请将撒销
						</view>
					</view>
				</view>
				<view class="return-btnBox">
					<button type="default" class="border-red">撤销申请</button>
					<button type="default" class="border-red">
						<text>我已寄出</text>
						<text>点击填写物流单号</text>
					</button>
				</view>
			</view>
			
			<view class="logistics-information-list">
				<view class="logistics-information-item">
					<text>物流公司</text>
					<view class="right-row">
						<picker class="picker" @change="bindPickerChange" :value="index" :range="array" range-key="name">
							<view :class="index >= 0 ? 'selected' : 'gray'">
								{{index >= 0 ? array[index].name :'请选择物流公司'}}
							</view>
						</picker>
						<image src="../../../static/back-icon2.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="logistics-information-item">
					<text>物流单号</text>
					<view class="right-row">
						<input type="text" value="" placeholder="请填写物流单号" placeholder-class="placeholder" />
						<image src="../../../static/back-icon2.png" mode="widthFix"></image>
					</view>
				</view>
			</view>	

			<view class="padding-box">

				<view class="item">
					<view class="item-top">
						<text>退款信息</text>
					</view>
					<view class="item-content">
						<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
						<view class="item-content-sidebar">
							<view class="product-item-row-between">
								<view class="product-item-name">
									冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
								</view>
								<view class="row-end">
									<text class="product-item-price">￥394.00</text>
									<text class="product-item-num">x <text>1</text></text>
								</view>
							</view>
							<view class="product-item-tag">
								<text>一盒15g*20袋</text>
							</view>
						</view>
					</view>
					<view class="msg-box">
						<view class="msg-row-between">
							<view class="msg-row-left">
								<text>退款原因</text>订单信息拍错
							</view>
						</view>
						<view class="msg-row-between">
							<view class="msg-row-left">
								<text>退款金额</text>￥980.00
							</view>
						</view>
						<view class="msg-row-between">
							<view class="msg-row-left">
								<text>申请件数</text>2019-11-29 09:47
							</view>
						</view>
						<view class="msg-row-between">
							<view class="msg-row-left">
								<text>申请时间</text>2019-11-29 09:47
							</view>
						</view>
						<view class="msg-row-between">
							<view class="msg-row-left">
								<text>退款编号</text>43898259513465
							</view>
						</view>
					</view>

				</view>

			</view>

		</view>

		<view class="footer">
			<button type="default" class="border-red">取消退款</button>
			<button type="default" class="border-red">申请退款</button>
			<!-- <button type="default" class="allWidth">提交</button> -->
		</view>

	</view>
</template>

<script>
	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
	export default {
		components: {
			HeaderViewBar,
		},
		data() {
			return {
				headerHeight: 0,
				scrollTop: 0,
				//选择快递 一级弹窗
				array: [{
					name: '韵达快递'
				}, {
					name: '顺丰快递'
				}, {
					name: '圆通快递'
				}, {
					name: '中通快递'
				}],
				index: -1,
			}
		},
		onShow() {
			setTimeout(() => {
				this.headerHeight = this.$refs['HeaderViewBar'].getHeaderStyle().headerHeight;
			}, 20);
		},
		methods: {
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			//选择快递 一级弹窗
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	@import "./refund-details.css";
</style>