Homestay_manage_app/packageShang/components/use-hot-goods/use-hot-goods.vue

<template>
	<!-- 热卖产品 -->
	<view class="use-hot-goods">
		<!-- 列表标题 -->
		<use-list-title v-if="hotDatas && hotDatas.length > 0" :title="title" size="32" fwt="600" :type="titleType" color="#333" iconfont="iconremen" @goto="hot"></use-list-title>
		
		<view class="list dflex-b dflex dflex-wrap-w w-full">
			<view v-for="(item, index) in hotDatas" :key="index" class="item border-radius-sm padding-bottom-sm" @click="to_detail(item)">
				<view class="image-wrapper" v-if="((item.imgs).indexOf(',')) != -1"><image mode="aspectFill" :lazy-load="true" :src="((item.imgs).substring(0, ((item.imgs).indexOf(','))))"></image></view>
				<view class="image-wrapper" v-else><image mode="aspectFill" :lazy-load="true" :src="item.imgs"></image></view>
				<text class="title clamp padding-sm">{{ item.name }}</text>
				<view class="padding-left-sm">
					<text class="price">{{ item.price }}</text>
					<text class="m-price">{{ item.marketPrice  }}</text>
				</view>
			</view>
		</view>
		
		<!-- 用云版权 -->
		<use-copyright></use-copyright>
	</view>
</template>

<script>
	// import {
	// 		getGoodshot
	// 	} from '@/util/homeJie.js'
	import useListTitle from '../../components/use-list-title/use-list-title.vue'
export default {
	components:{
		useListTitle,
	},
	props: {
		title: {
			type: String,
			default: '热卖产品'
		},
		titleType: {
			type: String,
			default: 'square'
		},
		autoload: {
			type: String,
			default: 'auto'
		},
		datas: {
			type: Array,
			default: () => []
		},
	},
	data() {
		return {
			hotDatas: [
			]
		};
	},
	watch: {
		datas(){
			this.hotDatas = this.datas;
		}
	},
	created() {
		if(this.autoload === 'auto'){
			// this.loadData();
		}
	},
	methods: {
		loadData() {
			let _self = this;
			_self.hotDatas=[]
			var data='?hot=1'
			uni.request({
				url: common.url2 + '/goods/open/page'+data,
				method:'GET',
				success(res) {
					res = res.data
					if(res.success){
						var total=res.data.totalCount
						data='?hot=1&pageSize='+total
						uni.request({
							url: common.url2 + '/goods/open/page'+data,
							method:'GET',
							success(res) {
								res = res.data
								if(res.success){
									res.data.list.forEach(data => {
										_self.hotDatas.push(data)
									})
								}else{
									_self.$message.warning('没有符合条件的数据！')
								}
							}
						})
					}else{
						_self.$message.warning('没有符合条件的数据！')
					}
				}
			})
		},
		// goto() {
		// 	console.log('goto');
		// 	this.$emit('goto', {
		// 		type: 'goto'
		// 	});
		// },
		hot() {
			this.$api.togoodslist({hot: 1});
		},
		to_detail(options) {
			this.$api.togoods({id: options.id});
		}
	}
};
</script>

<style lang="scss">
.use-hot-goods {
	margin: 15rpx 0 0 30rpx;
	width: 690rpx;
	opacity: 1;
	border-radius: 14rpx;
	background-color: rgba(255, 255, 255, 1);
	
	.list{
		padding: 0 3vw 20rpx;
	}
	
	.item { 
		width: 40vw;
		overflow: hidden;
		margin-top: 2vw;
		background: #fff;

		&:nth-child(2n) {
			margin-left: 1vw;
		}
		&:nth-child(2n + 1) {
			margin-right: 1vw;
		}
	}
	
	.image-wrapper {
		width: 100%;
		height: 300rpx;
		overflow: hidden;
	
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
}
</style>