<template>
  <view>
    <view class="shopping-wrapper">
      <view class="list-item" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
        <image  :src="item.cover"  style="width: 100%;height: 264rpx">
        </image>
        <view class="list-item-title mt10 ml5">
          <tetx class="list-item-title">{{item.goods_name}}</tetx>
        </view>
        <view class="display-flex-between ml5 mr5">
          <view  class="display-flex">
            <view class="fs11 fw600 lh18 color-333 " >
              ￥
              <text class="fs16 lh18">{{ item.price_selling }}</text>

            </view>
            <view class="ml15  fs13 fw400 lh18 color-666 mb5r">
              已售: {{ item.stock_sales}}
            </view>
          </view>
          <view class="list-item-btn   display-flex-content-center" @click.stop="handleRegister(item)">
            预约<u-icon
              size="14"
              color="#FFFFFF"
              name="arrow-rightward"
          ></u-icon>
          </view>
        </view>
      </view>
    </view>
    <tabbarCom current="1"></tabbarCom>
  </view>
</template>

<script>
import { getGoodList} from "@/common/api";
import tabbarCom from "@/components/tabbar/tabbar.vue";

export default {
  components: {tabbarCom},
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      search: "",
      sort: "",
      cateid: "",
      subCateId: '',
      sortType: "",
      data:[],
    };
  },
  onShow() {
    this.getGoodList()
  },
  computed:{},
  methods: {
    getGoodList() {
      let params = {
        sort: this.sort,
        sortType: this.sortType,
        mark: "店内服务",
        page: this.page,
        pageSize: this.pageSize,
        name: this.search,
      }
      getGoodList(params).then(({
                                  data = {}
                                }) => {
        this.data = data.list
        this.total = data.page.total
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/subPages/service/serviceDetail?code=${item.code}`
      });
    },
    handleRegister(item) {
      uni.navigateTo({
        url: `/subPages/service/serviceSave?code=${item.code}&id=${item.id}`
      })
    },
  },
}
</script>

<style lang="scss">
.shopping-wrapper {
  width: calc(100% - 40rpx);
  margin: 0rpx auto 0rpx;
  padding: 0rpx 20rpx 60rpx;
  .list-item {
    margin-top: 25rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: calc(100% - 40rpx);
    padding:20rpx;
    &-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    &-btn{
      width: 164rpx;
      height: 68rpx;
      background: linear-gradient( 315deg, #CA9359 0%, #E2B98E 100%);
      border-radius: 292rpx 292rpx 292rpx 292rpx;
      font-size: 28rpx;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
      color: #FFFFFF;
      text-transform: none;
    }
  }
}
</style>
