v1.0

pages/selectRefundGood/selectRefundGood.vue

@@ -0,0 +1,181 @@
+<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>