This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "首页",
|
||||
enableShareAppMessage: true,
|
||||
navigationStyle: "custom",
|
||||
});
|
||||
|
||||
126
src/pages/index/index.scss
Normal file
126
src/pages/index/index.scss
Normal file
@@ -0,0 +1,126 @@
|
||||
page {
|
||||
background-image: url("//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png");
|
||||
background-size: 100% 57%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.local {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #fff;
|
||||
|
||||
text {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
border-radius: 18px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
width: 730px;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background-color: #f83d3d;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
.title {
|
||||
background-image: url("//p0.meituan.net/csc/542112fc072d4687b437848bc29b0a1730495.png");
|
||||
background-size: 100% 100%;
|
||||
width: 600px;
|
||||
height: 90px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.jf-btn {
|
||||
margin: 15px auto;
|
||||
background-image: url("//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png");
|
||||
background-size: 100% 100%;
|
||||
width: 350px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
|
||||
.btn-1 {
|
||||
background-image: url("//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png");
|
||||
background-size: 100% 100%;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.btn-2 {
|
||||
background-image: url("//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png");
|
||||
background-size: 100% 100%;
|
||||
width: 300px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.btn-3 {
|
||||
background-image: url("//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png");
|
||||
background-size: 100% 100%;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin: 10px auto;
|
||||
width: 730px;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #333333;
|
||||
font-size: 23px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ad {
|
||||
background-image: url("https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png");
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
@@ -1,172 +1,149 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<!-- 搜索 -->
|
||||
<nut-searchbar
|
||||
v-model="searchValue"
|
||||
placeholder="要搜索点什么？"
|
||||
></nut-searchbar>
|
||||
<view>
|
||||
<view :style="{marginTop: BarHeight + 'px'}"></view>
|
||||
<view class="local">
|
||||
<view class="iconfont icon-dizhi" style="font-size: 20px"></view>
|
||||
<text>{{ address }}</text>
|
||||
</view>
|
||||
<view class="search">
|
||||
<view
|
||||
class="iconfont icon-sousuo"
|
||||
style="color: #8f8f8f; margin-right: 8px"></view>
|
||||
<input placeholder="请输入商家名称搜索" v-model="searchVal" />
|
||||
<view class="search-btn" @click="clickSearch">搜索</view>
|
||||
</view>
|
||||
<view class="banner">
|
||||
<nut-swiper
|
||||
:init-page="0"
|
||||
:pagination-visible="true"
|
||||
pagination-color="#ff0000"
|
||||
auto-play="3000"
|
||||
>
|
||||
<nut-swiper-item v-for="(itm, idx) in bannerList" :key="idx">
|
||||
<img
|
||||
:src="itm.url"
|
||||
:alt="itm.ID.toString()"
|
||||
@click="toPage(itm.jump)"
|
||||
/>
|
||||
</nut-swiper-item>
|
||||
</nut-swiper>
|
||||
<view class="title"></view>
|
||||
<navigator class="jf-btn" hover-class="none"></navigator>
|
||||
<view class="footer">
|
||||
<navigator hover-class="none" class="btn-1"></navigator>
|
||||
<navigator
|
||||
hover-class="none"
|
||||
openType="switchTab"
|
||||
url="/pages/game/gamehome/index"
|
||||
class="btn-2"></navigator>
|
||||
<navigator hover-class="none" class="btn-3"></navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 金刚区 -->
|
||||
<view class="navbar">
|
||||
<nut-grid :border="false" column-num="5">
|
||||
<nut-grid-item
|
||||
v-for="item in swiperList"
|
||||
:key="item.ID"
|
||||
:text="item.name"
|
||||
@click="toDetails(item)"
|
||||
>
|
||||
<image :src="item.icon" />
|
||||
</nut-grid-item>
|
||||
</nut-grid>
|
||||
<view class="navigation">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in navigationList"
|
||||
:key="index"
|
||||
@click="toPage(item)">
|
||||
<view
|
||||
class="icon"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.icon})`,
|
||||
}">
|
||||
</view>
|
||||
<view class="text">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<MerList />
|
||||
<!-- 签到弹窗 -->
|
||||
<Popup
|
||||
v-for="(item, index) in popupList"
|
||||
:ref="(el) => getRef(el, item.type)"
|
||||
:type="item.type"
|
||||
:src="item.src"
|
||||
:cb="item.cb"
|
||||
:key="index"
|
||||
/>
|
||||
<view class="ad" @click="showTips('该功能暂未开放')"></view>
|
||||
<MerList :get-user-location="getUserLocal" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import Taro from "@tarojs/taro";
|
||||
import Popup from "@/components/Popup.vue";
|
||||
import MerList from "@/components/MerList.vue";
|
||||
import { getHomeList } from "@/api/home";
|
||||
import { getBanner, userSign } from "@/api/user";
|
||||
import { parseQueryString } from "@/utils";
|
||||
import { getMerList } from "@/api/goods";
|
||||
import game_1 from "../../static/index/game_1.png";
|
||||
<script setup lang="ts">
|
||||
import Taro from '@tarojs/taro';
|
||||
import {ref} from 'vue';
|
||||
import {getHomeList} from '@/api/home';
|
||||
import MerList from '@/components/MerList.vue';
|
||||
import {showTips} from '@/utils';
|
||||
|
||||
const searchValue = ref("");
|
||||
const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight;
|
||||
const BarHeight = ref((statusBarHeight as number) + 7);
|
||||
|
||||
interface SwiperList {
|
||||
interface navigationType {
|
||||
ID?: number;
|
||||
icon?: string;
|
||||
name?: string;
|
||||
url?: string;
|
||||
type?: number;
|
||||
type: number;
|
||||
icon: string;
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const swiperList = ref<Array<SwiperList>>([]);
|
||||
|
||||
const bannerList = ref<any[]>([]);
|
||||
|
||||
const popupRefs = ref<Map<number, any>>(new Map());
|
||||
|
||||
const getRef = (el, type) => {
|
||||
popupRefs.value.set(type, el);
|
||||
};
|
||||
|
||||
const popupList = ref([
|
||||
// {
|
||||
// type: 1,
|
||||
// src: require("../../static/index/poppBg.png"),
|
||||
// cb: async (type) => {
|
||||
// await userSign();
|
||||
// Taro.showToast({
|
||||
// title: "签到成功",
|
||||
// icon: "none",
|
||||
// });
|
||||
// popupRefs.value.get(type).show = false;
|
||||
// },
|
||||
// },
|
||||
{
|
||||
type: 2,
|
||||
src: "//upload.jdt168.com/1714381111493034239_game_1.png",
|
||||
cb: (type) => {
|
||||
Taro.setStorageSync(
|
||||
"game_url",
|
||||
`${process.env.TARO_APP_FISH_GAME}${Taro.getStorageSync("token")}`
|
||||
);
|
||||
Taro.navigateTo({
|
||||
url: `/pages/game/view/index`,
|
||||
});
|
||||
popupRefs.value.get(type).show = false;
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
Taro.useDidShow(async () => {
|
||||
await getBannerList();
|
||||
await get_banner_list();
|
||||
});
|
||||
const navigationList = ref<Array<navigationType>>([]);
|
||||
|
||||
Taro.useShareAppMessage(() => ({
|
||||
title: "捷兑通",
|
||||
path: `/pages/index/index?scene=${Taro.getStorageSync("token")}`,
|
||||
imageUrl: "https://upload.jdt168.com/1714375021923881119_Share.jpg",
|
||||
title: '捷兑通',
|
||||
path: `/pages/index/index?scene=${Taro.getStorageSync('token')}`,
|
||||
imageUrl: 'https://upload.jdt168.com/1714375021923881119_Share.jpg',
|
||||
}));
|
||||
|
||||
const getBannerList = async () => {
|
||||
swiperList.value = [
|
||||
{
|
||||
ID: 11224,
|
||||
type: 1,
|
||||
name: "全部服务",
|
||||
url: "/pages/allClassList/index",
|
||||
icon: "//upload.jdt168.com/1702296870765673412_%E5%85%A8%E9%83%A8%E6%9C%8D%E5%8A%A1.png",
|
||||
},
|
||||
{
|
||||
ID: 11225,
|
||||
type: 1,
|
||||
name: "活动游戏",
|
||||
url: `/pages/game/gamehome/index?uid=${Taro.getStorageSync("token")}`,
|
||||
icon: "//jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png",
|
||||
},
|
||||
{
|
||||
ID: 11226,
|
||||
type: 1,
|
||||
name: "商户入驻",
|
||||
url: "/pages/users/settled_mer/index",
|
||||
icon: "//jdt168.com/uploads/merchant/20220829/6fe67b93721a42aedc842c4f19d6f2d3.png",
|
||||
},
|
||||
// {
|
||||
// ID: 11227,
|
||||
// type: 1,
|
||||
// name: "最新资讯",
|
||||
// url: "",
|
||||
// icon: "//jdt168.com/uploads/merchant/20220829/b975136a9b64aab69bf11d75a194f1ea.png",
|
||||
// },
|
||||
];
|
||||
const { data } = await getHomeList();
|
||||
if (data.data.length > 0) {
|
||||
for (let i = 0; i < data.data.length; i++) {
|
||||
swiperList.value.push({
|
||||
type: 2,
|
||||
...data.data[i],
|
||||
const searchVal = ref('');
|
||||
const clickSearch = () => {
|
||||
if (!searchVal.value)
|
||||
return Taro.showToast({
|
||||
title: '请输入商家名称再搜索',
|
||||
icon: 'none',
|
||||
});
|
||||
searchVal.value = '';
|
||||
};
|
||||
|
||||
Taro.useLoad(() => {
|
||||
getNavLists();
|
||||
getUserLocal();
|
||||
});
|
||||
|
||||
const address = ref('获取位置中......');
|
||||
|
||||
const getUserLocal = async () => {
|
||||
Taro.getLocation({
|
||||
type: 'wgs84',
|
||||
success: res => {
|
||||
Taro.request({
|
||||
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=S3GBZ-WR26O-IXNW2-SXBOD-LZXV6-WAFNO&get_poi=1`,
|
||||
method: 'GET',
|
||||
success: res => {
|
||||
const data = res.data.result.address_component;
|
||||
address.value = `${data.city}${data.district}${data.street_number}`;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const get_banner_list = async () => {
|
||||
const { data }: any = await getBanner();
|
||||
bannerList.value = data.data;
|
||||
const getNavLists = async () => {
|
||||
navigationList.value = [
|
||||
{
|
||||
type: 1,
|
||||
icon: '//p0.meituan.net/csc/5c770748f0028c63741c5ec14df3cc386715.png',
|
||||
url: '',
|
||||
name: '活动商家',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
icon: '//p0.meituan.net/csc/4868c06b99008ff7d5f81e6514858c8a7950.png',
|
||||
url: '',
|
||||
name: '兑换商家',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
icon: '//p0.meituan.net/csc/f33ad2443a67e9f3474a1d5fd9d529db7504.png',
|
||||
url: '/pages/users/settled_mer/index',
|
||||
name: '商户入驻',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
icon: '//p0.meituan.net/csc/0403cf37dd14a6b44b22ffccaa2878f95703.png',
|
||||
url: '/pages/allClassList/index',
|
||||
name: '全部服务',
|
||||
},
|
||||
];
|
||||
const res = await getHomeList();
|
||||
res.data.data.forEach(item => {
|
||||
navigationList.value.unshift({
|
||||
ID: item.ID,
|
||||
type: 2,
|
||||
icon: item.icon,
|
||||
url: item.url,
|
||||
name: item.name,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const toDetails = (item: SwiperList) => {
|
||||
const toPage = item => {
|
||||
item.type !== 1
|
||||
? Taro.navigateTo({
|
||||
url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
|
||||
@@ -175,79 +152,8 @@ const toDetails = (item: SwiperList) => {
|
||||
url: item.url as string,
|
||||
});
|
||||
};
|
||||
|
||||
const toPage = async (url: string) => {
|
||||
// url转对象
|
||||
const obj = parseQueryString(url);
|
||||
if (obj.type === "1") {
|
||||
const { data: res } = await getMerList({});
|
||||
const mer = res.data.filter((item) => item.bid === obj.bid)[0];
|
||||
Taro.setStorageSync("mer_info", mer);
|
||||
}
|
||||
Taro.navigateTo({
|
||||
url,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper {
|
||||
.nut-swiper {
|
||||
background: #ffffff;
|
||||
|
||||
.nut-swiper-item {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: 10px;
|
||||
.nut-swiper-item img {
|
||||
border-radius: 26rpx;
|
||||
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;
|
||||
|
||||
.nut-grid-item__content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user