170 lines
3.6 KiB
Vue
170 lines
3.6 KiB
Vue
<!--
|
||
@name: GroupInfo
|
||
@author: kahu4
|
||
@date: 2024-01-22 11:53
|
||
@description：GroupInfo
|
||
@update: 2024-01-22 11:53
|
||
-->
|
||
<script setup>
|
||
import { computed, onMounted, ref, toRefs } from "vue";
|
||
import { getGroupByDetailTeamworkId } from "@/api/goods";
|
||
import { useJump } from "@/hooks/useJump";
|
||
|
||
const {goGroupByDetail} = useJump()
|
||
|
||
const props = defineProps({
|
||
orderInfoData: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
const {orderInfoData} = toRefs(props)
|
||
|
||
const residuePersonNum = computed(() => {
|
||
if (!groupDetail.value) return 1
|
||
return groupDetail.value.person - groupDetail.value.users.length
|
||
})
|
||
// 拼团详情
|
||
const groupDetail = ref()
|
||
// 拼团状态 0 进行中 1 成功 2 失败
|
||
const groupState = ref(0)
|
||
// 拼团title
|
||
const groupTitle = computed(() => {
|
||
if (!groupDetail.value) return
|
||
if (groupState.value === 0) {
|
||
return `${ groupDetail.value.person }人团,再邀${ residuePersonNum.value }位即可拼团成功`
|
||
}
|
||
if (groupState.value === 1) {
|
||
return '拼团成功，请等待商家发货'
|
||
}
|
||
if (groupState.value === 2) {
|
||
return '拼团失败，可以再次开团啊~'
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 获取拼团详情
|
||
* @return {Promise<void>}
|
||
*/
|
||
async function doGetGroupByDetailTeamworkId() {
|
||
const res = await getGroupByDetailTeamworkId({id: orderInfoData.value.teamworkId});
|
||
groupDetail.value = res
|
||
// 校验状态 state 0 进行中 1 成功 2 失败
|
||
groupState.value = res.state
|
||
}
|
||
|
||
onMounted(() => {
|
||
doGetGroupByDetailTeamworkId()
|
||
})
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<view class="group-info mb-20 card">
|
||
<view class="card-head flex flex-jc__start">
|
||
<view class="card-title">
|
||
拼团信息
|
||
</view>
|
||
<view class="sub">
|
||
{{ groupTitle }}
|
||
</view>
|
||
</view>
|
||
<view class="card-content group-by flex flex-wrap flex-jc__start">
|
||
<view
|
||
class="users"
|
||
v-if="groupDetail">
|
||
<view
|
||
v-for="user in groupDetail.users"
|
||
:key="user.id"
|
||
class="user-item">
|
||
<image :src="user.avatar" />
|
||
<view
|
||
class="first-group"
|
||
v-if="user.isHead === '1'">
|
||
团长
|
||
</view>
|
||
</view>
|
||
<!-- 该团还需要几个人 -->
|
||
<view
|
||
class="user-item plus"
|
||
v-for="item in residuePersonNum"
|
||
:key="item"
|
||
@click="goGroupByDetail({teamworkId:orderInfoData.teamworkId})">
|
||
<u-icon name="plus" />
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style
|
||
scoped
|
||
lang="scss">
|
||
.sub {
|
||
color: $tips-color;
|
||
font-size: 28rpx;
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.primary-color {
|
||
color: $primary-color;
|
||
}
|
||
|
||
.group-by {
|
||
@include usePadding(30, 30);
|
||
gap: 32rpx;
|
||
|
||
.user-header {
|
||
image {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
background: #e5e5e5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.users {
|
||
margin: 40rpx 0;
|
||
@include useFlex(flex-start, center, row, wrap, 20rpx);
|
||
width: 100%;
|
||
|
||
.user-item {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 0 10rpx rgba(220, 220, 220, 0.7);
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
background: #e5e5e5;
|
||
}
|
||
|
||
.first-group {
|
||
@include usePadding(16, 5);
|
||
background: $primary-color;
|
||
color: $white-color;
|
||
white-space: nowrap;
|
||
border-radius: 34rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|