tuanfeng-shop-user/pages_category_page1/homeModule/special.vue

<template>
	<view>
		<global-loading />

		<!-- 专题 -->
		<swiper class="banner" indicator-dots indicator-color="#FFFFFF" indicator-active-color="#FF7911" autoplay>
			<swiper-item v-for="(item, index) in bannerList" class="banner-item">
				<image :src="item" mode="widthFix" class="bannerImg"></image>
			</swiper-item>
		</swiper>
		<!--		<view class="flex-items-plus mar-top-20"> -->
		<!--			<image class="choiceness" src="../../static/images/origin/choiceness.png"></image> -->
		<!--		</view> -->
		<view>
			<!-- {{goodsList.productVOList}} -->
		</view>
		<view v-if="goodsList.productVOList.length > 0">
			<view
				v-for="(item, index) in goodsList.productVOList" :key="item.id"
				class="goodsDetails-box flex-display flex-column mar-left-30" @click="goodsDateils(item.id)"
			>
				<view class="goodsDetails flex-items-plus flex-row mar-top-30">
					<image class="goodsImg" :src="item.imgs[0]"></image>
					<view class="mar-left-30">
						<view class="goodsName-box overflowNoDot">
							<!-- <image class="img618-cion" src="../../static/images/origin/618.png"></image> -->
							<label class="goodsName fs26 mar-left-20">{{ item.productName }}</label>
						</view>
						<view class="priceBuyNum-box mar-top-20">
							<label class="fs24 font-color-C5AA7B">¥</label>
							<label class="fs36 font-color-C5AA7B mar-left-10">{{ item.price }}</label>
							<label v-if="item.buyCount != null" class="fs24 font-color-999 mar-left-10">{{ item.buyCount }}人付款</label>
							<label v-else class="fs24 font-color-999 mar-left-10">0人付款</label>
						</view>
						<view class="flex-display flex-sp-between flex-row mar-top-10 flex-items">
							<label class="fs22 font-color-999">{{ item.storeDTO.storeName }}</label>
							<image class="arrowImg" src="../../static/images/origin/arrow.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 为空 -->
		<view v-else class="emptyOrder-box flex-items-plus flex-column">
			<image class="emptyOrder-img" src="../../static/images/origin/bgnull.png"></image>
			<label class="font-color-999 fs26 mar-top-30">专题商品为空哦～</label>
		</view>
	</view>
</template>

<script>
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	data() {
		return {
			key: '',
			bannerList: [],
			goodsList: {
				productVOList: []
			},
			subject: {},
			current: 1,
			size: 10
		}
	},
	onLoad(options) {
		this.key = options.key
		this.getSubjectDetailByKeyList()
	},
	methods: {
		getSubjectDetailByKeyList() {
			const _this = this
			// uni.showLoading({
			//   mask: true,
			// 	title: '加载中...'
			// })
			NET.request(API.SubjectWithProduct + this.key, {
				current: this.current,
				map: {},
				model: {},
				order: 'descending',
				size: this.size,
				sort: 'id'

			}, 'POST').then((res) => {
				uni.hideLoading()
				_this.bannerList.push(res.data.subject.banner)
				_this.goodsList = res.data.productPageVO
				_this.subject = res.data.subject
				uni.setNavigationBarTitle({
					title: res.data.subject.title
				})
			})
				.catch((res) => {
					uni.hideLoading()
				})
		},
		goodsDateils(id) {
			uni.navigateTo({
				url: `../goodsModule/goodsDetails?id=${id}`
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #FBE7E0;
}

.bannerImg {
	height: 300upx;
	width: 100%;
}

.choiceness {
	height: 60upx;
	width: 300upx;
}

.goodsDetails-box {
	width: 690upx;
	background: #fff;
	margin-top: 10upx;
	border-radius: 10upx;
	padding: 0 20upx;
	box-sizing: border-box;

	.goodsDetails {
		padding-bottom: 30upx;

		.goodsName-box {
			width: 389upx;
			height: 85upx;

			.img618-cion {
				width: 70upx;
				height: 36upx;
			}
		}

		.goodsImg {
			width: 260upx;
			height: 260upx;
		}

		.discounts-box {
			margin-left: -10upx;
			margin-top: 20upx;

			.discounts-text {
				margin-left: 10upx;
				color: #C5AA7B;
				background-color: #FFE4CC;
				padding: 6upx 12upx;
				border-radius: 4upx;
			}
		}

		.arrowImg {
			width: 20upx;
			height: 20upx;
		}
	}
}

.emptyOrder-box {
	.emptyOrder-img {
		width: 113rpx;
		height: 98rpx;
	}
}
</style>