3-28新增

src/App.vue

@@ -7,7 +7,7 @@
 		name: 'app',
 		components: {},
 		mounted() {
-			this.$router.push('/index/product-details');
+			this.$router.push('/index/payment-order');
 		},
 	}
 </script>

src/router/index.js

@@ -96,6 +96,11 @@ const routes = [
 		path: '/index/product-details',
 		component: () => import('../views/index/product-details.vue'),
 	},
+	// 支付订单
+	{
+		path: '/index/payment-order',
+		component: () => import('../views/index/payment-order.vue'),
+	},
 	// =======【个人中心】=======
 	{
 		path: '/my',

src/views/index/payment-order.vue

@@ -0,0 +1,673 @@
+<!-- 支付订单 -->
+<template>
+	<div class="wrap">
+
+		<Header backgroundColor="#F2F2F2"></Header>
+
+		<Subheader title="购物车" :hide="false"></Subheader>
+
+		<div class="box">
+			<div class="recipient-information-wrap">
+				<div class="row-between">
+					<div class="row-between-leftsidebar">
+						<span class="font-1">收件人信息</span>
+						<button type="button" class="add-address-btn">
+							<span>+</span>
+							添加新地址
+						</button>
+					</div>
+					<span class="manage-all-addresses">管理全部地址</span>
+				</div>
+				<ul class="select-address-list">
+					<li class="active">
+						<div class="select-address-sidebar">
+							<p class="people-name">胡海峰</p>
+							<p class="addrss-box">
+								<span class="addrss-msg">中国安徽省宣城市宁国市黄河路764号环球中心501 </span>
+								<span class="people-phone-num">188****2323</span>
+							</p>
+						</div>
+						<div class="select-address-btn-box">
+							<button type="button">删除</button>
+							<button type="button">修改</button>
+						</div>
+					</li>
+					<li>
+						<p class="people-name">胡海峰</p>
+						<p class="addrss-box">
+							<span class="addrss-msg">中国天津天津市静海县文化路657号</span>
+							<span class="people-phone-num">188****2323</span>
+						</p>
+						<div class="select-address-btn-box">
+							<button type="button">删除</button>
+							<button type="button">修改</button>
+						</div>
+					</li>
+					<li>
+						<p class="people-name">胡海峰</p>
+						<p class="addrss-box">
+							<span class="addrss-msg">中国天津天津市静海县文化路657号</span>
+							<span class="people-phone-num">188****2323</span>
+						</p>
+						<div class="select-address-btn-box">
+							<button type="button">删除</button>
+							<button type="button">修改</button>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div class="product">
+				<p class="top-row">
+					<span>商品</span>
+					<span>规格</span>
+					<span>数量</span>
+					<span>金额总计</span>
+				</p>
+				<div class="center-module">
+					<div class="product-module">
+						<div class="product-msg-box">
+							<img src="../../assets/img-3.png" class="product-img">
+							<div class="product-msg-sidebar">
+								<p class="product-name">精品小童茸，云南香格里拉松茸，肉质紧实细腻精品小童茸，云南香格里拉松茸，肉质紧实细腻…</p>
+								<p class="product-msg-red">支持7天无理由退换货</p>
+							</div>
+						</div>
+						<div class="align-center-box">
+							<div class="item-msg-box">
+								<p class="tag-row">颜色：纤薄款</p>
+								<p class="tag-row">尺码：标准版(2G内存 ...</p>
+							</div>
+							<div class="item-msg-box">
+								<el-input-number v-model="num" @change="handleChange" :min="1" :max="9999" label="描述文字">
+								</el-input-number>
+							</div>
+							<div class="item-msg-box">
+								<span class="price">¥ 29990.00</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bottom-module">
+					<div class="bottom-row-between">
+						<label class="font-2">配送方式</label>
+						<p class="max-row">
+							<span>普通配送</span>
+						</p>
+						<p class="row">
+							快递 免邮
+							<img src="../../assets/back-icon.png" class="back-icon">
+						</p>
+					</div>
+					<div class="bottom-row-between">
+						<label class="font-2">订单优惠</label>
+						<p class="max-row">
+							<span class="red-color">￥15.00</span>
+						</p>
+					</div>
+				</div>
+				<div class="payment-module">
+					<p class="payment-label">支付方式</p>
+					<ul class="payment-list">
+						<li>
+							<img src="../../assets/type-2.png">微信支付
+						</li>
+						<li>
+							<img src="../../assets/type-4.png">支付宝支付
+						</li>
+					</ul>
+				</div>
+				<div class="box-end">
+					<div class="msg-box">
+						<div class="row-end">
+							实付款: <span class="real-payment">￥<span>219.70</span></span>
+						</div>
+						<p class="row-end">寄送至: 中国 安徽省 宣城市 宁国市黄河路764号环球中心501</p>
+						<p class="row-end">收货人：胡海峰 188****2323</p>
+					</div>
+				</div>
+				<div class="btn-box-end">
+					<button type="button">提交订单</button>
+				</div>
+			</div>
+		</div>
+
+		<Footer></Footer>
+
+	</div>
+</template>
+
+<script>
+	import Header from '../../components/header.vue';
+	import Subheader from '../../components/sub-header.vue';
+	import Footer from '../../components/footer.vue';
+	export default {
+		components: {
+			Header,
+			Footer,
+			Subheader
+		},
+		data() {
+			return {
+				num: 1, //计数器 
+			};
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.wrap {
+		width: 100%;
+		margin: 140px 0 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.box {
+		width: 1200px;
+		display: flex;
+		flex-direction: column;
+		margin: 20px 0;
+	}
+
+	.recipient-information-wrap {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: #F9F9F9;
+		border-radius: 8px;
+		border: 20px solid #fff;
+		margin-bottom: 20px;
+	}
+
+	.row-between {
+		width: 100%;
+		height: 69px;
+		padding: 0 20px;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.row-between-leftsidebar {
+		display: flex;
+		align-items: center;
+	}
+
+	.font-1 {
+		color: #111111;
+		font-size: 20px;
+		font-weight: bold;
+	}
+
+	.add-address-btn {
+		width: 122px;
+		height: 30px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #FFFFFF;
+		border-radius: 5px;
+		color: #111111;
+		font-size: 16px;
+		margin-left: 30px;
+	}
+
+	.add-address-btn>span {
+		color: #F2501A;
+		margin-right: 7px;
+	}
+
+	.manage-all-addresses {
+		color: #111111;
+		font-size: 16px;
+	}
+
+	.select-address-list {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		padding: 0 20px 20px 47px;
+		box-sizing: border-box;
+	}
+
+	.select-address-list>li {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+	}
+
+	.select-address-list>li:last-child {
+		margin-bottom: 0;
+	}
+
+	.select-address-sidebar {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
+
+	.people-name {
+		min-width: 93px;
+		padding: 0 10px;
+		box-sizing: border-box;
+		height: 44px;
+		line-height: 44px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #484848;
+		font-size: 16px;
+		position: relative;
+		border-radius: 5px;
+		overflow: hidden;
+	}
+
+	.addrss-box {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		margin-left: 16px;
+	}
+
+	.addrss-msg {
+		color: #484848;
+		font-size: 16px;
+	}
+
+	.people-phone-num {
+		color: #484848;
+		font-size: 16px;
+		margin-left: 20px;
+	}
+
+	.select-address-btn-box {
+		display: flex;
+		align-items: center;
+	}
+
+	.select-address-btn-box>button {
+		font-size: 16px;
+		color: #777777;
+		margin-right: 20px;
+	}
+
+	.select-address-btn-box>button:last-child {
+		margin-right: 0;
+		color: #F2501A;
+	}
+
+	.select-address-list>li.active .people-name {
+		border: 1px solid #E63D23;
+	}
+
+	.select-address-list>li.active .people-name::after {
+		content: "";
+		width: 25px;
+		height: 25px;
+		background: url(../../assets/icon-24.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
+
+	.select-address-list>li.active .addrss-msg {
+		color: #F2501A;
+	}
+
+	.select-address-list>li.active .people-phone-num {
+		color: #F2501A;
+	}
+
+	.product {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 20px;
+	}
+
+	.top-row {
+		width: 100%;
+		height: 100px;
+		background-color: #F9F9F9;
+		border-radius: 8px 8px 0 0;
+		display: flex;
+		align-items: center;
+		color: #111111;
+		font-size: 20px;
+		font-weight: bold;
+	}
+
+	.top-row>span:first-child {
+		width: 656px;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 0 20px;
+		box-sizing: border-box;
+	}
+
+	.top-row>span {
+		width: 174px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 20px;
+		box-sizing: border-box;
+	}
+
+	.center-module {
+		width: 100%;
+		background-color: #FFFFFF;
+		border-radius: 0 0 8px 8px;
+		display: flex;
+		flex-direction: column;
+		padding: 34px 0;
+	}
+
+	.product-module {
+		width: 100%;
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: 38px;
+	}
+
+	.product-module:last-child {
+		margin-bottom: 0;
+	}
+
+	.product-msg-box {
+		width: 656px;
+		display: flex;
+		align-items: flex-start;
+		padding: 0 20px;
+		box-sizing: border-box;
+	}
+
+	.product-img {
+		width: 151px;
+		height: 151px;
+		border-radius: 6px;
+		object-fit: cover;
+		margin-right: 20px;
+	}
+
+	.product-msg-sidebar {
+		flex: 1;
+		height: 151px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.product-name {
+		width: 62%;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+		color: #000000;
+		font-size: 16px;
+		margin-bottom: 7px;
+	}
+
+	.product-msg {
+		width: 100%;
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+		color: #666666;
+		font-size: 17px;
+	}
+
+	.product-msg-red {
+		width: 100%;
+		color: #F2501A;
+		font-size: 14px;
+		line-height: 14px;
+		margin-top: 7px;
+	}
+
+	.align-center-box {
+		display: flex;
+		align-items: center;
+	}
+
+	.item-msg-box {
+		width: 174px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 0 20px 0;
+		box-sizing: border-box;
+		color: #111111;
+		font-size: 16px;
+	}
+
+	.tag-row {
+		width: 100%;
+	}
+
+	>>>.el-input-number {
+		width: 125px !important;
+		line-height: 30px !important;
+	}
+
+	>>>.el-input::after {
+		content: "" !important;
+		width: 57px !important;
+		height: 30px !important;
+		position: absolute !important;
+		left: 50% !important;
+		top: 50% !important;
+		transform: translate(-50%, -50%) !important;
+		border-radius: 50px;
+		background-color: #EEEEEE !important;
+		z-index: 0 !important;
+	}
+
+	>>>.el-input-number__decrease,
+	>>>.el-input-number__increase {
+
+		top: 50% !important;
+		transform: translate(0, -50%) !important;
+		width: 30px !important;
+		height: 30px !important;
+		line-height: 30px !important;
+		border-radius: 50% !important;
+		border: none !important;
+		z-index: 99999999 !important;
+		color: #111111 !important;
+		background: #EEEEEE !important;
+	}
+
+	.el-input-number>>>.el-input__inner {
+		height: 30px !important;
+		line-height: 30px !important;
+		padding-left: 30px !important;
+		padding-right: 30px !important;
+		background-color: rgba(0, 0, 0, 0) !important;
+		z-index: 999999 !important;
+		color: #111111 !important;
+		font-size: 14px !important;
+		border: none !important;
+		position: relative !important;
+	}
+
+	>>>.el-input-number__decrease,
+	>>>.el-input-number__increase {
+		font-size: 10px !important;
+	}
+
+	.bottom-module {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: #FFFFFF;
+		padding: 32px 20px;
+		box-sizing: border-box;
+		border-radius: 0 0 8px 8px;
+		margin-bottom: 20px;
+	}
+
+	.bottom-row-between {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 25px;
+	}
+
+	.bottom-row-between:last-child {
+		margin-bottom: 0;
+	}
+
+	.font-2 {
+		width: 160px;
+		font-size: 18px;
+		color: #111111;
+	}
+
+	.max-row {
+		flex: 1;
+		font-size: 18px;
+		color: #484848;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		font-size: 20px;
+		color: #484848;
+	}
+
+	.back-icon {
+		width: 10px;
+		margin-left: 14px;
+	}
+
+	.red-color {
+		color: #F2501A;
+	}
+
+	.payment-module {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: #FFFFFF;
+		border-radius: 5px;
+		padding: 17px 23px 23px;
+		box-sizing: border-box;
+		margin-bottom: 7px;
+	}
+
+	.payment-label {
+		width: 100%;
+		color: #111111;
+		font-size: 24px;
+		margin-bottom: 30px;
+	}
+
+	.payment-list {
+		width: 100%;
+		display: flex;
+		align-items: center;
+	}
+
+	.payment-list>li {
+		width: 212px;
+		height: 55px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 8px;
+		margin-bottom: 8px;
+		color: #111111;
+		font-size: 16px;
+		border: 1px solid #DCDCDC;
+		box-sizing: border-box;
+	}
+
+	.payment-list>li>img {
+		width: 35px;
+		height: 35px;
+		margin: 14px;
+	}
+
+	.btn-box-end {
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		padding: 0 0 30px;
+	}
+
+	.btn-box-end>button {
+		width: 182px;
+		height: 49px;
+		line-height: 49px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #F2501A;
+		border-radius: 5px;
+		color: #FFFFFF;
+		font-size: 23px;
+	}
+
+	.box-end {
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.msg-box {
+		width: 284px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		background-color: #FFFFFF;
+		border: 1px solid #E63D23;
+		border-radius: 8px;
+		padding: 8px 20px;
+		box-sizing: border-box;
+	}
+
+	.row-end {
+		width: 100%;
+		text-align: right;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		color: #111111;
+		font-size: 14px;
+		margin-bottom: 5px;
+	}
+
+	.row-end:last-child {
+		margin-bottom: 0;
+	}
+
+	.real-payment {
+		color: #777777;
+		font-size: 23px;
+	}
+
+	.real-payment>span {
+		color: #F2501A;
+		font-size: 23px;
+		font-weight: bold;
+	}
+</style>

src/views/my/refund-application.vue

@@ -8,83 +8,181 @@
 
 		<div class="box">
 			<div class="box-leftsidebar">
-				<div class="row-start">
-					<label class="row-label">退款商品:</label>
-					<div class="row-sidebar">
-						<img src="../../assets/img-3.png" class="product-img">
-						<div class="product-sidebar">
-							<p class="product-name">精品小童茸，云南香格里拉松茸，肉质紧实细腻精品小童茸，云南香格里拉松茸，肉质紧实细腻…</p>
-							<p class="product-msg">颜色：纤薄款
-							<p class="product-msg">尺码：标准版(2G内存 ...</p>
+				<div class="return-reason" v-if="status==0">
+					<div class="row-start">
+						<label class="row-label">退款商品:</label>
+						<div class="row-sidebar">
+							<img src="../../assets/img-3.png" class="product-img">
+							<div class="product-sidebar">
+								<p class="product-name">精品小童茸，云南香格里拉松茸，肉质紧实细腻精品小童茸，云南香格里拉松茸，肉质紧实细腻…</p>
+								<p class="product-msg">颜色：纤薄款
+								<p class="product-msg">尺码：标准版(2G内存 ...</p>
+							</div>
 						</div>
 					</div>
-				</div>
-				<div class="row-start">
-					<label class="row-label">服务类型:<span class="red-color">*</span></label>
-					<div class="row-sidebar">
-						<div class="radio-box">
-							<label class="radio-item">
-								<input style="display: none" v-model="type" value="1" id="type1" type="radio">
-								<img :src="type=='1'? require('../../assets/circle2-active.png') : require('../../assets/circle-2.png')"
-									class="radio-circle">
-								仅退款
-							</label>
-							<label class="radio-item">
-								<input style="display: none" v-model="type" value="2" id="type2" type="radio">
-								<img :src="type=='2'? require('../../assets/circle2-active.png') : require('../../assets/circle-2.png')"
-									class="radio-circle">
-								退货退款
-							</label>
+					<div class="row-start">
+						<label class="row-label">服务类型:<span class="red-color">*</span></label>
+						<div class="row-sidebar">
+							<div class="radio-box">
+								<label class="radio-item">
+									<input style="display: none" v-model="type" value="1" id="type1" type="radio">
+									<img :src="type=='1'? require('../../assets/circle2-active.png') : require('../../assets/circle-2.png')"
+										class="radio-circle">
+									仅退款
+								</label>
+								<label class="radio-item">
+									<input style="display: none" v-model="type" value="2" id="type2" type="radio">
+									<img :src="type=='2'? require('../../assets/circle2-active.png') : require('../../assets/circle-2.png')"
+										class="radio-circle">
+									退货退款
+								</label>
+							</div>
 						</div>
 					</div>
-				</div>
-				<div class="row-start">
-					<label class="row-label">退款原因:<span class="red-color">*</span></label>
-					<div class="row-sidebar">
-						<div style="min-width: 200px;display: flex;align-items: center;">
-							<el-select v-model="value" placeholder="请选择">
-								<el-option v-for="item in options" :key="item.value" :label="item.label"
-									:value="item.value">
-								</el-option>
-							</el-select>
+					<div class="row-start">
+						<label class="row-label">退款原因:<span class="red-color">*</span></label>
+						<div class="row-sidebar">
+							<div style="min-width: 200px;display: flex;align-items: center;">
+								<el-select v-model="value" placeholder="请选择">
+									<el-option v-for="item in options" :key="item.value" :label="item.label"
+										:value="item.value">
+									</el-option>
+								</el-select>
+							</div>
 						</div>
 					</div>
-				</div>
-				<div class="row-start">
-					<label class="row-label">退款金额:<span class="red-color">*</span></label>
-					<div class="row-sidebar" style="flex-direction: column;align-items: flex-start;">
-						<div style="min-width: 200px;display: flex;align-items: center;">
-							<el-input v-model="input" placeholder="请输入金额"></el-input>
+					<div class="row-start">
+						<label class="row-label">退款金额:<span class="red-color">*</span></label>
+						<div class="row-sidebar" style="flex-direction: column;align-items: flex-start;">
+							<div style="min-width: 200px;display: flex;align-items: center;">
+								<el-input v-model="input" placeholder="请输入金额"></el-input>
+							</div>
+							<p class="font-1">最多￥25.9,含发货邮费￥0.00</p>
+						</div>
+					</div>
+					<div class="row-start">
+						<label class="row-label">退款说明:</label>
+						<div class="row-sidebar">
+							<div style="min-width: 263px;display: flex;align-items: center;">
+								<el-input maxlength="200" show-word-limit type="textarea" placeholder="请输入"
+									v-model="desc">
+								</el-input>
+							</div>
 						</div>
-						<p class="font-1">最多￥25.9,含发货邮费￥0.00</p>
+					</div>
+					<div class="row-start">
+						<label class="row-label">上传图片:</label>
+						<div class="row-sidebar">
+							<div class="upload-row">
+								<div class="upload-item" v-if="imageSrc.length!=0">
+									<img :src="imageSrc" class="img">
+									<img src="../../assets/close.png" class="close-icon">
+								</div>
+								<div class="add-box" v-if="imageSrc.length < 9">
+									<img src="../../assets/add-4.png" class="add-img">
+									<input type="file" v-on:change="test()" class="upload-btn" ref="fileInput">
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="btn-box">
+						<button type="button">提交</button>
 					</div>
 				</div>
-				<div class="row-start">
-					<label class="row-label">退款说明:</label>
-					<div class="row-sidebar">
-						<div style="min-width: 263px;display: flex;align-items: center;">
-							<el-input maxlength="200" show-word-limit type="textarea" placeholder="请输入" v-model="desc">
-							</el-input>
+				<div class="seller-processes-refund-application" v-if="status==1">
+					<div class="refund-application-top">
+						<div class="top-row">
+							<span class="top-row-msg">请等待商家处理</span>
+							<!-- 商家拒绝退款申请显示 -->
+							<!-- <span class="top-row-msg">商家拒绝了你的申请</span> -->
+							<!-- 买家退货显示 -->
+							<!-- <span class="top-row-msg">请退货并填写物流信息</span> -->
+							<!-- 退款成功显示 -->
+							<!-- <span class="top-row-msg red">退款成功</span> -->
+							<span class="countdown">还剩:1天23时42分</span>
+						</div>
+						<p class="refund-application-msg">您已成功发起退款，请耐心等待商家处理</p>
+						<!-- 商家拒绝退款申请显示 -->
+						<!-- <p class="refund-application-msg">进行重新退款</p> -->
+						<!-- 买家退货显示 -->
+						<!-- <p class="refund-application-msg">商家已同意退货申请,请尽早发货</p> -->
+						<!-- 退款成功显示 -->
+						<!-- <p class="refund-application-msg">将退还你的支付账户</p> -->
+					</div>
+					<div class="refund-application-center">
+						<!-- 商家拒绝退款申请显示 -->
+						<p class="font-1">进行重新退款</p>
+						<!-- 买家退货显示 -->
+						<!-- <p class="font-1">退货地址</p> -->
+						<!-- 退款成功显示 -->
+						<!-- <p class="font-1">退货地址</p> -->
+						<ul class="center-list">
+							<li>商家同意或者超时未处理申请，系统将会退款给你</li>
+							<li>如果商家拒绝，您可以修改退款申请后再次发起，商家会重新处理</li>
+						</ul>
+						<div class="center-btnBox">
+							<button type="button" class="bg-btn">修改申请</button>
+							<button type="button" class="border-btn">撤销申请</button>
+							<!-- 商家拒绝退款申请显示 -->
+							<!-- <button type="button" class="border-btn">再次申请</button> -->
+							<!-- 买家退货显示 -->
+							<!-- <button type="button" class="bg-btn">
+								我已寄出
+								<span>（点击填写物流单号）</span>
+							</button>
+							<button type="button" class="border-btn">撤销申请</button> -->
+						</div>
+					</div>
+					<div class="refund-application-bottom">
+						<p class="bottom-label">协商历史</p>
+						<div class="bottom-msgBox">
+							<p>退款类型: 仅退款</p>
+							<p>退款金额: ￥25.90</p>
+							<p>退款原因: 发票问题</p>
+							<p>退款描述: 发票问题</p>
 						</div>
 					</div>
 				</div>
-				<div class="row-start">
-					<label class="row-label">上传图片:</label>
-					<div class="row-sidebar">
-						<div class="upload-row">
-							<div class="upload-item" v-if="imageSrc.length!=0">
-								<img :src="imageSrc" class="img">
-								<img src="../../assets/close.png" class="close-icon">
+				<div class="write-refund-logistics-number" v-if="status==2">
+					<div class="write-top">
+						<div class="top-row">
+							<span class="top-row-msg">退货地址</span>
+						</div>
+						<div class="address-box">
+							<p>收货人:上海孩子王品牌旗舰店 0563-6988538</p>
+							<p>安徽省宣城市广德县经济开发区建设北路安徽孩子王有限公司</p>
+						</div>
+					</div>
+					<div class="write-center">
+						<div class="row-start">
+							<label class="row-label">物流公司:<span class="red-color">*</span></label>
+							<div class="row-sidebar" style="flex-direction: column;align-items: flex-start;">
+								<div style="min-width: 200px;display: flex;align-items: center;">
+									<el-input v-model="input" placeholder="请填写物流公司"></el-input>
+								</div>
 							</div>
-							<div class="add-box" v-if="imageSrc.length < 9">
-								<img src="../../assets/add-4.png" class="add-img">
-								<input type="file" v-on:change="test()" class="upload-btn" ref="fileInput">
+						</div>
+						<div class="row-start">
+							<label class="row-label">物流单号:<span class="red-color">*</span></label>
+							<div class="row-sidebar" style="flex-direction: column;align-items: flex-start;">
+								<div style="min-width: 200px;display: flex;align-items: center;">
+									<el-input v-model="input" placeholder="请填写物流单号"></el-input>
+								</div>
 							</div>
 						</div>
+						<div class="write-btnBox">
+							<button type="button" class="bg-btn">提交</button>
+						</div>
+					</div>
+					<div class="write-bottom">
+						<p class="bottom-label">协商历史</p>
+						<div class="bottom-msgBox">
+							<p>退款类型: 仅退款</p>
+							<p>退款金额: ￥25.90</p>
+							<p>退款原因: 发票问题</p>
+							<p>退款描述: 发票问题</p>
+						</div>
 					</div>
-				</div>
-				<div class="btn-box">
-					<button type="button">提交</button>
 				</div>
 			</div>
 			<div class="box-rightsidebar">
@@ -164,6 +262,7 @@
 				input: '',
 				desc: '',
 				imageSrc: '', // 图片地址
+				status: 1,
 			};
 		},
 		methods: {
@@ -200,8 +299,6 @@
 		flex: 1;
 		height: 809px;
 		overflow: auto;
-		padding: 27px 28px;
-		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
 		background-color: #FFFFFF;
@@ -209,11 +306,19 @@
 		margin-right: 19px;
 	}
 
+	.return-reason {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		padding: 27px 28px;
+		box-sizing: border-box;
+	}
+
 	.row-start {
 		width: 100%;
 		display: flex;
 		align-items: flex-start;
-		margin-bottom: 23px;
+		margin-bottom: 20px;
 	}
 
 	.row-label {
@@ -472,4 +577,211 @@
 		color: #111111;
 		font-size: 12px;
 	}
+
+	.seller-processes-refund-application {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.refund-application-top {
+		width: 100%;
+		height: 135px;
+		padding: 0 20px;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		border-bottom: 1px solid #F6F6F6;
+	}
+
+	.top-row {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		margin-bottom: 24px;
+	}
+
+	.top-row-msg {
+		color: #000000;
+		font-size: 19px;
+	}
+
+	.top-row-msg.red {
+		color: #F2501A;
+	}
+
+	.countdown {
+		color: #FF3C24;
+		font-size: 13px;
+		margin-left: 36px;
+	}
+
+	.refund-application-msg {
+		width: 100%;
+		color: #BBBBBB;
+		font-size: 15px;
+	}
+
+	.refund-application-center {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		padding: 22px 20px 56px;
+		box-sizing: border-box;
+		border-bottom: 1px solid #F6F6F6;
+	}
+
+	.center-list {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.center-list>li {
+		width: 100%;
+		color: #BBBBBB;
+		font-size: 15px;
+		padding-left: 14px;
+		box-sizing: border-box;
+		position: relative;
+	}
+
+	.center-list>li::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translate(0, -50%);
+		background-color: #BBBBBB;
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+	}
+
+	.center-btnBox {
+		width: 100%;
+		display: flex;
+		padding-left: 37px;
+		box-sizing: border-box;
+		align-items: center;
+		margin-top: 50px;
+	}
+
+	.center-btnBox>button,
+	.write-btnBox>button {
+		width: 214px;
+		height: 50px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: 15px;
+		border-radius: 8px;
+		margin-right: 19px;
+	}
+
+	.center-btnBox>button>span,
+	.write-btnBox>button>span {
+		color: #FFFFFF;
+		font-size: 8px;
+	}
+
+	.center-btnBox>button:last-child,
+	.write-btnBox>button:last-child {
+		margin-right: 0;
+	}
+
+	.center-btnBox>button.bg-btn,
+	.write-btnBox>button.bg-btn {
+		background-color: #F2501A;
+		color: #fff;
+	}
+
+	.center-btnBox>button.border-btn,
+	.write-btnBox>button.border-btn {
+		border: 1px solid #E63D23;
+		background-color: #FFFFFF;
+		color: #F2501A;
+	}
+
+	.refund-application-bottom,
+	.write-bottom {
+		width: 100%;
+		padding: 34px 22px;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.bottom-label {
+		width: 100%;
+		margin-bottom: 17px;
+		font-size: 15px;
+		color: #434849;
+	}
+
+	.bottom-msgBox {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		color: #434849;
+		font-size: 20px;
+		padding-left: 19px;
+		box-sizing: border-box;
+	}
+
+	.bottom-msgBox>p {
+		margin-bottom: 3px;
+	}
+
+	.font-1 {
+		width: 100%;
+		color: #434849;
+		font-size: 17px;
+		margin-bottom: 5px;
+	}
+
+	.write-top {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		padding: 24px 22px 39px;
+		border-bottom: 1px solid #F6F6F6;
+		box-sizing: border-box;
+	}
+
+	.write-center {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		padding: 15px 37px 63px;
+		box-sizing: border-box;
+		border-bottom: 1px solid #F6F6F6;
+	}
+
+	.write-btnBox {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		margin-top: 37px;
+	}
+
+	.address-box {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		color: #BBBBBB;
+		font-size: 16px;
+		padding-left: 26px;
+		box-sizing: border-box;
+	}
+
+	.address-box>p {
+		margin-bottom: 13px;
+	}
+
+	.address-box>p:last-child {
+		margin-bottom: 0;
+	}
 </style>