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.

155 lines
3.3 KiB
Vue

<template>
<view>
<view class="container">
<view class="top-back">
<text @click="navigateBack">{{$t('navbar.back')}}</text>
</view>
<image src="@/static/image/home/activity/series.png" mode="widthFix" class="image1"></image>
<view class="click" @click="goDetail"></view>
<view class="btn" @click="goDetail">
<image src="@/static/image/home/activity/right.png" mode="widthFix"></image>
</view>
</view>
<view class="info">
<view class="content">
<image src="@/static/image/home/title.png" mode="widthFix" class="title"></image>
<image src="http://cdn2.tyfon.com.cn/activity/wen_an.png" mode="widthFix" class="wenan"></image>
<image src="@/static/image/home/activity/from.png" mode="widthFix" class="from"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
collectionsData: [],
CollectionUID: ''
};
},
onLoad: function(option) {
this.seriesItem = JSON.parse(decodeURIComponent(option.detail));
this.getCollections()
},
methods: {
navigateBack() {
uni.switchTab({
url: '/pages/index/index'
});
},
goDetail() {
uni.navigateTo({
url: '/pages/index/activity/detail?CollectionUID=' + this.CollectionUID + '&SeriesName=' + this.seriesItem.SeriesName
})
},
async getCollections(){
let data = {
Page: 1,
PageSize: 99999,
SeriesUID:this.seriesItem.SeriesUuid
};
let res = await this.$api.series.collectionsList(data);
if (res.status === 0) {
// this.collectionsData = res.data.Data;
res.data.Data.forEach(i =>{
if(i.CollectionUID == 'd00c6694-f223-48e7-a9fc-a08d7fe18b1e' || i.Name == '泰丰十周年纪念胸章') {
this.CollectionUID = i.CollectionUID
}
})
} else {
uni.$u.toast(this.$t('load.failed'));
}
}
}
}
</script>
<style lang="scss">
image{
display: block;
}
.image1{
width: 100%;
height: auto;
}
.info{
width: 100%;
background:url('@/static/image/home/activity/bg.png'), #5F000B;
background-position: bottom right;
background-size: contain;
background-repeat: no-repeat;
padding: 72upx 34upx 52upx 34upx;
box-sizing: border-box;
.content{
width: 100%;
background: rgba(11,0,0,0.4);
border-radius: 8upx;
padding: 40upx 26upx 80upx 26upx;
box-sizing: border-box;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
.title{
margin: auto;
width: 300upx;
}
.wenan{
width: 618upx;
margin-top: 24upx;
}
.from{
width: 356upx;
position: absolute;
right: 26upx;
bottom: 52upx;
}
}
}
.container{
position: relative;
.top-back{
width: 68upx;
background: rgba(255, 255, 255, 0.4);
padding: 6upx 32upx;
border-radius: 40upx;
font-size: 28upx;
color: #ffffff;
position: absolute;
top: 50upx;
left: 46upx;
z-index: 2;
}
.click{
position: absolute;
width: 240upx;
height: 304upx;
bottom: 410upx;
left: 50%;
transform: rotateZ(-17deg) translateX(-58%);
}
.btn{
position: absolute;
width: 240upx;
height: 58upx;
display: flex;
justify-content: center;
align-items: center;
background: rgba(62, 0, 7, 1);
border-radius: 40upx;
bottom: 30upx;
left: 50%;
transform: translateX(-50%);
image{
width: 10upx;
margin-left: 10upx;
}
}
}
</style>