182 lines
3.8 KiB
Vue
182 lines
3.8 KiB
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>
|