WenWuGuanJia/answer_pages/gift/detail.vue

<template>
	<view class="wrap" v-if="hasLoad">
		<u-navbar title="礼品详情" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view class="carousel">
			<swiper indicator-dots circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in state.photo_list" :key="index">
					<view class="image-wrapper">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="b-title">{{ state.name }}</view>
			<view class="b-data">
				<view class="s-worth" v-if="state.order_worth > 0">价值 {{ state.order_worth }}元</view>
				<view class="s-count">
					<view class="s-left">库存 {{ state.count_left }}</view>
					<view class="s-gain">已兑 {{ state.count_gain }}</view>
				</view>
			</view>
		</view>
		<view class="specs" v-if="state.spec_list">
			<view class="b-title">选择规格</view>
			<view class="b-items">
				<view class="b-item" v-for="(item, index) in state.spec_list" :key="index" :class="{ 'f-active': index == specIndex }" @click="onSpecSelect(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="b-data">
				<view class="s-left">库存 {{ state.spec_list[specIndex].count_left }}</view>
				<view class="s-gain">已兑 {{ state.spec_list[specIndex].count_gain }}</view>
			</view>
		</view>
		<view class="content">
			<view class="b-title">
				<view class="iconfont icon-line"></view>
				<view class="s-tit">奖品详情</view>
				<view class="iconfont icon-line"></view>
			</view>
			<view class="b-rich">
				<rich-text :nodes="goodContent"></rich-text>
			</view>
		</view>
		<view class="navbar">
			<view class="b-action">
				<view class="s-exchange f-disable" v-if="state.order_state == 1">兑换未开始</view>
				<view class="s-exchange f-disable" v-else-if="state.order_state == 2">兑换已结束</view>
				<view class="s-exchange f-disable" v-else-if="state.order_state == 3">兑换机会不足</view>
				<view class="s-exchange f-disable" v-else-if="state.order_state == 4">已兑换完</view>
				<view class="s-exchange" @click="onExchange()" v-else>立即兑换</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
	</view>
</template>

<script>
import { getDetail } from '@/service/api/gift.js';
import { formatRichText } from '@/common/util.js';
// import mixinsCommon from '@/mixins/common.js';
// import mixinsAuth from '../../mixins/auth.js';
export default {
	// mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			state: {},
			specIndex: 0,
			hasLoad: false,
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		this.loadDetail(options.gift_id);
	},
	computed: {
		goodContent() {
			return formatRichText(this.state.content);
		}
	},
	methods: {
		loadDetail(giftId) {
			getDetail(giftId).then(([err, res]) => {
				console.log('getDetail', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.state = res;
					// if (err.code == 0) {
					// 	uni.navigateTo({
					// 		url: '/answer_pages/home/dashboard'
					// 	});
					// }
				} else {
					this.loadingType = 3;
					this.loadingText = err.data.msg || '加载失败';
				}
			});
		},
		onExchange() {
			let specId = this.state.spec_list ? this.state.spec_list[this.specIndex].id : 0;
			uni.navigateTo({
				url: '/answer_pages/gift/exchange?gift_id=' + this.state.id + '&spec_id=' + specId
			});
		},
		onSpecSelect(index) {
			this.specIndex = index;
			this.state.order_worth = this.state.spec_list[this.specIndex].worth;
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: env(safe-area-inset-bottom);
// 	background: $pq-bg-color;
// }

.wrap {
}

.carousel {
	height: 500upx;
	position: relative;

	swiper {
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 320upx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}
}

.info {
	padding: 30upx;
	background: #fff;

	.b-title {
		font-size: 28upx;
	}

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

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

		.s-count {
			color: #999;
			font-size: 24upx;
			display: flex;
			align-items: center;

			.s-left {
			}

			.s-gain {
				margin-left: 40upx;
			}
		}
	}
}

.specs {
	margin-top: 30upx;
	padding: 30upx;
	background: #fff;

	.b-title {
		font-size: 30upx;
	}

	.b-items {
		margin-top: 30upx;

		.b-item {
			margin-right: 20upx;
			padding: 0 40upx;
			height: 60upx;
			line-height: 60upx;
			display: inline-block;
			background: #fff;
			border: 1upx solid #e4eaf1;
			color: #667085;
			font-size: 26upx;

			&.f-active {
				background: #da5650;
				border: none;
				color: #fff;
			}
		}
	}

	.b-data {
		margin-top: 30upx;
		color: #666;
		font-size: 24upx;
		display: flex;
		align-items: center;

		.s-left {
		}

		.s-gain {
			margin-left: 40upx;
		}
	}
}

.content {
	margin-top: 30upx;

	.b-title {
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			color: #ccc;
		}

		.s-tit {
			margin: 0 20upx;
			font-size: 24upx;
			color: #666;
		}
	}

	.b-rich {
		margin-top: 30upx;
		padding: 30upx 0;
		background: #fff;
		font-size: 28upx;
	}
}

.navbar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100upx;
	background: #fff;
	// border-top: 1upx solid #f6f6f6;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.b-action {
		flex: 1;

		.s-exchange {
			background: #da5650;
			height: 100upx;
			padding: 0 60upx;
			line-height: 100upx;
			font-size: 30upx;
			color: #fff;
			letter-spacing: 4upx;
			text-align: center;

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