uni-app框架安卓记牌器小软件
全部代码可直接使用
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view >
<view class="uni-container">
<uni-table ref="table" :loading="loading" border stripe >
<uni-tr>
<uni-th width="50" align="center"><button type="primary"size="mini" @click="chongzhi()" >R</button></uni-th>
<uni-th width="100" align="center">本方</uni-th>
<uni-th width="100" align="center">下方</uni-th>
<uni-th width="100" align="center">对方</uni-th>
<uni-th width="100" align="center">上方</uni-th>
<uni-th width="100" align="center">合计</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td width="80" >{{item.name}}</uni-td>
<uni-td align="center" >
<uni-number-box :value="item.bf_num" :min="0" :max="item.bf_max" @change="changebf(index, $event)"/>
</uni-td>
<uni-td align="center">
<uni-number-box :value="item.xf_num" :min="0" :max="item.xf_max" @change="changexf(index, $event)" />
</uni-td>
<uni-td align="center">
<uni-number-box :value="item.df_num" :min="0" :max="item.df_max" @change="changedf(index, $event)"/>
</uni-td>
<uni-td align="center">
<uni-number-box :value="item.sf_num" :min="0" :max="item.sf_max" @change="changesf(index, $event)" />
</uni-td>
<uni-td align="center">
<view>{{item.hj_num}}</view>
</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</view>
</template>
<script>
// import tableData from './tableData.js'
export default {
data() {
return {
searchVal: '',
tableData: [],
// 每页数据量
pageSize: 10,
// 当前页
pageCurrent: 1,
// 数据总量
total: 0,
loading: false,
}
},
onLoad() {
this.selectedIndexs = [];
this.getData();
},
methods: {
//扫码后确认
chongzhi(){
this.getData();
},
changebf(index, event) {
this.tableData[index].bf_num = event;
var t_list=this.tableData;
var zz=0;
for(var j=0;j<t_list.length;j++){
var obj=t_list[j];
var zz=0;
zz=obj.bf_num+obj.xf_num+obj.df_num+obj.sf_num;
if(j==0){
if(zz==4){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=4;
obj.xf_max=4;
obj.df_max=4;
obj.sf_max=4;
}
obj.hj_num=4-zz;
}else{
if(zz==8){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=8;
obj.xf_max=8;
obj.df_max=8;
obj.sf_max=8;
}
obj.hj_num=8-zz;
}
}
this.$forceUpdate();
},
changexf(index, event) {
this.tableData[index].xf_num = event;
var t_list=this.tableData;
var zz=0;
for(var j=0;j<t_list.length;j++){
var obj=t_list[j];
var zz=0;
zz=obj.bf_num+obj.xf_num+obj.df_num+obj.sf_num;
if(j==0){
if(zz==4){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=4;
obj.xf_max=4;
obj.df_max=4;
obj.sf_max=4;
}
obj.hj_num=4-zz;
}else{
if(zz==8){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=8;
obj.xf_max=8;
obj.df_max=8;
obj.sf_max=8;
}
obj.hj_num=8-zz;
}
}
this.$forceUpdate();
},
changedf(index, event) {
this.tableData[index].df_num = event;
var t_list=this.tableData;
var zz=0;
for(var j=0;j<t_list.length;j++){
var obj=t_list[j];
var zz=0;
zz=obj.bf_num+obj.xf_num+obj.df_num+obj.sf_num;
if(j==0){
if(zz==4){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=4;
obj.xf_max=4;
obj.df_max=4;
obj.sf_max=4;
}
obj.hj_num=4-zz;
}else{
if(zz==8){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=8;
obj.xf_max=8;
obj.df_max=8;
obj.sf_max=8;
}
obj.hj_num=8-zz;
}
}
this.$forceUpdate();
},
changesf(index, event) {
this.tableData[index].sf_num = event;
var t_list=this.tableData;
var zz=0;
for(var j=0;j<t_list.length;j++){
var obj=t_list[j];
var zz=0;
zz=obj.bf_num+obj.xf_num+obj.df_num+obj.sf_num;
if(j==0){
if(zz==4){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=4;
obj.xf_max=4;
obj.df_max=4;
obj.sf_max=4;
}
obj.hj_num=4-zz;
}else{
if(zz==8){
obj.bf_max=obj.bf_num;
obj.xf_max=obj.xf_num;
obj.df_max=obj.df_num;
obj.sf_max=obj.sf_num;
}else{
obj.bf_max=8;
obj.xf_max=8;
obj.df_max=8;
obj.sf_max=8;
}
obj.hj_num=8-zz;
}
}
this.$forceUpdate();
},
// 获取数据
getData() {
for(var j=0;j<7;j++){
var obj={};
if(j==0){obj.name="大小王";}
else if(j==1){obj.name="2";}
else if(j==2){obj.name="A";}
else if(j==3){obj.name="K";}
else if(j==4){obj.name="Q";}
else if(j==5){obj.name="10";}
else if(j==6){obj.name="5";}
if(j==0){
obj.hj_num=4;
obj.bf_max=4;
obj.xf_max=4;
obj.df_max=4;
obj.sf_max=4;
}else{
obj.hj_num=8;
obj.bf_max=8;
obj.xf_max=8;
obj.df_max=8;
obj.sf_max=8;
}
obj.bf_num=0;
obj.xf_num=0;
obj.df_num=0;
obj.sf_num=0;
this.tableData[j]=obj;
}
},
}
}
</script>
<style>
.uni-group {
display: flex;
align-items: center;
}
</style>
pages.json代码
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页",
"navigationBarBackgroundColor": "#ADD8E6"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"pageOrientation": "auto"//自动横屏
},
"uniIdRouter": {}
}
最终展示