添加复制手册号

src/views/studentList/studentDetail.vue

@@ -8,12 +8,7 @@
         <template #title>
           <div style="display: flex; align-items: center; font-size: 0.16rem">
             {{ username }}
-            <img
-              v-if="memberRankSettingId > 0"
-              style="width: 16px; height: 16px; margin-left: 3px"
-              src="./images/icon_member.png"
-              alt=""
-            />
+            <img v-if="memberRankSettingId > 0" style="width: 16px; height: 16px; margin-left: 3px" src="./images/icon_member.png" alt="" />
           </div>
         </template>
         <template #label>
@@ -32,23 +27,21 @@
     <van-cell-group inset style="margin: 0.1rem 0.12rem">
       <van-cell title="学员编号" :value="id"></van-cell>
       <van-cell title="分部" :value="organName"></van-cell>
-      <van-cell title="手机号" :value="phone"></van-cell>
+      <van-cell title="手机号" :value="phone" center>
+        <template #extra>
+          <svg @click="copyText(phone)" class="iconCopy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+            <g fill="none"><path d="M4 4.085V10.5a2.5 2.5 0 0 0 2.336 2.495L6.5 13h4.414A1.5 1.5 0 0 1 9.5 14H6a3 3 0 0 1-3-3V5.5a1.5 1.5 0 0 1 1-1.415zM11.5 2A1.5 1.5 0 0 1 13 3.5v7a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 5 10.5v-7A1.5 1.5 0 0 1 6.5 2h5z" fill="currentColor"></path></g>
+          </svg>
+        </template>
+      </van-cell>
       <van-cell title="年级" :value="currentGrade"></van-cell>
       <van-cell title="班级" :value="currentClass"></van-cell>
     </van-cell-group>
 
     <div class="title" v-if="musicGroupList.length > 0"><i></i>乐团信息</div>
     <van-cell-group inset style="margin: 0.1rem 0.12rem">
-      <van-cell
-        v-for="(item, index) in musicGroupList"
-        :key="index"
-        :title="item.musicGroupName"
-        :label="item.musicGroupId"
-        center
-      >
-        <span :class="item.userMusicGroupStatus">{{
-          item.userMusicGroupStatus | musicGroupStudentType
-        }}</span>
+      <van-cell v-for="(item, index) in musicGroupList" :key="index" :title="item.musicGroupName" :label="item.musicGroupId" center>
+        <span :class="item.userMusicGroupStatus">{{ item.userMusicGroupStatus | musicGroupStudentType }}</span>
       </van-cell>
     </van-cell-group>
   </div>
@@ -77,12 +70,57 @@ export default {
   async mounted() {
     try {
       const res = await findStudentMusicGroups({ userId: this.id });
-      console.log(res);
       this.musicGroupList = res.data || [];
     } catch {
       //
     }
   },
+  methods: {
+    copyText(text) {
+      // 数字没有 .length 不能执行selectText 需要转化成字符串
+      const textString = text.toString();
+      let input = document.querySelector("#copy-input");
+      if (!input) {
+        input = document.createElement("input");
+        input.id = "copy-input";
+        input.readOnly = true; // 防止ios聚焦触发键盘事件
+        input.style.position = "fixed";
+        input.style.left = "-1000px";
+        input.style.zIndex = "-1000";
+        // 为了处理，页面滑动到底部的问题
+        document.body.appendChild(input);
+        // document.querySelector('#input-copy-container')?.appendChild(input)
+      }
+
+      input.value = textString;
+      // ios必须先选中文字且不支持 input.select();
+      selectText(input, 0, textString.length);
+      // console.log(document.execCommand("copy"), "execCommand");
+      if (document.execCommand("copy")) {
+        document.execCommand("copy");
+        // showToast("复制成功");
+        this.$toast("复制成功");
+      }
+      input.blur();
+
+      // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
+      // 选择文本。createTextRange(setSelectionRange)是input方法
+      function selectText(textbox, startIndex, stopIndex) {
+        if (textbox.createTextRange) {
+          //ie
+          const range = textbox.createTextRange();
+          range.collapse(true);
+          range.moveStart("character", startIndex); //起始光标
+          range.moveEnd("character", stopIndex - startIndex); //结束光标
+          range.select(); //不兼容苹果
+        } else {
+          //firefox/chrome
+          textbox.setSelectionRange(startIndex, stopIndex);
+          textbox.focus();
+        }
+      }
+    },
+  },
 };
 </script>
 
@@ -149,4 +187,11 @@ export default {
   color: #fa6400;
   background: #fee1cd;
 }
+
+.iconCopy {
+  width: 0.18rem;
+  height: 0.18rem;
+  color: #333;
+  margin-left: 0.08rem;
+}
 </style>