540 lines
10 KiB
Vue
540 lines
10 KiB
Vue
<!--
|
|
* @Date: 2023-11-18 13:43:19
|
|
* @LastEditTime: 2024-01-10 14:38:52
|
|
* @Description: content
|
|
-->
|
|
<template>
|
|
<view class="content">
|
|
<uni-nav-bar title="欧气券详情" color="#fff" left-icon="left" backgroundColor="transparent" :border="false"
|
|
:statusBar="true" :fixed="true" @clickLeft="$c.back"></uni-nav-bar>
|
|
|
|
<view v-if="pageData" class="coupon-item">
|
|
<view class="coin">
|
|
<image :src="pageData.level_img" lazy-load></image>
|
|
</view>
|
|
|
|
<view class="info">
|
|
<view class="title">{{ pageData.level_text }}</view>
|
|
|
|
<view class="num">需要{{ pageData.kl_num2 }}个参与者</view>
|
|
</view>
|
|
|
|
<view v-if="true" class="share-ing">
|
|
<view class="share-num">
|
|
<text>
|
|
{{ pageData.yl_count == pageData.kl_num2 ? '已结束' : '分享中' }}
|
|
</text>
|
|
|
|
{{ pageData.yl_count }}/{{ pageData.kl_num2 }}
|
|
</view>
|
|
|
|
<view class="progress">
|
|
<cmd-progress :percent="(pageData.yl_count / pageData.kl_num2) * 100" :show-info="false"
|
|
stroke-color="linear-gradient(90deg, #8036EB 0%, #E830E7 100%);"
|
|
:strokeWidth="5"></cmd-progress>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="share-end">已结束</view>
|
|
</view>
|
|
|
|
<view v-if="pageData" class="hd-card">
|
|
<view class="title">您参与的{{ pageData.level_text }}共获得</view>
|
|
|
|
<view class="num">
|
|
<view class="icon">
|
|
<image :src="$img('/static/img/signJinbi.png')" lazy-load></image>
|
|
</view>
|
|
|
|
{{ pageData.yl_integral_count }}
|
|
</view>
|
|
|
|
<view class="join">
|
|
<template v-if="pageData.yl_count < pageData.kl_num2">
|
|
只要再邀请{{
|
|
pageData.kl_num2 * 1 - pageData.yl_count * 1
|
|
}}位参与者就能开券
|
|
</template>
|
|
|
|
<template v-else>已全部领取</template>
|
|
</view>
|
|
|
|
<view class="share-btn realative">
|
|
<button class="hide" open-type="share"></button>
|
|
|
|
分享好友
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="pageData" class="leader">
|
|
<view class="avatar">
|
|
<image :src="pageData.share_user_headimg" lazy-load></image>
|
|
</view>
|
|
|
|
<view class="info">
|
|
<view class="name hang1">
|
|
{{ pageData.share_user_nickname }}
|
|
</view>
|
|
|
|
<view class="time">{{ pageData.share_time }}</view>
|
|
</view>
|
|
|
|
<view class="money-status">
|
|
<view class="money">{{ pageData.own2 }}</view>
|
|
|
|
<view class="status">已领取</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="pageData" class="join-list">
|
|
<view class="list-hd">
|
|
<view class="title">参与列表</view>
|
|
|
|
<view class="num">
|
|
已参与
|
|
|
|
<text>{{ pageData.yl_count }}/{{ pageData.kl_num2 }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list-item" v-for="(item, i) in pageData.yl_list" :key="i">
|
|
<!-- <view v-if="item.lucky_king == 1" class="win">手气最佳</view> -->
|
|
|
|
<view class="avatar">
|
|
<image :src="item.headimg" lazy-load></image>
|
|
</view>
|
|
|
|
<view class="info">
|
|
<view class="name hang1">
|
|
{{ item.nickname }}
|
|
</view>
|
|
|
|
<view class="time">{{ item.addtime }}</view>
|
|
</view>
|
|
|
|
<view class="money-status">
|
|
<view class="money">{{ item.l_num }}</view>
|
|
|
|
<view class="status">已领取</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
optData: '',
|
|
pageData: ''
|
|
}
|
|
},
|
|
|
|
onShareAppMessage(e) {
|
|
const userInfo = uni.getStorageSync('userinfo')
|
|
|
|
return {
|
|
title: `快来领取${userInfo.nickname}分享的${this.pageData.num}赏币的${this.pageData.level_text}`,
|
|
imageUrl: this.pageData.level_img,
|
|
path: '/pages/user/index' +
|
|
this.$c.qs({
|
|
ou_coupon_id: this.pageData.id
|
|
})
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.optData = options
|
|
|
|
this.getData()
|
|
},
|
|
|
|
methods: {
|
|
getData() {
|
|
this.req({
|
|
url: 'coupon_detail',
|
|
data: {
|
|
coupon_id: this.optData.id
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.pageData = res.data
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
padding-bottom: 30rpx;
|
|
|
|
.coupon-item {
|
|
width: 710rpx;
|
|
height: 186rpx;
|
|
box-sizing: border-box;
|
|
padding-left: 30rpx;
|
|
padding-right: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx auto 0;
|
|
position: relative;
|
|
background: #18112D;
|
|
border-radius: 10rpx;
|
|
|
|
.coin {
|
|
width: 150rpx;
|
|
height: 120rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-left: 30rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.num {
|
|
margin-top: 10rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
|
|
.share-ing {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
|
|
.share-num {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
|
|
background: linear-gradient(0deg,
|
|
#6adeff 0%,
|
|
#7ab5ff 50%,
|
|
#ff7feb 100%);
|
|
background-clip: text;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
width: 150rpx;
|
|
margin-top: 10rpx;
|
|
|
|
::v-deep.cmd-progress-inner {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.share-end {
|
|
padding-right: 20rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
|
|
.hd-card {
|
|
margin: 20rpx auto 0;
|
|
width: 710rpx;
|
|
height: 270rpx;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 0 50rpx;
|
|
position: relative;
|
|
background: url($imgurl+'img/2_money_card_bg.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
}
|
|
|
|
.num {
|
|
min-width: 270rpx;
|
|
box-sizing: border-box;
|
|
// padding: 0 20rpx;
|
|
height: 60rpx;
|
|
// background: linear-gradient(
|
|
// 90deg,
|
|
// rgba(208, 209, 255, 0.2) 0%,
|
|
// rgba(255, 255, 255, 0) 100%
|
|
// );
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx 0;
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
font-size: 36rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.join {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
// .icon {
|
|
// width: 28rpx;
|
|
// height: 28rpx;
|
|
// margin-right: 10rpx;
|
|
// }
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
|
|
// text {
|
|
// color: #d0d1ff;
|
|
// }
|
|
}
|
|
|
|
.share-btn {
|
|
position: absolute;
|
|
right: 40rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 180rpx;
|
|
height: 70rpx;
|
|
background: linear-gradient(90deg, #8036EB 0%, #E830E7 100%);
|
|
border-radius: 35rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.leader {
|
|
margin: 20rpx auto 0;
|
|
width: 690rpx;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(159, 114, 255, 0.5);
|
|
border: 1px solid #9331D4;
|
|
|
|
.avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #9d9d9d;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
width: 300rpx;
|
|
padding-left: 20rpx;
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
|
|
.money-status {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: flex-end;
|
|
|
|
.money {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #08F6BB;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 10rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
}
|
|
|
|
.join-list {
|
|
width: 690rpx;
|
|
margin: 30rpx auto 0;
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(208, 209, 255, 0.2);
|
|
background: #18112D;
|
|
padding: 0 30rpx 10rpx;
|
|
|
|
.list-hd {
|
|
padding: 30rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.num {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
|
|
text {
|
|
color: #08F6BB;
|
|
}
|
|
}
|
|
|
|
.list-item {
|
|
margin-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(208, 209, 255, 0.1);
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
|
|
.win {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 0 10rpx;
|
|
height: 34rpx;
|
|
background: linear-gradient(90deg,
|
|
#6adeff 0%,
|
|
#7ab5ff 50%,
|
|
#ff7feb 100%);
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: 22rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
}
|
|
|
|
.avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #9d9d9d;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
width: 300rpx;
|
|
padding-left: 20rpx;
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
|
|
.money-status {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: flex-end;
|
|
|
|
.money {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #08F6BB;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 10rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |