|
|
@@ -1,161 +1,181 @@
|
|
|
<template>
|
|
|
- <view class="container" v-if="loaded">
|
|
|
- <image @longtap="bc_code" class="backImg" :src="backImg"></image>
|
|
|
- <!-- <view class="tki-qrcode"><canvas @longtap="bc_code" canvas-id="qrcode" /></view> -->
|
|
|
- <view class="tki-qrcode">
|
|
|
- <tki-qrcode :key="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid" cid="tki-qrcode-canvas"
|
|
|
- ref="qrcode"
|
|
|
- :val="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid"
|
|
|
- :size="300" unit="upx" background="#ffffff" foreground="#333333" pdground="#333333" icon=""
|
|
|
- :iconSize="40" :lv="3" :onval="true" :loadMake="true" :usingComponents="true" />
|
|
|
+ <view class="content">
|
|
|
+ <!-- <view class="user-logo">
|
|
|
+ <image :src="userInfo.avatar" mode=""></image>
|
|
|
+ <view class="user-name">{{userInfo.nickname}}</view>
|
|
|
+ </view> -->
|
|
|
+ <image src="../../static/img/sharebase.png" mode="" class="sharebg" ></image>
|
|
|
+ <view class="code-warpper">
|
|
|
+ <view class="code-content">
|
|
|
+ <tki-qrcode
|
|
|
+ :cid="cid"
|
|
|
+ ref="qrcode"
|
|
|
+ :val="val"
|
|
|
+ :size="size"
|
|
|
+ :unit="unit"
|
|
|
+ :background="background"
|
|
|
+ :foreground="foreground"
|
|
|
+ :pdground="pdground"
|
|
|
+ :iconSize="iconSize"
|
|
|
+ :lv="lv"
|
|
|
+ :onval="onval"
|
|
|
+ :loadMake="loadMake"
|
|
|
+ :usingComponents="usingComponents"
|
|
|
+ @result="qrR"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="code">
|
|
|
+ 邀请码:{{userInfo.uid}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
+ <view class="btm">
|
|
|
+ <!-- 向商家出示二维码 -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
<script>
|
|
|
- import {
|
|
|
- spreadBanner
|
|
|
- } from '@/api/user.js';
|
|
|
- import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
+ import { orderDetail } from '@/api/order.js';
|
|
|
+ import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
|
|
|
+ import { mapState, mapMutations } from 'vuex';
|
|
|
export default {
|
|
|
- components: {
|
|
|
+ comments:{
|
|
|
tkiQrcode
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- url: '',
|
|
|
- backImg: '',
|
|
|
- loaded: false
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.spread();
|
|
|
+ id:'',
|
|
|
+ // code: '10250035810',
|
|
|
+ cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
|
|
|
+ size: 300, //生成的二维码大小
|
|
|
+ unit: 'upx', //大小单位尺寸
|
|
|
+ show: true,//默认使用组件中的image标签显示二维码
|
|
|
+ val: '', //要生成的内容
|
|
|
+ background: '#ffffff', //二维码背景色
|
|
|
+ foreground: '#333333', //二维码前景色
|
|
|
+ pdground: '#333333', //二维码角标色
|
|
|
+ icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
|
|
|
+ iconSize: 40, //二维码图标大小
|
|
|
+ lv: 3, //容错级别
|
|
|
+ onval: true, //监听val值变化自动重新生成二维码
|
|
|
+ loadMake: true, //组件初始化完成后自动生成二维码,val需要有值
|
|
|
+ usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
|
|
|
+ showLoading: false, //是否显示loading
|
|
|
+ loadingText: '二维码生成中', //loading文字
|
|
|
+ src: '', // 二维码生成后的图片地址或base64
|
|
|
+ ratio: 1, //页面比例用于计算
|
|
|
+ ctxSrc: '', //要显示的图片
|
|
|
+ loading: true,//是否载入图片中
|
|
|
+ canHeight: '',//画布高度
|
|
|
+ canWeidth: ''//画布宽度
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
|
|
|
- cpSize() {
|
|
|
- if (this.unit == "upx") {
|
|
|
- return uni.upx2px(this.size)
|
|
|
- } else {
|
|
|
- return this.size
|
|
|
- }
|
|
|
- },
|
|
|
+ ...mapState(['baseURL'])
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ console.log(this.userInfo)
|
|
|
+ // 判断是否已经登录
|
|
|
+ if (this.hasLogin) {
|
|
|
+ // this.loadBaseData();
|
|
|
+ // this.getSpreadCount()
|
|
|
+ console.log(this.userInfo)
|
|
|
+ // console.log(this.userInfo)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.val = this.baseURL + '/register?spread=' + this.userInfo.uid
|
|
|
+ // if(opt.id) {
|
|
|
+ // this.id = opt.id
|
|
|
+ // orderDetail({}, this.id).then(e => {
|
|
|
+ // this.val = e.data._verify_code;
|
|
|
+ // this.val = this.val.replace(/\s/g, '')
|
|
|
+ // });
|
|
|
+ // }else {
|
|
|
+ // this.val = opt.code.replace(/\s/g, '')
|
|
|
+ // }
|
|
|
+ // console.log(this.val )
|
|
|
},
|
|
|
methods: {
|
|
|
- spread() {
|
|
|
- let obj = this;
|
|
|
- uni.showLoading({
|
|
|
- title: '二维码生成中...'
|
|
|
- })
|
|
|
- spreadBanner({
|
|
|
- type: 2
|
|
|
- }).then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- uni.hideLoading()
|
|
|
- console.log(data)
|
|
|
- obj.backImg = data[0].pic;
|
|
|
- console.log(obj.backImg, 'obj.backImg')
|
|
|
- this.loaded = true
|
|
|
-
|
|
|
- }).catch(err => {
|
|
|
- console.log(err)
|
|
|
- uni.hideLoading()
|
|
|
- });
|
|
|
- },
|
|
|
- bc_code() {
|
|
|
- let that = this;
|
|
|
- console.log('保存二维码', this.backImg)
|
|
|
- uni.downloadFile({ //获得二维码的临时地址
|
|
|
- url: this.backImg,
|
|
|
- success: (res) => {
|
|
|
- //console.log('获取url',res)
|
|
|
- if (res.statusCode == 200) {
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: res.tempFilePath, //传入临时地址
|
|
|
- success() {
|
|
|
- that.$api.msg('保存成功') //封装的提示
|
|
|
- },
|
|
|
- fail() {
|
|
|
- that.$api.msg('保存失败')
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ // 生成二维码后返回base64
|
|
|
+ qrR(res) {
|
|
|
+ this.src = res;
|
|
|
},
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ background-color: #ff341a;
|
|
|
+ height: 100vh;
|
|
|
+ min-height: 100%;
|
|
|
}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
page {
|
|
|
- width: 100%;
|
|
|
+ height: 100vh;
|
|
|
min-height: 100%;
|
|
|
-
|
|
|
- .container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ background-color: #ff341a;
|
|
|
}
|
|
|
-
|
|
|
- .backImg {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .portrait {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- padding-top: 80rpx;
|
|
|
- padding-bottom: 30rpx;
|
|
|
-
|
|
|
+ .user-logo {
|
|
|
+ height: 300rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
image {
|
|
|
- width: 250rpx;
|
|
|
- height: 250rpx;
|
|
|
+ width: 102rpx;
|
|
|
+ height: 102rpx;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
+ .user-name {
|
|
|
+ padding-top: 25rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #2B2B2B;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- .text {
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 55rpx;
|
|
|
- letter-spacing: 15rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .uid-name {
|
|
|
- padding: 50rpx 0rpx;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- color: #FFFFFF;
|
|
|
+ .code-warpper {
|
|
|
+ width: 515rpx;
|
|
|
+ height: 515rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ // border: 3rpx solid #901B21;
|
|
|
+ padding-top: 46rpx;
|
|
|
+ position: absolute;
|
|
|
+ top:600rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ .code-content {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ // background-color: red;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .code {
|
|
|
+ padding-top: 31rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .copy-btn {
|
|
|
- color: #FFFFFF;
|
|
|
- background-color: #4BA6ED;
|
|
|
- border-radius: 50rpx;
|
|
|
- width: 170rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- margin: 0rpx auto;
|
|
|
+ .btm {
|
|
|
+ padding-top: 45rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-
|
|
|
- .tki-qrcode {
|
|
|
- position: fixed;
|
|
|
- bottom: 10%;
|
|
|
- left: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- canvas {
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- margin: auto;
|
|
|
-
|
|
|
- }
|
|
|
+ .sharebg {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 1206rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
</style>
|