i
This commit is contained in:
@@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '首页'
|
||||
navigationBarTitleText: '首页',
|
||||
})
|
||||
|
||||
@@ -1,144 +1,225 @@
|
||||
<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 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 5"
|
||||
:key="item"
|
||||
@click.stop="toGoodDetails(item)"
|
||||
>
|
||||
<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.stop="addCart()" />
|
||||
</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 { ref } from "vue";
|
||||
import { Cart } from "@nutui/icons-vue-taro";
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
const searchValue = ref("")
|
||||
const tabvalue = ref("0")
|
||||
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"
|
||||
}])
|
||||
{
|
||||
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: "",
|
||||
icon: "http://jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "活动商品",
|
||||
url: "",
|
||||
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",
|
||||
},
|
||||
]);
|
||||
|
||||
const addCart = () => {
|
||||
Taro.showToast({
|
||||
title: '加入购物车成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
Taro.showToast({
|
||||
title: "加入购物车成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
};
|
||||
|
||||
const toPage = (url: string) => {
|
||||
Taro.navigateTo({
|
||||
url: url,
|
||||
});
|
||||
};
|
||||
|
||||
const toGoodDetails = (item: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/goods/goods_detail/index?id=${item}`,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.nut-swiper-item {
|
||||
//line-height: 150px;
|
||||
//padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.nut-swiper-item img {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
//border-radius: 10px;
|
||||
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 {
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
margin-top: 5px;
|
||||
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;
|
||||
//height: 540px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user