| @ -0,0 +1,266 @@ | |||
| <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> | |||