sooka_consult_uniapp/pages/asking/questiondetails.vue

<template>
    <view>
        <!-- pages/me.wxml -->
        <view class="container">
            <h1 class="title">{{form.title}}</h1>
            <view class="wenzhangLy">
                <!-- 头像昵称 -->
                <view class="txTime">
                    <image :src="initInfo.headImg == null || initInfo.headImg == '' ? initImgPath : loadImgSrcLocalhost(initInfo.headImg)"></image>
                    <view class="time">
                        <p>{{ initInfo.name == null || initInfo.name == '' ? initInfo.wechatName : initInfo.name }}</p>
                        <span>{{form.createTime}}</span>
                    </view>
                </view>
                <!-- 积分 -->
                <span class="jf">{{form.score}}</span>
            </view>
            <view class="wenzhangCont">
				<view v-html="form.text"></view>
                <image :src="loadImgSrcLocalhost(path)" v-for="(path, index2) in form.paths" :key="index2"></image>
            </view>
			
            <view class="fengexian"></view>
            <!-- 分割线 -->
            <view class="pinglunTj">
                <span class="pinglunTitle">
                    回答
                    <em>{{form.answerList.length}}</em>
                </span>
                <view class="ck">
                    <span>
                        <em class="iconfont icon-chakan"></em>
                        {{form.browse}}
                    </span>
                    <span>
                        <em class="iconfont icon-shoucang"></em>
                        {{form.collect}}
                    </span>
                </view>
            </view>
            <ul class="pinglunList" id="pinglunList">
                <li v-for="(e,idx) in form.answerList" :key="idx" style="position: relative;">
                    <!-- 头像昵称 -->
                    <view class="txTime">
						<image :src="e.headImg == null || e.headImg == '' ? initImgPath : loadImgSrcLocalhost(e.headImg)"></image>
						<view class="time">
							<p>{{ e.name == null || e.name == '' ? e.wechatName : e.name }}</p>
							<span>{{ e.createTime }}</span>
						</view>
					</view>
					<!-- <div class="effectBox"  :style="{ top: adoptTopSize + '%' }">精选答案</div> -->
					<div class="effectBix" :style="e.adopt == adoptIndex ? 'display:block' : 'display:none' ">采   纳</div>
                    <text class="plListcont" style="z-index: 10;">{{ e.answer }}</text>
					<uploadImage/>
                    <button v-show="!isAdopt" @click="adoptFunc(e.id)">采纳答案</button>
                </li>
            </ul>
        </view>
        <view class="fabiaoPl" :class="isCollection ? 'collect' : 'not-collect'" style="z-index: 100;">
            <view class="shuRu">
                <em class="iconfont icon-bianji"></em>
                <input placeholder="请输入内容，友好回答" v-model="anwserVal"/>
            </view>
            <em
				class="iconfont icon-shoucang"
				@click="collectionFunc(form.id)"
				>
			</em>
            <view class="fasong" @click="answerFunc(form.id,anwserVal)"><em class="iconfont icon-fasong"></em></view>
        </view>
    </view>
</template>

<script>
import {getDetailById,getUserInfo,addCollect,addAnswer,adoptAnswer,selectCollect} from '@/api/asking/questiondetails.js';
// pages/me.js
export default {
    data() {
        return {
			initImgPath: 'https://sookajs.top:8888/profile/upload/moren.png',
			anwserVal:'',
			isCollection:false,
			isAdopt:false,
			adoptTopSize:'115',
			adoptIndex:1,
			form:{},
			answer:{},
			initInfo:{},
			collect:{},
        };
    },
	methods: {
		// 评论回答
		answerFunc(id,answer){
			this.answer.questionId = id
			this.answer.answer = answer
			this.answer.createBy = getApp().globalData.userId
			addAnswer(this.answer).then(res =>{})
			this.anwserVal = null
		},
		//采纳答案
		adoptFunc(id){
			this.answer.id = id
			adoptAnswer(this.answer).then(res =>{})
			this.isAdopt = true
			this.form.answerList.forEach(v => {
				if(v.id==id){
					v.adopt = 1
				}
			})
		},
		
		//是否收藏
		selectCollect(id){
			this.collect.userId = getApp().globalData.userId;
			this.collect.questionId = id
			selectCollect(this.collect).then(res =>{
				console.log(res)
				if(res.data.length!=0){
					this.isCollection = true
				}
			})
		},
		
		// 标记喜欢
		collectionFunc(id){
			this.collect.userId = getApp().globalData.userId;
			this.collect.questionId = id
			addCollect(this.collect).then(res =>{})
			this.isCollection = !this.isCollection
		},
		
		 //获取问题详情
		getDetailById(id){
			this.form.id = id
			getDetailById(this.form).then(res =>{
				res.data.answerList.forEach(v => {
					if(v.adopt=="1"){
						this.isAdopt = true
					}
				})
				this.form = res.data
				this.getUserInfoByUserId(this.form.createBy);//获取用户信息
				this.selectCollect(id);//是否收藏
			})
		},
		
		//获取用户信息：用户名称：头像
		getUserInfoByUserId(userId) {
			getUserInfo(userId).then((res) => {
				this.initInfo = res.data;
			});
		},
	}
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		this.getDetailById(options.id)
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady(e) {
	},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
};
</script>
<style lang="scss">
@import '@/pages/asking/questiondetails.css';
.collect{
	.icon-shoucang:before{
		color: red;
	}
}
.not-collect{

}
.effectBix{
	width: 56px;
	height: 56px;
	border-radius: 50px;
	font-family: 'Bebas Neue', cursive;
	background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
	border: 0;
	color: #fff;
	text-align: center;
	line-height: 56px;
	outline: transparent;
	position: absolute;
	transform: rotate(-30deg);
	right:3%;
	top: -5%;
}

.effectBox, .effectBox::after {
  width: 56px;
  height: 56px;
  border-radius: 50px;
  font-size: 16px;
  font-family: 'Bebas Neue', cursive;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  opacity: 1;
  letter-spacing: 3px;
  text-align: center;
  line-height: 56px;
  outline: transparent;
  position: relative;
  left: 78%;
  top: 113%;
  transform: rotate(-30deg);
  z-index: 1;
}

.effectBox::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);

  content: 'AVAILABLE NOW';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}

.effectBox:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

</style>