3-1新增

pages/my-order/apply-for-invoice/apply-for-invoice.vue

@@ -13,11 +13,11 @@
 				</view>
 			</view>
 		</view>
-
+ 
 		<view class="form">
 			<view class="row">
 				<view class="label">
-					发票类型
+					发票类型 
 				</view>
 				<input type="text" value="" placeholder="增值税电子普通发票" placeholder-class="placeholder" class="input" />
 			</view>

pages/my-order/refund-details/refund-details.css

@@ -29,7 +29,7 @@
 	padding: 0 24rpx;
 	box-sizing: border-box;
 	overflow: hidden;
-	margin-bottom: 45rpx;
+	margin-bottom: 38rpx;
 }
 
 .refund-msg-title {
@@ -246,7 +246,7 @@
 }
 
 .item {
-	width: calc(100% - 60rpx);
+	width: calc(100% - 48rpx);
 	margin: 0 auto;
 	display: flex;
 	flex-direction: column;
@@ -517,4 +517,412 @@
 
 .msg-row-right.orange {
 	color: #F2501A;
+}
+
+.refund-msg-list {
+	width: 100%;
+	margin: 0 auto;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.refund-msg-label {
+	color: #202020;
+	font-weight: bold;
+	font-size: 32rpx;
+	padding: 24rpx 0 0;
+}
+
+.refund-msg-item {
+	width: 100%;
+	height: 116rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 1px solid #E5E5E5;
+	box-sizing: border-box;
+	font-size: 30rpx;
+}
+
+.refund-msg-item:last-child {
+	border-bottom: none;
+}
+
+.red-color {
+	color: #F2501A;
+}
+
+.orange {
+	color: #F2501A;
+}
+
+.refund-msg-msg {
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.refund-application-box {
+	width: calc(100% - 48rpx);
+	margin: 20rpx auto 18rpx;
+	background-color: #fff;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	padding: 24rpx 0 0;
+}
+
+.refund-application-btnBox {
+	width: 100%;
+	height: 108rpx;
+	border-top: 1px solid #E8E9E8;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.refund-application-btnBox button {
+	min-width: 150rpx;
+	height: 72rpx;
+	line-height: 72rpx;
+	border-radius: 100rpx;
+	background-color: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	border: 1px solid #2D2D2D;
+	color: #2D2D2D;
+	font-size: 28rpx;
+	margin-right: 20rpx;
+}
+
+.refund-application-btnBox button:last-child {
+	margin-right: 0;
+}
+
+.refund-application-title {
+	width: 100%;
+	color: #212121;
+	font-size: 30rpx;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
+}
+
+.refund-application-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding-left: 50rpx;
+	box-sizing: border-box;
+	padding-bottom: 10rpx;
+}
+
+.refund-application-item {
+	width: 100%;
+	padding-left: 34rpx;
+	box-sizing: border-box;
+	position: relative;
+	color: #94989B;
+	font-size: 26rpx;
+	margin-bottom: 20rpx;
+}
+
+.refund-application-item::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translate(0, -50%);
+	width: 12rpx;
+	height: 12rpx;
+	border-radius: 50%;
+	background-color: #D6D7DB;
+}
+
+.wait-box {
+	width: calc(100% - 48rpx);
+	margin: 20rpx auto 18rpx;
+	background-color: #fff;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+.wait-top {
+	width: 100%;
+	padding: 28rpx 24rpx;
+	box-sizing: border-box;
+	color: #212121;
+	font-size: 28rpx;
+	border-bottom: 1px solid #E4E4E4;
+}
+
+.wait-module {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 30rpx 24rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid #E4E4E4;
+}
+
+.wait-module:last-child {
+	border-bottom: none;
+}
+
+.wait-module-label {
+	color: #212121;
+	font-size: 30rpx;
+	margin-bottom: 25rpx;
+}
+
+.express-information-row {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 0 0 0 26rpx;
+	box-sizing: border-box;
+	color: #000000;
+	font-size: 28rpx;
+	margin-bottom: 7rpx;
+}
+
+.express-information-row:last-child {
+	margin-bottom: 0;
+}
+
+.express-information-row text {
+	color: #94989B;
+	width: 25%;
+	display: block;
+}
+
+.wait-module-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding-left: 26rpx;
+	padding-bottom: 10rpx;
+	box-sizing: border-box;
+}
+
+.address-box {
+	width: calc(100% - 48rpx);
+	margin: 0 auto;
+	height: 210rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	border-radius: 16rpx;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+	margin-bottom: 28rpx;
+}
+
+.address-box-module {
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.location-icon {
+	width: 56rpx;
+	margin-right: 24rpx;
+}
+
+.address-sidebar {
+	flex: 1;
+	display: flex;
+	align-items: center;
+}
+
+.address-column {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.back-icon {
+	width: 16rpx;
+	margin-left: 20rpx;
+}
+
+.people-name {
+	font-size: 34rpx;
+	color: #303133;
+}
+
+.people-name text {
+	font-size: 30rpx;
+	color: #A7A7A7;
+	margin-left: 20rpx;
+}
+
+.address-msg {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	font-size: 30rpx;
+	color: #A7A7A7;
+	margin-top: 10rpx;
+}
+
+.edit-btn {
+	width: 168rpx;
+	height: 72rpx;
+	line-height: 72rpx;
+	border: 1px solid #9D9D9D;
+	background-color: #fff;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #A7A7A7;
+	font-size: 28rpx;
+	margin-left: 30rpx;
+}
+
+.return-address-msg {
+	color: #202020;
+	font-size: 26rpx;
+	margin-bottom: 5rpx;
+}
+
+.return-address-msg:last-child {
+	margin-bottom: 0;
+}
+
+.return-address-label {
+	width: 100%;
+	color: #202020;
+	font-size: 36rpx;
+	margin-bottom: 10rpx;
+}
+
+.logistics-information-list {
+	width: calc(100% - 48rpx);
+	display: flex;
+	flex-direction: column;
+	margin: 22rpx auto 0;
+	background-color: #fff;
+	border-radius: 16rpx;
+	overflow: hidden;
+
+}
+
+.logistics-information-item {
+	width: 100%;
+	height: 106rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #000000;
+	font-size: 32rpx;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid #F6F6F6;
+}
+
+.right-row {
+	flex: 1;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.right-row>input {
+	flex: 1;
+	font-size: 30rpx;
+	text-align: right;
+}
+
+.right-row image {
+	width: 15rpx;
+	margin-left: 30rpx;
+}
+
+.selected {
+	font-size: 30rpx;
+	color: #000000;
+}
+
+.gray {
+	font-size: 30rpx;
+	color: #94989B;
+}
+
+.placeholder {
+	color: #94989B;
+}
+
+.return-btnBox {
+	width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	padding: 0 24rpx 50rpx;
+	box-sizing: border-box;
+}
+
+.return-btnBox button {
+	min-width: 150rpx;
+	min-height: 72rpx;
+	line-height: inherit;
+	border-radius: 100rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	border: 1px solid #2D2D2D;
+	color: #2D2D2D;
+	font-size: 28rpx;
+	margin-right: 20rpx;
+	padding: 6rpx 20rpx;
+	box-sizing: border-box;
+}
+
+.return-btnBox button:last-child {
+	margin-right: 0;
+}
+
+.return-btnBox button text:first-child {
+	font-size: 28rpx;
+}
+
+.return-btnBox button text:last-child {
+	font-size: 20rpx;
+}
+
+.address-box-wrap {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 35rpx 55rpx 35rpx 24rpx;
+	border-bottom: 1px solid #E4E4E4;
+	box-sizing: border-box;
+}
+
+.address-text {
+	color: #94989B;
+	font-size: 26rpx;
+	margin-bottom: 7rpx;
+}
+
+.address-text:last-child {
+	margin-bottom: 0;
 }

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

@@ -1,125 +1,284 @@
-<!-- 退款详情 -->
-<template>
-	<view class="wrap">
-	
-		<HeaderViewBar ref='HeaderViewBar' title='退款详情' :opacity="scrollTop / 100"
-			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="refund-msg-box">
-				<view class="refund-msg-title">退款失败</view>
-				<view class="refund-msg-time">2021-11-1 20:40</view>
-			</view>
-			
-			<view class="refund-msg">
-				因您撤销退款申请，退款关闭，交易将正常进行。请关注交易超时
-			</view>
+<!-- 退款详情 -->
+<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="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 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="product-item-tag">
-								<text>一盒15g*20袋</text>
+							<view class="address-text">
+								安徽省宣城市广德县经济开发区建设北路安徽孩
+								子王有限公司
 							</view>
 						</view>
 					</view>
-					<view class="msg-box">
-						<view class="msg-row-between">
-							<view class="msg-row-left">
-								<text>退款原因</text>订单信息拍错
-							</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="msg-row-between">
-							<view class="msg-row-left">
-								<text>退款金额</text>￥980.00
-							</view>
+						<view class="refund-application-item">
+							交易的钱款还在平台中间账户，确保您资金安全
 						</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 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>
-	
-		<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,
+			
+			<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,
-			}
-		},
-		onShow() {
-			setTimeout(() => {
-				this.headerHeight = this.$refs['HeaderViewBar'].getHeaderStyle().headerHeight;
-			}, 20);
-		},
-		methods: {
-			//返回上一页
-			back() {
-				uni.navigateBack({
-					delta: 1,
-				})
-			},
-	
-		},
-		onPageScroll(e) {
-			this.scrollTop = e.scrollTop;
-		}
-	}
-</script>
-
+				//选择快递 一级弹窗
+				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>