xq-csg-weapp_uni-ts/src/packages/enterprise/pages/discount/discount.vue

<template>
  <view>
    <custom-nav-bar position="fixed" color="black" :left-text="options.name" left-arrow />

    <view class="second-model" v-if="options.name === '办事指南'">
      <view class="second-line flex flex-v-center flex-between" :style="itemName.cssStyle"
        v-for="(itemName, idx) in recursionList" :key="idx">
        <navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl, itemName)"
          hover-class="none"></navigator>

        <image class="line-img" :src="itemName.icon"></image>

        <view class="line-name flex1">{{ itemName.name }}</view>

        <image class="line-you" src="/static/images/ic-you.png"></image>
      </view>
    </view>

    <view class="two-model flex flex-v-center flex-between" v-if="options.name === '事务办理'">
      <view class="second-line flex flex-col line1" :style="itemName.cssStyle" v-for="(itemName, idx) in recursionList"
        :key="idx">
        <navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl, itemName)"
          hover-class="none"></navigator>

        <image class="line-bg" :src="itemName.icon"></image>

        <view class="line-title">{{ itemName.name }}</view>

        <view v-if="itemName.remark" class="line-msg">{{ itemName.remark }}</view>
      </view>
    </view>

    <view class="three-model" v-if="options.name === '便民小知识'">
      <view class="second-line flex flex-v-center flex-between" :style="itemName.cssStyle"
        v-for="(itemName, idx) in recursionList" :key="idx">
        <navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl, itemName)"
          hover-class="none"></navigator>

        <view class="line-name flex1 line-text-1">{{ itemName.name }}</view>

        <image class="line-you" src="/static/images/ic-you.png"></image>
      </view>
    </view>
  </view>
</template>
<script>
  // const app = getApp();
  // const {
  //   publicApi
  // } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
import utils from '@/utils/util.map.js'
  export default {
    data() {
      return {
        options: {
          name: ''
        },
        recursionList: []
      };
    },
    onLoad(options) {
      this.options = options
      this.recursionApi();
    },
    methods: {
      updateQuery(url, name) {
      return utils.updateQuery(url, name);
    },
      async recursionApi() {
        const {
          bannerType,
          parentId
        } = this.options;
        const res = await publicApi.recursionApi({
          bannerType,
          parentId
        });
        if (res.data) {
          this.recursionList = res.data
          console.log(this.recursionList)
        }
      },

      // 通用函数
      generalFunction(res) {
        if (res.data && res.data.createTime) {
          // res.data.createTime = app.globalData.util.timeFormat(res.data.createTime);
          if (res.data.content) {
            res.data.content = res.data.content
              .replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ')
              .replace(/&lt;/g, '<')
              .replace(/&gt;/g, '>')
              .replace(/&amp;nbsp;/g, ' ')
              .replace(/&quot;/g, '"');
          }
          return res.data;
        }
        return {};
      }
    }
  };
</script>
<style lang="less">
  .line-navigator {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
  }

  .second-model {
    margin-top: 32rpx;
    width: 100%;
    height: 100%;
    padding: 0 12rpx;

    .second-line {
      height: 120rpx;
      border-bottom: 1px solid #efefef;
      position: relative;

      .line-img {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
      }

      .line-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
      }

      .line-name {
        position: absolute;
        font-size: 34rpx;
        font-weight: 400;
        color: #333333;
        line-height: 34rpx;
        margin-left: 42rpx;
      }

      .line-you {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .two-model {
    margin-top: 29rpx;
    flex-wrap: wrap;

    .second-line {
      width: 343rpx;
      height: 110rpx;
      justify-content: center;
      padding-left: 39rpx;
      position: relative;

      &:not(:first-child) {
        margin-top: 16rpx;
      }

      .line-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
      }

      .line-title {
        position: absolute;
        font-size: 40rpx;
        font-weight: 500;
        line-height: 32rpx;
      }

      .line-msg {
        position: absolute;
        margin-top: 100rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        line-height: 26rpx;
      }
    }

    .line1 {
      width: 100%;
      height: 171rpx;

      .line-title {
        font-size: 40rpx;
        font-weight: 500;
        line-height: 40rpx;
      }
    }
  }

  .three-model {
    margin-top: 32rpx;
    width: 100%;
    height: 100%;
    padding: 0 12rpx;

    .second-line {
      height: 120rpx;
      border-bottom: 1px solid #efefef;
      position: relative;

      .line-name {
        font-size: 34rpx;
        font-weight: 400;
        color: #007bd7;
        line-height: 34rpx;
        margin-left: 42rpx;
      }

      .line-you {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
</style>