优化页面显示，增加需要展示的字段

src/views/store/storeConfig/userInfo.vue

@@ -112,11 +112,23 @@
             >
               <div class="avatar-wrapper" v-if="form.businessLicense">
                 <img :src="form.businessLicense" class="avatar" width="200px">
-                <div class="delete-mask" @click.stop="handleDelete5">
-                  <i class="el-icon-delete"></i>
+<!--                <div class="delete-mask" @click.stop="handleDelete5">-->
+<!--                  <i class="el-icon-delete"></i>-->
+<!--                </div>-->
+                <div class="button-group">
+                  <div class="preview-btn" @click.stop="previewImage(form.businessLicense)">
+                    <i class="el-icon-zoom-in"></i>
+                  </div>
+                  <div v-if="!isViewMode" class="delete-btn" @click.stop="handleDelete5">
+                    <i class="el-icon-delete"></i>
+                  </div>
                 </div>
               </div>
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <!-- 未上传图片时显示的默认图标 -->
+              <div v-else class="no-image-placeholder">
+                <span v-if="isViewMode">用户未上传</span>
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
             </el-upload>
           </el-form-item>
           <el-col :span="12">
@@ -160,18 +172,38 @@
                 :before-upload="beforeAvatarUpload">
                 <div class="avatar-wrapper" v-if="form.drugLicense">
                   <img :src="form.drugLicense" class="avatar" width="200px">
-                  <div class="delete-mask" @click.stop="handleDelete6">
-                    <i class="el-icon-delete"></i>
+<!--                  <div class="delete-mask" @click.stop="handleDelete6">-->
+<!--                    <i class="el-icon-delete"></i>-->
+<!--                  </div>-->
+                  <div class="button-group">
+                    <div class="preview-btn" @click.stop="previewImage(form.drugLicense)">
+                      <i class="el-icon-zoom-in"></i>
+                    </div>
+                    <div v-if="!isViewMode" class="delete-btn" @click.stop="handleDelete6">
+                      <i class="el-icon-delete"></i>
+                    </div>
                   </div>
                 </div>
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <!-- 未上传图片时显示的默认图标 -->
+                <div v-else class="no-image-placeholder">
+                  <span v-if="isViewMode">用户未上传</span>
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </div>
               </el-upload>
             </el-form-item>
+
+            <el-col :sapn="24">
+              <el-form-item label="药品经营许可证经营范围" prop="drugLicenseBusinessScope" style="margin-left: 5px">
+                <el-input v-model="form.drugLicenseBusinessScope" placeholder="请输入药品经营许可证经营范围" type="textarea"/>
+              </el-form-item>
+            </el-col>
+
             <el-col :span="14">
               <el-form-item label="药品经营许可证编号" prop="drugCode" style="margin-left: 5px">
                 <el-input v-model="form.drugCode" placeholder="请输入药品经营许可证编号" />
               </el-form-item>
             </el-col>
+
           </el-col>
           <el-col :span="12">
             <el-form-item label="药品经营许可证有效期" prop="drugLicenseExpiry">
@@ -198,11 +230,23 @@
                 :before-upload="beforeAvatarUpload">
                 <div class="avatar-wrapper" v-if="form.medicalDevice2">
                   <img :src="form.medicalDevice2" class="avatar" width="200px">
-                  <div class="delete-mask" @click.stop="handleDelete7">
-                    <i class="el-icon-delete"></i>
+<!--                  <div class="delete-mask" @click.stop="handleDelete7">-->
+<!--                    <i class="el-icon-delete"></i>-->
+<!--                  </div>-->
+                  <div class="button-group">
+                    <div class="preview-btn" @click.stop="previewImage(form.medicalDevice2)">
+                      <i class="el-icon-zoom-in"></i>
+                    </div>
+                    <div v-if="!isViewMode" class="delete-btn" @click.stop="handleDelete7">
+                      <i class="el-icon-delete"></i>
+                    </div>
                   </div>
                 </div>
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <!-- 未上传图片时显示的默认图标 -->
+                <div v-else class="no-image-placeholder">
+                  <span v-if="isViewMode">用户未上传</span>
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </div>
               </el-upload>
             </el-form-item>
             <el-col :sapn="24">
@@ -249,11 +293,24 @@
                 :before-upload="beforeAvatarUpload">
                 <div class="avatar-wrapper" v-if="form.medicalDevice3">
                   <img :src="form.medicalDevice3" class="avatar" width="200px">
-                  <div class="delete-mask" @click.stop="handleDelete2">
-                    <i class="el-icon-delete"></i>
+<!--                  <div class="delete-mask" @click.stop="handleDelete2">-->
+<!--                    <i class="el-icon-delete"></i>-->
+<!--                  </div>-->
+                  <div class="button-group">
+                    <div class="preview-btn" @click.stop="previewImage(form.medicalDevice3)">
+                      <i class="el-icon-zoom-in"></i>
+                    </div>
+                    <div v-if="!isViewMode" class="delete-btn" @click.stop="handleDelete2">
+                      <i class="el-icon-delete"></i>
+                    </div>
                   </div>
                 </div>
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <!-- 未上传图片时显示的默认图标 -->
+                <div v-else class="no-image-placeholder">
+                  <span v-if="isViewMode">用户未上传</span>
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </div>
+
               </el-upload>
             </el-form-item>
             <el-col :sapn="24">
@@ -290,11 +347,24 @@
                   :before-upload="beforeAvatarUpload">
                   <div class="avatar-wrapper" v-if="form.foodLicense">
                     <img :src="form.foodLicense" class="avatar" width="200px">
-                    <div class="delete-mask" @click.stop="handleDelete3">
-                      <i class="el-icon-delete"></i>
+<!--                    <div class="delete-mask" @click.stop="handleDelete3">-->
+<!--                      <i class="el-icon-delete"></i>-->
+<!--                    </div>-->
+                    <div class="button-group">
+                      <div class="preview-btn" @click.stop="previewImage(form.foodLicense)">
+                        <i class="el-icon-zoom-in"></i>
+                      </div>
+                      <div v-if="!isViewMode" class="delete-btn" @click.stop="handleDelete3">
+                        <i class="el-icon-delete"></i>
+                      </div>
                     </div>
                   </div>
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                  <!-- 未上传图片时显示的默认图标 -->
+                  <div v-else class="no-image-placeholder">
+                    <span v-if="isViewMode">用户未上传</span>
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                  </div>
+
                 </el-upload>
               </el-form-item>
               <el-form-item label="食品经营许可证/备案凭证编号" prop="foodCode" style="margin-left: 5px">
@@ -398,8 +468,14 @@
       <el-button type="primary" @click="submitForm">保 存</el-button>
       <el-button @click="close">关 闭</el-button>
     </div>
+
+    <!-- 修改图片预览对话框，增加更大的预览尺寸 -->
+    <el-dialog :visible.sync="imagePreviewVisible" width="1100px" append-to-body :modal-append-to-body="false" @close="imagePreviewVisible = false">
+      <img :src="previewImageUrl" style="width: 100%; height: auto; max-height: 700px; object-fit: contain;" />
+    </el-dialog>
+
   </div>
-</template>
+  </template>
 
 <script>
 import { addStore, updateStore, editData} from '@/api/store/store'
@@ -410,6 +486,8 @@ import { getStoreInfo, businessLicenseCheck} from '@/api/hisStore/store'
 export default {
   data() {
     return {
+      previewImageUrl: '', // 添加预览图片URL
+      imagePreviewVisible: false,// 添加图片预览对话框可见性控制
       switchMedicalValue: false,
       dialogVisible: false,
       switchValue: false,
@@ -440,6 +518,9 @@ export default {
       baseUrl: process.env.VUE_APP_BASE_API,
       // 表单校验
       rules: {
+        drugLicenseBusinessScope: [
+          { required: true, message: "药品经营许可证范围不能为空", trigger: "blur" }
+        ],
         businessLicense: [
           { required: true, message: '营业执照不能为空', trigger: 'blur' }
         ],
@@ -461,7 +542,6 @@ export default {
         foodLicenseExpiry: [
           { required: true, message: '食品经营许可证有效期不能为空', trigger: 'blur' }
         ],
-
         storeName: [
           { required: true, message: '店铺名称不能为空', trigger: 'blur' }
         ],
@@ -554,6 +634,12 @@ export default {
     });
   },
   methods: {
+    // 添加图片预览方法
+    previewImage(url) {
+      this.previewImageUrl = url;
+      this.imagePreviewVisible = true;
+    },
+
     handleAvatarSuccess(res, file) {
       if (res.code == 200) {
         this.form.logoUrl = res.url
@@ -666,6 +752,7 @@ export default {
         otherSpecialQualificationExpiry: null,//其它特殊资质有效期
         businessCode: null,
         drugCode:null,
+        drugLicenseBusinessScope: null,
         medicalDevice1Code:null,
         medicalDevice2Code:null,
         medicalDevice3Code:null,
@@ -951,4 +1038,62 @@ export default {
 .avatar-uploader {
   display: inline-block;
 }
+
+/* 并排按钮样式 */
+.button-group {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  gap: 5px;
+}
+
+.preview-btn,
+.delete-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+}
+
+.preview-btn:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.delete-btn:hover {
+  background-color: #f56c6c;
+}
+
+/* 无图片占位符样式 */
+.no-image-placeholder {
+  width: 200px;
+  height: 200px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  background-color: #fafafa;
+}
+
+.avatar-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.avatar {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
 </style>