vue-apps/com.actionsoft.apps.kms.mobile/pages/know-detail-back.vue

<template>
  <div class="detail">
    <div class="content">
      <div class="items">
        <span class="top">{{title}}</span>
        <div>
          <span class="desTitle">{{desTitle}}</span>
          <span class="description">{{description}}</span>
        </div>
      </div>
      <div class="divide"></div>
      <div class="items" style="padding:0;">
        <div class="title">知识附件</div>
        <van-swipe class="my-swipe" :show-indicators="false">
          <van-swipe-item v-for="(el,index) in resultList" :key="index">
            <ul class="list">
              <li v-for="(item,index) in el" :key="index" :style="index%2!=0?'border-bottom:0':''">
                <div class="icon">
                  <i class="awsui-iconfont" v-html="item.icon"></i>
                </div>
                <div class="left">
                  <div class="title">
                    {{item.file}}
                  </div>
                  <div class="description">
                    <label>下载次数：
                      <font>{{item.times}}次</font>
                    </label>
                    <label class="line">|</label>
                    <label>
                      <font>{{item.size}}</font>
                    </label>
                  </div>
                </div>
                <div class="right">
                  <span class="name">{{item.name}}</span>
                  <span class="time">{{item.date}}</span>
                </div>
              </li>
              <div class="li-more" :style="el.length==1?'display:block':''">
                <div v-if="list.length==5" class="more">
                  更多
                  <i class="awsui-iconfont" style="font-size: 13px;">&#xe80a;</i>
                </div>
              </div>
            </ul>
          </van-swipe-item>
        </van-swipe>

      </div>
      <div class="divide"></div>
      <div class="items" style="padding:0;">
        <ul class="list">
          <li style="border-bottom:0;">
            <div class="icon" style="width:40px; height: 40px;">
              <img :src="userHeadImg" alt="">
            </div>
            <div class="left">
              <div class="title">
                {{userName}}
              </div>
              <div class="description">
                {{department}}
              </div>
            </div>
            <div class="right">
              <span class="name" style="color:#4A90E2;">{{evaluate.evaluateNum}}人评价</span>
              <span class="time" style="color:#4A90E2;">{{browseNum}}人浏览</span>
            </div>
          </li>
          <div class="center">
            <div class="left">
              <span class="score">{{score}}</span>
              <van-rate class="start" :size="10" void-icon="star" void-color="#ddd" v-model="start"/>
            </div>
            <div class="right">
              <div class="item">
                <div class="start">
                  <van-rate :size="6" v-model="value" void-icon="star" void-color="#ddd"/>
                </div>
                <van-progress class="progress" color="#ffd21e" pivot-text="" :percentage="50"/>
                <div class="percentage">50%</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate :size="6" :count="4" v-model="value" void-icon="star" void-color="#ddd"/>
                </div>
                <van-progress class="progress" color="#ffd21e" pivot-text="" :percentage="40"/>
                <div class="percentage">40%</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate :size="6" :count="3" v-model="value" void-icon="star" void-color="#ddd"/>
                </div>
                <van-progress class="progress" color="#ffd21e" pivot-text="" :percentage="20"/>
                <div class="percentage">20%</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate :size="6" :count="2" v-model="value" void-icon="star" void-color="#ddd"/>
                </div>
                <van-progress class="progress" color="#ffd21e" pivot-text="" :percentage="10"/>
                <div class="percentage">10%</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate :size="6" :count="1" v-model="value" void-icon="star" void-color="#ddd"/>
                </div>
                <van-progress class="progress" color="#ffd21e" pivot-text="" :percentage="0"/>
                <div class="percentage">0%</div>
              </div>
            </div>
          </div>
          <div class="bottom">
            您的评价：
            <van-rate :size="16" void-icon="star" void-color="#ddd" v-model="start"/>
          </div>
        </ul>
      </div>
      <div class="items" style="padding:0;">
        <ul class="list evaluate">
          <li v-for="(item,index) in evaluate.list" :key="index">
            <div class="icon" style="width:45px;">
              <img :src="item.headImg" alt="">
            </div>
            <div class="left">
              <span class="title">
                {{item.name}}
              </span>
              <span class="date">
                {{item.date}}
              </span>
              <div class="description">
                {{item.description}}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <span class="headImg"><img :src="userHeadImg" alt=""></span>
      <van-field
        class="field border"
        v-model="message"
        center
        placeholder="请输入"
      >
        <template #button>
          <van-button size="small" type="info">提交</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'know-detail',
    data() {
      return {
        value: 0,
        title: 'AWS访问连接池参数调整',
        desTitle: '这是段落描述标题',
        description: '这里是正文内容的描述信息这里是正文内容的描述信息这里是正文内容的描述信息这里是正文内容的描述信息这里是正文内容的描述信息',
        list: [
          {
            id: 'know1',
            icon: '&#xe65a;',
            file: '这里是文件名称.ppt',
            name: '司马懿',
            date: '2017-10-23 10:59',
            times: '23',
            size: '9.24k'
          },
          {
            id: 'know2',
            icon: '&#xe65a;',
            file: '这里是文件名称.ppt',
            name: '司马懿',
            date: '2017-10-23 10:59',
            times: '23',
            size: '9.24k'
          },
          {
            id: 'know3',
            icon: '&#xe65a;',
            file: '这里是文件名称.ppt',
            name: '司马懿',
            date: '2017-10-23 10:59',
            times: '23',
            size: '9.24k'
          },
          {
            id: 'know4',
            icon: '&#xe65a;',
            file: '这里是文件名称.ppt',
            name: '司马懿',
            date: '2017-10-23 10:59',
            times: '23',
            size: '9.24k'
          },
          {
            id: 'know5',
            icon: '&#xe65a;',
            file: '这里是文件名称.ppt',
            name: '司马懿',
            date: '2017-10-23 10:59',
            times: '23',
            size: '9.24k'
          }
        ],
        resultList: [],
        userHeadImg: require('../assets/header.png'),
        department: '研发中心部',
        userName: '李善诗',
        score: '4.2', //评分
        start: 4,  //星星数 必须是number类型
        browseNum: '320', //浏览人数
        evaluate: {
          evaluateNum: '9238', //评价人数
          list: [ //评价列表
            {
              headImg: require('../assets/header.png'),
              name: '司马懿',
              date: '2019-12-10 08:22:23',
              description: '这里是评价内容描述这里是评价内容描述这里是评价内容描述这里是评价内容描述'
            },
            {
              headImg: require('../assets/header.png'),
              name: '司马懿',
              date: '2019-12-10 08:22:23',
              description: '这里是评价内容描述这里是评价内容描述这里是评价内容描述这里是评价内容描述'
            },
            {
              headImg: require('../assets/header.png'),
              name: '司马懿',
              date: '2019-12-10 08:22:23',
              description: '这里是评价内容描述这里是评价内容描述这里是评价内容描述这里是评价内容描述'
            },
            {
              headImg: require('../assets/header.png'),
              name: '司马懿',
              date: '2019-12-10 08:22:23',
              description: '这里是评价内容描述这里是评价内容描述这里是评价内容描述这里是评价内容描述'
            }
          ]
        },
        message: ''
      }
    },

    methods: {
      getItemResult() {
        var chunk = 2 //每2个分一组
        var list = []
        if (this.list.length > 5) {
          list = this.list.slice(0, 5)
        } else {
          list = this.list
        }
        for (var i = 0, len = list.length; i < len; i += chunk) {
          this.resultList.push(list.slice(i, i + chunk))
        }
      }
    },
    created() {
      this.getItemResult()
      console.log(this.$route.params.id)
    }
  }
</script>

<style scoped>
  .detail {
    height: 100%;
  }

  .detail .content {
    border-top: 1px solid #e9e9e9;
    color: #666;
    height: calc(100% - 51px);
    overflow-y: auto;
    width: 100%;
  }

  .items {
    padding: 12px;
  }

  .items span {
    display: inline-block;
  }

  .top {
    font-size: 16px;
    color: #666;
    font-weight: bold;
    line-height: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
    width: 100%;
  }

  .desTitle {
    line-height: 18px;
    padding: 12px 0 5px;
    width: 100%;
    color: #666;
  }

  .description {
    line-height: 16px;
    color: #999;
    width: 100%;
  }

  .title {
    padding-bottom: 6px;
    line-height: 16px;
    border-bottom: 1px solid #e9e9e9;
    padding: 12px;
  }

  .list {
    padding: 0 12px;
    float: left;
    width: calc(100% - 24px);
  }

  .list span, .list label {
    display: inline-block;
  }

  .list li {
    float: left;
    padding: 11px 0;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list li:not(:last-child) {
    border-bottom: 1px solid #e9e9e9;
  }

  .list li .icon {
    float: left;
    padding-right: 10px;
  }

  .list li .icon .awsui-iconfont {
    font-size: 35px;
    color: #FFB800;
  }

  .list li .left {
    width: calc(100% - 110px);
    float: left;
  }

  .list li .left .title, .list li .right .name {
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333;
    line-height: 18px;
    padding: 0 0 6px;
    border: 0;
    width: 100%;
  }

  .list li .right .name {
    font-size: 12px;
    padding: 0;
  }

  .list li .left .description, .list li .right .time {
    color: #999999;
    line-height: 15px;
  }

  .list li .left .description .line {
    display: inline-block;
    margin: 0 6px;
  }

  .list li .right {
    width: 110px;
    text-align: right;
    float: right;
  }

  .list .li-more {
    padding: 0;
    border: none;
    height: 67px;
    line-height: 67px;
    width: 100%;
    display: none;
  }

  .list .li-more .more {
    color: #999;
    line-height: 20px;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    width: 100%;
    letter-spacing: 1px;
  }

  .list .center {
    float: left;
    background: #f9f9f9;
    padding: 10px;
    width: calc(100% - 20px);
  }

  .list .center .left {
    width: 66px;
    text-align: center;
    margin-right: 2px;
    float: left;
  }

  .list .center .left .score {
    font-size: 40px;
    font-weight: bold;
    color: #333;
    vertical-align: top;
    line-height: 30px;
    padding-bottom: 10px;
  }

  .list .center .right {
    float: left;
    width: calc(100% - 68px);
  }

  .list .center .right .item {
    float: left;
    line-height: 10px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .list .center .right .item .start {
    width: 48px;
    margin-right: 10px;
    float: left;
    text-align: right;
  }

  .list .center .right .item .progress {
    width: calc(100% - 80px);
    float: left;
    margin-right: 5px;
  }

  .list .center .right .item .percentage {
    width: 27px;
    font-size: 10px;
    float: left;
    color: #999;
  }

  .list .bottom {
    float: left;
    line-height: 16px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .evaluate li .left {
    width: 100%;
  }

  .evaluate li .left .title {
    width: auto;
    padding: 0;
  }

  .evaluate li .date {
    color: #999;
    float: right;
  }

  .evaluate li .description {
    float: left;
  }

  .footer {
    position: fixed;
    border-top: 1px solid #e9e9e9;
    padding-left: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    display: flex;
    align-items: center;
  }

  .footer .headImg {
    width: 30px;
    display: inline-block;
  }

  .footer .field {
    width: calc(100% - 30px);
  }

  .footer .van-button {
    height: 28px;
    line-height: 28px;
    border-radius: 2px;
    padding: 0 !important;
  }
</style>
<style>
  .my-swipe .van-swipe-item {
    height: 134px;
  }

  .start .van-rate__item:not(:last-child) {
    padding-right: 2px;
  }

  .list .center .right .item .start .van-rate__item:not(:last-child) {
    padding-right: 4px;
  }
  .footer .field .van-field__control{
    padding:0 7px;
    font-size: 12px;
    position: relative;
    padding-left: 22px;
  }
  .footer .field::before {
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    font-family: "awsui-iconfont";
    content: "\e636";
    background: none;
    font-size: 14px;
    z-index: 10;
    height: 24px;
    color:#999;
  }
</style>