yicangzongtai_app_240321/pages/index/news_detail.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="detail">
      <view class="title">
        {{detail.title}}
      </view>
      <view class="postMessage">
        <!-- <view> -->
        <view class="">
          <text class="iconfont2 icon-img">&#xe643;</text>
          <text>发布者：{{detail.publisher||'松河公益'}}</text>
        </view>
        <view class="">
          <text class="iconfont2 icon-img">&#xe66c;</text>
          <text>{{detail.create_time}}</text>
        </view>
        <!-- </view> -->
        <!-- <view @click="shareHandler">
          <text class="iconfont2 icon-img">&#xe615;</text>
          <text>分享</text>
        </view> -->
      </view>
      <view class="content">
        <view class="ql-editor-box" v-html="detail.content">
        </view>
      </view>
      <view class="browse">
        <view class="look-box">
          <text class="iconfont3 look-icon">&#xe63b;</text>
          <text>浏览量：{{detail.browse_sum||0}}</text>
        </view>
      </view>
    </view>
    <view class="gray" v-if="recommend_goods_list.length || recommend_shop_list.length"></view>
    <view class="correlation" v-if="recommend_goods_list.length || recommend_shop_list.length">
      <view class="goods" v-if="recommend_goods_list.length">
        <u-section title="推荐商品" font-size="28" :bold="true" color="#1A1A1A" :show-line="true" line-color="#3775F6"
          :right="false">
        </u-section>
        <view class="goods-item" v-for="(v, index) in recommend_goods_list" :key="v.id" @click="goGoodsDetails(v)">
          <view class="goods-img">
            <image :src="v.cover.split(',')[0]" mode="aspectFill"></image>
          </view>
          <view class="right">
            <view class="goods-title">{{v.title}}</view>
            <view class="buy">
              <view class="hot-large">
                <rich-text :nodes="$mUtil.priceBigSmall(v.min_sale_price)"></rich-text>
              </view>
              <view class="goBuy">立即购买</view>
            </view>
          </view>
        </view>
      </view>

      <view class="shop" v-if="recommend_shop_list.length">
        <u-section title="推荐联盟商家" font-size="28" :bold="true" color="#1A1A1A" :show-line="true" line-color="#3775F6"
          :right="false">
        </u-section>
        <view class="items">
          <view class="item" v-for="(v, index) in recommend_shop_list" :key="v.id" @click="goShopDetails(v)">
            <view class="shop-img">
              <image :src="v.logo" mode="aspectFill"></image>
            </view>
            <view class="right">
              <view class="title">{{v.shop_name}}</view>
              <view class="score-box">
                <view class="score">
                  <rate :value="Math.round(v.average)"></rate>
                </view>
                <text class="score-text">{{v.average.toFixed(2)}}分</text>
                <text class="ju">距离：{{Math.round(v.distance/1000*100)/100}}KM</text>
              </view>
              <view class="address-box">
                <view class="left">
                  <image class="location1" src="/static/shop/location-icon.png" mode="widthFix">
                  </image>
                  <view class="district">{{v.map_punctuation || '商户暂无地理位置'}}</view>
                </view>
                <view class="goShopping">
                  <text class="iconfont3">&#xe787;</text>
                  <text class="text">去逛逛</text>
                </view>
              </view>
              <!-- <view class="location2-box">
              <image class="location2" src="/static/convenienceService/location2.png" mode="widthFix">
              </image>
              <view>{{v.map_punctuation}}&gt;</view>
            </view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <share ref="shares" :contentHeight="580"></share> -->
  </view>
</template>

<script>
  import share from "@/pages/public/share";
  import rate from "@/components/rate.vue"
  export default {
    components: {
      share,
      rate
    },
    data() {
      return {
        config: {
          back: true,
          title: '资讯详情',
          color: '#1a1a1a',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        detail: {},
        recommend_goods_list: [],
        recommend_shop_list: []
      }
    },
    onLoad(options) {
      if (options && options.id) {
        this.getDetail(options.id)
      }
    },
    methods: {
      getDetail(id) {
        let locationObj = uni.getStorageSync('locationObj')
        console.log(locationObj, 1111)
        this.$http.post(`/information/infoAndDistance`, {
          id: id,
          lon: locationObj.longitude.toFixed(4),
          lat: locationObj.latitude.toFixed(4)
        }).then(res => {
          if (res.code === 200) {
            this.detail = res.data
            this.recommend_goods_list = res.data.recommend_goods_list || []
            this.recommend_shop_list = res.data.recommend_shop_list || []
          }
        })
      },
      shareHandler() {
        let token = uni.getStorageSync("apiToken");
        let user = uni.getStorageSync("personal");
        if (!token) {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        } else {
          // 咨询分享
          // this.$http.post(`/information/share/${this.detail.id}`).then(res => {})
          this.$nextTick(() => {
            this.$refs.shares.shareInfo("/?&shareId=" + user.id, null, null, null, null, this.detail.id);
          });

        }
      },
      goGoodsDetails(v) {
        uni.navigateTo({
          url: `/pages/product/goods/goods?id=${v.id}`
        })
      },
      goShopDetails(v) {
        uni.navigateTo({
          url: `/pages/nearbyShop/shopDetail?shopId=${v.id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail {
    padding: 20rpx 20rpx 40rpx 30rpx;

    .title {
      margin-bottom: 14rpx;
      font-size: 35rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 52rpx;
      letter-spacing: -0.7rpx;
    }

    .postMessage {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10rpx;
      margin-bottom: 30rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #999999;

      & view {
        display: flex;
        align-items: center;
        width: 50%;

        text:last-child {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        // margin-right: 50rpx;
      }

      .mb20 {
        margin-bottom: 20rpx;
      }

      .icon-img {
        margin-right: 8rpx;
        color: #FA6138;
        font-size: 36rpx;
      }
    }

    .look-box {
      display: flex;
      align-items: center;

      .look-icon {
        font-size: 36rpx;
        margin-right: 8rpx;
        margin-top: 8rpx;
      }
    }

    * {
      word-break: break-all;
    }

    .content /deep/ img {
      max-width: 100%;
    }

    .content /deep/ .ql-align-center {
      text-align: center;
    }

    .content /deep/ .ql-align-right {
      text-align: right;
    }

    .content /deep/ blockquote {
      display: block;
      border-left: 8px solid #d0e5f2;
      padding: 5px 10px;
      margin: 10px 0;
      line-height: 1.4;
      font-size: 100%;
      background-color: #f1f1f1;
    }

    .content /deep/ .ql-indent-1 {
      margin-left: 60rpx;
    }

    .content /deep/ .ql-indent-2 {
      margin-left: 120rpx;
    }

    .content /deep/ .ql-indent-3 {
      margin-left: 180rpx;
    }

    .content /deep/ .ql-indent-4 {
      margin-left: 240rpx;
    }

    .content /deep/ .ql-indent-5 {
      margin-left: 300rpx;
    }
    
    .content {
      /deep/ .ql-editor-box {
        .ql-video {
          width: 100%;
          // height: 45vw;
        }
      }
    }

    .browse {
      margin-top: 30rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #999999;

      view {
        display: flex;
        align-items: center;
      }

      .icon-img {
        margin-right: 8rpx;
        color: #FA6138;
        font-size: 36rpx;
      }
    }

  }

  .gray {
    width: 100%;
    height: 10rpx;
    background: #f5f5f5;
  }

  .correlation {
    padding: 40rpx 30rpx;

    .u-section {
      margin-bottom: 25rpx;
    }
  }

  .goods {
    padding-bottom: 30rpx;

    .goods-item {
      display: flex;
      padding: 20rpx 30rpx 20rpx 20rpx;
      margin-bottom: 30rpx;
      border-radius: 16rpx;
      box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);

      .goods-img {
        width: 169rpx;
        height: 169rpx;
        margin-right: 40rpx;
        border-radius: 10rpx;
        overflow: hidden;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        flex: 1;
        width: 0;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #181818;

        .goods-title {
          margin-bottom: 10rpx;
          overflow: hidden;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

        .buy {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .hot-large {
          color: #FF6600;
          font-size: 36rpx;
          font-weight: Bold;
          line-height: 24rpx;

          text {
            font-size: 36rpx;
            margin-left: 10rpx;
          }
        }

        .goBuy {
          width: 182rpx;
          height: 63rpx;
          background: #FA6138;
          border-radius: 32rpx;
          font-size: 28rpx;
          text-align: center;
          line-height: 63rpx;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }
  }

  .shop {
    .items {
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;
        // border-bottom: 1rpx solid #e6e6e6;

        .shop-img {
          width: 162rpx;
          height: 158rpx;
          margin-right: 40rpx;
          border-radius: 10rpx;
          overflow: hidden;
          flex-shrink: 0;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          flex: 1;
          width: 0;

          .score-box,
          .address-box,
          .location2-box {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
          }

          .location1,
          .location2 {
            width: 20rpx;
            height: 27rpx;
            flex-shrink: 0;
            margin-right: 9rpx;
          }

          .light-start,
          .startt {
            width: 30rpx;
            height: 30rpx;
            margin-right: 12rpx;
          }

          .title {
            margin-bottom: 18rpx;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            color: #1a1a1a;
          }

          .score-box {
            display: flex;
            align-items: normal;
            margin-bottom: 10rpx;
            font-family: PingFang SC, PingFang SC-Semibold;
            color: #333333;

            .score {
              flex-shrink: 0;
            }

            .score-text {
              font-size: 24rpx;
              font-family: PingFang SC, PingFang SC-Medium;
              font-weight: 500;
              text-align: left;
              color: #333333;
              flex-shrink: 0;
            }

            .ju {
              margin-left: 23rpx;
              font-size: 24rpx;
              color: #808080;
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .address-box {
            // margin-bottom: 10rpx;
            font-family: PingFang SC;
            color: #666666;
            justify-content: space-between;

            .left {
              flex: 1;
              width: 0;
              display: flex;
              align-items: center;
              font-size: 24rpx;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #333333;
            }

            .goShopping {
              display: flex;
              align-items: center;
              font-size: 40rpx;
              color: #FA6138;
              flex-shrink: 0;

              .text {
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: 500;
                text-align: left;
                color: #666666;
              }
            }

            .district {
              color: #1a1a1a;
              margin-right: 40rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

          }

          .location2-box {
            color: #333333;

            view {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
</style>