空状态需要处理，需要添加分享页面
This commit is contained in:
cbb
118
pages/shop-together/detail.vue
Normal file
118
pages/shop-together/detail.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { GROUP_STATUS } from '@/constants/mall-data'
|
||||
import { getGroupDetail } from '@/api/mall'
|
||||
import { navigateBack, 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 = () => {
|
||||
console.log('分享')
|
||||
}
|
||||
|
||||
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
|
||||
src="https://wx1.sinaimg.cn/mw690/92eeb099gy1i29hl0ne80j21jk2bcash.jpg"
|
||||
mode="scaleToFill"
|
||||
class="avatar"
|
||||
></image>
|
||||
<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
|
||||
: (viewData.commissionRate / 100) * viewData.groupPrice
|
||||
}}
|
||||
</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品展示 -->
|
||||
<view class="public-product_item">
|
||||
<image
|
||||
:src="viewData.productImage"
|
||||
mode="scaleToFill"
|
||||
class="left-img"
|
||||
></image>
|
||||
<view class="right-content">
|
||||
<text class="product-name">{{ viewData.productName }}</text>
|
||||
<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
|
||||
src="https://wx1.sinaimg.cn/mw690/92eeb099gy1i29hl0ne80j21jk2bcash.jpg"
|
||||
mode="scaleToFill"
|
||||
class="avatar"
|
||||
></image>
|
||||
<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>
|
||||
64
pages/shop-together/index.vue
Normal file
64
pages/shop-together/index.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getMyGroupList } from '@/api/mall'
|
||||
import { ref } from 'vue'
|
||||
import { GROUP_STATUS } from '@/constants/mall-data'
|
||||
import { navigateTo } from '@/utils/router'
|
||||
|
||||
const list = ref([])
|
||||
const getData = async () => {
|
||||
const res = await getMyGroupList()
|
||||
list.value = res.data
|
||||
console.log(res.data)
|
||||
}
|
||||
|
||||
const onGo = id => {
|
||||
navigateTo('/pages/shop-together/detail', { id })
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="shop-together">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="public-product_item"
|
||||
@click="onGo(item.id)"
|
||||
>
|
||||
<image
|
||||
:src="item.productImage"
|
||||
mode="scaleToFill"
|
||||
class="left-img"
|
||||
></image>
|
||||
<view class="right-content">
|
||||
<text class="product-name">{{ item.productName }}</text>
|
||||
<view class="line-box">
|
||||
<view class="rmb-box">
|
||||
<text></text>
|
||||
<text>¥{{ item.totalAmount }}</text>
|
||||
</view>
|
||||
<view
|
||||
:class="`_${GROUP_STATUS[item.status].class}`"
|
||||
class="state-box"
|
||||
>
|
||||
{{ GROUP_STATUS[item.status].name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
@import '@/styles/mall.scss';
|
||||
.shop-together {
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
</style>
|
||||
113
pages/shop-together/styles/detail.scss
Normal file
113
pages/shop-together/styles/detail.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
.shop-together {
|
||||
padding: 32rpx 26rpx;
|
||||
|
||||
.top-user {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 70rpx 32rpx 34rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
.state-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(180deg, #00d993 0%, #00d9c5 100%);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 16rpx 0rpx 16rpx 0rpx;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.left-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
.name-box {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
&:last-child {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #00d9c5;
|
||||
&:last-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-user-list {
|
||||
margin-bottom: 130rpx;
|
||||
}
|
||||
|
||||
.bottom-list + .bottom-list {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.bottom-list {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
|
||||
.left-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 90rpx;
|
||||
margin-right: 20rpx;
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user