协议和点击复制

src/views/cart/cart-confirm-agin/index.tsx

@@ -112,20 +112,21 @@ export default defineComponent({
 
             <div class={styles.payProtocol}>
               <ColProtocol v-model={agreeStatus.value}></ColProtocol>
+              <SubmitBar
+                buttonText={`结算(${list.length})`}
+                buttonColor="var(--van-primary)"
+                disabled={list.length === 0}
+                onSubmit={() => onSubmit()}
+              >
+                <div class={styles.confirmBottom}>
+                  合计{' '}
+                  <span class={styles['price-des']}>
+                    ¥{moneyFormat(calcAmount.payAmount)}
+                  </span>
+                </div>
+              </SubmitBar>
             </div>
-            <SubmitBar
-              buttonText={`结算(${list.length})`}
-              buttonColor="var(--van-primary)"
-              disabled={list.length === 0}
-              onSubmit={() => onSubmit()}
-            >
-              <div class={styles.confirmBottom}>
-                合计{' '}
-                <span class={styles['price-des']}>
-                  ¥{moneyFormat(calcAmount.payAmount)}
-                </span>
-              </div>
-            </SubmitBar>
+
             <div style={{ height: 'var(--van-submit-bar-height)' }}></div>
             <ColPopup v-model={authPopup.value}>
               <UserAuth onSuccess={onAuthSuccess} />

src/views/shop-mall/shop-order-detail/index.tsx

@@ -37,6 +37,49 @@ export default defineComponent({
       getOrderInfo()
     })
 
+    const copyText = text => {
+      // 数字没有 .length 不能执行selectText 需要转化成字符串
+      const textString = text.toString()
+      let input = document.querySelector('#copy-input') as HTMLInputElement
+      if (!input) {
+        input = document.createElement('input')
+        input.id = 'copy-input'
+        input.readOnly = true // 防止ios聚焦触发键盘事件
+        input.style.position = 'absolute'
+        input.style.left = '-1000px'
+        input.style.zIndex = '-1000'
+        document.body.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')
+        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()
+        }
+      }
+    }
+
+
     return () => (
       <>
         {items.value.length ? (
@@ -117,28 +160,21 @@ export default defineComponent({
                   value={order.value?.deliveryCompany}
                 ></Cell>
                 <Cell
-                class={styles.addressDetail}
+                  class={styles.addressDetail}
                   border={false}
                   title="运单编号："
                   v-slots={{
                     value: () => (
-                      <div class={styles.copyWrap}
+                      <div
+                        class={styles.copyWrap}
                         onClick={evt => {
-                          let copy = e => {
-                            e.clipboardData.setData('text/plain', order.value?.deliverySn)
-                            e.preventDefault()
-                            Toast("复制成功")
-                          }
-                          // 添加 copy 内容
-                          document.addEventListener('copy', copy)
-                          // // 执行 copy 命令
-                          document.execCommand('copy')
-                          // // 移除绑定事件
-                          document.removeEventListener('copy', copy)
+                          copyText(order.value?.deliverySn)
                         }}
                       >
-                        <span style={{marginRight: '8px'}}>{order.value?.deliverySn}</span>
-                        <Button size='mini'>点击复制</Button>
+                        <span style={{ marginRight: '8px' }}>
+                          {order.value?.deliverySn}
+                        </span>
+                        <Button size="mini">点击复制</Button>
                       </div>
                     )
                   }}