Files
yshop-pro-uniapp/pages/selectRefundGood/selectRefundGood.vue
2023-11-15 19:59:37 +08:00

324 lines
6.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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