first commit
This commit is contained in:
Your Name
169
src/pages/index/index.vue
Normal file
169
src/pages/index/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<u-navbar :is-back="false" :background="{backgroundColor: '#4E55AF'}" height="50">
|
||||
<view class="flex justify-between items-center w-full">
|
||||
<view class="flex justify-start items-center">
|
||||
<view class="rounded-lg ml-[30rpx] bg-white p-[10rpx] mr-[12rpx]">
|
||||
<u-image width="40rpx" height="40rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
|
||||
</view>
|
||||
<view class="">
|
||||
{{appStore.getWebsiteConfig.shop_name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-end pr-[30rpx]">
|
||||
<navigator hover-class="none" url="/pages/language/index">
|
||||
<u-icon size="50" name="/static/images/common/change_lang_w.png"></u-icon>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="bg-[#4E55AF] pb-[200rpx] pt-[30rpx]">
|
||||
<view class="pb-[20rpx] mb-[50rpx] mx-[30rpx] bg-[#5C62B5] rounded-lg" v-if="state.notice.is_show">
|
||||
<navigator hover-class="none" :url="'/pages/news_detail/news_detail?id='+state.notice.id">
|
||||
<u-notice-bar class="h-[60rpx]" mode="horizontal" bg-color="unset" color="#FFFFFF"
|
||||
:list="state.notice.text" />
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mb-[20rpx] bg-[#2C326B] mx-[30rpx] rounded-lg mt-[-200rpx]" v-if="state.banner.length>0">
|
||||
<w-banner :banner="state.banner" />
|
||||
</view>
|
||||
|
||||
<view class="mb-[20rpx]" v-if="state.navs.length>0">
|
||||
<view class="px-[30rpx]">
|
||||
<w-nav :navs="state.navs" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="px-[30rpx] mb-[20rpx] inline-block" v-if="show_market">
|
||||
<w-market :market="state.market" />
|
||||
</view>
|
||||
<view class="mb-[20rpx] rounded-xl overflow-hidden" v-if="state.video.is_show">
|
||||
<view class="mx-[30rpx]">
|
||||
<video class="w-full rounded-xl" :src="state.video.url" controls :poster="state.video.image"></video>
|
||||
</view>
|
||||
</view>
|
||||
<view class="px-[30rpx] mb-[20rpx] inline-block " v-if="state.partner.is_show">
|
||||
<view class="mb-[20rpx]">
|
||||
{{t('index.partner')}}
|
||||
</view>
|
||||
<view class="" v-html="state.partner.content"></view>
|
||||
</view>
|
||||
<u-popup class="max-w-[750px]" v-model="state.popup.is_show" mode="center" border-radius="30" width="90%"
|
||||
height="880rpx" :closeable="true" close-icon-color="#ECECEC" close-icon-size="36" @close="modalHandle">
|
||||
<view class="">
|
||||
<view class="notice text-center">
|
||||
<view class="flex justify-center items-center py-[15px]">
|
||||
<view class="bg-[#2C326B] rounded-full p-[15rpx]">
|
||||
<u-image width="80rpx" height="80rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" style="height: 650rpx;">
|
||||
<view class="leading-loose pb-[24rpx] px-[24rpx]" v-html="state.popup.content">
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 客服 -->
|
||||
<view class="fixed right-[30rpx] bottom-[150rpx]" v-if="state.show_kefu" @click="jumpTo(state.kefu_link)">
|
||||
<u-icon size="100" :name="state.kefu_logo"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<tabbar />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onLoad, onUnload, onHide, onShow } from '@dcloudio/uni-app'
|
||||
import { getIndex, getMarket } from '@/api/shop'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { t, jumpTo } from '@/utils/util'
|
||||
uni.setNavigationBarTitle({ title: t('index.title') })
|
||||
const appStore = useAppStore()
|
||||
|
||||
let timer : any = null
|
||||
const show_market = ref(false)
|
||||
const state = reactive<{
|
||||
banner : any[]
|
||||
notice : any
|
||||
navs : any[]
|
||||
partner : any[]
|
||||
video : any[]
|
||||
popup : any
|
||||
market : any[]
|
||||
kefu_logo : string
|
||||
show_kefu : number
|
||||
kefu_link : string
|
||||
}>({
|
||||
banner: [],
|
||||
notice: {
|
||||
text: '',
|
||||
is_show: false
|
||||
},
|
||||
navs: [],
|
||||
partner: [],
|
||||
video: [],
|
||||
popup: {
|
||||
content: '',
|
||||
is_show: false
|
||||
},
|
||||
market: [],
|
||||
kefu_logo: '',
|
||||
show_kefu: 0,
|
||||
kefu_link: '',
|
||||
})
|
||||
|
||||
const modalHandle = async () => {
|
||||
state.popup.is_show = false;
|
||||
}
|
||||
const getData = async () => {
|
||||
const data = await getIndex()
|
||||
state.banner = data.banner
|
||||
state.navs = data.navs
|
||||
state.notice = data.notice
|
||||
state.notice.text = [data.notice.text]
|
||||
state.partner = data.partner
|
||||
state.video = data.video
|
||||
state.popup = data.popup
|
||||
state.market = data.market
|
||||
if (state.market.length > 0) show_market.value = true;
|
||||
|
||||
state.kefu_logo = data.kefu_logo;
|
||||
state.show_kefu = data.show_kefu;
|
||||
state.kefu_link = data.kefu_link;
|
||||
}
|
||||
|
||||
const getTimer = async () => {
|
||||
timer = setInterval(() => {
|
||||
getMarketData();
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
const getMarketData = async () => {
|
||||
const res = await getMarket()
|
||||
state.market = res;
|
||||
if (state.market.length > 0) show_market.value = true;
|
||||
}
|
||||
onUnload(() => {
|
||||
timer && clearInterval(timer)
|
||||
})
|
||||
onLoad(() => {
|
||||
getData();
|
||||
})
|
||||
onShow(() => {
|
||||
getTimer();
|
||||
})
|
||||
onHide(() => {
|
||||
timer && clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nva-bg {
|
||||
background-image: url('/static/images/index/noticebarbg.png');
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user