411 lines
11 KiB
Vue
411 lines
11 KiB
Vue
<template>
|
||
<view class="tel-info">
|
||
<!-- 需求服务 -->
|
||
<view
|
||
class="tel-list"
|
||
v-if="obj.source == 1 || obj.source == 2"
|
||
@tap.stop="handleJumpDiy"
|
||
data-type="navigateTo"
|
||
:data-url="`/pages/index/demandDetails/demandDetails?id=${obj.id}&source=${obj.source}`"
|
||
>
|
||
<view class="tel-list-img" style="height: 380rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
|
||
<view class="tel-list-title">{{ obj.title }}</view>
|
||
<view class="tel-list-price">
|
||
<text class="tel-list-price-one" v-if="obj.price">c$</text>
|
||
<text class="tel-list-price-two" v-if="obj.price">{{ obj.price }}</text>
|
||
<text class="tel-list-price-two" v-else>{{i18n['无偿']}}</text>
|
||
</view>
|
||
<view class="tel-list-infos">
|
||
<view class="tel-list-infos-left">
|
||
<view class="tel-list-infos-left-imgs"><image :src="obj.user_head_img" mode="aspectFill"></image></view>
|
||
<view class="tel-list-infos-left-name">
|
||
<view class="">{{ obj.user_user_nickname }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="tel-list-infos-citys">
|
||
<view class="">{{ obj.address }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 商品 -->
|
||
<view
|
||
class="tel-list"
|
||
v-else-if="obj.source == 3"
|
||
@tap.stop="handleJumpDiy"
|
||
data-type="navigateTo"
|
||
:data-url="`/pages/lieIdle/commodityDetails/commodityDetails?id=${obj.id}`"
|
||
>
|
||
<view class="tel-list-img" style="height: 380rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
|
||
<view class="tel-list-title">{{ obj.title }}</view>
|
||
<view class="tel-list-price">
|
||
<text class="tel-list-price-one">c$</text>
|
||
<text class="tel-list-price-two">{{ obj.price }}</text>
|
||
</view>
|
||
<view class="tel-list-infos">
|
||
<view class="tel-list-infos-left">
|
||
<view class="tel-list-infos-left-imgs"><image :src="obj.user_head_img" mode="aspectFill"></image></view>
|
||
<view class="tel-list-infos-left-name">
|
||
<view class="">{{ obj.user_user_nickname }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="tel-list-infos-citys">
|
||
<view class="">{{ obj.address }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 动态 -->
|
||
<view class="tel-list" v-else-if="obj.source == 5" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/circle/dynamicDetails/dynamicDetails?id=${obj.id}`">
|
||
<view class="tel-list-img" style="height: 430rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
|
||
<view class="tel-list-title">{{ obj.title }}</view>
|
||
<view class="tel-list-infos">
|
||
<view class="tel-list-infos-left">
|
||
<view class="tel-list-infos-left-imgs"><image :src="obj.user_head_img" mode="aspectFill"></image></view>
|
||
<view class="tel-list-infos-left-name">
|
||
<view class="">{{ obj.user_user_nickname }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="tel-list-infos-number">
|
||
<image :src="STATIC_URL + '81.png'" mode=""></image>
|
||
<text>{{ obj.like_num }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 圈子 -->
|
||
<view class="tel-list" v-else-if="obj.source == 6" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/circle/circleDetails/circleDetails?id=${obj.id}`">
|
||
<view class="tel-list-img" style="height: 300rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
|
||
<view class="tel-list-titles">{{ obj.title }}</view>
|
||
<view class="tel-list-desc">{{ obj.desc }}</view>
|
||
<view class="tel-list-infos-fun">
|
||
<view class="tel-list-infos-fun-box">
|
||
<text class="tel-list-infos-number-tip">{{ i18n['圈友'] }}</text>
|
||
<text class="tel-list-infos-number-num">{{ obj.friends_num }}</text>
|
||
</view>
|
||
<view class="tel-list-infos-fun-box2">
|
||
<text class="tel-list-infos-number-tip">{{ i18n['动态'] }}</text>
|
||
<text class="tel-list-infos-number-num">{{ obj.article_num }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 个人主页 -->
|
||
<view
|
||
class="tel-home-page"
|
||
v-else-if="obj.source == 4"
|
||
@tap.stop="handleJumpDiy"
|
||
data-type="navigateTo"
|
||
:data-url="`/pages/index/personalHomepage/personalHomepage?id=${obj.id}`"
|
||
>
|
||
<view class="tel-home-page-info">
|
||
<view class="tel-home-page-info-img"><image :src="obj.thumb" mode="aspectFill"></image></view>
|
||
<view class="tel-home-page-info-right">
|
||
<view class="tel-home-page-info-name">{{ obj.title }}</view>
|
||
<view class="tel-home-page-info-funs">
|
||
<view class="tel-home-page-info-funs-box" style="margin-right: 15rpx;" v-if="obj.auto_type && obj.auto_type != 0">
|
||
<image :src="STATIC_URL + '89.png'" mode=""></image>
|
||
<text>{{ i18n['已认证'] }}</text>
|
||
</view>
|
||
<view class="tel-home-page-info-funs-box">
|
||
<image src="https://ljzp-files.oss-cn-hangzhou.aliyuncs.com/wxImage/31.png" mode=""></image>
|
||
<text>{{ obj.age || 0 }} {{ i18n['岁'] }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tel-home-page-info-desc" v-if="obj.desc">{{ obj.desc }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
*
|
||
* 1、求帮助路径：https://jnd.zztczg.cn/share/#/pages/index/demandDetails/demandDetails?id=1&source=1
|
||
2、去帮忙路径：https://jnd.zztczg.cn/share/#/pages/index/demandDetails/demandDetails?id=1&source=2
|
||
3、商品详情：https://jnd.zztczg.cn/share/#/pages/lieIdle/commodityDetails/commodityDetails?id=4
|
||
4、用户主页：https://jnd.zztczg.cn/share/#/pages/index/personalHomepage/personalHomepage?id=76
|
||
5、动态详情：https://jnd.zztczg.cn/share/#/pages/circle/dynamicDetails/dynamicDetails?id=1
|
||
6、圈子详情：https://jnd.zztczg.cn/share/#/pages/circle/circleDetails/circleDetails?id=1
|
||
*
|
||
* */
|
||
|
||
export default {
|
||
props: ['obj'],
|
||
data() {
|
||
return {
|
||
bgcs: 'https://jnd.zztczg.cn/uploads/images/64/c74cf73cc3379b0956c5467bf430b5.jpg'
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.tel-info {
|
||
.tel-list {
|
||
width: 360rpx;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
.tel-list-img {
|
||
width: 100%;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.tel-list-infos {
|
||
width: 100%;
|
||
padding: 10rpx 10rpx 10rpx 10rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.tel-list-infos-left {
|
||
flex: 1;
|
||
display: flex;
|
||
|
||
.tel-list-infos-left-imgs {
|
||
width: 40rpx;
|
||
margin-right: 6rpx;
|
||
image {
|
||
width: 100%;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.tel-list-infos-left-name {
|
||
flex: 1;
|
||
view {
|
||
width: 100%;
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
}
|
||
.tel-list-infos-citys {
|
||
width: 120rpx;
|
||
view {
|
||
width: 100%;
|
||
text-align: right;
|
||
font-size: 20rpx;
|
||
color: #999;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
|
||
.tel-list-infos-number {
|
||
width: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
text {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
margin-left: 7rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tel-list-title {
|
||
width: 100%;
|
||
padding: 10rpx 10rpx 10rpx 10rpx;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
height: 48px;
|
||
color: #333;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.tel-list-desc {
|
||
width: 100%;
|
||
padding: 10rpx 10rpx 10rpx 10rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
height: 47px;
|
||
color: #85879b;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
.tel-list-titles {
|
||
width: 100%;
|
||
padding: 10rpx 10rpx 10rpx 10rpx;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
.tel-list-price {
|
||
width: 100%;
|
||
padding: 10rpx 10rpx 10rpx 10rpx;
|
||
box-sizing: border-box;
|
||
color: #ea4f3d;
|
||
font-weight: 600;
|
||
.tel-list-price-one {
|
||
margin-right: 10rpx;
|
||
font-weight: 400;
|
||
}
|
||
.tel-list-price-two {
|
||
}
|
||
}
|
||
}
|
||
|
||
.tel-list-infos-fun {
|
||
width: 100%;
|
||
padding: 10rpx 10rpx 15rpx 10rpx;
|
||
box-sizing: border-box;
|
||
view {
|
||
display: inline-block;
|
||
.tel-list-infos-number-tip {
|
||
color: #99a9ad;
|
||
font-size: 24rpx;
|
||
}
|
||
.tel-list-infos-number-num {
|
||
color: #85879b;
|
||
margin-left: 5rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.tel-list-infos-fun-box2 {
|
||
padding-left: 20rpx;
|
||
box-sizing: border-box;
|
||
margin-left: 20rpx;
|
||
position: relative;
|
||
}
|
||
.tel-list-infos-fun-box2::after {
|
||
content: '';
|
||
width: 1px;
|
||
height: 25rpx;
|
||
background-color: #e5e5e5;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 6rpx;
|
||
}
|
||
.tel-list-infos-fun-box {
|
||
}
|
||
}
|
||
|
||
.tel-home-page {
|
||
width: 400rpx;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
.tel-home-page-info-desc {
|
||
width: 100%;
|
||
color: #99a9ad;
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 10;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
.tel-home-page-info {
|
||
width: 100%;
|
||
display: flex;
|
||
.tel-home-page-info-img {
|
||
width: 80rpx;
|
||
image {
|
||
width: 75rpx;
|
||
height: 75rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.tel-home-page-info-right {
|
||
flex: 1;
|
||
margin-left: 10rpx;
|
||
.tel-home-page-info-name {
|
||
width: 100%;
|
||
color: #333;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.tel-home-page-info-funs {
|
||
width: 100%;
|
||
margin-top: 10rpx;
|
||
.tel-home-page-info-funs-acer {
|
||
width: 75rpx;
|
||
height: 27rpx;
|
||
}
|
||
.tel-home-page-info-funs-box {
|
||
display: inline-block;
|
||
font-size: 20rpx;
|
||
|
||
border-radius: 20rpx;
|
||
background-color: #f0f5f5;
|
||
padding: 4rpx 10rpx;
|
||
box-sizing: border-box;
|
||
color: #6aa39f;
|
||
image {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|