property/user_ui/components/box/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 订单 -->
		<block v-if="type=='delivery'">
			<view class="kdlists flexc" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="kdll">
					<image :src="deva" class="limg"></image>
					<view class="tit pr35">运输中</view>
					<view class="over tit">陕西老潼关肉…</view>
					<view class="time">12-03  22:05 </view>
				</view>
				<view class="kdlr">
					<image :src="cirimg" class="limg"></image>
					<view>
						<view class="txt">运输中</view>
						<view class="tit overtwo">【沧州市】快件已发往 蚌埠转运中心</view>
						<view class="time">12-03  22:05 </view>
					</view>
				</view>
			</view>
		</block>
		<!-- 优惠券 -->
		<view v-if="type=='coupon'" class="coubox">
			<view class="coulists flexc" v-for="(ite,idx) in datainfo" :key="idx">
				<image :src="yhbg" class="yhbg"></image>
				<view class="coulist flexc">
					<view class="cltl flexccc">
						<view class="tit">30<text>元</text></view>
						<view class="txt">满100减30</view>
					</view>
					<view class="line"></view>
					<view class="cltr">
						<view class="over tit">合家福商品优惠券满100…</view>
						<view class="btns">
							<image :src="jfico" class="jfimg"></image>
							<view class="txt">1000<text>积分</text></view>
							<view class="btn flex0 flexcc">兑换</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 资讯 -->
		<block v-if="type=='news'">
			<view class="newslists flexc" v-for="(ite,idx) in datainfo" :key="idx">
				<image :src="jfico" class="newsll"></image>	
				<view class="newslr over flex1">
					<view class="flexc mb8">
						<view class="over tit flex1">合肥市跌幅最大的小区房价公布</view>
						<view class="num flexc"><image :src="eye"></image>1361</view>
					</view>
					<view class="overtwo txt">对于合肥市这座城来说，可供选择的项目太多了，合肥市的购房者买房一定要三思而后行，货比三…</view>
				</view>
			</view>
		</block>
		<!-- 康养 -->
		<block v-if="type=='health'">
			<view class="healthlist flexc" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="hlbox flex1">
					<view class="tit overtwo">吃粗粮能够降血脂吗？这三种吃法让血糖不降反增</view>
					<view class="flexc">
						<view class="txt">2024-11-14</view>
						<view class="flexc">
							<image :src="eye" class="eyeimg"></image>
							<view class="txt">1361</view>
						</view>
					</view>
				</view>
				<image :src="noiconpimg" class="hrimg"></image>
			</view>
		</block>
		<!-- 推荐商品 -->
		<view v-if="type=='goods'" class="goods flexcw">
			<view class="goodslist" v-for="(ite,idx) in datainfo" :key="idx">
				<image :src="noiconpimg" class="headimg"></image>
				<view class="glist">
					<view class="tit overtwo mb10">年货通用大米礼品包装盒新款五谷杂粮礼盒东北…</view>
					<view class="numbox flexc">
						<view class="num flex1"><text>¥</text>278</view>
						<view class="txt flex0">已售2000+</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</block>
	
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>暂无数据</view>
	</view>
</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			wtdtfalg:{
				type:Boolean,
				default () {
					return true
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				yhbg:require("@/static/images/home/yhbg.png"),
				cirimg:require("@/static/images/home/cir.png"),
				deva:require("@/static/images/home/deva.png"),
				jfico:require("@/static/images/home/jfico.png"),
				eye:require("@/static/images/home/eye.png"),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getAddFn(e){
				this.$emit('getAddFn',e)
			},
			getReadlist(e){
				this.$emit('getReadlist',e)
			},
			getBtnFn(e){
				this.$emit('getBtnFn',e)
			},
			getZhan(idx){
				console.log(idx,1)
				// var obj=JSON.parse(JSON.stringify(this.datainfo))[idx]
				// obj.zhanflag=!obj.zhanflag;
				// this.datainfo.splice(idx,1,obj);
				this.datainfo[idx].zhanflag=!this.datainfo[idx].zhanflag
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}
.kdlists{background: #FFFFFF;box-shadow: 0px 0px 8rpx 0px #CDCDCD;border-radius: 20rpx;margin-bottom: 24rpx;
	.kdll{background: #E4EDFF;width: 220rpx;border-radius:20rpx 0 0 20rpx;flex: 0 0 auto;height: 160rpx;position: relative;padding: 30rpx 0 0 24rpx;
		.limg{width: 42rpx;height: 42rpx;position: absolute;right: 20rpx;top: 24rpx;}	
	}
	.tit{font-weight: 500;font-size: 24rpx;color: #000000;margin-bottom: 8rpx;}
	.time{font-weight: 500;font-size:20rpx;color: #AAAAAA;}
	.kdlr{flex: 1;height: 160rpx;padding-left: 20rpx;padding-top: 30rpx;display: flex;
		.limg{width: 24rpx;height: 24rpx;margin-right: 16rpx;flex: 0 0 auto;margin-top: 5rpx;}
		.txt{font-size: 26rpx;font-weight: 500;color: #000000;margin-bottom: 6rpx;}
	}
}
//优惠券
.coubox{display: flex;flex-wrap: nowrap;overflow: auto;padding-left: 24rpx;}
.coulists{width:524rpx;height: 156rpx;margin-right: 24rpx;
	position: relative;
	.yhbg{position: absolute;left: 0;top: 0;width:524rpx;height: 156rpx;z-index: 0;}
	.coulist{width:100%;height: 100%;z-index: 1;
		.cltl{width: 156rpx;flex: 0 0 auto;
			.tit{font-weight: bold;font-size: 44rpx;color: #FE5A0E;margin-bottom: 2rpx;
				text{font-size: 24rpx;}
			}
			.txt{font-weight: bold;font-size: 20rpx;color: #979797;}
		}
		.line{width: 2rpx;height: 80rpx;background: #ECD19D;flex: 0 0 auto;}
		.cltr{height: 156rpx;padding:24rpx 20rpx 0 16rpx;
			.tit{font-size: 28rpx;color: #272727;font-weight: bold;padding-left: 2rpx;margin-bottom: 26rpx;}
			.btns{display: flex;align-items: center;
				.jfimg{width: 28rpx;height: 28rpx;margin-right: 10rpx;flex: 0 0 auto;}
				.txt{font-size: 40rpx;color: #FE5A0E;font-weight: bold;flex: 1;
					text{margin-left: 12rpx;font-size: 24rpx;}
				}
				.btn{min-width: 92rpx;font-weight: bold;font-size: 24rpx;color: #FFFFFF;height:42rpx;background: linear-gradient(129deg, #FFB132, #FE5A0E);border-radius: 11px;}
			}
		}
	}
}
// 资讯
.newslists{border-bottom: 2rpx solid #E5E5E5;padding: 30rpx 0;
	.newsll{width: 136rpx;height: 136rpx;border-radius: 24rpx;margin-right: 22rpx;flex: 0 0 auto;}
	.newslr{
		.tit{font-size: 26rpx;color: #272727;font-weight: bold;}
		.num{font-weight: 500;font-size:22rpx;color: #666666;margin-left: 24rpx;flex: 0 0 auto;
			image{width: 24rpx;height: 18rpx;margin-right: 10rpx;}
		}
		.txt{font-weight: 500;font-size: 24rpx;color: #8F8F8F;line-height: 36rpx;}
	}
}
// 康养
.healthlist{
	padding:26rpx 22rpx;border-bottom: 2rpx solid #E5E5E5;
	.hlbox{
		.tit{font-weight: bold;font-size: 28rpx;color: #272727;line-height:48rpx;margin-bottom: 10rpx;}
		.txt{font-weight: 500;line-height: 36rpx;font-size: 22rpx;color: #AAAAAA;}
		.eyeimg{width: 24rpx;height: 18rpx;margin-right: 10rpx;margin-left: 34rpx;}
		
	}
	.hrimg{width: 210rpx;height: 138rpx;flex: 0 0 auto;margin-left: 36rpx;}
}
// 商品
.goods{padding: 0 8rpx;align-items: stretch;
	.goodslist{width: 334rpx;min-height: 472rpx;background: #FFFFFF;box-shadow: 0px 0px 18rpx 0px #DADADA;border-radius: 20rpx;border: 2rpx solid #DADADA;margin: 0 16rpx 20rpx;padding-bottom: 8rpx;box-sizing: border-box;
		.headimg{height: 298rpx;width: 100%;margin-bottom: 18rpx;}
		.glist{padding: 0 12rpx;}
		.tit{font-weight: bold;font-size: 28rpx;color: #272727;}
		.numbox{
			.num{font-size: 40rpx;color: #FE5A0E;font-weight: bold;word-break: break-all;
				text{font-size: 20rpx;}
			}
		}
		.txt{font-weight: bold;font-size: 24rpx;color: #AAAAAA;}
	}
}

// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
	
}
</style>