pc游戏 空挡接龙 还不完整。现在没时间搞了记录在这里，等以后有时间了再继续搞。
<template>
<view class="page_main">
<view class="contentone">
<canvas class="canvas_cla" style="z-index: 1;" canvas-id="myCanvas" id="myCanvas"></canvas>
</view>
<view class="contentone">
<canvas class="canvas_cla" style="z-index: 1;" canvas-id="myCanvasa" id="myCanvasa" @touchstart="touchstart"
@touchend="touchend" @touchmove="touchmove"></canvas>
</view>
<!-- <view class="zhezhao" v-if="isshowstart">
<view class="dialog_back">
<cover-view class="add_button_ef" style=" color: #07a5a6;" @tap.stop.prevent="start_zhezhao">
开始
</cover-view>
<cover-view class="add_button_ef" style="color: #07a5a6;" @tap.stop.prevent="back_zhezhao">
返回
</cover-view>
</view>
</view> -->
<view class="button_main_view" style="z-index: 99;">
<view @click="tx_click" class="button_view">
提示
</view>
<view @tap="cwbj_click" class="button_view">
重玩本局
</view>
<view @tap="xkyj_click" class="button_view">
新开一局
</view>
<view @click="ct_click" class="button_view">
撤退
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isshowstart: true,
canvaswidth: 0,
canvasheight: 0,
ctx: null, // canvas 上下文
ctxtwo: null,
top_one: [],
top_two: [],
top_three: [],
top_four: [],
home_one_list: [],
home_two_list: [],
home_three_list: [],
home_four_list: [],
one_list: [],
two_list: [],
three_list: [],
four_list: [],
five_list: [],
six_list: [],
seven_list: [],
eight_list: [],
all_list: [],
movelist: {
qupai: []
},
buzhoulist: [],
positioncount: 5,
txings: [],
tixingid: 0,
};
},
onLoad() {
},
onReady() {
this.ctx = uni.createCanvasContext('myCanvas');
this.ctxtwo = uni.createCanvasContext('myCanvasa');
let canvas = uni.createSelectorQuery().select('#myCanvas');
canvas.boundingClientRect(rect => {
this.canvaswidth = rect.width
this.canvasheight = rect.height
this.makecars()
}).exec();
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
methods: {
tx_click: function() {
// console.log(JSON.stringify(this.txings))
let bean = this.txings[this.tixingid]
console.log(JSON.stringify(bean))
if (this.tixingid < this.txings.length - 1) {
this.tixingid++
} else {
this.tixingid = 0
}
let txqpcard = bean.cards
let txfpcard = this.gettxfpxy(bean.to)
this.biaoji(txfpcard, txqpcard)
},
biaoji: function(txfpcard, txqpcard) {
// 可以提醒 绘制提醒框
console.log("放牌位置", JSON.stringify(txfpcard))
console.log("取牌位置", JSON.stringify(txqpcard))
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#f00'); // 设置矩形框颜色为红色
this.ctxtwo.setLineWidth(2); // 设置矩形框线宽
this.ctxtwo.rect(txfpcard.x, txfpcard.starty, 40, 50);
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
let fromx
let fromy
let fromw
let fromh
fromx = txqpcard[0].x
fromy = txqpcard[0].starty
fromw = 40
fromh = txqpcard[txqpcard.length - 1].endy - fromy
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#ff0'); // 设置矩形框颜色为红色
this.ctxtwo.rect(fromx, fromy, fromw, fromh);
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
this.ctxtwo.draw()
},
gettxfpxy: function(index) {
let bean = {}
switch (index) {
case 1:
if (this.one_list.length > 0) {
bean = this.one_list[this.one_list.length - 1]
} else {
bean.x = 10
bean.starty = 60
bean.endx = 10 + 40
bean.endy = 60 + 50
}
break
case 2:
if (this.two_list.length > 0) {
bean = this.two_list[this.two_list.length - 1]
} else {
bean.x = 54
bean.starty = 60
bean.endx = 54 + 40
bean.endy = 60 + 50
}
break
case 3:
if (this.three_list.length > 0) {
bean = this.three_list[this.three_list.length - 1]
} else {
bean.x = 98
bean.starty = 60
bean.endx = 98 + 40
bean.endy = 60 + 50
}
break
case 4:
if (this.four_list.length > 0) {
bean = this.four_list[this.four_list.length - 1]
} else {
bean.x = 142
bean.starty = 60
bean.endx = 142 + 40
bean.endy = 60 + 50
}
break
case 5:
if (this.five_list.length > 0) {
bean = this.five_list[this.five_list.length - 1]
} else {
bean.x = 186
bean.starty = 60
bean.endx = 186 + 40
bean.endy = 60 + 50
}
break
case 6:
if (this.six_list.length > 0) {
bean = this.six_list[this.six_list.length - 1]
} else {
bean.x = 230
bean.starty = 60
bean.endx = 230 + 40
bean.endy = 60 + 50
}
break
case 7:
if (this.seven_list.length > 0) {
bean = this.seven_list[this.seven_list.length - 1]
} else {
bean.x = 274
bean.starty = 60
bean.endx = 274 + 40
bean.endy = 60 + 50
}
break
case 8:
if (this.eight_list.length > 0) {
bean = this.eight_list[this.eight_list.length - 1]
} else {
bean.x = 318
bean.starty = 60
bean.endx = 318 + 40
bean.endy = 60 + 50
}
break
case 9:
bean.x = 2
bean.starty = 0
bean.endx = 40
bean.endy = 50
break
case 10:
bean.x = 42
bean.starty = 0
bean.endx = 40
bean.endy = 50
break
case 11:
bean.x = 82
bean.starty = 0
bean.endx = 40
bean.endy = 50
break
case 12:
bean.x = 122
bean.starty = 0
bean.endx = 40
bean.endy = 50
break
}
return bean
},
txstart: function() {
this.txings = []
for (var i = this.positioncount; i > 0; i--) {
console.log("txstart", i)
this.txqup(i)
}
},
duibierji: function(txcard, data, size, from, to) {
let txing = {}
if (data.length == 0) {
txing.from = from
txing.to = to
txing.cards = txcard
this.txings.push(txing)
} else {
let beans = [data[data.length - 1]]
let arr = beans.concat(txcard)
console.log(from, to, JSON.stringify(arr))
if (this.txqppd(arr)) {
txing.from = from
txing.to = to
txing.cards = txcard
this.txings.push(txing)
}
}
},
duibi: function(txcard, size, from) {
for (var i = 1; i <= 12; i++) {
switch (i) {
case 1:
this.duibierji(txcard, this.one_list, size, from, 1)
break
case 2:
this.duibierji(txcard, this.two_list, size, from, 2)
break
case 3:
this.duibierji(txcard, this.three_list, size, from, 3)
break
case 4:
this.duibierji(txcard, this.four_list, size, from, 4)
break
case 5:
this.duibierji(txcard, this.five_list, size, from, 5)
break
case 6:
this.duibierji(txcard, this.six_list, size, from, 6)
break
case 7:
this.duibierji(txcard, this.seven_list, size, from, 7)
break
case 8:
this.duibierji(txcard, this.eight_list, size, from, 8)
break
case 9:
if (size == 1) {
this.duibierji(txcard, this.top_one, size, from, 9)
}
break
case 10:
if (size == 1) {
this.duibierji(txcard, this.top_two, size, from, 10)
}
break
case 11:
if (size == 1) {
this.duibierji(txcard, this.top_three, size, from, 11)
}
break
case 12:
if (size == 1) {
this.duibierji(txcard, this.top_four, size, from, 12)
}
break
}
}
},
txqup: function(size) {
for (var i = 1; i <= 12; i++) {
switch (i) {
case 1:
if (this.one_list.length >= size) {
let subArray = this.one_list.slice(this.one_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 1)
}
}
break
case 2:
if (this.two_list.length >= size) {
let subArray = this.two_list.slice(this.two_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 2)
}
}
break
case 3:
if (this.three_list.length >= size) {
let subArray = this.three_list.slice(this.three_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 3)
}
}
break
case 4:
if (this.four_list.length >= size) {
let subArray = this.four_list.slice(this.four_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 4)
}
}
break
case 5:
if (this.five_list.length >= size) {
let subArray = this.five_list.slice(this.five_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 5)
}
}
break
case 6:
if (this.six_list.length >= size) {
let subArray = this.six_list.slice(this.six_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 6)
}
}
break
case 7:
if (this.seven_list.length >= size) {
let subArray = this.seven_list.slice(this.seven_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 7)
}
}
break
case 8:
if (this.eight_list.length >= size) {
let subArray = this.eight_list.slice(this.eight_list.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 8)
}
}
break
case 9:
if (this.top_one.length >= size) {
let subArray = this.top_one.slice(this.top_one.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 9)
}
}
break
case 10:
if (this.top_two.length >= size) {
let subArray = this.top_two.slice(this.top_two.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 10)
}
}
break
case 11:
if (this.top_three.length >= size) {
let subArray = this.top_three.slice(this.top_three.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 11)
}
}
break
case 12:
if (this.top_four.length >= size) {
let subArray = this.top_four.slice(this.top_four.length - size);
if (this.txqppd(subArray)) {
this.duibi(subArray, size, 12)
}
}
break
}
}
},
txqppd: function(qpwz) {
//判断是否提醒
let arr = qpwz
if (arr.length == 1) {
return true
} else if (arr.length == 0) {
return false
}
for (var i = 0; i <= arr.length - 2; i++) {
if (arr[i].flower == arr[i + 1].flower) {
// console.log("取牌不是差色")
return false
}
}
if (arr[0].value - arr[arr.length - 1].value != arr.length - 1) {
// console.log("取牌不是是顺子", arr.length)
return false
}
return true
},
ct_click: function() {
if (this.buzhoulist.length == 0) {
console.log("没有移动的")
this.getpositioncount()
return
}
var bz = this.buzhoulist[this.buzhoulist.length - 1]
if (bz.from == bz.to) {
this.buzhoulist.splice(this.buzhoulist.length - 1, 1);
this.getpositioncount()
return
}
this.buzhoulist.splice(this.buzhoulist.length - 1, 1);
this.ctfp(bz.from, bz.qupai)
this.ctqp(bz.to, bz.qupai)
this.getpositioncount()
this.drawpai()
},
/**
* @param {Object} to 放到哪里去
* @param {Object} cardlist 要放那些card
*/
ctfp: function(to, cardlist) {
for (var i = 0; i < cardlist.length; i++) {
switch (to * 1) {
case 1:
this.one_list.push(cardlist[i])
break;
case 2:
this.two_list.push(cardlist[i])
break;
case 3:
this.three_list.push(cardlist[i])
break;
case 4:
this.four_list.push(cardlist[i])
break;
case 5:
this.five_list.push(cardlist[i])
break;
case 6:
this.six_list.push(cardlist[i])
break;
case 7:
this.seven_list.push(cardlist[i])
break;
case 8:
this.eight_list.push(cardlist[i])
break;
case 9:
this.top_one = cardlist[i]
break;
case 10:
this.top_two = cardlist[i]
break;
case 11:
this.top_three = cardlist[i]
break;
case 12:
this.top_four = cardlist[i]
break;
case 13:
this.home_one_list.push(cardlist[i])
break;
case 14:
this.home_two_list.push(cardlist[i])
break;
case 15:
this.home_three_list.push(cardlist[i])
break;
case 16:
this.home_four_list.push(cardlist[i])
break;
}
}
},
/**
* @param {Object} cardlist 要取走那些
* @param {Object} from 从哪里取
*/
ctqp: function(from, cardlist) {
for (var i = 0; i < cardlist.length; i++) {
switch (from * 1) {
case 1:
this.one_list.splice(this.one_list.length - 1, 1)
break;
case 2:
this.two_list.splice(this.two_list.length - 1, 1)
break;
case 3:
this.three_list.splice(this.three_list.length - 1, 1)
break;
case 4:
this.four_list.splice(this.four_list.length - 1, 1)
break;
case 5:
this.five_list.splice(this.five_list.length - 1, 1)
break;
case 6:
this.six_list.splice(this.six_list.length - 1, 1)
break;
case 7:
this.seven_list.splice(this.seven_list.length - 1, 1)
break;
case 8:
this.eight_list.splice(this.eight_list.length - 1, 1)
break;
case 9:
this.top_one = []
break;
case 10:
this.top_two = []
break;
case 11:
this.top_three = []
break;
case 12:
this.top_four = []
break;
case 13:
this.home_one_list.splice(this.home_one_list.length - 1, 1)
break;
case 14:
this.home_two_list.splice(this.home_two_list.length - 1, 1)
break;
case 15:
this.home_three_list.splice(this.home_three_list.length - 1, 1)
break;
case 16:
this.home_four_list.splice(this.home_four_list.length - 1, 1)
break;
}
}
},
cwbj_click: function() {
this.top_one = []
this.top_two = []
this.top_three = []
this.top_four = []
this.home_one_list = []
this.home_two_list = []
this.home_three_list = []
this.home_four_list = []
this.one_list = []
this.two_list = []
this.three_list = []
this.four_list = []
this.five_list = []
this.six_list = []
this.seven_list = []
this.eight_list = []
this.movelist = {
qupai: []
}
this.buzhoulist = []
this.fapai()
},
xkyj_click: function() {
this.top_one = []
this.top_two = []
this.top_three = []
this.top_four = []
this.home_one_list = []
this.home_two_list = []
this.home_three_list = []
this.home_four_list = []
this.one_list = []
this.two_list = []
this.three_list = []
this.four_list = []
this.five_list = []
this.six_list = []
this.seven_list = []
this.eight_list = []
this.all_list = []
this.movelist = {
qupai: []
}
this.buzhoulist = []
this.makecars()
},
/**
* 触摸屏幕开始 记录开始坐标
*/
touchstart: function(e) {
let startx = e.touches[0].x
let starty = e.touches[0].y
console.log("startx", startx)
console.log("starty", starty)
let postion = this.jspostion(startx, starty)
this.qupai(postion, startx, starty)
},
pdqpsfcg: function() {
var arr = this.movelist.qupai
if (arr.length > this.positioncount) {
return false
}
for (var i = 0; i <= arr.length - 2; i++) {
if (arr[i].flower == arr[i + 1].flower) {
console.log("取牌不是差色")
return false
}
}
if (arr[0].value - arr[arr.length - 1].value == arr.length - 1) {
console.log("取牌是顺子")
return true
} else {
console.log("取牌不是顺子")
this.movelist = []
return false
}
},
drawqp: function(startx, starty) {
var arr = this.movelist.qupai
for (var i = 0; i < arr.length; i++) {
this.ctxtwo.drawImage('./static/' + arr[i].zpcolor + '.png', startx, starty + i * 30, 40,
50); // 绘制图片
}
this.ctxtwo.draw()
},
qupai: function(postions, startx, starty) {
if (postions.length == 1) {
return
}
if (postions[0] < 0 && postions[1] < 0) {
return
}
switch (postions[0] * 1) {
case 1:
for (var i = postions[1] * 1; i < this.one_list.length; i++) {
console.log(JSON.stringify(this.one_list[i]))
this.movelist.from = 1
this.movelist.qupai.push(this.one_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.one_list.splice(postions[1] * 1, this.one_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 2:
for (var i = postions[1] * 1; i < this.two_list.length; i++) {
console.log(JSON.stringify(this.two_list[i]))
this.movelist.from = 2
this.movelist.qupai.push(this.two_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.two_list.splice(postions[1] * 1, this.two_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 3:
for (var i = postions[1] * 1; i < this.three_list.length; i++) {
console.log(JSON.stringify(this.three_list[i]))
this.movelist.from = 3
this.movelist.qupai.push(this.three_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.three_list.splice(postions[1] * 1, this.three_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 4:
for (var i = postions[1] * 1; i < this.four_list.length; i++) {
console.log(JSON.stringify(this.four_list[i]))
this.movelist.from = 4
this.movelist.qupai.push(this.four_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.four_list.splice(postions[1] * 1, this.four_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 5:
for (var i = postions[1] * 1; i < this.five_list.length; i++) {
console.log(JSON.stringify(this.five_list[i]))
this.movelist.from = 5
this.movelist.qupai.push(this.five_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.five_list.splice(postions[1] * 1, this.five_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 6:
for (var i = postions[1] * 1; i < this.six_list.length; i++) {
console.log(JSON.stringify(this.six_list[i]))
this.movelist.from = 6
this.movelist.qupai.push(this.six_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.six_list.splice(postions[1] * 1, this.six_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 7:
for (var i = postions[1] * 1; i < this.seven_list.length; i++) {
console.log(JSON.stringify(this.seven_list[i]))
this.movelist.from = 7
this.movelist.qupai.push(this.seven_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.seven_list.splice(postions[1] * 1, this.seven_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 8:
for (var i = postions[1] * 1; i < this.eight_list.length; i++) {
console.log(JSON.stringify(this.eight_list[i]))
this.movelist.from = 8
this.movelist.qupai.push(this.eight_list[i])
}
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.eight_list.splice(postions[1] * 1, this.eight_list.length - postions[1] * 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 9:
this.movelist.from = 9
this.movelist.qupai.push(this.top_one[0])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.top_one = []
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 10:
this.movelist.from = 10
this.movelist.qupai.push(this.top_two[0])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.top_two = []
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 11:
this.movelist.from = 11
this.movelist.qupai.push(this.top_three[0])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.top_three = []
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 12:
this.movelist.from = 12
this.movelist.qupai.push(this.top_four[0])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.top_four = []
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 13:
console.log(JSON.stringify(this.home_one_list[this.home_one_list.length - 1]))
this.movelist.from = 13
this.movelist.qupai.push(this.home_one_list[this.home_one_list.length - 1])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.home_one_list.splice(this.home_one_list.length - 1, 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 14:
console.log(JSON.stringify(this.home_two_list[this.home_two_list.length - 1]))
this.movelist.from = 14
this.movelist.qupai.push(this.home_two_list[this.home_two_list.length - 1])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.home_two_list.splice(this.home_two_list.length - 1, 1)
this.drawpai()
} else {
this.movelist = {
qupai: []
}
}
break
case 15:
console.log(JSON.stringify(this.home_three_list[this.home_three_list.length - 1]))
this.movelist.from = 14
this.movelist.qupai.push(this.home_three_list[this.home_three_list.length - 1])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.home_three_list.splice(this.home_three_list.length - 1, 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
case 16:
console.log(JSON.stringify(this.home_four_list[this.home_four_list.length - 1]))
this.movelist.from = 14
this.movelist.qupai.push(this.home_four_list[this.home_four_list.length - 1])
//判断是否取牌成功
// this.movelist
if (this.pdqpsfcg()) {
this.home_four_list.splice(this.home_four_list.length - 1, 1)
this.drawpai()
this.drawqp(startx, starty)
} else {
this.movelist = {
qupai: []
}
}
break
}
//判断是否取牌成功
},
jspostion: function(x, y) {
let postion = [-1, -1]
if (y > 60) {
if (x > 10 && x < 50) {
postion[0] = 1
for (var i = 0; i < this.one_list.length; i++) {
console.log("this.one_list[i].starty", this.one_list[i].starty)
console.log("y", y)
if (y > this.one_list[i].starty && y < this.one_list[i].endy) {
postion[1] = i
}
}
} else if (x > 50 & x < 94) {
postion[0] = 2
for (var i = 0; i < this.two_list.length; i++) {
if (y > this.two_list[i].starty && y < this.two_list[i].endy) {
postion[1] = i
}
}
} else if (x > 98 & x < 138) {
postion[0] = 3
for (var i = 0; i < this.three_list.length; i++) {
if (y > this.three_list[i].starty && y < this.three_list[i].endy) {
postion[1] = i
}
}
} else if (x > 142 & x < 182) {
postion[0] = 4
for (var i = 0; i < this.four_list.length; i++) {
if (y > this.four_list[i].starty && y < this.four_list[i].endy) {
postion[1] = i
}
}
} else if (x > 186 & x < 226) {
postion[0] = 5
for (var i = 0; i < this.five_list.length; i++) {
if (y > this.five_list[i].starty && y < this.five_list[i].endy) {
postion[1] = i
}
}
} else if (x > 230 & x < 270) {
postion[0] = 6
for (var i = 0; i < this.six_list.length; i++) {
if (y > this.six_list[i].starty && y < this.six_list[i].endy) {
postion[1] = i
}
}
} else if (x > 274 & x < 314) {
postion[0] = 7
for (var i = 0; i < this.seven_list.length; i++) {
if (y > this.seven_list[i].starty && y < this.seven_list[i].endy) {
postion[1] = i
}
}
} else if (x > 318 & x < 358) {
postion[0] = 8
for (var i = 0; i < this.eight_list.length; i++) {
if (y > this.eight_list[i].starty && y < this.eight_list[i].endy) {
postion[1] = i
}
}
}
} else {
if (x > 2 && x < 42) {
postion = [9, 1]
}
if (x > 42 && x < 82) {
postion = [10, 1]
}
if (x > 82 && x < 122) {
postion = [11, 1]
}
if (x > 122 && x < 162) {
postion = [12, 1]
}
if (x > 202 && x < 242) {
postion = [13, 1]
}
if (x > 242 && x < 282) {
postion = [14, 1]
}
if (x > 282 && x < 322) {
postion = [15, 1]
}
if (x > 322 && x < 362) {
postion = [16, 1]
}
}
console.log(JSON.stringify(postion))
return postion
},
/**
* 触摸屏幕结束 计算
*/
touchend: function(e) {
let endx = e.changedTouches[0].x
let endy = e.changedTouches[0].y
// this.movelist = {
// qupai: []
// }
let postion = this.jspostion(endx, endy)
this.fangpai(postion, endx, endy)
},
fppd: function(list) {
console.log(" 放牌")
if (this.movelist.qupai.length == 0) {
return false
}
if (list.length == 0) {
return true
}
if (this.movelist.qupai[0].flower == list[list.length - 1].flower) {
console.log("不是差色,不能放牌")
return false
}
if (list[list.length - 1].value - this.movelist.qupai[0].value == 1) {
return true
} else {
console.log("不是顺子")
return false
}
},
gohome: function(list) {
if (this.movelist.qupai[0].flower == list[list.length - 1].flower) {
if (this.movelist.qupai[0].value - list[list.length - 1].value == 1) {
return true
}
}
return false
},
tuihui: function(movelist) {
console.log(JSON.stringify(movelist))
if (movelist.qupai.length == 0) {
return
}
switch (movelist.from * 1) {
case 1:
console.log("不可以放牌")
this.one_list = this.one_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
break
case 2:
this.two_list = this.two_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 3:
this.three_list = this.three_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 4:
this.four_list = this.four_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 5:
this.five_list = this.five_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 6:
this.six_list = this.six_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 7:
this.seven_list = this.seven_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 8:
this.eight_list = this.eight_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 9:
this.top_one = this.top_one.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 10:
this.top_two = this.top_two.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 11:
this.top_three = this.top_three.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 12:
this.top_four = this.top_four.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 13:
this.home_one_list = this.home_one_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 14:
this.home_two_list = this.home_two_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 15:
this.home_three_list = this.home_three_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
case 16:
this.home_four_list = this.home_four_list.concat(movelist.qupai)
this.movelist = {
qupai: []
}
this.drawpai()
this.ctxtwo.draw()
break
}
},
addbuzhou: function() {
var buzhou = JSON.parse(JSON.stringify(this.movelist))
this.movelist = {
qupai: []
}
this.buzhoulist.push(buzhou)
},
fangpai: function(postions, startx, starty) {
if (postions[0] < 0 && postions[1] < 0) {
this.tuihui(this.movelist)
this.drawpai()
this.ctxtwo.draw()
return
}
var arr = JSON.parse(JSON.stringify(this.movelist.qupai))
switch (postions[0] * 1) {
case 1:
if (this.fppd(this.one_list)) {
console.log("可以放牌")
this.one_list = this.one_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 2:
if (this.fppd(this.two_list)) {
console.log("可以放牌")
this.two_list = this.two_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 3:
if (this.fppd(this.three_list)) {
console.log("可以放牌")
this.three_list = this.three_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 4:
if (this.fppd(this.four_list)) {
console.log("可以放牌")
this.four_list = this.four_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 5:
if (this.fppd(this.five_list)) {
console.log("可以放牌")
this.five_list = this.five_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 6:
if (this.fppd(this.six_list)) {
console.log("可以放牌")
this.six_list = this.six_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 7:
if (this.fppd(this.seven_list)) {
console.log("可以放牌")
this.seven_list = this.seven_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 8:
if (this.fppd(this.eight_list)) {
console.log("可以放牌")
this.eight_list = this.eight_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 9:
if (this.top_one.length == 0) {
console.log("可以放牌")
this.top_one = this.top_one.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
console.log("11不可以放牌")
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 10:
if (this.fppd(this.top_two)) {
console.log("可以放牌")
this.top_two = this.top_two.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 11:
if (this.fppd(this.top_three)) {
console.log("可以放牌")
this.top_three = this.top_three.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 12:
if (this.fppd(this.top_four)) {
console.log("可以放牌")
this.top_four = this.top_four.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 13:
if (this.gohome(this.home_one_list)) {
console.log("可以放牌")
this.home_one_list = this.home_one_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 14:
if (this.gohome(this.home_two_list)) {
console.log("可以放牌")
this.home_two_list = this.home_two_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 15:
if (this.gohome(this.home_three_list)) {
console.log("可以放牌")
this.home_three_list = this.home_three_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
case 16:
if (this.gohome(this.home_four_list)) {
console.log("可以放牌")
this.home_four_list = this.home_four_list.concat(arr)
this.movelist.to = postions[0]
this.addbuzhou()
this.getpositioncount()
this.audioToHome()
} else {
this.tuihui(this.movelist)
}
this.drawpai()
this.ctxtwo.draw()
break
}
},
audioToHome: function() {
var isscess = false
if (this.audioToHomeFp(this.one_list[this.one_list.length - 1], 1)) {
this.one_list.splice(this.one_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.two_list[this.two_list.length - 1], 2)) {
this.two_list.splice(this.two_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.three_list[this.three_list.length - 1], 3)) {
this.three_list.splice(this.three_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.four_list[this.four_list.length - 1], 4)) {
this.four_list.splice(this.four_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.five_list[this.five_list.length - 1], 5)) {
this.five_list.splice(this.five_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.six_list[this.six_list.length - 1], 6)) {
this.six_list.splice(this.six_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.seven_list[this.seven_list.length - 1], 7)) {
this.seven_list.splice(this.seven_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.eight_list[this.eight_list.length - 1], 8)) {
this.eight_list.splice(this.eight_list.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.top_one[this.top_one.length - 1], 9)) {
this.top_one.splice(this.top_one.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.top_two[this.top_two.length - 1], 10)) {
this.top_two.splice(this.top_two.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.top_three[this.top_three.length - 1], 11)) {
this.top_three.splice(this.top_three.length - 1, 1)
isscess = true
} else if (this.audioToHomeFp(this.top_four[this.top_four.length - 1], 11)) {
this.top_four.splice(this.top_four.length - 1, 1)
isscess = true
}
if (isscess) {
this.audioToHome()
}
this.drawpai()
},
audioToHomeFp(card, from) {
if (!card) {
return false
}
card.from = from
var bz = {
from: from,
qupai: [JSON.parse(JSON.stringify(card))],
}
if (card.value == 1) {
if (this.home_one_list.length == 0) {
this.home_one_list.push(card)
bz.to = 13
this.buzhoulist.push(bz)
return true
} else
if (this.home_two_list.length == 0) {
this.home_two_list.push(card)
bz.to = 14
this.buzhoulist.push(bz)
return true
} else
if (this.home_three_list.length == 0) {
this.home_three_list.push(card)
bz.to = 15
this.buzhoulist.push(bz)
return true
} else
if (this.home_four_list.length == 0) {
this.home_four_list.push(card)
bz.to = 16
this.buzhoulist.push(bz)
return true
}
} else {
if (this.home_one_list.length > 0 && this.home_one_list[0].hse == card.hse && card.value - this
.home_one_list[this.home_one_list
.length - 1].value == 1) {
this.home_one_list.push(card)
bz.to = 13
this.buzhoulist.push(bz)
return true
} else
if (this.home_two_list.length > 0 && this.home_two_list[0].hse == card.hse && card.value - this
.home_two_list[this.home_two_list
.length - 1].value == 1) {
this.home_two_list.push(card)
bz.to = 14
this.buzhoulist.push(bz)
return true
} else
if (this.home_three_list.length > 0 && this.home_three_list[0].hse == card.hse && card.value - this
.home_three_list[this
.home_three_list.length - 1].value == 1) {
this.home_three_list.push(card)
bz.to = 15
this.buzhoulist.push(bz)
return true
} else
if (this.home_four_list.length > 0 && this.home_four_list[0].hse == card.hse && card.value - this
.home_four_list[this.home_four_list
.length - 1].value == 1) {
this.home_four_list.push(card)
bz.to = 16
this.buzhoulist.push(bz)
return true
}
}
return false
},
getpositioncount: function() {
let count = 0
if (!this.top_one.value) {
count++
}
if (!this.top_two.value) {
count++
}
if (!this.top_three.value) {
count++
}
if (!this.top_four.value) {
count++
}
if (this.one_list.length == 0) {
count++
}
if (this.two_list.length == 0) {
count++
}
if (this.three_list.length == 0) {
count++
}
if (this.four_list.length == 0) {
count++
}
if (this.five_list.length == 0) {
count++
}
if (this.six_list.length == 0) {
count++
}
if (this.seven_list.length == 0) {
count++
}
if (this.eight_list.length == 0) {
count++
}
console.log("getpositioncount", count)
this.positioncount = count + 1
},
/**
* 触摸屏幕移动 画框
*/
touchmove: function(e) {
// e.touches[0].x, e.touches[0].y
this.drawqp(e.touches[0].x, e.touches[0].y)
},
makecars: function() {
for (var i = 0; i < 52; i++) {
if (i < 13) {
this.all_list.push(this.getcarbean(i + 1, "b", 1, 1))
}
if (i >= 13 && i < 26) {
this.all_list.push(this.getcarbean(i - 13 + 1, "h", 2, 2))
}
if (i >= 26 && i < 39) {
this.all_list.push(this.getcarbean(i - 26 + 1, "m", 1, 3))
}
if (i >= 39) {
this.all_list.push(this.getcarbean(i - 39 + 1, "f", 2, 4))
}
}
this.all_list = this.shuffle(this.all_list)
this.fapai()
},
fapai: function() {
for (var i = 0; i < this.all_list.length; i = i + 8) {
this.one_list.push(this.all_list[i])
this.two_list.push(this.all_list[i + 1])
this.three_list.push(this.all_list[i + 2])
this.four_list.push(this.all_list[i + 3])
if (i + 4 < this.all_list.length) {
this.five_list.push(this.all_list[i + 4])
this.six_list.push(this.all_list[i + 5])
this.seven_list.push(this.all_list[i + 6])
this.eight_list.push(this.all_list[i + 7])
}
}
this.drawpai()
// this.txstart()
},
drawpai: function() {
this.ctx.beginPath();
this.ctx.setStrokeStyle('#00a99d'); // 设置矩形框颜色为红色
this.ctx.setLineWidth(2); // 设置矩形框线宽
this.ctx.rect(2, 0, 40, 50);
if (this.top_one.length > 0) {
this.ctx.drawImage('./static/' + this.top_one[0].zpcolor + '.png', 2, 0, 40, 50); // 绘制图片
}
this.ctx.rect(42, 0, 40, 50);
if (this.top_two.length > 0) {
this.ctx.drawImage('./static/' + this.top_two[0].zpcolor + '.png', 42, 0, 40, 50); // 绘制图片
}
this.ctx.rect(82, 0, 40, 50);
if (this.top_three.length > 0) {
this.ctx.drawImage('./static/' + this.top_three[0].zpcolor + '.png', 82, 0, 40, 50); // 绘制图片
}
this.ctx.rect(122, 0, 40, 50);
if (this.top_four.length > 0) {
this.ctx.drawImage('./static/' + this.top_four[0].zpcolor + '.png', 122, 0, 40, 50); // 绘制图片
}
this.ctx.rect(162, 0, 40, 50);
this.ctx.rect(202, 0, 40, 50);
if (this.home_one_list.length > 0) {
this.ctx.drawImage('./static/' + this.home_one_list[this.home_one_list.length - 1].zpcolor +
'.png', 202, 0, 40, 50); // 绘制图片
}
this.ctx.rect(242, 0, 40, 50);
if (this.home_two_list.length > 0) {
this.ctx.drawImage('./static/' + this.home_two_list[this.home_two_list.length - 1].zpcolor +
'.png', 242, 0, 40, 50); // 绘制图片
}
this.ctx.rect(282, 0, 40, 50);
if (this.home_three_list.length > 0) {
this.ctx.drawImage('./static/' + this.home_three_list[this.home_three_list.length - 1].zpcolor +
'.png', 282, 0, 40, 50); // 绘制图片
}
this.ctx.rect(322, 0, 40, 50);
if (this.home_four_list.length > 0) {
this.ctx.drawImage('./static/' + this.home_four_list[this.home_four_list.length - 1].zpcolor +
'.png', 322, 0, 40, 50); // 绘制图片
}
this.ctx.stroke(); // 描边矩形
this.ctx.closePath(); // 结束路径
for (var i = 0; i < this.one_list.length; i++) {
this.one_list[i].x = 10
this.one_list[i].starty = 60 + i * 30
this.one_list[i].endx = 10 + 40
if (i == this.one_list.length - 1) {
this.one_list[i].endy = 60 + i * 30 + 50
} else {
this.one_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.one_list[i].zpcolor + '.png', 10, 60 + i * 30, 40,
50); // 绘制图片
}
for (var i = 0; i < this.two_list.length; i++) {
this.two_list[i].x = 54
this.two_list[i].starty = 60 + i * 30
this.two_list[i].endx = 54 + 40
if (i == this.two_list.length - 1) {
this.two_list[i].endy = 60 + i * 30 + 50
} else {
this.two_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.two_list[i].zpcolor + '.png', 54, 60 + i * 30, 40,
50); // 绘制图片
}
for (var i = 0; i < this.three_list.length; i++) {
this.three_list[i].x = 98
this.three_list[i].starty = 60 + i * 30
this.three_list[i].endx = 98 + 40
if (i == this.three_list.length - 1) {
this.three_list[i].endy = 60 + i * 30 + 50
} else {
this.three_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.three_list[i].zpcolor + '.png', 98, 60 + i * 30, 40,
50); // 绘制图片
}
for (var i = 0; i < this.four_list.length; i++) {
this.four_list[i].x = 142
this.four_list[i].starty = 60 + i * 30
this.four_list[i].endx = 142 + 40
if (i == this.four_list.length - 1) {
this.four_list[i].endy = 60 + i * 30 + 50
} else {
this.four_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.four_list[i].zpcolor + '.png', 142, 60 + i * 30, 40,
50); // 绘制图片
}
for (var i = 0; i < this.five_list.length; i++) {
this.five_list[i].x = 186
this.five_list[i].starty = 60 + i * 30
this.five_list[i].endx = 186 + 40
if (i == this.five_list.length - 1) {
this.five_list[i].endy = 60 + i * 30 + 50
} else {
this.five_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.five_list[i].zpcolor + '.png', 186, 60 + i * 30, 40,
50); // 绘制图片
}
for (var i = 0; i < this.six_list.length; i++) {
this.six_list[i].x = 230
this.six_list[i].starty = 60 + i * 30
this.six_list[i].endx = 230 + 40
if (i == this.six_list.length - 1) {
this.six_list[i].endy = 60 + i * 30 + 50
} else {
this.six_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.six_list[i].zpcolor + '.png', 230, 60 + i * 30, 40,
50); // 绘制图片
}
for (var i = 0; i < this.seven_list.length; i++) {
this.seven_list[i].x = 274
this.seven_list[i].starty = 60 + i * 30
this.seven_list[i].endx = 274 + 40
if (i == this.seven_list.length - 1) {
this.seven_list[i].endy = 60 + i * 30 + 50
} else {
this.seven_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.seven_list[i].zpcolor + '.png', 274, 60 + i * 30, 40,
50); // 绘制图片
}
for (var i = 0; i < this.eight_list.length; i++) {
this.eight_list[i].x = 318
this.eight_list[i].starty = 60 + i * 30
this.eight_list[i].endx = 318 + 40
if (i == this.eight_list.length - 1) {
this.eight_list[i].endy = 60 + i * 30 + 50
} else {
this.eight_list[i].endy = 60 + i * 30 + 30
}
this.ctx.drawImage('./static/' + this.eight_list[i].zpcolor + '.png', 318, 60 + i * 30, 40,
50); // 绘制图片
}
this.ctx.draw()
this.txstart()
},
//将数组打乱
shuffle: function(array) {
if (!Array.isArray(array)) {
return array;
}
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]]
}
return array;
},
//制作牌面
getcarbean: function(value, imgcolor, flower, hse) {
var car = {
value: value, // 大小，从1到13，A到K,16表示王
hse: hse, //1b 2h 3m 4f
zpcolor: imgcolor + value, // 花色b黑，h红,m花,f方 使用时../../static/b1.png
flower: flower, //1黑色 2红色
firstmove: "",
x: 0,
y: 0,
width: 40,
height: 50
}
return car;
},
}
};
</script>
<style scoped>
.contentone {
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content: center;
}
.contenttwo {
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content: center;
}
.canvas_cla {
width: 100vw;
height: 100vh;
}
.top_linear {
display: flex;
flex-direction: row;
justify-content: space-between;
display: flex;
flex-direction: row;
height: 80rpx;
}
.top_mean_left {
margin-left: 32rpx;
}
.top_mean_right {
margin-right: 32rpx;
}
.top_mean_tv {
color: #07a5a6;
}
.page_main {
position: fixed;
overflow: hidden;
width: 100vw;
height: 100vh;
background-color: #efefef;
}
.zhezhao {
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999;
}
.dialog_back {
position: fixed;
z-index: 12;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
display: flex;
}
.add_button_ef {
margin-left: 32rpx;
margin-right: 32rpx;
padding-top: 30rpx;
padding-bottom: 30rpx;
width: 300rpx;
border: solid 2rpx #efefef;
color: #999;
background: #efefef;
font-size: 32rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
vertical-align: center;
}
.button_main_view {
position: fixed;
width: 100vw;
bottom: 0;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-items: center;
}
.button_view {
width: 25vw;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: #333 solid 2rpx;
margin: 22rpx;
}
</style>
还有bug 先记录一下。不喜勿喷