maishidaSJ/pages/shanpinxungou/shangpin/shangpinItem.vue

<template>
	<list class="list" :offset-accuracy="5" :bounce="false" isSwiperList="true">
		<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
			:display="refreshing ? 'show' : 'hide'">
			<div class="refresh-view">
				<text class="loading-text">{{refreshText}}</text>
			</div>
		</refresh>
		<cell v-for="(item, index) in dataList" :key="item.id" @click="onclick(item.id)">
			<view class="item_content2">
				<view class="buyctT">
					<image class="goodimage" src="/static/defimages/324.png" mode="aspectFit"></image>
					<view class="msText">
						<text class="dianpuming">羊肉串5元/份</text>
						<text class="peisongsuoming">新鲜大串</text>
						<view class="buyBT">
							<text class="youhuixinxi">新客暴抢￥4</text>
							<text class="youhuixinxi">低至8.5折</text>
							<text class="youhuixinxi">满100减20</text>
						</view>
						<view class="buyBTSB">
							<text class="peisongsuoming">￥15</text>
							<text class="peisongsuoming">月销300+</text>
						</view>
					</view>
				</view>
				<view class="linesp"></view>
				<view class="buyct">
					<image class="sjimage" src="/static/defimages/324.png" mode="aspectFit"></image>
					<view class="msText">
						<text class="dianpuming">拥您烧烤</text>
						<view class="buyBT">
							<image class="xingxing" src="/static/images/评分、星星.png" mode="aspectFit"></image>
							<text class="pingfentext">4.9</text>
							<text class="mainyuntishi">5KM免运费</text>
							<text class="shijiantishi">约20分钟</text>
						</view>
					</view>
				</view>
			</view>
		</cell>
	</list>
</template>

<script>
	import uniList from '@/uni_modules/uni-list/uni-list.vue';
	import uniListItem from '@/uni_modules/uni-list-item/uni-list-item.vue';
	import uniAd from '@/uni_modules/uni-list-ad/uni-list-ad.vue';
	import uniChat from '@/uni_modules/uni-list-chat/uni-list-chat.vue';
	export default {
			components:{
				uniList,uniListItem,uniAd,uniChat
			},
		props: {
			pid: {
				type: [Number, String],
				default: ''
			},
			parentId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				scrollable: true,
				dataList: [],
				refreshing: false,
				refreshText: "",
				refreshFlag: false,
				itemType:2,
			}
		},
		created() {
			for (var i = 1; i < 32; i++) {
				this.dataList.push({
					id: i,
					name: i
				});
			}
		},
		methods: {
			onclick(e) {
				console.log(e);
				this.$emit('EspItemsel',e);
			},
			loadData() {
				// 首次激活时被调用
			},
			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				this.dataList.length = 0;
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}

				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			}
		}
	}
</script>

<style scoped>
	.refresh-view {
		width: 750rpx;
		height: 80px;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.list {
		flex: 1;
		background-color: #ebebeb;
	}

	.linesp{
		height: 2rpx;
		background-color: aliceblue;
	}
	.item_content2{
		background: white;
		height: 300rpx;
		margin: 10rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		border: 2rpx solid darkgray;
	}
	.buyctT{
		height: 190rpx;
		padding: 14rpx;
		display: flex;
		flex-direction: row;
	}
	.buyct{
		height: 160rpx;
		padding: 14rpx;
		display: flex;
		flex-direction: row;
	}
	.goodimage{
		width: 160rpx;
		height: 160rpx;
	}
	.sjimage{
		width: 80rpx;
		height: 80rpx;
	}
	.buyBTSB{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	
	.buyBT{
		display: flex;
		flex-direction: row;
		justify-content:left;
		align-items: center;
		
	}
	.rightjustify{
		margin-left: auto;
		display: flex;
		flex-direction: row;
		justify-content:right;
		
	}
	.msText{
		width: 530rpx;
		padding-left: 10rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}
	.dianpuming{
		font-size: 30rpx;
		line-height: 32rpx;
		height: 32rpx;
		font-weight: bold;
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 38rpx;
		height: 38rpx;
		color: dimgray;
	}
	.xiaoliang{
		margin-left: auto;
		margin-right: 10rpx;
	}
	.xingxing{
		width: 40rpx;
		height: 40rpx;
	}
	.pingfentext{
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color:sandybrown;
	}
	.mainyuntishi{
		margin-left: 30rpx;
		padding-left: 8rpx;
		padding-right: 8rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: dimgray;
		background-color: burlywood;
	}
	.shijiantishi{
		margin-left: 30rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: dimgray;
	}
	.youhuixinxi{
		margin-right: 10rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: lightcoral;
		border: 2rpx solid lightcoral;
		border-radius: 8rpx;
	}
	
	
</style>