|
|
@@ -0,0 +1,252 @@
|
|
|
+<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" @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"><text>*</text>选择商品：</view>
|
|
|
+ <view>
|
|
|
+ <view class="list" v-for="(res,i) in product" :key="i">
|
|
|
+ <view class="flex list-title" @tap="selectProduct(i)">
|
|
|
+ <view class="flex-center radioBtn" :class="res.isActive?'active':''"></view>
|
|
|
+ {{res.name}} {{ `${res.bigNum}/${res.smallNum}` }} {{`￥${res.price}`}}
|
|
|
+ </view>
|
|
|
+ <view class="flex list-val">
|
|
|
+ <input type="text" @focus="isMonitor = true" @blur="inputFun" v-model="res.big"><text>扎</text>
|
|
|
+ <input type="text" @focus="isMonitor = true" @blur="inputFun" v-model="res.small"><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" @focus="isMonitor = false" v-model="refundMoney">
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class=" refund-item">
|
|
|
+ <view class="refund-label">备注：</view>
|
|
|
+ <textarea v-model="remark" />
|
|
|
+ </view>
|
|
|
+ <view class=" refund-item">
|
|
|
+ <view class="refund-label"></view>
|
|
|
+ <view>每个订单只能发起一次退款操作</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex-center btn-box">
|
|
|
+ <view class="flex-center btn">取消</view>
|
|
|
+ <view class="flex-center btn active" @tap="refundFun" style="margin-left: 50rpx">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import stepStatus from "./components/stepStatus";
|
|
|
+import TuiListCell from "@/components/plugin/list-cell";
|
|
|
+import { getDetail,debtPay,hasPay, freeShipping,refund } from "@/api/order/index";
|
|
|
+// import productMins from "@/mixins/product";
|
|
|
+import { ORDER_STATUS } from "@/utils/declare";
|
|
|
+// import BLE from "@/mixins/BLE";
|
|
|
+export default {
|
|
|
+ name: "orderDetail",
|
|
|
+ components: {
|
|
|
+ stepStatus,
|
|
|
+ TuiListCell
|
|
|
+ },
|
|
|
+ // mixins: [productMins,BLE],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ORDER_STATUS,
|
|
|
+ isMonitor:true,
|
|
|
+ product:'',
|
|
|
+ totalMoney:'',
|
|
|
+ refundMoney:null,
|
|
|
+ refundType:1,
|
|
|
+ remark:'',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ refundMoneyFun(){
|
|
|
+ if(!this.isMonitor){return;}
|
|
|
+ this.refundMoney = null;
|
|
|
+ if(!this.$util.isEmpty(this.product)){
|
|
|
+ this.product.forEach(ele=>{
|
|
|
+ // if(Number(ele.big)>Number(ele.bigNum)){
|
|
|
+ // uni.showToast({title:'不能大于商品数量',icon:'none'})
|
|
|
+ // ele.big = null;
|
|
|
+ // }
|
|
|
+ // if(Number(ele.small)>Number(ele.smallNum)){
|
|
|
+ // uni.showToast({title:'不能大于商品数量',icon:'none'})
|
|
|
+ // ele.small = null;
|
|
|
+ // }
|
|
|
+ let unitPrice = ele.unitPrice; //单价
|
|
|
+ let big = ele.big * unitPrice; //输入的扎
|
|
|
+ let small = (ele.small/ele.ratio * unitPrice).toFixed(2); //输入的支
|
|
|
+ let ratio = ele.ratio; //比例
|
|
|
+ if(ele.isActive){
|
|
|
+ this.refundMoney = (Number(this.refundMoney) + big + Number(small)).toFixed(2);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ refundFun(){
|
|
|
+ let product = [];
|
|
|
+ this.product.forEach(ele=>{
|
|
|
+ if(ele.isActive&&ele.big>0||ele.small>0){
|
|
|
+ product.push({"productId":ele.productId,"bigNum":ele.big?ele.big:0,"smallNum":ele.small?ele.small:0});
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(this.refundMoney==''){
|
|
|
+ uni.showToast({title:'退款金额不能小于0',icon:'none'});return;
|
|
|
+ }
|
|
|
+ if(this.$util.isEmpty(product)&&this.refundType==1){
|
|
|
+ uni.showToast({title:'请选择商品',icon:'none'})
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let parameter = {id:this.option.id,product:JSON.stringify(product),price:this.refundMoney,remark:this.remark,refundType:this.refundType};
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "确认退款？",
|
|
|
+ confirmText: "确认",
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ refund(parameter).then(res => {
|
|
|
+ uni.navigateTo({url:'/common/pageSuccess?title=操作成功'})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ inputFun(e){
|
|
|
+ this.isMonitor = false
|
|
|
+ this.product.forEach(ele=>{
|
|
|
+ if(Number(ele.big)>Number(ele.bigNum)){
|
|
|
+ uni.showToast({title:'不能大于商品数量',icon:'none'})
|
|
|
+ ele.big = ele.bigNum;
|
|
|
+ }
|
|
|
+ if(Number(ele.small)>Number(ele.smallNum)){
|
|
|
+ uni.showToast({title:'不能大于商品数量',icon:'none'})
|
|
|
+ ele.small = ele.smallNum;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ selectProduct(index){
|
|
|
+ this.isMonitor = true
|
|
|
+ this.product[index].isActive = !this.product[index].isActive;
|
|
|
+ },
|
|
|
+ async init() {
|
|
|
+ const res = await getDetail({
|
|
|
+ id: this.option.id
|
|
|
+ });
|
|
|
+
|
|
|
+ this.product = res.data.product.map(ele=>{
|
|
|
+ this.totalMoney = (Number(this.totalMoney) + Number(ele.price)).toFixed(2)
|
|
|
+ return {...ele,isActive:false,big:null,small:null}
|
|
|
+ })
|
|
|
+ console.log(this.product)
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
shish