新增售后申请退货物业务流程

components/dialogOrderAfterSale.vue

@@ -0,0 +1,560 @@
+<!-- 申请售后 -->
+<template>
+  <div class="sign">
+    <el-dialog
+      :visible="DialogOrderAfterSaleVisible"
+      width="60vw"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+      :show-close="false"
+      custom-class="qddialog"
+      top="8vh"
+      v-loading="DialogOrderAfterSaleloading"
+    >
+      <div slot="title" class="title">
+        <span>申请售后</span>
+      </div>
+
+<!--      售后方式-->
+      <div class="refund_type_box" v-if="schedule == 1">
+        <ul class="box">
+          <li>
+            <input type="radio" name="refundType" v-model="formData.refund_type" value="1">
+            <div class="left">
+              <strong>退货无需退款</strong>
+              <span>没收到货,或与卖家写上同意无需要退货只退款</span>
+            </div>
+          </li>
+          <li>
+            <input type="radio" name="refundType" v-model="formData.refund_type" value="2">
+            <div class="left">
+              <strong>退货退款</strong>
+              <span>已收到货,需退还收到的货物</span>
+            </div>
+          </li>
+          <li>
+            <input type="radio" name="refundType" v-model="formData.refund_type" value="4">
+            <div class="left">
+              <strong>仅退款</strong>
+              <span>仅退款</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <!--商品列表-->
+      <div class="goods_box" v-if="schedule == 2">
+        <div class="goods" v-for="(v,k) in orderGoodsList">
+          <div class="left">
+            <input type="checkbox" name="refundType" v-model="selectOrderGoodsIds" :value="v.order_goods_id">
+            <img :src="v.sku_image" alt="">
+          </div>
+          <div class="center">
+            <span>{{v.sku_name}}</span>
+          </div>
+          <div class="checkbox">
+
+          </div>
+        </div>
+      </div>
+
+      <div class="form_box" v-if="schedule == 3">
+        <el-form ref="form" :model="formData" label-width="120px">
+          <el-form-item label="售后原因">
+            <el-select v-model="formData.region" placeholder="请选择售后原因">
+              <el-option v-for="(v,k) in refund_data.refund_reason_type" :key="k" :label="v" :value="v"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="售后说明">
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 2, maxRows: 4}"
+              placeholder="请输入售后说明"
+              v-model="formData.refund_remark">
+            </el-input>
+          </el-form-item>
+
+
+          <div class="evaluateForm">
+            <el-form-item label="上传图片" class="evaluateUpload">
+              <UploadImageOss
+                @input="uploadSccess($event, 'images')"
+                :limit="5"
+                :value="evaluateForm.images"
+              >
+                <template v-slot:upload>
+                  <div class="upload_BOX">
+                    <div class="upload">
+                      <img src="~assets/images/downloadIMG.png"/>
+                      <span>上传照片</span>
+                    </div>
+                  </div>
+                </template>
+              </UploadImageOss>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button  @click="setSchedule('sub')" size="mini" v-if="schedule > 1">上一步</el-button>
+        <el-button  @click="setSchedule('add')" size="mini" v-if="schedule < 3">下一步</el-button>
+
+        <el-button  @click="closr()" size="mini">取消</el-button>
+        <el-button v-if="schedule == 3" type="primary" @click="submetForm()" size="mini">提交</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import UploadImageOss from "@/components/uploadImageOss.vue";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+
+  components: {
+    UploadImageOss,
+  },
+  props: {
+    DialogOrderAfterSaleVisible: Boolean,
+    DialogOrderAfterSaleloading: Boolean,
+    dialogOrderAfterSaleData: Object,
+  },
+  data() {
+    //这里存放数据
+    return {
+      schedule:1,//进度|1:展示选择售后方式,2:展示需要售后的商品列表,3:展示表单操作
+      selectOrderGoodsIds:[],//选中的需要售后的商品id
+      orderGoodsList:[],//订单商品列表
+
+      //退款信息
+      refund_data:{
+        refund_type: [],
+      },
+
+      explanation:'',
+      formData:{
+        order_goods_ids:'',//需要售后的商品id|多个值英文,号拼接,如"12,15,18"
+        refund_type:'',//售后方式|1=仅退款,2=退款退货(在这个状态进行判断是否付款,没付款就是直接仅退货),4=仅退货不退款
+        refund_reason:'',//售后原因|如:"未按约定时间发货"
+        refund_remark:'',//售后说明
+        refund_images:[],//上传图片,数组类型[[https://www.zhiyao.com/upload/a1111.png],[https://www.zhiyao.com/upload/a2222.png]]
+      },//表单
+
+      regionArr:[],
+      //售后方式各项值列表
+      refundTypeArr:[
+        {
+          name:'退款无需退货',
+          val:'1',
+          explain:'没收到货,活跃卖家协商同意无需退货只退款',
+        },
+        {
+          name:'退货退款',
+          val:'2',
+          explain:'已收到货,需退还收到的货物',
+        },
+        {
+          name:'仅退货无需退款',
+          val:'4',
+          explain:'仅退货无需退款',
+        }
+      ],
+      orderData:{},//订单数据
+
+      evaluateForm: {
+        explainGrade: {},
+        content: "",
+        images: "",
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    dialogOrderAfterSaleData: {
+      handler(newVal) {
+        console.log('qq1 (watch):', newVal);
+        this.orderData = newVal; // 将 dialogOrderAfterSaleData 的值赋给 orderData
+        this.getOrderGoodsList()//获取需要售后的商品列表
+      },
+      immediate: true, // 立即执行一次
+      deep: true // 深度监听对象变化
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if (this.DialogOrderAfterSaleVisible) {
+
+    }
+  },
+
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //方法集合
+  methods: {
+    //获取需要退款的数据
+    getRefundData(){
+
+      this.$axios
+        .post(`/orderrefund/refundDataBatch`, {order_goods_ids: this.selectOrderGoodsIds.join()})
+        .then((res) => {
+          if (res.code == 0) {
+            this.refund_data = res.data
+            this.formData.order_goods_ids = this.selectOrderGoodsIds.join()
+            // console.log('qq22',this.refund_data.refund_reason_type)
+          }else{
+            this.$message.error(res.message);
+          }
+        })
+        .catch((err) => {
+            this.$message.error(err);
+          }
+        );
+    },
+    //获取需要售后的商品列表
+    getOrderGoodsList(){
+      this.$axios
+        .post(`/order/detail`, {order_id: this.orderData.order_id})
+        .then((res) => {
+          if (res.code == 0) {
+            this.orderData = res.data
+            this.orderGoodsList = res.data.order_goods//需要售后的商品列表
+            console.log('1111',this.orderGoodsList)
+          }else{
+            this.$message.error(res.message);
+          }
+        })
+        .catch((err) => {
+            this.$message.error(err);
+          }
+        );
+    },
+
+    //设置步骤
+    setSchedule(type){
+      let _schedule
+      if (type == 'add') {
+        //下一步
+        _schedule = this.schedule + 1
+        if (_schedule >= 3) {
+          _schedule = 3
+        }
+      } else {
+        //上一步
+        _schedule = this.schedule - 1
+        if (_schedule <= 1) {
+          _schedule = 1
+        }
+      }
+
+      switch (_schedule) {
+        case 2:
+          if (!this.formData.refund_type){
+            this.$message.error('请选择售后方式');
+            return
+          }
+          break;
+        case 3:
+          if (this.selectOrderGoodsIds.length <= 0){
+            this.$message.error('请选择需要售后的商品');
+            return
+          }
+          this.getRefundData()
+          break;
+      }
+      this.schedule = _schedule
+    },
+
+    //上传图片
+    uploadSccess(e, key) {
+      this.evaluateForm.images = e;
+      console.log(e, key);
+    },
+
+    //提交
+    submetForm(){
+      console.log('ttt',this.evaluateForm)
+
+      this.formData.refund_images = [];
+      if(this.evaluateForm.images.length > 0){
+        this.evaluateForm.images.forEach((v,k)=>{
+          this.formData.refund_images[k] = [v]
+        })
+      }
+
+      this.$axios
+        .post(`/orderrefund/refund`, this.formData)
+        .then((res) => {
+          if (res.code == 0) {
+            this.$message.success(res.message);
+            setTimeout(() => {
+              this.closr();
+            }, 1500);
+          }else{
+            this.$message.error(res.message);
+          }
+          console.log(res.data);
+        })
+        .catch((err) => {
+            this.$message.error(err);
+          }
+        );
+
+    },
+
+    //关闭弹窗
+    closr(){
+      this.$emit("closrDialogOrderAfterSale", true);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .el-dialog__header,
+  .el-dialog__body,
+  .el-dialog__footer {
+    padding: 0 30px;
+  }
+  .el-dialog__header {
+    padding-top: 33px;
+  }
+  .el-dialog__footer {
+    padding-bottom: 20px;
+  }
+}
+.qddialog {
+  padding: 33px 30px 20px;
+
+  .title {
+    display: flex;
+    align-items: center;
+    img {
+      width: 24px;
+      height: 24px;
+      margin-right: 11px;
+    }
+
+    span {
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #222222;
+      line-height: 24px;
+    }
+  }
+  .timenum {
+    font-size: 30px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #ff1449;
+    line-height: 35px;
+    text-align: center;
+    margin: 20px 0 10px;
+  }
+  .timeText {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    text-align: center;
+    line-height: 20px;
+  }
+  .gz {
+    p {
+      margin: 20px 0 10px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #222222;
+      line-height: 20px;
+    }
+    .gztext {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+
+      line-height: 22px;
+      p {
+        color: #999999;
+      }
+    }
+  }
+  .jl {
+    .qdjl {
+      margin: 20px 0 10px;
+
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #222222;
+      line-height: 20px;
+    }
+    ul {
+      li {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        .left {
+          display: flex;
+          align-items: center;
+          .img {
+            width: 44px;
+            height: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 10px;
+            // background-color: $--color-primary;
+            background: linear-gradient(141deg, #ffac73 0%, #fe6e0b 100%);
+            border-radius: 100%;
+            img {
+              width: 26px;
+              height: 26px;
+            }
+          }
+          .cnt {
+            height: 44px;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .title {
+              font-size: 16px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #222222;
+              line-height: 22px;
+              letter-spacing: 1px;
+            }
+            .time {
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 17px;
+            }
+          }
+        }
+        .right {
+          .big {
+            font-size: 20px;
+            font-family: DINAlternate-Bold, DINAlternate;
+            font-weight: bold;
+            color: #585858;
+            line-height: 24px;
+          }
+          .min {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #585858;
+            line-height: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.goods_box{
+  margin-top: 15px;
+  .goods{
+    padding: 8px;
+    margin-bottom: 8px;
+    border: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    .left{
+
+      display: flex;
+      align-items: center;
+      img{
+        margin-left: 10px;
+        width: 60px;
+        height: 60px;
+        object-position: center;
+        object-fit: cover;
+      }
+    }
+    .center{
+      margin-left: 10px;
+      span{
+        //font-size: 15px;
+      }
+    }
+    .checkbox{
+
+    }
+  }
+}
+
+//第一步,选择售后类型
+.refund_type_box{
+  margin-top: 15px;
+  ul{
+    li{
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      .left{
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        strong{
+          font-size: 16px;
+        }
+        span{
+          margin-top: 4px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+
+//上传相关
+.evaluateUpload {
+  .el-form-item__content {
+    width: 100px;
+    border-radius: 4px;
+
+    .finish_room {
+      margin: 0 auto;
+      text-align: center;
+      .finish_room2 {
+        div {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.upload_BOX {
+  width: 152px !important;
+  height: 152px !important;
+  border-radius: 4px;
+  border: 1px solid #dddddd;
+  text-align: center;
+
+  .upload {
+    color: #ccc;
+    margin-top: 50px;
+    img {
+      margin: auto;
+      width: 22px;
+      height: 20px;
+    }
+  }
+}
+</style>

pages/order/index.vue

@@ -400,7 +400,7 @@
 <!--                </div>-->
 <!--              </template>-->
 <!--            </UploadImage1>-->
-            <upload-image-oss
+            <UploadImageOss
               @input="uploadSccess($event, 'images')"
               :limit="9"
               :value="evaluateForm.images"
@@ -413,7 +413,7 @@
                   </div>
                 </div>
               </template>
-            </upload-image-oss>
+            </UploadImageOss>
           </el-form-item>
         </el-form>
       </template>
@@ -439,7 +439,7 @@
 <script>
 import Setting from "~/setting";
 import EvaluateDetail from "./evaluate_detail.vue";
-import UploadImageOss from "../../pc/components/uploadImageOss";
+import UploadImageOss from "@/components/uploadImageOss.vue";
 export default {
   auth: false,
   components: {UploadImageOss, EvaluateDetail },

pages/order_details.vue

@@ -189,7 +189,7 @@
             <div class="r ">{{orderData.delivery_type_name}}</div>
           </div>
 
-          <div class="item" v-if="orderType == 3">
+          <div class="item" v-if="orderType == 3 && payInfo.pay_status == 0">
             <div class="l">等待付款</div>
             <div class="r qx">
               剩余时间
@@ -241,7 +241,11 @@
         </div>
       </div>
       <div class="btns" v-if="orderType != -1">
-        <div class="hs" v-if="orderType == 1 && integralGoods == 0" @click="clickSpsh">申请售后</div>
+
+<!--审核情况展示"申请售后"按钮|待支付 or 全款支付时 && 订单状态=[待发货,已发货,已收货]-->
+<!--        <div class="hs" v-if="orderType == 1 && integralGoods == 0" @click="clickSpsh">申请售后</div>-->
+        <div class="hs" v-if="[1,3,4].includes(orderData.order_status) && [0,2].includes(payInfo.pay_status) && integralGoods == 0" @click="clickSpsh">申请售后</div>
+
         <div class="gl" v-if="orderType == 1" @click="clickQrsh">确定收货</div>
         <!-- <div class="hs" v-if="orderType == 2" @click="clickGhdz">更换地址</div> -->
 
@@ -269,9 +273,9 @@
         >
           申请开票
         </div>
-        <div class="hs" v-if="orderType == 5 && integralGoods == 0" @click="clickSpsh">
+<!--        <div class="hs" v-if="orderType == 5 && integralGoods == 0" @click="clickSpsh">-->
-          申请售后
+<!--          申请售后-->
-        </div>
+<!--        </div>-->
         <div class="gl" v-if="orderType == 5 && integralGoods == 0" @click="clickQpj">
           去评价
         </div>
@@ -593,12 +597,22 @@
       @clickConfirm="billBtn"
       :cancelText="'返回'"
     ></Dialog>
+
+    <!-- 申请售后 -->
+    <DialogOrderAfterSale
+      :dialogOrderAfterSaleData="orderData"
+      :DialogOrderAfterSaleVisible="DialogOrderAfterSaleVisible"
+      v-if="DialogOrderAfterSaleVisible"
+      :DialogOrderAfterSaleloading="DialogOrderAfterSaleloading"
+      @closrDialogOrderAfterSale="closrDialogOrderAfterSale"
+    ></DialogOrderAfterSale>
   </div>
 </template>
 
 <script>
 import Setting from "~/setting";
 import Guess from "@/components/guess.vue";
+import DialogOrderAfterSale from "@/components/dialogOrderAfterSale.vue";
 
 export default {
   name: "order_details",
@@ -606,6 +620,7 @@ export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     Guess,
+    DialogOrderAfterSale,
   },
   data() {
     //这里存放数据
@@ -623,6 +638,11 @@ export default {
       dialogSlotType: "", //弹框插槽当前打开的弹框
       payState: 1,
 
+      // ---------------------------------
+      //申请售后相关
+      DialogOrderAfterSaleVisible: false,//是否展示
+      DialogOrderAfterSaleloading: false,//是否加载完毕
+
       // ---------------------------------
       addressType: "1", //选中的地址
       paymentForm: {
@@ -837,7 +857,17 @@ export default {
         });
     },
     // 申请售后
-    clickSpsh() {},
+    clickSpsh() {
+      console.log('xx1',this.orderData)
+      //打开售后页面
+      this.DialogOrderAfterSaleVisible = true;
+    },
+    //关闭售后弹出层
+    closrDialogOrderAfterSale(e){
+      console.log('xx1',e)
+      this.DialogOrderAfterSaleData = this.orderData
+      this.DialogOrderAfterSaleVisible = false
+    },
 
     // 点击确认
     clickConfirm() {