123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374 |
- <template>
- <view class="prize">
- <!-- 分段器 -->
- <view class="segmented">
- <view class="tab_nav">
- <view class="navTitle" v-for="(item,index) in items" :key="index">
- <view :class="{'active':isActive == index}" @click="checked(index)">
- {{item}}
- </view>
- </view>
- </view>
- </view>
- <view style="margin-bottom: 60rpx; ">
- <!-- 实物奖品 -->
- <view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="isActive == 0">
- <view class="ListItem" v-for="(item,index) in PhysicalPrizes" :key="index">
- <view class="title"><text>{{item.name}}</text></view>
- <view class='data'><text>{{item.created_at}}</text></view>
- <view class="alreadyBtn" v-if="false">
- <text>已兑换</text>
- </view>
- <view class="instantBtn" @click="goExchangePhy(item.id)">
- <text>立即兑换</text>
- </view>
- </view>
- </view>
-
- <!-- 线下奖品 -->
- <view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="isActive == 1">
- <view class="ListItem" v-for="(item,index) in VirtualPrizes" :key="index">
- <view class="title"><text>{{item.name}}</text></view>
- <view class='data'><text>{{item.created_at}}</text></view>
- <view class="alreadyBtn" v-if="false">
- <text>已兑换</text>
- </view>
- <view class="instantBtn" @click="goExchangeVir(item.id)">
- <text>立即兑换</text>
- </view>
- </view>
- </view>
-
- <!-- 中奖记录 -->
- <view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="isActive == 2">
- <view class="ListItem" v-for="(item,index) in prizeRecord" :key="index">
- <view style="display: flex; justify-content: space-between;">
- <view class="title"><text>{{item.name}}</text> </view>
- <view class='data'><text>{{item.created_at}}</text></view>
- </view>
- <view class="content"><text>{{item.remark||'无'}}</text></view>
- </view>
- </view>
- </view>
-
- <!-- 已经到底啦 -->
- <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- // 分段器标题
- items: ['实物奖品', '虚拟奖品', '中奖记录'],
- isActive: 0,
- // 列表高度
- ListHeight: 800,
- // 组件uni-load-more
- status: 'noMore',
- contentText: {
- contentdown: '查看更多',
- contentrefresh: '加载中',
- contentnomore: '—— 已经到底啦 ——'
- },
- // 实物奖品列表
- PhysicalPrizes:[],
- // 虚拟奖品列表
- VirtualPrizes:[],
- // 中奖记录
- prizeRecord:[]
- }
- },
- onLoad() {
- // 中奖记录
- this.getPrizeRecord()
- //实物奖品
- this.getPrizeList(0)
- //虚拟奖品
- this.getPrizeList(1)
- },
- methods: {
- // 获取奖品列表
- getPrizeList(type){
- this.$api.lottery.getDrawRecord({
- is_virtual:type,
- page:1
- }).then(res=>{
- //实物奖品
- if(type == 0){
- this.PhysicalPrizes = res.data.data
- }else{
- this.VirtualPrizes = res.data.data
- }
- })
- },
- // 获取中奖记录
- getPrizeRecord(){
- this.$api.lottery.getDrawRecord({
- page:0
- }).then(res=>{
- console.log(res,"中奖记录")
- if(res.code==0){
- this.prizeRecord=res.data.data
- }
- })
- },
- //分段器标题切换
- checked(index) {
- this.isActive = index
- },
- // 实物立即兑换
- goExchangePhy(id) {
- uni.navigateTo({
- url: '/pages/my/prize/exchangePrize?id='+id
- })
- },
- // 虚拟立即兑换
- goExchangeVir(id) {
- uni.navigateTo({
- url: '/pages/my/prize/exchangePrize?id='+id
- })
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- $pageColor:#F9F9F9;
- $bgColor:#FFFFFF;
- @mixin flexlayout {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .prize {
- height: 100%;
- background: $pageColor;
- }
- .segmented {
- width: 750rpx;
- height: 112rpx;
- background: $bgColor;
- box-shadow: 0px 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
- border-radius: 0rpx 0rpx 16rpx 16rpx;
- margin-bottom: 24rpx;
- padding:0rpx 30rpx;
- box-sizing: border-box;
- //菜单切换
- .tab_nav {
- width: 690rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-family: PingFang-SC-Heavy, PingFang-SC;
- }
- .tab_nav .navTitle {
- margin-top: 20rpx;
- width: 128rpx;
- flex: none;
- height: 28rpx;
- font-size: 32rpx;
- color: #666;
- position: relative;
- }
- .active {
- color: #D9A94D;
- font-weight: bold;
- &::after {
- display: inline-block;
- content: '';
- width: 48rpx;
- height: 12rpx;
- background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
- border-radius: 6px;
- position: absolute;
- bottom: -35rpx;
- left: 40rpx;
- }
- }
- }
- ::v-deep .segmented-control__text {
- font-size: 32rpx !important;
- font-family: PingFang-SC-Heavy, PingFang-SC;
- font-weight: 500 !important;
- }
- ::v-deep .segmented-control__item--text {
- font-size: 32rpx;
- font-family: PingFang-SC-Heavy, PingFang-SC;
- font-weight: 800 !important;
- padding: 10rpx 0 !important;
- border-radius: 4rpx !important;
- }
- .prizeList {
- width: 750rpx;
- // height: var(--height);
- background: $bgColor;
- box-shadow: 0px 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
- border-radius: 12rpx;
- padding: 0rpx 28rpx 0 32rpx;
- box-sizing: border-box;
- .ListItem {
- width: 690rpx;
- height: 160rpx;
- border-bottom: #F0F0F0 solid 0.5rpx;
- position: relative;
- padding-top: 35rpx;
- box-sizing: border-box;
- .title {
- margin-bottom: 5rpx;
- text {
- font-size: 32rpx;
- font-family: PingFang-SC-Bold, PingFang-SC;
- font-weight: bold;
- color: #333333;
- }
- }
- .data {
- text {
- font-size: 26rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #999999;
- }
- }
- .alreadyBtn {
- position: absolute;
- top: 50rpx;
- right: 0rpx;
- width: 148rpx;
- height: 60rpx;
- background: $bgColor;
- border-radius: 30rpx;
- border: 2rpx solid #D0D0D0;
- @include flexlayout();
- text {
- font-size: 26rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #D0D0D0;
- }
- }
- .instantBtn {
- position: absolute;
- top: 50rpx;
- right: 0rpx;
- width: 148rpx;
- height: 60rpx;
- background: $bgColor;
- border-radius: 30rpx;
- border: 2rpx solid #FF6200;
- @include flexlayout();
- text {
- font-size: 26rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- color: #FF6200;
- }
- }
- .content {
- text {
- font-size: 28rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #333333;
- }
- }
- }
- .ListItem:last-child {
- width: 690rpx;
- height: 160rpx;
- border-bottom: #F0F0F0 solid 0rpx;
- position: relative;
- padding-top: 35rpx;
- box-sizing: border-box;
- .title {
- margin-bottom: 10rpx;
- text {
- font-size: 32rpx;
- font-family: PingFang-SC-Bold, PingFang-SC;
- font-weight: bold;
- color: #333333;
- }
- }
- .data {
- text {
- font-size: 26rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- color: #999999;
- }
- }
- .alreadyBtn {
- position: absolute;
- top: 50rpx;
- right: 0rpx;
- width: 148rpx;
- height: 60rpx;
- background: $bgColor;
- border-radius: 30rpx;
- border: 2rpx solid #D0D0D0;
- @include flexlayout();
- text {
- font-size: 26rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #D0D0D0;
- }
- }
- .instantBtn {
- position: absolute;
- top: 50rpx;
- right: 0rpx;
- width: 148rpx;
- height: 60rpx;
- background: $bgColor;
- border-radius: 30rpx;
- border: 2rpx solid #FF6200;
- @include flexlayout();
- text {
- font-size: 26rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #FF6200;
- }
- }
- .content {
- text {
- font-size: 28rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #333333;
- }
- }
- }
- }
- </style>
|