web-retail-h5/pages/market/activeArea/activeArea.vue

182 lines
3.9 KiB
Vue

<template>
<view class="content">
<view
@click="goDetail(item)"
class="list_content"
v-for="(item, index) in dataList"
:key="index"
>
<view class="actCover">
<image :src="item.actCover" mode=""></image>
</view>
<view class="list_right">
<view class="right_title">{{ item.actName }}</view>
<!-- <view class="right_jies">{{item.actExplain}}</view> -->
<view class="right_time"
>{{ item.actStartDate }}-{{ item.actEndDate }}</view
>
<view class="">
<u-button
@click.native.stop="getGift(item)"
v-if="item.existDrawNum == 0"
class="thebtn"
shape="circle"
text="抽奖"
color="#D61820"
/>
</view>
</view>
<view class="actStatus colo" v-show="item.actStatus == 0">{{
item.actStatusVal
}}</view>
<view class="actStatus colo1" v-show="item.actStatus == 1">{{
item.actStatusVal
}}</view>
<view class="actStatus colo2" v-show="item.actStatus == 2">{{
item.actStatusVal
}}</view>
</view>
<!-- <getTree ref="tree"></getTree> -->
<giftDrwal ref="giftDrwal"></giftDrwal>
<!-- <newGift ref="newGiftPay"></newGift> -->
</view>
</template>
<script>
import giftDrwal from '@/components/giftDrwal/index.vue'
import * as act from '@/config/activity.js'
// import getTree from "@/components/getTree.vue";
export default {
components: {
giftDrwal,
// getTree,
},
data() {
return {
dataList: [],
}
},
mounted() {
this.getSearch()
},
methods: {
// getTree(){
// this.$refs.tree.getData(1)
// },
goDetail(item) {
uni.navigateTo({
url: '/pages/market/activeArea/activeDetail?pkId=' + item.pkId,
})
},
getSearch() {
act.getActivityList().then(res => {
this.dataList = res.rows
this.dataList.forEach(item => {
if (item.actType == 22 && item.actStatus == 1) {
act.tourismPoint(item.pkId).then(res => {
if (res.data != undefined) {
this.$set(item, 'point', res.data)
}
})
}
})
})
},
getGift(item) {
this.$refs.giftDrwal.getGiftList(item.pkId)
},
},
}
</script>
<style lang="scss" scoped>
.content {
background: #f2f2f2;
padding: 5rpx 22rpx;
.list_content {
background-color: #ffffff;
padding: 25rpx 21rpx;
border-radius: 25rpx;
margin-top: 27rpx;
display: flex;
position: relative;
.actStatus {
position: absolute;
padding: 10rpx 20rpx;
color: #fff;
border-radius: 0 20px 20px 0;
top: 48rpx;
font-size: 12px;
}
.colo {
background: #6382fb;
}
.colo1 {
background: #ffa50e;
}
.colo2 {
background: #bfbfbf;
}
.actCover {
width: 310rpx;
height: 210rpx;
margin-right: 24rpx;
image {
width: 100%;
height: 100%;
border-radius: 25rpx;
}
}
.list_right {
width: 330rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
.right_title {
font-size: 30rpx;
// width: 100%;
font-weight: bold;
color: #fb3024;
}
.right_title1 {
font-size: 26rpx;
// width: 100%;
font-weight: bold;
color: #fb3024;
}
.right_jies {
font-size: 26rpx;
color: #333333;
width: 100%;
}
.right_time {
font-size: 24rpx;
font-weight: 400;
color: #999999;
width: 100%;
}
.thebtn {
height: 60rpx;
// height: 21px;
font-size: 22rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
}
}
</style>