Skip to content

activities / web-lottery

Go to a project
Commit 7e595c06 by Lays-lzq
Options

Merge branch 'feature/record'

parents 9c37af92 105f958a
Showing with 104 additions and 52 deletions
pages/recordDetail/index.vue
......@@ -16,11 +16,13 @@
<label>参与时间：</label>
<span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
</li>
<li>
<label v-if="detailInfo.drawIntro">抽奖介绍：</label>
<label v-if="detailInfo.winningInstructions">中奖说明：</label>
<span v-if="detailInfo.drawIntro">{{ detailInfo.drawIntro }}</span>
<span v-if="detailInfo.winningInstructions">{{ detailInfo.winningInstructions }}</span>
<li v-if="detailInfo.drawIntro">
<label>抽奖介绍：</label>
<span>{{ detailInfo.drawIntro || '/' }}</span>
</li>
<li v-if="detailInfo.winningInstructions">
<label>中奖说明：</label>
<span>{{ detailInfo.winningInstructions || '/' }}</span>
</li>
<li>
<label>获得奖品：</label>
......@@ -29,13 +31,13 @@
<img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" />
</div>
</li>
<li>
<li v-if="detailInfo.prizeId !== 0">
<label>领奖方式：</label>
<span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span>
</li>
</ul>
</div>
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline" class="record-detail__code-info">
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline && detailInfo.prizeId !== 0" class="record-detail__code-info">
<QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode>
<p class="record-detail__code-text">
<label>兑换码：</label>
......@@ -48,7 +50,7 @@
</p>
<p class="record-detail__notice">*兑换信息请勿泄露给他人，以防冒充代领</p>
</div>
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing" class="record-detail__addressee-info">
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing && detailInfo.prizeId !== 0" class="record-detail__addressee-info">
<span v-if="!detailInfo.name" class="record-detail__edit-btn" @click="isShowAddressPopup = true"
>填写收货地址</span
>
......@@ -70,7 +72,7 @@
<li>
<label>运单信息：</label>
<div class="record-detail__tracking-info">
<p>{{ detailInfo.trackingCompany }}</p>
<p v-if="detailInfo.trackingCompany">{{ detailInfo.trackingCompany }}</p>
<span v-if="detailInfo.trackingNo">
{{ detailInfo.trackingNo }}
<span class="record-detail__copy-btn" @click="onCopy(detailInfo.trackingNo)"
......@@ -216,8 +218,10 @@ export default {
font-weight: 500;
color: #666;
white-space: nowrap;
line-height: 19px;
line-height: 18.5px;
min-width: 65px;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
}
&__content {
display: flex;
......@@ -238,10 +242,11 @@ export default {
}
span,
p {
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 19px;
line-height: 18.5px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
......
pages/records/index.vue
......@@ -13,20 +13,20 @@
@load="loadData"
>
<div v-for="item in recordList" :key="item.id" class="records__list-item">
<div class="records__item-img">
<img v-lazy="item.banner" alt="" />
<div class="records__item-top">
<div class="records__item-toptitle">{{ item.title }}</div>
<div v-if="+item.prizeId !== 0" class="records__item-topstatus" :class="{ yet: +item.status === 0 }">{{ WRITEOFF_STATUS_TXT[+item.status] }}</div>
</div>
<div class="records__item-info">
<div class="records__info-wrap">
<div class="records__item-name">{{ item.title }}</div>
<div class="records__item-subs">
{{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖
</div>
<div class="records__item-middle">
<div class="records__item-middleimg">
<img v-lazy="item.banner" alt="" />
</div>
<div class="records__item-middleinfo">
<div class="title">{{ item.prizeName }}</div>
<div class="time">{{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖</div>
</div>
<div class="records__item-prize">{{ item.prizeName }}</div>
</div>
<div class="records__item-operate">
<span class="records__item-write-off">{{ WRITEOFF_STATUS_TXT[+item.status] }}</span>
<van-button class="records__btn" round @click="openPopup(item)">查看详情</van-button>
</div>
</div>
......@@ -83,7 +83,7 @@ export default {
},
methods: {
loadData() {
const { page: currentPage, pageSize: num, recordList: currentList } = this
const { page: currentPage, pageSize: num, recordList: currentList } = this
if (!this.hasMore) {
return
}
......@@ -167,35 +167,83 @@ export default {
}
}
}
.yet {
color: #FF753A;
}
&__list-item {
display: flex;
align-items: center;
flex-direction: column;
padding: 12px 0;
}
&__item-img {
width: 55px;
height: 55px;
border: 1px solid #dddddd;
border-radius: 6px;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.5);
margin-top: 8px;
border-radius: 8px;
padding: 10px 12px;
&:first-child {
margin-top: 12px;
}
}
&__item-info {
flex: 1;
overflow: hidden;
height: 55px;
&__item-middle {
display: flex;
flex-direction: column;
padding: 0 10px;
overflow: hidden;
&img {
width: 55px;
height: 55px;
// border: 1px solid #dddddd;
border-radius: 6px;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
&info {
flex: 1;
display: flex;
flex-direction: column;
margin-left: 10px;
.title {
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-bottom: 8px;
}
.time {
line-height: 18.5px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
}
&__info-wrap {
flex: 1;
&__item-top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
&title {
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
&status {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
&__item-name {
width: 100%;
......@@ -225,11 +273,10 @@ export default {
height: 16px;
}
&__item-operate {
height: 55px;
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
justify-content: flex-end;
}
&__item-write-off {
font-size: 12px;
......@@ -244,16 +291,16 @@ export default {
}
&__empty {
width: 100%;
height: 100%;
height: calc(100% - 46px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: 14px;
color: #999;
font-weight: 500;
img {
width: 40%;
width: 20%;
margin-bottom: 10px;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment