JianjianStreet-H5/pages/my/xiansuo-detail.vue

<template>
	<view class="my-xiansuo">
		<view class="course-box-item flex">
			<u--image :showLoading="true" :src="saleData.photo" width="281rpx" height="256rpx"></u--image>
			<view class="box-right">
				<view class="active-title">{{saleData.title}}</view>
				<view class="active-time">
					<text>{{saleData.activityTime}}</text>
				</view>
				<view class="active-add">
					<text>{{saleData.place}}</text>
				</view>
				<view class="user-img flex align-center">
					<u--image class="user-img-sing" v-for="(val,i) in saleData.members" :key="i" :showLoading="true" shape="circle" :src="val.headImage" width="51rpx" height="51rpx"></u--image>
					<view class="duode flex align-center justify-center">···</view>
				</view>
			</view>
		</view>
		<view class="liulan">
			<view class="liulan-title flex align-center justify-between">
				<text>浏览总数</text>
				<text class="num">{{saleData.members.length}}</text>
			</view>
			<view class="user-from">
				<view class="from-line flex align-center" v-for="(val,i) in saleData.members" :key="i">
					<view class="dot"></view>
					<view class="line-r flex align-center">
						<u--image class="mr-2" :showLoading="true" shape="circle" :src="val.headImage" width="88rpx" height="88rpx"></u--image>
						<view class="name-time">
							<view>{{val.nickName}}</view>
							<view class="time">{{val.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				activityId: '',
				saleData:{}
			}
		},
		onLoad(e) {
			this.activityId = e.id;
			this.getsaleClueById(e.id)
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			getsaleClueById(activityId){
				this.$api('saleClueById',{activityId})
				.then(res=>{
					if(res.code == 200){
						this.saleData = res.result;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-xiansuo {
		padding: 17rpx 19rpx 0 13rpx;
		.course-box-item {
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0px 3rpx 6rpx 0px rgba(0,0,0,0.16); 
			padding: 33rpx 13rpx;
			.box-right {
				margin-left: 16rpx;
				
				.active-title {
					font-size: 30rpx;
					color: #000;
					line-height: 40rpx;
					overflow: hidden;
					display: -webkit-box;    
					-webkit-box-orient: vertical;    
					-webkit-line-clamp: 2;    
				}
				
				.active-time {
					color: #707070;
					font-size: 26rpx;
					margin: 10rpx 0 14rpx 0;
				}
				.active-add {
					color: #707070;
					font-size: 26rpx;
				}
				
				.user-img {
					margin-top: 26rpx;
					
					.user-img-sing {
						margin-right: 10rpx;
						&:nth-child(6){
							margin-right: 0;
						}
					}
					
					.duode {
						width: 51rpx;
						height: 51rpx;
						border-radius: 50%;
						background-color: #C6C6C6;
						color: #ffffff;
						font-size: 44rpx;
					}
				}
				
			}
		}
		
		.liulan {
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0px 3rpx 6rpx 0px rgba(0,0,0,0.16); 
			padding: 0 25rpx 88rpx;
			margin-top: 12rpx;
			
			.liulan-title {
				font-size: 30rpx;
				color: #000000;
				border-bottom: 1px solid #E6E6E6;
				padding: 33rpx 0 19rpx;
				.num{
					color: #D33D3E;
				}
			}
			
			.user-from {
				.from-line {
					border-bottom: 1px solid #ECECEC;
					padding: 20rpx 0 8rpx 0;
					
					.dot {
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #ED1450;
						margin-right: 13rpx;
					}
					
					.line-r {
						.name-time {
							font-size: 24rpx;
							color: #3B3B3B;
						}
						.time {
							font-size: 20rpx;
							color: #929292;
							margin-top: 13rpx;
						}
					}
					
				}
			}
			
		}
		
	}
</style>