|
|
@@ -0,0 +1,986 @@
|
|
|
+<template>
|
|
|
+ <view class="all">
|
|
|
+ <template v-if="!upOnBtnData.show">
|
|
|
+ <view class="padding-t-30"></view>
|
|
|
+ <view class="tab">
|
|
|
+ <view class="flex">
|
|
|
+ <view class="tab-item " @click="changeTab(item,ind)" :class="{action:actionIndex==ind}"
|
|
|
+ v-for="(item,ind) in gameList">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <l-echart class="top" ref="chart"></l-echart>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="center flex">
|
|
|
+ <!-- 左 -->
|
|
|
+ <view class="le">
|
|
|
+ <view class="tit flex-start">
|
|
|
+ <view class="ti1">{{$t('enter.u1')}}</view>
|
|
|
+ <view class="ti2">({{$t('enter.u2')}})</view>
|
|
|
+ </view>
|
|
|
+ <view class="he">
|
|
|
+ <view class="numbox flex-start">
|
|
|
+ <view class="he1 flex" @click="gameMoneyValue=it" v-for="it in arMoneyList">
|
|
|
+ <view class="wen">{{it}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="yi flex-start">
|
|
|
+ <image class="img" src="../../static/icon/le.png" mode=""></image>
|
|
|
+ <view class="wz padding-l-10">{{history.base.token}}</view>
|
|
|
+ <view class="qx padding-l-10" v-if="history.next.id">{{history.next.no}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="shu">
|
|
|
+ 0.064489
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--右 -->
|
|
|
+ <view class="ri">
|
|
|
+ <view class="ti flex-center">
|
|
|
+ <view class="t1">{{$t('enter.u3')}}</view>
|
|
|
+ <view class="t2 padding-l-10">{{history.base.timebar}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="dh">
|
|
|
+ <input class="input" type="number" v-model="gameMoneyValue">
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <view class="bt flex">
|
|
|
+ <view class="btnItem btnle" @click="onbet(2)">
|
|
|
+ <image class="imag" src="../../static/icon/xia.png" mode=""></image>
|
|
|
+ <text class="xia">{{$t('enter.u4')}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="btnItem btnri" @click="onbet(1)">
|
|
|
+ <image class="imag" src="../../static/icon/shang.png" mode=""></image>
|
|
|
+ <text class="xia">{{$t('enter.u6')}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bt flex">
|
|
|
+ <view class="btnItem btnle" @click="onbet(3)">
|
|
|
+ <view class="xia">{{$t('enter.u5')}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="btnItem btnri" @click="onbet(4)">
|
|
|
+ <view class="xia">{{$t('enter.u7')}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="db flex">
|
|
|
+ <view class="jl">{{$t('enter.u8')}}</view>
|
|
|
+ <view class="sj">
|
|
|
+ <text v-if="time.H<10">0</text>
|
|
|
+ {{time.H}}
|
|
|
+ </view>
|
|
|
+ <view class="sj">
|
|
|
+ <text v-if="time.M<10">0</text>
|
|
|
+ {{time.M}}
|
|
|
+ </view>
|
|
|
+ <view class="sj">
|
|
|
+ <text v-if="time.S<10">0</text>
|
|
|
+ {{time.S}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kb"></view>
|
|
|
+
|
|
|
+ <view class="last">
|
|
|
+ <view class="flex">
|
|
|
+ <text>{{$t('enter.u9')}}</text>
|
|
|
+ <view class="flex" @click="nav">
|
|
|
+ <text>{{$t('enter.u10')}}</text>
|
|
|
+ <image class="lb" src="../../static/icon/jt.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bg">
|
|
|
+ <view class="biaotou flex">
|
|
|
+ <view class="biwe">{{$t('enter.u11')}}</view>
|
|
|
+ <view class="biwe">{{$t('enter.u12')}}</view>
|
|
|
+ <view class="biwe">{{$t('enter.u13')}}</view>
|
|
|
+ <view class="biwe">{{$t('enter.u14')}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="list flex" v-for="(item,ind) in betList.list" :key="ind">
|
|
|
+ <view class="biwe flex-start">
|
|
|
+ <view class="tr">{{history.base.token}}</view>
|
|
|
+ <view class="nametip">{{history.base.timebar}}</view>
|
|
|
+ <image class="zz" src="../../static/icon/shang.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="biwe">23.5000</view>
|
|
|
+ <view class="biwe">23.5000</view>
|
|
|
+ <view class="biwe flex">
|
|
|
+ <view class="list-buttom success margin-r-10">
|
|
|
+ {{$t('enter.u17')}}
|
|
|
+ </view>
|
|
|
+ <view class="list-buttom primary">
|
|
|
+ {{$t('enter.u18')}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="chz flex">
|
|
|
+ <view>
|
|
|
+ <view class="yue padding-b-10">{{$t('enter.u15')}}</view>
|
|
|
+ <view class="yes">{{userWallet}}U</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-start" @click="navC">
|
|
|
+ <view class="quc">{{$t('enter.u16')}}</view>
|
|
|
+ <image class="choz" src="../../static/icon/jt.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <taber tab='entertainment'></taber>
|
|
|
+ </template>
|
|
|
+ <template v-if="upOnBtnData.show">
|
|
|
+ <view class="page">
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <view class="pay-title">
|
|
|
+ <text v-show="AffirmStatus === 1">请输入6位支付密码</text>
|
|
|
+ <text v-show="AffirmStatus === 2">请设置6位支付密码</text>
|
|
|
+ <text v-show="AffirmStatus === 3">请确认6位支付密码</text>
|
|
|
+ </view>
|
|
|
+ <view class="pay-password" @click="onPayUp">
|
|
|
+ <view class="list">
|
|
|
+ <text v-show="passwordArr.length >= 1">●</text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <text v-show="passwordArr.length >= 2">●</text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <text v-show="passwordArr.length >= 3">●</text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <text v-show="passwordArr.length >= 4">●</text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <text v-show="passwordArr.length >= 5">●</text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <text v-show="passwordArr.length >= 6">●</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="hint">
|
|
|
+ <text>忘记支付密码？</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
|
|
|
+ import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|
|
+ import {
|
|
|
+ getGame,
|
|
|
+ gameKline,
|
|
|
+ getGameList,
|
|
|
+ test,
|
|
|
+ gameWallet,
|
|
|
+ gameBetList,
|
|
|
+ gameBetIn
|
|
|
+ } from "@/api/game.js";
|
|
|
+ import {
|
|
|
+ qianBao,
|
|
|
+ } from "@/api/wallet.js";
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ saveUrl,
|
|
|
+ interceptor
|
|
|
+ } from '@/utils/loginUtils.js';
|
|
|
+ import taber from "@/components/footer/footer.vue";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ taber,
|
|
|
+ LEchart
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState("user", ["hasLogin"])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ arMoneyList: [
|
|
|
+ 1, 5, 10, 20, 50, 100
|
|
|
+ ],
|
|
|
+ gameMoneyValue: 0,
|
|
|
+ actionIndex: 0,
|
|
|
+ // 当前游戏列表
|
|
|
+ gameList: [],
|
|
|
+ // 游戏信息
|
|
|
+ history: {
|
|
|
+ list: [], //游戏进行记录
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ // 基础数据
|
|
|
+ base: {},
|
|
|
+ next: {},
|
|
|
+ now: {}
|
|
|
+ },
|
|
|
+ time: {
|
|
|
+ H: 0,
|
|
|
+ M: 0,
|
|
|
+ S: 0,
|
|
|
+ // 保存倒计时对象
|
|
|
+ t: ''
|
|
|
+ },
|
|
|
+ // 游戏押注记录
|
|
|
+ betList: {
|
|
|
+ list: [], //游戏进行记录
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ },
|
|
|
+ userWallet: 0,
|
|
|
+ upOnBtnData: {
|
|
|
+ show: false,
|
|
|
+ type: ''
|
|
|
+ },
|
|
|
+ AffirmStatus: 1,
|
|
|
+ passwordArr: [],
|
|
|
+ oldPasswordArr: [],
|
|
|
+ newPasswordArr: [],
|
|
|
+ afPasswordArr: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ uni.showModal({
|
|
|
+ title: "登陆",
|
|
|
+ content: '您未登录！是否马上登录？',
|
|
|
+ success: (e) => {
|
|
|
+ // 判断是否点击确认按钮
|
|
|
+ if (e.confirm) {
|
|
|
+ // 保存当前页面地址
|
|
|
+ saveUrl()
|
|
|
+ // 跳转页面
|
|
|
+ interceptor()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.getUserWallet();
|
|
|
+
|
|
|
+ },
|
|
|
+ // 关闭循环
|
|
|
+ onHide() {
|
|
|
+ clearInterval(this.time.t)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onbet(type) {
|
|
|
+ this.upOnBtnData.type = type;
|
|
|
+ this.upOnBtnData.show = true;
|
|
|
+ this.$refs.CodeKeyboard.show();
|
|
|
+ },
|
|
|
+
|
|
|
+ KeyInfo(val) {
|
|
|
+ if (val.index >= 6) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 判断是否输入的是删除键
|
|
|
+ if (val.keyCode === 8) {
|
|
|
+ // 删除最后一位
|
|
|
+ this.passwordArr.splice(val.index + 1, 1)
|
|
|
+ }
|
|
|
+ // 判断是否输入的是.
|
|
|
+ else if (val.keyCode == 190) {
|
|
|
+ // 输入.无效
|
|
|
+ } else {
|
|
|
+ this.passwordArr.push(val.key);
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.showModal({
|
|
|
+ title: '温馨提示',
|
|
|
+ content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 参与压住
|
|
|
+ gameBetIn(type) {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 获取用户余额信息
|
|
|
+ getUserWallet() {
|
|
|
+ gameWallet().then((res) => {
|
|
|
+ this.userWallet = res.data.back.USDT.money.money
|
|
|
+ })
|
|
|
+ if (this.history.next.id) {
|
|
|
+ this.opTiem();
|
|
|
+ } else {
|
|
|
+ this.gameInit();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 开始倒计时
|
|
|
+ async opTiem() {
|
|
|
+ const that = this;
|
|
|
+ try {
|
|
|
+ // 关闭循环
|
|
|
+ clearInterval(that.time.t);
|
|
|
+ if (that.history.base.id) {
|
|
|
+ that.time.t = setInterval(() => {
|
|
|
+ const da = (new Date()).getTime();
|
|
|
+ const timenum = that.history.next.open_time * 1000 - da;
|
|
|
+ that.time.H = Math.floor(timenum / 1000 / 60 / 60);
|
|
|
+ that.time.S = Math.floor(timenum / 1000 % 60)
|
|
|
+ that.time.M = Math.floor(timenum / 1000 / 60 % 60);
|
|
|
+ if (that.time.H == 0 && that.time.M == 0 && that.time.S == 0) {
|
|
|
+ clearInterval(that.time.t);
|
|
|
+ setTimeout(() => {
|
|
|
+ test();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.gameDataInit(that.gameList[that.actionIndex].id)
|
|
|
+ }, 1000)
|
|
|
+ }, 3000)
|
|
|
+
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e, '定时');
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ changeTab(item, ind) {
|
|
|
+ if (ind != this.actionIndex) {
|
|
|
+ this.actionIndex = ind;
|
|
|
+ this.gameDataInit(item.id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async gameInit() {
|
|
|
+ try {
|
|
|
+ await test();
|
|
|
+ // 获取游戏列表
|
|
|
+ await this.getGameList();
|
|
|
+ // 加载游戏数据
|
|
|
+ this.gameDataInit(this.history.next.id || this.gameList[0].id)
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e, 'cuowu');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 加载游戏列表
|
|
|
+ getGameList() {
|
|
|
+ return getGameList().then((res) => {
|
|
|
+ this.gameList = res.data.list;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 加载基础游戏信息
|
|
|
+ async gameDataInit(id) {
|
|
|
+ // 获取基础信息
|
|
|
+ await this.getGame(id);
|
|
|
+ //获取K线
|
|
|
+ this.getGameKline();
|
|
|
+ // 获取游戏压住记录
|
|
|
+ this.gameBetList();
|
|
|
+ },
|
|
|
+ // 获取游戏压住记录
|
|
|
+ gameBetList() {
|
|
|
+ gameBetList({
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ id: this.history.base.id
|
|
|
+ }).then((res) => {
|
|
|
+ this.betList.list = res.data.bet_log;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取游戏K线信息
|
|
|
+ getGameKline() {
|
|
|
+ const that = this;
|
|
|
+ gameKline({
|
|
|
+ page: 1,
|
|
|
+ limit: 60
|
|
|
+ }, that.history.base.id).then((res) => {
|
|
|
+ let list = res.data.list.reverse();
|
|
|
+ // x轴记录
|
|
|
+ let xarr = [];
|
|
|
+ // 打点数据
|
|
|
+ let linearr = [];
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ const ll = list[i];
|
|
|
+ const time = new Date(+ll.ts);
|
|
|
+ const addar = [+(+ll.o).toFixed(5), +(+ll.c).toFixed(5), +(+ll.l).toFixed(5), +(+ll.h)
|
|
|
+ .toFixed(5)
|
|
|
+ ];
|
|
|
+ xarr.push(`${time.getHours()}:${time.getMinutes()}`)
|
|
|
+ linearr.push(addar)
|
|
|
+ }
|
|
|
+ that.$nextTick(() => {
|
|
|
+ that.initKline({
|
|
|
+ xarr,
|
|
|
+ linearr
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取当前项目信息
|
|
|
+ getGame(type) {
|
|
|
+ const that = this;
|
|
|
+ return getGame({
|
|
|
+ page: that.history.page,
|
|
|
+ limit: that.history.limit
|
|
|
+ }, type).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ that.history.list = data.list || [];
|
|
|
+ that.history.base = data.game || {};
|
|
|
+ that.history.next = data.next_game || {};
|
|
|
+ that.history.now = data.now_game || {};
|
|
|
+ if (that.history.next) {
|
|
|
+ that.opTiem();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 均值计算
|
|
|
+ calculateMA(dayCount, data) {
|
|
|
+ var result = [];
|
|
|
+ for (var i = 0, len = data.linearr.length; i < len; i++) {
|
|
|
+ if (i < dayCount) {
|
|
|
+ result.push('-');
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ var sum = 0;
|
|
|
+ for (var j = 0; j < dayCount; j++) {
|
|
|
+ sum += data.linearr[i - j][1];
|
|
|
+ }
|
|
|
+ result.push(+(sum / dayCount).toFixed(5));
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ async initKline(data) {
|
|
|
+ const that = this;
|
|
|
+ try {
|
|
|
+ const chart = await this.$refs.chart.init(echarts);
|
|
|
+ const upColor = '#00da3c';
|
|
|
+ const downColor = '#ec0000';
|
|
|
+ chart.setOption(
|
|
|
+ (this.option = {
|
|
|
+ animation: false,
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ left: 10,
|
|
|
+ data: ['MA5', 'MA10', 'MA20'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#999999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
+ },
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#ccc',
|
|
|
+ padding: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ position: function(pos, params, el, elRect, size) {
|
|
|
+ const obj = {
|
|
|
+ top: 10
|
|
|
+ };
|
|
|
+ obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 40;
|
|
|
+
|
|
|
+ return obj;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ type: 'inside',
|
|
|
+ xAxisIndex: 0,
|
|
|
+ start: 50,
|
|
|
+ end: 100
|
|
|
+ }],
|
|
|
+ grid: [{
|
|
|
+ left: 10,
|
|
|
+ right: 55,
|
|
|
+ bottom: 20,
|
|
|
+ top: 45
|
|
|
+ }],
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ data: data.xarr,
|
|
|
+ axisLine: {
|
|
|
+ onZero: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ min: 'dataMin',
|
|
|
+ max: 'dataMax',
|
|
|
+ axisPointer: {
|
|
|
+ z: 100
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ scale: true,
|
|
|
+ splitNumber: 4,
|
|
|
+ position: 'right',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e3e3e3'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ inside: false,
|
|
|
+ formatter: '{value}\n',
|
|
|
+ color: '#999999'
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: that.history.base.token + '-USDT',
|
|
|
+ type: 'candlestick',
|
|
|
+ data: data.linearr,
|
|
|
+ itemStyle: {
|
|
|
+ color: upColor,
|
|
|
+ color0: downColor,
|
|
|
+ borderColor: undefined,
|
|
|
+ borderColor0: undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "MA5",
|
|
|
+ smooth: true,
|
|
|
+ type: 'line',
|
|
|
+ data: that.calculateMA(5, data),
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "MA10",
|
|
|
+ smooth: true,
|
|
|
+ type: 'line',
|
|
|
+ data: that.calculateMA(10, data),
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "MA20",
|
|
|
+ smooth: true,
|
|
|
+ type: 'line',
|
|
|
+ data: that.calculateMA(20, data),
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }),
|
|
|
+ true
|
|
|
+ )
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e, 'cuowu');
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 页面逻辑
|
|
|
+ nav() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/history/history",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ navC() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/recharge/recharge",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .all {
|
|
|
+ width: 750rpx;
|
|
|
+ /* height: 2500rpx; */
|
|
|
+ height: 100%;
|
|
|
+ padding-top: var(--status-bar-height);
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ $base: orangered; // 基础颜色
|
|
|
+
|
|
|
+ .page {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ .pay-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-password {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 90%;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ border: 2rpx solid $base;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 16.666%;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2rpx solid #EEEEEE;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list:nth-child(6) {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $base;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ background-color: #191A1F;
|
|
|
+ border-radius: 20px;
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ color: #FFF;
|
|
|
+ font-size: $font-sm;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+
|
|
|
+ &.action {
|
|
|
+ color: #F5A944;
|
|
|
+ border-bottom: 1px solid #F5A944;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 530rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center {
|
|
|
+ padding: 30rpx;
|
|
|
+ line-height: 1;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .le,
|
|
|
+ .ri {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .le {
|
|
|
+ .tit {
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .ti1 {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ti2 {
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .he {
|
|
|
+ padding-top: 40rpx;
|
|
|
+
|
|
|
+ .numbox {
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .he1 {
|
|
|
+ background: #fdaf41;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ width: 84rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .wen {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .yi {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-base;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 41rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wz {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shu {
|
|
|
+ padding-top: 10rpx;
|
|
|
+ font-size: 51rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fdb242;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .ri {
|
|
|
+ .ti {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .t1 {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t2 {
|
|
|
+ color: #fdaf41;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dh {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ background: #efefef;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ .te {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ padding-top: 30rpx;
|
|
|
+
|
|
|
+ .bt {
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+
|
|
|
+ .btnItem {
|
|
|
+ width: 49%;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .imag {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xia {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnle {
|
|
|
+ border-radius: 50rpx 0 0 50rpx;
|
|
|
+ background-color: #df5660;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnri {
|
|
|
+ border-radius: 0 50rpx 50rpx 0;
|
|
|
+ background-color: #5bb786;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .db {
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-top: 30rpx;
|
|
|
+
|
|
|
+ .jl {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sj {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #bfbfbf;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .kb {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #191a1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .last {
|
|
|
+ padding: 30rpx;
|
|
|
+ line-height: 1;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .lb {
|
|
|
+ width: 14rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ background-color: #000000;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+
|
|
|
+ .biaotou {
|
|
|
+ font-weight: 800;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .biwe {
|
|
|
+ width: 25%;
|
|
|
+
|
|
|
+ .zz {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nametip {
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .biwe:nth-child(1) {
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: left;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .biwe:nth-child(4) {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1px solid rgba(43, 42, 38, 0.52);
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-buttom {
|
|
|
+ width: 100rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ font-size: 16rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+
|
|
|
+ &.success {
|
|
|
+ background: #25b287;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.primary {
|
|
|
+ background: #01ebf6;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chz {
|
|
|
+ background: #191a1f;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+
|
|
|
+ .yue {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yes {
|
|
|
+ color: #fdaf41;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .choz {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
