福利屋
This commit is contained in:
parent
7972cb88d3
commit
a1397f0aa1
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
<view class="center" style="width: 100%; margin-top: 30rpx;">
|
||||
<view class="tab">
|
||||
<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '购买说明')">
|
||||
<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '规则说明')">
|
||||
<text>规则说明</text>
|
||||
</view>
|
||||
<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
|
||||
|
|
|
|||
|
|
@ -5,9 +5,13 @@
|
|||
-->
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-nav-bar title="签到任务" color="#fff" left-icon="left" backgroundColor="transparent" :border="false"
|
||||
<uni-nav-bar title="签到任务" color="#000000" left-icon="left" backgroundColor="transparent" :border="false"
|
||||
:statusBar="true" :fixed="true" @clickLeft="$c.back()"></uni-nav-bar>
|
||||
|
||||
<view class="" style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 56rpx auto 0;">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="page-hd">
|
||||
<view class="title">签到任务</view>
|
||||
|
||||
|
|
@ -77,232 +81,232 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
signData: [],
|
||||
sucData: '',
|
||||
is_sign: 0
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
doSign() {
|
||||
this.req({
|
||||
url: 'sign_add',
|
||||
data: {},
|
||||
success: res => {
|
||||
if (res.status == 1) {
|
||||
this.sucData = res.data
|
||||
|
||||
this.$refs.sucPop.open()
|
||||
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
})
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
signData: [],
|
||||
sucData: '',
|
||||
is_sign: 0
|
||||
}
|
||||
},
|
||||
|
||||
getData() {
|
||||
this.req({
|
||||
url: 'sign',
|
||||
data: {},
|
||||
success: res => {
|
||||
if (res.status == 1) {
|
||||
this.signData = res.data.sign
|
||||
this.is_sign = res.data.sign.is_sign
|
||||
onLoad(options) {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
doSign() {
|
||||
this.req({
|
||||
url: 'sign_add',
|
||||
data: {},
|
||||
success: res => {
|
||||
if (res.status == 1) {
|
||||
this.sucData = res.data
|
||||
|
||||
this.$refs.sucPop.open()
|
||||
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
getData() {
|
||||
this.req({
|
||||
url: 'sign',
|
||||
data: {},
|
||||
success: res => {
|
||||
if (res.status == 1) {
|
||||
this.signData = res.data.sign
|
||||
this.is_sign = res.data.sign.is_sign
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 1rpx 0 40rpx;
|
||||
|
||||
.page-hd {
|
||||
padding: 20rpx 30rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 60rpx;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow: 0rpx 0rpx 12rpx rgba(255, 135, 58, 0.8);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sign-box {
|
||||
width: 710rpx;
|
||||
.content {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 40rpx 40rpx;
|
||||
margin: 30rpx auto 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
padding: 1rpx 0 40rpx;
|
||||
|
||||
.sign-item {
|
||||
width: 150rpx;
|
||||
height: 165rpx;
|
||||
background: #ff873a;
|
||||
border-radius: 20rpx;
|
||||
.page-hd {
|
||||
padding: 20rpx 30rpx 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
|
||||
.day {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
.title {
|
||||
font-size: 60rpx;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
color: #dddddd;
|
||||
color: #ffffff;
|
||||
text-shadow: 0rpx 0rpx 12rpx rgba(255, 135, 58, 0.8);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.sign-box {
|
||||
width: 710rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 40rpx 40rpx;
|
||||
margin: 30rpx auto 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
&.act {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '已签';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Alimama ShuHeiTi;
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
width: 310rpx;
|
||||
.sign-item {
|
||||
width: 150rpx;
|
||||
height: 165rpx;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-around;
|
||||
background: #ff873a;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
|
||||
.item-l {
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
|
||||
.num {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.day {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 120rpx;
|
||||
height: 100rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
>image:nth-child(1) {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
.num {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&.act {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '已签';
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 10rpx;
|
||||
transform: rotate(-28deg);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Alimama ShuHeiTi;
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
width: 310rpx;
|
||||
height: 165rpx;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.item-l {
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
|
||||
.num {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
>image:nth-child(2) {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
.icon {
|
||||
width: 120rpx;
|
||||
height: 100rpx;
|
||||
|
||||
>image:nth-child(1) {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 10rpx;
|
||||
transform: rotate(-28deg);
|
||||
}
|
||||
|
||||
>image:nth-child(2) {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sign-btn {
|
||||
margin: 40rpx auto 0;
|
||||
width: 400rpx;
|
||||
height: 122rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.signYes {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.signNo {
|
||||
color: #FFFFFF;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.suc-pop {
|
||||
width: 100vw;
|
||||
height: 642rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.coin-img {
|
||||
width: 345rpx;
|
||||
height: 345rpx;
|
||||
}
|
||||
|
||||
.coin-num {
|
||||
.sign-btn {
|
||||
margin: 40rpx auto 0;
|
||||
width: 400rpx;
|
||||
height: 122rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 378rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translate(-50%, 200%);
|
||||
.signYes {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.signNo {
|
||||
color: #FFFFFF;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.suc-pop {
|
||||
width: 100vw;
|
||||
height: 642rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.coin-img {
|
||||
width: 345rpx;
|
||||
height: 345rpx;
|
||||
}
|
||||
|
||||
.coin-num {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 378rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translate(-50%, 200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
pages.json
28
pages.json
|
|
@ -435,6 +435,34 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/infinite/daily_check_in",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/infinite/bonus_house",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/infinite/bonus_house_details",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/infinite/VIP_perks",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
|
|
|
|||
60
pages/infinite/VIP_perks.vue
Normal file
60
pages/infinite/VIP_perks.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="title1">VIP福利</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -2,6 +2,11 @@
|
|||
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||
</view>
|
||||
|
||||
<view class="title1">福利</view>
|
||||
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
||||
<view class="list relative">
|
||||
|
|
@ -75,13 +80,13 @@
|
|||
}
|
||||
},
|
||||
onShow() {
|
||||
this.current = 0
|
||||
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||||
this.$mp.page.getTabBar().setData({
|
||||
selected: 1
|
||||
});
|
||||
}
|
||||
// this.current = 0
|
||||
// const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||
// if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||||
// this.$mp.page.getTabBar().setData({
|
||||
// selected: 1
|
||||
// });
|
||||
// }
|
||||
},
|
||||
onLoad() {
|
||||
let that = this
|
||||
|
|
@ -114,6 +119,18 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
|
|
@ -123,7 +140,7 @@
|
|||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 100;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.activeImg {
|
||||
|
|
|
|||
325
pages/infinite/bonus_house.vue
Normal file
325
pages/infinite/bonus_house.vue
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||
</view>
|
||||
|
||||
<view class="title1">福利屋</view>
|
||||
|
||||
<view class="" style="height: 232rpx;"></view>
|
||||
|
||||
<view class=""
|
||||
style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 0 auto 0;">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="center" style="width: 100%; margin-top: 30rpx;">
|
||||
<view class="tab">
|
||||
<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '规则说明')">
|
||||
<text>规则说明</text>
|
||||
</view>
|
||||
<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
|
||||
<text>进行中</text>
|
||||
</view>
|
||||
<view class="tab-item3 center" :class="[tabCur == 2 ? 'act' : 'unact']" @click="tabChange(2)">
|
||||
<text>已结束</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 进行中 -->
|
||||
<view v-if="tabCur == 1" class=""
|
||||
style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
|
||||
<scroll-view scroll-y="true" style=" height: 760rpx;">
|
||||
<view class="relative" v-for="(item,index) in benefitsData" @click="$c.to({url: '/pages/infinite/bonus_house_details'})"
|
||||
style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
|
||||
|
||||
<text
|
||||
style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{item.title}}</text>
|
||||
<text
|
||||
style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{item.tips}}</text>
|
||||
|
||||
<view class="center"
|
||||
style="width: 128rpx; height: 60rpx; background-color: #D8FD24; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
|
||||
<text style="font-size: 20rpx; color: #333333; font-weight: 600;">马上参与</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x="true"
|
||||
style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
|
||||
<view v-for="(item1,index) in item.GoodsList" class="relative" :key="index1"
|
||||
style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
|
||||
|
||||
<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
|
||||
style="width: 100%; height: 100%; position: absolute;"></image>
|
||||
<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
|
||||
<view class="center"
|
||||
style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
|
||||
<text style="font-size: 18rpx; color: #fff;">x{{item1.num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class=""
|
||||
style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
|
||||
</view>
|
||||
<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
|
||||
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||
<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{item.Popularity}}</text>
|
||||
</view>
|
||||
<text
|
||||
style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{item.Time}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 已结束 -->
|
||||
<view v-else class="" style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
|
||||
<scroll-view scroll-y="true" style=" height: 760rpx;">
|
||||
<view class="relative" v-for="(item,index) in benefitsData"
|
||||
style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
|
||||
|
||||
<text
|
||||
style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{item.title}}</text>
|
||||
<text
|
||||
style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{item.tips}}</text>
|
||||
|
||||
<view class="center"
|
||||
style="width: 128rpx; height: 60rpx; background-color: #333333; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
|
||||
<text style="font-size: 20rpx; color: #D8FD24; font-weight: 600;">已结束</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x="true"
|
||||
style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
|
||||
<view v-for="(item1,index1) in item.GoodsList" class="relative" :key="index1"
|
||||
style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
|
||||
|
||||
<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
|
||||
style="width: 100%; height: 100%; position: absolute;"></image>
|
||||
<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
|
||||
<view class="center"
|
||||
style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
|
||||
<text style="font-size: 18rpx; color: #fff;">x{{item1.num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class=""
|
||||
style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
|
||||
</view>
|
||||
<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
|
||||
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||
<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{item.Popularity}}</text>
|
||||
</view>
|
||||
<text
|
||||
style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{item.Time}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="row center" style="margin-top: 20rpx;">
|
||||
<view class="center" style="width: 220rpx; height: 72rpx; background-color: #333333; border-radius: 16rpx;">
|
||||
<text style="font-size: 24rpx; color: #D8FD24;">我的卡券</text>
|
||||
</view>
|
||||
<view class="center" style="width: 220rpx; height: 72rpx; background-color: #D8FD24; border-radius: 16rpx; margin-left: 38rpx;">
|
||||
<text style="font-size: 24rpx; color: #333333;">赏品记录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<rule-pop ref="rulePop"></rule-pop>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabCur: 1,
|
||||
benefitsData: [{
|
||||
title: "新人消费满5元福利屋",
|
||||
tips: "消费返利（所有参与者有机会获得奖励",
|
||||
isOngoing: true, //是否进行中
|
||||
Popularity: 52, //热度
|
||||
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||
GoodsList: [{
|
||||
imgUrl: "", //赏品图
|
||||
num: 1, //数量
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, ],
|
||||
}, {
|
||||
title: "新人消费满10元福利屋",
|
||||
tips: "消费返利（所有参与者有机会获得奖励",
|
||||
isOngoing: true, //是否进行中
|
||||
Popularity: 52, //热度
|
||||
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||
GoodsList: [{
|
||||
imgUrl: "", //赏品图
|
||||
num: 1, //数量
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, ]
|
||||
}, {
|
||||
title: "新人消费满15元福利屋",
|
||||
tips: "消费返利（所有参与者有机会获得奖励",
|
||||
isOngoing: true, //是否进行中
|
||||
Popularity: 52, //热度
|
||||
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||
GoodsList: [{
|
||||
imgUrl: "", //赏品图
|
||||
num: 1, //数量
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
}, ]
|
||||
}, ],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(i) {
|
||||
this.tabCur = i
|
||||
switch (Number(i)) {
|
||||
case 1:
|
||||
this.getData()
|
||||
break
|
||||
case 2:
|
||||
this.getData()
|
||||
this.subTabChange(this.subTabCur)
|
||||
break
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab-item1 {
|
||||
width: 160rpx;
|
||||
height: 92rpx;
|
||||
font-weight: 400;
|
||||
margin-right: 30rpx;
|
||||
background: url($imgurl + "index/uncheckTab1.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>text {
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item2 {
|
||||
width: 160rpx;
|
||||
height: 92rpx;
|
||||
font-weight: 400;
|
||||
margin-right: 30rpx;
|
||||
|
||||
&.act {
|
||||
background: url($imgurl + "index/checkTab2.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>text {
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.unact {
|
||||
background: url($imgurl + "index/uncheckTab2.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>text {
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item3 {
|
||||
width: 160rpx;
|
||||
height: 92rpx;
|
||||
font-weight: 400;
|
||||
|
||||
&.act {
|
||||
background: url($imgurl + "index/checkTab3.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>text {
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.unact {
|
||||
background: url($imgurl + "index/uncheckTab3.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>text {
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
345
pages/infinite/bonus_house_details.vue
Normal file
345
pages/infinite/bonus_house_details.vue
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||
</view>
|
||||
|
||||
<view class="title1">福利屋详情</view>
|
||||
|
||||
<view style="height: 232rpx;">
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="relative"
|
||||
style="width: 686rpx; height: 152rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 0 auto;">
|
||||
|
||||
<image style="width: 108rpx; height: 108rpx;position: absolute; left: 24rpx; top: 22rpx;"
|
||||
:src="$img1('checkin/logo2.png')"></image>
|
||||
|
||||
<text
|
||||
style="font-size: 24rpx; color: #333333; position: absolute; left: 146rpx; top: 34rpx;">{{bonusDetailsData.Title}}</text>
|
||||
|
||||
<text
|
||||
style="font-size: 18rpx; color: #FF862D; position: absolute; left: 146rpx; top: 68rpx;">{{bonusDetailsData.Tips}}</text>
|
||||
|
||||
<text
|
||||
style="font-size: 16rpx; color: #999999; position: absolute; left: 146rpx; top: 102rpx;">{{bonusDetailsData.Time}}</text>
|
||||
|
||||
<view class="row center" style="position: absolute; left: 470rpx; top: 68rpx;">
|
||||
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||
<text
|
||||
style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{bonusDetailsData.Popularity}}</text>
|
||||
</view>
|
||||
|
||||
<image style="width: 50rpx; height: 50rpx; position: absolute; top: 50rpx; right: 24rpx;"
|
||||
:src="$img1('checkin/ic_share.png')" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class=""
|
||||
style="width: 686rpx; height: 1010rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 24rpx auto 0;">
|
||||
|
||||
<view class="tab">
|
||||
<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
|
||||
:class="tabCur == i?'act':'unact'" @click="tabChange(i)">
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 赏品预览 -->
|
||||
<scroll-view v-if="tabCur==0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
||||
<view style="height: 60rpx;"></view>
|
||||
<view class="" style="width: 544rpx; height: 500rpx; background-color: #999999; margin: 0 auto 0;">
|
||||
</view>
|
||||
|
||||
<view class="grid-container">
|
||||
<view class="grid-item column align-center" v-for="(item,index) in bonusDetailsData.GoodsList"
|
||||
style="">
|
||||
|
||||
<image style="width: 112rpx; height: 112rpx;background-color: #D8D8D8; border-radius: 16rpx;"
|
||||
:src="$img1('checkin/gem2.png')" mode=""></image>
|
||||
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{item.Price}}</text>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<scroll-view v-if="tabCur==1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<image :src="item.Avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view v-if="tabCur==2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center relative" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<image :src="item.Avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="row center" style="position: absolute; right: 56rpx;">
|
||||
<image v-if="index==0" :src="$img1('checkin/Jackpot.png')" style="width: 46rpx; height: 26rpx;"
|
||||
mode=""></image>
|
||||
<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="column align-center"
|
||||
style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
|
||||
|
||||
<view class="center"
|
||||
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
|
||||
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
|
||||
</view>
|
||||
<text
|
||||
style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：0天06：29：19</text>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabCur: 0,
|
||||
bonusDetailsData: {
|
||||
Title: "新人消费满5元福利屋",
|
||||
Tips: "消费返利（所有参与者有机会获得奖励",
|
||||
Time: "2025-03-10 14:00",
|
||||
Popularity: 52, //热度
|
||||
GoodsList: [{
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, ],
|
||||
PlayerList: [{
|
||||
Avatar: "", //头像
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, ]
|
||||
},
|
||||
|
||||
tabList: [
|
||||
"赏品预览", "参与人数", "赏品记录"
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
tabChange(i) {
|
||||
this.tabCur = i
|
||||
|
||||
switch (i) {
|
||||
case 0:
|
||||
this.subTabChange(this.subTabCur)
|
||||
break
|
||||
default:
|
||||
this.listData = []
|
||||
|
||||
this.mescroll.resetUpScroll()
|
||||
this.mescroll.scrollTo(0, 0)
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 60rpx;
|
||||
|
||||
|
||||
.tab-item {
|
||||
width: 155rpx;
|
||||
height: 68rpx;
|
||||
position: relative;
|
||||
margin-right: 25rpx;
|
||||
|
||||
&.act {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.unact {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 134rpx);
|
||||
gap: 24rpx;
|
||||
width: 580rpx;
|
||||
margin: 28rpx auto 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 112rpx;
|
||||
height: 150rpx;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
300
pages/infinite/daily_check_in.vue
Normal file
300
pages/infinite/daily_check_in.vue
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
<!-- 每日签到 -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||
</view>
|
||||
|
||||
<view class="title1">签到</view>
|
||||
|
||||
<view class="" style="height: 232rpx;"></view>
|
||||
|
||||
<view class=""
|
||||
style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 0 auto 0;">
|
||||
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 686rpx; height: 838rpx; background-color: #fff; margin: 40rpx auto 0; border-radius: 16rpx;">
|
||||
|
||||
<view class="center" style="padding-top: 24rpx;">
|
||||
<text style="color: #8A8A8A; font-size: 28rpx;">累计签到<text
|
||||
style="color: #96B050;">{{checkinData.TotalCheckins}}</text>天</text>
|
||||
</view>
|
||||
|
||||
<!-- 累计签到 -->
|
||||
<view style="width: 100%; overflow: hidden;">
|
||||
<scroll-view class="relative" scroll-x="true"
|
||||
style="white-space: nowrap; margin-left: 58rpx; margin-top: 24rpx;">
|
||||
<view class=""
|
||||
style="width: 100%; height: 4rpx; background-color: #F3F3F3;position: absolute; top: 42rpx; left: 10rpx;">
|
||||
</view>
|
||||
<view class="relative"
|
||||
style="width: 71.7rpx; height: 102rpx;display: inline-block; margin-right: 94rpx;"
|
||||
v-for="(item,index) in checkinData.TotalCheckinList" :key="index">
|
||||
|
||||
<image :src="$img('/static/checkin/Claim.png')"
|
||||
style="width: 71.7rpx; height: 72rpx; position: absolute;" mode=""></image>
|
||||
|
||||
<image v-if="item.isClaim" :src="$img('/static/checkin/Claimed.png')"
|
||||
style="width: 71.7rpx; height: 72rpx; position: absolute;" mode=""></image>
|
||||
|
||||
<text
|
||||
style="width: 100%; text-align: center; position: absolute; bottom: 0rpx; color: #8A8A8A; font-size: 18rpx;">
|
||||
累计
|
||||
<text style="color: #96B050;">{{item.Days}}</text>
|
||||
天
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 签到列表 -->
|
||||
<view class="justify-center" style="margin-top: 24rpx;">
|
||||
|
||||
<scroll-view scroll-y="true" style="width: 632rpx; height: 600rpx;">
|
||||
<view class="grid-container">
|
||||
<view class="grid-item" v-for="(item,index) in checkinData.CheckinList" style="">
|
||||
|
||||
<image :src="$img('/static/checkin/Claim2.png')">
|
||||
</image>
|
||||
|
||||
<image v-if="item.isExpired && !item.isClaim" style="z-index: 10;"
|
||||
:src="$img('/static/checkin/Expired.png')" mode=""></image>
|
||||
|
||||
<image v-if="item.isExpired && item.isClaim" style="z-index: 10;"
|
||||
:src="$img('/static/checkin/Claimed2.png')" mode=""></image>
|
||||
|
||||
<image v-if="item.isToday" :src="$img('/static/checkin/ClaimBorder.png')" mode="">
|
||||
</image>
|
||||
|
||||
<text class="day">第{{item.Day}}天</text>
|
||||
<text class="reward">{{item.Reward}}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 签到按钮 -->
|
||||
|
||||
<view class="justify-center" style="width: 100%; height: 198rpx; background-color: #fff; margin-top: -10rpx;">
|
||||
|
||||
<view class="align-center column">
|
||||
<view class="center"
|
||||
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; margin-top: 32rpx;">
|
||||
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">每日签到</text>
|
||||
</view>
|
||||
<text
|
||||
style="color: #8A8A8A; font-size: 20rpx; margin-top: 12rpx;">签到条件：{{checkinData.Requirement}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
checkinData: {
|
||||
TotalCheckins: 10, //累计签到天数
|
||||
Requirement: "任意消费100钻石",
|
||||
TotalCheckinList: [{ //累计签到列表
|
||||
isClaim: true, //是否领取
|
||||
Days: 3, //累计天数
|
||||
}, {
|
||||
isClaim: false,
|
||||
Days: 7,
|
||||
}, {
|
||||
isClaim: false,
|
||||
Days: 10,
|
||||
}, {
|
||||
isClaim: false,
|
||||
Days: 15,
|
||||
}, {
|
||||
isClaim: false,
|
||||
Days: 31,
|
||||
}],
|
||||
CheckinList: [ //签到日期
|
||||
{
|
||||
isExpired: true, //是否过期
|
||||
isClaim: false, //是否签到
|
||||
isToday: false, //是否是当天
|
||||
Day: 1, //第几天
|
||||
Reward: "100钻石", //奖励内容
|
||||
},
|
||||
{
|
||||
isExpired: true,
|
||||
isClaim: true,
|
||||
isToday: false,
|
||||
Day: 2,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: true,
|
||||
Day: 3,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 4,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 5,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
}, {
|
||||
isExpired: false,
|
||||
isClaim: false,
|
||||
isToday: false,
|
||||
Day: 6,
|
||||
Reward: "100钻石",
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 140rpx);
|
||||
gap: 26rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 140rpx;
|
||||
height: 172rpx;
|
||||
position: relative;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.day {
|
||||
position: absolute;
|
||||
font-size: 18rpx;
|
||||
color: #96B152;
|
||||
top: 12rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.reward {
|
||||
position: absolute;
|
||||
font-size: 20rpx;
|
||||
color: #96B050;
|
||||
white-space: nowrap;
|
||||
bottom: 10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,13 @@
|
|||
<view class="content">
|
||||
<view class="title1">福利</view>
|
||||
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
||||
|
||||
|
||||
<view class="grid-container" style="width: 100%; padding: 0 32rpx; margin-top: 40rpx;">
|
||||
<view class="grid-item" v-for="(item,index) in list" @click="toPage(item.id)"
|
||||
style=" height: 184rpx; background-color: #D8D8D8;">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -13,10 +19,69 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
list: [{
|
||||
id: 1,
|
||||
name: "每日签到"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "福利屋"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "VIP福利"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "口令红包"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "消费补贴"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "周卡月卡"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "积分赏池"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
methods: {
|
||||
|
||||
//跳转页面
|
||||
toPage(id) {
|
||||
|
||||
switch (id) {
|
||||
case 1:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/daily_check_in'
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/bonus_house'
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/VIP_perks'
|
||||
})
|
||||
break;
|
||||
case 6:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/benefit'
|
||||
})
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.current = 0
|
||||
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||
|
|
@ -31,6 +96,15 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
/* padding-top: 1rpx; */
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
|
|
@ -43,324 +117,17 @@
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.activeImg {
|
||||
position: absolute;
|
||||
width: 32rpx !important;
|
||||
height: 16rpx !important;
|
||||
bottom: -20rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 324rpx);
|
||||
/* 三列，每列宽度相等 */
|
||||
gap: 40rpx 42rpx;
|
||||
/* 网格之间的间隔 */
|
||||
}
|
||||
|
||||
.pop {
|
||||
width: 607rpx;
|
||||
// height: 904rpx;
|
||||
padding-top: 70rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.pop_title {
|
||||
font-size: 36rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pop_con {
|
||||
padding: 30rpx 40rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 100%);
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
width: 750rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.header-left-title {
|
||||
width: 104rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
|
||||
.image1 {
|
||||
width: 117rpx;
|
||||
height: 46rpx;
|
||||
background: url('https://baoku.languowangluo.cn/newindex/new.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 23rpx;
|
||||
left: 18rpx;
|
||||
}
|
||||
|
||||
.gb_title {
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
position: absolute;
|
||||
top: 18rpx;
|
||||
right: 18rpx;
|
||||
background: url('https://baoku.languowangluo.cn/newindex/infinite_goods_shang_bao.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qiehuan_left {
|
||||
display: flex;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
/* border-top: 2rpx solid #333333; */
|
||||
margin-left: 30rpx;
|
||||
/* text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7); */
|
||||
/* font-family: 'zcq'; */
|
||||
}
|
||||
|
||||
.wzs {
|
||||
font-size: 32rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #9c9c9c;
|
||||
}
|
||||
|
||||
.xzs {
|
||||
font-size: 32rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10rpx #ba39ff;
|
||||
}
|
||||
|
||||
.qiehuan_left>view {
|
||||
margin-right: 70rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dibuzhe {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
// background: #f00;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* padding-top:5rpx; */
|
||||
position: absolute;
|
||||
width: calc(100% - 16rpx - 16rpx);
|
||||
left: 16rpx;
|
||||
bottom: 16rpx;
|
||||
height: 74rpx;
|
||||
align-items: center;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 400rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 22rpx;
|
||||
/* font-family: 'zcq';
|
||||
text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7); */
|
||||
}
|
||||
|
||||
.gb {
|
||||
color: #ffffff;
|
||||
/* font-family: 'zcq';
|
||||
text-shadow: 0px 0px 14rpx red; */
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10rpx #22aeff;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.items {
|
||||
width: 714rpx;
|
||||
height: 504rpx;
|
||||
padding: 16rpx;
|
||||
margin: 30rpx auto 0;
|
||||
position: relative;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/deep/ .u-tab-item {
|
||||
color: #222222 !important;
|
||||
}
|
||||
|
||||
.baibei {
|
||||
width: 720rpx;
|
||||
height: 78rpx;
|
||||
/* background: #FFFFFF; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* font-family: 'zcq'; */
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
/* padding-top: 1rpx; */
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.item_image {
|
||||
width: 100%;
|
||||
height: 472rpx;
|
||||
// margin: 17rpx auto 0;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item_image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-hd {
|
||||
width: 100%;
|
||||
height: 430rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 20rpx;
|
||||
padding: 1rpx 30rpx 30rpx;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
z-index: 10;
|
||||
|
||||
.list-item {
|
||||
width: 330rpx;
|
||||
height: 487rpx;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
// background: url($imgurl+'common/goodsBg.png') no-repeat 0 0 / 100% 100%;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.pic {
|
||||
width: 100%;
|
||||
height: 332rpx;
|
||||
background-color: #E4E4E4;
|
||||
position: relative;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
|
||||
.pic-img {
|
||||
// width: 290rpx;
|
||||
// height: 290rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pic-type {
|
||||
padding: 0 21rpx 0 32rpx;
|
||||
height: 44rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
|
||||
>text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
text-shadow: 2rpx 2rpx #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-new {
|
||||
width: 80rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 24rpx 26rpx 0;
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hang1 {}
|
||||
|
||||
.hot-num {
|
||||
padding: 10rpx 20rpx 0;
|
||||
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
padding: 60rpx 20rpx 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price {
|
||||
font-weight: 500;
|
||||
font-size: 18rpx;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.num-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.num {
|
||||
font-size: 18rpx;
|
||||
font-weight: 400;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 20rpx;
|
||||
height: 17.56rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.icon {}
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-item {
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user