nk-shop2.0/pages/nongKe/cloud_entrepot/index.vue

<template>
  <view class="cloud_entrepot" :style="{'min-height': winHeight + 'px'}">
    <view class="head-wrapper"></view>
    <view class="town-title">{{town}}里海云仓</view>
    <view class="body-wrapper">
      <block v-for="(item,index) in cloudList" :key="index">
        <navigator class="item"
          :url="`/pages/nongKe/goods_list/index?cate_id=${item.category_id}&street=${street_code}&name=${item.title}`"
          :style="{'background-image': `url(${item.bg})`}">
          <text class="item-title">{{item.title}}云仓服务</text>
          <text>{{item.text}}</text>
          <view class="chakan-btn" @click="navigator">查看</view>
        </navigator>
      </block>
    </view>
  </view>
</template>

<script>
  import { getCityCloundShop } from '@/api/api.js'
  import { Toast } from '@/libs/uniApi';
  export default {
    data() {
      let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
      return {
        winHeight: 0,
        cloudList: [{
            title: '商超服务',
            text: '便捷商超购物，包送到家',
            bg: src + '/shangchao.png',
            show: false,
            category_id: 25
          },
          {
            title: '农副产品',
            text: '瓜果蔬菜线上购买',
            bg: src + '/nongfu.png',
            show: false,
            category_id: 26
          },
          {
            title: '生活服务',
            text: '生活服务样样齐全',
            bg: src + '/shenghuo.png',
            show: false,
            category_id: 23
          },
          {
            title: '农业生产',
            text: '种子化肥送到家',
            bg: src + '/nongye.png',
            show: false,
            category_id: 22
          },
          {
            title: '物流溯源',
            text: '追溯产品源头',
            bg: src + '/wuliu.png',
            show: false,
            category_id: 2541
          },
          {
            title: '坝坝宴',
            text: '农家各种酒席宴会',
            bg: src + '/yan.png',
            show: false,
            category_id: 21
          },
          {
            title: '文娱旅游',
            text: '周边好玩景点',
            bg: src + '/shangchao.png',
            show: false,
            category_id: 2542
          },
          {
            title: '民生公益',
            text: '扶贫助学项目',
            bg: src + '/minsheng.png',
            show: false,
            category_id: 2543
          },
          {
            title: '医疗保健',
            text: '便捷医疗服务',
            bg: src + '/yiliao.png',
            show: false,
            category_id: 2544
          },
          {
            title: '教育培训',
            text: '更完善的教育系统',
            bg: src + '/jiaoyu.png',
            show: false,
            category_id: 2545
          },
          {
            title: '装修建筑',
            text: '个人家庭商铺装修',
            bg: src + '/zhuangxiu.png',
            show: false,
            category_id: 2547
          },
          {
            title: '交金融宝',
            text: '个人家庭商铺装修',
            bg: src + '/zhuangxiu.png',
            show: false,
            category_id: 2546
          },
          {
            title: '农贸基地',
            text: '个人家庭商铺装修',
            bg: src + '/zhuangxiu.png',
            show: false,
            category_id: 2548
          },
          {
            title: '供销综合',
            text: '个人家庭商铺装修',
            bg: src + '/zhuangxiu.png',
            show: false,
            category_id: 2549
          }
        ],
        street_code: '',
        town: ''
      }
    },
    onLoad(e) {
      uni.getSystemInfo({
        success: (res) => {
          this.winHeight = res.windowHeight
        },
      });
      this.street_code = e.street
      this.town = e.town
      this.getCloundShop()
    },
    onShow() {},
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    methods: {
      async getCloundShop() {
        const { data } = await getCityCloundShop({ street_code: 510502102 })
        data.length < 1 ? Toast("暂无云仓") : ''
        data.map(item => {
          this.cloudList.forEach(itens => {
            itens.show = true
            // if (itens.category_id == item.category_id) {
            //   itens.show = true
            // }
          })
        })
      },
      navigator() {
        uni.navigateTo({
          url: '/pages/user/index'
        })
      }
    }
  }
</script>

<style lang="scss">
  .cloud_entrepot {
    background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/ycbg.png") no-repeat;
    background-size: cover;
    padding-bottom: 92.98rpx;
  }

  .head-wrapper {
    height: 485.96rpx;
    width: 100%;
    background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/top.png") no-repeat;
    background-size: cover;
    margin-bottom: 49.12rpx;
  }

  .town-title {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 50.88rpx;
    color: #fff;
    margin-bottom: 28.07rpx;

    &::after {
      content: '';
      display: inline-block;
      width: 66.67rpx;
      height: 31.58rpx;
      background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/you.png") no-repeat;
      background-size: cover;
      margin-left: 24.56rpx;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 66.67rpx;
      height: 31.58rpx;
      background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/zuo.png") no-repeat;
      background-size: cover;
      margin-right: 24.56rpx;
    }
  }

  .body-wrapper {
    width: 694.74rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;

    .item {
      width: 336.84rpx;
      height: 100%;
      padding: 24.56rpx 28.07rpx;
      margin-bottom: 21.05rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;

      text {
        display: block;
        font-size: 24.56rpx;
        color: #999;
        margin-bottom: 14.04rpx;
      }

      .item-title {
        font-size: 31.58rpx;
        color: #333;
      }

      .chakan-btn {
        width: 114.04rpx;
        height: 49.12rpx;
        font-size: 28.07rpx;
        text-align: center;
        line-height: 49.12rpx;
        color: #fff;
        margin-top: auto;
        background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
        border-radius: 50px;
      }
    }
  }
</style>