211 lines
7.6 KiB
HTML
211 lines
7.6 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.content {
|
|
padding: 10px;
|
|
}
|
|
|
|
.base-one-circle {
|
|
width: 100%;
|
|
min-height: 100px;
|
|
padding: 10px 0;
|
|
position: relative;
|
|
display: flex;
|
|
background: radial-gradient(circle at left bottom, transparent 10px, #fff 0) top left / 40% 50% no-repeat,
|
|
radial-gradient(circle at left top, transparent 10px, #fff 0) bottom left /40% 50% no-repeat,
|
|
radial-gradient(circle at right bottom, transparent 10px, #fff 0) top right /60% 50% no-repeat,
|
|
radial-gradient(circle at right top, transparent 10px, #fff 0) bottom right /60% 50% no-repeat;
|
|
margin-bottom: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.base-one-circle .left_img {
|
|
min-width: 100px;
|
|
width: 120px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.base-one-circle .right_content {
|
|
flex: 1;
|
|
max-width: calc(100% - 120px);
|
|
width: calc(100% - 120px);
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.welfare_name {
|
|
width: calc(100% - 50px);;
|
|
max-width: 100%;
|
|
word-break: break-word;
|
|
height: 40px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.welfare_time {
|
|
height: 25px;
|
|
line-height: 15px;
|
|
font-size: 12px;
|
|
color: gray
|
|
}
|
|
|
|
.welfare_gift {
|
|
font-size: 12px;
|
|
color: gray;
|
|
margin-top: 10px;
|
|
line-height: 15px;
|
|
display: flex;
|
|
}
|
|
|
|
.receive_img {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 10px;
|
|
}
|
|
|
|
.van-image__img {
|
|
border-radius: 10px;
|
|
object-fit: revert;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<van-sticky>
|
|
<van-nav-bar title="我的福利" left-arrow
|
|
@click-left="history.go(-1)"></van-nav-bar>
|
|
</van-sticky>
|
|
|
|
<!-- <van-tabs v-model="tabActive" @change="tabChange">
|
|
<van-tab title="全部"></van-tab>
|
|
<van-tab title="已领取"></van-tab>
|
|
<van-tab title="未领取"></van-tab>
|
|
</van-tabs>-->
|
|
|
|
<div class="content">
|
|
<template v-for="item in welfareList">
|
|
<div class="base-one-circle">
|
|
<div class="left_img">
|
|
<img :src="FILE_STREAM_PREVIEW_ADDRESS+'?id='+item.cover" alt=""
|
|
class="van-image__img"
|
|
v-if="item.cover">
|
|
<image v-else src="/assets/mobile/svg/welfare/welfareHome.svg"></image>
|
|
</div>
|
|
<div class="right_content" @click="openView(item)">
|
|
<div class="welfare_name van-ellipsis">【{{item.name}}】</div>
|
|
<div class="welfare_time">
|
|
<template v-if="new Date().getTime()>moment(item.choiceTimeStart).valueOf()
|
|
&&new Date().getTime()<moment(item.choiceTimeEnd).valueOf()">
|
|
<div style="flex: 1">选择开始时间：{{item.choiceTimeStart}}</div>
|
|
<div style="flex: 1">选择结束时间：{{item.choiceTimeEnd}}</div>
|
|
</template>
|
|
<template v-else>
|
|
<div style="flex: 1">发放开始时间：{{item.provideTimeStart}}</div>
|
|
<div style="flex: 1">发放结束时间：{{item.provideTimeEnd}}</div>
|
|
</template>
|
|
</div>
|
|
<div class="welfare_gift">
|
|
<div style="width: 60px;" v-if="item.isReceive">已领礼品：</div>
|
|
<div style="width: 60px;" v-if="!item.isReceive">已选礼品：</div>
|
|
<div style="width: calc(100% - 60px);word-break: break-word">
|
|
{{item.flexible?item.welfareOptionName:item.gift}}
|
|
</div>
|
|
</div>
|
|
<div class="welfare_gift" v-if="item.provideMode===3">
|
|
<div style="width: 60px;">快递单号：</div>
|
|
<div>
|
|
{{item.courierNumber}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="receive_img">
|
|
<template v-if="new Date().getTime()>moment(item.choiceTimeStart).valueOf()
|
|
&&new Date().getTime()<moment(item.choiceTimeEnd).valueOf()">
|
|
<div class="van-ellipsis"
|
|
style="font-size: 15px;font-weight: bold;flex: 2;color: rgb(24,103,179);margin-right: 5px;"
|
|
v-if="item.isSelect&&!item.isReceive">已选择
|
|
</div>
|
|
<div class="van-ellipsis"
|
|
style="font-size: 15px;font-weight: bold;flex: 2;color: rgb(24,103,179);margin-right: 5px;"
|
|
v-else-if="!item.isSelect&&!item.isReceive">未选择
|
|
</div>
|
|
<!-- <image v-if="o.isSelect" src="/assets/mobile/svg/welfare/ylq.svg"></image>
|
|
<image v-else src="/assets/mobile/svg/welfare/wlq.svg"></image>-->
|
|
</template>
|
|
|
|
<div class="van-ellipsis"
|
|
style="font-size: 15px;font-weight: bold;flex: 2;color: rgb(24,103,179);margin-right: 5px;"
|
|
v-else-if="item.isSelect&&item.isReceive">已选择
|
|
</div>
|
|
<div class="van-ellipsis"
|
|
style="font-size: 15px;font-weight: bold;flex: 2;color: rgb(24,103,179);margin-right: 5px;"
|
|
v-else-if="item.isSelect&&!item.isReceive">未选择
|
|
</div>
|
|
<!-- <image v-if="o.isSelect" src="/assets/mobile/svg/welfare/ylq.svg"></image>
|
|
<image v-else src="/assets/mobile/svg/welfare/wlq.svg"></image>-->
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
<!--#include("/mobile/welfare/include/mixins.js"){}#-->
|
|
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins, welfareMixins],
|
|
data() {
|
|
return {
|
|
fullWelfareList: [],
|
|
welfareList: [],
|
|
tabActive: 0
|
|
}
|
|
},
|
|
methods: {
|
|
openView(item) {
|
|
location.replace('/mobile/welfare/list/receive?projectId=' + item.id + '&type=view')
|
|
},
|
|
async getData() {
|
|
const resp = await $.post('/mobile/welfare/mine/getMyWelfare', {tabActive: this.tabActive})
|
|
this.fullWelfareList = resp.data
|
|
this.welfareList = resp.data
|
|
},
|
|
tabChange(val) {
|
|
if (val === 0) {
|
|
this.welfareList = this.fullWelfareList
|
|
}
|
|
switch (val) {
|
|
case 0: {
|
|
this.welfareList = this.fullWelfareList
|
|
break
|
|
}
|
|
case 1: {
|
|
this.welfareList = this.fullWelfareList.filter(v => v.isReceive || [1].includes(v.provideMode))
|
|
break
|
|
}
|
|
case 2: {
|
|
this.welfareList = this.fullWelfareList.filter(v => !v.isReceive)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.startLoading()
|
|
this.getData()
|
|
this.closeLoading()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|