172 lines
4.1 KiB
Vue
172 lines
4.1 KiB
Vue
<script setup>
|
||
// pages/red-packet/details 红包详情
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { getRedEnvelopeDetail } from '../../api/tui-kit'
|
||
import { ref, computed } from 'vue'
|
||
import { useAuthUser } from '../../composables/useAuthUser'
|
||
|
||
const { userInfo } = useAuthUser()
|
||
|
||
const viewData = ref({})
|
||
const conversationType = ref('')
|
||
const loading = ref(true)
|
||
|
||
/** 是否个人红包详情 */
|
||
const isPersonal = computed(() => conversationType.value === 'C2C')
|
||
const getData = async id => {
|
||
loading.value = true
|
||
const res = await getRedEnvelopeDetail(id)
|
||
viewData.value = res.data
|
||
loading.value = false
|
||
}
|
||
|
||
onLoad(e => {
|
||
conversationType.value = e.type
|
||
getData(e.id)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view>
|
||
<nav-bar>
|
||
<template #back>
|
||
<uni-icons type="back" size="42rpx" color="#ffffff"></uni-icons>
|
||
</template>
|
||
</nav-bar>
|
||
<!-- 顶部半圆样式 -->
|
||
<view class="top-half-circle"></view>
|
||
<view v-if="loading" style="margin-top: 40rpx">
|
||
<uni-load-more status="loading"></uni-load-more>
|
||
</view>
|
||
<view v-else>
|
||
<!-- 发红包人 -->
|
||
<view class="red-envelope-person">
|
||
<view class="name-box">
|
||
<image
|
||
v-if="userInfo?.avatar"
|
||
:src="userInfo?.avatar"
|
||
mode="aspectFill"
|
||
class="avatar"
|
||
></image>
|
||
<uni-icons
|
||
v-else
|
||
type="contact-filled"
|
||
size="54rpx"
|
||
></uni-icons>
|
||
<text>{{ userInfo?.userName }}发出的的红包</text>
|
||
</view>
|
||
<text class="tips">{{ viewData?.title }}</text>
|
||
</view>
|
||
|
||
<!-- 红包信息 -->
|
||
<view class="red-envelope-info">
|
||
<text v-if="isPersonal">
|
||
{{
|
||
viewData.hasReceived
|
||
? `${viewData.remainCount}个红包${viewData.remainAmount}积分`
|
||
: `红包${viewData.remainAmount}积分，等待对方领取`
|
||
}}
|
||
</text>
|
||
<text v-else>1个红包共5.00元</text>
|
||
</view>
|
||
|
||
<!-- 领取人卡片信息 -->
|
||
<view
|
||
v-if="isPersonal && viewData.hasReceived"
|
||
class="red-envelope-card"
|
||
>
|
||
<view class="avatar"></view>
|
||
<view class="right-box">
|
||
<view class="top-name">
|
||
<text>用户名称</text>
|
||
<text>5积分</text>
|
||
</view>
|
||
<text class="date">用户名称</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-half-circle {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
// 使用 border-radius 创建半圆效果
|
||
border-radius: 0 0 50% 50%;
|
||
background: #f05f55;
|
||
}
|
||
|
||
.red-envelope-card {
|
||
padding: 20rpx 32rpx;
|
||
border-bottom: 2rpx solid #f1f1f1;
|
||
display: flex;
|
||
.avatar {
|
||
flex-shrink: 0;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 16rpx;
|
||
background: rgb(197, 139, 139);
|
||
margin-right: 16rpx;
|
||
}
|
||
.right-box {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.top-name {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.date {
|
||
font-size: 28rpx;
|
||
color: #a1a1a1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.red-envelope-info {
|
||
margin-top: 60rpx;
|
||
padding: 20rpx 32rpx;
|
||
border-bottom: 2rpx solid #f1f1f1;
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #a1a1a1;
|
||
}
|
||
}
|
||
|
||
.red-envelope-person {
|
||
margin-top: 38rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.name-box {
|
||
display: flex;
|
||
align-items: center;
|
||
.avatar {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 10rpx;
|
||
background: rgb(190, 133, 133);
|
||
margin-right: 6rpx;
|
||
text {
|
||
line-height: 1;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
.tips {
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #a1a1a1;
|
||
}
|
||
}
|
||
</style>
|