RuoYi-Vue-Plus/mini-app/src/components/mall/tab/mall-shopping.wpy

<wxs module="filters" lang="babel">
const parseImage = (imageKey) => {
return 'https://winery-1257413599.cos.ap-beijing.myqcloud.com/' + imageKey
}
module.exports.parseImage = parseImage;
</wxs>


<template>

  <van-nav-bar
    title="福利购"
  />
  <view style="margin: 10px 10px 80px 10px;">


    <van-image class="banner" :src="navDefine.HOME_BANNER.image" />

    <van-row gutter="20">
      <van-col span="8" style="font-weight: bold;font-size: 20px;">精选推荐</van-col>
      <van-col offset="10" span="6">
        <div>
          <van-icon name="shopping-cart-o" color="#1989fa" />
          <span style="margin-left: 5px;">购物车</span>
        </div>
      </van-col>
    </van-row>


    <div style="display: flex;flex-wrap: wrap;">
      <div class="filter-button" v-for="(item,index) in filterButtons">
        <van-button round size="small" :color="currentFilter.dictLabel === item.dictLabel ? '#7232dd' : '#7232dd' "
                    :plain="currentFilter.dictLabel === item.dictLabel ? false : true" @tap="onFilterBtn(item)">{{item.dictLabel}}
        </van-button>
      </div>
    </div>


    <view v-for="(item, index) in records" :key="index"
          style="margin-top: 10px;border: #fafafa 1px solid; border-radius: 10px;">
      <van-card
        :title="item.goodsName"
        :desc="item.goodsAlias"
        :price="item.goodsPrice"
        :thumb="filters.parseImage(item.goodsFaceImg)"
        @tap="onItem(item)"
      >
        <!--        <view slot="num" style="float:right;">-->
        <!--          <div>{{'已优惠¥xx元'}}</div>-->
        <!--        </view>-->

      </van-card>


    </view>

    <div style="margin-top: 100px;" />
  </view>
</template>

<script>

import wepy from '@wepy/core'
import store from '@/store'
import { mapActions, mapState } from '@wepy/x'
import appManager from '../../../appManager'
import mallApis from '../../../apis/mallApis'
import defaultMix from '../../../mixins/defaultMix'
import { goodsDetailPage } from '../../../store/constant/nav/pages'
import xiao4rApis from '../../../apis/xiao4rApis'

wepy.component({
  store,
  hooks: {},
  // mixins: [ defaultMix ],
  data: {
    active: 0,
    records: [],
    currentFilter: {
      dictLabel: '全部'
    },
    filterButtons: []

  },

  computed: {
    ...mapState({
      'imageDefine': state => state.imageDefine,
      'user': state => state.user,
      'navDefine': state => state.navDefine
    })
  },

  methods: {

    onItem(item) {
      appManager.navigateTo(goodsDetailPage + `?id=${item.id}`)
    },

    onFilterBtn(item) {
      this.currentFilter = item
    },
    async init() {
      this.isInit = false

      const dict = await xiao4rApis.getDicts('goods_type')

      this.filterButtons = dict.data

      const req = await mallApis.getGoodsList()

      this.records = req.rows

      this.isInit = true
    }
  },

  ready() {
    this.init()
  }
})
</script>
<config>
{
}
</config>
<style lang="less">

.header {
  width: 100%;
  height: 536rpx;
  z-index: -10;
}

.banner {
  border: #eeeeee 1px solid;
  border-radius: 25px;
  margin-top: 15px;
  width: 100%;
  height: 80px;
}

.filter-button {
  margin-top: 10px;
  margin-right: 10px;

}


</style>