You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
4.1 KiB
217 lines
4.1 KiB
<template>
|
|
<!-- <view class="page"> -->
|
|
<view class="container container-with-elep full-height-with-titile">
|
|
<view class="qr-card">
|
|
<view class="header">
|
|
<text class="title">{{languageData.account.qrCode}}</text>
|
|
<!-- <uni-icons type="help" size="20" color="#BA8D51" /> -->
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="qr-wrapper" v-if="qrcodeShow">
|
|
<QRCodePay ref="qrcode"></QRCodePay>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="">
|
|
<text class="btn-text" @click="getQrcode">{{languageData.settings.refresh}}</text>
|
|
</view>
|
|
<text class="validity">{{languageData.settings.tips}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="action-card" @click="toolBtn('personalPaymentCode')">
|
|
<view class="action-item">
|
|
<uni-icons type="wallet" size="24" color="white" />
|
|
<text class="action-text">{{languageData.account.qrCodePayment}}</text>
|
|
<uni-icons type="right" size="16" color="white" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- </view> -->
|
|
</template>
|
|
|
|
<script>
|
|
import QRCodePay from '@/components/QRCode/QRCodePay.vue'
|
|
export default {
|
|
components: {
|
|
QRCodePay
|
|
},
|
|
data() {
|
|
return {
|
|
qrcodeShow: false,
|
|
originalBrightness: null //当前亮度
|
|
}
|
|
},
|
|
created() {
|
|
this.languageData = this.$languageData;
|
|
uni.setNavigationBarTitle({
|
|
title: this.$languageData.navBar.payByQRCode
|
|
});
|
|
this.qrcodeShow = true;
|
|
this.getQrcode();
|
|
this.getAndSetBrightness();
|
|
},
|
|
onBackPress() {
|
|
this.BackPage();
|
|
return true;
|
|
},
|
|
onUnload() {
|
|
this.restoreBrightness();
|
|
},
|
|
methods: {
|
|
toolBtn(page) {
|
|
uni.navigateTo({
|
|
url: "/pages/account/" + page
|
|
})
|
|
},
|
|
getQrcode() {
|
|
this.$store.commit('SET_AMOUNT', 0);
|
|
this.$nextTick(() => {
|
|
this.$refs.qrcode.getUserInfo();
|
|
})
|
|
},
|
|
BackPage() {
|
|
uni.switchTab({
|
|
url: "/pages/home/index"
|
|
})
|
|
},
|
|
saveQrCode() {
|
|
this.$nextTick(() => {
|
|
this.$refs.qrcode.saveQrCode();
|
|
})
|
|
},
|
|
// 设置屏幕亮度
|
|
getAndSetBrightness() {
|
|
uni.setScreenBrightness({
|
|
value: 1, // 设置屏幕亮度为最亮
|
|
success: () => {
|
|
console.log("屏幕亮度已设置为最亮");
|
|
}
|
|
});
|
|
},
|
|
// 恢复屏幕亮度
|
|
restoreBrightness() {
|
|
this.originalBrightness = uni.getStorageSync("originalBrightness")
|
|
if (this.originalBrightness !== null) {
|
|
uni.setScreenBrightness({
|
|
value: this.originalBrightness,
|
|
success: () => {
|
|
console.log("恢复屏幕亮度");
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
height: 100%;
|
|
background-color: #FFD69C;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.page {
|
|
min-height: 100%;
|
|
background-color: #2345B2;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.divider {
|
|
border: 0;
|
|
border-top: 1px solid #dedede;
|
|
width: 100%;
|
|
}
|
|
|
|
.qr-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
color: #F9CA87;
|
|
}
|
|
|
|
.title {
|
|
font-size: 35rpx;
|
|
color: #000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.qr-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 80rpx;
|
|
padding: 20rpx;
|
|
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.refresh-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #F5F5F5;
|
|
border-radius: 8px;
|
|
padding: 0 32rpx;
|
|
height: 72rpx;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-text {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.validity {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.action-card {
|
|
margin-top: 7px;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
border-radius: 24rpx;
|
|
padding: 0 40rpx;
|
|
color: white;
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.action-text {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
margin-left: 16rpx;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|