From 86dd335cae7efcd6cd8c2a324e0690f8321a8d09 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Sun, 24 Apr 2022 14:19:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A3=E4=BC=A0=E8=B5=84=E8=AE=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppInfotainment/AppInfotainment.vue | 390 +++++++++--
 src/apps/AppInfotainment/detail.vue          |  59 --
 src/apps/AppInfotainment/liveList.vue        | 146 ++++
 src/apps/AppInfotainment/newsDetail.vue      | 697 +++++++++++++++++++
 src/apps/AppInfotainment/newsList.vue        | 276 ++++++++
 src/apps/AppInfotainment/productList.vue     | 287 ++++++++
 src/apps/AppInfotainment/products.vue        | 148 ++++
 src/apps/AppInfotainment/projectList.vue     | 145 ----
 src/apps/AppInfotainment/select.vue          |  65 ++
 9 files changed, 1966 insertions(+), 247 deletions(-)
 delete mode 100644 src/apps/AppInfotainment/detail.vue
 create mode 100644 src/apps/AppInfotainment/liveList.vue
 create mode 100644 src/apps/AppInfotainment/newsDetail.vue
 create mode 100644 src/apps/AppInfotainment/newsList.vue
 create mode 100644 src/apps/AppInfotainment/productList.vue
 create mode 100644 src/apps/AppInfotainment/products.vue
 delete mode 100644 src/apps/AppInfotainment/projectList.vue
 create mode 100644 src/apps/AppInfotainment/select.vue

diff --git a/src/apps/AppInfotainment/AppInfotainment.vue b/src/apps/AppInfotainment/AppInfotainment.vue
index f50d1cfb..cfec9cb4 100644
--- a/src/apps/AppInfotainment/AppInfotainment.vue
+++ b/src/apps/AppInfotainment/AppInfotainment.vue
@@ -1,57 +1,361 @@
 <template>
   <div class="AppInfotainment">
-    <div>
-      <div class="title">点击进入栏目</div>
-      <div class="project">
-        <span @click="toProject">通知公告</span>
+    <div class="header">
+      <div class="header-tab">
+        <img src="https://cdn.cunwuyun.cn/dvcp/live/dh.png" alt="" class="more-icon" @click="toSelect()">
+        <u-tabs :list="tabList" :current="currIndex" @change="changeTab" style="width:650rpx" :font-size="26"></u-tabs>
+        <!-- <div v-for="(item, index) in tabList" :key="index" @click="changeTab(index)" v-if="index < 5" :class="currIndex == index ? 'tab-item active-item' : 'tab-item'">{{item}}<span class="active-line" v-if="currIndex == index"></span></div> -->
       </div>
     </div>
-    
-    <!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else /> -->
+    <div class="news-list">
+      <div class="item" hover-class="bg-hover" v-for="(item, index) in newsList" :key="index" @click="toDetail(item)">
+        <div class="item-wrapper solid" :style="{display: type === '1' ? 'block' : 'flex'}">
+          <div class="item-left flex1">
+            <h2 :style="{marginBottom: item.type === '1' ? '16rpx' : '30rpx'}" v-if="item.type != '1'">{{ item.title }}</h2>
+            <div class="item-video" v-if="item.type === '1'">
+              <p class="item-title">{{item.title}}</p>
+              <image class="play-btn" src="https://cdn.cunwuyun.cn/dvcp/pay-btn.png" />
+              <div class="mask"></div>
+              <image class="cover" :src="item.coverFile" mode="aspectFill" />
+            </div>
+            <div class="item-left__bottom item-active" :class="[item.photo ? 'item-active' : '']">
+              <span class="top-text" v-if="item.top == 1">置顶</span>
+              <span>{{tabList[item.detailType].name || ''}}</span>
+              <span>{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</span>
+            </div>
+          </div>
+          <image  v-if="item.type === '0'" :src="item.coverFile" mode="aspectFill" />
+        </div>
+      </div>
+      <AiEmpty v-if="!newsList.length && isShowEmpty"/>
+      <div class="noMore" v-if="isMore && current !== 0">没有更多了噢！</div>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'AppInfotainment',
-  appName: '宣传资讯',
-  data() {
-    return {
+  export default {
+    name: 'AppInfotainment',
+    appName: '宣传资讯',
+    data () {
+      return {
+        currIndex: 0,
+        title: '',
+        // isLoading: false,
+        newsList: [],
+        isShowEmpty: false,
+        isMore: false,
+        current: 0,
+        areaId: '',
+        tabList: [{name: '全部'}, {name: '通知公告'}, {name: '工作动态'},
+        {name: '惠民政策'}, {name: '中央精神'},{name: '旅游故事'},{name: '特色农产品'}]
+      }
+    },
+
+    onLoad (params) {
+      // this.areaId = params.areaId
+      // uni.setStorageSync('newTypeIndex', '')
+      // this.$loading()
+      // this.getNewsList()
+      // uni.setNavigationBarTitle({
+      //   title: params.title || '乡村资讯',    //页面标题
+      // })
+    },
+    onShow() {
+      // if(uni.getStorageSync('newTypeIndex')) {
+      //   this.currIndex = uni.getStorageSync('newTypeIndex')
+      //   this.getListInit()
+      // }
+    },
+
+    methods: {
+      toSelect() {
+        // this.$linkTo(`./select?index=${this.currIndex}`)
+        uni.navigateTo({url: './select'})
+      },
+      changeTab(index) {
+        this.currIndex = index
+        this.getListInit()
+      },
+
+      onConfirm () {
+        this.isMore = false
+        this.current = 0
+        this.$loading()
+
+        this.$nextTick(() => {
+          this.getNewsList(this.areaId)
+        })
+      },
+
+      getListInit() {
+        this.isMore = false
+        this.current = 0
+        this.newsList = []
+        this.$loading()
+        this.getNewsList()
+      },
+      getNewsList() {
+        if (this.isMore || this.isLoading) return
+        var type = this.currIndex
+        if(this.currIndex == 0) {
+          type = ''
+        }
+        this.isLoading = true
+        this.$instance.post(`/app/appnewscenterinfo/listForWxNew?current=${this.current + 1}&type=${type}&size=10&title=${this.title}&areaId=${this.areaId}`, null, {
+          withoutToken: 1
+        }).then(res => {
+          if (res.code === 0) {
+            this.isShowEmpty = true
+            this.$hideLoading()
+
+            if (this.current === 0) {
+              this.newsList = []
+            }
+            if (!res.data.records.length) {
+              this.isMore = true
+              this.isLoading = false
+
+              this.$nextTick(() => {
+                this.pageShow = true
+              })
+
+              return false
+            }
+
+            const data = res.data.records
+            this.newsList.push(...data)
+            this.current = this.current + 1
+            this.isLoading = false
+
+            this.$nextTick(() => {
+              this.pageShow = true
+            })
+          } else {
+            this.$hideLoading()
+          }
+        }).catch(() => {
+          this.$hideLoading()
+          this.isShowEmpty = true
+          this.isLoading = false
+        })
+      },
+      toDetail(item) {
+        if(item.detailType == 6 || item.detailType == 5) { //特色农产品  旅游故事
+          this.$linkTo(`/subPages/live/products?id=${item.id}&detailType=${item.detailType}`)
+        }else {
+         this.$linkTo(`/subPages/live/newsDetail?id=${item.id}&areaId=${this.areaId}&type=${this.currIndex}`)
+        }
+      },
+    },
+
+    onReachBottom () {
+      this.getNewsList(this.areaId)
     }
-  },
-  methods: {
-    toProject() {
-      uni.navigateTo({url: './projectList'})
-    }
-  },
-  onShow() {
-    document.title = '政策动态'
-  },
-}
+  }
 </script>
 
 <style lang="scss" scoped>
-.uni-page-body {
-  background: pink !important;
-}
-.AppInfotainment {
-  .title {
-    padding: 30px;
-    box-sizing: border-box;
-    color: #B9B9B9;
-    font-size: 26px;
-  }
-
-  .project {
-    padding: 10px 30px;
-    box-sizing: border-box;
-
-    span {
-      padding: 5px 20px;
-      border: 1px solid #CBCBCB;
-      border-radius: 24px;
-      margin-right: 20px;
+  .header-tab{
+    background-color: #fff;
+    position: relative;
+    padding: 0 100rpx 0 0;
+    .more-icon{
+      position: absolute;
+      width: 40rpx;
+      height: 38rpx;
+      right: 32rpx;
+      top: 20rpx;
+    }
+    .tab-item{
+      color: #666;
+    }
+    .active-item{
+      color: #3376FD;
+    }
+    .active-line{
+      background-color: #3376FD;
     }
   }
-}
-</style>
\ No newline at end of file
+  .news-list{
+    padding-top: 20rpx;
+  }
+  .news {
+    min-height: 100vh;
+    padding-top: 96rpx;
+    background: #fff;
+  }
+
+  .item-video {
+    position: relative;
+    height: 388rpx;
+    margin-bottom: 24rpx;
+
+    .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 11;
+      background: rgba(0, 0, 0, 0.16);
+    }
+
+    .play-btn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 121;
+      width: 80rpx;
+      height: 80rpx;
+      margin: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    .item-title{
+      width: 100%;
+      padding: 0 30rpx 10rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #FFF;
+      line-height: 40rpx;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      word-break: break-all;
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      background: rgba(0, 0, 0, .4);
+      box-sizing: border-box;
+    }
+
+    .cover {
+      display: block;
+      width: 100%!important;
+      height: 388rpx!important;
+      margin-left: 0!important;
+    }
+  }
+
+  div {
+    box-sizing: border-box;
+  }
+
+  .noMore {
+    line-height: 90rpx;
+    text-align: center;
+    color: #999;
+    font-size: 26rpx;
+  }
+
+  .news {
+    background: #fff;
+  }
+
+  .header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 10000;
+    width: 100%;
+    padding: 8rpx 0;
+    background: #fff;
+
+    .header-search {
+      display: flex;
+      align-items: center;
+      width: 690rpx;
+      height: 60rpx;
+      margin: 0 auto 8rpx;
+      padding: 0 32rpx;
+      background: #0D6DDC;
+      border-radius: 30rpx;
+
+      image {
+        flex-shrink: 1;
+        width: 32rpx;
+        height: 32px;
+        margin-right: 12rpx;
+      }
+
+      input {
+        flex: 1;
+        height: 100%;
+        font-size: 28rpx;
+        color: #fff;
+      }
+    }
+  }
+
+  .item {
+    padding: 0 30rpx;
+
+    &:first-child {
+      .item-wrapper {
+        padding-top: 0!important;
+      }
+    }
+
+    .item-wrapper {
+      padding: 30rpx 0 20rpx;
+      display: flex;
+      align-items: center;
+    }
+
+    .item-left {
+      flex: 1;
+
+      h2 {
+        margin-bottom: 32rpx;
+        color: #333333;
+        font-size: 30rpx;
+        font-weight: 700;
+      }
+
+      .item-left__bottom {
+        display: flex;
+
+        span {
+          margin-right: 10rpx;
+          color: #999999;
+          font-size: 22rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .top-text{
+          font-size: 22rpx;
+          color: #EF4645;
+          margin-right: 16rpx;
+        }
+      }
+    }
+
+    image {
+      flex-shrink: 0;
+      width: 224rpx;
+      height: 140rpx;
+      // margin-left: 46rpx;
+    }
+  }
+
+  .no-more {
+    margin-top: 20rpx;
+    text-align: center;
+    color: #999;
+
+    image {
+      width: 400rpx;
+      height: 240rpx;
+    }
+
+    p {
+      text-align: center;
+      color: #999;
+      font-size: 28rpx;
+    }
+  }
+</style>
diff --git a/src/apps/AppInfotainment/detail.vue b/src/apps/AppInfotainment/detail.vue
deleted file mode 100644
index f0d6ba2d..00000000
--- a/src/apps/AppInfotainment/detail.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="detail">
-    <h2 class="title">加强检疫,精准防控！广州举办疫情防 控新</h2>
-    <div>通知公告 2021-06-23</div>
-    <u-parse :html="content" />
-    <div class="accessory">
-      <p>附件</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'detail',
-  data () {
-    return {}
-  },
-  methods: {
-
-
-
-
-
-    // 下载附件
-    // previewFile(file) {
-    //   let fileList = [{
-    //     index: 0,
-    //     url: file.accessUrl
-    //   }]
-    //   if(file.postfix == ".png" || file.postfix == "jpg") {
-    //     uni.previewImage({
-    //       urls: fileList.map(v => v.url),
-    //       current: file.accessUrl
-    //     })
-    //   } else {
-    //     wx.downloadFile({
-    //       url: file.accessUrl,
-    //       success: function (res) {
-    //         const filePath = res.tempFilePath
-    //         wx.openDocument({
-    //           filePath: filePath,
-    //           success: function (res) {
-    //             console.log('打开文档成功')
-    //           }
-    //         })
-    //       }
-    //     })
-    //   }
-    // },
-  },
-  onShow() {
-    document.title = '详情'
-  },
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/src/apps/AppInfotainment/liveList.vue b/src/apps/AppInfotainment/liveList.vue
new file mode 100644
index 00000000..b991a2aa
--- /dev/null
+++ b/src/apps/AppInfotainment/liveList.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="item-list">
+    <div class="live-item" v-for="(op,i) in list" :key="i">
+      <video :src="op.videoFile.url" :id="`video${i+1}`">
+        <cover-view class="live-item__wrapper" v-show="currIndex != i" @ended="ended(`video${i+1}`)">
+          <cover-view class="live-item__mask"></cover-view>
+          <cover-image class="live-item__banner" :src="op.coverFile.url"/>
+          <cover-image class="play-btn" hover-class="text-hover" @click="play(`video${i+1}`, i)"
+                       src="https://cdn.cunwuyun.cn/img/bf@2x.png"/>
+          <cover-view class="live-item__text">{{ op.title }}</cover-view>
+        </cover-view>
+      </video>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoContext: null,
+      currIndex: -1,
+      videoId: '',
+      list: []
+    }
+  },
+  onLoad(params) {
+    this.getList(params?.areaId)
+  },
+  methods: {
+    getList(areaId) {
+      this.$instance.post(`/app/appnewscenterinfo/homepage?areaId=${areaId}`, null, {
+        withoutToken: true
+      }).then(res => {
+        if (res?.data) {
+          this.list = res.data?.videoList
+        }
+      })
+    },
+    play(videoId, index) {
+      if (this.videoContext) {
+        this.videoContext.stop()
+      }
+
+      this.currIndex = index
+      this.videoContext = wx.createVideoContext(videoId)
+
+      this.$nextTick(() => {
+        this.videoContext.play()
+      })
+    },
+    ended(id) {
+      let videoContext = uni.createVideoContext(id, this);
+      videoContext.exitFullScreen();
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.item-list {
+  min-height: 100%;
+
+  .live-item {
+    position: relative;
+    height: 396px;
+    margin-bottom: 20px;
+
+    video {
+      width: 100%;
+      height: 396px;
+    }
+
+    .live-item__wrapper {
+      position: relative;
+      width: 100%;
+      height: 396px;
+
+      .live-item__mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    .live-item__top {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 11;
+      width: 128px;
+      height: 56px;
+      line-height: 56px;
+      color: #fff;
+      font-size: 24px;
+      padding-left: 44px;
+      box-sizing: border-box;
+      background: url(https://cdn.cunwuyun.cn/img/jb@2x.png) no-repeat;
+      background-size: 128px 56px;
+    }
+
+    .live-item__text {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 72px;
+      line-height: 72px;
+      padding: 0 40px;
+      box-sizing: border-box;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 32px;
+      font-weight: 700;
+      color: #fff;
+      box-sizing: border-box;
+      background: rgba(0, 0, 0, 0.6);
+    }
+
+    .live-item__top {
+      position: absolute;
+    }
+
+    .live-item__banner {
+      width: 100%;
+      height: 396px;
+    }
+
+    .play-btn {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      z-index: 11;
+      width: 80px;
+      height: 80px;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppInfotainment/newsDetail.vue b/src/apps/AppInfotainment/newsDetail.vue
new file mode 100644
index 00000000..59926645
--- /dev/null
+++ b/src/apps/AppInfotainment/newsDetail.vue
@@ -0,0 +1,697 @@
+<template>
+  <div class="news-detail" v-if="pageShow">
+    <div class="video" v-if="info.videoFile">
+      <video :src="info.videoFile.url" :poster="info.coverFile.url"></video>
+    </div>
+    <div class="detail-top" :class="[info.videoFile ? 'detail-top__active' : '']">
+      <h2>{{ info.title }}</h2>
+      <div class="detail-info">
+        <div class="left">{{ info.areaName }} {{ info.createTime ? info.createTime.split(' ')[0] : '' }} </div>
+        <div class="right">
+          <div class="right-item">
+            <i class="iconfont">{{ info.videoFile ? '&#xe6f9;' : '&#xe6fc;'}}</i>
+            <span>{{ info.viewCount }}</span>
+          </div>
+          <div class="right-item">
+            <i class="iconfont" :style="{color: info.nowUserStatus === '0' ? '#C41C19' : '#666'}">&#xe698;</i>
+            <span :style="{color: info.nowUserStatus === '0' ? '#C41C19' : '#666'}">{{ info.upCount }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="detail-content" v-if="!info.videoFile">
+        <!-- <div v-html="info.content" class="articalContent"></div> -->
+        <!-- <image :src="info.coverFile.url" mode="widthFix" /> -->
+        <!-- <AiWxparse :imageProp="imageProp" className="articalContent" :content="info.content"/> -->
+        <!-- <u-parse className="articalContent" :html="info.content"/> -->
+      </div>
+    </div>
+    <div class="detail-comments">
+      <h2>全部评论({{ commentsTotal }})</h2>
+      <div class="comments-list">
+        <div class="item" v-for="(item, index) in commentList" :key="index">
+          <image :src="item.avatar" />
+          <div class="item-right">
+            <div class="item-right__top">
+              <h2>{{ item.name || '-' }}</h2>
+              <div class="item-right__top--right" @click="replySuport(item.id, index)">
+                <i class="iconfont" :style="{color: item.status === '0' ? '#C41C19' : '#666'}">&#xe698;</i>
+                <span :style="{color: item.status === '0' ? '#C41C19' : '#666'}">{{ item.supportedQuantity }}</span>
+              </div>
+            </div>
+            <div class="item-right__content">{{ item.content }}</div>
+            <div class="item-right__info">
+              <span>{{ item.name }} {{ item.commentTime.substring(0, 10)}} </span>
+              <i @click="reply(item.id, item.name)">回复TA</i>
+            </div>
+            <div class="item-replay" v-if="item.secondComments.length">
+              <div class="item-replay__item" v-for="(reply, i) in item.secondComments" :key="i" v-if="i < 2 || item.isShow === '1'">
+                <h3>{{ reply.name }}: </h3>
+                <span>{{ reply.content }}</span>
+              </div>
+              <div class="item-replay__more" v-if="item.secondComments.length > 2 && item.isShow !== '1'" @click="showMore(index)">
+                查看全部{{ item.secondComments.length }}条回复 >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="no-more" v-if="!commentList.length">
+          <image src="https://cdn.cunwuyun.cn/img/Empty.png" />
+          <p>暂无评论</p>
+        </div>
+      </div>
+    </div>
+    <AiTransSpeech :src="info.speech"></AiTransSpeech>
+    <div class="footer-bar">
+      <input
+        :cursor-spacing="10"
+        :placeholder="focus ? '' : '我来说两句…'"
+        @confirm="onConfirm"
+        confirm-type="send"
+        :focus="focus"
+        :disabled="true"
+        @click="showComments"
+        @blur="focus = false, placeholder = '', commentId = ''">
+      <div class="footer-bar__right flex1">
+        <div class="count flex1" v-if="info.type === '0'">
+          <img src="https://cdn.cunwuyun.cn/components/comment/pinglun.png" alt="" class="icon-img">
+          <span>{{ commentsTotal }}</span>
+        </div>
+        <div class="flex1" v-if="info.type === '0'">
+          <img src="https://cdn.cunwuyun.cn/components/comment/tabdz.png" alt="" class="icon-img" @click="suport">
+        </div>
+        <button class="flex1" v-if="info.type === '0'" open-type="share" style="text-align: center">
+          <img src="https://cdn.cunwuyun.cn/components/comment/tabfx.png" alt="" class="icon-img">
+        </button>
+        <div class="video-item" v-if="info.type === '1'" @click="suport" :style="{color: info.nowUserStatus === '0' ? '#C41C19' : '#666'}">
+          <img src="https://cdn.cunwuyun.cn/components/comment/tabdz.png" alt="" class="icon-img">
+          <span>赞</span>
+        </div>
+        <button open-type="share" class="video-item" v-if="info.type === '1'">
+          <img src="https://cdn.cunwuyun.cn/components/comment/tabfx.png" alt="" class="icon-img">
+          <span>分享</span>
+        </button>
+      </div>
+    </div>
+    <div class="comments" v-if="isShowComment" mode="bottom" @close="focus = false" :closeable="false">
+      <div class="mask" @click="isShowComment = false"></div>
+      <div class="comments-wrapper" :style="{bottom: bottom + 'px'}">
+        <div class="textarea">
+          <textarea
+            placeholder="我来说两句…"
+            :focus="focus"
+            :maxlength="1000"
+            fixed
+            @keyboardheightchange="keyboardheightchange"
+            :adjust-position="false"
+            :show-confirm-bar="false"
+            v-model="commnet">
+          </textarea>
+          <div class="textarea-bottom">
+            <span></span>
+            <div>字数{{ commnet.length }}/1000</div>
+          </div>
+        </div>
+        <div class="comments-bottom">
+          <span @click="commnet = ''">清空内容</span>
+          <div @click="onConfirm">发表</div>
+        </div>
+      </div>
+		</div>
+    <ai-login ref="login"></ai-login>
+  </div>
+</template>
+
+<script>
+  import {mapState} from 'vuex'
+  // import AiLogin from '@/components/AiLogin/AiLogin'
+  export default {
+    name: 'newsDetail',
+    computed: {
+      ...mapState(['token'])
+    },
+    components: {
+      // AiLogin
+    },
+    data () {
+      return {
+        isShowComment: false,
+        info: {},
+        imageProp: {
+          mode: 'widthFix',
+          padding: 0,
+          lazyLoad: false,
+          domain: ''
+        },
+        bottom: 0,
+        placeholder: '',
+        pageShow: false,
+        commnet: '',
+        commentList: [],
+        commnetId: '',
+        areaId: '',
+        focus: false,
+        current: 0,
+        isMore: false,
+        commentsTotal: 0
+      }
+    },
+
+    onLoad (params) {
+      this.$loading()
+      this.id = params.id
+      this.areaId = params.areaId
+      this.type = params.type
+
+      this.$nextTick(() => {
+        this.getDetail()
+        this.getComments()
+      })
+    },
+
+    methods: {
+      login() {
+        this.$refs.login.show()
+      },
+
+      keyboardheightchange (e) {
+        this.bottom = e.detail.height
+      },
+
+      showComments () {
+        if(!this.token) {
+          this.login()
+          return false
+        }
+        this.commnetId = ''
+        this.isShowComment = true
+
+        setTimeout(() => {
+          this.focus = true
+        }, 500)
+      },
+
+      reply (id, name) {
+        if(!this.token) {
+          this.login()
+          return false
+        }
+        this.isShowComment = true
+        this.commentId = id
+
+        setTimeout(() => {
+          this.focus = true
+        }, 800)
+      },
+
+      showMore (index) {
+        this.$set(this.commentList[index], 'isShow', '1')
+      },
+
+      suport() {
+        this.$loading()
+
+        this.$instance.post('/app/appnewscenterinfo/suportFree?id=' + this.id).then(res => {
+          this.$hideLoading()
+          if (res.code === 0) {
+            this.$set(this.info, 'upCount', this.info.upCount + 1)
+            this.$set(this.info, 'nowUserStatus', '0')
+            this.$toast('点赞成功')
+          }
+        })
+      },
+
+      replySuport (id, index) {
+        this.$loading()
+        this.$instance.post('/app/appnewscentercommenthot/suportFree', {
+          commentId: id,
+          status: this.commentList[index].status === '0' ? '1' : '0'
+        }).then(res => {
+          this.$hideLoading()
+          if (res.code === 0) {
+            this.$set(this.commentList[index], 'supportedQuantity', this.commentList[index].supportedQuantity + 1)
+            this.$set(this.commentList[index], 'status', '0')
+            this.$toast('点赞成功')
+          }
+        })
+      },
+
+      getDetail() {
+        var url = '/app/appnewscenterinfo/queryDetailByIdForWx?id=' + this.id
+        if(this.type == 5) { //旅游故事
+          url = '/app/appcountrysidetourism/queryDetailByIdForWX?id=' + this.id
+        }
+        this.$instance.post(url).then(res => {
+          this.$hideLoading()
+          if (res.code === 0) {
+            this.info = res.data
+            this.$hideLoading()
+
+            this.$nextTick(() => {
+              this.pageShow = true
+            })
+          }
+        })
+      },
+
+      onConfirm () {
+        if (!this.commnet) {
+          return this.$toast('评论不能为空')
+        }
+
+        this.$loading()
+        this.$instance.post('/app/appnewscentercomment/addOrUpdateForWX', {
+          circleId: this.id,
+          content: this.commnet,
+          type: this.commentId ? 2 : 1,
+          commentId: this.commentId,
+          name: uni.getStorageSync('userInfo').nickName,
+          areaId: this.areaId
+        }).then(res => {
+          this.$hideLoading()
+          if (res.code === 0) {
+            this.commnet = ''
+            this.$toast(this.commentId ? '回复成功' : '评论成功')
+            this.current = 0
+            this.isMore = false
+            this.getComments()
+            this.commentId = ''
+            this.placeholder = ''
+          } else {
+            this.commentId = ''
+            this.placeholder = ''
+            this.$toast(res.msg)
+          }
+          this.isShowComment = false
+        }).catch(() => {
+            this.commentId = ''
+            this.placeholder = ''
+          this.$hideLoading()
+        })
+      },
+
+      getComments() {
+        this.$instance.post('/app/appnewscentercomment/listForWX?size=5&circleId=' + this.id + '&current=' + (this.current + 1)).then(res => {
+          if (res.code === 0) {
+            this.commentsTotal = res.data.total
+
+            if (this.current === 0) {
+              this.commentList = []
+            }
+            if (!res.data.records.length) {
+              this.isMore = true
+              this.isLoading = false
+
+              this.$nextTick(() => {
+                this.pageShow = true
+              })
+
+              return false
+            }
+
+            const data = res.data.records.map(item => {
+              item.isShow = '0'
+
+              return item
+            })
+            this.commentList.push(...data)
+            this.current = this.current + 1
+          }
+        })
+      }
+    },
+
+    onReachBottom () {
+      this.getComments()
+    },
+
+    onShareAppMessage () {
+      return {
+        title: this.info.title,
+        imageUrl: this.info.coverFile.url,
+        path: `/subPages/live/newsDetail?id=${this.id}&areaId=${this.$areaId}`
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .news-detail {
+    padding-bottom: 120rpx;
+
+    div {
+      box-sizing: border-box;
+    }
+
+    .comments {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1111;
+
+      .mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    .comments-wrapper {
+      position: absolute;
+      bottom: 0;
+      z-index: 1;
+      width: 100%;
+      padding: 32rpx 32rpx 16rpx;
+      background: #FFFFFF;
+
+      .textarea {
+        position: relative;
+        width: 100%;
+        margin-bottom: 24rpx;
+        padding: 16rpx;
+        background: #F7F7F7;
+        border-radius: 8px;
+
+        textarea {
+          width: 100%;
+          height: 94rpx;
+          color: #666;
+          font-size: 26rpx;
+        }
+
+        .textarea-bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 16rpx;
+          color: #999999;
+          font-size: 26rpx;
+        }
+      }
+
+      .comments-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 16rpx;
+
+        span {
+          color: #666666;
+          font-size: 26rpx;
+        }
+
+        div {
+          width: 144rpx;
+          height: 64rpx;
+          line-height: 64rpx;
+          text-align: center;
+          color: #fff;
+          font-size: 28rpx;
+          background: #135AB8;
+          border-radius: 32rpx;
+        }
+      }
+    }
+
+    .icon-img{
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 8rpx;
+    }
+    .video-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      color: #666;
+      font-size: 28rpx;
+
+      i {
+        padding-right: 4rpx;
+      }
+    }
+
+    .detail-top__active {
+      padding-top: 30rpx;
+
+      h2 {
+        margin-bottom: 28rpx;
+      }
+    }
+
+    .video {
+      width: 100%;
+      height: 396rpx;
+
+      video {
+        display: block;
+        width: 100%;
+        height: 396rpx;
+      }
+    }
+  }
+  .no-more {
+    margin-top: 20rpx;
+    text-align: center;
+    color: #999;
+
+    image {
+      width: 400rpx;
+      height: 240rpx;
+    }
+
+    p {
+      text-align: center;
+      color: #999;
+      font-size: 28rpx;
+    }
+  }
+
+  .detail-top {
+    padding: 10rpx 30rpx 26rpx;
+    background: #fff;
+
+    & > h2 {
+      margin-bottom: 40rpx;
+      color: #333333;
+      font-size: 40rpx;
+    }
+
+    .detail-info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #333333;
+      font-size: 24rpx;
+
+      .right {
+        display: flex;
+        align-items: center;
+
+        & > div {
+          display: flex;
+          align-items: center;
+
+          &:first-child {
+            margin-right: 60rpx;
+          }
+        }
+
+        i {
+          margin-right: 10rpx;
+          font-size: 32rpx;
+        }
+      }
+    }
+
+    .detail-content {
+      margin-top: 46rpx;
+
+      image {
+        display: block;
+        width: 100%;
+        height: 400rpx;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  .detail-comments {
+    margin-top: 20rpx;
+    padding: 0 30rpx 20rpx;
+    background: #fff;
+
+    & > h2 {
+      padding-top: 16rpx;
+      font-size: 30rpx;
+      color: #333333;
+    }
+
+    .comments-list {
+      .item {
+        display: flex;
+        margin-top: 35px;
+
+        image {
+          flex-shrink: 1;
+          width: 50rpx;
+          height: 50rpx;
+          border-radius: 50%;
+          margin-right: 22rpx;
+        }
+
+        .item-right {
+          flex: 1;
+
+          .item-right__top {
+            display: flex;
+            justify-content: space-between;
+            height: 50rpx;
+
+            .item-right__top--right {
+              display: flex;
+              align-items: center;
+              padding-left: 20rpx;
+
+              i {
+                margin-right: 10rpx;
+                color: #666;
+                font-size: 28rpx;
+              }
+
+              span {
+                color: #333333;
+                font-size: 24rpx;
+              }
+            }
+          }
+
+          .item-right__content {
+            line-height: 46rpx;
+            color: #333333;
+            font-size: 28rpx;
+            text-align: justify;
+          }
+
+          .item-right__info {
+            display: flex;
+            align-items: center;
+            margin: 10rpx 0;
+
+            span {
+              margin-right: 20rpx;
+              color: #999999;
+              font-size: 24rpx;
+            }
+
+            i {
+              color: #333333;
+              font-size: 24rpx;
+            }
+          }
+
+          .item-replay {
+            padding: 30rpx;
+            background: #F0F0F0;
+
+            .item-replay__item {
+              display: flex;
+              line-height: 1.3;
+              margin-bottom: 10rpx;
+
+              h3 {
+                color: #333333;
+                font-size: 26rpx;
+                font-weight: 600;
+              }
+
+              span {
+                font-size: 26rpx;
+              }
+            }
+
+            .item-replay__more {
+              color: #999999;
+              font-size: 26rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .footer-bar {
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: space-between;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    border-top: 1rpx solid rgba(0, 0, 0, 0.2);
+    background: #fff;
+
+    input {
+      width: 460rpx;
+      height: 58rpx;
+      background: #F0F0F0;
+      border-radius: 30rpx;
+      font-size: 26rpx;
+      text-align: center;
+    }
+
+    .footer-bar__right {
+      display: flex;
+      align-items: center;
+
+      i {
+        font-size: 30rpx;
+        color: #666;
+      }
+
+      .count {
+        position: relative;
+        text-align: right;
+
+        span {
+          position: absolute;
+          top: -18rpx;
+          right: -11rpx;
+          z-index: 21;
+          padding: 3rpx 7rpx;
+          font-size: 20rpx;
+          color: #fff;
+          border-radius: 12rpx;
+          background: #C41C19;
+        }
+      }
+
+      .count, & > i {
+        margin-right: 40rpx;
+      }
+
+      button {
+        padding: 0!important;
+        font-size: 26rpx!important;
+        color: #666!important;
+        line-height: 1!important;
+        background: transparent!important;
+
+        &::after {
+          border: none;
+        }
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/apps/AppInfotainment/newsList.vue b/src/apps/AppInfotainment/newsList.vue
new file mode 100644
index 00000000..af942f6c
--- /dev/null
+++ b/src/apps/AppInfotainment/newsList.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="news">
+    <div class="fixed-top">
+      <div class="header-search">
+        <div class="search-input-content">
+          <img src="https://cdn.cunwuyun.cn/img/search-blue.svg" alt="" class="search-icon">
+          <input type="text" placeholder="请输入标题" class="search-input" placeholder-style="color:#E2E8F1;" v-model="title" @confirm="onConfirm" confirm-type="search" />
+        </div>
+      </div>
+      <div class="header-tab">
+        <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">{{item}}<span class="active-line" v-if="currIndex == index"></span></div>
+      </div>
+    </div>
+    <div class="news-list">
+      <div class="item" hover-class="bg-hover" v-for="(item, index) in newsList" :key="index" @click="toDetail(item.id)">
+        <div class="item-wrapper solid" :style="{display: type === '1' ? 'block' : 'flex'}">
+          <div class="item-left flex1">
+            <h2 :style="{marginBottom: item.type === '1' ? '16rpx' : '30rpx'}">{{ item.title }}</h2>
+            <div class="item-video" v-if="item.type === '1'">
+              <image class="play-btn" src="https://cdn.cunwuyun.cn/img/bf@2x.png" />
+              <div class="mask"></div>
+              <image class="cover" :src="item.coverFile.url" mode="aspectFill" />
+            </div>
+            <div class="item-left__bottom item-active" :class="[item.photo ? 'item-active' : '']">
+              <span class="top-text">置顶</span>
+              <span>浏览{{ item.viewCount }}</span>
+              <span>点赞{{ item.upCount }}</span>
+              <span>{{ item.createTime ? item.createTime.split(' ')[0] : '-' }}</span>
+            </div>
+          </div>
+          <image v-if="item.type === '0'" :src="item.coverFile.url" mode="aspectFill" />
+        </div>
+      </div>
+      <div class="noMore" v-if="isMore && current !== 0">没有更多了噢！</div>
+      <div class="no-more" v-if="!newsList.length && isShowEmpty">
+        <image src="https://cdn.cunwuyun.cn/img/Empty.png" />
+        <p>暂无相关信息</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'newsList',
+
+    data () {
+      return {
+        currIndex: 0,
+        title: '',
+        isLoading: false,
+        newsList: [],
+        isShowEmpty: false,
+        isMore: false,
+        current: 0,
+        areaId: '',
+        tabList: ['全部', '视频', '文章']
+      }
+    },
+
+    onLoad (params) {
+      this.areaId = params.areaId
+      this.$loading()
+      this.getNewsList(params.areaId)
+    },
+
+    methods: {
+      changeTab(index) {
+        this.currIndex = index
+        this.isMore = false
+        this.current = 0
+        this.$loading()
+
+        this.$nextTick(() => {
+          this.getNewsList(this.areaId)
+        })
+      },
+
+      onConfirm () {
+        this.isMore = false
+        this.current = 0
+        this.$loading()
+
+        this.$nextTick(() => {
+          this.getNewsList(this.areaId)
+        })
+      },
+
+      getNewsList(areaId) {
+        if (this.isMore || this.isLoading) return
+        let type = ''
+
+        if (this.currIndex === 1) {
+          type = 1
+        } else if (this.currIndex === 2) {
+          type = 0
+        }
+
+        this.isLoading = true
+        this.$instance.post(`/app/appnewscenterinfo/listForWx?current=${this.current + 1}&type=${type}&size=10&areaId=&title=${this.title}`, null, {
+          withoutToken: 1
+        }).then(res => {
+          if (res.code === 0) {
+            this.isShowEmpty = true
+            this.$hideLoading()
+
+              if (this.current === 0) {
+                this.newsList = []
+              }
+            if (!res.data.records.length) {
+              this.isMore = true
+              this.isLoading = false
+
+              this.$nextTick(() => {
+                this.pageShow = true
+              })
+
+              return false
+            }
+
+            const data = res.data.records
+            this.newsList.push(...data)
+            this.current = this.current + 1
+            this.isLoading = false
+
+            this.$nextTick(() => {
+              this.pageShow = true
+            })
+          } else {
+            this.$hideLoading()
+          }
+        }).catch(() => {
+          this.$hideLoading()
+          this.isShowEmpty = true
+          this.isLoading = false
+        })
+      },
+
+      toDetail (id) {
+        this.$linkTo(`/subPages/live/newsDetail?id=${id}&areaId=${this.areaId}`)
+      }
+    },
+
+    onReachBottom () {
+      this.getNewsList(this.areaId)
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .news-list{
+    padding-top: 120rpx;
+  }
+  .news {
+    min-height: 100vh;
+    padding-top: 96rpx;
+    background: #fff;
+  }
+
+  .item-video {
+    position: relative;
+    height: 388rpx;
+    margin-bottom: 24rpx;
+
+    .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 11;
+      background: rgba(0, 0, 0, 0.16);
+    }
+
+    .play-btn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 121;
+      width: 80rpx;
+      height: 80rpx;
+      margin: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    .cover {
+      display: block;
+      width: 100%!important;
+      height: 388rpx!important;
+      margin-left: 0!important;
+    }
+  }
+
+  div {
+    box-sizing: border-box;
+  }
+
+  .noMore {
+    line-height: 90rpx;
+    text-align: center;
+    color: #999;
+    font-size: 26rpx;
+  }
+
+  .news {
+    background: #fff;
+  }
+
+  .item {
+    padding: 0 30rpx;
+
+    &:first-child {
+      .item-wrapper {
+        padding-top: 0!important;
+      }
+    }
+
+    .item-wrapper {
+      padding: 30rpx 0 20rpx;
+      display: flex;
+      align-items: center;
+    }
+
+    .item-left {
+      flex: 1;
+
+      h2 {
+        margin-bottom: 32rpx;
+        color: #333333;
+        font-size: 30rpx;
+        font-weight: 700;
+      }
+
+      .item-left__bottom {
+        display: flex;
+
+        span {
+          margin-right: 10rpx;
+          color: #999999;
+          font-size: 22rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .top-text{
+          font-size: 22rpx;
+          color: #EF4645;
+          margin-right: 16rpx;
+        }
+      }
+    }
+
+    image {
+      flex-shrink: 0;
+      width: 224rpx;
+      height: 140rpx;
+      margin-left: 46rpx;
+    }
+  }
+
+  .no-more {
+    margin-top: 20rpx;
+    text-align: center;
+    color: #999;
+
+    image {
+      width: 400rpx;
+      height: 240rpx;
+    }
+
+    p {
+      text-align: center;
+      color: #999;
+      font-size: 28rpx;
+    }
+  }
+</style>
diff --git a/src/apps/AppInfotainment/productList.vue b/src/apps/AppInfotainment/productList.vue
new file mode 100644
index 00000000..de2029f3
--- /dev/null
+++ b/src/apps/AppInfotainment/productList.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="news">
+    <div class="news-list">
+      <div class="item" hover-class="bg-hover" v-for="(item, index) in newsList" :key="index" @click="toDetail(item)">
+        <div class="item-wrapper solid" :style="{display: type === '1' ? 'block' : 'flex'}">
+          <div class="item-left flex1">
+            <h2 :style="{marginBottom: item.type === '1' ? '16rpx' : '30rpx'}">{{ item.title }}</h2>
+            <div class="item-video" v-if="item.type === '1'">
+              <image class="play-btn" src="https://cdn.cunwuyun.cn/img/bf@2x.png" />
+              <div class="mask"></div>
+              <image class="cover" :src="item.coverFile" mode="aspectFill" />
+            </div>
+            <div class="item-left__bottom item-active" :class="[item.photo ? 'item-active' : '']">
+              <span class="top-text" v-if="item.top == 1">置顶</span>
+              <span>{{tabList[item.detailType].name || ''}}</span>
+              <span>{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</span>
+            </div>
+          </div>
+          <image v-if="item.type === '0'" :src="item.coverFile" mode="aspectFill" />
+        </div>
+      </div>
+      <AiEmpty v-if="!newsList.length && isShowEmpty"/>
+      <div class="noMore" v-if="isMore && current !== 0">没有更多了噢！</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'productList',
+    data () {
+      return {
+        currIndex: 0,
+        title: '',
+        isLoading: false,
+        newsList: [],
+        isShowEmpty: false,
+        isMore: false,
+        current: 0,
+        areaId: '',
+      }
+    },
+
+    onLoad (params) {
+      this.areaId = params.areaId
+      this.$loading()
+      this.getNewsList()
+    },
+    onShow() {
+      this.getListInit()
+    },
+
+    methods: {
+      toSelect() {
+        this.$linkTo(`/subPages/live/select?index=6`)
+      },
+
+      onConfirm () {
+        this.isMore = false
+        this.current = 0
+        this.$loading()
+
+        this.$nextTick(() => {
+          this.getNewsList(this.areaId)
+        })
+      },
+
+      getListInit() {
+        this.isMore = false
+        this.current = 0
+        this.newsList = []
+        this.$loading()
+        this.getNewsList()
+      },
+      getNewsList() {
+        if (this.isMore || this.isLoading) return
+        this.isLoading = true
+        this.$instance.post(`/app/appnewscenterinfo/listForWxNew?current=${this.current + 1}&type=6&size=10&title=${this.title}&areaId=${this.areaId}`, null, {
+          withoutToken: 1
+        }).then(res => {
+          if (res.code === 0) {
+            this.isShowEmpty = true
+            this.$hideLoading()
+
+            if (this.current === 0) {
+              this.newsList = []
+            }
+            if (!res.data.records.length) {
+              this.isMore = true
+              this.isLoading = false
+
+              this.$nextTick(() => {
+                this.pageShow = true
+              })
+
+              return false
+            }
+
+            const data = res.data.records
+            this.newsList.push(...data)
+            this.current = this.current + 1
+            this.isLoading = false
+
+            this.$nextTick(() => {
+              this.pageShow = true
+            })
+          } else {
+            this.$hideLoading()
+          }
+        }).catch(() => {
+          this.$hideLoading()
+          this.isShowEmpty = true
+          this.isLoading = false
+        })
+      },
+      toDetail(item) {
+        this.$linkTo(`/subPages/live/products?id=${item.id}&detailType=${item.detailType}`)
+      },
+    },
+
+    onReachBottom () {
+      this.getNewsList(this.areaId)
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .news-list{
+    padding-top: 20rpx;
+  }
+  .news {
+    min-height: 100vh;
+    background: #fff;
+  }
+
+  .item-video {
+    position: relative;
+    height: 388rpx;
+    margin-bottom: 24rpx;
+
+    .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 11;
+      background: rgba(0, 0, 0, 0.16);
+    }
+
+    .play-btn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 121;
+      width: 80rpx;
+      height: 80rpx;
+      margin: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    .cover {
+      display: block;
+      width: 100%!important;
+      height: 388rpx!important;
+      margin-left: 0!important;
+    }
+  }
+
+  div {
+    box-sizing: border-box;
+  }
+
+  .noMore {
+    line-height: 90rpx;
+    text-align: center;
+    color: #999;
+    font-size: 26rpx;
+  }
+
+  .news {
+    background: #fff;
+  }
+
+  .header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 10000;
+    width: 100%;
+    padding: 8rpx 0;
+    background: #fff;
+
+    .header-search {
+      display: flex;
+      align-items: center;
+      width: 690rpx;
+      height: 60rpx;
+      margin: 0 auto 8rpx;
+      padding: 0 32rpx;
+      background: #0D6DDC;
+      border-radius: 30rpx;
+      
+      image {
+        flex-shrink: 1;
+        width: 32rpx;
+        height: 32px;
+        margin-right: 12rpx;
+      }
+
+      input {
+        flex: 1;
+        height: 100%;
+        font-size: 28rpx;
+        color: #fff;
+      }
+    }
+  }
+
+  .item {
+    padding: 0 30rpx;
+
+    &:first-child {
+      .item-wrapper {
+        padding-top: 0!important;
+      }
+    }
+
+    .item-wrapper {
+      padding: 30rpx 0 20rpx;
+      display: flex;
+      align-items: center;
+    }
+
+    .item-left {
+      flex: 1;
+
+      h2 {
+        margin-bottom: 32rpx;
+        color: #333333;
+        font-size: 30rpx;
+        font-weight: 700;
+      }
+
+      .item-left__bottom {
+        display: flex;
+
+        span {
+          margin-right: 10rpx;
+          color: #999999;
+          font-size: 22rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .top-text{
+          font-size: 22rpx;
+          color: #EF4645;
+          margin-right: 16rpx;
+        }
+      }
+    }
+
+    image {
+      flex-shrink: 0;
+      width: 224rpx;
+      height: 140rpx;
+      margin-left: 46rpx;
+    }
+  }
+
+  .no-more {
+    margin-top: 20rpx;
+    text-align: center;
+    color: #999;
+
+    image {
+      width: 400rpx;
+      height: 240rpx;
+    }
+
+    p {
+      text-align: center;
+      color: #999;
+      font-size: 28rpx;
+    }
+  }
+</style>
diff --git a/src/apps/AppInfotainment/products.vue b/src/apps/AppInfotainment/products.vue
new file mode 100644
index 00000000..b4ce1707
--- /dev/null
+++ b/src/apps/AppInfotainment/products.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="page">
+    <div class="swiper-content" v-if="list.length">
+      <u-swiper :list="list" mode="number" height="720" bg-color="none"></u-swiper>
+    </div>
+    <div class="name-info">
+      <h2>{{info.title}}</h2>
+      <p v-if="detailType == 6">{{info.businessUnit}}</p>
+    </div>
+    <div class="products-info" v-if="detailType == 6">
+      <div class="flex-info">
+        <div class="label">联系人</div>
+        <div class="value">{{info.contactPerson}}</div>
+      </div>
+      <div class="flex-info">
+        <div class="label">电话</div>
+        <div class="value">{{info.contactPhone}}
+          <img src="https://cdn.cunwuyun.cn/dvcp/recruitWorkers/phone-icon.png" alt="" @click="callPhone()">
+        </div>
+      </div>
+      <div class="flex-info">
+        <div class="label">地址</div>
+        <div class="value">{{info.address}}</div>
+      </div>
+    </div>
+    <!-- <p class="content" v-html="info.content"></p> -->
+    <u-parse className="articalContent" :html="info.content" class="content"></u-parse>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'page',
+    data () {
+      return {
+        pageShow: false,
+        info: {},
+        id: '',
+        list: [],
+        detailType: 5, //5旅游故事 6特色农产品
+      }
+    },
+    onLoad (option) {
+      this.id = option.id
+      this.detailType = option.detailType
+      this.getDetail()
+    },
+
+    methods: {
+      getDetail() {
+        this.$instance.post('/app/appcountrysidetourism/queryDetailByIdForWX?id=' + this.id).then(res => {
+          this.$hideLoading()
+          if (res.code === 0) {
+            res.data.photo = JSON.parse(res.data.photo)
+            if(res.data.photo.length) {
+              res.data.photo.map((item) => {
+                this.list.push(item.url)
+              })
+            }
+            this.info = res.data
+            this.$hideLoading()
+
+            this.$nextTick(() => {
+              this.pageShow = true
+            })
+          }
+        })
+      },
+      callPhone() {
+        wx.makePhoneCall({
+          phoneNumber: this.info.contactPhone,
+        })
+      }
+    },
+    onShareAppMessage () {
+      return {
+        title: this.info.title,
+        path: `/subPages/live/products?id=${this.id}&detailType=${this.detailType}`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.page{
+  padding-bottom: 80rpx;
+  background-color: #f3f6f9;
+  .name-info{
+    padding: 16rpx 32rpx 14rpx;
+    background-color: #fff;
+    margin-bottom: 16rpx;
+    h2{
+      width: 100%;
+      height: 50rpx;
+      font-size: 36rpx;
+      font-weight: 500;
+      color: #333;
+      line-height: 50rpx;
+      margin-bottom: 8rpx;
+    }
+    p{
+      width: 100%;
+      height: 40rpx;
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #666;
+      line-height: 40rpx;
+    }
+  }
+  .products-info{
+    background-color: #fff;
+    margin-bottom: 16rpx;
+    .flex-info{
+      display: flex;
+      line-height: 40rpx;
+      font-size: 28rpx;
+      color: #333;
+      .label{
+        padding: 24rpx 0;
+        width: 176rpx;
+        padding-left: 32rpx;
+        box-sizing: border-box;
+        font-weight: 500;
+      }
+      .value{
+        padding: 24rpx 32rpx 24rpx 0;
+        width: calc(100% - 176rpx);
+        border-bottom: 2rpx solid #eee;
+        box-sizing: border-box;
+        word-break: break-all;
+        img{
+          width: 48rpx;
+          height: 48rpx;
+          float: right;
+        }
+      }
+    }
+  }
+  .content{
+    padding: 32rpx;
+    background-color: #fff;
+    word-break: break-all;
+    font-size: 32rpx;
+    color: #666;
+    line-height: 56rpx;
+  }
+}
+</style>
diff --git a/src/apps/AppInfotainment/projectList.vue b/src/apps/AppInfotainment/projectList.vue
deleted file mode 100644
index bdf1eb72..00000000
--- a/src/apps/AppInfotainment/projectList.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <div class="projectList">
-    <AiTopFixed>
-      <scroll-view :scroll-x="true" style="width: 100%;background: #FFF;">
-        <div class="tab-select">
-          <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item.name}}<span></span></div>
-        </div>
-      </scroll-view>
-    </AiTopFixed>
-    <div class="List">
-      <div class="item">
-        <!-- <video class="banner-img" :src="item.videoUrl"></video> -->
-        <div class="info">
-          <div class="left">
-            <h2>最新消息！我国正在研制鼻喷或 雾化的新型,最新消息！我国正在研制鼻喷或 雾化的新型,最新消息！我国正在研制鼻喷或 雾化的新型</h2>
-            <p><span>通知公告</span> 2021-06-23</p>
-          </div>
-          <div class="right">
-            <!-- <img src="" alt=""> -->
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'projectList',
-  data() {
-    return {
-      tabIndex: 0,
-      tabs: [
-        {id:'A1',name:'全部'},
-        {id:'A2',name:'通知公告'},
-        {id:'A3',name:'工作动态'},
-        {id:'A4',name:'惠民政策'},
-        {id:'A5',name:'中央政策'},
-        {id:'A6',name:'政策动态'},
-        {id:'A7',name:'新闻资讯'},
-        {id:'A8',name:'军事新闻'},
-        {id:'A9',name:'娱乐大事件'},],
-    }
-  },
-  methods: {
-    // scroll(e) {
-    //   console.log(e);
-    // },
-    tabClick(index) {
-      this.tabIndex = index;
-    }
-
-
-    
-  },
-  onShow() {
-    document.title = '新闻列表'
-  },
-
-}
-</script>
-
-<style lang="scss" scoped>
-.projectList {
-  ::v-deep .AiTopFixed .content {
-    padding: 0 30px;
-  }
-  .tab-select {
-    width: 100%;
-    height: 90px;
-    line-height: 90px;
-    background: #FFF;
-    display: flex;
-
-    .item{
-      display: inline-block;
-      box-sizing: border-box;
-      padding: 0 20px;
-      text-align: center;
-      font-size: 28px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #666666;
-      white-space: nowrap;
-
-    }
-
-    .active{
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      position: relative;
-      color: #3376FD;
-      span{
-        width: 48px;
-        height: 4px;
-        background: #3376FD;
-        position: absolute;
-        bottom: 14px;
-        left: 50%;
-        margin-left: -24px;
-      }
-    }
-  }
-  .List {
-    padding: 0 30px;
-    box-sizing: border-box;
-    background: #FFF;
-    .item {
-      padding: 30px 0 20px 0;
-      border-bottom: 1px solid #DDDDDD ;
-      .info {
-        display: flex;
-        .left {
-          width: 420px;
-          h2 {
-            font-size: 30px;
-            color: #333333;
-            font-weight: 600;
-            overflow:hidden; 
-            text-overflow:ellipsis;
-            display:-webkit-box;
-            -webkit-box-orient:vertical;
-            -webkit-line-clamp:2;
-          }
-          p {
-            margin-top: 30px;
-            font-size: 22px;
-            color: #999999;
-            span {
-              margin-right: 20px;
-            }
-          }
-        }
-        .right {
-          width: 224px;
-          height: 140px;
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/apps/AppInfotainment/select.vue b/src/apps/AppInfotainment/select.vue
new file mode 100644
index 00000000..bda34089
--- /dev/null
+++ b/src/apps/AppInfotainment/select.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="page">
+    <div class="title">点击进入栏目</div>
+    <div class="tab-list">
+      <div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : ' tab-item'" @click="tabClick(index)">{{item}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'page',
+    data () {
+      return {
+        tabList: ['全部', '通知公告', '工作动态', '惠民政策', '中央精神', '旅游故事',  '特色农产品'],
+        tabIndex: 0
+      }
+    },
+    onLoad (option) {
+      this.tabIndex = option.index
+    },
+
+    methods: {
+     tabClick(index) {
+      this.tabIndex = index
+      uni.setStorageSync('newTypeIndex', index)
+      uni.navigateBack({delta: 1})
+     }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.page{
+  height: 100%;
+  background-color: #FFFFFF;
+  .title{
+    font-size: 26rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #B9B9B9;
+    line-height: 36rpx;
+    padding: 32rpx 0 30rpx 40rpx;
+  }
+  .tab-list{
+    padding: 0 0 0 30rpx;
+    .tab-item{
+      display: inline-block;
+      width: 144rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      text-align: center;
+      border-radius: 24rpx;
+      border: 2rpx solid #CBCBCB;
+      font-size: 26rpx;
+      color: #333;
+      box-sizing: border-box;
+      margin: 0 38rpx 32rpx 0;
+    }
+    .active{
+      color: #3376FD;
+    }
+  }
+}
+</style>