jdt-user/src/pages/index/index.vue

<template>
  <view class="app">
    <!--  搜索  -->
    <nut-searchbar
        v-model="searchValue"
        placeholder="要搜索点什么？"
    ></nut-searchbar>
    <!--  幻灯片  -->
    <nut-swiper
        :init-page="0"
        :pagination-visible="true"
        pagination-color="#426543"
        auto-play="3000"
    >
      <nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
        <img :src="itm.url" :alt="itm.id.toString()"/>
      </nut-swiper-item>
    </nut-swiper>
    <!--  金刚区  -->
    <view class="navbar">
      <nut-grid :gutter="10" :border="false">
        <nut-grid-item
            v-for="item in userMenuList"
            :key="item.id"
            :text="item.label"
            @click="toPage(item.url)"
        >
          <image :src="item.icon"/>
        </nut-grid-item>
      </nut-grid>
    </view>
    <!--  标题  -->
    <view class="titleImg">为你推荐</view>
    <!--  商品列表  -->
    <view class="goodBox">
      <view
          class="good"
          v-for="item in list"
          :key="item.gid"
          @click.stop="toGoodDetails(item.gid as number)"
      >
        <image
            :src="(item.cover as string)"
        />
        <view class="good-text-box">
          <text class="good-text"
          >{{ item.name }}
          </text
          >
          <view class="good-price-box">
            <text class="good-text-price">
              <text style="font-size: 20px">{{ item.number }}</text>
              积分
            </text>
            <Cart size="20" color="#ff0000" @click.stop="add_cart(item.gid as number)"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {Cart} from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import {getBanner} from '@/api/user'
import {getGoodsList, addCart} from '@/api/goods'

const searchValue = ref('')
// const tabvalue = ref("0");

const swiperList = ref([
  {
    id: 1,
    url: 'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg'
  },
  {
    id: 2,
    url: 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'
  },
  {
    id: 3,
    url: 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg'
  },
  {
    id: 4,
    url: 'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
  }
])

const userMenuList = ref([
  {
    id: 1,
    label: '活动游戏',
    url: '/pages/game/gamehome/index',
    icon: 'http://jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png'
  },
  {
    id: 2,
    label: '活动商品',
    url: '/pages/hotGoods/index/index',
    icon: 'http://jdt168.com/uploads/def/20230509/d59e7fcb65a88bc56694dae4f9d21b51.png'
  },
  {
    id: 3,
    label: '商户入驻',
    url: '/pages/users/settled_mer/index',
    icon: 'http://jdt168.com/uploads/merchant/20220829/6fe67b93721a42aedc842c4f19d6f2d3.png'
  },
  {
    id: 4,
    label: '最新资讯',
    url: '',
    icon: 'http://jdt168.com/uploads/merchant/20220829/b975136a9b64aab69bf11d75a194f1ea.png'
  }
])

interface List {
  gid?: number
  name?: string
  number?: number
  cover?: string
}

const list = ref<Array<List>>([])

Taro.useLoad(() => {
  getBannerList()
  get_goods_list()
})

const get_goods_list = async () => {
  const {data} = await getGoodsList()
  list.value = data.data
}

const getBannerList = async () => {
  const {data}: any = await getBanner()
  console.log(data)
}

const add_cart = async (gid: number) => {
  try {
    await addCart({gid: Number(gid)})
    Taro.showToast({
      title: '加入购物车成功',
      icon: 'success',
      duration: 2000
    })
  } catch (e) {
    Taro.showToast({
      title: e.msg,
      icon: 'none'
    })
  }

}

const toPage = (url: string) => {
  Taro.navigateTo({
    url: url
  })
}

const toGoodDetails = (gid: number) => {
  Taro.navigateTo({
    url: `/pages/goods/goods_detail/index?gid=${gid}`
  })
}
</script>

<style lang="scss">
.app {
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.nut-swiper-item img {
  width: 100%;
  height: 350px;
}

.titleImg {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background-image: url("~@/static/index/index-title.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  text-align: center;
  line-height: 50px;
  color: #ff0000;
  font-weight: bold;
}

.navbar {
  background-color: #ffffff;

  image {
    width: 80px;
    height: 80px;
  }
}

.goodBox {
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
  justify-content: space-between;

  .good {
    width: 340px;
    background-color: #fff;
    margin-bottom: 20px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

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

    .good-text-box {
      padding: 10px;

      .good-text {
        flex-shrink: 0;
        font-size: 28px;
        color: #333;
        font-weight: 400;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
      }

      .good-price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        .good-text-price {
          font-size: 28px;
          font-weight: bold;
          color: #ff0000;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }
}
</style>