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