一次性链接

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/cryptoJs/crypto-js.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports?module.exports=exports=e():"function"==typeof define&&define.amd?define([],e):t.CryptoJS=e()}(this,function(){var h,t,e,r,i,n,f,o,s,c,a,l,d,m,x,b,H,z,A,u,p,_,v,y,g,B,w,k,S,C,D,E,R,M,F,P,W,O,I,U,K,X,L,j,N,T,q,Z,V,G,J,$,Q,Y,tt,et,rt,it,nt,ot,st,ct,at,ht,lt,ft,dt,ut,pt,_t,vt,yt,gt,Bt,wt,kt,St,bt=bt||function(l){var t;if("undefined"!=typeof window&&window.crypto&&(t=window.crypto),!t&&"undefined"!=typeof window&&window.msCrypto&&(t=window.msCrypto),!t&&"undefined"!=typeof global&&global.crypto&&(t=global.crypto),!t&&"function"==typeof require)try{t=require("crypto")}catch(t){}function i(){if(t){if("function"==typeof t.getRandomValues)try{return t.getRandomValues(new Uint32Array(1))[0]}catch(t){}if("function"==typeof t.randomBytes)try{return t.randomBytes(4).readInt32LE()}catch(t){}}throw new Error("Native crypto module could not be used to get secure random number.")}var r=Object.create||function(t){var e;return n.prototype=t,e=new n,n.prototype=null,e};function n(){}var e={},o=e.lib={},s=o.Base={extend:function(t){var e=r(this);return t&&e.mixIn(t),e.hasOwnProperty("init")&&this.init!==e.init||(e.init=function(){e.$super.init.apply(this,arguments)}),(e.init.prototype=e).$super=this,e},create:function(){var t=this.extend();return t.init.apply(t,arguments),t},init:function(){},mixIn:function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e]);t.hasOwnProperty("toString")&&(this.toString=t.toString)},clone:function(){return this.init.prototype.extend(this)}},f=o.WordArray=s.extend({init:function(t,e){t=this.words=t||[],this.sigBytes=null!=e?e:4*t.length},toString:function(t){return(t||a).stringify(this)},concat:function(t){var e=this.words,r=t.words,i=this.sigBytes,n=t.sigBytes;if(this.clamp(),i%4)for(var o=0;o<n;o++){var s=r[o>>>2]>>>24-o%4*8&255;e[i+o>>>2]|=s<<24-(i+o)%4*8}else for(o=0;o<n;o+=4)e[i+o>>>2]=r[o>>>2];return this.sigBytes+=n,this},clamp:function(){var t=this.words,e=this.sigBytes;t[e>>>2]&=4294967295<<32-e%4*8,t.length=l.ceil(e/4)},clone:function(){var t=s.clone.call(this);return t.words=this.words.slice(0),t},random:function(t){for(var e=[],r=0;r<t;r+=4)e.push(i());return new f.init(e,t)}}),c=e.enc={},a=c.Hex={stringify:function(t){for(var e=t.words,r=t.sigBytes,i=[],n=0;n<r;n++){var o=e[n>>>2]>>>24-n%4*8&255;i.push((o>>>4).toString(16)),i.push((15&o).toString(16))}return i.join("")},parse:function(t){for(var e=t.length,r=[],i=0;i<e;i+=2)r[i>>>3]|=parseInt(t.substr(i,2),16)<<24-i%8*4;return new f.init(r,e/2)}},h=c.Latin1={stringify:function(t){for(var e=t.words,r=t.sigBytes,i=[],n=0;n<r;n++){var o=e[n>>>2]>>>24-n%4*8&255;i.push(String.fromCharCode(o))}return i.join("")},parse:function(t){for(var e=t.length,r=[],i=0;i<e;i++)r[i>>>2]|=(255&t.charCodeAt(i))<<24-i%4*8;return new f.init(r,e)}},d=c.Utf8={stringify:function(t){try{return decodeURIComponent(escape(h.stringify(t)))}catch(t){throw new Error("Malformed UTF-8 data")}},parse:function(t){return h.parse(unescape(encodeURIComponent(t)))}},u=o.BufferedBlockAlgorithm=s.extend({reset:function(){this._data=new f.init,this._nDataBytes=0},_append:function(t){"string"==typeof t&&(t=d.parse(t)),this._data.concat(t),this._nDataBytes+=t.sigBytes},_process:function(t){var e,r=this._data,i=r.words,n=r.sigBytes,o=this.blockSize,s=n/(4*o),c=(s=t?l.ceil(s):l.max((0|s)-this._minBufferSize,0))*o,a=l.min(4*c,n);if(c){for(var h=0;h<c;h+=o)this._doProcessBlock(i,h);e=i.splice(0,c),r.sigBytes-=a}return new f.init(e,a)},clone:function(){var t=s.clone.call(this);return t._data=this._data.clone(),t},_minBufferSize:0}),p=(o.Hasher=u.extend({cfg:s.extend(),init:function(t){this.cfg=this.cfg.extend(t),this.reset()},reset:function(){u.reset.call(this),this._doReset()},update:function(t){return this._append(t),this._process(),this},finalize:function(t){return t&&this._append(t),this._doFinalize()},blockSize:16,_createHelper:function(r){return function(t,e){return new r.init(e).finalize(t)}},_createHmacHelper:function(r){return function(t,e){return new p.HMAC.init(r,e).finalize(t)}}}),e.algo={});return e}(Math);function mt(t,e,r){return t^e^r}function xt(t,e,r){return t&e|~t&r}function Ht(t,e,r){return(t|~e)^r}function zt(t,e,r){return t&r|e&~r}function At(t,e,r){return t^(e|~r)}function Ct(t,e){return t<<e|t>>>32-e}function Dt(t,e,r,i){var n,o=this._iv;o?(n=o.slice(0),this._iv=void 0):n=this._prevBlock,i.encryptBlock(n,0);for(var s=0;s<r;s++)t[e+s]^=n[s]}function Et(t){if(255==(t>>24&255)){var e=t>>16&255,r=t>>8&255,i=255&t;255===e?(e=0,255===r?(r=0,255===i?i=0:++i):++r):++e,t=0,t+=e<<16,t+=r<<8,t+=i}else t+=1<<24;return t}function Rt(){for(var t=this._X,e=this._C,r=0;r<8;r++)ft[r]=e[r];e[0]=e[0]+1295307597+this._b|0,e[1]=e[1]+3545052371+(e[0]>>>0<ft[0]>>>0?1:0)|0,e[2]=e[2]+886263092+(e[1]>>>0<ft[1]>>>0?1:0)|0,e[3]=e[3]+1295307597+(e[2]>>>0<ft[2]>>>0?1:0)|0,e[4]=e[4]+3545052371+(e[3]>>>0<ft[3]>>>0?1:0)|0,e[5]=e[5]+886263092+(e[4]>>>0<ft[4]>>>0?1:0)|0,e[6]=e[6]+1295307597+(e[5]>>>0<ft[5]>>>0?1:0)|0,e[7]=e[7]+3545052371+(e[6]>>>0<ft[6Line truncated

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 v-if="trialCode == false" @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 v-if="trialCode == false" @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="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)