|
|
@@ -10,14 +10,7 @@
|
|
|
|
|
|
<view class="qrcode-box">
|
|
|
<view class="qrcode">
|
|
|
- <uQrcode
|
|
|
- ref="qr"
|
|
|
- canvas-id="qr"
|
|
|
- :value="text"
|
|
|
- :size="size"
|
|
|
- @click="remake"
|
|
|
- @complete="complete($event)"
|
|
|
- >
|
|
|
+ <uQrcode ref="qr" canvas-id="qr" :value="text" :size="size" @click="remake" @complete="complete($event)">
|
|
|
</uQrcode>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -27,121 +20,142 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- text: 'https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&dyTabStr=MCwxLDMsMiw2LDQsNSw3LDgsOQ%3D%3D&word=giao',
|
|
|
- size: 200,
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- uQrcode,
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['location', 'avatar', 'nickname']),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- complete(e) {
|
|
|
- if (e.success) {
|
|
|
- console.log('生成成功');
|
|
|
- } else {
|
|
|
- console.log('生成失败');
|
|
|
- }
|
|
|
+ import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ text: 'https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&dyTabStr=MCwxLDMsMiw2LDQsNSw3LDgsOQ%3D%3D&word=giao',
|
|
|
+ size: 200,
|
|
|
+ };
|
|
|
},
|
|
|
- remake() {
|
|
|
- // const ref = this.$refs['qr'];
|
|
|
- // ref.remake();
|
|
|
+ components: {
|
|
|
+ uQrcode,
|
|
|
},
|
|
|
- save() {
|
|
|
- uni.showLoading({
|
|
|
- title: '保存中',
|
|
|
- mask: true,
|
|
|
- });
|
|
|
- const ref = this.$refs['qr'];
|
|
|
- ref.save({
|
|
|
- success: res => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon: 'success',
|
|
|
- title: '保存成功',
|
|
|
- });
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: JSON.stringify(err),
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['location', 'avatar', 'nickname']),
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ methods: {
|
|
|
+ complete(e) {
|
|
|
+ if (e.success) {
|
|
|
+ console.log('生成成功');
|
|
|
+ } else {
|
|
|
+ console.log('生成失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ remake() {
|
|
|
+ // const ref = this.$refs['qr'];
|
|
|
+ // ref.remake();
|
|
|
+ },
|
|
|
+ save() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '保存中',
|
|
|
+ mask: true,
|
|
|
+ });
|
|
|
+ const ref = this.$refs['qr'];
|
|
|
+ ref.save({
|
|
|
+ success: res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'success',
|
|
|
+ title: '保存成功',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: JSON.stringify(err),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.img-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 280rpx auto 0;
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- width: 90%;
|
|
|
- background: linear-gradient(to right, #f3904f, #3b4371);
|
|
|
- .img {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
+ .page {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: #fff;
|
|
|
+ z-index: -1;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 280rpx auto 0;
|
|
|
+ padding: 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
- margin-left: 12%;
|
|
|
+ width: 90%;
|
|
|
+ background: linear-gradient(to right, #f3904f, #3b4371);
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-left: 12%;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.img-text {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-left: 20rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-content: space-evenly;
|
|
|
- .name {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #fff;
|
|
|
+
|
|
|
+ .img-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-content: space-evenly;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ // color: #B5B5B5;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .address {
|
|
|
- // color: #B5B5B5;
|
|
|
- color: #fff;
|
|
|
- margin-top: 24rpx;
|
|
|
+
|
|
|
+ .qrcode-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30px;
|
|
|
+ margin-top: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-text {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #b7b7b7;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qrcode {
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 2px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .msg {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #9a9b9c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .save {
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
-}
|
|
|
-.qrcode-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 0 30px;
|
|
|
- margin-top: 100rpx;
|
|
|
-}
|
|
|
-.scan-text {
|
|
|
- text-align: center;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #b7b7b7;
|
|
|
- margin-top: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.qrcode {
|
|
|
- padding: 16px;
|
|
|
- background-color: #ffffff;
|
|
|
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 2px;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.msg {
|
|
|
- margin-top: 15px;
|
|
|
- font-size: 14px;
|
|
|
- color: #9a9b9c;
|
|
|
-}
|
|
|
-
|
|
|
-.save {
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
</style>
|
段倩文