mirror of
https://github.com/geeeeeeeek/python_jiajiao.git
synced 2024-11-25 16:34:47 +08:00
Update detail.vue
This commit is contained in:
gk2007
GitHub
parent
d03992fa08
commit
9878a41658
@ -1,175 +1,6 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<Header/>
|
||||
|
||||
<div class="detail-content">
|
||||
<div class="detail-content-top">
|
||||
<div style="position: relative;">
|
||||
<div class="thing-infos-view">
|
||||
<div class="thing-infos">
|
||||
<div class="thing-img-box">
|
||||
<img :src="detailData.cover"/>
|
||||
</div>
|
||||
<div class="thing-info-box">
|
||||
<div class="thing-state">
|
||||
<span class="state hidden-sm">信息状态</span>
|
||||
<span>有效</span>
|
||||
</div>
|
||||
<h1 class="thing-name">{{ detailData.title }}</h1>
|
||||
<span>
|
||||
<span class="a-price-symbol"></span>
|
||||
<span class="a-price" style="font-size: 20px;">{{detailData.price}}元/时</span>
|
||||
</span>
|
||||
<div class="translators flex-view" style="">
|
||||
<span>科目：</span>
|
||||
<span class="name">{{ detailData.classification_title }}</span>
|
||||
</div>
|
||||
<div class="translators flex-view" style="">
|
||||
<span>性别：</span>
|
||||
<span class="name">{{ detailData.sex }}</span>
|
||||
</div>
|
||||
<div class="translators flex-view" style="">
|
||||
<span>年龄：</span>
|
||||
<span class="name">{{ detailData.age }}岁</span>
|
||||
</div>
|
||||
<div class="translators flex-view" style="">
|
||||
<span>地区：</span>
|
||||
<span class="name">{{ detailData.location }}</span>
|
||||
</div>
|
||||
<button class="buy-btn" @click="handleOrder(detailData)">
|
||||
<img :src="AddIcon" />
|
||||
<span>立即联系</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing-counts hidden-sm">
|
||||
<div class="count-item flex-view pointer" @click="addToWish()">
|
||||
<div class="count-img">
|
||||
<img :src="WantIcon">
|
||||
</div>
|
||||
<div class="count-box flex-view">
|
||||
<div class="count-text-box">
|
||||
<span class="count-title">加入心愿单</span>
|
||||
</div>
|
||||
<div class="count-num-box">
|
||||
<span class="num-text">{{ detailData.wish_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-item flex-view pointer" @click="collect()">
|
||||
<div class="count-img">
|
||||
<img :src="RecommendIcon">
|
||||
</div>
|
||||
<div class="count-box flex-view">
|
||||
<div class="count-text-box">
|
||||
<span class="count-title">收藏</span>
|
||||
</div>
|
||||
<div class="count-num-box">
|
||||
<span class="num-text">{{ detailData.collect_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-item flex-view" @click="share()">
|
||||
<div class="count-img">
|
||||
<img :src="ShareIcon">
|
||||
</div>
|
||||
<div class="count-box flex-view">
|
||||
<div class="count-text-box">
|
||||
<span class="count-title">分享</span>
|
||||
</div>
|
||||
<div class="count-num-box">
|
||||
<span class="num-text"></span>
|
||||
<img :src="WeiboShareIcon" class="mg-l">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content-bottom">
|
||||
<div class="thing-content-view flex-view">
|
||||
<div class="main-content">
|
||||
<div class="order-view main-tab">
|
||||
<span class="tab"
|
||||
:class="selectTabIndex===index? 'tab-select':''"
|
||||
v-for="(item,index) in tabData"
|
||||
:key="index"
|
||||
@click="selectTab(index)">
|
||||
{{ item }}
|
||||
</span>
|
||||
<span :style="{left: tabUnderLeft + 'px'}" class="tab-underline"></span>
|
||||
</div>
|
||||
|
||||
<!--简介-->
|
||||
<div class="thing-intro" :class="selectTabIndex <= 0? '':'hide'">
|
||||
<p class="text" style="">{{ detailData.description }}</p>
|
||||
</div>
|
||||
|
||||
<!--评论-->
|
||||
<div class="thing-comment" :class="selectTabIndex > 0? '':'hide'">
|
||||
<div class="title">发表新的评论</div>
|
||||
<div class="publish flex-view">
|
||||
<img :src="AvatarIcon" class="mine-img">
|
||||
<input placeholder="说点什么..." class="content-input" ref="commentRef">
|
||||
<button class="send-btn" @click="sendComment()">发送</button>
|
||||
</div>
|
||||
<div class="tab-view flex-view">
|
||||
<div class="count-text">共有{{ commentData.length }}条评论</div>
|
||||
<div class="tab-box flex-view" v-if="commentData.length > 0">
|
||||
<span :class="sortIndex === 0? 'tab-select': ''" @click="sortCommentList('recent')">最新</span>
|
||||
<div class="line"></div>
|
||||
<span :class="sortIndex === 1? 'tab-select': ''" @click="sortCommentList('hot')">热门</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-list">
|
||||
<div class="comment-item" v-for="item in commentData">
|
||||
<div class="flex-item flex-view">
|
||||
<img :src="AvatarIcon" class="avator">
|
||||
<div class="person">
|
||||
<div class="name">{{ item.username }}</div>
|
||||
<div class="time">{{ item.comment_time }}</div>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<span @click="like(item.id)">推荐</span>
|
||||
<span class="num">{{ item.like_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment-content">{{ item.content }}</p>
|
||||
</div>
|
||||
<div class="infinite-loading-container">
|
||||
<div class="infinite-status-prompt" style="">
|
||||
<div slot="no-results" class="no-results">
|
||||
<div></div>
|
||||
<p>没有更多了</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="recommend" style="">
|
||||
<div class="title">热门推荐</div>
|
||||
<div class="things">
|
||||
<div class="thing-item thing-item" v-for="item in recommendData" @click="handleDetail(item)">
|
||||
<div class="img-view">
|
||||
<img :src="item.cover"></div>
|
||||
<div class="info-view">
|
||||
<h3 class="thing-name">{{ item.title.substring(0, 12) }}</h3>
|
||||
<span>
|
||||
<span class="a-price-symbol"></span>
|
||||
<span class="a-price">{{ item.price }}元/时</span>
|
||||
<span class="a-price">{{ item.location }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Header/>
|
||||
<Footer/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user