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

<template>
  <layout>
    <uv-navbar
        :fixed="false"
        title="选择商品"
        left-arrow
        @leftClick="goBack"
    />
    <uv-checkbox-group
        v-if="goodsList"
        v-model="goodsSelect"
        shape="circle"
        activeColor="#ec6e47"
        @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.cartInfo.productAttrUnique"
                :disabled="item.isAfterSales != 1"
            />
            <goods
                list
                interval
                showAction
                model
                :price="item.cartInfo.truePrice"
                :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
              shape="circle"
              activeColor="#ec6e47"
          >
            <uv-checkbox
                name="all"
                :checked="goodsSelectAll"
                @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">
        <view
            class="button only-button"
            @click="toRefund(0)"
        >
          仅退款
        </view>
        <view
            v-if="status !== 0"
            class="button"
            @click="toRefund(1)"
        >
          退货退款
        </view>
      </view>
    </view>
  </layout>
</template>

<script setup>

import { ref, watch } from 'vue'
import { applyForAfterSalesInfo } from '@/api/order'
import { onLoad } from '@dcloudio/uni-app'
import { useRouter } from "@/hooks/useRouter";

const {getParams, push, goBack} = useRouter()
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 status = ref(0)


const handleGoodsSelectAll = (e) => {
  goodsSelectAll.value = e
  if (!goodsSelectAll.value) {
    goodsSelect.value = []
    return
  }
  goodsSelect.value = goodsList.value.map(item => item.cartInfo.productAttrUnique)
}

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

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

  totalPrice.value = price
})

const handleOrderInfo = async (option) => {
  const res = await applyForAfterSalesInfo(option)
  // orderInfoData.value = res
  goodsList.value = res
}


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

  refundType.value = type
  push({url: '/pages/refund/refund'}, {
    data: {
      refundType: refundType.value,
      goods: goodsSelect.value.toString(),
      orderId: orderId.value,
      id: id.value
    }
  })
}


onLoad((options) => {
  const params = getParams(options)
  orderId.value = params.orderId
  id.value = params.id
  status.value = params.status
  handleOrderInfo({
    key: params.id
  })
})


</script>

<style lang="scss">
.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;
  }
}

.action-btns {
  gap: 20rpx;
  justify-content: center;
  display: flex;
  .button {
    flex: 1;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $primary-color;
    color: $white-color;
  }

  .only-button {
    box-sizing: border-box;
    border: 1rpx solid #333;
    color: #333;
    background: $white-color;
  }
}
</style>