ctms-client/pages/ctms/tabbar/index/index.vue

<!--
 * @Author: 嗨噜客(三亚)<fm453>
 * @Date: 2021-09-06 11:48:18
 * @FilePath: pages/ctms/tabbar/index/index.vue
 * @Description: 
 * @Email:  393213759@qq.com
 * Copyright (c) 2025 by www.hiluker.cn, All Rights Reserved. 
 -->
<template>
    <view class="content">
        <!-- 轮播图 -->
        <view class="uni-margin-wrap">
            <swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
                <swiper-item v-for="(item, index) in banner" :key="index">
                    <view class="swiper-item" @click="clickBannerItem(item)" :data-link="item.link">
                        <image class="swiper-image" :src="item.image" mode="aspectFill" :draggable="true" />
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <!--计数器 -->
        <uni-notice-bar color="#2979FF" background-color="#EAF2FF" :text="h5Data.welcomeTip" />
        <view class="text-area">
            <view class="numCounter">
                <view class="div title">累计运单:</view>
                <view class="div" v-for="(num, index) in totalOrdersNum" :key="index">
                    <text :data-value="num" class="text">{{num}}</text>
                </view>
            </view>
        </view>

        <uni-section title="近期热门" subTitle="最近咨询、下单的路段及车型信息" type="line" class="recent">
            <uni-notice-bar show-icon='false' scrollable v-for="(str, index) in h5Data.recent" :key="index"
                :text="str" />
        </uni-section>
    </view>
</template>

<script>
    import ctms from '@/apis/ctms/index.js';
    import utils from "@/utils/common.js";
    export default {
        data() {
            return {
                current: 0,
                swiperDotIndex: 0,
                banner: [{
                    image: '/static/img/banner/banner.jpg',
                    link: ""
                }],
                h5Data: {
                    welcomeTip: '安邮车联汽车托运平台致力于为客户提供多样化、专业化的优质托运服务承运商信息，让客户省心、省钱地找到合适的汽车托运服务。',
                    orderTotal: 1234567,
                    recent: ['王女士，三亚=>哈尔滨，一台比亚迪宋新能源车型，日期：6月15日', '刘先生，万宁=>常德，路虎揽胜，日期：6月18日']
                },
                totalOrdersNum: [1, 2, 3, 4, 5, 6]
            }
        },
        methods: {
            clickBannerItem(item) {
                if (item.link) {
                    var link = item.link;
                    uni.navigateTo({
                        url: "/pages/common/webview/index?url=" + link
                    })
                }
            },
            changeSwiper(e) {
                this.current = e.detail.current
            },
            getBanner() {
                ctms.ads.banner().then((res) => {
                    var _data = res;
                    if (_data) {
                        this.banner = _data;
                    }
                });
            },
            getH5datas() {
                ctms.datas.h5().then((res) => {
                    var _data = res;
                    if (!_data) {
                        return false;
                    }
                    console.log(_data);
                    if (_data.welcomeTip) {
                        this.h5Data.welcomeTip = _data.welcomeTip;
                    }
                    if (_data.orderTotal) {
                        this.h5Data.orderTotal = _data.orderTotal;
                    }
                    if (_data.recent) {
                        this.h5Data.recent = _data.recent;
                    }
                });
            },
            checkSplash() {
                var ls = "splashShowed";
                var a = uni.getStorageSync(ls);
                if (!a) {
                    uni.navigateTo({
                        url: "/pages/index/index"
                    })
                }
            },
            numToArr(num) {
                var _num = num ?? this.h5Data.orderTotal;
                _num = _num.toString();
                var arr = Array.from(_num);
                return arr;
            }
        },
        onLoad: function() {
            this.checkSplash();
            this.getH5datas();
            this.totalOrdersNum = this.numToArr();
        },
        onShow: function() {
            this.getBanner();
            this.getH5datas();
            this.totalOrdersNum = this.numToArr();
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>
<style lang="scss">
    @import url("../../index/counter.css");

    .uni-margin-wrap {
        width: 100%;
    }

    /*轮播幻灯*/
    .swiper {
        height: 300rpx;
        position: relative;
    }

    .swiper-list {
        margin-top: 40rpx;
        margin-bottom: 0;
    }

    .swiper-item {
        width: 100%;
        display: block;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }

    .swiper-image {
        width: 100%;
        height: 300rpx;
    }

    /*滑动区*/
    .swiper-box {
        height: 370rpx;
        background: #fff;
        margin-top: 20rpx;
    }

    .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
        padding-bottom: 10rpx;
    }

    /*最近热门*/
    .recent {
        margin-top: 1rem;
        width: 100%;
    }
</style>