feat: indent计价. 商品轮播图点击可查看大图.

src/pages/indent-manage/indent/components/calcPrice/components/step1.vue

@@ -13,7 +13,11 @@
           :key="item"
         >
           <div class="product-image flex justify-center items-center">
-            <img :src="item" />
+            <img
+              class="cursor-pointer"
+              :src="item"
+              @click="imgClick(item)"
+            />
           </div>
         </el-carousel-item>
       </el-carousel>
@@ -221,12 +225,32 @@
         </div>
       </div>
     </div>
+
+    <el-dialog
+      v-model="bigImageVisible"
+      style="margin: 5vh auto"
+      width="800"
+    >
+      <div class="flex justify-center">
+        <img
+          :src="currentBigImage"
+          style="max-width: 100%; height: auto"
+          alt=""
+        />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from 'vue'
-import { ElTooltip, ElCarousel, ElCarouselItem, ElIcon } from 'element-plus'
+import { defineComponent, ref, watch } from 'vue'
+import {
+  ElTooltip,
+  ElCarousel,
+  ElCarouselItem,
+  ElIcon,
+  ElDialog,
+} from 'element-plus'
 import { Warning } from '@element-plus/icons-vue'
 import { $t } from '@/i18n/index'
 import commonTitle from './title.vue'
@@ -249,6 +273,15 @@ const {
   computedTotalBulk: any[]
 }>()
 const prefix = 'order.indent_calc.'
+const currentBigImage = ref('')
+const bigImageVisible = ref(false)
+const imgClick = (url: string) => {
+  currentBigImage.value = url
+  bigImageVisible.value = true
+}
+watch(bigImageVisible, () => {
+  if (!bigImageVisible.value) currentBigImage.value = ''
+})
 </script>
 
 <style lang="scss">