3.8.3版本 打包白屏修复
3.8.3 版本打包白屏的，请重新打包自定义基座。线上打包机已更新。
客服中午通知我线上打包机更新了，我重新打包基座，白屏问题已解决。
3.8.3 版本打包白屏的，请重新打包自定义基座。线上打包机已更新。
客服中午通知我线上打包机更新了，我重新打包基座，白屏问题已解决。
更新HBuilder X后，找不到app基座问题
每次更新HBuilder X后，都会出现找不到app基座问题
原因：Hbuilder X更新后都会把adb版本覆盖为1.0.32
路径：D:\Program Files\HBuilderX\update\backup\plugins\launcher\tools\adbs
找到我的AndriodStudio 自带的adb位置
查看这个adb版本
复制这个版本到HBuilder X中，然后重新启动HBuilderX
问题解决
每次更新HBuilder X后，都会出现找不到app基座问题
原因：Hbuilder X更新后都会把adb版本覆盖为1.0.32
路径：D:\Program Files\HBuilderX\update\backup\plugins\launcher\tools\adbs
找到我的AndriodStudio 自带的adb位置
查看这个adb版本
复制这个版本到HBuilder X中，然后重新启动HBuilderX
问题解决
收起阅读 »
关于uniapp的HBX 3.8.3版本的出现的一系列问题解决方案
关于uniapp的HBX 3.8.3版本的出现的一系列问题解决方案
1.导致打包后出现空白页或者只有底部按钮。
- 导致某些功能不能正常使用
3。升级后导致的
这些问题都来源于官方更新的问题。
解决方法:
把Cli降低版本，一切问题正常
关于uniapp的HBX 3.8.3版本的出现的一系列问题解决方案
1.导致打包后出现空白页或者只有底部按钮。
- 导致某些功能不能正常使用
3。升级后导致的
这些问题都来源于官方更新的问题。
解决方法:
把Cli降低版本，一切问题正常
【已解决】修改config.json后，仍出现“未找到scene=bind-mobile-by-sms,的短信模版templateId”的错误
今天成功实现手机短信验证码找回密码功能！分享点经验教训：
1）我是个人用户，今天下午5点提交了身份证和我的网址备案证明，不到两个小时就开通了。
2）调试代码遇到即使修改了uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json当一直出现“未找到scene=bind-mobile-by-sms,的短信模版templateId”的错误提示，后续仔细查找文档和代码才发现，要在sms增加：
"scene": {
"bind-mobile-by-sms": {
"templateId": "18088",
"codeExpiresIn": 600
},
"login-by-sms": {
"templateId": "18088",
"codeExpiresIn": 600
},
"reset-pwd-by-sms": {
"templateId": "18088",
"codeExpiresIn": 600
}
}。而且修改后最好上传公共配置后连接云函数，最终成功。我是移动手机号，体验还是挺快的。
教训：
再次吐槽Dcloud的文档写作太不从用户思维出发，我先后调入了如下几个坑：
1）被文档中说一键登录比短信好就顺着那个思路走，但后来才意识到你得首先是app，我自己就是做个小网站用户登录觉得app太费事，到最后就折腾放弃了。
2）接着又被微信登录所吸引，谁知道又是一堆坑，得服务号才行，对个人开发者又多了门槛
3）不知怎么就被文档有一种感觉，个人很难申请短信认证，所以前面就只好凑合用用户名密码，但找回密码是问题。
4）于是还曾看着文档说email，就差点冲动去增加一个email服务器。
5）今天也是实在受够了密码找回的麻烦事了，就硬着头皮再次鼓捣短信，居然很大个人就申请手机验证码就通过了。7点多遇到修改config.json的难题后，不甘心半途而废，就看源代码，发现sms.scene这个地方，再联想到文档中https://uniapp.dcloud.net.cn/uniCloud/uni-id-summary.html中有个地方比源代码config.json多了scene那部分，就尝试了几次，成功了。
再次建议Dcloud能把文档按用户使用过程来描述，在吹牛每个功能很强大的同时，就第一时间写清楚它的使用范围和前提条件。Dcloud对我们这些从头开始学习的人来说的确优点非常多，大量开源代码和免费低价功能很好，但文档的坑也浪费了太多时间。社区的问题检索功能也太差，要是能用chatgpt给优化一下信息查询，相信dcloud会得到更多人的认可。
今天成功实现手机短信验证码找回密码功能！分享点经验教训：
1）我是个人用户，今天下午5点提交了身份证和我的网址备案证明，不到两个小时就开通了。
2）调试代码遇到即使修改了uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json当一直出现“未找到scene=bind-mobile-by-sms,的短信模版templateId”的错误提示，后续仔细查找文档和代码才发现，要在sms增加：
"scene": {
"bind-mobile-by-sms": {
"templateId": "18088",
"codeExpiresIn": 600
},
"login-by-sms": {
"templateId": "18088",
"codeExpiresIn": 600
},
"reset-pwd-by-sms": {
"templateId": "18088",
"codeExpiresIn": 600
}
}。而且修改后最好上传公共配置后连接云函数，最终成功。我是移动手机号，体验还是挺快的。
教训：
再次吐槽Dcloud的文档写作太不从用户思维出发，我先后调入了如下几个坑：
1）被文档中说一键登录比短信好就顺着那个思路走，但后来才意识到你得首先是app，我自己就是做个小网站用户登录觉得app太费事，到最后就折腾放弃了。
2）接着又被微信登录所吸引，谁知道又是一堆坑，得服务号才行，对个人开发者又多了门槛
3）不知怎么就被文档有一种感觉，个人很难申请短信认证，所以前面就只好凑合用用户名密码，但找回密码是问题。
4）于是还曾看着文档说email，就差点冲动去增加一个email服务器。
5）今天也是实在受够了密码找回的麻烦事了，就硬着头皮再次鼓捣短信，居然很大个人就申请手机验证码就通过了。7点多遇到修改config.json的难题后，不甘心半途而废，就看源代码，发现sms.scene这个地方，再联想到文档中https://uniapp.dcloud.net.cn/uniCloud/uni-id-summary.html中有个地方比源代码config.json多了scene那部分，就尝试了几次，成功了。
再次建议Dcloud能把文档按用户使用过程来描述，在吹牛每个功能很强大的同时，就第一时间写清楚它的使用范围和前提条件。Dcloud对我们这些从头开始学习的人来说的确优点非常多，大量开源代码和免费低价功能很好，但文档的坑也浪费了太多时间。社区的问题检索功能也太差，要是能用chatgpt给优化一下信息查询，相信dcloud会得到更多人的认可。
收起阅读 »
HBuilder X 升级到最新版后length报错
vendor.js? [sm]:7 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
vendor.js? [sm]:7 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
VUE实现竞彩足球APP页面赛事比赛场次的选择算法
最近给朋友做了一个竞彩实体店的APP助手项目，项目已经写完，现在给大家分享给大家一些心得。
竞彩实体店的APP助手算法一般包括以下几个方面：
赔率分析算法：通过对历史比赛数据和球队情况进行分析，预测比赛结果并计算出相应的赔率。
赛事推荐算法：根据用户的历史投注记录和偏好，推荐适合用户的比赛和投注方式。
赛果分析算法：对比赛结果进行分析，包括比分、进球数、角球数等，为用户提供更准确的比赛结果预测。
投注模拟算法：通过模拟用户的投注行为，预测用户可能的投注方式和投注金额，并为用户提供相应的建议。
实时数据更新算法：及时更新比赛数据和赔率变化情况，为用户提供最新的比赛信息和投注建议。
这些算法可以结合起来，为用户提供更准确的赛事分析和投注建议，提高用户的投注成功率和体验。
<template>
<view class="box">
<cmd-nav-bar title="竞彩足球" :back="true" font-color="#fff" background-color="#FF3F43" @rightText="rightText"
right-text="足球开奖">
</cmd-nav-bar>
<div class="soccer_wrap">
<!--main-->
<div class="soccer_main" v-show="isMainShow">
<u-sticky bgColor="#fff"
style="margin-bottom: 30px;display: flex;justify-content: center;align-items: center;">
<u-tabs :list="lassificationcList" lineColor="#FF3F43"
:activeStyle="{color: '#FF3F43',fontWeight: 'bold',transform: 'scale(1.05)'}"
@click="changeSelectBall"></u-tabs>
</u-sticky>
<!--混合过关-->
<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" :show="beidanList.length<=0" mode="data"
text="暂无比赛"></u-empty>
<div class="soccer_hunheguoguan" v-if="changeBall == 0">
<!--每周比赛-->
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList" :key="index">
<div class="games_left">
<span><b>{{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span
class="title_team">{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--表格-->
<table>
<tr>
<td class="burangqiu">0</td>
<td class="sheng_top">
<p>
<span style="position: relative;"
v-for="(notLet,notLetIndex) in game.notLetOddsList"
:class="{active:notLet.active}"
@tap="selectBtn(game,notLet,weekIdx,index,1)">{{notLet.describe}}
{{notLet.odds}}
<view
v-if="game.notLetOddsList.length>0&¬LetIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
<span v-if="game.notLetOddsList.length<=0">未开售</span>
</p>
</td>
<!--点击更多玩法时 传递：接口相关编号、队伍名-->
<td class="morePlay" rowspan="2" @tap="morePlay(game,weekIdx,index)">
<span v-if="game.choiceCount==0">更多<br>玩法</span>
<span v-else>已选<span
style="color: #FF3F43;display: block">{{game.choiceCount}}</span>项</span>
</td>
</tr>
<tr>
<td class="rangqiu" :class="{rangqiuBlue:game.letBall < 0}">
{{game.letBall}}
</td>
<td class="sheng_top">
<p>
<span v-if="game.letOddsList.length<=0">未开售</span>
<span v-else v-for="(lets,letsIndex) in game.letOddsList"
style="position: relative;" :class="{active:lets.active}"
@tap="selectBtn(game,lets,weekIdx,index,2)">{{lets.describe}}
{{lets.odds}}
<view
v-if="game.notLetOddsList.length<=0&&letsIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--胜平负-->
<div class="soccer_shengpingfu" v-if="changeBall == 1">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList">
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</em></span>
</span>
<!--表格-->
<table>
<tr v-if="game.notLetOddsList.length<=0">
<td class="sheng_top">
<span>未开售</span>
</td>
</tr>
<tr v-else>
<td class="sheng_top">
<p>
<span @tap="selectBtn(game,notLet,weekIdx,index,1)"
style="position: relative;" :class="{active:notLet.active}"
class="sheng_top_block"
v-for="(notLet,notLetIndex) in game.notLetOddsList">
<span>{{notLet.describe}}</span>
<span :class="{active:notLet.active}">{{notLet.odds}}
<view
v-if="game.notLetOddsList.length>0&¬LetIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</span>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--让球平负-->
<div class="soccer_shengpingfu" v-if="changeBall == 2">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList">
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--表格-->
<table>
<tr>
<td class="sheng_top">
<p>
<span v-if="game.letOddsList.length<=0">未开售</span>
<span v-else @tap="selectBtn(game,lets,weekIdx,index,2)"
style="position: relative;" :class="{active:lets.active}"
class="sheng_top_block"
v-for="(lets,letsIndex) in game.letOddsList">
<span>{{lets.describe}}</span>
<span :class="{active:lets.active}">{{lets.odds}}
<view
v-if="game.notLetOddsList.length<=0&&letsIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</span>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--总进球-->
<div class="soccer_zongjinqiu" v-if="changeBall == 3">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList">
<img src="@/static/images/football/dan.png" />
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--表格-->
<table>
<tr v-if="game.goalOddsList.length>0">
<td class="gameInfoSpan" :class="{active:goal.active}" v-if="idx < 4"
@tap="selectBtn(game,goal,weekIdx,index,3)"
v-for="(goal,idx) in game.goalOddsList" :key="idx">
<span><b>{{idx}}</b>{{goal.odds}}</span>
</td>
</tr>
<tr v-if="game.goalOddsList.length>0">
<td class="gameInfoSpan" v-if="idx >= 4" :class="{active:goal.active}"
@tap="selectBtn(game,goal,weekIdx,index,3)"
v-for="(goal,idx) in game.goalOddsList" :key="idx">
<span><b>{{idx}}<span v-if="idx === 7">+</span></b>{{goal.odds}}</span>
</td>
</tr>
<tr v-if="game.goalOddsList.length<=0">
未开售
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--比分-->
<div class="soccer_bifen" v-if="changeBall == 4">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,idx) in wk.footballMatchList">
<img src="@/static/images/football/dan.png" />
<div class="games_left">
<span><b>{{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--投注区-->
<div @click="morePlay(game,weekIdx,idx)">
<span v-for="s in game.scoreOddsList" v-if="s.active"
style="color: #FF3F43;font-weight: bold">
{{s.describe}} |
</span>
<span v-if="game.scoreFlag!='false'">
点击展开比分投注区
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--半全场-->
<div class="soccer_bifen" v-if="changeBall == 5">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,idx) in wk.footballMatchList">
<img src="@/static/images/football/dan.png" />
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--投注区-->
<div @click="morePlay(game,weekIdx,idx)">
<span v-for="s in game.halfWholeOddsList" v-if="s.active"
style="color: #FF3F43;font-weight: bold">
{{s.describe}} |
</span>
<span v-if="game.halfWholeFlag!='false'">
点击展开半全场
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<BuyFooterSport :count='count' :total='total' :isShowCount="isShowCount" @clean="clean"
@confirm="confirm"></BuyFooterSport>
</div>
<!--隐藏：更多玩法 根据index更改数据 根据isShowMorePlay控制显示-->
<u-popup class="morePlays" :show="isShowMorePlay" mode="bottom" @close="isShowMorePlay = false">
<div class="morePlay">
<!--队伍-->
<h5 class="morePlay_title">
{{football.homeTeam}}
<span>VS</span>
{{football.visitingTeam}}
</h5>
<!--玩法:根据头部index切换更多玩法显示内容-->
<div class="morePlay_select">
<!--1混合-->
<div v-show="changeBall === 0" class="morePlay_hunhe">
<!--左-->
<div class="hunhe_left">
<span class="hunhe_left_top">0</span>
<span class="hunhe_left_bottom">{{football.letBall}}</span>
</div>
<!--右-->
<div class="hunhe_right">
<span v-if="football.notLetOddsList!=undefined&&football.notLetOddsList.length<=0"
style="width: 100%;"><b>未开售</b></span>
<span style="position: relative;"
v-else-if="football.notLetOddsList!=undefined&&football.notLetOddsList.length>0"
v-for="(notLet,notLetIndex) in football.notLetOddsList"
:class="{active:notLet.active}"
@tap="selectBtn(football,notLet,listIdx,childIdx,1)">{{notLet.describe}}
<b :class="{active:notLet.active}">{{notLet.odds}}
<view
v-if="football.notLetOddsList.length>0&¬LetIndex==0&&football.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</b></span>
<span v-if="football.letOddsList!=undefined&&football.letOddsList.length<=0"
style="width: 100%;"><b>未开售</b></span>
<span style="position: relative;"
v-else-if="football.letOddsList!=undefined&&football.letOddsList.length>0"
v-for="(lets,letsIndex) in football.letOddsList" :class="{active:lets.active}"
@tap="selectBtn(football,lets,listIdx,childIdx,2)">{{lets.describe}}
<b :class="{active:lets.active}">{{lets.odds}}</b>
<view v-if="football.notLetOddsList.length<=0&&letsIndex==0&&football.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</div>
</div>
<!--2总进球-->
<div v-show="changeBall === 0" class="morePlay_zongjinqiu">
<!--左-->
<div class="zongjinqiu_left">
<span>总进球</span>
</div>
<!--右-->
<div class="zongjinqiu_right" v-if="football.goalOddsList!=undefined">
<span v-if="football.goalOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-else @tap="selectBtn(football,a,listIdx,childIdx,3)" :class="{active:a.active}"
v-for="(a,index) in football.goalOddsList" :key="index"><b>{{index}}<em
v-if="index === 7">+</em></b> <b
:class="{active:a.active}">{{a.odds}}</b></span>
</div>
</div>
<!--3半全场-->
<div v-show="changeBall === 0 || changeBall === 5" class="morePlay_banquanchang">
<!--左-->
<div class="banquanchang_left">
<span>半全场</span>
</div>
<!--右-->
<div class="banquanchang_right" v-if="football.halfWholeOddsList!=undefined">
<span v-if="football.halfWholeOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-else :class="{active:a.active}" @tap="selectBtn(football,a,listIdx,childIdx,5)"
v-for="(a,index) in football.halfWholeOddsList"><b>{{bqcItems[index]}}</b>
<b :class="{active:a.active}">{{a.odds}}</b></span>
</div>
</div>
<!--4比分-->
<div v-show="changeBall === 0" class="morePlay_bifen">
<!--左-->
<div class="bifen_left">
<span>比分胜</span>
<span>比分平</span>
<span>比分负</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-else @tap="selectBtn(football,b,listIdx,childIdx,4)"
v-for="(b,index) in football.scoreOddsList" :key="index"
:class="{doubleW:index === 12 || index === 30, treW:index === 17,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
<!--5比分拆分版-->
<div v-show="changeBall === 4" class="morePlay_bifen_zhusheng">
<!--左-->
<div class="bifen_left">
<span>主胜</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-if="index <= 12" v-for="(b,index) in football.scoreOddsList" :key="index"
@tap="selectBtn(football,b,listIdx,childIdx,4)"
:class="{doubleW:index === 12,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
<div v-show="changeBall === 4" class="morePlay_bifen_ping">
<!--左-->
<div class="bifen_left">
<span>平</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-if="index > 12 && index <= 17" @tap="selectBtn(football,b,listIdx,childIdx,4)"
v-for="(b,index) in football.scoreOddsList" :key="index"
:class="{treW:index === 17,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
<div v-show="changeBall === 4" class="morePlay_bifen_kesheng">
<!--左-->
<div class="bifen_left">
<span>客胜</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-if="index > 17" v-for="(b,index) in football.scoreOddsList" :key="index"
@tap="selectBtn(football,b,listIdx,childIdx,4)"
:class="{doubleW:index === 30,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
</div>
<!--取消/确定-->
<div class="morePlay_action">
<div @click="isShowMorePlay = false">取消</div>
<div @click="isShowMorePlay = false">确定</div>
</div>
</div>
</u-popup>
</div>
</view>
</template>
<script>
import {
footballWinEvenLoseList
} from '@/api/football.js'
import BuyFooterSport from '../common/buy-footer-sport.vue'
export default {
name: 'Soccer',
components: {
BuyFooterSport
},
data() {
return {
lassificationcList: [{
name: '混合过关'
}, {
name: '胜平负'
}, {
name: '让球胜平负'
}, {
name: '总进球'
}, {
name: '比分'
}, {
name: '半全场'
}],
bifenItems: ['1:0', '2:0', '2:1', '3:0', '3:1', '3:2', '4:0', '4:1', '4:2', '5:0', '5:1', '5:2', '胜其他',
'0:0', '1:1', '2:2', '3:3', '平其他', '0:1', '0:2', '1:2', '0:3', '1:3', '2:3', '0:4', '1:4', '2:4',
'0:5', '1:5', '2:5', '负其他'
],
bqcItems: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],
// 混合玩法-更多玩法
isShowMorePlay: false,
isShowCount: false,
changeBall: 0,
isChangeIcon: 0,
isShowGames: 0,
beidanList: [],
isMainShow: true,
football: {},
that: this,
listIdx: "",
childIdx: "",
count: "",
total: "",
selectItem: [],
}
},
filters: {
formatDate(data, that) {
if (null == data) {
return null;
}
return that.globalUtil.timeFormat(data)
},
},
onPullDownRefresh() {
this.fecthSoccerData();
setTimeout(function() {
uni.stopPullDownRefresh()
}, 500);
},
methods: {
/** 选中时改变当前单元格的背景颜色
* @param {Object} wk 当前比赛数据
* @param {Object} item 当前点击的数据
* @param {Object} weekIdx 上上级父级list的index
* @param {Object} index 上级父级list的index
* @param {Object} ,type 类型
*/
selectBtn(wk, item, weekIdx, index, type) {
if (type == 1) {
//不让球
this.beidanList[weekIdx].footballMatchList[index].notLetOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
} else if (type == 2) {
//让球
this.beidanList[weekIdx].footballMatchList[index].letOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
} else if (type == 3) {
//总进球
this.beidanList[weekIdx].footballMatchList[index].goalOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
} else if (type == 4) {
//比分
this.beidanList[weekIdx].footballMatchList[index].scoreOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
//标识是否选择了比分
this.$set(wk, 'scoreFlag', "false")
} else if (type == 5) {
//半全场
this.beidanList[weekIdx].footballMatchList[index].halfWholeOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
this.$set(wk, 'halfWholeFlag', "false")
}
//计算选中了几项
if (item.active) {
wk.choiceCount++;
} else {
wk.choiceCount--;
}
//获取选中的数据放入新的数组中
if (this.selectItem.length > 0) {
//标识是否在数组中是否存在
let flag = true
this.selectItem.map((d, idx) => {
//判断id 如果相同进行重新赋值 在将flag置为true
if (d.id == wk.id) {
flag = false
//如果都取消了判断选中项是否为零，为零就删除元素
if (d.choiceCount == 0) {
//index 当前元素索引；1：需要删除的元素个数
this.selectItem.splice(idx, 1);
}
//重新赋值数据
d = item;
}
})
//如果都不存在进行添加到数组中
if (flag) {
this.selectItem.push(wk)
}
} else {
//第一次数组为空的时候添加到数组中
this.selectItem.push(wk)
}
// this.isShowCount=true;
this.count = this.selectItem.length;
// this.total=2;
},
rightText() {
uni.navigateTo({
url: "pages/football/footballResult"
});
},
clean() {
this.count = "";
this.fecthSoccerData();
this.selectItem = []
},
analysis(url) {
if (url == null || url == "" || url == undefined) {
uni.showToast({
title: '暂无分析数据',
icon: 'none'
});
return;
}
uni.navigateTo({
url: "/pages/common/analysis?url=" + encodeURIComponent(url)
});
},
confirm() {
var count;
var flag = true;
this.selectItem.map((item) => {
//循环遍历是否是单关
if (item.isSingle == '1') {
//如果是单关并且让球不为空的清空下，看不让球有没有被选择，选择了就不是单关
if (item.notLetOddsList.length > 0) {
item.letOddsList.map(lets => {
if (lets.active) {
count = this.selectItem.length;
//用来标记是否是单关，传到下单也有用来判断是否有那个单关的下注选项
flag = false;
return;
}
})
}
} else {
//不是单关判断让球，非让球是否有选择数据
item.notLetOddsList.map(notLet => {
if (notLet.active) {
count = this.selectItem.length;
//用来标记是否是单关，传到下单也有用来判断是否有那个单关的下注选项
flag = false
return;
}
})
item.letOddsList.map(lets => {
if (lets.active) {
count = this.selectItem.length;
//用来标记是否是单关，传到下单也有用来判断是否有那个单关的下注选项
flag = false
return;
}
})
}
})
//如果不是单关,选中了让球或者非让球就需要校验场数，比赛是最低二场
if (count < 2 || this.selectItem.length <= 0) {
uni.showToast({
title: '至少选择二场比赛',
icon: 'none'
});
return;
}
if (this.selectItem.length > 8) {
uni.showToast({
title: '最多选择8场比赛',
icon: 'none'
});
return;
}
//总投注选项数不能超过20个
let selectCount = 0;
//每场相乘不能大于16
let rideCount = 1;
this.selectItem.some((map, idx) => {
selectCount += map.choiceCount
let a = 0;
map.letOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.notLetOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.goalOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.halfWholeOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.scoreOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
rideCount *= a;
})
if (selectCount > 20) {
uni.showToast({
title: '总投注选项数不能超过20个',
icon: 'none'
});
return;
}
if (rideCount > 16) {
uni.showToast({
title: '每场选择玩法数连乘不能超过16个',
icon: 'none'
});
return;
}
uni.navigateTo({
url: "pages/football/footballConfirm?obj=" + encodeURIComponent(JSON.stringify(this
.selectItem)) + "&flag=" + encodeURIComponent(flag)
});
},
// 获取竞彩足球数据
fecthSoccerData() {
uni.showLoading();
footballWinEvenLoseList().then(res => {
this.beidanList = res.voList
setTimeout(function() {
uni.hideLoading();
}, 50);
})
},
// 不同玩法对应投注
changeSelectBall(item) {
this.fecthSoccerData()
this.changeBall = item.index
this.selectItem = [];
this.count = "";
},
// 点击折叠条
clickBanner(index) {
if (this.isShowGames === index) {
this.isShowGames = index + 'a'
this.isChangeIcon = index + 'a'
} else {
this.isShowGames = index
this.isChangeIcon = index
}
},
// 点击打开更多玩法
morePlay(item, listIdx, childIdx) {
// 控制更多玩法显示
this.isShowMorePlay = true
this.football = item;
this.listIdx = listIdx
this.childIdx = childIdx
},
},
onLoad() {
this.fecthSoccerData()
}
}
</script>
<style scoped lang="scss">
/deep/.u-tag {
width: 45px;
height: 20px;
justify-content: center;
align-items: center;
}
/deep/.u-tag__text--medium {
font-size: 11px;
line-height: 11px;
}
page {
background-color: #f7f9fa;
}
/deep/.cmd-nav-bar-right-text {
font-size: 16px !important;
}
/deep/.u-empty {
margin-top: 50% !important;
}
.active {
background-color: #FF3F43 !important;
color: #fff !important;
}
.box {
padding-bottom: 0px;
}
.soccer_wrap {
.soccer_main {
background-color: #f7f9fa;
width: 100%;
padding-bottom: 10px;
/*混合过关*/
.soccer_hunheguoguan {
width: 100%;
padding-bottom: 10px;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
height: 30.66667vmin;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
/*box-sizing: border-box;*/
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
/*height: 100%;*/
box-sizing: border-box;
.right_title {
/*box-sizing: border-box;*/
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
b {
position: absolute;
left: 0;
top: -2vmin;
width: 3.73333vmin;
display: inline-block;
font-weight: 400;
font-size: 5.33333vmin;
-webkit-transform: scale(.5);
transform: scale(.5);
line-height: 1.2;
}
.title_team {
/*margin:0 auto;*/
font-size: 3.2vmin;
height: 35px;
font-weight: 700;
color: #5d5d5d;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
}
}
}
table {
width: 100%;
border: 1px solid #e6e6e6;
color: #333333;
tr {
td {
/*vertical-align: middle;*/
font-size: 3.46667vmin;
background-color: white;
}
.burangqiu {
border: none;
width: 3.73333vmin;
font-size: 2.93333vmin;
text-align: center;
background: #e6e6e6;
height: 9.6vmin;
vertical-align: middle
}
.rangqiu {
color: white;
border: none;
width: 3.73333vmin;
font-size: 2.93333vmin;
text-align: center;
background: #FF3F43;
height: 9.6vmin;
vertical-align: middle
}
.rangqiuBlue {
background: #2d8cf0;
}
.sheng_top {
height: 9.6vmin;
box-sizing: border-box;
border: 1px solid #e6e6e6;
font-size: 3.46667vmin;
text-align: center;
justify-content: center;
p {
display: flex;
align-items: center;
height: 100%;
box-sizing: border-box;
justify-content: center;
span {
width: 20.5vmin;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border-right: 1px solid #e6e6e6;
}
span:last-child {
border: none;
}
}
}
.morePlay {
width: 10.66667vmin;
font-size: 3.46667vmin;
text-align: center;
border: 1px solid #e6e6e6;
color: #999999;
vertical-align: middle;
line-height: 1.5;
}
}
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
/*胜平负\让球胜平负*/
.soccer_shengpingfu {
background-color: white;
width: 100%;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
padding: 3.2vmin 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
height: 25.33333vmin;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
/*height: 100%;*/
box-sizing: border-box;
width: 100%;
.right_title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
margin-bottom: 2.66667vmin;
font-size: 3.2vmin;
display: inline-block;
font-weight: 700;
color: #5d5d5d;
white-space: nowrap;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
color: #999;
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
}
}
}
table {
width: 100%;
border: 1px solid #e6e6e6;
color: #333333;
tr {
td {
/*vertical-align: middle;*/
font-size: 3.46667vmin;
background-color: white;
}
.sheng_top {
height: 11.73333vmin;
box-sizing: border-box;
border: 1px solid #e6e6e6;
font-size: 3.73333vmin;
text-align: center;
p {
display: flex;
align-items: center;
height: 100%;
box-sizing: border-box;
justify-content: center;
/*text-align: center;*/
.sheng_top_block {
width: 25.3vmin;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border-right: 1px solid #e6e6e6;
flex-direction: column;
span {
margin-bottom: .66667vmin;
}
span:last-child {
color: #666;
}
}
.sheng_top_block:last-child {
border: none;
}
}
}
}
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
/*总进球*/
.soccer_zongjinqiu {
background-color: white;
width: 100%;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
padding: 1.2vmin 0;
position: relative;
/*box-sizing: border-box;*/
display: flex;
align-items: center;
justify-content: flex-start;
height: 27.33333vmin;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
img {
position: absolute;
top: 0;
left: -11px;
width: 5.06667vmin;
height: 3.2vmin;
}
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
box-sizing: border-box;
.right_title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
margin-bottom: 2.66667vmin;
font-size: 3.2vmin;
display: inline-block;
font-weight: 700;
color: #5d5d5d;
white-space: nowrap;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
color: #999;
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
}
}
}
table {
width: 100%;
border: 1px solid #e6e6e6;
color: #333333;
border-bottom: none;
tr {
border: 1px solid #e6e6e6;
background-color: white;
td {
border-bottom: 1px solid #e6e6e6;
color: #666;
width: 20.73333vmin;
height: 7.73333vmin;
box-sizing: border-box;
font-size: 3.2vmin;
text-align: left;
border-right: 1px solid #e6e6e6;
vertical-align: middle;
span {
font-weight: 400;
b {
margin-right: 2vmin;
}
}
}
}
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
/*比分*/
.soccer_bifen {
background-color: white;
width: 100%;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
height: 27.33333vmin;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
img {
position: absolute;
top: 0;
left: -11px;
width: 5.06667vmin;
height: 3.2vmin;
}
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
width: 100vmin;
box-sizing: border-box;
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*隐藏后添加省略号*/
white-space: nowrap;
/*强制不换行*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
.right_title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
margin-bottom: 4.66667vmin;
display: inline-block;
font-weight: 700;
color: #5d5d5d;
white-space: nowrap;
font-size: 3.2vmin;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
color: #999;
}
}
}
div {
box-sizing: border-box;
padding: 3.2vmin 0;
height: 9.6vmin;
width: 100%;
border: .26667vmin solid #e6e6e6;
background: #fff;
color: #666;
font-size: 3.46667vmin;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
.weekGame_games {
border-bottom: 1px solid #e6e6e6;
}
}
/*更多玩法*/
.morePlays {
/*height: 500px;*/
width: 100%;
.morePlay {
background-color: #F2F2F2;
width: 100%;
/*头部*/
h5 {
/*font-weight: bold;*/
font-size: 2.93333vmin;
width: 100%;
height: 9.33333vmin;
background: #fff;
margin-bottom: 2.13333vmin;
display: flex;
align-items: center;
justify-content: center;
span {
margin: 0 14.66667vmin;
font-weight: bold;
}
}
/*选择*/
.morePlay_select {
margin: 0 2.93333vmin;
font-size: 1.86667vmin;
/*混合*/
.morePlay_hunhe {
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
margin-bottom: 2.3vmin;
/*左*/
.hunhe_left {
span {
width: 6.9vmin;
height: 70rpx;
display: flex;
align-items: center;
justify-content: center;
}
.hunhe_left_top {
background-color: rgb(224, 224, 224);
}
.hunhe_left_bottom {
background-color: #19BE6B;
color: white;
}
}
/*右*/
.hunhe_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 9.1vmin;
width: 28.8vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
b:last-child {
color: #666;
}
b:first-child {
margin-right: 7vmin;
}
}
}
}
/*总进球*/
.morePlay_zongjinqiu {
margin-bottom: 2.3vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.zongjinqiu_left {
height: 21.13333vmin;
background-color: #34ccc3;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
.zongjinqiu_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
height: 18.13333vmin;
span {
background-color: white;
height: 18.13333vmin/2;
width: 21.5vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
b {
width: 21.5vmin/2;
display: flex;
justify-content: center;
em {
font-style: normal;
}
}
b:last-child {
color: #666;
}
}
}
}
/*半全场*/
.morePlay_banquanchang {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.banquanchang_left {
height: 27.06667vmin;
background-color: #36a8f8;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
.banquanchang_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 8.8vmin;
width: 28.8vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
b {
width: 28.82vmin/2;
display: flex;
justify-content: center;
margin-left: 10rpx;
}
b:last-child {
color: #666;
}
}
}
}
/*比分*/
.morePlay_bifen {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 54.13333vmin;
span {
background-color: #fbb52f;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
border-bottom: 2px solid #fff;
}
span:nth-child(1) {
background-color: #fbb52f;
height: 38%;
}
span:nth-child(2) {
background-color: #D52BB3;
height: 22%;
}
span:nth-child(3) {
background-color: #1cedf2;
height: 38%;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.19vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
/*比分-主胜*/
.morePlay_bifen_zhusheng {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 54.13333vmin/5*2;
background-color: #fbb52f;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.19vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
/*比分-平*/
.morePlay_bifen_ping {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 160rpx;
background-color: #5791F9;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.2vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
/*比分-客胜*/
.morePlay_bifen_kesheng {
margin-bottom: 2.13333vmin;
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 54.13333vmin/5*2;
background-color: #34ccc3;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.19vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
}
/*取消/确定*/
.morePlay_action {
width: 100%;
font-size: 4.26667vmin;
display: flex;
div {
width: 50%;
height: 11.73333vmin;
border-radius: 1.1vmin;
display: flex;
align-items: center;
justify-content: center;
}
div:first-child {
background: #ccc;
color: #333333;
}
div:last-child {
background-color: #FF3F43;
color: white;
}
}
}
}
}
</style>最近给朋友做了一个竞彩实体店的APP助手项目，项目已经写完，现在给大家分享给大家一些心得。
竞彩实体店的APP助手算法一般包括以下几个方面：
赔率分析算法：通过对历史比赛数据和球队情况进行分析，预测比赛结果并计算出相应的赔率。
赛事推荐算法：根据用户的历史投注记录和偏好，推荐适合用户的比赛和投注方式。
赛果分析算法：对比赛结果进行分析，包括比分、进球数、角球数等，为用户提供更准确的比赛结果预测。
投注模拟算法：通过模拟用户的投注行为，预测用户可能的投注方式和投注金额，并为用户提供相应的建议。
实时数据更新算法：及时更新比赛数据和赔率变化情况，为用户提供最新的比赛信息和投注建议。
这些算法可以结合起来，为用户提供更准确的赛事分析和投注建议，提高用户的投注成功率和体验。
<template>
<view class="box">
<cmd-nav-bar title="竞彩足球" :back="true" font-color="#fff" background-color="#FF3F43" @rightText="rightText"
right-text="足球开奖">
</cmd-nav-bar>
<div class="soccer_wrap">
<!--main-->
<div class="soccer_main" v-show="isMainShow">
<u-sticky bgColor="#fff"
style="margin-bottom: 30px;display: flex;justify-content: center;align-items: center;">
<u-tabs :list="lassificationcList" lineColor="#FF3F43"
:activeStyle="{color: '#FF3F43',fontWeight: 'bold',transform: 'scale(1.05)'}"
@click="changeSelectBall"></u-tabs>
</u-sticky>
<!--混合过关-->
<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" :show="beidanList.length<=0" mode="data"
text="暂无比赛"></u-empty>
<div class="soccer_hunheguoguan" v-if="changeBall == 0">
<!--每周比赛-->
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList" :key="index">
<div class="games_left">
<span><b>{{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span
class="title_team">{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--表格-->
<table>
<tr>
<td class="burangqiu">0</td>
<td class="sheng_top">
<p>
<span style="position: relative;"
v-for="(notLet,notLetIndex) in game.notLetOddsList"
:class="{active:notLet.active}"
@tap="selectBtn(game,notLet,weekIdx,index,1)">{{notLet.describe}}
{{notLet.odds}}
<view
v-if="game.notLetOddsList.length>0&¬LetIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
<span v-if="game.notLetOddsList.length<=0">未开售</span>
</p>
</td>
<!--点击更多玩法时 传递：接口相关编号、队伍名-->
<td class="morePlay" rowspan="2" @tap="morePlay(game,weekIdx,index)">
<span v-if="game.choiceCount==0">更多<br>玩法</span>
<span v-else>已选<span
style="color: #FF3F43;display: block">{{game.choiceCount}}</span>项</span>
</td>
</tr>
<tr>
<td class="rangqiu" :class="{rangqiuBlue:game.letBall < 0}">
{{game.letBall}}
</td>
<td class="sheng_top">
<p>
<span v-if="game.letOddsList.length<=0">未开售</span>
<span v-else v-for="(lets,letsIndex) in game.letOddsList"
style="position: relative;" :class="{active:lets.active}"
@tap="selectBtn(game,lets,weekIdx,index,2)">{{lets.describe}}
{{lets.odds}}
<view
v-if="game.notLetOddsList.length<=0&&letsIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--胜平负-->
<div class="soccer_shengpingfu" v-if="changeBall == 1">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList">
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</em></span>
</span>
<!--表格-->
<table>
<tr v-if="game.notLetOddsList.length<=0">
<td class="sheng_top">
<span>未开售</span>
</td>
</tr>
<tr v-else>
<td class="sheng_top">
<p>
<span @tap="selectBtn(game,notLet,weekIdx,index,1)"
style="position: relative;" :class="{active:notLet.active}"
class="sheng_top_block"
v-for="(notLet,notLetIndex) in game.notLetOddsList">
<span>{{notLet.describe}}</span>
<span :class="{active:notLet.active}">{{notLet.odds}}
<view
v-if="game.notLetOddsList.length>0&¬LetIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</span>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--让球平负-->
<div class="soccer_shengpingfu" v-if="changeBall == 2">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList">
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--表格-->
<table>
<tr>
<td class="sheng_top">
<p>
<span v-if="game.letOddsList.length<=0">未开售</span>
<span v-else @tap="selectBtn(game,lets,weekIdx,index,2)"
style="position: relative;" :class="{active:lets.active}"
class="sheng_top_block"
v-for="(lets,letsIndex) in game.letOddsList">
<span>{{lets.describe}}</span>
<span :class="{active:lets.active}">{{lets.odds}}
<view
v-if="game.notLetOddsList.length<=0&&letsIndex==0&&game.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</span>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--总进球-->
<div class="soccer_zongjinqiu" v-if="changeBall == 3">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,index) in wk.footballMatchList">
<img src="@/static/images/football/dan.png" />
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--表格-->
<table>
<tr v-if="game.goalOddsList.length>0">
<td class="gameInfoSpan" :class="{active:goal.active}" v-if="idx < 4"
@tap="selectBtn(game,goal,weekIdx,index,3)"
v-for="(goal,idx) in game.goalOddsList" :key="idx">
<span><b>{{idx}}</b>{{goal.odds}}</span>
</td>
</tr>
<tr v-if="game.goalOddsList.length>0">
<td class="gameInfoSpan" v-if="idx >= 4" :class="{active:goal.active}"
@tap="selectBtn(game,goal,weekIdx,index,3)"
v-for="(goal,idx) in game.goalOddsList" :key="idx">
<span><b>{{idx}}<span v-if="idx === 7">+</span></b>{{goal.odds}}</span>
</td>
</tr>
<tr v-if="game.goalOddsList.length<=0">
未开售
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--比分-->
<div class="soccer_bifen" v-if="changeBall == 4">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,idx) in wk.footballMatchList">
<img src="@/static/images/football/dan.png" />
<div class="games_left">
<span><b>{{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--投注区-->
<div @click="morePlay(game,weekIdx,idx)">
<span v-for="s in game.scoreOddsList" v-if="s.active"
style="color: #FF3F43;font-weight: bold">
{{s.describe}} |
</span>
<span v-if="game.scoreFlag!='false'">
点击展开比分投注区
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--半全场-->
<div class="soccer_bifen" v-if="changeBall == 5">
<div class="soccer_weekGame" v-for="(wk,weekIdx) in beidanList" :key="weekIdx">
<!--比赛折叠条-->
<div class="weekGame_banner" @click="clickBanner(weekIdx)">
<div class="banner_left">
<span>{{wk.startTime}}</span>
<span>共有{{wk.count}}场比赛可投</span>
</div>
<u-icon :name="isChangeIcon === weekIdx?'arrow-up':'arrow-down'"></u-icon>
</div>
<!--比赛-->
<div class="weekGame_games" v-show="isShowGames === weekIdx">
<!--每个比赛-->
<div class="games" v-for="(game,idx) in wk.footballMatchList">
<img src="@/static/images/football/dan.png" />
<div class="games_left">
<span><b> {{game.number}}</b></span>
<u-tag :borderColor="game.color" :bgColor="game.color" :text="game.match">
</u-tag>
<span>{{game.deadline|formatDate(that)}} 截止</span>
<span style="color: rgb(41, 121, 255);" @click="analysis(game.analysis)">分析</span>
</div>
<div class="games_right">
<!--比赛队伍-->
<span class="right_title">
<span>{{game.homeTeam}}<strong>vs</strong>{{game.visitingTeam}}</span>
</span>
<!--投注区-->
<div @click="morePlay(game,weekIdx,idx)">
<span v-for="s in game.halfWholeOddsList" v-if="s.active"
style="color: #FF3F43;font-weight: bold">
{{s.describe}} |
</span>
<span v-if="game.halfWholeFlag!='false'">
点击展开半全场
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<BuyFooterSport :count='count' :total='total' :isShowCount="isShowCount" @clean="clean"
@confirm="confirm"></BuyFooterSport>
</div>
<!--隐藏：更多玩法 根据index更改数据 根据isShowMorePlay控制显示-->
<u-popup class="morePlays" :show="isShowMorePlay" mode="bottom" @close="isShowMorePlay = false">
<div class="morePlay">
<!--队伍-->
<h5 class="morePlay_title">
{{football.homeTeam}}
<span>VS</span>
{{football.visitingTeam}}
</h5>
<!--玩法:根据头部index切换更多玩法显示内容-->
<div class="morePlay_select">
<!--1混合-->
<div v-show="changeBall === 0" class="morePlay_hunhe">
<!--左-->
<div class="hunhe_left">
<span class="hunhe_left_top">0</span>
<span class="hunhe_left_bottom">{{football.letBall}}</span>
</div>
<!--右-->
<div class="hunhe_right">
<span v-if="football.notLetOddsList!=undefined&&football.notLetOddsList.length<=0"
style="width: 100%;"><b>未开售</b></span>
<span style="position: relative;"
v-else-if="football.notLetOddsList!=undefined&&football.notLetOddsList.length>0"
v-for="(notLet,notLetIndex) in football.notLetOddsList"
:class="{active:notLet.active}"
@tap="selectBtn(football,notLet,listIdx,childIdx,1)">{{notLet.describe}}
<b :class="{active:notLet.active}">{{notLet.odds}}
<view
v-if="football.notLetOddsList.length>0&¬LetIndex==0&&football.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</b></span>
<span v-if="football.letOddsList!=undefined&&football.letOddsList.length<=0"
style="width: 100%;"><b>未开售</b></span>
<span style="position: relative;"
v-else-if="football.letOddsList!=undefined&&football.letOddsList.length>0"
v-for="(lets,letsIndex) in football.letOddsList" :class="{active:lets.active}"
@tap="selectBtn(football,lets,listIdx,childIdx,2)">{{lets.describe}}
<b :class="{active:lets.active}">{{lets.odds}}</b>
<view v-if="football.notLetOddsList.length<=0&&letsIndex==0&&football.isSingle=='1'"
style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-top: 25px solid #FF3F43; border-right: 25px solid transparent;">
<view
style="position: absolute; left: 1px; top: -25px; color: white; font-size: 11px;">
单</view>
</view>
</span>
</div>
</div>
<!--2总进球-->
<div v-show="changeBall === 0" class="morePlay_zongjinqiu">
<!--左-->
<div class="zongjinqiu_left">
<span>总进球</span>
</div>
<!--右-->
<div class="zongjinqiu_right" v-if="football.goalOddsList!=undefined">
<span v-if="football.goalOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-else @tap="selectBtn(football,a,listIdx,childIdx,3)" :class="{active:a.active}"
v-for="(a,index) in football.goalOddsList" :key="index"><b>{{index}}<em
v-if="index === 7">+</em></b> <b
:class="{active:a.active}">{{a.odds}}</b></span>
</div>
</div>
<!--3半全场-->
<div v-show="changeBall === 0 || changeBall === 5" class="morePlay_banquanchang">
<!--左-->
<div class="banquanchang_left">
<span>半全场</span>
</div>
<!--右-->
<div class="banquanchang_right" v-if="football.halfWholeOddsList!=undefined">
<span v-if="football.halfWholeOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-else :class="{active:a.active}" @tap="selectBtn(football,a,listIdx,childIdx,5)"
v-for="(a,index) in football.halfWholeOddsList"><b>{{bqcItems[index]}}</b>
<b :class="{active:a.active}">{{a.odds}}</b></span>
</div>
</div>
<!--4比分-->
<div v-show="changeBall === 0" class="morePlay_bifen">
<!--左-->
<div class="bifen_left">
<span>比分胜</span>
<span>比分平</span>
<span>比分负</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-else @tap="selectBtn(football,b,listIdx,childIdx,4)"
v-for="(b,index) in football.scoreOddsList" :key="index"
:class="{doubleW:index === 12 || index === 30, treW:index === 17,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
<!--5比分拆分版-->
<div v-show="changeBall === 4" class="morePlay_bifen_zhusheng">
<!--左-->
<div class="bifen_left">
<span>主胜</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-if="index <= 12" v-for="(b,index) in football.scoreOddsList" :key="index"
@tap="selectBtn(football,b,listIdx,childIdx,4)"
:class="{doubleW:index === 12,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
<div v-show="changeBall === 4" class="morePlay_bifen_ping">
<!--左-->
<div class="bifen_left">
<span>平</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-if="index > 12 && index <= 17" @tap="selectBtn(football,b,listIdx,childIdx,4)"
v-for="(b,index) in football.scoreOddsList" :key="index"
:class="{treW:index === 17,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
<div v-show="changeBall === 4" class="morePlay_bifen_kesheng">
<!--左-->
<div class="bifen_left">
<span>客胜</span>
</div>
<!--右-->
<div class="bifen_right" v-if="football.scoreOddsList!=undefined">
<span v-if="football.scoreOddsList.length<=0" style="width: 100%;"><b>未开售</b></span>
<span v-if="index > 17" v-for="(b,index) in football.scoreOddsList" :key="index"
@tap="selectBtn(football,b,listIdx,childIdx,4)"
:class="{doubleW:index === 30,active:b.active}">
<b>{{bifenItems[index]}}</b>
<b :class="{active:b.active}">{{b.odds}}</b>
</span>
</div>
</div>
</div>
<!--取消/确定-->
<div class="morePlay_action">
<div @click="isShowMorePlay = false">取消</div>
<div @click="isShowMorePlay = false">确定</div>
</div>
</div>
</u-popup>
</div>
</view>
</template>
<script>
import {
footballWinEvenLoseList
} from '@/api/football.js'
import BuyFooterSport from '../common/buy-footer-sport.vue'
export default {
name: 'Soccer',
components: {
BuyFooterSport
},
data() {
return {
lassificationcList: [{
name: '混合过关'
}, {
name: '胜平负'
}, {
name: '让球胜平负'
}, {
name: '总进球'
}, {
name: '比分'
}, {
name: '半全场'
}],
bifenItems: ['1:0', '2:0', '2:1', '3:0', '3:1', '3:2', '4:0', '4:1', '4:2', '5:0', '5:1', '5:2', '胜其他',
'0:0', '1:1', '2:2', '3:3', '平其他', '0:1', '0:2', '1:2', '0:3', '1:3', '2:3', '0:4', '1:4', '2:4',
'0:5', '1:5', '2:5', '负其他'
],
bqcItems: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],
// 混合玩法-更多玩法
isShowMorePlay: false,
isShowCount: false,
changeBall: 0,
isChangeIcon: 0,
isShowGames: 0,
beidanList: [],
isMainShow: true,
football: {},
that: this,
listIdx: "",
childIdx: "",
count: "",
total: "",
selectItem: [],
}
},
filters: {
formatDate(data, that) {
if (null == data) {
return null;
}
return that.globalUtil.timeFormat(data)
},
},
onPullDownRefresh() {
this.fecthSoccerData();
setTimeout(function() {
uni.stopPullDownRefresh()
}, 500);
},
methods: {
/** 选中时改变当前单元格的背景颜色
* @param {Object} wk 当前比赛数据
* @param {Object} item 当前点击的数据
* @param {Object} weekIdx 上上级父级list的index
* @param {Object} index 上级父级list的index
* @param {Object} ,type 类型
*/
selectBtn(wk, item, weekIdx, index, type) {
if (type == 1) {
//不让球
this.beidanList[weekIdx].footballMatchList[index].notLetOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
} else if (type == 2) {
//让球
this.beidanList[weekIdx].footballMatchList[index].letOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
} else if (type == 3) {
//总进球
this.beidanList[weekIdx].footballMatchList[index].goalOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
} else if (type == 4) {
//比分
this.beidanList[weekIdx].footballMatchList[index].scoreOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
//标识是否选择了比分
this.$set(wk, 'scoreFlag', "false")
} else if (type == 5) {
//半全场
this.beidanList[weekIdx].footballMatchList[index].halfWholeOddsList.map(data => {
if (item.id == data.id) {
this.$set(data, "active", !item.active)
}
})
this.$set(wk, 'halfWholeFlag', "false")
}
//计算选中了几项
if (item.active) {
wk.choiceCount++;
} else {
wk.choiceCount--;
}
//获取选中的数据放入新的数组中
if (this.selectItem.length > 0) {
//标识是否在数组中是否存在
let flag = true
this.selectItem.map((d, idx) => {
//判断id 如果相同进行重新赋值 在将flag置为true
if (d.id == wk.id) {
flag = false
//如果都取消了判断选中项是否为零，为零就删除元素
if (d.choiceCount == 0) {
//index 当前元素索引；1：需要删除的元素个数
this.selectItem.splice(idx, 1);
}
//重新赋值数据
d = item;
}
})
//如果都不存在进行添加到数组中
if (flag) {
this.selectItem.push(wk)
}
} else {
//第一次数组为空的时候添加到数组中
this.selectItem.push(wk)
}
// this.isShowCount=true;
this.count = this.selectItem.length;
// this.total=2;
},
rightText() {
uni.navigateTo({
url: "pages/football/footballResult"
});
},
clean() {
this.count = "";
this.fecthSoccerData();
this.selectItem = []
},
analysis(url) {
if (url == null || url == "" || url == undefined) {
uni.showToast({
title: '暂无分析数据',
icon: 'none'
});
return;
}
uni.navigateTo({
url: "/pages/common/analysis?url=" + encodeURIComponent(url)
});
},
confirm() {
var count;
var flag = true;
this.selectItem.map((item) => {
//循环遍历是否是单关
if (item.isSingle == '1') {
//如果是单关并且让球不为空的清空下，看不让球有没有被选择，选择了就不是单关
if (item.notLetOddsList.length > 0) {
item.letOddsList.map(lets => {
if (lets.active) {
count = this.selectItem.length;
//用来标记是否是单关，传到下单也有用来判断是否有那个单关的下注选项
flag = false;
return;
}
})
}
} else {
//不是单关判断让球，非让球是否有选择数据
item.notLetOddsList.map(notLet => {
if (notLet.active) {
count = this.selectItem.length;
//用来标记是否是单关，传到下单也有用来判断是否有那个单关的下注选项
flag = false
return;
}
})
item.letOddsList.map(lets => {
if (lets.active) {
count = this.selectItem.length;
//用来标记是否是单关，传到下单也有用来判断是否有那个单关的下注选项
flag = false
return;
}
})
}
})
//如果不是单关,选中了让球或者非让球就需要校验场数，比赛是最低二场
if (count < 2 || this.selectItem.length <= 0) {
uni.showToast({
title: '至少选择二场比赛',
icon: 'none'
});
return;
}
if (this.selectItem.length > 8) {
uni.showToast({
title: '最多选择8场比赛',
icon: 'none'
});
return;
}
//总投注选项数不能超过20个
let selectCount = 0;
//每场相乘不能大于16
let rideCount = 1;
this.selectItem.some((map, idx) => {
selectCount += map.choiceCount
let a = 0;
map.letOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.notLetOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.goalOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.halfWholeOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
map.scoreOddsList.some(b => {
if (b.active) {
a++;
return true;
}
})
rideCount *= a;
})
if (selectCount > 20) {
uni.showToast({
title: '总投注选项数不能超过20个',
icon: 'none'
});
return;
}
if (rideCount > 16) {
uni.showToast({
title: '每场选择玩法数连乘不能超过16个',
icon: 'none'
});
return;
}
uni.navigateTo({
url: "pages/football/footballConfirm?obj=" + encodeURIComponent(JSON.stringify(this
.selectItem)) + "&flag=" + encodeURIComponent(flag)
});
},
// 获取竞彩足球数据
fecthSoccerData() {
uni.showLoading();
footballWinEvenLoseList().then(res => {
this.beidanList = res.voList
setTimeout(function() {
uni.hideLoading();
}, 50);
})
},
// 不同玩法对应投注
changeSelectBall(item) {
this.fecthSoccerData()
this.changeBall = item.index
this.selectItem = [];
this.count = "";
},
// 点击折叠条
clickBanner(index) {
if (this.isShowGames === index) {
this.isShowGames = index + 'a'
this.isChangeIcon = index + 'a'
} else {
this.isShowGames = index
this.isChangeIcon = index
}
},
// 点击打开更多玩法
morePlay(item, listIdx, childIdx) {
// 控制更多玩法显示
this.isShowMorePlay = true
this.football = item;
this.listIdx = listIdx
this.childIdx = childIdx
},
},
onLoad() {
this.fecthSoccerData()
}
}
</script>
<style scoped lang="scss">
/deep/.u-tag {
width: 45px;
height: 20px;
justify-content: center;
align-items: center;
}
/deep/.u-tag__text--medium {
font-size: 11px;
line-height: 11px;
}
page {
background-color: #f7f9fa;
}
/deep/.cmd-nav-bar-right-text {
font-size: 16px !important;
}
/deep/.u-empty {
margin-top: 50% !important;
}
.active {
background-color: #FF3F43 !important;
color: #fff !important;
}
.box {
padding-bottom: 0px;
}
.soccer_wrap {
.soccer_main {
background-color: #f7f9fa;
width: 100%;
padding-bottom: 10px;
/*混合过关*/
.soccer_hunheguoguan {
width: 100%;
padding-bottom: 10px;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
height: 30.66667vmin;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
/*box-sizing: border-box;*/
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
/*height: 100%;*/
box-sizing: border-box;
.right_title {
/*box-sizing: border-box;*/
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
b {
position: absolute;
left: 0;
top: -2vmin;
width: 3.73333vmin;
display: inline-block;
font-weight: 400;
font-size: 5.33333vmin;
-webkit-transform: scale(.5);
transform: scale(.5);
line-height: 1.2;
}
.title_team {
/*margin:0 auto;*/
font-size: 3.2vmin;
height: 35px;
font-weight: 700;
color: #5d5d5d;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
}
}
}
table {
width: 100%;
border: 1px solid #e6e6e6;
color: #333333;
tr {
td {
/*vertical-align: middle;*/
font-size: 3.46667vmin;
background-color: white;
}
.burangqiu {
border: none;
width: 3.73333vmin;
font-size: 2.93333vmin;
text-align: center;
background: #e6e6e6;
height: 9.6vmin;
vertical-align: middle
}
.rangqiu {
color: white;
border: none;
width: 3.73333vmin;
font-size: 2.93333vmin;
text-align: center;
background: #FF3F43;
height: 9.6vmin;
vertical-align: middle
}
.rangqiuBlue {
background: #2d8cf0;
}
.sheng_top {
height: 9.6vmin;
box-sizing: border-box;
border: 1px solid #e6e6e6;
font-size: 3.46667vmin;
text-align: center;
justify-content: center;
p {
display: flex;
align-items: center;
height: 100%;
box-sizing: border-box;
justify-content: center;
span {
width: 20.5vmin;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border-right: 1px solid #e6e6e6;
}
span:last-child {
border: none;
}
}
}
.morePlay {
width: 10.66667vmin;
font-size: 3.46667vmin;
text-align: center;
border: 1px solid #e6e6e6;
color: #999999;
vertical-align: middle;
line-height: 1.5;
}
}
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
/*胜平负\让球胜平负*/
.soccer_shengpingfu {
background-color: white;
width: 100%;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
padding: 3.2vmin 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
height: 25.33333vmin;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
/*height: 100%;*/
box-sizing: border-box;
width: 100%;
.right_title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
margin-bottom: 2.66667vmin;
font-size: 3.2vmin;
display: inline-block;
font-weight: 700;
color: #5d5d5d;
white-space: nowrap;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
color: #999;
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
}
}
}
table {
width: 100%;
border: 1px solid #e6e6e6;
color: #333333;
tr {
td {
/*vertical-align: middle;*/
font-size: 3.46667vmin;
background-color: white;
}
.sheng_top {
height: 11.73333vmin;
box-sizing: border-box;
border: 1px solid #e6e6e6;
font-size: 3.73333vmin;
text-align: center;
p {
display: flex;
align-items: center;
height: 100%;
box-sizing: border-box;
justify-content: center;
/*text-align: center;*/
.sheng_top_block {
width: 25.3vmin;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border-right: 1px solid #e6e6e6;
flex-direction: column;
span {
margin-bottom: .66667vmin;
}
span:last-child {
color: #666;
}
}
.sheng_top_block:last-child {
border: none;
}
}
}
}
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
/*总进球*/
.soccer_zongjinqiu {
background-color: white;
width: 100%;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
padding: 1.2vmin 0;
position: relative;
/*box-sizing: border-box;*/
display: flex;
align-items: center;
justify-content: flex-start;
height: 27.33333vmin;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
img {
position: absolute;
top: 0;
left: -11px;
width: 5.06667vmin;
height: 3.2vmin;
}
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
box-sizing: border-box;
.right_title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
margin-bottom: 2.66667vmin;
font-size: 3.2vmin;
display: inline-block;
font-weight: 700;
color: #5d5d5d;
white-space: nowrap;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
color: #999;
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
}
}
}
table {
width: 100%;
border: 1px solid #e6e6e6;
color: #333333;
border-bottom: none;
tr {
border: 1px solid #e6e6e6;
background-color: white;
td {
border-bottom: 1px solid #e6e6e6;
color: #666;
width: 20.73333vmin;
height: 7.73333vmin;
box-sizing: border-box;
font-size: 3.2vmin;
text-align: left;
border-right: 1px solid #e6e6e6;
vertical-align: middle;
span {
font-weight: 400;
b {
margin-right: 2vmin;
}
}
}
}
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
/*比分*/
.soccer_bifen {
background-color: white;
width: 100%;
.soccer_weekGame {
width: 100%;
/*比赛折叠条*/
.weekGame_banner {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4vmin;
height: 12.8vmin;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.banner_left {
span {
margin-left: 3.46667vmin;
font-size: 3.46667vmin;
}
}
i {
font-size: 5.26667vmin;
color: #c7c7c7;
/*transform: rotate(180deg);*/
}
.icon-jiantou2-change {
transform: rotate(180deg);
}
}
/*比赛*/
.weekGame_games {
width: 100%;
.games {
height: 27.33333vmin;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 2.66667vmin;
border-bottom: 1px solid #e6e6e6;
img {
position: absolute;
top: 0;
left: -11px;
width: 5.06667vmin;
height: 3.2vmin;
}
.games_left {
width: 15vmin;
height: 100%;
font-size: 2.93333vmin;
font-weight: 400;
margin-right: 2.4vmin;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
span {
text-overflow: ellipsis;
display: block;
margin-bottom: 1.8vmin;
white-space: nowrap;
}
}
.games_right {
width: 100vmin;
box-sizing: border-box;
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*隐藏后添加省略号*/
white-space: nowrap;
/*强制不换行*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
.right_title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
margin-bottom: 4.66667vmin;
display: inline-block;
font-weight: 700;
color: #5d5d5d;
white-space: nowrap;
font-size: 3.2vmin;
strong {
margin: 0 .66667vmin;
font-weight: 400;
}
em {
font-style: normal;
font-size: 2.4vmin;
font-weight: 400;
color: #999;
}
}
}
div {
box-sizing: border-box;
padding: 3.2vmin 0;
height: 9.6vmin;
width: 100%;
border: .26667vmin solid #e6e6e6;
background: #fff;
color: #666;
font-size: 3.46667vmin;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.games:last-child {
border: none;
}
}
}
.soccer_weekGame:last-child {
margin-bottom: 13.33333vmin;
}
}
.weekGame_games {
border-bottom: 1px solid #e6e6e6;
}
}
/*更多玩法*/
.morePlays {
/*height: 500px;*/
width: 100%;
.morePlay {
background-color: #F2F2F2;
width: 100%;
/*头部*/
h5 {
/*font-weight: bold;*/
font-size: 2.93333vmin;
width: 100%;
height: 9.33333vmin;
background: #fff;
margin-bottom: 2.13333vmin;
display: flex;
align-items: center;
justify-content: center;
span {
margin: 0 14.66667vmin;
font-weight: bold;
}
}
/*选择*/
.morePlay_select {
margin: 0 2.93333vmin;
font-size: 1.86667vmin;
/*混合*/
.morePlay_hunhe {
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
margin-bottom: 2.3vmin;
/*左*/
.hunhe_left {
span {
width: 6.9vmin;
height: 70rpx;
display: flex;
align-items: center;
justify-content: center;
}
.hunhe_left_top {
background-color: rgb(224, 224, 224);
}
.hunhe_left_bottom {
background-color: #19BE6B;
color: white;
}
}
/*右*/
.hunhe_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 9.1vmin;
width: 28.8vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
b:last-child {
color: #666;
}
b:first-child {
margin-right: 7vmin;
}
}
}
}
/*总进球*/
.morePlay_zongjinqiu {
margin-bottom: 2.3vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.zongjinqiu_left {
height: 21.13333vmin;
background-color: #34ccc3;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
.zongjinqiu_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
height: 18.13333vmin;
span {
background-color: white;
height: 18.13333vmin/2;
width: 21.5vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
b {
width: 21.5vmin/2;
display: flex;
justify-content: center;
em {
font-style: normal;
}
}
b:last-child {
color: #666;
}
}
}
}
/*半全场*/
.morePlay_banquanchang {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.banquanchang_left {
height: 27.06667vmin;
background-color: #36a8f8;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
.banquanchang_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 8.8vmin;
width: 28.8vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
b {
width: 28.82vmin/2;
display: flex;
justify-content: center;
margin-left: 10rpx;
}
b:last-child {
color: #666;
}
}
}
}
/*比分*/
.morePlay_bifen {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 54.13333vmin;
span {
background-color: #fbb52f;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
border-bottom: 2px solid #fff;
}
span:nth-child(1) {
background-color: #fbb52f;
height: 38%;
}
span:nth-child(2) {
background-color: #D52BB3;
height: 22%;
}
span:nth-child(3) {
background-color: #1cedf2;
height: 38%;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.19vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
/*比分-主胜*/
.morePlay_bifen_zhusheng {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 54.13333vmin/5*2;
background-color: #fbb52f;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.19vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
/*比分-平*/
.morePlay_bifen_ping {
margin-bottom: 2.13333vmin;
/*height: 18.13333vmin;*/
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 160rpx;
background-color: #5791F9;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.2vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
/*比分-客胜*/
.morePlay_bifen_kesheng {
margin-bottom: 2.13333vmin;
width: 100%;
font-size: 3.46667vmin;
color: #333333;
display: flex;
align-items: center;
/*左*/
.bifen_left {
height: 54.13333vmin/5*2;
background-color: #34ccc3;
span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
writing-mode: vertical-rl;
letter-spacing: .53333vmin;
font-size: 3.2vmin;
width: 6.9vmin;
color: white;
}
}
/*右*/
.bifen_right {
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
background-color: white;
height: 10.5vmin;
width: 12.19vmin;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
b:first-child {
margin-bottom: 1.6vmin;
}
b:last-child {
color: #666;
}
}
.doubleW {
width: 12.3vmin*2;
}
.treW {
width: 37vmin;
}
}
}
}
/*取消/确定*/
.morePlay_action {
width: 100%;
font-size: 4.26667vmin;
display: flex;
div {
width: 50%;
height: 11.73333vmin;
border-radius: 1.1vmin;
display: flex;
align-items: center;
justify-content: center;
}
div:first-child {
background: #ccc;
color: #333333;
}
div:last-child {
background-color: #FF3F43;
color: white;
}
}
}
}
}
</style>
大文件切片上传
一、实现大文件切片上传可以按照以下步骤进行操作
1. 切片文件：将大文件切成小片段，每个片段的大小可根据需求来确定。这可以通过使用File.slice()方法或其他相关方法来完成。
2. 创建上传接口：需要在后端创建一个用于接收切片上传的接口。这个接口需要能够接收切片文件并保存在服务器上，同时还需要记录每个切片的索引以及文件的唯一标识。
3. 切片上传顺序和重试机制：需要确保切片按照正确的顺序上传到服务器，并且在上传过程中出现错误时能够进行重试。可以使用Promise或async/await等方式来实现这个逻辑。
4. 服务器端逻辑：在服务器端，需要接收上传的切片文件并保存到临时位置。同时，还需要记录每个切片的索引和文件的唯一标识。当所有切片都上传完成后，可以将它们合并成完整的文件，并进行相应的处理。
二、切片的核心
定义了一个名为splitFileIntoChunks的函数，用于将文件切割为多个片段。函数接受两个参数：文件对象file和每个切片的大小chunkSize。函数首先获取文件的总大小fileSize，然后计算需要切割的切片数量chunks。接下来，使用一个循环将文件切割为多个切片，每个切片的起始位置start和结束位置end根据切片的索引计算得到。使用file.slice(start, end)方法从原文件中获取对应的切片，并将切片存储到fileChunks数组中。
function splitFileIntoChunks(file, chunkSize) {
const fileSize = file.size;
const chunks = Math.ceil(fileSize / chunkSize);
const fileChunks = [];
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, fileSize);
const chunk = file.slice(start, end);
fileChunks.push(chunk);
}
return fileChunks;
}三、以uniapp为例，实现一个简单的大文件切片上传
// 切片上传相关配置
const chunkSize = 1024 * 1024; // 每个切片的大小（这里设置为1MB）
let fileIndex = 0; // 当前切片索引
let totalChunks = 0; // 总切片数
let fileKey = ''; // 文件的唯一标识
let fileChunks = []; // 存储切片的数组
// 选择文件并开始上传
function chooseFile() {
uni.chooseFile({
success(res) {
const filePath = res.tempFilePaths[0];
uni.getFileInfo({
filePath,
success(fileInfo) {
// 计算切片数量
totalChunks = Math.ceil(fileInfo.size / chunkSize);
// 生成文件的唯一标识
fileKey = generateFileKey();
// 将文件切割为多个切片
splitFileIntoChunks(filePath);
// 开始上传第一个切片
uploadFile(fileChunks[fileIndex]);
},
fail(error) {
// 获取文件信息失败，进行错误处理
}
});
},
fail(error) {
// 选择文件失败，进行错误处理
}
});
}
// 将文件切割为多个切片
function splitFileIntoChunks(filePath) {
const fileSize = uni.getFileSystemManager().getFileInfo({
filePath
}).size;
fileChunks = [];
for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, fileSize);
const chunk = uni.getFileSystemManager().readFileSync(filePath, 'binary', start, end);
fileChunks.push(chunk);
}
}
// 上传切片
function uploadFile(chunk) {
const formData = {
fileKey,
index: fileIndex
};
uni.uploadFile({
url: 'your_upload_url', // 替换为你的上传接口地址
filePath: chunk,
name: 'file',
formData,
success(res) {
// 上传成功处理逻辑
if (res.statusCode === 200) {
const data = JSON.parse(res.data);
if (data.success) {
// 切片上传成功，继续上传下一片
fileIndex++;
if (fileIndex < totalChunks) {
uploadFile(fileChunks[fileIndex]);
} else {
// 所有切片上传完成，进行合并或其他处理
mergeChunks();
}
} else {
// 切片上传失败，进行错误处理
}
} else {
// 上传失败，进行错误处理
}
},
fail(error) {
// 上传失败，进行错误处理
}
});
}
// 切片合并或其他处理
function mergeChunks() {
// 所有切片上传完成后，进行切片合
// 其他处理逻辑
// ...
}
// 生成文件的唯一标识
function generateFileKey() {
// 根据需要生成文件的唯一标识，例如使用时间戳+随机字符串等方式
// 返回文件的唯一标识
}注意，切片的具体实现可能会因具体的需求和使用的上传方式而有所差异。上述示例仅提供了一个基本的切片函数，你可以根据自己的需要进行修改和调整。上述若有不对之处，欢迎小伙伴们留言讨论，希望以上内容能够帮助到你！
此外，若想查看更多面试题，往这里扫一扫
一、实现大文件切片上传可以按照以下步骤进行操作
1. 切片文件：将大文件切成小片段，每个片段的大小可根据需求来确定。这可以通过使用File.slice()方法或其他相关方法来完成。
2. 创建上传接口：需要在后端创建一个用于接收切片上传的接口。这个接口需要能够接收切片文件并保存在服务器上，同时还需要记录每个切片的索引以及文件的唯一标识。
3. 切片上传顺序和重试机制：需要确保切片按照正确的顺序上传到服务器，并且在上传过程中出现错误时能够进行重试。可以使用Promise或async/await等方式来实现这个逻辑。
4. 服务器端逻辑：在服务器端，需要接收上传的切片文件并保存到临时位置。同时，还需要记录每个切片的索引和文件的唯一标识。当所有切片都上传完成后，可以将它们合并成完整的文件，并进行相应的处理。
二、切片的核心
定义了一个名为splitFileIntoChunks的函数，用于将文件切割为多个片段。函数接受两个参数：文件对象file和每个切片的大小chunkSize。函数首先获取文件的总大小fileSize，然后计算需要切割的切片数量chunks。接下来，使用一个循环将文件切割为多个切片，每个切片的起始位置start和结束位置end根据切片的索引计算得到。使用file.slice(start, end)方法从原文件中获取对应的切片，并将切片存储到fileChunks数组中。
function splitFileIntoChunks(file, chunkSize) {
const fileSize = file.size;
const chunks = Math.ceil(fileSize / chunkSize);
const fileChunks = [];
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, fileSize);
const chunk = file.slice(start, end);
fileChunks.push(chunk);
}
return fileChunks;
}三、以uniapp为例，实现一个简单的大文件切片上传
// 切片上传相关配置
const chunkSize = 1024 * 1024; // 每个切片的大小（这里设置为1MB）
let fileIndex = 0; // 当前切片索引
let totalChunks = 0; // 总切片数
let fileKey = ''; // 文件的唯一标识
let fileChunks = []; // 存储切片的数组
// 选择文件并开始上传
function chooseFile() {
uni.chooseFile({
success(res) {
const filePath = res.tempFilePaths[0];
uni.getFileInfo({
filePath,
success(fileInfo) {
// 计算切片数量
totalChunks = Math.ceil(fileInfo.size / chunkSize);
// 生成文件的唯一标识
fileKey = generateFileKey();
// 将文件切割为多个切片
splitFileIntoChunks(filePath);
// 开始上传第一个切片
uploadFile(fileChunks[fileIndex]);
},
fail(error) {
// 获取文件信息失败，进行错误处理
}
});
},
fail(error) {
// 选择文件失败，进行错误处理
}
});
}
// 将文件切割为多个切片
function splitFileIntoChunks(filePath) {
const fileSize = uni.getFileSystemManager().getFileInfo({
filePath
}).size;
fileChunks = [];
for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, fileSize);
const chunk = uni.getFileSystemManager().readFileSync(filePath, 'binary', start, end);
fileChunks.push(chunk);
}
}
// 上传切片
function uploadFile(chunk) {
const formData = {
fileKey,
index: fileIndex
};
uni.uploadFile({
url: 'your_upload_url', // 替换为你的上传接口地址
filePath: chunk,
name: 'file',
formData,
success(res) {
// 上传成功处理逻辑
if (res.statusCode === 200) {
const data = JSON.parse(res.data);
if (data.success) {
// 切片上传成功，继续上传下一片
fileIndex++;
if (fileIndex < totalChunks) {
uploadFile(fileChunks[fileIndex]);
} else {
// 所有切片上传完成，进行合并或其他处理
mergeChunks();
}
} else {
// 切片上传失败，进行错误处理
}
} else {
// 上传失败，进行错误处理
}
},
fail(error) {
// 上传失败，进行错误处理
}
});
}
// 切片合并或其他处理
function mergeChunks() {
// 所有切片上传完成后，进行切片合
// 其他处理逻辑
// ...
}
// 生成文件的唯一标识
function generateFileKey() {
// 根据需要生成文件的唯一标识，例如使用时间戳+随机字符串等方式
// 返回文件的唯一标识
}注意，切片的具体实现可能会因具体的需求和使用的上传方式而有所差异。上述示例仅提供了一个基本的切片函数，你可以根据自己的需要进行修改和调整。上述若有不对之处，欢迎小伙伴们留言讨论，希望以上内容能够帮助到你！
此外，若想查看更多面试题，往这里扫一扫
个人全职工作，时间充裕，全职接单！！！~~
十年前端，app，web端，小程序，全栈经验，这方面的软件开发的比较多，有相关案例，时间充裕，诚心合作，个人全职工作，uniapp 做过很多，并成功上架，日活过千，十分熟练，有需要请联系我 QQ：2981739544
十年前端，app，web端，小程序，全栈经验，这方面的软件开发的比较多，有相关案例，时间充裕，诚心合作，个人全职工作，uniapp 做过很多，并成功上架，日活过千，十分熟练，有需要请联系我 QQ：2981739544
每日互动（个推）CTO叶新江：AIGC时代，大模型推动数据要素商业化
ChatGPT在一夜之间火爆互联网，让AIGC受到世界范围内的高度关注。时至今日，AIGC热度持续高涨，各大互联网公司争相布局这一领域。日渐成熟的技术、显著的降本增效优势以及日益增长的市场需求等因素，已经推动AIGC成为互联网公司新一轮必争之地。
在近期举行的2023数据安全发展大会·数据智能安全与发展论坛上，每日互动（个推）CTO叶新江先生围绕AIGC时代下大模型给大数据企业带来的机遇与挑战进行了深入分享。
图：每日互动（个推）CTO叶新江在数据智能安全与发展论坛上分享AIGC话题
大模型将推动数据要素商业化
上世纪90年代开始，随着大规模集成电路、芯片技术的突破，个人电脑进入了千家万户。个人电脑能为大家所广泛使用，还有一个核心原因就是，操作系统的出现大大降低了人们操作电脑的难度。也有人将LLM基础下AIGC技术的突破看作是智能操作系统的迭代，认为其标志着多模态智能时代的来临。
犹如之前计算机、互联网的普及给整个人类社会带来巨大的生产和效率的提升，AIGC技术也将会改变人们工作、生活的范式，具有里程碑式的作用。它将整体提升人类的知识水平，而如何更好地使用各种“副驾驶”，将成为未来的竞争重心。实际上，在这样一个时代下，拓宽每个人的认知边界，“学问”（即“学习如何更好地问”）将成为更重要的能力。
对此，叶新江认为在VUCA时代，要突破生产效率，必须有新的能源或能量。而在数据要素市场，这个“能源+能量”就是“数据+智能”，即以数据要素结合人工智能为核心的多种技术的结合，从而能加速推动数据要素的商业化。
在数据智能领域，大模型可以以LLM作为核心思考能力，结合行业知识，来快速形成符合行业要求的解决方案，同时提升交互体验，提升智能化产品的开发效率。用户通过使用自然语言进行对话式交互，可以很方便地去加工和操作数据、理解和分解问题、构建和执行解决方案，智能化系统的使用门槛也因此大为降低。
叶新江做了一个生动的比喻，新出现的大模型相当于是一个全新的大脑，输出中枢能力，但它需要手和脚，才能和环境互动、反馈和优化，并完成各种具体的动作。每日互动从成立之初到现在，核心业务逻辑就是“DMP（Data-Machine-People）”，构成“数据积累-数据治理-数据应用”的业务闭环。每日互动以数据思维作为牵引，数据作为生产要素（D），通过大数据、云计算、机器学习等技术治理（M），以实际业务场景的应用为目标（P），实现和挖掘数据价值。通过每日互动打造的数据智能操作系统DiOS(Data Intelligence Operating System)，可以把“大脑”的能力输给各行各业使用。
垂直领域更需要“可控大模型”
在AIGC技术中，大模型的训练离不开大规模数据的“投喂”。通过与行业知识结合，大模型能从海量的数据中提取出有价值的信息，为业务决策提供智能支持。然而在实际应用中，叶新江认为这不足以满足具体的业务场景需求，垂直行业更需要“可控大模型”。
叶新江分享，每日互动一直专注数据智能领域，通过充分挖掘数据要素价值来赋能产业。大模型目前缺乏对价值观的判断，每日互动推行的是可控大模型在垂直领域里的应用。比如，中国（温州）数安港为数据安全和应用搭建了一个“港湾”，在数安港的大数据联合计算平台上，多方数据得以进行安全的融合计算，在合规、受控的环境内完成可控的应用，支撑复杂的业务场景实现安全高效的智能应用，优质的垂直数据未来就能在这样的大模型上发挥更大的价值。
叶新江举了一个例子，交警部门非常重视如何把交通高危的事故，特别是事故伤亡率降下来，可控大模型就可以解决这个问题。每日互动和交警部门通过大数据联合计算，首先进行数据洞察，识别出高危人群的特征；然后通过识别出来的特征去建模，对人群进行评级，最后把80%的资源放在前20%的高危人群，进行重点宣教，从而把伤亡率真正降下来，对人民群众的生命和财产安全有很大的提升。
AIGC有序监管正在逐步推进
技术之热必须面对法律之冷。当我们寄希望于AIGC成为新的经济增长点的同时，不得不面对一些由此带来的法律问题：如何对海量的AIGC进行监管？如何平衡AIGC生产过程中的数据利用和个人权益保护？
对此，叶新江表示，“数据作为生产要素，是跟AI结合产生智能以后，才能够发挥其真正的价值。利用大模型需要充分挖掘数据模型的能力，在此意义上，数据安全是利用大模型时必须考虑的问题。数据安全包括保护数据受控使用方面的安全以及数据内容本身是否是真实的、安全的。”
叶新江提到，4月份国家网信办发布了首个国家AIGC监管文件《生成式人工智能服务管理办法（征求意见稿）》，它对AIGC的合法性及权利归属在法律层面做出了明确界定，能够极大程度上消除市场主体的顾虑，进一步推动数字化技术领域的长足发展。
数据和网络安全是我们国家的重要保障，对于AIGC技术的快速发展，目前很多国内外顶尖的专家其实也存在看法上的分歧。
叶新江认为，在看到技术先进性一面的同时，我们也需要关注其另外一面。对于数据智能行业来说，“为大多数人提供美好的服务”是一个可以遵循的价值取向，每日互动还是会积极地去深入了解大模型的能力，更好地使用它，为客户创造更多的价值。在积极拥抱新技术和新趋势的同时，每日互动也将积极和行业各方协作，在保障数据安全的前提下，推动行业的有序发展。
ChatGPT在一夜之间火爆互联网，让AIGC受到世界范围内的高度关注。时至今日，AIGC热度持续高涨，各大互联网公司争相布局这一领域。日渐成熟的技术、显著的降本增效优势以及日益增长的市场需求等因素，已经推动AIGC成为互联网公司新一轮必争之地。
在近期举行的2023数据安全发展大会·数据智能安全与发展论坛上，每日互动（个推）CTO叶新江先生围绕AIGC时代下大模型给大数据企业带来的机遇与挑战进行了深入分享。
图：每日互动（个推）CTO叶新江在数据智能安全与发展论坛上分享AIGC话题
大模型将推动数据要素商业化
上世纪90年代开始，随着大规模集成电路、芯片技术的突破，个人电脑进入了千家万户。个人电脑能为大家所广泛使用，还有一个核心原因就是，操作系统的出现大大降低了人们操作电脑的难度。也有人将LLM基础下AIGC技术的突破看作是智能操作系统的迭代，认为其标志着多模态智能时代的来临。
犹如之前计算机、互联网的普及给整个人类社会带来巨大的生产和效率的提升，AIGC技术也将会改变人们工作、生活的范式，具有里程碑式的作用。它将整体提升人类的知识水平，而如何更好地使用各种“副驾驶”，将成为未来的竞争重心。实际上，在这样一个时代下，拓宽每个人的认知边界，“学问”（即“学习如何更好地问”）将成为更重要的能力。
对此，叶新江认为在VUCA时代，要突破生产效率，必须有新的能源或能量。而在数据要素市场，这个“能源+能量”就是“数据+智能”，即以数据要素结合人工智能为核心的多种技术的结合，从而能加速推动数据要素的商业化。
在数据智能领域，大模型可以以LLM作为核心思考能力，结合行业知识，来快速形成符合行业要求的解决方案，同时提升交互体验，提升智能化产品的开发效率。用户通过使用自然语言进行对话式交互，可以很方便地去加工和操作数据、理解和分解问题、构建和执行解决方案，智能化系统的使用门槛也因此大为降低。
叶新江做了一个生动的比喻，新出现的大模型相当于是一个全新的大脑，输出中枢能力，但它需要手和脚，才能和环境互动、反馈和优化，并完成各种具体的动作。每日互动从成立之初到现在，核心业务逻辑就是“DMP（Data-Machine-People）”，构成“数据积累-数据治理-数据应用”的业务闭环。每日互动以数据思维作为牵引，数据作为生产要素（D），通过大数据、云计算、机器学习等技术治理（M），以实际业务场景的应用为目标（P），实现和挖掘数据价值。通过每日互动打造的数据智能操作系统DiOS(Data Intelligence Operating System)，可以把“大脑”的能力输给各行各业使用。
垂直领域更需要“可控大模型”
在AIGC技术中，大模型的训练离不开大规模数据的“投喂”。通过与行业知识结合，大模型能从海量的数据中提取出有价值的信息，为业务决策提供智能支持。然而在实际应用中，叶新江认为这不足以满足具体的业务场景需求，垂直行业更需要“可控大模型”。
叶新江分享，每日互动一直专注数据智能领域，通过充分挖掘数据要素价值来赋能产业。大模型目前缺乏对价值观的判断，每日互动推行的是可控大模型在垂直领域里的应用。比如，中国（温州）数安港为数据安全和应用搭建了一个“港湾”，在数安港的大数据联合计算平台上，多方数据得以进行安全的融合计算，在合规、受控的环境内完成可控的应用，支撑复杂的业务场景实现安全高效的智能应用，优质的垂直数据未来就能在这样的大模型上发挥更大的价值。
叶新江举了一个例子，交警部门非常重视如何把交通高危的事故，特别是事故伤亡率降下来，可控大模型就可以解决这个问题。每日互动和交警部门通过大数据联合计算，首先进行数据洞察，识别出高危人群的特征；然后通过识别出来的特征去建模，对人群进行评级，最后把80%的资源放在前20%的高危人群，进行重点宣教，从而把伤亡率真正降下来，对人民群众的生命和财产安全有很大的提升。
AIGC有序监管正在逐步推进
技术之热必须面对法律之冷。当我们寄希望于AIGC成为新的经济增长点的同时，不得不面对一些由此带来的法律问题：如何对海量的AIGC进行监管？如何平衡AIGC生产过程中的数据利用和个人权益保护？
对此，叶新江表示，“数据作为生产要素，是跟AI结合产生智能以后，才能够发挥其真正的价值。利用大模型需要充分挖掘数据模型的能力，在此意义上，数据安全是利用大模型时必须考虑的问题。数据安全包括保护数据受控使用方面的安全以及数据内容本身是否是真实的、安全的。”
叶新江提到，4月份国家网信办发布了首个国家AIGC监管文件《生成式人工智能服务管理办法（征求意见稿）》，它对AIGC的合法性及权利归属在法律层面做出了明确界定，能够极大程度上消除市场主体的顾虑，进一步推动数字化技术领域的长足发展。
数据和网络安全是我们国家的重要保障，对于AIGC技术的快速发展，目前很多国内外顶尖的专家其实也存在看法上的分歧。
叶新江认为，在看到技术先进性一面的同时，我们也需要关注其另外一面。对于数据智能行业来说，“为大多数人提供美好的服务”是一个可以遵循的价值取向，每日互动还是会积极地去深入了解大模型的能力，更好地使用它，为客户创造更多的价值。在积极拥抱新技术和新趋势的同时，每日互动也将积极和行业各方协作，在保障数据安全的前提下，推动行业的有序发展。
支持多平台小程序的持续集成工具 uni-mini-ci
前言
在通常情况下，我们在将小程序部署到不同的小程序平台时需要按照平台分别创建构建的job，而更传统的发布方式需要开发者手动操作，费时费力，容易出错，而我们开发的uni-mini-ci就是为了解决这些痛点，它可以一次配置发布到多端，自动打包上传，大大提高了开发效率，减少了出错的可能性，也解决了开发者需要分别对接各平台小程序CI工具的问题。
介绍
uni-mini-ci是一款支持微信、钉钉、支付宝、企业微信等小程序平台的持续集成工具。它的最大特点是一次配置发布到多端，让开发者可以轻松地将应用程序发布到多个小程序平台上。
使用uni-mini-ci，开发者只需要在配置文件中指定需要发布的小程序平台，然后在命令行中执行发布命令即可。uni-mini-ci会自动将应用程序打包并上传到指定的小程序平台上，无需手动操作。
总之，如果您需要将应用程序发布到多个小程序平台上，uni-mini-ci是一个非常不错的选择。它简单易用，功能强大，可以大大提高开发效率。如果您还没有尝试过，不妨试一试。
安装
yarn add uni-mini-ci -D配置
配置信息见插件
插件地址
文章地址
前言
在通常情况下，我们在将小程序部署到不同的小程序平台时需要按照平台分别创建构建的job，而更传统的发布方式需要开发者手动操作，费时费力，容易出错，而我们开发的uni-mini-ci就是为了解决这些痛点，它可以一次配置发布到多端，自动打包上传，大大提高了开发效率，减少了出错的可能性，也解决了开发者需要分别对接各平台小程序CI工具的问题。
介绍
uni-mini-ci是一款支持微信、钉钉、支付宝、企业微信等小程序平台的持续集成工具。它的最大特点是一次配置发布到多端，让开发者可以轻松地将应用程序发布到多个小程序平台上。
使用uni-mini-ci，开发者只需要在配置文件中指定需要发布的小程序平台，然后在命令行中执行发布命令即可。uni-mini-ci会自动将应用程序打包并上传到指定的小程序平台上，无需手动操作。
总之，如果您需要将应用程序发布到多个小程序平台上，uni-mini-ci是一个非常不错的选择。它简单易用，功能强大，可以大大提高开发效率。如果您还没有尝试过，不妨试一试。
安装
yarn add uni-mini-ci -D配置
配置信息见插件
插件地址
文章地址
收起阅读 »
vscode编辑器内uniapp代码块一键生成
打开vscode设置，选择用户代码片段，选择搜索框中的vue.json，将附件中的代码导入，保存。新建uniapp的vue页面，输入uniapp，即可一键生成代码结构。
打开vscode设置，选择用户代码片段，选择搜索框中的vue.json，将附件中的代码导入，保存。新建uniapp的vue页面，输入uniapp，即可一键生成代码结构。
