uniapp实现足球数据分析平台移动端H5

前言

一款基于前端铺子改造的移动端程序

一直想做一款足球分析平台，大概内容包括竞彩分析模块，即时预测模块，初盘分析模块，找来找去还是前端铺子的样式感觉比较好看。

一、界面一栏

演示地址

二、注册界面

1.代码说明

主要实现对用户的注册

<template><view style="height:100vh;background: #fff;"><!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false"><block slot="content">欢迎</block></cu-custom> --><!-- <view class="bgImg"><view class="bannerBox"><swiper style="height: 680rpx;" class="swiper" circular="true"indicator-dots="true" autoplay="true" interval="4000" duration="600"><swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index"><view class="swiper-item uni-bg-red"><image class="swiper-img radius shadow-warp" :src="item.imageUrl" mode="widthFix"></image></view></swiper-item></swiper></view></view> --><swiper class="card-swiper round-dot" previous-margin="1rpx" :indicator-dots="false" :circular="true":autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#ffffff"indicator-active-color="#ffffff"><swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur':''"><view class="swiper-item shadow-shop" style="border-radius: 20rpx 20rpx 22rpx 22rpx;"><image :src="item.url" v-if="item.type=='image'" mode="aspectFill" class=""></image></view></swiper-item></swiper><view class="login-view" style=""><view class="t-login"><form class="cl"><view class="t-a"><text class="txt">登录账号</text><input type="text" name="username" placeholder="请输入您的登录账号" maxlength="18" v-model="username" /></view><view class="t-a"><text class="txt">登录密码</text><input type="password" name="password" maxlength="18" placeholder="请输入您的密码"v-model="password" /></view><view class="t-a"><text class="txt">联系邮箱</text><input type="email" name="email" maxlength="18" placeholder="请输入您的邮箱"v-model="email" /></view><button @tap="register()">注册开通</button><view class="vip" @tap="vip()">会员价格</view><view class="reg" @tap="reg()">返回登录</view></form><view class="t-f"><text>—————— 联系我们 ——————</text></view><view class="t-e cl"><view class="t-g" @tap="wxNum()"><image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image></view><view class="t-g" @tap="qqNum()"><image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image></view></view></view><u-modal v-model="show" :content="content"></u-modal></view></view>
</template>

.card-swiper {background-image: url(https://i1.sinaimg.cn/2010/p/2010-07-03/U2706P939T17D63118F322DT20100703042134.jpg);height: 550upx !important;background-size: 100%;margin-bottom: 80upx;}.card-swiper swiper-item {width: 260upx !important;left: 245upx;box-sizing: border-box;padding: 0upx 17upx 50upx 17upx;overflow: initial;/* margin: 100rpx 0; */}.card-swiper swiper-item .swiper-item {width: 100%;display: block;height: 100%;border-radius: 10upx;transform: scale(0.7);transition: all 0.2s ease-in 0s;overflow: hidden;}.card-swiper swiper-item.cur .swiper-item {transform: none;transition: all 0.2s ease-in 0s;}.txt {font-size: 32rpx;font-weight: bold;color: #333333;}.img-a {width: 100%;height: 450rpx;background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);background-size: 100%;}.reg {font-size: 28rpx;color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;font-weight: bold;background: #f5f6fa;color: #000000;text-align: center;margin-top: 30rpx;}.vip{font-size: 28rpx;color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;font-weight: bold;background: #fcd123;color: #000000;text-align: center;margin-top: 30rpx;}.login-view {width: 100%;position: relative;margin-top: -120rpx;background-color: #ffffff;border-radius: 8% 8% 0% 0;}.t-login {width: 600rpx;margin: 0 auto;font-size: 28rpx;padding-top: 80rpx;}.t-login button {font-size: 28rpx;background: #2796f2;color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;font-weight: bold;}.t-login input {height: 90rpx;line-height: 90rpx;margin-bottom: 50rpx;border-bottom: 1px solid #e9e9e9;font-size: 28rpx;}.t-login .t-a {position: relative;}.t-b {text-align: left;font-size: 42rpx;color: #ffffff;padding: 130rpx 0 0 70rpx;font-weight: bold;line-height: 70rpx;}.t-login .t-c {position: absolute;right: 22rpx;top: 22rpx;background: #5677fc;color: #fff;font-size: 24rpx;border-radius: 50rpx;height: 50rpx;line-height: 50rpx;padding: 0 25rpx;}.t-login .t-d {text-align: center;color: #999;margin: 80rpx 0;}.t-login .t-e {text-align: center;width: 250rpx;margin: 80rpx auto 0;}.t-login .t-g {float: left;width: 50%;}.t-login .t-e image {width: 50rpx;height: 50rpx;}.t-login .t-f {text-align: center;margin: 150rpx 0 0 0;color: #666;}.t-login .t-f text {margin-left: 20rpx;color: #aaaaaa;font-size: 27rpx;}.t-login .uni-input-placeholder {color: #aeaeae;}.cl {zoom: 1;}.cl:after {clear: both;display: block;visibility: hidden;height: 0;content: '\20';}.bgImg {position: relative;margin-bottom: 100rpx;.left_box {position: absolute;height: 130rpx;width: 60%;background: #ffffff;bottom: -55rpx;left: 5%;border-radius: 15rpx;}.right_box {text-align: center;position: absolute;height: 130rpx;width: 25%;background: #ffffff;bottom: -55rpx;right: 5%;border-radius: 15rpx;}}

三、首页界面

首页主要是统计分析，这里用了u-charts.js进行图标渲染

<template><view><cu-custom bgColor="bg-gradual-blue" :isBack="false"><!-- <block slot="backText">返回</block> --><block slot="content">首页</block></cu-custom><view class="components-home"><view class="title-header"><view class="title-text">上月走地数据统计</view></view><view class='type-header'><u-radio-group v-model="countValueStr"><u-radio @change="radioChange" v-for="(item, index) in selectList" :key="index" :name="item.name" :disabled="item.disabled">{{item.name}}</u-radio></u-radio-group></view><view class='nav-list margin-top'><navigator open-type="navigate" hover-class='none' :class="'nav-li bg-kuxuan' + (index+1)" v-for="(item, index) in kuxuan":key="index"><view class="nav-name">{{item.name}}</view></navigator></view></view><!-- <view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">仪表盘</text><text class="text-ABC text-blue">GaugeCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas></view> --><view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">最近七天{{countValueStr}}胜率情况</text><text class="text-ABC text-blue">LineCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas></view><view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">上月全部类型场次分布</text><text class="text-ABC text-blue">ringCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas></view><br><br><br><br><!-- <view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">饼状图</text><text class="text-ABC text-blue">PieCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas></view><view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">柱状图</text><text class="text-ABC text-blue">ColumnCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas></view><view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">雷达图</text><text class="text-ABC text-blue">RadarCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas></view><view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">漏斗图</text><text class="text-ABC text-blue">FunnelCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasFunnel" id="canvasFunnel" class="charts"></canvas></view><view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">词云图</text><text class="text-ABC text-blue">DataCharts</text></view></view><view class="chartsMain"><canvas canvas-id="canvasData" id="canvasData" class="charts"></canvas></view> --></view>
</template>

四、竞彩预测

这里分了两个tab，一个显示竞彩，一个显示北单

<template><view class="warp"><view class="status_bar"><!-- 导航栏 --></view><!-- <view class="title b-fontw7">竞彩预测</view> --><view class="nav-box b-card"><view class="nav-bar-box"><view class="nav-bar-item" v-for='(item,index) in list' :key='index' :class="{'nav-bar-item-check':index == current,'nav-bar-left':index == 0 && current == index,'nav-bar-center':index > 0 && index < list.length-1 && current == index ,'nav-bar-right':index == list.length-1 && current == index}"@click="change(index)"><view class=""></view><view class="" style="flex: 1;text-align: center;"><view class="nav-bar-title">{{item.name}}<view class="title-line" v-show="index == current"></view></view></view><view class="nav-bar-line" v-if="index<list.length-1 && index != current && index != current-1"></view><view class=""></view></view></view><view class="nav-content-box"><view class=""><view class="nav-content-title b-fontw6">「每日更新」体彩预测</view><view class="nav-content-text b-flex-item-cent"><text class="b-traiangle"></text><text>今日竞彩</text><text class="nav-content-line"></text><text class="b-fontw6">{{jczcc}}</text></view><view class="nav-content-text b-flex-item-cent"><text class="b-traiangle"></text><text>今日北单</text><text class="nav-content-line"></text><text class="b-fontw6">{{bdzcc}}</text></view></view><view class=""><view class="img"><view class="img-refresh">请认准</view></view></view></view></view><view v-for="(item, index) in resultData" :key='index' style="margin-top: 20rpx;"><view class="cu-bar bg-white margin-top-xs"><view class="action sub-title"><text class="text-xl text-bold text-blue text-shadow">{{item.matchName}} 【{{cxlx=='jc'?item.matchNoCnJczq:item.matchNoCn}}】</text><text class="text-ABC text-blue"></text></view></view><view class="cu-list menu sm-border margin-bottom" style="box-shadow: 0 2px 8px rgba(0,0,0,0.15);"><view class="cu-item"><view class="content padding-tb-sm"><view class="text-lg"><text class="cuIcon-text text-blue margin-right-xs"></text>{{item.teams1}} VS {{item.teams2}}</view><view class="text-gray text-df margin-top-xs"><text class="cuIcon-hotfill margin-right-xs"></text>时间：{{item.matchTime.substring(5)}}</view></view><view class="action"><view class="cu-capsule radius margin-right" style="margin-bottom: 20rpx;"><view :class="{'cu-tag bg-green':item.betTypeStr1=='负','cu-tag bg-gray':item.betTypeStr1=='平','cu-tag bg-red':item.betTypeStr1=='胜'}">{{item.betTypeStr1}}</view><view :class="{'cu-tag line-green':item.betTypeStr1=='负','cu-tag line-gray':item.betTypeStr1=='平','cu-tag line-red':item.betTypeStr1=='胜'}">{{item.ycjgProb1}}%</view></view><br><view class="cu-capsule radius"><view :class="{'cu-tag bg-green':item.betTypeStr2=='负','cu-tag bg-gray':item.betTypeStr2=='平','cu-tag bg-red':item.betTypeStr2=='胜'}">{{item.betTypeStr2}}</view><view :class="{'cu-tag line-green':item.betTypeStr2=='负','cu-tag line-gray':item.betTypeStr2=='平','cu-tag line-red':item.betTypeStr2=='胜'}">{{item.ycjgProb2}}%</view></view></view></view></view></view></view>
</template>

五、即时预测

这里主要展示走地滚球数据，以列表的形式展示，其中又包括了大小球、角球、让球，所以以tab展示。

<template><view><view class="contaier" style="background-color: #FFFFFF;"><view class="picBox"><view class="cu-bar"><view class="action sub-title justify-between"><text class="text-xl text-bold text-white">即时数据</text><text class="text-ABC text-white">Ground</text><!-- last-child选择器--></view><view class="action text-white text-sm" style="opacity: 0.6;">每日 更新</view></view><view class="top_bg"><view class="number_sy_box"><view class="number_sy_box_title"><text>即时·统计</text><text style="position: absolute; right: 20rpx;z-index: 9999; font-size: 24rpx;color: #c3c3c3;">统计时间：昨天12:00-今日12:00</text></view><view class="number_sy_main"><view style="width: 50%; text-align: center; border-right: 1px solid #eee;"><view class="number_num1" style="color: black;">{{oddData.zqc}}</view><view class="danwei">总场次</view></view><view style="width: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;"><view class="number_num2" style="color: red;">{{oddData.zqqc}}</view><view class="danwei">正确</view></view><view style="width: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;"><view class="number_num2">{{oddData}}</view><view class="danwei">错误</view></view><view style="width: 50%; text-align: center; border-right: 1px solid #eee;"><view class="number_num1" style="color: blue;">{{oddData}}</view><view class="danwei">胜率</view></view><view style="width: 50%; text-align: center; z-index: 9999;"><view class="number_num2" v-if="oddData.yld>=0" style="color: darkred;">{{oddDat}}</view><view class="number_num2" v-if="oddData.yld<0">{{oddData}</view><view class="danwei">盈利</view></view><!-- <image mode="widthFix" class="xiaoding_bg" src="@/static/rank/Intersect.png"></image> --></view></view></view></view><view class="wrap"><view class="u-tabs-box"><u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs><view class="page-box" v-if='resultData.length ==0'><view><view class="centre"><view class="explain">暂无滚球信息<view class="tips">可以去看看有其他</view></view><view class="btn">再等等把</view></view></view></view><view class="page-box"><view class="order" v-for="item in resultData" :key="item.matchId + item.betType"><view class="top"><view class="left"><uni-text class="cuIcon-titles text-blue"></uni-text><view class="store" v-if="item.nowstatus!='完'">{{item}}{{item}}′</view><image class="xiaoding_bg" mode="widthFix" src="../../static/zd2.gif" v-if="item.nowstatus!='完'"></image><view class="store" v-else>{{item}} {{item}}</view></view><view class="right"><text class="text-blue">时间：{{item.matchTime.substring(5)}}</text></view></view><view class="cu-card dynamic isCard "><view class=" shadow goPhotographer"><view class="PhotographerBoxR "><view class="text-sm text-grey margin-top-xs">预测盘口：{{item}}</view><view class="text-sm text-grey margin-top-xs">预测时间：{{item}}′ </view><view class="text-sm text-grey margin-top-xs">预测比分：{{item}} </view></view><view class="PhotographerBoxL"><!-- <view class="text-bold margin-top-sm">中国足协杯</view> --><view class="text-sm text-bold avatar-text">{{item.teams1}}{{item.nowscore.split('-')[0]}}</view><view class="text-sm text-bold"> {{item.teams2}} {{item.nowscore.split('-')[1]}}</view><view class='cu-tag2 margin-top-xs bg-red radius shadow-lg' v-if="item.betType.includes('大')|| item.betType.includes('主')||item.betType == '胜'">{{item.betType}}</view><view class='cu-tag2 margin-top-xs bg-blue radius shadow-lg' v-if="item.betType.includes('小')|| item.betType.includes('客')||item.betType.includes('负')">{{item.betType}}</view></view></view></view><br></br></br></br></view></view></view></view></view>
</template>

实现效果：

总结

因为有前端铺子丰富的UI组件库，所以实现起来还是比较简单的，后端是用的api接口，有需要的请联系作者。

鸣谢：
前端铺子-优秀前端UI框架
足球数据分析平台-优秀足球数据策略提供商