yshop-pro-uniapp/pages/selectRefundGood/selectRefundGood.vue

<template>
  <layout>
    <uv-navbar
      :fixed="false"
      title="选择商品"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <uv-checkbox-group
      v-if="goodsList"
      v-model="goodsSelect"
      @change="handleGoodsSelect"
    >
      <space
        direction="vertical"
        fill
      >
        <card class="shopping-checkbox">
          <view
            v-for="(item, index) in goodsList"
            class="shopping-checkbox-cell"
          >
            <uv-checkbox
              :name="item.id"
              v-model="goodsSelect"
              checked-color="#ee0a24"
              :disabled="item.isAfterSales != 1"
            />
            <goods
              list
              interval
              showAction
              model
              :price="item.cartInfo.productInfo.price"
              :data="item.cartInfo.productInfo"
            >
            </goods>
          </view>
        </card>
      </space>
    </uv-checkbox-group>
    <view class="action-bar column">
      <view class="action-info">
        <view class="action-checkbox">
          <uv-checkbox-group>
            <uv-checkbox
              name="all"
              :checked="goodsSelectAll"
              checked-color="#ee0a24"
              @change="handleGoodsSelectAll"
            >
              全选
            </uv-checkbox>
          </uv-checkbox-group>
        </view>
        <view class="action-total">
          {{ goodsSelect.length }} 件商品
        </view>
        <view class="action-total">

          总计：￥{{ totalPrice }}
        </view>
      </view>
      <view class="action-btns">
        <uv-button
          type="primary"
          text="仅退款"
          @click="toRefund(0)"
        ></uv-button>
        <uv-button
          type="primary"
          text="退货退款"
          @click="toRefund(1)"
        ></uv-button>
      </view>
    </view>
  </layout>
</template>

<script setup>

import { ref, watch } from 'vue'
import { applyForAfterSalesInfo } from '@/api/order'
import { navigateTo } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'

const goodsList = ref([])
const goodsSelect = ref([])
const goodsSelectAll = ref(false)
const totalPrice = ref(0);
const orderId = ref(null)
const id = ref(null)
const refundType = ref(null)


const handleGoodsSelectAll = (e) => {
  goodsSelectAll.value = e
  if (!goodsSelectAll.value) {
    goodsSelect.value = []
    return
  }

  goodsSelect.value = goodsList.value.map(item => item.id)
}

const handleGoodsSelect = (value) => {
  goodsSelectAll.value = value.length == goodsList.value.length
}

watch(goodsSelect, (goodsSelect) => {
  let price = 0
  goodsList.value.filter(item => goodsSelect.includes(item.id)).forEach(item => {
    price += item.cartInfo.truePrice * item.cartInfo.cartNum
  })

  totalPrice.value = price
})

const handleOrderInfo = async (option) => {
  const res = await applyForAfterSalesInfo(option)
  console.log("gxs --> % handleOrderInfo % res:\n", res)
  // orderInfoData.value = res
  goodsList.value = res
}


const toRefund = (type) => {
  if (goodsSelect.value.length <= 0) {
    return
  }

  refundType.value = type

  navigateTo({
    url: '/pages/refund/refund',
    query: {
      refundType: refundType.value,
      goods: goodsSelect.value.toString(),
      orderId: orderId.value,
      id: id.value
    }
  })
}


onLoad((option) => {
  orderId.value = option.orderId
  id.value = option.id
  handleOrderInfo({
    key: option.id
  })
})


</script>

<style lang="less">
.shopping-checkbox {}

.shopping-action {
  padding-left: 34rpx;
  flex: 1;
  display: flex;
  justify-content: space-between;

  &-checkbox {
    flex: 1
  }

  &-total {
    line-height: 48rpx;
    font-size: 34rpx;
    color: #333333;
    margin-right: 10rpx;
  }

  &-btn {
    width: 224rpx;
  }
}
</style>