From 787c17a01018797ad04c66f9805b0f2824b45c93 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Wed, 4 Dec 2024 14:54:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BB=85=E9=80=80=E8=B4=A7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages_tool/order/sales_return.vue | 431 ++++++++++++++++++++++++++++++
 1 file changed, 431 insertions(+)
 create mode 100644 pages_tool/order/sales_return.vue

diff --git a/pages_tool/order/sales_return.vue b/pages_tool/order/sales_return.vue
new file mode 100644
index 0000000..91b42a2
--- /dev/null
+++ b/pages_tool/order/sales_return.vue
@@ -0,0 +1,431 @@
+<template>
+<!--仅退货申请-->
+  <page-meta :page-style="themeColor"></page-meta>
+  <view >
+    <view>
+      <scroll-view scroll-y="true" class="refund-container">
+        <view class="goods-wrap" v-for="(item, index) in refund_data.order_goods_info" :key="index">
+          <view class="goods-img">
+            <image :src="$util.img(item.sku_image, { size: 'mid' })"
+                   @error="item.sku_image = $util.getDefaultImage().goods" mode="aspectFill" :lazy-load="true">
+            </image>
+          </view>
+          <view class="goods-info">
+            <view class="goods-name">{{ item.sku_name }}</view>
+          </view>
+        </view>
+
+        <view>
+          <view class="refund-form">
+            <view class="item-wrap" @click="openPopup('refundReasonPopup')">
+              <view class="label">退货原因：</view>
+              <view class="cont reason">
+                <text class="color-tip" v-if="!refund_reason.length">请选择</text>
+                <text class="color-tip" v-else>{{ refund_reason }}</text>
+              </view>
+              <text class="iconfont icon-right"></text>
+            </view>
+            <view class="item-wrap">
+              <view class="label">退货方式：</view>
+              <view class="cont color-base-text">
+                仅退货
+              </view>
+            </view>
+            <view class="item-wrap">
+              <view class="label">退款金额：</view>
+              <view class="cont color-base-text">
+                {{ $lang('common.currencySymbol') }}0.00
+              </view>
+            </view>
+
+          </view>
+
+          <view class="refund-form">
+            <view class="item-wrap">
+              <view class="label active">退货说明</view>
+            </view>
+
+            <!-- #ifdef MP-WEIXIN -->
+            <textarea v-if="!showText" class="newText" placeholder="请输入退货说明(选填)"
+                      placeholder-class="color-tip font-size-tag" :auto-height="true" v-model="refund_remark" />
+            <!-- #endif -->
+            <!-- #ifndef MP-WEIXIN -->
+            <textarea class="newText" placeholder="请输入退货说明(选填)" @blur="textBlur()"
+                      placeholder-class="color-tip font-size-tag" :auto-height="true" v-model="refund_remark" />
+            <!-- #endif -->
+          </view>
+          <view class="refund-form-1 refund-mb">
+            <view class="">
+              <view class="label active">上传图片</view>
+              <view class="df">
+                <view class="df">
+                  <view style="position: relative;" v-for="(item, index) in imagesd" :key="index">
+                    <image class="xidom" :src="$util.img(item[0])"></image> <u-icon
+                      @click="delImg( index)" name="close-circle-fill" color="red" size="20"
+                      style="position: absolute;right: -10rpx;top:-10rpx;z-index:1"></u-icon>
+                  </view>
+                </view>
+                <view class="" v-if="imagesd.length < 5">
+                  <view class="xidomasx xidom" @click="btn">
+                    <image class="add_icon" :src="$util.img('upload/weapp/user/jia1.png')"
+                           mode="scaleToFill"></image>
+                  </view>
+                </view>
+              </view>
+            </view>
+
+          </view>
+          <!-- 	<view class="sub-btn color-base-bg" :class="{ 'safe-area': isIphoneX }" @click="submit">{{ $lang('common.submit') }}</view> -->
+          <view  :class="{ 'safe-area': isIphoneX }" @click="submit">
+            <button type="primary">提交</button>
+            <!-- <button type="primary">{{ $lang('common.submit') }}</button> -->
+          </view>
+          <view style="height:60rpx;">
+
+          </view>
+        </view>
+
+        <uni-popup ref="refundReasonPopup" type="bottom" @change="change()">
+          <view class="refund-reason-popup popup">
+            <view class="popup-header">
+              <view><text class="tit">退货原因</text></view>
+              <view class="align-right" @click="closePopup('refundReasonPopup')">
+                <text class="iconfont icon-close" @click="clean"></text>
+              </view>
+            </view>
+            <view class="popup-body">
+              <scroll-view scroll-y="true" class="scroll-view" :class="{ 'safe-area': isIphoneX }">
+                <view class="reason-list">
+                  <view class="item" v-for="(item, index) in refund_data.refund_reason_type"
+                        :key="index" @click="changeReason(item)">
+                    <view class="reason">{{ item }}</view>
+                    <view class="iconfont" :class="
+												refund_reason == item
+													? 'icon-yuan_checked color-base-text'
+													: 'icon-yuan_checkbox'
+											"></view>
+                  </view>
+                </view>
+              </scroll-view>
+            </view>
+            <view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
+              <view class="confirm-btn color-base-bg" @click="closePopup('refundReasonPopup')">
+                确定
+              </view>
+            </view>
+          </view>
+        </uni-popup>
+      </scroll-view>
+      <loading-cover ref="loadingCover"></loading-cover>
+    </view>
+  </view>
+</template>
+
+<script>
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
+export default {
+  components: {
+    uniPopup
+  },
+  data() {
+    return {
+      order_goods_id: '',
+      refund_type: '',
+      refund_reason: '',
+      refund_remark: '',
+      isIphoneX: false,
+      refund_data: {
+        refund_type: [],
+        order_goods_info: {
+          sku_image: ''
+        }
+      },
+      isSub: false,
+      showText: false, //是否展示退货说明，解决原生小程序textarea层级过高  popup不能遮挡的问题
+      imagesd: [
+        // {url:'public/uniapp/diy/style13-1.png'},
+        // {url:'public/uniapp/diy/style13-1.png'},
+        // {url:'public/uniapp/diy/style13-1.png'}
+      ]
+    };
+  },
+  onLoad(option) {
+    if (option.order_goods_id) this.order_goods_id = option.order_goods_id;
+
+    if (option.refund_type) this.refund_type = option.refund_type;
+  },
+  onShow() {
+    this.isIphoneX = this.$util.uniappIsIPhoneX();
+    if (uni.getStorageSync('token')) {
+      this.getRefundData();
+    } else {
+      this.$util.redirectTo('/pages_tool/login/login', {
+        back: '/pages_tool/order/refund?order_goods_id=' + this.order_goods_id
+      });
+    }
+  },
+  methods: {
+    btn(type, size = 1) {
+      console.log(111);
+      this.$util.upload(
+          size, {
+            path: 'otherImage'
+          },
+          res => {
+            this.imagesd.push(res);
+          }
+      );
+    },
+    delImg(index) {
+      this.imagesd.splice(index, 1);
+    },
+    /**
+     * 显示弹出层
+     * @param {Object} ref
+     */
+    openPopup(ref) {
+      this.$refs[ref].open();
+    },
+    /**
+     * 关闭弹出层
+     * @param {Object} ref
+     */
+    closePopup(ref) {
+      console.log(111);
+      this.$refs[ref].close();
+    },
+    clean() {
+      this.refund_reason = '';
+    },
+    textBlur() {
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0
+      });
+    },
+    /**
+     * 选择退款方式
+     * @param {Object} type
+     */
+    selectRefundType(type) {
+      this.refund_type = type;
+    },
+    getRefundData() {
+      this.$api.sendRequest({
+        url: '/api/orderrefund/refundDataBatch',
+        data: {
+          order_goods_ids: this.order_goods_id
+        },
+        success: res => {
+          if (res.code >= 0) {
+            this.refund_data = res.data;
+            if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+          } else {
+            this.$util.showToast({ title: '未获取到该订单项退款信息' });
+            setTimeout(() => {
+              this.$util.redirectTo('/pages/order/list');
+            }, 1000);
+          }
+        },
+        fail: res => {
+          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+        }
+      });
+    },
+    //提交
+    submit() {
+      // if (!this.imagesd.length > 0) {
+      // 	this.$util.showToast({
+      // 		title: '请上传图片'
+      // 	});
+      // 	return;
+      // }
+      if (this.verify()) {
+        if (this.isSub) return;
+        this.isSub = true;
+
+        // #ifdef MP-WEIXIN
+        this.subscribeMessage(() => {
+          this.$api.sendRequest({
+            url: '/api/orderrefund/refund',
+
+
+            data: {
+              order_goods_ids: this.order_goods_id,
+              refund_type: this.refund_type,
+              refund_reason: this.refund_reason,
+              refund_remark: this.refund_remark
+            },
+            success: res => {
+              this.$util.showToast({ title: res.message });
+              if (res.code >= 0) {
+                uni.removeStorage({
+                  key: 'refund_goods_data',
+                  success: res => {
+                    this.$util.redirectTo(
+                        '/pages_tool/order/activist');
+                  }
+                });
+              } else {
+                this.isSub = false;
+              }
+            },
+            fail: res => {
+              this.isSub = false;
+            }
+          });
+        });
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        this.$api.sendRequest({
+          url: '/api/orderrefund/refund',
+          header: {
+            'Content-Type': 'application/json' //自定义请求头信息
+          },
+          data: {
+            order_goods_ids: this.order_goods_id,
+            refund_type: this.refund_type,
+            refund_reason: this.refund_reason,
+            refund_remark: this.refund_remark,
+            refund_images: this.imagesd
+          },
+          success: res => {
+            this.$util.showToast({ title: res.message });
+            if (res.code >= 0) {
+              uni.removeStorage({
+                key: 'refund_goods_data',
+                success: res => {
+                  this.$util.redirectTo('/pages_tool/order/activist');
+                }
+              });
+            } else {
+              this.isSub = false;
+            }
+          },
+          fail: res => {
+            this.isSub = false;
+          }
+        });
+        // #endif
+      }
+    },
+    verify() {
+      if (this.refund_reason == '') {
+        this.$util.showToast({ title: '请选择退货原因' });
+        return false;
+      }
+      return true;
+    },
+    changeReason(refund_reason) {
+      this.refund_reason = refund_reason;
+    },
+    change(e) {
+      if (e) this.showText = e.show;
+    },
+
+    /**
+     * 微信订阅消息
+     */
+    subscribeMessage(callback) {
+      this.$api.sendRequest({
+        url: '/weapp/api/weapp/messagetmplids',
+        data: {
+          keywords: 'ORDER_REFUND_AGREE,ORDER_REFUND_REFUSE'
+        },
+        success: res => {
+          if (res.code == 0 && res.data.length) {
+            uni.requestSubscribeMessage({
+              tmplIds: res.data,
+              fail: res => {
+                console.log('fail', res);
+              },
+              complete: () => {
+                callback();
+              }
+            });
+          } else {
+            callback();
+          }
+        },
+        fail: res => {
+          callback();
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import './public/css/refund.scss';
+@import '@/common/css/order_parment.scss';
+</style>
+<style scoped lang="scss">
+/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+  background: none;
+  max-height: unset !important;
+  overflow-y: hidden !important;
+}
+
+/deep/ .uni-popup__wrapper {
+  border-radius: 20rpx 20rpx 0 0;
+}
+
+/deep/ .uni-popup {
+  z-index: 8;
+}
+
+.sub-btn {
+  padding-top: 20rpx;
+  background-color: #ffffff;
+  color: rgb(64, 158, 255);
+}
+
+.xidom {
+  width: 100rpx;
+  height: 100rpx;
+  margin: 4rpx 16rpx;
+}
+
+.xidomasx {
+  background: #f6f6f6;
+  border-radius: 16rpx;
+  position: relative;
+
+  .add_icon {
+    width: 36rpx;
+    height: 36rpx;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+}
+
+.popup-footer {
+  .confirm-btn {
+    border: 1rpx solid $color-line;
+    background: var(--base-color);
+
+  }
+}
+
+.refund-mb {
+  // overflow:hidden
+  padding-bottom: 154rpx;
+  position: relative;
+
+  .kong {
+    height: 124rpx;
+    width: 700rpx;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: rgb(248, 248, 248);
+  }
+
+}
+</style>
\ No newline at end of file