|
|
@@ -0,0 +1,164 @@
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .app-content{
|
|
|
+ height: calc(100vh - 30rpx * 2);
|
|
|
+ padding: 30rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .radioBtn{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 50%;
|
|
|
+ &.active{
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #3385ff;
|
|
|
+ &:after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 18rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ background: #3385ff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .refund-item-list{
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ border-bottom: 1px solid #dddddd;
|
|
|
+ .refund-label{
|
|
|
+ width: 200rpx;
|
|
|
+ text{color: red;}
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ .list-title{
|
|
|
+ height: 60rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .list-val{
|
|
|
+ input{
|
|
|
+ width: 150rpx;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .refund-item{
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ .refund-label{width: 200rpx;text{color: red;}}
|
|
|
+ input{
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ textarea{
|
|
|
+ width: calc(100% - 210rpx);
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+
|
|
|
+ .btn{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border: 1px solid #666666;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ &.active{
|
|
|
+ background: #3385ff;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <view class="app-content">
|
|
|
+ <view class="flex refund-item">
|
|
|
+ <view class="refund-label">退款方式：</view>
|
|
|
+ <view class="flex list">
|
|
|
+ <view class="flex" >{{refundType==1?'退货并退款':'仅退款'}}</view>
|
|
|
+ <!--<view class="flex" @tap="refundType=1" ><view class="flex-center radioBtn" :class="refundType==1?'active':''"></view>退货并退款</view>-->
|
|
|
+ <!--<view style="margin-left: 20rpx" class="flex" @tap="refundType=2"><view class="flex-center radioBtn" :class="refundType==1?'':'active'"></view>仅退款</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" >
|
|
|
+ <!--<view class="flex-center radioBtn" :class="res.isActive?'active':''"></view>-->
|
|
|
+ {{res.itemName}} {{`￥${res.itemPrice}`}}
|
|
|
+ </view>
|
|
|
+ <view class="flex list-val">
|
|
|
+ <input type="text" @focus="isMonitor = true"disabled v-model="res.bigNum"><text>扎</text>
|
|
|
+ <input type="text" @focus="isMonitor = true" disabled v-model="res.smallNum"><text>支</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex refund-item">
|
|
|
+ <view class="refund-label">总金额：</view>
|
|
|
+ <view class="list">{{totalMoney}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex refund-item">
|
|
|
+ <view class="refund-label"><text>*</text>退款金额：</view>
|
|
|
+ <input type="text" disabled v-model="refundMoney">
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class=" refund-item">
|
|
|
+ <view class="refund-label">备注：</view>
|
|
|
+ <textarea disabled v-model="remark" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { refundDetail } from "@/api/refund/index";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isMonitor:true,
|
|
|
+ product:'',
|
|
|
+ totalMoney:'',
|
|
|
+ refundMoney:null,
|
|
|
+ refundType:1,
|
|
|
+ remark:'',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async init() {
|
|
|
+ const res = await refundDetail({
|
|
|
+ orderSn: this.option.orderSn
|
|
|
+ });
|
|
|
+ this.product = res.data.itemInfo;
|
|
|
+ this.refundType = res.data.status;
|
|
|
+ this.refundMoney = res.data.refundPrice;
|
|
|
+ this.remark = res.data.remark;
|
|
|
+ this.product.map(ele=>{
|
|
|
+ this.totalMoney = (Number(this.totalMoney) + Number(ele.itemPrice)).toFixed(2)
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log(res)
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
jiangfeng