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"
              :key="item.id"
              class="goods-row"
          >
            <uv-checkbox
                :name="item.cartInfo.productAttrUnique"
                :disabled="item.isAfterSales != 1"
            />
            <view class="goods-col">
              <Goods
                  row
                  imgWidth="200rpx"
                  info-padding="10rpx 40rpx"
                  :goods="item.cartInfo.productInfo"
              >
                <template #options>
                  <view class="goods-options">
                    <!-- sku select -->
                    <view class="sku-row flex">
                      <view
                          class="sku-info flex flex-jc__sb flex-ai__center"
                      >
                        <view class="info">
                          {{ item.cartInfo.productInfo &&item.cartInfo.productInfo.attrInfo && item.cartInfo.productInfo.attrInfo.sku }}
                        </view>
                      </view>
                    </view>
                    <!-- bottom -->
                    <view class="price-row flex flex-ai__center flex-jc__sb">
                      <!-- price -->
                      <view class="price-box flex flex-ai__end">
                        ￥{{item.cartInfo.truePrice }}
                      </view>
                    </view>
                  </view>
                </template>
              </Goods>
            </view>
          </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";
import Goods from "@/components/goodsComponents/Goods.vue";

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.toFixed(2)
})

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
    },
    type:'redirectTo'
  })
}


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;
  }
}

.goods-row{
  @include useFlex(space-between,center);
  @include usePadding(20,10);
  width: 100%;
  .goods-col{
    width: 90%;
  }
}

// 商品SKU 数量等操作条
.goods-options {
  width: 100%;

  .sku-row {
    margin-bottom: 30rpx;

    .sku-info {
      @include usePadding(10, 4);
      border: 1rpx solid #ccc;
      border-radius: 5rpx;
      font-size: 24rpx;
      transition: all .3s;
      max-width: 100%;


      .info {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &:active {
        scale: 1.1;
      }

      .icon {
        margin-left: 15rpx;
      }
    }
  }

  .price-row {
    width: 100%;

    .price-box {
      font-size: 30rpx;
      color:$primary-color;

      .old-price {
        font-size: 20rpx;
        color: $tips-color;
        text-decoration: line-through;
        margin-left: 10rpx;
      }
    }

    .cart-num {
      font-size: 24rpx;

      .input {
        width: 120rpx;


        input {
          width: 100%;
          text-align: center;
          color: #333;
        }
      }

      .button {
        font-size: 32rpx;
        width: 34rpx;
        aspect-ratio: 1/1;
        border-radius: 5rpx;
        border: 2rpx solid #cccccc;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s;

        &:active {
          scale: 1.2;
        }
      }
    }
  }
}
</style>