TBtools-商品大家问

htmldev/TBTools/src/assets/scss/_base.scss

@@ -413,6 +413,14 @@ img {
   margin-right: 5px;
 }
 
+ul, li, ol {
+  list-style: none;
+}
+
+i {
+  font-style: normal;
+}
+
 // input自动填充样式重置 99999s 基本上就是一个无限长的时间, 通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化
 input:-webkit-autofill,
 input:-webkit-autofill:hover,

htmldev/TBTools/src/main.js

@@ -9,11 +9,13 @@ import '@/element-ui-theme'
 import '@/assets/scss/index.scss'
 import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
 import { isAuth } from '@/utils'
+import { timeFormat } from '@/utils/formatDate.js'
 import cloneDeep from 'lodash/cloneDeep'
 import { VueJsonp } from 'vue-jsonp'
 
 Vue.use(VueCookie)
 Vue.use(VueJsonp)
+Vue.filter('timeFormat', timeFormat)
 Vue.config.productionTip = false
 
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock

htmldev/TBTools/src/utils/formatDate.js

@@ -12,6 +12,62 @@ function timeForMat (count) {
   return result
 }
 
+function padStart (val) {
+  return val * 1 < 10 ? `0${val}` : val
+}
+
+/**
+ * 时间戳解析
+ * @param ts
+ * @param type
+ * @returns {string}
+ */
+function timeFormat (ts, type) {
+  let time = ts.toString().length >= 13 ? new Date(ts * 1) : new Date(ts * 1 * 1000)
+  let Y = time.getFullYear()
+  let M = time.getMonth() + 1
+  let D = time.getDate()
+  let h = time.getHours()
+  let m = time.getMinutes()
+  let s = time.getSeconds()
+
+  if (['hh:mm'].includes(type)) {
+    return `${padStart(h)}:${padStart(m)}`
+  }
+  if (['YY-MM-DD hh:mm:ss'].includes(type)) {
+    return `${Y}-${padStart(M)}-${padStart(D)} ${padStart(h)}:${padStart(m)}:${padStart(s)}`
+  }
+  if (['hh:mm:ss'].includes(type)) {
+    return `${padStart(h)}:${padStart(m)}:${padStart(s)}`
+  }
+  if (['YY年MM月DD日'].includes(type)) {
+    return `${Y}年${padStart(M)}月${padStart(D)}日`
+  }
+  if (['MM-DD'].includes(type)) {
+    return `${padStart(M)}-${padStart(D)}`
+  }
+}
+
+function cutDownTime (ts = 0, type) {
+  if (ts < 0) {
+    return `00:00:00`
+  }
+  ts = parseInt(ts)
+  let D = Math.floor(ts / 24 / 60 / 60)
+
+  // 小时位
+  let h = Math.floor((ts - D * 24 * 60 * 60) / 3600)
+  // 分钟位
+  let m = Math.floor((ts - D * 24 * 3600 - h * 3600) / 60)
+  // 秒位
+  let s = ts - D * 24 * 3600 - h * 3600 - m * 60
+  if (['hh:mm:ss'].includes(type)) {
+    return `${padStart(h)}:${padStart(m)}:${padStart(s)}`
+  }
+}
+
 export {
-  timeForMat
+  timeForMat,
+  timeFormat,
+  cutDownTime
 }

htmldev/TBTools/src/views/modules/tools/tools-productaskinfo.vue

@@ -1,13 +1,316 @@
 <template>
-  <div>tools-productaskinfo</div>
+  <el-row v-loading="dataListLoading">
+    <el-col :span="10" :offset="7">
+      <el-form :model="dataForm" :rules="rules" @keyup.enter.native="getDataList()" ref="dataForm">
+        <el-form-item prop="productId">
+          <el-input v-model="dataForm.productId" placeholder="请输入商品ID" clearable></el-input>
+          <el-button type="primary" @click="getDataList()">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <template v-if="booLoading">
+      <el-col class="TT-goods-info">
+        <div class="left">
+          <img :src="goodsInfo.itemPic" alt="">
+        </div>
+        <div class="right">
+          <p>
+            <span class="label">商品名称：</span>
+            <span class="value">{{ goodsInfo.itemTitle }}</span>
+          </p>
+          <p>
+            <span class="label">问答总数：</span>
+            <span class="value">{{ goodsInfo.questionCount }}</span>
+          </p>
+          <p>
+            <span class="label">问答是否已关闭：</span>
+            <span class="value">{{ questionStatus.closeQuestion === 'false' ? '否' : '是' }}</span>
+          </p>
+        </div>
+      </el-col>
+      <el-col class="TT-question-words">
+        <p class="label">问答关键词：</p>
+        <ul class="TT-key-words">
+          <li class="value" v-for="(item, index) in questionWords" :key="index">{{ item }}</li>
+        </ul>
+      </el-col>
+      <el-col>
+        <el-table
+          :data="item"
+          :show-header="false"
+          :default-expand-all="true"
+          style="width: 100%"
+          v-for="(item, index) in dataList"
+          :key="index">
+          <el-table-column
+            prop="id"
+            header-align="center"
+            label="ID"
+            align="center"
+            type="expand">
+            <template slot-scope="props">
+              <ul class="TT-answer-wrap">
+                <li v-for="(item, index) in props.row.subFeeds" :key="index">
+                  <a target="_blank" :href="item.user.userUrl">
+                    <div class="avatar-wrap">
+                      <img :src="item.user.userLogo" alt="">
+                    </div>
+                    <p class="nickname">{{ item.user.userNick }}</p>
+                  </a>
+                  <p class="answer value">{{ item.title }}</p>
+                </li>
+              </ul>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="title"
+            header-align="center"
+            align="left">
+            <template slot-scope="props">
+              <span class="label">问：</span>
+              <span class="value">{{ props.row.title }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="targetUrl"
+            header-align="center"
+            width="160"
+            align="left">
+            <template slot-scope="props">
+              <p class="label" style="margin: 0 auto;">创建时间：</p>
+              <p class="value">{{ props.row.gmtCreate | timeFormat('YY-MM-DD hh:mm:ss') }}</p>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="targetUrl"
+            header-align="center"
+            width="100"
+            align="left">
+            <template slot-scope="props">
+              <a class="value" target="_blank" :href="props.row.targetUrl">
+                <el-button>查看</el-button>
+              </a>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-col>
+        <el-pagination
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageIndex"
+          :page-sizes="[10, 20, 50]"
+          :page-size="pageSize"
+          :total="totalPage"
+          layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+      </el-col>
+    </template>
+  </el-row>
 </template>
 
 <script>
 export default {
-  name: 'tools-productaskinfo'
+  name: 'tools-productaskinfo',
+  data () {
+    return {
+      dataForm: {
+        productId: '' // 602950702411
+      },
+      rules: {
+        productId: [
+          { required: true, message: '请输入商品ID', trigger: 'blur' }
+        ]
+      },
+      dataList: [], // 问答
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      goodsInfo: {}, // 商品信息
+      questionStatus: {},
+      questionWords: [] // 关键词
+    }
+  },
+  computed: {
+    booLoading () {
+      return Object.keys(this.goodsInfo).length
+    }
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return
+        }
+        this.dataListLoading = true
+        this.$http({
+          url: this.$http.adornUrl('/tb/getProductAskInfo'),
+          method: 'POST',
+          data: this.$http.adornData({
+            'page': this.pageIndex,
+            'size': this.pageSize,
+            'productId': this.dataForm.productId
+          })
+        }).then(({ data }) => {
+          if (data.status) {
+            const { item, list, questionStatus, questionWords, total } = data.data
+            this.goodsInfo = item
+            this.dataList = list
+            this.totalPage = total * 1
+            this.questionStatus = questionStatus
+            this.questionWords = questionWords
+          } else {
+            this.$message.error(data.msg)
+          }
+          this.dataListLoading = false
+        })
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+$--color-primary: #3E8EF7;
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+/deep/ .el-form-item {
+  .el-form-item__content {
+    display: flex;
+    align-items: center;
+
+    input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border: 1px solid $--color-primary;
+    }
+
+    button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
+h3 {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.TT-goods-info {
+  display: flex;
+  align-items: center;
+
+  .left {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
 
+  .right {
+    p {
+      margin-top: 4px;
+
+      &:nth-of-type(1) {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+.label {
+  width: 6em;
+  text-align: right;
+  color: #666;
+}
+
+.value {
+  float: 1;
+  color: #000;
+  word-break: break-all;
+}
+
+.TT-question-words {
+  display: flex;
+  margin: 20px auto;
+
+  ul {
+    flex: 1;
+    display: flex;
+    flex-flow: row wrap;
+
+    li {
+      padding: 4px 10px;
+      margin-right: 10px;
+      background: pink;
+    }
+  }
+}
+
+.TT-answer-wrap {
+  padding-left: 10px;
+  margin-top: 10px;
+
+  li {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+
+    &:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+  }
+
+  .avatar-wrap {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .nickname {
+    color: #333;
+    margin-left: 6px;
+  }
+
+  .answer {
+    flex: 1;
+    margin-left: 20px;
+    word-break: break-all;
+  }
+}
 </style>