WenWuGuanJia/answer_pages/gift/index.vue

<template>
	<view class="wrap">
		<u-navbar title="礼品兑换" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<!-- 暂时注释3月12 -->
		<!-- <view class="main"> -->
		<view class="main" v-if="hasLoad">
			<view class="user-data" :style="'background-image:url(' + topImage + ')'">
				<view class="b-chance">
					<view class="s-tit">积分余额</view>
					<view class="s-num">{{ score.score }}</view>
					<view class="s-unit">个</view>
				</view>
				<view class="b-action" @click="onJumpOrder">
					<view class="s-btn">兑换订单</view>
				</view>
				<view class="b-state">
					<view class="s-tit f-wait" v-if="giftData.gift_state == 0">兑奖未开始</view>
					<view class="s-tit f-ing" v-else-if="giftData.gift_state == 1">兑奖进行中</view>
					<view class="s-tit f-end" v-else-if="giftData.gift_state == 2">兑奖已结束</view>
				</view>
			</view>
			<view class="all-gifts">
				<view class="b-items" v-if="allList.length > 0">
					<view class="b-item" v-for="(item, index) in allList" :key="index" @click="onJumpGift(item.id)">
						<view class="b-left">
							<image :src="item.cover_url" mode="aspectFill"></image>
						</view>
						<view class="b-main">
							<view class="b-title too-long">{{ item.name }}</view>
							<view class="b-center">
								<view class="b-fund">
									<view class="s-worth" v-if="item.worth > 0">价值 {{ item.worth }}元</view>
								</view>
								<view class="b-action">
									<view class="s-action" v-if="item.count_left > 0">兑换</view>
									<view class="s-action f-disable" v-else>已兑换完</view>
								</view>
							</view>
							<view class="b-amount">
								<view class="s-left">库存 {{ item.count_left }}</view>
								<view class="s-gain">已兑 {{ item.count_gain }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="b-empty" v-else>暂无奖品</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
	</view>
</template>

<script>
import { getWrapData } from '@/service/api/gift.js';
// import mixinsCommon from '@/mixins/common.js';
// import mixinsAuth from '../../mixins/auth.js';
// import loadMore from '@/components/load-more/load-more.vue';
export default {
	// mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			giftData: {},
			userInfo: {},
			score: {},
			allList: [],
			hasLoad: false,
			loadingType: 1,
			loadingText: '',
			display: {
				avatarChange: false
			}
		};
	},
	onShow() {
		// 暂时注释3月12
		this.loadWrapData();
	},
	computed: {
		topImage() {
			// return this.$store.getters.globalConfig.gift_top_img || 'https://huli-app.wenlvti.net/app_static/wuyuan/static/static/imgs/gift_top_bg.jpg'
			return 'https://huli-app.wenlvti.net/app_static/wuyuan/static/static/imgs/gift_top_bg.jpg';
		}
	},
	methods: {
		loadWrapData() {
			getWrapData().then(([err, res]) => {
				console.log('getWrapData', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.giftData = res.giftData;
					this.userInfo = res.userInfo;
					this.allList = res.giftList;
				} else {
					this.loadingType = 3;
					this.loadingText = err.data.msg || '加载失败';
				}
				// 积分信息
				// this.getScore();
			});
		},
		onJumpOrder() {
			uni.navigateTo({
				url: '/answer_pages/gift/order'
			});
		},
		onJumpGift(giftId) {
			uni.navigateTo({
				url: '/answer_pages/gift/detail?gift_id=' + giftId
			});
		},
		getScore() {
			this.$api.getWuyuanUser({}, (val) => {
				console.log(val);
				this.score = val.data.user;
				// val.data.score;
				// val.data.exp;
			});
		}
	}
};
</script>

<style lang="scss">
.user-data {
	padding: 160upx 40upx 30upx 40upx;
	background: #fff;
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/static/imgs/gift_top_bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;

	.b-chance {
		margin-top: 50upx;
		display: flex;
		align-items: center;

		.s-tit {
			font-size: 28upx;
			color: #eee;
		}

		.s-num {
			margin: 0 20upx;
			font-size: 60upx;
			font-weight: bold;
			color: #fbc315;
		}

		.s-unit {
			font-size: 28upx;
			color: #eee;
		}
	}

	.b-action {
		margin-top: 30upx;
		border: 2upx solid #fff;
		color: #fff;
		font-size: 28upx;
		padding: 0 50upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 30upx;
	}

	.b-state {
		margin-top: 50upx;
		display: flex;
		align-items: center;

		.s-tit {
			color: #fff;
			font-size: 24upx;
			padding: 0 20upx;
			background: #fbc315;
			height: 60upx;
			line-height: 60upx;
			border-radius: 10upx;

			&.f-wait {
				background: #444c69;
			}

			&.f-ing {
				background: #ffc300;
			}

			&.f-end {
				background: #c4c4c4;
			}
		}
	}
}

.all-gifts {
	background: #fff;

	.b-empty {
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		color: #999;
		font-size: 28upx;
	}

	.b-items {
		.b-item {
			padding: 30upx;
			border-bottom: 1upx solid #eee;
			display: flex;

			&:last-child {
				border-bottom: none;
			}

			.b-left {
				width: 160upx;
				height: 160upx;

				image {
					width: 160upx;
					height: 160upx;
				}
			}

			.b-main {
				margin-left: 30upx;
				flex: 1;
				display: flex;
				flex-direction: column;

				.b-title {
					font-size: 28upx;
					color: #333;
					width: 500upx;
				}

				.b-center {
					margin-top: 20upx;
					display: flex;
					justify-content: space-between;

					.b-fund {
						display: flex;
						align-items: baseline;

						.s-worth {
							font-size: 24upx;
							color: #999;
						}
					}

					.b-action {
						.s-action {
							background: #da5650;
							color: #fff;
							font-size: 24upx;
							padding: 0 30upx;
							border-radius: 30upx;
							height: 60upx;
							line-height: 60upx;

							&.f-disable {
								background: rgba(218, 86, 80, 0.8);
							}
						}
					}
				}

				.b-amount {
					margin-top: 10upx;
					display: flex;
					justify-content: space-between;

					.s-left {
						font-size: 24upx;
						color: #999;
					}

					.s-gain {
						font-size: 24upx;
						color: #999;
					}
				}
			}
		}
	}
}
</style>