优化

ghsApp/src/pagesOrder/refundDetail.vue

@@ -1,174 +1,244 @@
+<!--
+  售后详情页：展示退款申请信息、图片预览与审核操作
+  供供货商在 ghsApp 查看/处理客户售后单
+-->
 <template>
-	<view class="app-content">
-		<view class="flex refund-item">
-			<view class="refund-label">退款方式：</view>
-			<view class="flex list">
-				<view class="flex" style="font-size:28upx;">{{refundType==1?'退货并退款':'只退款'}}</view>
+	<view class="refund-page">
+		<view class="refund-card">
+			<view class="refund-row">
+				<view class="refund-label">退款方式</view>
+				<view class="refund-value">{{ refundType == 1 ? '退货并退款' : '只退款' }}</view>
 			</view>
-		</view>
-		<view class="refund-item-list" v-if="refundType==1">
-			<view class="refund-label">退货商品：</view>
-			<view>
-				<view class="list" v-for="(res,i) in product" :key="i">
-				<view class="flex list-title">
-					{{res.name}} ￥{{parseFloat(res.xhUnitPrice)}}x{{res.xhNum}}{{res.xhUnitName}}=￥{{parseFloat(res.xhPrice)}}
+
+			<view class="refund-section" v-if="refundType == 1">
+				<view class="refund-label refund-section__title">退货商品</view>
+				<view class="refund-product-list">
+					<view class="refund-product-item" v-for="(res, i) in product" :key="i">
+						<view class="refund-product-item__name">
+							{{ res.name }} ￥{{ parseFloat(res.xhUnitPrice) }}×{{ res.xhNum }}{{ res.xhUnitName }}=￥{{ parseFloat(res.xhPrice) }}
+						</view>
+						<view class="refund-product-item__option" v-if="res.refundOptionId != 0">
+							{{ res.refundOptionName }}
+						</view>
+					</view>
 				</view>
-				<view class="flex list-title" v-if="res.refundOptionId!=0" style="color:#ad760d;height:auto;padding-bottom:8upx;font-size:24upx;">
-					<text>{{ res.refundOptionName }}</text>
+			</view>
+
+			<view class="refund-row">
+				<view class="refund-label">申请时间</view>
+				<view class="refund-value">{{ info.addTime ? info.addTime.substr(5, 11) : '' }}</view>
+			</view>
+
+			<view class="refund-row">
+				<view class="refund-label">申请原因</view>
+				<view class="refund-value refund-value--inline">
+					<text>{{ causeText }}</text>
+					<text class="refund-link" @click="showChoice = true">修改</text>
 				</view>
 			</view>
+
+			<view class="refund-row" v-if="showChoice">
+				<view class="refund-label">选择原因</view>
+				<view class="refund-value refund-cause-btns">
+					<button class="admin-button-com mini-btn" @click="changeCause(0)">质量</button>
+					<button class="admin-button-com mini-btn refund-cause-btns__btn" @click="changeCause(1)">多开错开</button>
+					<button class="admin-button-com mini-btn refund-cause-btns__btn" @click="changeCause(2)">打包</button>
+					<button class="admin-button-com mini-btn refund-cause-btns__btn" @click="changeCause(3)">物流</button>
+				</view>
 			</view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label"><text></text>申请时间：</view>
-			<view class="list" style="font-size:28upx;">{{ info.addTime ? info.addTime.substr(5,11):'' }}</view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label"><text></text>申请原因：</view>
-			<view class="list" style="font-size:28upx;">
-				{{ info.cause==0?'质量问题' : info.cause==1 ?'多开错开': info.cause==2 ? '打包原因' : info.cause==3 ? '物流原因' : '其它'}}
-				<text style="margin-left:60upx;color:#3385FF;" @click="showChoice=true">修改</text>
+
+			<view class="refund-row">
+				<view class="refund-label">退款金额</view>
+				<view class="refund-value refund-value--inline">
+					<text class="refund-amount">¥{{ refundPrice }}</text>
+					<text class="refund-extra" v-if="Number(info.refundPackCost) > 0">（含退打包费{{ info.refundPackCost ? parseFloat(info.refundPackCost) : 0 }}元）</text>
+					<text class="refund-extra" v-if="Number(info.refundSendCost) > 0">（含退运费{{ info.refundSendCost ? parseFloat(info.refundSendCost) : 0 }}元）</text>
+					<text class="refund-link" @click="changeAmount()" v-if="info.status == 0">修改</text>
+				</view>
 			</view>
-		</view>
-		<view class="flex refund-item" v-if="showChoice==true">
-			<view class="refund-label"><text></text>选择原因：</view>
-			<view class="list">
-				<button class="admin-button-com mini-btn" @click="changeCause(0)">质量</button>
-				<button class="admin-button-com mini-btn" style="margin-left:12upx;" @click="changeCause(1)">多开错开</button>
-				<button class="admin-button-com mini-btn" style="margin-left:12upx;" @click="changeCause(2)">打包</button>
-				<button class="admin-button-com mini-btn" style="margin-left:12upx;" @click="changeCause(3)">物流</button>
+
+			<view class="refund-row">
+				<view class="refund-label">退款状态</view>
+				<view class="refund-value">
+					<text :class="statusClass">{{ statusText }}</text>
+				</view>
 			</view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label"><text></text>退款金额：</view>
-			<view class="list" style="font-size:28upx;">
-				¥{{refundPrice}}
-				<text style="margin-left:8upx;font-size:24upx;" v-if="Number(info.refundPackCost)>0">（含退打包费{{ info.refundPackCost?parseFloat(info.refundPackCost):0 }}元）</text>
-				<text style="margin-left:8upx;font-size:24upx;" v-if="Number(info.refundSendCost)>0">（含退运费{{ info.refundSendCost?parseFloat(info.refundSendCost):0 }}元）</text>
-				<text style="margin-left:80upx;color:#3385FF;" @click="changeAmount()" v-if="info.status == 0">修改</text>
+
+			<view class="refund-row">
+				<view class="refund-label">操作人员</view>
+				<view class="refund-value">{{ info.shopAdminName || '' }}</view>
 			</view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label"><text></text>退款状态：</view>
-			<view class="list" style="font-size:28upx;">{{ info.status==0?'待审核':info.status==1?'已通过':info.status==2?'已驳回':info.status==3 ? '已取消':'' }}</view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label"><text></text>操作人员：</view>
-			<view class="list" style="font-size:28upx;">{{ info.shopAdminName||'' }}</view>
-		</view>
-		<view class=" refund-item" v-if="!$util.isEmpty(info.rejectReason)">
-			<view class="refund-label">驳回原因：</view>
-			<view class="list" style="font-size:28upx;">{{info.rejectReason?info.rejectReason:''}}</view>
-		</view>
-		<view class=" refund-item" v-if="!$util.isEmpty(info.remark)">
-			<view class="refund-label">备注信息：</view>
-			<view class="list" style="font-size:28upx;">{{info.remark?info.remark:''}}</view>
-		</view>
-		<view class=" refund-item" v-if="from == 1">
-			<view class="refund-label">订单信息：</view>
-			<view class="list" style="color:#3385FF;font-weight:800;font-size:28upx;" @click="goToOrder(info)">点击查看</view>
-		</view>
-		<view class=" refund-item" v-if="info.smallImgList && !$util.isEmpty(info.smallImgList)">
-			<view class="refund-label">售后图片：</view>
-			<view class="list">
-				<block v-for="(itemImg, indexImg) in info.smallImgList" :key="indexImg">
-					<image :src="itemImg" style="width:100upx;height:100upx;float:left;margin-left:20upx;margin-bottom:10upx;" @click="showBig(indexImg)" mode="widthFix"></image>
-				</block>
+
+			<view class="refund-row refund-row--top" v-if="!$util.isEmpty(info.rejectReason)">
+				<view class="refund-label">驳回原因</view>
+				<view class="refund-value refund-value--multiline">{{ info.rejectReason || '' }}</view>
 			</view>
-		</view>
 
-		<view style="text-align:center;" v-if="info.status==0">
-			<button class="admin-button-com big blue" style="margin:30upx auto 10upx auto;width:50%;background-color: green;border:1upx solid green;color:white;" @click="pass(0)">通过</button>
-		</view>
-		<view style="text-align:center;" v-if="info.status==0">
-			<button class="admin-button-com big blue" style="margin:30upx auto 10upx auto;width:50%;background-color: red;border:1upx solid red;color:white;" @click="reject()">驳回</button>
-		</view>
-		<view style="text-align:center;" v-if="info.status==1">
-			<button class="admin-button-com big blue" style="margin:20upx auto 10upx auto;width:50%;" @click="goWaste()">去报损</button>
-		</view>
-		<view style="text-align:center;" v-if="info.status==1">
-			<button class="admin-button-com big blue" style="margin:20upx auto 10upx auto;width:50%;" @click="goWaste()">去减库存</button>
+			<view class="refund-row refund-row--top" v-if="!$util.isEmpty(info.remark)">
+				<view class="refund-label">备注信息</view>
+				<view class="refund-value refund-value--multiline">{{ info.remark || '' }}</view>
+			</view>
+
+			<view class="refund-row" v-if="from == 1">
+				<view class="refund-label">订单信息</view>
+				<view class="refund-value">
+					<text class="refund-link refund-link--bold" @click="goToOrder(info)">点击查看</text>
+				</view>
+			</view>
+
+			<view class="refund-section refund-section--images" v-if="info.smallImgList && !$util.isEmpty(info.smallImgList)">
+				<view class="refund-label refund-section__title">售后图片</view>
+				<view class="refund-img-grid">
+					<image
+						v-for="(itemImg, indexImg) in info.smallImgList"
+						:key="indexImg"
+						class="refund-img-item"
+						:src="itemImg"
+						mode="aspectFill"
+						@click="showBig(indexImg)"
+					></image>
+				</view>
+			</view>
 		</view>
-		<view style="text-align:center;">
-			<button class="admin-button-com big default" style="margin:30upx auto 10upx auto;width:50%;" @click="goBack()">返回</button>
+
+		<view class="refund-actions">
+			<button
+				v-if="info.status == 0"
+				class="admin-button-com big refund-actions__btn refund-actions__btn--pass"
+				@click="pass(0)"
+			>通过</button>
+			<button
+				v-if="info.status == 0"
+				class="admin-button-com big refund-actions__btn refund-actions__btn--reject"
+				@click="reject()"
+			>驳回</button>
+			<button
+				v-if="info.status == 1"
+				class="admin-button-com big blue refund-actions__btn"
+				@click="goWaste()"
+			>去报损</button>
+			<button
+				v-if="info.status == 1"
+				class="admin-button-com big blue refund-actions__btn"
+				@click="goWaste()"
+			>去减库存</button>
+			<button class="admin-button-com big default refund-actions__btn" @click="goBack()">返回</button>
 		</view>
 
 		<uni-popup ref="rejectRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
-			<view style="padding:30upx;">
-				<textarea v-model="rejectReason" style="border:1upx solid #cccccc;height:140upx;font-size:28upx;" placeholder="驳回原因..."></textarea>
-				<view style="text-align:center;">
-					<button class="admin-button-com big default" style="margin:30upx auto 10upx auto;width:45%;" @click="cancelReject()">取消</button>
-					<button class="admin-button-com big blue" style="margin:30upx auto 10upx 20upx;width:45%;" @click="confirmReject()">确认</button>
+			<view class="refund-popup">
+				<textarea v-model="rejectReason" class="refund-popup__textarea" placeholder="驳回原因..."></textarea>
+				<view class="refund-popup__btns">
+					<button class="admin-button-com big default refund-popup__btn" @click="cancelReject()">取消</button>
+					<button class="admin-button-com big blue refund-popup__btn refund-popup__btn--confirm" @click="confirmReject()">确认</button>
 				</view>
 			</view>
 		</uni-popup>
 
 		<uni-popup ref="modifyAmountRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
-			<view style="padding:60upx;">
-				<input type="digit" placeholder="请填写金额" v-model="refundAmount" @focus="refundAmount=''" placeholder-class="tui-placeholder" 
-				style="width:500upx;text-align:center;border:1upx solid #DDDDDD;height:90upx;line-height:90upx;font-size:26upx;"/>
-				<view style="text-align:center;">
-					<button class="admin-button-com big default" style="margin:30upx auto 10upx auto;width:45%;" @click="cancelChange()">取消</button>
-					<button class="admin-button-com big blue" style="margin:30upx auto 10upx 20upx;width:45%;" @click="confirmChange()">确认</button>
+			<view class="refund-popup refund-popup--amount">
+				<input
+					type="digit"
+					placeholder="请填写金额"
+					v-model="refundAmount"
+					@focus="refundAmount = ''"
+					placeholder-class="tui-placeholder"
+					class="refund-popup__input"
+				/>
+				<view class="refund-popup__btns">
+					<button class="admin-button-com big default refund-popup__btn" @click="cancelChange()">取消</button>
+					<button class="admin-button-com big blue refund-popup__btn refund-popup__btn--confirm" @click="confirmChange()">确认</button>
 				</view>
 			</view>
 		</uni-popup>
-
 	</view>
 </template>
 <script>
-import { refundDetail,passRefund,rejectRefund,modifyCause,modifyAmount } from "@/api/refund";
+import { refundDetail, passRefund, rejectRefund, modifyCause, modifyAmount } from '@/api/refund'
+
 export default {
 	data() {
 		return {
-			product:'',
-			refundPrice:0,
-			refundType:1,
-			remark:'',
-			info:[],
-			rejectReason:'',
-			from:0,
-			refundAmount:'',
-			showChoice:false
-		};
+			product: '',
+			refundPrice: 0,
+			refundType: 1,
+			remark: '',
+			info: [],
+			rejectReason: '',
+			from: 0,
+			refundAmount: '',
+			showChoice: false
+		}
+	},
+	computed: {
+		/** 申请原因文案 */
+		causeText() {
+			const causeMap = {
+				0: '质量问题',
+				1: '多开错开',
+				2: '打包原因',
+				3: '物流原因'
+			}
+			return causeMap[this.info.cause] || '其它'
+		},
+		/** 退款状态文案 */
+		statusText() {
+			const statusMap = {
+				0: '待审核',
+				1: '已通过',
+				2: '已驳回',
+				3: '已取消'
+			}
+			return statusMap[this.info.status] || ''
+		},
+		/** 退款状态样式 */
+		statusClass() {
+			const classMap = {
+				0: 'refund-status refund-status--pending',
+				1: 'refund-status refund-status--pass',
+				2: 'refund-status refund-status--reject',
+				3: 'refund-status refund-status--cancel'
+			}
+			return classMap[this.info.status] || 'refund-status'
+		}
 	},
 	onLoad() {
-		if(this.option.from){
+		if (this.option.from) {
 			this.from = this.option.from
 		}
 	},
-	onShow(){
+	onShow() {
 		this.init()
 	},
 	methods: {
-		cancelChange(){
+		cancelChange() {
 			this.refundAmount = ''
 			this.$refs.modifyAmountRef.close()
 		},
-		confirmChange(){
-			if(Number(this.refundAmount)<=0){
+		confirmChange() {
+			if (Number(this.refundAmount) <= 0) {
 				this.$msg('请填写金额')
 				return false
 			}
-			this.$util.confirmModal({content:'确认修改？'},() => {
+			this.$util.confirmModal({ content: '确认修改？' }, () => {
 				let that = this
 				this.$refs.modifyAmountRef.close()
-				modifyAmount({id:this.info.id,amount:this.refundAmount}).then(res=>{
-					if(res.code == 1){
+				modifyAmount({ id: this.info.id, amount: this.refundAmount }).then(res => {
+					if (res.code == 1) {
 						that.$msg(res.msg)
 						that.init()
 					}
 				})
 			})
 		},
-		changeAmount(){
+		changeAmount() {
 			this.$refs.modifyAmountRef.open('center')
 		},
-		changeCause(cause){
-			this.$util.confirmModal({content:'确认修改？'},() => {
+		changeCause(cause) {
+			this.$util.confirmModal({ content: '确认修改？' }, () => {
 				let that = this
-				modifyCause({id:this.info.id,cause:cause}).then(res=>{
-					if(res.code == 1){
+				modifyCause({ id: this.info.id, cause: cause }).then(res => {
+					if (res.code == 1) {
 						this.showChoice = false
 						this.info.cause = cause
 						that.$msg(res.msg)
@@ -176,22 +246,22 @@ export default {
 				})
 			})
 		},
-		goToOrder(info){
-			this.$util.pageTo({ url: '/pagesOrder/detail?id='+info.relateOrderId})
+		goToOrder(info) {
+			this.$util.pageTo({ url: '/pagesOrder/detail?id=' + info.relateOrderId })
 		},
-		cancelReject(){
+		cancelReject() {
 			this.$refs.rejectRef.close()
 		},
-		reject(){
+		reject() {
 			this.$refs.rejectRef.open('center')
 		},
-		confirmReject(){
+		confirmReject() {
 			let that = this
-			this.$util.confirmModal({content:'确认驳回？'},() => {
-				uni.showLoading({mask:true})
-				rejectRefund({id: this.option.id,rejectReason:this.rejectReason}).then(res=>{
+			this.$util.confirmModal({ content: '确认驳回？' }, () => {
+				uni.showLoading({ mask: true })
+				rejectRefund({ id: this.option.id, rejectReason: this.rejectReason }).then(res => {
 					uni.hideLoading()
-					if(res.code == 1){
+					if (res.code == 1) {
 						that.cancelReject()
 						that.$msg('操作成功')
 						that.init()
@@ -199,20 +269,20 @@ export default {
 				})
 			})
 		},
-		pass(confirm){
+		pass(confirm) {
 			let that = this
-			this.$util.confirmModal({content:'确认通过？'},() => {
-				uni.showLoading({mask:true})
-				passRefund({id: this.option.id,version:1,confirm:confirm}).then(res=>{
+			this.$util.confirmModal({ content: '确认通过？' }, () => {
+				uni.showLoading({ mask: true })
+				passRefund({ id: this.option.id, version: 1, confirm: confirm }).then(res => {
 					uni.hideLoading()
-					if(res.code == 1){
-						if(res.data.error && res.data.error == 'notFirstApply'){
-							that.$util.confirmModal({content:'本单第二次售后，确认要通过？'},() => {
+					if (res.code == 1) {
+						if (res.data.error && res.data.error == 'notFirstApply') {
+							that.$util.confirmModal({ content: '本单第二次售后，确认要通过？' }, () => {
 								that.pass(1)
 							})
-						}else if(res.data.error && res.data.error == 'hasUnClearOrder'){
+						} else if (res.data.error && res.data.error == 'hasUnClearOrder') {
 							that.needCancelRemind(res.data.clearId)
-						}else{
+						} else {
 							that.$msg('操作成功')
 							that.init()
 						}
@@ -220,119 +290,286 @@ export default {
 				})
 			})
 		},
-		needCancelRemind(id){
+		needCancelRemind(id) {
 			let that = this
-			that.$util.confirmModal({content:'有结账单取消了才能审核？',okText:'去取消',cancelText:'不操作'},() => {
-				that.$util.pageTo({url: '/admin/clear/customInfo?id='+id})
+			that.$util.confirmModal({ content: '有结账单取消了才能审核？', okText: '去取消', cancelText: '不操作' }, () => {
+				that.$util.pageTo({ url: '/admin/clear/customInfo?id=' + id })
+			})
+		},
+		/** 预览售后图片：传入完整列表与当前索引，支持左右滑动切换 */
+		showBig(index) {
+			const urls = this.getPreviewImageUrls()
+			if (!urls.length) {
+				return
+			}
+			uni.previewImage({
+				urls,
+				current: index,
+				loop: true
 			})
 		},
-		showBig(index){
-			if(this.info.bigImgList && !this.$util.isEmpty(this.info.bigImgList)){
-				if(this.info.bigImgList[index]){
-					uni.previewImage({ urls: [this.info.bigImgList[index]] })
-				}
+		/** 优先大图列表，无大图时用小图列表 */
+		getPreviewImageUrls() {
+			if (this.info.bigImgList && !this.$util.isEmpty(this.info.bigImgList)) {
+				return this.info.bigImgList
 			}
+			if (this.info.smallImgList && !this.$util.isEmpty(this.info.smallImgList)) {
+				return this.info.smallImgList
+			}
+			return []
 		},
-		goBack(){
+		goBack() {
 			uni.navigateBack()
 		},
-		goWaste(){
-			this.$util.pageTo({ url: '/pagesOrder/refundSuccess?id='+this.option.id})
+		goWaste() {
+			this.$util.pageTo({ url: '/pagesOrder/refundSuccess?id=' + this.option.id })
 		},
 		init() {
-			refundDetail({ id: this.option.id }).then(res=>{
-				this.product = res.data.itemList||[];
-				this.refundType = res.data.info.refundType||0;
+			refundDetail({ id: this.option.id }).then(res => {
+				this.product = res.data.itemList || []
+				this.refundType = res.data.info.refundType || 0
 				this.refundPrice = res.data.info.refundPrice ? parseFloat(res.data.info.refundPrice) : 0
-				this.remark = res.data.info.remark;
+				this.remark = res.data.info.remark
 				this.info = res.data.info
 			})
 		}
 	}
-};
+}
 </script>
 <style lang="scss" scoped>
-	.app-content{
-		height: calc(100vh - 30upx * 2);
-		padding: 30upx;
-		background: #FFFFFF;
-		.radioBtn{
-			width: 30upx;
-			height: 30upx;
-			margin-right: 10upx;
-			border: 1upx solid #ddd;
-			border-radius: 50%;
-			&.active{
-				position: relative;
-				border: 1upx solid #3385ff;
-				&:after{
-					content: '';
-					position: absolute;
-					width: 18upx;
-					height: 18upx;
-					background: #3385ff;
-					border-radius: 50%;
-				}
-			}
+.refund-page {
+	min-height: 100vh;
+	padding: 24upx 24upx 40upx;
+	background: #f5f7fa;
+	box-sizing: border-box;
+}
+
+.refund-card {
+	background: #ffffff;
+	border-radius: 16upx;
+	padding: 8upx 24upx 24upx;
+	box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.04);
+}
+
+.refund-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 22upx 0;
+	border-bottom: 1upx solid #f0f2f5;
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&--top {
+		align-items: flex-start;
+	}
+}
+
+.refund-label {
+	width: 168upx;
+	flex-shrink: 0;
+	font-size: 28upx;
+	color: #909399;
+	line-height: 42upx;
+}
+
+.refund-value {
+	flex: 1;
+	min-width: 0;
+	font-size: 28upx;
+	color: #303133;
+	line-height: 42upx;
+
+	&--inline {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+
+	&--multiline {
+		word-break: break-all;
+	}
+}
+
+.refund-amount {
+	font-weight: 700;
+	color: #fa3534;
+}
+
+.refund-extra {
+	font-size: 24upx;
+	color: #909399;
+	margin-left: 8upx;
+}
+
+.refund-link {
+	margin-left: 24upx;
+	font-size: 26upx;
+	color: #3385ff;
+
+	&--bold {
+		font-weight: 700;
+	}
+}
+
+.refund-status {
+	font-weight: 700;
+
+	&--pending {
+		color: #ff9900;
+	}
+
+	&--pass {
+		color: #19be6b;
+	}
+
+	&--reject {
+		color: #fa3534;
+	}
+
+	&--cancel {
+		color: #909399;
+	}
+}
+
+.refund-section {
+	padding: 22upx 0;
+	border-bottom: 1upx solid #f0f2f5;
+
+	&--images {
+		border-bottom: none;
+	}
+
+	&__title {
+		margin-bottom: 16upx;
+	}
+}
+
+.refund-product-list {
+	padding-left: 0;
+}
+
+.refund-product-item {
+	padding: 12upx 16upx;
+	margin-top: 12upx;
+	background: #f7f9fc;
+	border-radius: 12upx;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&__name {
+		font-size: 32upx;
+		color: #303133;
+		line-height: 40upx;
+	}
+
+	&__option {
+		margin-top: 8upx;
+		font-size: 32upx;
+		color: #ad760d;
+		line-height: 40upx;
+	}
+}
+
+.refund-cause-btns {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+
+	&__btn {
+		margin-left: 12upx;
+		margin-top: 8upx;
+	}
+}
+
+.refund-img-grid {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.refund-img-item {
+	width: 160upx;
+	height: 160upx;
+	border-radius: 12upx;
+	background: #f0f2f5;
+	margin-right: 16upx;
+	margin-top: 16upx;
+}
+
+.refund-actions {
+	margin-top: 32upx;
+	padding-bottom: 40upx;
+
+	&__btn {
+		width: 100%;
+		margin: 0;
+
+		& + & {
+			margin-top: 20upx;
 		}
-		.refund-item-list{
-			display: flex;
-			padding-bottom: 30upx;
-			border-bottom: 1upx solid #dddddd;
-			.refund-label{
-				font-size:28upx;
-				width: 200upx;
-				text{color: red;}
-			}
-			.list{
-				font-size:28upx;
-				margin-bottom: 10upx;
-				.list-title{
-					height: 60upx;
-					padding-bottom: 20upx;
-				}
-				.list-val{
-					input{
-						width: 150upx;
-						border: 1upx solid #ddd;
-					}
-					text{
-						padding: 0 30upx;
-					}
-				}
-			}
+
+		&--pass {
+			background-color: #19be6b;
+			border: 1upx solid #19be6b;
+			color: #ffffff;
 		}
-		.refund-item{
-			display: flex;
-			padding: 20upx 0;
-			.refund-label{
-				font-size:28upx;
-				width: 200upx;
-				text{
-					color: red;
-				}
-			}
-			input{
-				border: 1upx solid #ddd;
-			}
-			textarea{
-				width: calc(100% - 210upx);
-				border: 1upx solid #ddd;
-				height:150upx;
-			}
+
+		&--reject {
+			background-color: #fa3534;
+			border: 1upx solid #fa3534;
+			color: #ffffff;
 		}
-		.btn-box{
-			.btn{
-				width: 200upx;
-				height: 60upx;
-				border: 1upx solid #666666;
-				border-radius: 10upx;
-				&.active{
-					background: #3385ff;
-					color: #fff;
-					border: 1upx solid #3385ff;
-				}
-			}
+	}
+}
+
+.refund-popup {
+	padding: 30upx;
+
+	&--amount {
+		padding: 60upx 30upx 30upx;
+	}
+
+	&__textarea {
+		width: 100%;
+		box-sizing: border-box;
+		border: 1upx solid #dcdfe6;
+		border-radius: 12upx;
+		height: 160upx;
+		padding: 16upx;
+		font-size: 28upx;
+	}
+
+	&__input {
+		width: 500upx;
+		text-align: center;
+		border: 1upx solid #dddddd;
+		border-radius: 12upx;
+		height: 90upx;
+		line-height: 90upx;
+		font-size: 28upx;
+	}
+
+	&__btns {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		margin-top: 30upx;
+	}
+
+	&__btn {
+		width: 45%;
+		margin: 0;
+
+		&--confirm {
+			margin-left: 24upx;
 		}
 	}
-</style>
+}
+</style>