muz-item
Version:
自主开发的UniApp组件——Жидзин（Zidjin）系列组件库。
274 lines (255 loc) • 12.1 kB
JavaScript
<template>
<li class="list" v-if="it">
<div class="profile-box" >
<!--<div class="avatar small-avatar" @click.stop @click="go_userInfo(it.dy_uid, it.user_name, it.user_sex)">
<img :src="it.user_head" @load="imgCss(it.user_head, $event)" onerror="this.onerror=null;this.src='../image/touxiang.png'" alt="">
<i class="iconfont mark-male" v-if="it.user_sex == 2"></i>
<i class="iconfont mark-female" v-if="it.user_sex == 1"></i>
</div>-->
<com-avatar :src="it.user_head" :sex="it.user_sex" :small="true" @clicked="go_userInfo(it.dy_uid, it.user_name, it.user_sex)"></com-avatar>
<div class="content-box" >
<div class="row">
<div class="left">
<span class="name" @click.stop @click="go_userInfo(it.dy_uid, it.user_name, it.user_sex)">{{it.user_name}}</span>
<span class="real-people" v-if="it.user_auth"><i class="iconfont"> 真人</i></span>
</div>
<div class="right">
</div>
</div>
<div class="row">
<div class="left">
<span class="flag last-time">{{dateFormat('Y-m-d H:i:s',it.dy_time)}}</span>
</div>
</div>
</div>
</div>
<div class="text-box" v-if="it.dy_content" @click.stop="openDetail()">
<p>{{it.dy_content}}</p>
</div>
<div class="album-box" @click.stop="openDetail()" v-if="!(it.dy_type==2 && it.dy_pics_min.length==0)">
<div class="tab-box">
<ul v-if="it.dy_type==1">
<li v-if="it.dy_cate">
<i class="iconfont icon-flag"></i>
<span class="dy-content">{{it.dy_cate}}<span class="new-invisible">占</span></span>
</li>
<li v-if="it.dy_paytype">
<i class="iconfont icon-wallet"></i>
<span class="dy-content">{{it.dy_paytype==1?'应约者买单':(it.dy_paytype==2?'AA':'发起者买单')}}<span class="new-invisible">占</span></span>
</li>
<li v-if="it.dy_paymoney">
<i class="iconfont icon-cost"></i>
<span class="dy-content">{{it.dy_paymoney}}<span class="new-invisible">占</span></span>
</li>
</ul>
<ul v-if="it.dy_type==1">
<li v-if="it.meet_city">
<i class="iconfont icon-location"></i>
<span class="dy-content">{{it.meet_city}}<span class="new-invisible">占</span></span>
</li>
<li v-if="it.meet_time">
<i class="iconfont icon-time"></i>
<span class="dy-content">{{dateFormat('m月d日 H时i分',it.meet_time)}}<span class="new-invisible">占</span></span>
</li>
</ul>
</div>
<div class="photos" v-if="it.dy_pics_min && it.dy_pics_min.length > 0 && it.dy_pics_min[0]">
<template v-for="(pic,index) in it.dy_pics_min">
<div class="photo">
<com-image :src="pic" @clicked="_url({imgArr:it.dy_pics, iIndex:index}, 'home/zoomImages')"></com-image>
<!-- <img :src="pic" @load="imgCss(pic, $event)" alt="" @click.stop="_url({imgArr:it.dy_pics, iIndex:index}, 'home/zoomImages')">-->
</div>
</template>
</div>
<ul class="status">
<li v-if="it.dy_type == 1">
<span>已报名：{{it.num_enroll}}人</span>
<span v-if="it.user_enroll == 0 && it.dy_uid != myUserId" @click.stop="enroll(it.dy_id, it.dy_uid)"><i class="iconfont">i</i>我要报名</span>
<span v-if="it.user_enroll == 1 && it.dy_uid != myUserId" @click.stop.once="unenroll(it.dy_id)"><i class="iconfont"></i>取消报名</span>
</li>
</ul>
</div>
<div class="comments">
<div class="left"><span v-if="it.dy_type == 2"><i class="iconfont"></i>{{it.dy_city}}</span></div>
<div class="right">
<span><i class="iconfont" @click.stop="openComment()"></i>{{ it.num_comment }}</span>
<span @click.stop="toggleFollow(it.dy_id, index)"><i class="iconfont like " :class="{'active': it.user_thumbsup == 1}"></i>{{it.num_thumbsup}}</span>
</div>
</div>
<template v-if="joinList">
<p class="join-title" v-if="it.dy_uid == myUserId">已报名人员</p>
<ul class="joined-list" v-if="it.dy_uid == myUserId">
<li v-for="(m,i) in joinList">
<div class="left">
<img :src="m.enroll_head" alt="" @click="goUserInfo(m.enroll_uid, m.enroll_name)">
<span class="name">{{m.enroll_name}}</span>
</div>
<div class="right">
<button type="button" name="button" @click="openChat(m.enroll_uid, m.enroll_name)">私聊</button>
</div>
</li>
</ul>
</template>
<template v-if="conmentList">
<p class="join-title">评论</p>
<ul class="discuss-box">
<li v-for="(m,i) in conmentListt">
<div class='left'>
<span class="name" :class="m.state_reply == 1 ? 'master' : ''">{{m.state_reply == 1 ? '回复' : ''}}{{m.comment_name}}：</span>
<span class="content" :class="m.state_reply == 1 ? 'masterContent' : ''">{{m.content}}</span>
</div>
<span tapmode @click="replyComment(m.comment_id,m.comment_uid,m.comment_name)">{{myUserId == it.dy_uid && m.state_reply == 0 ? '回复' : ''}}</span>
</li>
</ul>
<p class="moreComment" v-html ="moreText" @click="moreComment"></p>
</template>
</li>
</template>
<script>
export default {
props:['it', 'index', 'joinList', 'conmentList', 'isDetail', 'moreText'],
data: function() {
return {
myUserId: $api.getStorage('userid'),
moreStatus: false,
// moreText:'查看更多<i class="iconfont"></i>',
}
},
computed: {
conmentListt(){
if(this.moreStatus){
return this.conmentList
}else{
return this.conmentList.slice(0,3)
}
}
},
methods: {
openDetail: function () {
if(this.isDetail){
return;
}
_url({
id: this.it.dy_id,
dy_uid: this.it.dy_uid,
url: 'timeline/timeline_detail',
title: '详情'
})
},
openChat: function (toUid, toName) {
_url({
toUserId: toUid,
url:'chat/chat-private',
title: toName,
moreHtml:`<i class='iconfont'></i>`
})
},
goUserInfo: function(uid, name, sex) {
go_userInfo(uid, name, sex);
},
toggleFollow: function(dy_id, i) {
var status = this.it.user_thumbsup;
var url = status == 0 ? root_url + '/dev/dymanic/thumbsup/add' : root_url + '/dev/dymanic/thumbsup/cancel';
_ajax(url, (ret, err) =>{
if(this.it.dy_uid == this.myUserId){
_msg('不可点赞自己的动态')
return;
}
if (ret && ret.err == 0) {
var msg = status == 0 ? '点赞成功' : '取消点赞';
_msg(ret.msg);
this.it.user_thumbsup = status == 0 ? 1 : 0;
if(status == 0){
this.$set(this.it,'num_thumbsup',this.it.num_thumbsup + 1)
}else{
this.$set(this.it,'num_thumbsup',this.it.num_thumbsup - 1)
};
pushMsg(dy_id);
}
else{
_msg(reg.msg)
}
}, {
user_id: $api.getStorage('userid'), //我的用户id
dy_id: dy_id, //被看用户dy_id
})
},
enroll: function() {
if(!authEnroll())
return;
_ajax(root_url + '/dev/dymanic/enroll/join', (ret, err) =>{
if (ret.err == 0) {
this.it.user_enroll = !this.it.user_enroll
_msg(ret.msg)
this.$set(this.it,'num_enroll',this.it.num_enroll + 1)
}else{
_msg(ret.msg)
}
},{
user_id : this.myUserId,
dy_id : this.it.dy_id,
page : 0
});
},
unenroll: function() {
_ajaxPOST(root_url + '/dev/dymanic/enroll/cancel', (ret, err) => {
if (ret.err == 0) {
this.it.user_enroll = !this.it.user_enroll
_msg('取消报名成功')
this.$set(this.it,'num_enroll',this.it.num_enroll - 1)
}else{
_msg('没有取消报名')
}
},{
user_id : this.myUserId,
dy_id : this.it.dy_id,
});
},
//外部JS代码
dateFormat: dateFormat,
// 图片自适应
imgCss: function(url, event) {
var e = event.currentTarget;
imgCss(url, function(w, h) {
if (w < h) {
$(e).parent().addClass('img-w').removeClass('img-h');
}else{
$(e).parent().addClass('img-h').removeClass('img-w');
}
})
},
replyComment: function(id, uid, name){
this.$emit('editor')
this.replyId = id;
this.$emit('set-reply-id',id)
UIChatBox.value({
msg:'回复 ' + name + '∶'
})
},
moreComment: function () {
this.moreStatus = true
this.$emit('more-comment')
},
go_userInfo: function(id, name, sex) {
go_userInfo(id, name, sex)
},
openComment: function () {
if(!authComment()){
return;
}
this.openDetail();
this.$emit('editor')
}
},
watch:{
it: function (newVal,oldVal) {
// console.log(JSON.stringify(this.it));
// this.it = this.item;
},
// moreText: function () {
// alert("来了")
// this.moreText = this.moreText
// }
}
}
</script>