141 lines
3.0 KiB
Vue
141 lines
3.0 KiB
Vue
<template>
|
|
<nut-tabs
|
|
style="height: 100vh"
|
|
v-model="val"
|
|
title-scroll
|
|
ellipsis
|
|
:animated-time="10"
|
|
name="tabs"
|
|
direction="vertical"
|
|
@change="tabChange"
|
|
>
|
|
<nut-tab-pane
|
|
v-for="item in list"
|
|
:title="(item.name as string)"
|
|
:key="item.ID"
|
|
>
|
|
<view v-if="goodList.length > 0">
|
|
<view
|
|
class="list"
|
|
v-for="(item, index) in (goodList as any)"
|
|
:key="index"
|
|
>
|
|
<view class="item">
|
|
<img :src="item.cover" />
|
|
<view class="right">
|
|
<view class="name">{{ item.name }}</view>
|
|
<view class="bom">
|
|
<view class="price"
|
|
><text style="font-size: 15px">{{ item.number }}</text>
|
|
积分</view
|
|
>
|
|
<nut-button
|
|
size="mini"
|
|
type="primary"
|
|
@click.stop="toGoodDetails(item.gid as number)"
|
|
>去兑换</nut-button
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<nut-empty v-else description="暂无商品"></nut-empty>
|
|
</nut-tab-pane>
|
|
</nut-tabs>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Taro from "@tarojs/taro";
|
|
import { ref } from "vue";
|
|
import { getCategoryList, getCategoryGoods } from "@/api/goods";
|
|
|
|
const val = ref(0);
|
|
|
|
interface List {
|
|
ID?: number;
|
|
name?: string;
|
|
}
|
|
|
|
const list = ref<Array<List>>([]);
|
|
|
|
const goodList = ref([]);
|
|
|
|
Taro.useDidShow(() => {
|
|
getGoodsType();
|
|
});
|
|
|
|
// 获取商品分类
|
|
const getGoodsType = async () => {
|
|
const res = await getCategoryList();
|
|
list.value = res.data.data;
|
|
|
|
getData(list.value[val.value].ID as number);
|
|
};
|
|
|
|
const getData = async (id: number) => {
|
|
const res = await getCategoryGoods({
|
|
class_id: id,
|
|
});
|
|
goodList.value = res.data.data;
|
|
};
|
|
|
|
const tabChange = async () => {
|
|
getData(list.value[val.value].ID as number);
|
|
};
|
|
|
|
const toGoodDetails = (gid: number) => {
|
|
Taro.navigateTo({
|
|
url: `/pages/goods/goods_detail/index?gid=${gid}`,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list {
|
|
.item {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
img {
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
margin-left: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
// text-align: right;
|
|
|
|
.name {
|
|
// height: 20px;
|
|
font-size: 28px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.bom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-top: 10px;
|
|
.price {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #ff0000;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|