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 }}
		    <em class="iconfont icon-jifen"></em>
		</span>
      </view>
      <view class="wenzhangCont">
        <view v-html="form.text" class="rich-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 => {
        getUserInfo(getApp().globalData.userId).then((res) => {
          let userInfo = res.data;
          let newAnswer={
            adopt: null,
            answer: answer,
            createTime: new Date(),
            headImg: userInfo.headImg,
            name: userInfo.name,
            questionId: id,
            remark: null,
            score: null,
            updateBy: null,
            updateTime: null,
            version: null,
            wechatName: userInfo.wechatName
          }
          this.form.answerList.push(newAnswer);
        });

      })
      this.anwserVal = null
    },
    //采纳答案
    adoptFunc(id) {
      this.answer.id = id
      this.answer.createBy = getApp().globalData.userId
      this.answer.score = this.form.score
      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 => {
        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
          }
        })
		let form = res.data
		form.text = this.imgReplace(form.text)
		console.log('form',form)
        this.form = form
        // this.form = res.data
        this.getUserInfoByUserId(this.form.createBy);//获取用户信息
        this.selectCollect(id);//是否收藏
      })
    },
	imgReplace (htmldoc) {
	  // 正则匹配所有img标签
	  // var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
 
	  // 正则匹配不含style="" 或 style='' 的img标签
	  var reg1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)", 'gmi')
	  // 给不含style="" 或 style='' 的img标签加上style=""
	  htmldoc = htmldoc.replace(reg1, '$2 style=""$3')
	  // 正则匹配含有style的img标签
	  var reg2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)", 'gmi')
	  // 在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
	  htmldoc = htmldoc.replace(reg2, '$2width:100%;$3')
	  return htmldoc
	},
    //获取用户信息：用户名称：头像
    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" scoped>
@import '@/pages/asking/questiondetails.css';

.collect {
  .icon-shoucang:before {
    color: red;
  }
}

.not-collect {

}
.rich-text {
	overflow: hidden;
}
.rich-text p >img{
	width: 100%;
}
.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>