You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
8.7 KiB
Vue
368 lines
8.7 KiB
Vue
<template>
|
|
<view class="main">
|
|
<feedback :showQa="showQa" @closeFeed ='closeFeed'/>
|
|
<navBar :navTitle="'消息'" :hasRight="true" :stickyShow="stickyShow" :currentPage="'pages/mine/index'" :backBackGroundColor="'#699A70'" @clickRight="clickRight"/>
|
|
<view class="list">
|
|
<scroll-view style="width: 100%; height: calc(100vh - 200upx); position: relative" scroll-y="true">
|
|
<view
|
|
class="card"
|
|
v-for="item in indexList"
|
|
:key="item.Uuid"
|
|
:style="!item.Clicked ||!item.Claimed? 'background-color: #E4E4E4;':'background-color: #FFFFFF;' "
|
|
@click="openKt(item)"
|
|
>
|
|
<view class="avtor"><image class="avtimg" :src="item.PicUrl"></image></view>
|
|
<view class="item">
|
|
<view class="item-txt">
|
|
<view v-if="item.DropOrAnnounce === 0" class="kt">{{$t('airdrop')}}</view>
|
|
<view v-else class="gonggao">{{$t('announcement')}}</view>
|
|
<view v-if="item.DropOrAnnounce === 0" class="title">{{ item.Series }}</view>
|
|
<view v-else class="title">{{ item.Title }}</view>
|
|
<image
|
|
v-if="!item.Clicked&& item.DropOrAnnounce === 0"
|
|
class="dian"
|
|
src="../../../static/image/mine/dian.png"
|
|
></image>
|
|
</view>
|
|
<view class="item-txt" style="margin-top: 10upx">
|
|
<view v-if="item.DropOrAnnounce === 0" class="content">{{ item.Desc }}</view>
|
|
<view v-else class="content" v-html="item.Content"></view>
|
|
<!-- <view style="font-size: 12upx;color: rgba(255, 255, 255, 0.3);">{{ item.TimeFormat }}</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<u-popup :show="showKt" mode="center" @close="closePop" bgColor="transparent">
|
|
<view class="popupLocale-box">
|
|
<view style="padding-left: 190upx; padding-right: 190upx">
|
|
<view v-if="!this.isMsgDetail" class="title">{{$t('airdrop')}}</view>
|
|
<view v-else style="background-color: #EDC466;" class="title">{{$t('announcement')}}</view>
|
|
</view>
|
|
<view class="item"><image style="width: 600upx; height: 600upx" :src="listItem.PicUrl"></image></view>
|
|
<view
|
|
style="
|
|
color: #000;
|
|
margin-top: 10upx;
|
|
margin-bottom: 10upx;
|
|
font-size: 40upx;
|
|
"
|
|
>
|
|
{{ this.isMsgDetail ? listItem.Title : listItem.Collection }}
|
|
</view>
|
|
<view v-if="!this.isMsgDetail" style="color: #6c6c6c; margin-top: 10upx; margin-bottom: 10upx">
|
|
{{ listItem.Desc }}
|
|
</view>
|
|
<view v-else style="color: #6c6c6c; margin-top: 10upx; margin-bottom: 10upx" v-html="listItem.Content"></view>
|
|
</view>
|
|
<view style="display: flex">
|
|
<u-button
|
|
v-if="listItem.Claimed === 0 && !this.isMsgDetail"
|
|
:text="$t('to.accept')"
|
|
|
|
@click="recive"
|
|
style="width: 460rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;background: #699A70;
|
|
border: none;
|
|
color:#fff;"
|
|
></u-button>
|
|
<u-button
|
|
v-if="listItem.Clicked === 0 && this.isMsgDetail"
|
|
:text="$t('read')"
|
|
@click="readMsg"
|
|
style="
|
|
width: 460rpx;
|
|
height: 56rpx;
|
|
border-radius: 40rpx;
|
|
margin-top: 30rpx;
|
|
background: #699A70;
|
|
border: none;
|
|
color:#fff;
|
|
"
|
|
></u-button>
|
|
<u-button
|
|
v-if="listItem.Clicked === 1 && this.isMsgDetail"
|
|
:text="$t('close')"
|
|
|
|
@click="closePop"
|
|
style="
|
|
width: 460rpx;
|
|
height: 56rpx;
|
|
border-radius: 40rpx;
|
|
margin-top: 30rpx;
|
|
background: #699A70;
|
|
border: none;
|
|
color:#fff;
|
|
"
|
|
></u-button>
|
|
<u-button
|
|
v-if="listItem.Claimed === 1 && !this.isMsgDetail"
|
|
:text="$t('close')"
|
|
|
|
@click="closePop"
|
|
style="width: 460rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;background: #699A70;
|
|
border: none;
|
|
color:#fff;"
|
|
></u-button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import feedback from '../feedback/feedback.vue';
|
|
|
|
export default {
|
|
components:{
|
|
feedback
|
|
},
|
|
data() {
|
|
return {
|
|
showKt: false,
|
|
stickyShow: false,
|
|
indexList: [],
|
|
listItem: {},
|
|
isMsgDetail: false,
|
|
showQa:false
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.loadmore();
|
|
},
|
|
onPageScroll(e) {
|
|
this.stickyShow = e.scrollTop > 5 ? true : false;
|
|
},
|
|
methods: {
|
|
closePop() {
|
|
this.showKt = false;
|
|
this.loadmore();
|
|
this.canScroll();
|
|
},
|
|
// 打开空头详情
|
|
async openKt(item) {
|
|
this.listItem = item;
|
|
// console.log(this.listItem);
|
|
if (this.listItem.DropOrAnnounce === 0) {
|
|
this.isMsgDetail = false;
|
|
await this.clickDetail();
|
|
} else {
|
|
this.isMsgDetail = true;
|
|
}
|
|
|
|
this.showKt = true;
|
|
this.stopScroll();
|
|
},
|
|
// 阅读
|
|
async readMsg(){
|
|
let data = {
|
|
Uuid: this.listItem.Uuid,
|
|
Clicked: this.listItem.Clicked
|
|
};
|
|
let res = await this.$api.airdrop.readMsg(data);
|
|
if (res.status === 0) {
|
|
this.showKt = false;
|
|
this.canScroll();
|
|
this.loadmore();
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
},
|
|
// 查看详情
|
|
async clickDetail() {
|
|
let data = {
|
|
Collection: this.listItem.Collection,
|
|
Desc: this.listItem.Desc,
|
|
PicUrl: this.listItem.PicUrl,
|
|
Series: this.listItem.Series,
|
|
Uuid: this.listItem.Uuid,
|
|
Clicked: this.listItem.Clicked
|
|
};
|
|
let res = await this.$api.airdrop.collectionSepcific(data);
|
|
if (res.status === 0) {
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
},
|
|
// 加载空投列表
|
|
async loadmore() {
|
|
let res = await this.$api.airdrop.collectionList();
|
|
if (res.status === 0) {
|
|
this.indexList = res.data.Data;
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
},
|
|
|
|
// 接受1
|
|
async recive() {
|
|
let data = {
|
|
UserId: uni.getStorageSync('mall-user-info').ID,
|
|
Uuid: this.listItem.Uuid
|
|
};
|
|
|
|
let res = await this.$api.airdrop.getCollection(data);
|
|
if (res.status === 0) {
|
|
this.step2(this.listItem.CollectionUid);
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
},
|
|
// 接受1
|
|
async step2(id) {
|
|
let data = {
|
|
collectionsUID: id,
|
|
userAirdropUuid: this.listItem.Uuid
|
|
};
|
|
let res = await this.$api.airdrop.getCollectionStepTwo(data);
|
|
if (res.status === 0) {
|
|
this.showKt = false;
|
|
this.canScroll();
|
|
this.loadmore();
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
},
|
|
clickRight() {
|
|
this.showQa = true;
|
|
},
|
|
closeFeed(isShow){
|
|
this.showQa = isShow
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #F5F5F5;
|
|
// background-size: 100% 100%;
|
|
// background-attachment: fixed;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
.main {
|
|
height: 100%;
|
|
padding: 36upx 32upx;
|
|
.list {
|
|
height: 100%;
|
|
}
|
|
// .u-popup /deep/ .u-transition {
|
|
// background-color: rgba(0, 0, 0, 0.9) !important;
|
|
// }
|
|
.popupLocale-box {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
width: 582rpx;
|
|
overflow: hidden;
|
|
padding: 30rpx 42rpx;
|
|
.title {
|
|
// background-color: rgba(88, 146, 255, 0.6);
|
|
background: rgba(105,154,112, 0.6);
|
|
font-size: 40rpx;
|
|
|
|
border-radius: 40upx;
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.u-button {
|
|
width: 260rpx;
|
|
height: 56rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.card {
|
|
width: 100%;
|
|
height: 200upx;
|
|
border-radius: 8upx;
|
|
text-align: center;
|
|
margin-bottom: 20upx;
|
|
display: inline-flex;
|
|
// background: #FFFFFF;
|
|
.avtor {
|
|
width: 220upx;
|
|
margin-top: 30upx;
|
|
height: 100%;
|
|
display: block;
|
|
align-items: center;
|
|
.avtimg {
|
|
width: 144upx;
|
|
height: 144upx;
|
|
}
|
|
}
|
|
.item {
|
|
flex: 1;
|
|
height: 100%;
|
|
padding-right: 20upx;
|
|
position: relative;
|
|
.happy {
|
|
position: absolute;
|
|
width: 181upx;
|
|
height: 176upx;
|
|
right: 0;
|
|
}
|
|
.item-txt {
|
|
margin-top: 30upx;
|
|
display: inline-flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
position: relative;
|
|
.kt {
|
|
padding: 4upx 16upx ;
|
|
// background-color: #558bf2;
|
|
background: #699A70;
|
|
border-radius: 30upx;
|
|
margin-right: 10upx;
|
|
font-size: 24upx;
|
|
}
|
|
.gonggao {
|
|
padding: 4upx 16upx ;
|
|
background-color: #edc466;
|
|
border-radius: 30upx;
|
|
margin-right: 10upx;
|
|
font-size: 24upx;
|
|
}
|
|
.title {
|
|
width: 290upx;
|
|
font-size: 34upx;
|
|
line-height: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
word-break: break-all;
|
|
color: #434343;
|
|
text-align: left;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.dian {
|
|
width: 40upx;
|
|
height: 40upx;
|
|
position: absolute;
|
|
right: 20upx;
|
|
}
|
|
.content {
|
|
width: 300upx;
|
|
height: 80upx;
|
|
word-break: break-all;
|
|
text-align: left;
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行
|
|
-webkit-box-orient: vertical;
|
|
color: #878787;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|