<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"/>
      </nut-swiper-item>
    </nut-swiper>
    <!--    <nut-tabs v-model="tabvalue" background="#fff" title-scroll title-gutter="10" name="0" :auto-height="true">-->
    <!--      <nut-tab-pane title="精选推荐">-->

    <!--      </nut-tab-pane>-->
    <!--      <nut-tab-pane title="夏日防嗮"></nut-tab-pane>-->
    <!--      <nut-tab-pane title="人气热榜"></nut-tab-pane>-->
    <!--    </nut-tabs>-->
    <view class="goodBox">
      <view class="good" v-for="item in 5">
        <image
            src="https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-09a.png?imageMogr2/thumbnail/564x564/quality/70/strip/format/webp"
        />
        <view class="good-text-box">
          <text class="good-text">白色短袖连衣裙荷叶边裙摆宽松韩版休闲纯白清爽优雅连衣裙</text>
          <view class="good-price-box">
            <text class="good-text-price"><text style="font-size: 20px">188</text>积分</text>
            <Cart size="20" color="#ff0000" @click="addCart()"/>
          </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';

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 addCart = () => {
  Taro.showToast({
    title: '加入购物车成功',
    icon: 'success',
    duration: 2000
  })
}
</script>

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

.nut-swiper-item {
  //line-height: 150px;
 //padding: 20px;
}

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

.goodBox {
  //width: 100%;
  //height: 100%;
  margin-top: 5px;
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
  justify-content: space-between;

  .good {
    width: 340px;
    //height: 540px;
    background-color: #fff;
    margin-bottom: 10px;
    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;
        height: 72px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
        line-height: 36px;
      }

      .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;
          //font-weight: 400;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }

  }
}
</style>
