问答详情 回答答案优化

pages/asking/questiondetails.vue

@@ -1,222 +1,261 @@
 <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">
+  <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>
+                    <em>{{ form.answerList.length }}</em>
                 </span>
-                <view class="ck">
+        <view class="ck">
                     <span>
                         <em class="iconfont icon-chakan"></em>
-                        {{form.browse}}
+                        {{ form.browse }}
                     </span>
-                    <span>
+          <span>
                         <em class="iconfont icon-shoucang"></em>
-                        {{form.collect}}
+                        {{ 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>
+      <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>
-            <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>
+          <!-- <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';
+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:{},
-        };
+  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
+      console.log(this.answer)
+      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;
+      });
     },
-	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
-			this.answer.createBy = getApp().globalData.userId
-			this.answer.score = this.form.score
-			console.log(this.answer)
-			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() {},
+  }
+  /**
+   * 生命周期函数--监听页面加载
+   */,
+  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;
-	}
+
+.collect {
+  .icon-shoucang:before {
+    color: red;
+  }
 }
-.not-collect{
+
+.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%;
+
+.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 {