123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <template>
- <view class="pages">
- <u-navbar
- title="兑换码"
- :placeholder="true"
- :autoBack="true"
- @leftClick="leftClick"
- :safeAreaInsetTop="true"
- >
- </u-navbar>
- <view class="avatar-wrap u-flex">
- <u-avatar :src="vuex_member_info.avatar||'/static/img/defaultavatar.png'" size="138rpx"></u-avatar>
- </view>
- <view class="name">{{vuex_member_info.name}}</view>
- <view class="ayQrcode">
- <view class="code">
- 数字码:{{code}}
- </view>
- <ayQrcode ref="qrcode" :modal="modal_qr" :url="qrContent" @hideQrcode="hideQrcode" :height="200" :width="200" />
- </view>
- </view>
- </template>
- <script>
- import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
- export default {
- components:{
- ayQrcode
- },
- data() {
- return {
- code:'',
- staticUrl:this.$commonConfig.staticUrl,
- modal_qr: false,
- qrContent: {}, // 要生成的二维码值
- params:{
-
- },
- timer: null,
- }
- },
- onShow() {
- },
- onLoad(page) {
- this.code = page.qrContent;
- this.qrContent.qrcode = page.qrContent;
- this.qrContent = JSON.stringify(this.qrContent);
- let that = this;
- that.showQrcode();//一加载生成二维码
- // this.timer = setInterval(() => {
- // this.refreshCode()
- // }, 30000);
- },
- onUnload() {
- // 页面离开时停止计时器
- // clearInterval(this.timer)
- },
- methods: {
- leftClick(){
- // uni.reLaunch({url: `/pages/index/index`});
- },
- // 展示二维码
- showQrcode() {
- let _this = this;
- this.modal_qr = true;
- // uni.showLoading()
- setTimeout(function() {
- // uni.hideLoading()
- _this.$refs.qrcode.crtQrCode()
- }, 50)
- },
- //传入组件的方法
- hideQrcode() {
- this.modal_qr = false;
- },
- refreshCode(){
- this.qrContent = {};
- this.qrContent.qrcode = this.code;
- this.qrContent = JSON.stringify(this.qrContent);
- this.showQrcode()
- }
- }
- }
- </script>
- <style>
- page{
- background-color: #009AEF;
- }
- </style>
- <style lang="scss" scoped>
- .avatar-wrap{
- margin-top: 42rpx;
- margin-bottom: 8rpx;
- justify-content: center;
- }
- .name{
- font-size: 34rpx;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #FFFFFF;
- line-height: 48rpx;
- text-align: center;
- margin-bottom: 60rpx;
- }
- .ayQrcode{
- position: relative;
- background-color: #fff;
- margin: 40rpx 60rpx 20rpx;
- padding: 40rpx 40rpx 100rpx;
- border-radius: 20rpx;
- text-align: center;
- .code{
- padding-bottom: 38rpx;
- border-bottom: 1px dashed #ddd;
- margin-bottom: 90rpx;
- font-size: 30rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #666666;
- line-height: 42rpx;
- }
- .show-qrcode{
- overflow: hidden;
- display: flex;
- justify-content: center;
- /deep/ .box-qrcode{
- margin-left: 25px!important;
- }
- }
- &:before,&:after{
- content: '';
- width: 40rpx;
- height: 40rpx;
- background-color: #009AEF;
- position: absolute;
- top: 100rpx;
- border-radius: 50%;
- }
- &:before{
- left: -20rpx;
- }
- &:after{
- right: -20rpx;
- }
- }
- .tip{
- margin-top: 40rpx;
- font-size: 24rpx;
- font-weight: 400;
- color: #999999;
- line-height: 33rpx;
- .refresh-ico{
- width: 27rpx;
- height: 27rpx;
- margin-right: 10rpx;
- }
- }
- </style>
|