140 lines
3.8 KiB
Vue
140 lines
3.8 KiB
Vue
<script setup>
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { GROUP_STATUS } from '@/constants/mall-data'
|
||
import { getGroupDetail } from '@/api/mall'
|
||
import { navigateBack, navigateTo, redirectTo } from '@/utils/router'
|
||
import { ref } from 'vue'
|
||
|
||
const viewData = ref({})
|
||
const topUser = ref({})
|
||
const participants = ref([])
|
||
const loading = ref(true)
|
||
|
||
const getData = async id => {
|
||
const res = await getGroupDetail(id)
|
||
viewData.value = res.data
|
||
participants.value = res.data.participants.filter(
|
||
v => v.roleType == 2
|
||
)
|
||
topUser.value = res.data.participants.find(v => v.roleType == 1)
|
||
loading.value = false
|
||
}
|
||
|
||
const onShare = () => {
|
||
// productId
|
||
navigateTo('/pages/shop-together/share', {
|
||
id: viewData.value.id,
|
||
productId: viewData.value.productId
|
||
})
|
||
}
|
||
|
||
onLoad(e => {
|
||
getData(e.id)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view>
|
||
<cb-loading v-if="loading"></cb-loading>
|
||
<view v-else class="shop-together">
|
||
<!-- 顶部用户信息 -->
|
||
<view class="top-user">
|
||
<view class="state-box">发起人</view>
|
||
<view class="left-box">
|
||
<image
|
||
v-if="topUser?.avatar"
|
||
:src="topUser?.avatar"
|
||
mode="aspectFill"
|
||
class="avatar"
|
||
></image>
|
||
<uni-icons v-else type="contact-filled" size="64"></uni-icons>
|
||
<view class="name-box">
|
||
<text>{{ topUser.userName }}</text>
|
||
<text>ID:{{ topUser.userId }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="right-box">
|
||
<text>
|
||
{{
|
||
viewData.status === 1
|
||
? viewData.commissionAmount
|
||
: Math.trunc(
|
||
(viewData.commissionRate / 100) *
|
||
viewData.groupPrice *
|
||
100
|
||
) / 100
|
||
}}
|
||
</text>
|
||
<text>积分</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品展示 -->
|
||
<view class="public-product_item">
|
||
<image
|
||
:src="viewData.productImage"
|
||
mode="scaleToFill"
|
||
class="left-img"
|
||
></image>
|
||
<view class="right-content">
|
||
<view>
|
||
<text class="product-name">{{ viewData.productName }}</text>
|
||
<text v-if="viewData.activityType" class="num-box">
|
||
{{ viewData.activityType }} 人拼团
|
||
</text>
|
||
</view>
|
||
<view class="line-box">
|
||
<view class="rmb-box">
|
||
<text></text>
|
||
<text>¥{{ viewData.groupPrice }}</text>
|
||
</view>
|
||
<view
|
||
:class="`_${GROUP_STATUS[viewData.status].class}`"
|
||
class="state-box"
|
||
>
|
||
{{ GROUP_STATUS[viewData.status].name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 人员列表 -->
|
||
<view :class="{ 'bottom-user-list': viewData.status == 0 }">
|
||
<view
|
||
v-for="item in participants"
|
||
:key="item.id"
|
||
class="bottom-list"
|
||
>
|
||
<view class="left-name">
|
||
<image
|
||
v-if="item.avatar"
|
||
:src="item.avatar"
|
||
mode="scaleToFill"
|
||
class="avatar"
|
||
></image>
|
||
<uni-icons
|
||
v-else
|
||
type="contact-filled"
|
||
size="120rpx"
|
||
></uni-icons>
|
||
<text>{{ item.userName }}</text>
|
||
</view>
|
||
<text class="date">加入时间：{{ item.paidTime }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 底部按钮 -->
|
||
<bottom-view v-if="viewData.status == 0">
|
||
<cb-button @click="onShare">分享</cb-button>
|
||
</bottom-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #f9f9f9;
|
||
}
|
||
@import '@/styles/mall.scss';
|
||
@import './styles/detail.scss';
|
||
</style>
|