mycajt/pages/sign/info.vue

<template>
	<view class="content">
		<view class="main">
			<view class="main-list" v-for="(item,index) in list" :key="index">
				<view class="list-top flex">
					<view class="list-title">
						获得{{item.award}}{{item.award_type ==1?'积分':''}}
					</view>
					<view class="list-btn" :class="{current: item.status != 0}" @click="dh(item)">
						{{item.status == 0?'兑换' : '已兑换'}}
					</view>
				</view>
				<view class="list-bottom flex">
					<view class="list-time">
						抽奖时间:{{item.add}}
					</view>
					<view class="list-time">
						过期时间:{{item.limit}}
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="ewm" type="center">
			<view class="hym-wrap">
				<view class="hym-tit">
					兑换码
				</view>
				<view class="hym-tip">
					{{wwrdhm}}
				</view>
				<view class="hym-val">
					<tki-qrcode :key="dhm" cid="tki-qrcode-canvas" ref="qrcode" :val="dhm" :size="300" unit="upx"
						background="#ffffff" foreground="#333333" pdground="#333333" icon="" :iconSize="0" :lv="3"
						:onval="true" :loadMake="true" :usingComponents="true" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		getTime
	} from '@/utils/rocessor.js'
	import {
		gachalog,
		dhjp
	} from '@/api/sign.js'
	import tkiQrcodes from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			empty,
			uniLoadMore,
			tkiQrcodes
		},
		data() {
			return {
				page: 1,
				limit: 10,
				loadingType: 'more',
				list: [],
				dhm: ''
			};
		},
		onLoad() {},
		onShow() {
			this.loadData()
		},
		onReachBottom() {
			this.loadData()
		},
		onReady() {},
		methods: {
			loadData() {
				if (this.loadingType == 'nomore' || this.loadingType == 'loading') {
					return
				}
				this.loadingType = 'loading'
				gachalog({
					page: this.page,
					limit: this.limit
				}).then(({
					data
				}) => {
					data.list.forEach(e => {
						e.add = getTime(e.add_time)
						e.limit = getTime(e.limit_time)
					})
					this.list = this.list.concat(data.list);
					console.log(this.list);
					this.page++
					if (this.limit == data.list.length) {
						this.loadingType = 'more'
					} else {
						this.loadingType = 'nomore'
					}
				})
			},
			dh(item) {
				if (item.award_type == 1) {
					dhjp({}, item.id).then(e => {
						item.status = 1
						this.$api.msg('兑换成功')
					})
				} else {
					this.wwrdhm = item.unicode
					this.dhm = item.unicode + '&lhlswez'
					this.$refs.ewm.open()
				}
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
	}

	.main {
		padding: 20rpx;

		.main-list {
			padding: 20rpx;
			background: #ffffff;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.list-top {
				line-height: 1;

				.list-title {
					font-size: $font-lg;
					color: $font-color-base;
				}

				.list-btn {
					padding: 20rpx 50rpx;
					border-radius: 40rpx;
					background: #52c696;
					color: #ffffff;
				}

				.current {
					background: #e7ebf2;
				}

			}

			.list-bottom {
				margin-top: 20rpx;

				.list-time {
					font-size: 24rpx;
					color: $font-color-light;
				}
			}
		}
	}

	.hym-wrap {
		width: 500rpx;
		background-color: #fff;
		text-align: center;
		border-radius: 20rpx;
		padding: 20rpx;

		.hym-tit {
			color: $base-color;
			font-size: 48rpx;
		}

		.hym-tip {
			padding: 20rpx;
			font-size: 24rpx;
			word-wrap: break-word;
		}

		.hym-val {
			width: 300rpx;
			height: 300rpx;
			margin: auto;
		}

		.hym-num {
			font-size: 28rpx;
			font-weight: bold;
			padding-top: 20rpx;
		}
	}
</style>