jdt-user/src/pages/index/index.vue

<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 :alt="itm.ID.toString()" :src="itm.url"/>
            </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="goodBox">
            <view
                class="good"
                v-for="item in (merdata as any)"
                :key="item.ID"
                @click.stop="toMerDetails(item)"
            >
                <image :src="(item.head_photo as string)"/>
                <view class="good-text-box">
                    <text class="good-text">{{ item.name }}</text>
                    <text style="color: #999"
                    >距离我{{
                            calculateDistance(
                                userLocalNum.t,
                                userLocalNum.l,
                                Number(item.lat),
                                Number(item.lon)
                            )
                        }}
                    </text
                    >
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import Taro from '@tarojs/taro'
import {bindParent, getBanner} from '@/api/user'
import {getMerList} from '@/api/goods'
import {calculateDistance} from '@/utils'

const searchValue = ref('')

const swiperList = ref<any>([])

const userMenuList = ref([
    {
        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'
    }
])

Taro.useDidShow(async () => {
    await getBannerList()
    await get_mer_list()
    if (Taro.getStorageSync('token') && Taro.getStorageSync('bind_id')) {
        try {
            const res = await bindParent({
                uid: Taro.getStorageSync('bind_id')
            })
            Taro.showToast({
                title: res.msg
            })
            Taro.removeStorageSync('bind_id')
        } catch (error) {
            Taro.removeStorageSync('bind_id')
            throw error
        }
    }
})

Taro.useShareAppMessage(() => ({
    title: '捷兑通',
    path: `/pages/index/index?scene=${Taro.getStorageSync('token')}`,
    imageUrl:
        'https://upload.jdt168.com/1694242954957988438_微信图片_20230909150016.jpg'
}))

const merdata = ref([])

const userLocalNum = ref({
    l: 0,
    t: 0
})

const get_mer_list = async () => {
    Taro.getLocation({
        type: 'wgs84',
        success: (res) => {
            userLocalNum.value.l = res.longitude
            userLocalNum.value.t = res.latitude
        }
    })

    const res = await getMerList({
        PageNum: 1,
        PageSize: 10,
        Btype: 2,
        classid: 0
    })
    merdata.value = res.data.data
}

const getBannerList = async () => {
    const {data}: any = await getBanner()
    swiperList.value = data.data
}

const toPage = (url: string) => {
    Taro.navigateTo({
        url: url
    })
}

const toMerDetails = (item: any) => {
    Taro.setStorageSync('mer_info', item)
    Taro.navigateTo({
        url: `/pages/mer/mer_detail/index`
    })
}
</script>

<style lang="scss">
.nut-swiper-item img {
    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 {
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
    justify-content: space-between;

    .good {
        width: 340px;
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 10px;

        image {
            width: 100%;
            height: 250px;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }

        .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: 1;
                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>