|
|
@@ -0,0 +1,213 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view v-show="isSearch">
|
|
|
+ <view class="top-nav">
|
|
|
+ <view class="nav-left" @click="backTop">
|
|
|
+ <u-icon name="arrow-left"></u-icon>
|
|
|
+ <view class="left-text">返回</view>
|
|
|
+ </view>
|
|
|
+ <u-tabs v-if="isAllReply" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
|
|
+ <u-icon v-if="isAllReply" name="search" size="25" @click="searchTop"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="album">
|
|
|
+ <view class="album__avatar">
|
|
|
+ <image src="/static/uview/common/logo.png" style="width: 32px;height: 32px;"></image>
|
|
|
+ </view>
|
|
|
+ <view class="album__content">
|
|
|
+ <u--text :text="niackName" bold size="17"></u--text>
|
|
|
+ <u--text margin="0 0 8px 0" style="padding-top: 7px;"
|
|
|
+ text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水">
|
|
|
+ </u--text>
|
|
|
+ <u-album :urls="urls2"></u-album>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="reply-info">
|
|
|
+ <view class="reply-left">
|
|
|
+ <u-icon name="red-packet" size="30px"></u-icon>
|
|
|
+ <u--text :text="followNum" size="22px"></u--text>
|
|
|
+ </view>
|
|
|
+ <view class="reply-right">
|
|
|
+ <u-icon name="thumb-up-fill" size="30px"></u-icon>
|
|
|
+ <u-icon name="chat-fill" size="30px" @click="allReply"></u-icon>
|
|
|
+ <u-icon name="share-fill" size="30px"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="showAllCom">
|
|
|
+ <view class="all-comments">
|
|
|
+ <view>
|
|
|
+ <u--text sizi="15px" text="全部评论">
|
|
|
+ </u--text>
|
|
|
+ </view>
|
|
|
+ <view class="comment-order">
|
|
|
+ <u-subsection fontSize="15px" :list="subsectionList" :current="subsectionListCurrent"
|
|
|
+ @change="changeCom"></u-subsection>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="album">
|
|
|
+ <view class="album__avatar">
|
|
|
+ <image src="/static/uview/common/logo.png" style="width: 32px;height: 32px;"></image>
|
|
|
+ </view>
|
|
|
+ <view class="album__content">
|
|
|
+ <u--text :text="niackName" bold size="17"></u--text>
|
|
|
+ <u--text margin="0 0 8px 0" style="padding-top: 9px;"
|
|
|
+ text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水">
|
|
|
+ </u--text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="searching">
|
|
|
+ <view class="search-content">
|
|
|
+ <u-search placeholder="请输入搜索内容" v-model="searchCon" :showAction="false" @focus="getFocus"></u-search>
|
|
|
+ <u-button text="取消" style="width:40px" @click="cancelSearch"></u-button>
|
|
|
+ </view>
|
|
|
+ <view class="search-tags">
|
|
|
+ <u-tag text="时间"></u-tag>
|
|
|
+ <u-tag text="保养"></u-tag>
|
|
|
+ <u-tag text="维修"></u-tag>
|
|
|
+ <u-tag text="旅游"></u-tag>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [{
|
|
|
+ name: '关注'
|
|
|
+ }, {
|
|
|
+ name: '推荐'
|
|
|
+ }],
|
|
|
+ current: 0,
|
|
|
+ subsectionListCurrent: 0,
|
|
|
+ subsectionList: ['最新', '推荐'],
|
|
|
+ isAllReply: true,
|
|
|
+ showAllCom: false,
|
|
|
+ searching: false,
|
|
|
+ isSearch: true,
|
|
|
+ followNum: 111111,
|
|
|
+ urls2: [
|
|
|
+ 'https://cdn.uviewui.com/uview/album/1.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/2.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/3.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/4.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/5.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/6.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/7.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/8.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/9.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/album/10.jpg',
|
|
|
+ ],
|
|
|
+ niackName: '昵称昵称昵称',
|
|
|
+ followInfo: '昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称',
|
|
|
+ keyword: '123',
|
|
|
+ searchCon: '',
|
|
|
+ src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ backTop() {
|
|
|
+ this.isAllReply = true;
|
|
|
+ this.showAllCom = true;
|
|
|
+ },
|
|
|
+ searchTop() {
|
|
|
+ this.isSearch = false;
|
|
|
+ this.searching = true;
|
|
|
+ },
|
|
|
+ allReply() {
|
|
|
+ this.isAllReply = false;
|
|
|
+ this.showAllCom = true;
|
|
|
+ },
|
|
|
+ changeCom(index) {
|
|
|
+ this.subsectionListCurrent = index;
|
|
|
+ },
|
|
|
+ getFocus() {
|
|
|
+
|
|
|
+ },
|
|
|
+ cancelSearch(){
|
|
|
+ this.isSearch = true;
|
|
|
+ this.searching = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .top-nav {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-left {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-text {
|
|
|
+ font-size: 15px;
|
|
|
+ padding-top: 22%;
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .album {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .album__avatar {
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .album__content {
|
|
|
+ margin-left: 10px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reply-info {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-left: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reply-left {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reply-right {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .all-comments {
|
|
|
+ margin: 15px 0 10px 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-order {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-order .u-subsection__item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-order .u-subsection--button {
|
|
|
+ border: 0.2px solid;
|
|
|
+ border-radius: 55px;
|
|
|
+ }
|
|
|
+ .search-content{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .search-tags{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+</style>
|
