i
This commit is contained in:
@@ -1,259 +1,242 @@
|
||||
<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)"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</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'
|
||||
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 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 swiperList = ref<any>([]);
|
||||
|
||||
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'
|
||||
}
|
||||
])
|
||||
{
|
||||
id: 1,
|
||||
label: "活动游戏",
|
||||
url: `/pages/game/gamehome/index?uid=${Taro.getStorageSync("token")}`,
|
||||
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
|
||||
gid?: number;
|
||||
name?: string;
|
||||
number?: number;
|
||||
cover?: string;
|
||||
}
|
||||
|
||||
const list = ref<Array<List>>([])
|
||||
const list = ref<Array<List>>([]);
|
||||
|
||||
Taro.useLoad(() => {
|
||||
getBannerList()
|
||||
get_goods_list()
|
||||
})
|
||||
getBannerList();
|
||||
get_goods_list();
|
||||
});
|
||||
|
||||
const get_goods_list = async () => {
|
||||
const {data} = await getGoodsList()
|
||||
list.value = data.data
|
||||
}
|
||||
const { data } = await getGoodsList();
|
||||
list.value = data.data;
|
||||
};
|
||||
|
||||
const getBannerList = async () => {
|
||||
const {data}: any = await getBanner()
|
||||
console.log(data)
|
||||
}
|
||||
const { data }: any = await getBanner();
|
||||
swiperList.value = data.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 add_cart = async (gid: number) => {
|
||||
// try {
|
||||
// await addCart({ 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
|
||||
})
|
||||
}
|
||||
Taro.navigateTo({
|
||||
url: url,
|
||||
});
|
||||
};
|
||||
|
||||
const toGoodDetails = (gid: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/goods/goods_detail/index?gid=${gid}`
|
||||
})
|
||||
}
|
||||
Taro.navigateTo({
|
||||
url: `/pages/goods/goods_detail/index?gid=${gid}`,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.nut-swiper-item img {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
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;
|
||||
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;
|
||||
background-color: #ffffff;
|
||||
|
||||
image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.goodBox {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
.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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user