一次性链接

components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanDivider: typeof import('vant/es')['Divider']
+    VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanStepper: typeof import('vant/es')['Stepper']
     VanSwipe: typeof import('vant/es')['Swipe']

package.json

@@ -34,6 +34,7 @@
     "@vitejs/plugin-vue": "^5.0.5",
     "axios": "^1.4.0",
     "chokidar": "^3.6.0",
+    "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
     "element-plus": "^2.4.2",
     "i18next": "^23.10.0",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       chokidar:
         specifier: ^3.6.0
         version: 3.6.0
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
       dayjs:
         specifier: ^1.11.10
         version: 1.11.13
@@ -2323,6 +2326,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -7301,6 +7307,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-js@4.2.0: {}
+
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}

src/api/badge.ts

@@ -103,3 +103,11 @@ export const creatOrder = (data: any) => {
     data,
   })
 }
+
+// 手机号确认
+export const trialPhone = (data: any) => {
+  return request('trial', {
+    method: 'POST',
+    data,
+  })
+}

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, onMounted } from 'vue'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { createRouterScroller } from 'vue-router-better-scroller'
@@ -104,4 +104,13 @@ app.use(createRouterScroller({
   },
 }))
 
+onMounted(() => {
+  window.addEventListener('beforeunload', handleBeforeUnload);
+});
+ 
+function handleBeforeUnload(_event: BeforeUnloadEvent) {
+  localStorage.remove('code')
+  localStorage.remove('trialCode')
+}
+
 app.mount('#app')

src/router/index.ts

@@ -7,6 +7,7 @@ import * as badgeRouter from './badge'
 import badge from '@/views/badge/index.vue'
 import {useStore} from '@/stores'
 import { config } from '@/config/config'
+import { localStorage } from '@/utils/local-storage'
 
 NProgress.configure({ showSpinner: true, parent: '#app' })
 
@@ -35,10 +36,14 @@ router.beforeEach((_to, _from, next) => {
   const store = useStore()
   const code = _to.query.code
   if (code) {
-    localStorage.setItem('code', code as string);
+    localStorage.set('code', code as string);
+  }
+  const trialCode = _to.query.trialCode
+  if (trialCode) {
+    localStorage.set('trialCode', trialCode as string);
   }
   console.log('code===>', code);
-  if (code) {
+  if (code || trialCode) {
     let url = store.redirectUrl()
 
     if (_to.path !== '/badge') {

src/utils/request.ts

@@ -53,10 +53,15 @@ const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosReques
   // const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
   // 如果 token 存在
   const code = localStorage.get('code')
+  const trialCode = localStorage.get('trialCode')
+  const userId = localStorage.get('userId')
   // 让每个请求携带自定义 token, 请根据实际情况修改
   if (code)
     config.headers['Authorization'] = code
-
+  if (trialCode)
+    config.headers['Authorization'] = trialCode
+  if (userId)
+    config.headers['Userid'] = userId
   return config
 }
 

src/views/badge/index.vue

@@ -5,6 +5,8 @@ import "vue-cropper-h5/dist/style.css"
 import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
 import * as badgeApi from '@/api/badge'
 import { onMounted, ref } from 'vue';
+import { localStorage } from '@/utils/local-storage'
+import CryptoJS from 'crypto-js'
 
 const show = ref(false)
 const imgShow = ref(false)
@@ -77,7 +79,7 @@ function goToPreview() {
     showToast('请先上传背景照片')
     return
   }
-  if (orderStat.remain_count <= 0) {
+  if (orderStat.value.remain_count <= 0) {
     showToast('剩余次数不足')
     return
   }
@@ -100,6 +102,9 @@ function getBlob(data) {
   }
   imgurl.value = data;
 }
+function getFile(data) {
+  console.log('getFile', data)
+}
 const pictureBg = ref(null)
 function getBgbase64Data(data) {
   pictureBg.value = data;
@@ -126,7 +131,6 @@ const getPid = async () => {
     loadingType: 'spinner',
     duration: 0,
   })
-  // kindId.value = checkId.value == 0 ? getRandomNumber() : checkId.value
   const params = {
     extend_value: isBgShow.value ? -1 : 0,
     kind_id: checkId.value,
@@ -202,6 +206,7 @@ const sendToOss = async (src: string, url: string) => {
     console.log('图片上传成功--------', response)
     
     if (--pendingUploads.value === 0 && !isAnotherAPICalled.value) {
+      isAnotherAPICalled.value = true
       const params = {
         pid: pid.value,
         kind_id: checkId.value,
@@ -277,7 +282,7 @@ const getKindList = () => {
       message: err.message,
       duration: 2000,
     })
-  }).finally((err) => {
+  }).finally(() => {
     
   })
 }
@@ -295,7 +300,7 @@ const getSundryList = () => {
       message: err.message,
       duration: 2000,
     })
-  }).finally((err) => {
+  }).finally(() => {
     
   })
 }
@@ -314,23 +319,78 @@ const getList = () => {
       message: err.message,
       duration: 2000,
     })
-  }).finally((err) => {
+  }).finally(() => {
+    
+  })
+}
+const trialCode = ref(false)
+const trialCodeValue = ref('')
+const getTrialCode = () => {
+  const value = localStorage.get('trialCode')
+  if (value) {
+    trialCode.value = true
+    trialCodeValue.value = value
+  } else {
+    getOrderStat()
+    getSizeList()
+  }
+}
+const mobile = ref('')
+const userId = ref('')
+const onBlur = async () => {
+  console.log(mobile.value);
+  if (!mobile.value) {
+    showToast('请输入手机号');
+    return;
+  }
+  const mobileReg = /^1[3-9]\d{9}$/;
+  if (!mobileReg.test(mobile.value)) {
+    showToast('请输入正确的手机号');
+    return;
+  }
+  await badgeApi.trialPhone({
+    phone: mobile.value
+  }).then((res: any) => {
+    const timestamp = Date.now()
+    const payload = JSON.stringify({ userId: res, timestamp })
+    userId.value = Encrypt(payload)
+    localStorage.set('userId', userId.value)
+  }).catch((err) => {
+    showToast({
+      message: err.message,
+      duration: 2000,
+    })
+  }).finally(() => {
     
   })
 }
+const key = CryptoJS.enc.Utf8.parse("123abcdefpua2025");
+const iv = CryptoJS.enc.Utf8.parse('DYgjCEIMVrj2W9xN');
+function Encrypt(word: string): string {  
+   let srcs = CryptoJS.enc.Utf8.parse(word);
+   let encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
+   return encrypted.ciphertext.toString();
+
+}
+function handleBeforeUnload(_event: BeforeUnloadEvent) {
+  localStorage.remove('code')
+  localStorage.remove('trialCode')
+  localStorage.remove('userId')
+}
 onMounted(() => {
   getKindList()
   getSundryList()
   getList()
-  getOrderStat()
-  getSizeList()
   openApp()
+  getTrialCode()
+  window.addEventListener('beforeunload', handleBeforeUnload);
 })
 </script>
 
 <template>
   <div class="photo-upload-page">
-    <div class="badge-size">
+    <div class="badge-size" v-if="trialCode == false">
       <div class="size-title">
         剩余兑换数量
       </div>
@@ -343,17 +403,9 @@ onMounted(() => {
             （剩余兑换：{{ item.remaining }}）
           </div>
         </div>
-        <!-- <div class="size-item">
-          <div class="size-text">
-            5cm
-          </div>
-          <div class="size-count">
-            （剩余兑换：2）
-          </div>
-        </div> -->
       </div>
     </div>
-    <div class="badge-info">
+    <div class="badge-info" v-if="trialCode == false">
       <div class="badge-item" @click="goToRecord">
         <div class="badge-title">
           设计图集
@@ -371,8 +423,22 @@ onMounted(() => {
         </div>
       </div>
     </div>
+    <div class="badge-phone" v-if="trialCode == true">
+      <van-field
+        label="手机号码"
+        type="number"
+        v-model="mobile"
+        placeholder="请输入手机号"
+        required
+        maxlength="11"
+        :rules="[{ required: true, message: '请输入手机号' }]"
+        @blur="onBlur"
+        @confirm="onBlur"
+      />
+      <p style="font-size: 12px; color: #000; margin-left: 16px;">注：需要先输入手机号才可体验徽章设计</p>
+    </div>
     <div style="height: 8px;background: #F2F2F2;" />
-    <div class="step-container">
+    <div class="step-container" v-if="trialCode == false">
       <div class="step-item active">
         <div class="step-num">
           1
@@ -498,7 +564,8 @@ onMounted(() => {
     <div class="design-action-bar">
       <div class="design-left">
         <img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
-        <span class="design-remaining">剩余{{ orderStat.remain_count || 0 }}次</span>
+        <span v-if="trialCode == false" class="design-remaining">剩余{{ orderStat.remain_count || 0 }}次</span>
+        <span v-if="trialCode == true" class="design-remaining">体验1次</span>
       </div>
       <button class="design-btn" @click="goToPreview">
         <span>开始设计</span>

src/views/badge/preview.vue

@@ -56,7 +56,7 @@
     <div style="padding: 0 16px;">
       <van-divider />
     </div>
-    <div class="order-section">
+    <div class="order-section" v-if="trialCode == false">
       <div class="order-title">订购数量</div>
       <div class="order-item" v-for="item in sizeList" :key="item.id">
         <span class="order-size">{{ item.size }}</span>
@@ -76,9 +76,9 @@
     <div style="height: 110px;"></div>
     <div class="confirm-box">
       <div class="action-section">
-        <button @click="reload" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
-        <button @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
-        <button @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
+        <button v-if="trialCode == false" @click="reload" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
+        <button v-if="trialCode == false" @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
+        <button v-if="trialCode == false" @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
       </div>
       <div class="btn-box">
         <button @click="confirm" :disabled="flag < 2" class="confirm-btn">确认选择</button>
@@ -426,6 +426,7 @@ const getImageList = () => {
       imageUrl.value = data.list[0].origin_url
       imageList.value = data.list
       key.value = data.list[0].key
+      localStorage.remove('userId')
     }
   }).catch((err) => {
     clearInterval(progressTimer.value)
@@ -438,6 +439,18 @@ const getImageList = () => {
     
   })
 }
+const trialCode = ref(false)
+const getTrialCode = () => {
+  const value = localStorage.get('trialCode')
+  if (value) {
+    trialCode.value = true
+  }
+}
+function handleBeforeUnload(_event: BeforeUnloadEvent) {
+  localStorage.remove('code')
+  localStorage.remove('trialCode')
+  localStorage.remove('userId')
+}
 
 const pid = ref(0)
 const route = useRoute()
@@ -450,6 +463,8 @@ onMounted(() => {
   progressList()
   getSizeList()
   getCompareImage()
+  getTrialCode()
+  window.addEventListener('beforeunload', handleBeforeUnload);
   timer.value = setInterval(() => {
     getImageList()
   }, 10000)