cxb-minapp-vue3/src/pages/refund/drawback.vue

<script setup lang="ts">
import FPrice from "~/components/FPrice/FPrice.vue";
import {UPLOAD_URL} from "~/utils/http";
import GoodStatusPopup from "~/pages/refund/components/GoodStatusPopup.vue";
import RefundReasonPopup from "~/pages/refund/components/RefundReasonPopup.vue";
import {getToken} from "~/utils/auth";
import {refundApply, takeOrder} from "~/apis/order.api";
const headers = {
  "Content-Type": "multipart/form-data",
  'X-Token': 'Bearer ' + getToken()
}
const state = reactive({
  showGoodStatusPopup: false,
  showReasonPopup: false,
  // detail: {}
  total_price: '0.00',
  orderId: '',
  from: '',

})
const userStore = useUserStore()

const formData = reactive({
  ids: '',
  // 申请说明
  mark: '',
  num: '',
  // 联系电话
  phone: '',
  // 图片
  pics: [],
  // 原因
  refund_message: '',
  // 退款金额
  refund_price: '',
  type: '',
  // 1退款， 2退款退货
  refund_type: '',
  // 收货状态
  goods: ''
})
const defaultFileList = ref([])

const radioVal = ref(false)
function handleUploadSuccess({ data, option, fileItem }) {
  // console.log(data.data.path)

  if (data && data.data) {
    const resData = JSON.parse(data.data).data
    const path = resData.path
    formData.pics.push(path)
  }
  // if (data && data.path) {
  //   formData.pics.push(data.path)
  // }
  //
  // console.log(fileItem)
}
onLoad(async (options) => {
  if (options && options.from !== '') {
    state.from = options.from
  }
  await userStore.getUserInfo()
  formData.refund_type = options.refund_type
  formData.ids = options.ids
  formData.refund_price = options.total_price
  formData.num = options.total_num
  formData.phone = userStore.userInfo.phone
  formData.type = options.type || 1

  state.orderId = options.orderId
})
function handleSubmit() {
  if(!formData.goods) {
    return uni.showToast({
      title: '请选择收货状态',
      icon: "none"
    })
  }
  if (!formData.refund_message) {
    return uni.showToast({
      title: '请选择退款原因',
      icon: "none"
    })
  }
  uni.showModal({
    content: '您确定继续退款吗？',
    confirmColor: '#FE0032',
    success: function (res) {
      if (res.confirm) {
        refundApply(state.orderId.toString(), formData).then(res => {
          // {"status":200,"message":"申请退款成功","data":{"refund_order_id":"671"}}
          uni.showToast({
            title: '申请退款成功',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: `/pages/refund/index?from=${state.from}`
            })
          }, 300)
        })

      }
    }
  })
  // if (state.orderId) {
  // }

  console.log(formData)
}

function handleChooseGoodStatus () {
  state.showGoodStatusPopup = true
}

function getGoodsStatus(radioVal) {
  if (radioVal == 1) {
    return formData.goods = '未收到货'
  }
  if (radioVal == 2) {
    return formData.goods = '已收到货'
  }
}
function onGoodStatusConfirm(val) {
  // console.log(val)
  // formData.goods = val
  getGoodsStatus(val)
}

function getRefundMessage(radioVal) {
  if (radioVal == 1) {
    return '订单信息拍错了'
  }
  if (radioVal == 2) {
    return '我不想要了'
  }
  if (radioVal == 3) {
    return '地址/电话信息填写错误'
  }
  if (radioVal == 4) {
    return '没用/少用优惠'
  }
  if (radioVal == 5) {
    return '发货速度不满意'
  }
  if (radioVal == 6) {
    return '缺货'
  }
  if (radioVal == 7) {
    return '拍多了'
  }
}
function onRefundReasonConfirm(val) {
  formData.refund_message = getRefundMessage(val)
  console.log(formData.refund_message)
}


</script>
<template>
<div>
  <nut-cell-group>
    <nut-cell :desc="formData.goods == '' ? '请选择' : `${formData.goods}`" is-link @click="handleChooseGoodStatus">
      <template #title>
        <div class="flex font-bold gap-1 items-center">
          <div>收货状态</div>
          <div class="text-primary">*</div>
        </div>
      </template>
    </nut-cell>
    <nut-cell :desc="formData.refund_message == '' ? '请选择' : `${formData.refund_message}`" is-link @click="state.showReasonPopup = true">
      <template #title>
        <div class="flex font-bold gap-1 items-center">
          <div>退款原因</div>
          <div class="text-primary">*</div>
        </div>
      </template>
    </nut-cell>
    <nut-cell >
      <div class="flex flex-col">
        <div class="flex font-bold gap-1 items-center">
          <div>退款金额</div>
          <div class="text-primary">*</div>
        </div>
        <FPrice :price="formData.refund_price" :ex-class="['font-bold text-xl']"></FPrice>
        <div class="text-gray-500 text-[12px]">
          不可修改，最多￥{{ formData.refund_price }},含发货邮费￥{{state.total_price}}
        </div>
      </div>

    </nut-cell>
  </nut-cell-group>

  <div class="bg-white p-3">
    <div class="text-sm">
      补充描述和凭证
    </div>
    <div class="flex flex-col my-2 gap-2 bg-gray-100">
        <textarea placeholder="补充描述，有助于商家更好的处理售后问题"
                  class="p-2 text-xs rounded-lg"
                  v-model="formData.mark"
        />
      <div class="flex p-2 text-gray">
        <div class="flex flex-col justify-center items-center text-xs gap-2">
          <nut-uploader :url="UPLOAD_URL"
                        :headers="headers"
                        :name="'field'"
                        :timeout="1000*50"
                        :data="{ filename: 'field'}"
                        v-model:file-list="defaultFileList" maximum="3"
                        @success="handleUploadSuccess"
          >
          </nut-uploader>
        </div>
      </div>

    </div>

  </div>
  <div class="fixed bottom-0 pb-safe w-full">
    <div class="px-3 ">
      <nut-button
          @click="handleSubmit"
          type="primary" block>提交
      </nut-button>

<!--      <FButton-->
<!--          @click="handleSubmit"-->
<!--          :exClass="['!bg-primary', 'rounded-full', 'text-white']"-->
<!--          block-->
<!--      >-->
<!--        提交-->
<!--      </FButton>-->
      <!--        <div class="text-center text-white bg-red rounded-full text-sm p-2">-->
      <!--        </div>-->
    </div>

  </div>

  <GoodStatusPopup v-model:show="state.showGoodStatusPopup"
                   @confirm="onGoodStatusConfirm"
  />
  <RefundReasonPopup v-model:show="state.showReasonPopup"
                     @confirm="onRefundReasonConfirm"
  />
</div>
</template>

<route lang="yaml">
style:
  navigationBarTitleText: 售后订单
</route>

<style lang="scss">
page {
  background: #f8f8f8;
}
.nut-radio-group {
  width: 100%;
}
//.nut-radio {
//  display: flex !important;
//  width: 100%;
//}
</style>