|
|
@@ -13,6 +13,11 @@
|
|
|
<!-- 二维码 -->
|
|
|
<view class="qrcode-wrapper">
|
|
|
<QrCode v-if="qrCodeUrl" :text="qrCodeUrl"></QrCode>
|
|
|
+ <view class="qrcode-url">
|
|
|
+ <view class="url-text cursor-pointer" @click="openExternalUrl(qrCodeUrl)">{{ qrCodeUrl }}
|
|
|
+ </view>
|
|
|
+ <cwg-icon name="copy" class="cursor-pointer" :size="20" @click="copyUrl" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<!-- 说明 -->
|
|
|
<view class="notice">
|
|
|
@@ -40,9 +45,24 @@ import { ref, computed, nextTick } from 'vue'
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
import { customApi } from '@/service/custom';
|
|
|
import QrCode from "@/components/QrCode.vue";
|
|
|
+import { openExternalUrl } from '@/utils/openExternalUrl';
|
|
|
const { t, locale } = useI18n()
|
|
|
// 二维码链接
|
|
|
const qrCodeUrl = ref("");
|
|
|
+// 复制链接
|
|
|
+const copyUrl = () => {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: qrCodeUrl.value,
|
|
|
+ success: () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: t('Btn.item8'),
|
|
|
+ icon: "success",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
// API 响应码
|
|
|
const responseCode = ref(200);
|
|
|
// 设备元信息
|
|
|
@@ -153,7 +173,7 @@ defineExpose({
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- @import "@/uni.scss";
|
|
|
+@import "@/uni.scss";
|
|
|
.dialog-container {
|
|
|
width: 90vw;
|
|
|
max-width: px2rpx(800);
|
|
|
@@ -225,6 +245,8 @@ defineExpose({
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: px2rpx(12);
|
|
|
margin-bottom: px2rpx(32);
|
|
|
padding: px2rpx(24);
|
|
|
background: #fff;
|
|
|
@@ -235,6 +257,25 @@ defineExpose({
|
|
|
width: px2rpx(240);
|
|
|
height: px2rpx(240);
|
|
|
}
|
|
|
+
|
|
|
+ .qrcode-url {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: px2rpx(8);
|
|
|
+
|
|
|
+ .url-text {
|
|
|
+ max-width: px2rpx(300);
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ color: #495057;
|
|
|
+ line-height: 1.6;
|
|
|
+ text-align: center;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.notice {
|
