移动端适配

src/views/components/MFeature.vue

@@ -53,6 +53,10 @@ export default {
     async handlePutOn (item) {
       try {
         const { data } = await selectGlasses({ name: item.name })
+        if (!data || !data.length) {
+          this.$emit('error', '当前脸型没有适配镜框')
+          return
+        }
         this.$emit('click:try', { ...item, items: data })
       } catch (error) {
         this.$emit('error', error.message)

src/views/components/MTry.vue

@@ -14,12 +14,8 @@
             class="cover noMove"
             :class="{ 'cursor-pointer': canMove}"
             ref="cover"
-            @touchstart="onTouchStart"
-            @touchend="onTouchEnd"
-            @mousedown="onTouchStart"
-            @mouseup="onTouchEnd"
-            :width="tryGlassesSize.width"
-            :style="`--deg: ${tryGlassesSize.deg}deg`"
+            :width="tryGlassesSize.width * scale"
+            :style="`--deg: ${tryGlassesSize.deg}deg;`"
           >
           <img class="noMove" :src="src" alt="" :width="size.width" :height="size.height">
         </v-card>
@@ -99,6 +95,7 @@ export default {
   data () {
     return {
       isMobile: isMobile(),
+      scale: 1,
       clear: false,
       active: 0,
       canMove: false,
@@ -126,10 +123,10 @@ export default {
   inject: ['size'],
   computed: {
     faceType () {
-      return programType.find(e => e.value === this.chooseItem.facetype).face
+      return programType.find(e => e.value === this.chooseItem.facetype)?.face ?? ''
     },
     chooseItem () {
-      return this.item.items[this.active]
+      return this.item.items[this.active] ?? {}
     },
     tryGlassesSize () {
       const x1 = this.item.facial_points.cheek_left_3.x
@@ -148,6 +145,14 @@ export default {
           icon: this.clear ? 'mdi-eye-outline' : 'mdi-eye-off-outline',
           handle: this.onClear
         },
+        {
+          icon: 'mdi-plus',
+          handle: this.onPlus
+        },
+        {
+          icon: 'mdi-minus',
+          handle: this.onMinus
+        },
         {
           icon: 'mdi-swap-horizontal',
           handle: this.onChange
@@ -176,30 +181,42 @@ export default {
       if (this.isMobile) {
         this.$refs.content.$el.addEventListener('touchmove', this.onTouchMove)
         this.$refs.content.$el.addEventListener('touchend', this.onTouchLeave)
-        // this.$refs.cover.addEventListener('touchstart', this.onTouchStart)
-        // this.$refs.cover.addEventListener('touchend', this.onTouchEnd)
+        this.$refs.cover.addEventListener('touchstart', this.onTouchStart)
+        this.$refs.cover.addEventListener('touchend', this.onTouchEnd)
         return
       }
       this.$refs.content.$el.addEventListener('mousemove', this.onTouchMove)
       this.$refs.content.$el.addEventListener('mouseleave', this.onTouchLeave)
-      // this.$refs.cover.addEventListener('mousedown', this.onTouchStart)
-      // this.$refs.cover.addEventListener('mouseup', this.onTouchEnd)
+      this.$refs.cover.addEventListener('mousedown', this.onTouchStart)
+      this.$refs.cover.addEventListener('mouseup', this.onTouchEnd)
     })
   },
   beforeDestroy () {
     if (this.isMobile) {
       this.$refs.content.$el.removeEventListener('touchmove', this.onTouchMove)
       this.$refs.content.$el.removeEventListener('touchend', this.onTouchLeave)
-      // this.$refs.cover.removeEventListener('touchstart', this.onTouchStart)
-      // this.$refs.cover.removeEventListener('touchend', this.onTouchEnd)
+      this.$refs.cover.removeEventListener('touchstart', this.onTouchStart)
+      this.$refs.cover.removeEventListener('touchend', this.onTouchEnd)
       return
     }
     this.$refs.content.$el.removeEventListener('mousemove', this.onTouchMove)
     this.$refs.content.$el.removeEventListener('mouseleave', this.onTouchLeave)
-    // this.$refs.cover.removeEventListener('mousedown', this.onTouchStart)
-    // this.$refs.cover.removeEventListener('mouseup', this.onTouchEnd)
+    this.$refs.cover.addEventListener('touchstart', this.onTouchMove)
+    this.$refs.cover.addEventListener('touchend', this.onTouchLeave)
   },
   methods: {
+    onPlus () {
+      if (this.scale > 1.6) {
+        return
+      }
+      this.scale += 0.2
+    },
+    onMinus () {
+      if (this.scale < 0.4) {
+        return
+      }
+      this.scale -= 0.2
+    },
     // 清屏
     onClear () {
       this.clear = !this.clear
@@ -258,9 +275,11 @@ export default {
       const { left: glassLeft, top: glassTop } = cover.getBoundingClientRect()
       const clientHeight = cover.clientHeight
       const clientWidth = cover.clientWidth
+      const startX = this.isMobile ? e.touches[0].clientX : e.clientX
+      const startY = this.isMobile ? e.touches[0].clientY : e.clientY
       this.moveObj = {
-        startX: this.isMobile ? e.touches[0].clientX : e.clientX,
-        startY: this.isMobile ? e.touches[0].clientY : e.clientY,
+        startX,
+        startY,
         left: glassLeft - left + clientWidth / 2,
         top: glassTop - top + clientHeight / 2
       }