universal-wechat-uniapp-241007/components/list/dynamic/dynamicItem.vue

<template>
	<view class="works" @click="$emit('click')">
		<view class="box"
		:style="{'--sexcolor' : sex[item.sex].color}">
			<view class="headPortraitimg">
				<image :src="item.userImage" 
				@click.stop="previewImage([item.userImage])"
				mode="aspectFill"></image>
			</view>
			<view class="YaoduUniversalWall">
				<view class="heide">
					<view class="username text-ellipsis">
						{{ item.userName }}
					</view>
					<view class="inde"
					v-if="item.sex">
						<!-- 性别 -->
						{{ item.sex }}
					</view>
					<view class="inde"
					v-if="item.yearDate">
						<!-- 年份 -->
						{{ item.yearDate }}
					</view>
					<view class="inde"
					v-if="item.addId">
						<!-- 地址 -->
						{{ item.addId }}
					</view>
					<view class="authentication"
					v-if="item.isContent">
						<!-- 个人认证 -->
						{{ item.isContent }}
					</view>
				</view>

				<view class="Times">
					<view class="TimeMonth">
						<!-- 10-08 -->
						{{ item.createTime }}发布
					</view>
					<!-- <view class="Month">
						12:34
					</view> -->
				</view>

			</view>
		</view>
		
		<view class="dynamics" v-html="$utils.stringFormatHtml(item.title)">
		</view>
		
		<view class="address"
		v-if="item.address">
			<uv-icon size="30rpx" name="map"></uv-icon>
			<view class="text-ellipsis">
				{{ item.address }}
			</view>
		</view>
		
		<view class="Artworkimages">
			<view class="wrokimg" 
			@click.stop="previewImage(images, i)"
			:key="i" v-for="(img, i) in images">
				<image :src="img" mode="aspectFill"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="browse">
				{{ item.isBrowse }}浏览
			</view>
			<view class="browse">
				{{ item.isComment }}条评论
			</view>
			<view class="phone"
			v-if="item.phone"
			@click.stop="callPhone">
				<image src="/static/image/home/phone.png" mode=""></image>
				联系{{ ta[item.sex] }}
			</view>
		</view>
	</view>
</template>

<script>
	import mixinsSex from '@/mixins/sex.js'
	export default {
		mixins: [mixinsSex],
		props: {
			item: {},
		},
		data() {
			return {
			}
		},
		computed : {
			images(){
				if(!this.item.image){
					return []
				}
				return this.item.image.split(',')
			}
		},
		methods: {
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: this.item.phone,
					success() {
						console.log('安卓拨打成功');
					},
					fail() {
						console.log('安卓拨打失败');
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.works {
		margin: 40rpx 20rpx;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 6rpx 6rpx #00000011;

		.box {
			display: flex;
			align-items: center;

			.headPortraitimg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}

			.YaoduUniversalWall {
				padding: 0rpx 10rpx;

				.username {
					max-width: 200rpx;
				}

				.heide {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.inde {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
					font-size: 20rpx;
					height: 30rpx;
					color: white;
					// background-color: rgb(124, 136, 242);
					background-color: var(--sexcolor);
					border-radius: 7rpx;
					flex-shrink: 0;
				}

				.authentication {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
					font-size: 20rpx;
					height: 34rpx;
					padding: 0rpx 10rpx;
					color: white;
					background-color: #ffd036;
					border-radius: 7rpx;
					flex-shrink: 0;
				}

				.Times {
					display: flex;
					padding: 5rpx 0rpx;
					font-size: 20rpx;
					margin-top: 10rpx;

					.Month {
						margin: 0rpx 15rpx;
					}
				}

			}
		}

		.personalInformation {
			display: flex;

			.inde {
				font-size: 25rpx;
				padding: 0rpx 8rpx;
			}

			.authentication {
				font-size: 25rpx;
			}
		}

		.dynamics {
			margin-top: 20rpx;
			font-size: 28rpx;
			// font-weight: bold;
			// line-height: 35rpx;
			letter-spacing: 3rpx;
		}
		
		.address{
			font-size: 24rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
		}

		.Artworkimages {
			display: flex;
			flex-wrap: wrap;

			.wrokimg {
				margin: 10rpx;

				image {
					height: 190rpx;
					width: 190rpx;
					border-radius: 20rpx;
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 24rpx;

			.browse {
				margin: 0rpx 30rpx;
				color: rgb(132, 132, 132);
			}

			.phone{
				background-color: rgba($uni-color, 0.2);
				color: $uni-color;
				padding: 8rpx 16rpx;
				border-radius: 10rpx;
				margin-left: auto;
				image{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
</style>