1266 lines
29 KiB
Vue
1266 lines
29 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
||
title-size='36' height='36' id="navbar" :custom-back="btnfanhui">
|
||
</u-navbar>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u1dVlFYFsW87hp0Rs014" class="bj" mode=""></image>
|
||
<view class="bjmask"></view>
|
||
<view class="jilu neon-button" @click="btnjilu">
|
||
记录
|
||
</view>
|
||
<view class="caozuo">
|
||
<image class="czbj" src="https://api.ccttiot.com/smartmeter/img/static/u2FepRO7UQ0k1b5nceB3" mode="">
|
||
</image>
|
||
<view class="topname">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uLd99OBSt2ECYX5cNHwn" mode=""></image>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="bangding">
|
||
<view class="lt">
|
||
<view class="zhuozi">
|
||
绑定桌号：<text v-if="yonghuobj.boothName" class="">{{yonghuobj.boothName}}</text> <text
|
||
v-else>未绑定</text>
|
||
</view>
|
||
<view class="sm">
|
||
绑定桌号，即可解锁对应桌台的爆灯器
|
||
</view>
|
||
</view>
|
||
<view v-if="yonghuobj.boothName" class="rt" @click="jbflag = true">
|
||
解绑/换绑 <image src="https://api.ccttiot.com/smartmeter/img/static/uYIshjyTMzRFKve7Ensk" mode="">
|
||
</image>
|
||
</view>
|
||
<view v-else class="rt" @click="smflag = true">
|
||
去绑定 <image src="https://api.ccttiot.com/smartmeter/img/static/uYIshjyTMzRFKve7Ensk" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="shengyu">
|
||
剩余爆灯次数：<text
|
||
style="font-size: 50rpx;font-weight: 600;">{{shengyuobj.number == null ? '0' : shengyuobj.number}}</text>次
|
||
</view>
|
||
<view v-if="yonghuobj.boothName" @click="btnbaodeng" class="cishu breathing-light"
|
||
style="width: 254rpx;height: 254rpx;color: #fff;margin: auto;margin-top: 20rpx;display: flex;align-items: center;justify-content: center;position: relative;">
|
||
<image v-if="shengyuobj.number > 0" class="breathing-image"
|
||
style="position: absolute;top: 0;left: 0;width: 254rpx;height: 254rpx;z-index: -1;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uw0QKoMF30vahW7o1YPU" mode=""></image>
|
||
<image v-else style="position: absolute;top: 0;left: 0;width: 254rpx;height: 254rpx;z-index: -1;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/u0piVrPcUak8yM6mMziR" mode=""></image>
|
||
</view>
|
||
<view v-else class="cishu breathing-light"
|
||
style="width: 254rpx;height: 254rpx;color: #fff;margin: auto;margin-top: 20rpx;display: flex;align-items: center;justify-content: center;position: relative;">
|
||
<image class="" style="position: absolute;top: 0;left: 0;width: 254rpx;height: 254rpx;z-index: -1;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/u0piVrPcUak8yM6mMziR" mode=""></image>
|
||
</view>
|
||
<view v-if="yonghuobj.boothName" @click="btnbaodeng" class="neon-text-small"
|
||
style="width: 100%;text-align: center;margin-top: 30rpx;">
|
||
{{countdown > 0 ? `请等待${countdown}秒后再点击` : '点击爆灯'}}
|
||
</view>
|
||
<view class="chongzhi" @click="czflag = true">
|
||
充值
|
||
</view>
|
||
</view>
|
||
<!-- 解除绑定弹窗 -->
|
||
<view class="delbd" v-if="jbflag">
|
||
<image class="cha" @click="jbflag = false"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
<view class="zhuohao">
|
||
<view class="taihao">
|
||
绑定桌号
|
||
</view>
|
||
<view class="d15">
|
||
{{yonghuobj.boothName == null ? '--' : yonghuobj.boothName}}
|
||
</view>
|
||
</view>
|
||
<view class="jcbd" @click="btnjiebang">
|
||
解除绑定 <image src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
</view>
|
||
<view class="ghbd" @click="btngenghuan">
|
||
更换桌号 <image src="https://api.ccttiot.com/smartmeter/img/static/usK85jkGXw491hI1ItJo" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="jbflag"></view>
|
||
<!-- 充值弹窗 -->
|
||
<view class="cztc" v-if="czflag">
|
||
<image class="cha" @click="czflag = false"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
<view class="top">
|
||
请先充值爆灯次数
|
||
</view>
|
||
<view class="sy">
|
||
剩余：{{shengyuobj.number == null ? '0' : shengyuobj.number}}次
|
||
</view>
|
||
<view class="list">
|
||
<view :class="['list_item',tabindex == index ? 'active' : '']" v-for="(item,index) in taocanlist"
|
||
:key="item.suitId" @click="btnitem(index,item)">
|
||
{{item.lightingNums == null ? '--' : item.lightingNums}} <text>次</text>
|
||
</view>
|
||
</view>
|
||
<view class="zfaniu" @click="btnzf">
|
||
立即支付（￥{{price}}元）
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="czflag"></view>
|
||
<!-- 扫码绑定弹窗 -->
|
||
<view class="ewmbd" v-if="smflag">
|
||
<image class="cha" @click="smflag = false"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
<view class="top">
|
||
请扫描桌号二维码
|
||
</view>
|
||
<view class="toptwo">
|
||
进行绑定
|
||
</view>
|
||
<view class="hong">
|
||
绑定后即可使用对应桌台爆灯器
|
||
</view>
|
||
<view class="ewm">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uqZ6aQmUd79pHO6nSksa" mode=""></image>
|
||
</view>
|
||
<view class="saoma" @click="btnsaoma">
|
||
扫码绑定
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="smflag"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var xBlufi = require("@/components/blufi/xBlufi.js")
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "",
|
||
},
|
||
jbflag: false,
|
||
tabindex: 0,
|
||
czflag: false,
|
||
smflag: false,
|
||
kazuoid: "",
|
||
taocanlist: [],
|
||
price: '',
|
||
suitId: '',
|
||
cishu: '',
|
||
user: {},
|
||
shengyuobj: {},
|
||
yonghuobj: {},
|
||
countdown: 0, // 倒计时秒数
|
||
countdownTimer: null, // 倒计时定时器
|
||
ver_dataflag: 1,
|
||
mac: '',
|
||
deviceid: '',
|
||
devicename: '',
|
||
devicesarr: [],
|
||
findDeviceTimer: null,
|
||
duration:''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if (option.q) {
|
||
const getQueryParam = (url, paramName) => {
|
||
const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
||
const results = regex.exec(url)
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
||
}
|
||
const sceneValue = option.q
|
||
const decodedValue = decodeURIComponent(sceneValue)
|
||
this.kazuoid = getQueryParam(decodedValue, 'k')
|
||
console.log(this.kazuoid,option.q);
|
||
if (!this.kazuoid) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '无效的二维码',
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '绑定中...',
|
||
mask: true
|
||
})
|
||
this.$u.get(`/app/booth/getBoothDetail/${this.kazuoid}`).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 200) {
|
||
this.yonghuobj = res.data
|
||
this.smflag = false
|
||
setTimeout(() => {
|
||
this.getcishu()
|
||
}, 500)
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '绑定失败，请重试',
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
onShow() {
|
||
this.tabindex = 0
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
|
||
this.getinfo()
|
||
this.gettaocan()
|
||
},
|
||
methods: {
|
||
// 点击返回到首页
|
||
btnfanhui() {
|
||
uni.setStorageSync('type', 1)
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
// 点击更换桌号
|
||
btngenghuan() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要换绑桌号吗？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定')
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['qrCode'],
|
||
success: res => {
|
||
const getQueryParam = (url, paramName) => {
|
||
const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
||
const results = regex.exec(url)
|
||
return results ? decodeURIComponent(results[1].replace(
|
||
/\+/g, ' ')) : null
|
||
}
|
||
const sceneValue = res.result
|
||
const decodedValue = decodeURIComponent(sceneValue)
|
||
that.kazuoid = getQueryParam(decodedValue, 'k')
|
||
if (!that.kazuoid) {
|
||
uni.showToast({
|
||
title: '无效的二维码',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '更换绑定中...',
|
||
mask: true
|
||
})
|
||
that.$u.get(`/app/booth/getBoothDetail/${that.kazuoid}`).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 200) {
|
||
that.yonghuobj = res.data
|
||
that.smflag = false
|
||
setTimeout(() => {
|
||
that.jbflag = false
|
||
that.getcishu()
|
||
}, 500)
|
||
uni.showToast({
|
||
title: '更换绑定成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '换绑失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
})
|
||
},
|
||
fail: err => {
|
||
uni.showToast({
|
||
title: '扫描失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击解绑桌号
|
||
btnjiebang() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要解绑吗？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.yonghuobj = {}
|
||
that.kazuoid = ''
|
||
uni.showToast({
|
||
title: '解绑成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
that.jbflag = false
|
||
// console.log('用户点击确定')
|
||
// that.$u.put(`/app/booth/${that.yonghuobj.boothId}/unbind`).then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code == 200) {
|
||
// that.smflag = false
|
||
// setTimeout(() => {
|
||
// that.jbflag = false
|
||
// that.yonghuobj = {}
|
||
// that.getcishu()
|
||
// }, 500)
|
||
// uni.showToast({
|
||
// title: '解绑成功',
|
||
// icon: 'success',
|
||
// duration: 2000
|
||
// })
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: res.msg,
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// })
|
||
// }
|
||
// }).catch(() => {
|
||
// uni.hideLoading()
|
||
// uni.showToast({
|
||
// title: '解绑失败，请重试',
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// })
|
||
// })
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 判断离线连接蓝牙
|
||
findDevice() {
|
||
const matchedDevice = this.devicesarr.find(device => device.name.slice(-12) === this.mac.slice(-12))
|
||
if (matchedDevice) {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
xBlufi.notifyConnectBle({
|
||
isStart: true,
|
||
deviceId: matchedDevice.deviceId,
|
||
name: matchedDevice.name
|
||
})
|
||
this.deviceid = matchedDevice.deviceId
|
||
this.devicename = matchedDevice.name
|
||
} else {
|
||
this.findDeviceTimer = setTimeout(this.findDevice.bind(this), 1000)
|
||
}
|
||
},
|
||
// 获取附近蓝牙设备列表
|
||
funListenDeviceMsgEvent: function(options) {
|
||
switch (options.type) {
|
||
case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
|
||
if (!options.result) {
|
||
this.ver_dataflag = 1
|
||
this.findDevice()
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
|
||
if (options.result) {
|
||
this.devicesarr = options.data
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
|
||
if (options.result == true) {
|
||
xBlufi.notifyInitBleEsp32({
|
||
deviceId: this.deviceid
|
||
})
|
||
this.deviceid = options.data.deviceId
|
||
this.name = this.name
|
||
setTimeout(() => {
|
||
this.ver_dataflag = 3
|
||
uni.hideLoading()
|
||
}, 2000)
|
||
} else {
|
||
uni.hideLoading()
|
||
this.findDevice()
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
|
||
if (!options.result) {
|
||
console.log('蓝牙初始化失败');
|
||
return
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
// 点击立即支付
|
||
btnzf() {
|
||
this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}`).then((res) => {
|
||
if (res.code == 200) {
|
||
let data = {
|
||
suitId: this.suitId,
|
||
appId: this.$store.state.appid,
|
||
channelId: res.data[0].channelId,
|
||
payAmount: this.price,
|
||
number: this.cishu
|
||
}
|
||
this.$u.post(`/app/order`, data).then(resp => {
|
||
if (resp.code == 200) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: resp.data.payParams.timeStamp,
|
||
nonceStr: resp.data.payParams.nonceStr,
|
||
package: resp.data.payParams.packageVal,
|
||
signType: resp.data.payParams.signType,
|
||
paySign: resp.data.payParams.paySign,
|
||
success: (respc) => {
|
||
console.log(respc, '支付成功')
|
||
this.$u.put(
|
||
`/app/pay/refreshPayResult?no=${resp.data.pay.no}`
|
||
).then((res) => { //刷新支付结果
|
||
this.czflag = false
|
||
this.getcishu()
|
||
})
|
||
},
|
||
fail(err) {
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
}, 1000)
|
||
console.log('取消或者支付失败')
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: resp.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 开始倒计时
|
||
startCountdown() {
|
||
this.countdown = this.duration
|
||
this.countdownTimer = setInterval(() => {
|
||
if (this.countdown > 0) {
|
||
this.countdown--
|
||
} else {
|
||
clearInterval(this.countdownTimer)
|
||
this.countdownTimer = null
|
||
}
|
||
}, 1000)
|
||
},
|
||
// 点击爆灯请求
|
||
btnbaodeng() {
|
||
if (this.shengyuobj.number == 0) {
|
||
uni.showToast({
|
||
title: `您当前没有爆灯次数，请先充值`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if (this.countdown > 0) {
|
||
uni.showToast({
|
||
title: `请等待${this.countdown}秒后再次点击`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if (this.yonghuobj.devices[0]) {
|
||
let flag = ''
|
||
if (this.ver_dataflag == 3) {
|
||
flag = false
|
||
} else {
|
||
flag = true
|
||
}
|
||
this.$u.put(`/app/booth/${this.yonghuobj.boothId}/lighting?requiredIot=${flag}`).then(res => {
|
||
if (res.code == 200 && res.data.db >= 1) {
|
||
if (res.data.iot == false) {
|
||
if (this.ver_dataflag == 3) {
|
||
xBlufi.notifySendCustomData({
|
||
customData: "11time" + this.duration + '@'
|
||
})
|
||
uni.showToast({
|
||
title: "爆灯成功",
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
this.getcishu()
|
||
this.startCountdown()
|
||
} else {
|
||
uni.showToast({
|
||
title: '设备离线',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: "爆灯成功",
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
this.getcishu()
|
||
this.startCountdown()
|
||
}
|
||
} else {
|
||
console.log(res.msg);
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '该桌号暂无设备',
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
// 用户请求剩余次数
|
||
getcishu() {
|
||
this.$u.get(`/app/lightingNum/userLightingNum?storeId=${this.$store.state.storeId}&userId=${this.user.userId}`).then(res => {
|
||
if (res.code == 200) {
|
||
this.shengyuobj = res.data
|
||
}
|
||
})
|
||
},
|
||
// 请求用户信息
|
||
getinfo() {
|
||
this.$u.get(`/getInfo`).then(res => {
|
||
if (res.code == 200) {
|
||
this.user = res.user
|
||
this.getcishu()
|
||
}
|
||
})
|
||
},
|
||
|
||
// 请求充值套餐列表
|
||
gettaocan() {
|
||
this.$u.get(`/app/suit/list?pageNum=1&pageSize=999&storeId=${this.$store.state.storeId}`).then(res => {
|
||
if (res.code == 200) {
|
||
this.taocanlist = res.rows
|
||
this.price = res.rows[0].rechargeAmount
|
||
this.suitId = res.rows[0].suitId
|
||
this.cishu = res.rows[0].lightingNums
|
||
}
|
||
})
|
||
},
|
||
// 点击切换高亮
|
||
btnitem(index, item) {
|
||
this.tabindex = index
|
||
this.price = item.rechargeAmount
|
||
this.suitId = item.suitId
|
||
this.cishu = item.lightingNums
|
||
},
|
||
// 点击跳转到记录
|
||
btnjilu() {
|
||
uni.navigateTo({
|
||
url: '/pages/myorder/returned/index'
|
||
})
|
||
},
|
||
// 扫码绑定
|
||
btnsaoma() {
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['qrCode'],
|
||
success: res => {
|
||
const getQueryParam = (url, paramName) => {
|
||
const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
||
const results = regex.exec(url)
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
||
}
|
||
const sceneValue = res.result
|
||
const decodedValue = decodeURIComponent(sceneValue)
|
||
this.kazuoid = getQueryParam(decodedValue, 'k')
|
||
console.log(this.kazuoid,res);
|
||
if (!this.kazuoid) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '无效的二维码',
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '绑定中...',
|
||
mask: true
|
||
})
|
||
this.$u.get(`/app/booth/getBoothDetail/${this.kazuoid}`).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 200) {
|
||
this.yonghuobj = res.data
|
||
this.smflag = false
|
||
setTimeout(() => {
|
||
this.getcishu()
|
||
}, 500)
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '绑定失败，请重试',
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {}
|
||
}
|
||
})
|
||
})
|
||
},
|
||
fail: err => {
|
||
uni.showToast({
|
||
title: '扫描失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page {
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(45deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
|
||
animation: gradientBG 10s ease infinite;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
|
||
@keyframes gradientBG {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
.neon-text {
|
||
background: linear-gradient(90deg, #FF00FF, #00FFFF, #FF00FF, #00FFFF);
|
||
background-size: 300% 100%;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: neonGradient 3s linear infinite;
|
||
text-shadow: 0 0 10rpx rgba(255, 0, 255, 0.5),
|
||
0 0 20rpx rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
.neon-text-small {
|
||
background: linear-gradient(90deg, #FF00FF, #00FFFF, #FF00FF, #00FFFF);
|
||
background-size: 300% 100%;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: neonGradient 3s linear infinite;
|
||
text-shadow: 0 0 5rpx rgba(255, 0, 255, 0.5),
|
||
0 0 10rpx rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
.neon-button {
|
||
position: relative;
|
||
background: linear-gradient(90deg, #FF00FF, #00FFFF);
|
||
background-size: 200% 100%;
|
||
animation: neonGradient 3s linear infinite;
|
||
border-radius: 50rpx;
|
||
box-shadow: 0 0 10rpx rgba(255, 0, 255, 0.5),
|
||
0 0 20rpx rgba(0, 255, 255, 0.5);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 0 5rpx rgba(255, 0, 255, 0.3),
|
||
0 0 10rpx rgba(0, 255, 255, 0.3);
|
||
}
|
||
}
|
||
|
||
.neon-button-small {
|
||
position: relative;
|
||
background: linear-gradient(90deg, #FF00FF, #00FFFF);
|
||
background-size: 200% 100%;
|
||
animation: neonGradient 3s linear infinite;
|
||
border-radius: 23rpx;
|
||
box-shadow: 0 0 5rpx rgba(255, 0, 255, 0.5),
|
||
0 0 10rpx rgba(0, 255, 255, 0.5);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 0 3rpx rgba(255, 0, 255, 0.3),
|
||
0 0 5rpx rgba(0, 255, 255, 0.3);
|
||
}
|
||
}
|
||
|
||
.czbj {
|
||
// animation: float 6s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0% {
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
}
|
||
|
||
.line {
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
animation: shine 3s infinite;
|
||
}
|
||
}
|
||
|
||
@keyframes shine {
|
||
0% {
|
||
left: -100%;
|
||
}
|
||
|
||
100% {
|
||
left: 100%;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-color: #FF1818;
|
||
color: #fff !important;
|
||
|
||
text {
|
||
border: 1px solid #fff;
|
||
}
|
||
}
|
||
|
||
.ewmbd {
|
||
width: 750rpx;
|
||
height: 932rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 9;
|
||
|
||
.hong {
|
||
font-size: 26rpx;
|
||
color: #F72B2B;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 42rpx;
|
||
}
|
||
|
||
.top {
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 106rpx;
|
||
}
|
||
|
||
.toptwo {
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.saoma {
|
||
width: 238rpx;
|
||
height: 68rpx;
|
||
background: #010000;
|
||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
margin: auto;
|
||
margin-top: 112rpx;
|
||
padding-top: 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.ewm {
|
||
width: 246rpx;
|
||
height: 246rpx;
|
||
margin: auto;
|
||
margin-top: 90rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.cha {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
position: absolute;
|
||
right: 26rpx;
|
||
top: -100rpx;
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, .3);
|
||
position: fixed;
|
||
z-index: 8;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.cztc {
|
||
width: 646rpx;
|
||
max-height: 858rpx;
|
||
padding-bottom: 40rpx;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 418rpx;
|
||
border-radius: 20rpx;
|
||
z-index: 9;
|
||
|
||
.zfaniu {
|
||
width: 518rpx;
|
||
height: 76rpx;
|
||
background: #FF1818;
|
||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 76rpx;
|
||
margin: auto;
|
||
margin-top: 52rpx;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
padding: 0 54rpx;
|
||
box-sizing: border-box;
|
||
|
||
.list_item {
|
||
width: 252rpx;
|
||
height: 118rpx;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
border: 2rpx solid #FF1818;
|
||
text-align: center;
|
||
margin-top: 36rpx;
|
||
font-weight: 700;
|
||
font-size: 72rpx;
|
||
color: #FF1818;
|
||
position: relative;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
display: inline-block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background-color: #FF1818;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
right: 67rpx;
|
||
top: 56rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sy {
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 40rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.top {
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 62rpx;
|
||
}
|
||
|
||
.cha {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: -100rpx;
|
||
}
|
||
}
|
||
|
||
.delbd {
|
||
width: 646rpx;
|
||
height: 512rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 696rpx;
|
||
z-index: 9;
|
||
border-radius: 20rpx;
|
||
|
||
.cha {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: -100rpx;
|
||
}
|
||
|
||
.taihao {
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 62rpx;
|
||
}
|
||
|
||
.d15 {
|
||
font-size: 68rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.ghbd {
|
||
width: 242rpx;
|
||
height: 60rpx;
|
||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||
border: 2rpx solid #000000;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #010000;
|
||
align-items: center;
|
||
padding-left: 44rpx;
|
||
padding-right: 8rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 26rpx;
|
||
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
|
||
.jcbd {
|
||
width: 242rpx;
|
||
height: 60rpx;
|
||
background: #010000;
|
||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
align-items: center;
|
||
padding-left: 44rpx;
|
||
padding-right: 8rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 72rpx;
|
||
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.caozuo {
|
||
width: 700rpx;
|
||
height: 1000rpx;
|
||
margin: auto;
|
||
margin-top: 366rpx;
|
||
position: relative;
|
||
padding: 0 62rpx;
|
||
box-sizing: border-box;
|
||
|
||
.chongzhi {
|
||
width: 154rpx;
|
||
height: 52rpx;
|
||
background: #F72B2B;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 52rpx;
|
||
margin: auto;
|
||
margin-top: 54rpx;
|
||
}
|
||
|
||
.cishu {
|
||
font-size: 144rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 84rpx;
|
||
}
|
||
|
||
.shengyu {
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.bangding {
|
||
margin-top: 36rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 34rpx;
|
||
|
||
.lt {
|
||
.zhuozi {
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.sm {
|
||
font-size: 20rpx;
|
||
color: #7C7C7C;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.rt {
|
||
padding-right: 6rpx;
|
||
width: 178rpx;
|
||
height: 46rpx;
|
||
background: #D8D8D8;
|
||
border-radius: 23rpx 23rpx 23rpx 23rpx;
|
||
font-size: 24rpx;
|
||
color: #010000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-left: 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
image {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.topname {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 44rpx;
|
||
color: #3D3D3D;
|
||
padding-top: 64rpx;
|
||
box-sizing: border-box;
|
||
image{
|
||
width: 232rpx;
|
||
height: 138rpx;
|
||
}
|
||
.neon-text {
|
||
background: linear-gradient(90deg, #FF00FF, #00FFFF, #FF00FF, #00FFFF);
|
||
background-size: 300% 100%;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: neonGradient 3s linear infinite;
|
||
text-shadow: 0 0 10rpx rgba(255, 0, 255, 0.5),
|
||
0 0 20rpx rgba(0, 255, 255, 0.5);
|
||
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 578rpx;
|
||
height: 6rpx;
|
||
border: 1rpx dashed #B8B8B8;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.czbj {
|
||
width: 700rpx;
|
||
height: 1000rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
|
||
.jilu {
|
||
width: 140rpx;
|
||
height: 62rpx;
|
||
background: #010000;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
border-radius: 50rpx 0 0 50rpx;
|
||
position: fixed;
|
||
right: 0;
|
||
top: 350rpx;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bj {
|
||
width: 760rpx;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: -10rpx;
|
||
z-index: -2;
|
||
|
||
}
|
||
.bjmask{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: -1;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, .3);
|
||
}
|
||
.breathing-light {
|
||
.breathing-image {
|
||
animation: breathing 2s ease-in-out infinite;
|
||
}
|
||
|
||
.breathing-text {
|
||
animation: breathing 2s ease-in-out infinite;
|
||
font-size: 72rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
@keyframes breathing {
|
||
0% {
|
||
opacity: 0.9;
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0.9;
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
@keyframes neonGradient {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
</style> |