MONSTER-ygh 10 meses atrás
pai
commit
46ee14b4e1

+ 2 - 2
src/myComponents/qqMap.vue

@@ -7,7 +7,7 @@
       style="width: 300px;margin-left: 20px;"
     />
     </div> -->
-    <div id="mapBox" style="width: 100%; height: 100%;"></div>
+    <div id="mapBox" ref="mapBox" style="width: 100%; height: 100%;"></div>
   </template>
    
   <script>
@@ -31,7 +31,7 @@
             
             let center = new TMap.LatLng(params.lat||39.916527, params.lng||116.397128)
             //定义map变量,调用 TMap.Map() 构造函数创建地图
-            this.map = new TMap.Map(document.getElementById('mapBox'), {
+            this.map = new TMap.Map(this.$refs.mapBox, {
                 center: center,//设置地图中心点坐标
                 zoom: 17.2,   //设置地图缩放级别
                 pitch: 43.5,  //设置俯仰角

+ 3 - 3
src/views/tourism/productManagement/cateringManagement.vue

@@ -41,12 +41,12 @@
 
           <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
             <el-table-column type="index" label="序号" align="center"  />
-            <el-table-column label="餐厅图片" align="center" key="shopLogo" prop="shopLogo" v-if="columns[0].visible" :show-overflow-tooltip="true">
+            <el-table-column label="餐饮门头照" align="center" key="shopHeadImg" prop="shopHeadImg" v-if="columns[0].visible" :show-overflow-tooltip="true">
                 <template slot-scope="scope">
                     <el-image
                     style="width: 60px; height: 40px"
-                    :src="scope.row.shopLogo"
-                    :preview-src-list="[scope.row.shopLogo]"
+                    :src="scope.row.shopHeadImg"
+                    :preview-src-list="[scope.row.shopHeadImg]"
                     fit="fill"></el-image>
                 </template>
             </el-table-column>

+ 67 - 1
src/views/tourism/productManagement/formBox/cateringManagementForm.vue

@@ -54,7 +54,34 @@
             </div>
             <span>建议上传图片尺寸40px X 40px,支持jpg/png/gif,支持5MB大小以内的图片上传</span>
           </el-form-item>
-
+          <el-form-item label="餐饮门头照:" prop="shopHeadImg">
+            <div
+            style="width: 120px;"
+            v-loading="actionUrlLoading_1"
+            element-loading-text="上传中..."
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+            >
+              <el-upload
+                class="avatar-uploader"
+                :action="actionUrl"
+                :data="{
+                  bucket: 'tourism'
+                }"
+                :show-file-list="false"
+                accept=".jpg, .png, jpeg"
+                :on-success="handleAvatarSuccess_1"
+                :on-progress="handleAvatarProgress_1"
+                :before-upload="beforeAvatarUpload_1"
+                :disabled="actionUrlLoading_1"
+                :on-error="handleAvatarError_1"
+                >
+                <img v-if="form.shopHeadImg" style="width: 100px;height: 100px;" :src="form.shopHeadImg" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </div>
+            <span>建议上传图片尺寸40px X 40px,支持jpg/png/gif,支持5MB大小以内的图片上传</span>
+          </el-form-item>
           <el-form-item label="门店宣传" prop="shopAdvImgs">
             <div style="display: flex;">
               <div 
@@ -264,6 +291,7 @@ export default {
         name: [{ required: true, message: "请输入门店名称", trigger: ["change","blur"] }],
         affiliationArea: [{ required: true, message: "请输入归属景区", trigger: ["change","blur"] }],
         shopLogo: [{ required: true, message: "请上传商铺Logo", trigger: ["change","blur"] }],
+        shopHeadImg: [{ required: true, message: "请上传餐饮门头照", trigger: ["change","blur"] }],
         shopAdvImgs: [{ required: true, message: "请上传门店宣传", trigger: ["change","blur"] }],
         shopDetail: [{ required: true, message: "请输须知说明", trigger: ["change","blur"] }],
         openTimeStart: [{ required: true, message: "请输入开始时间", trigger: ["change","blur"] }],
@@ -280,6 +308,7 @@ export default {
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
+      actionUrlLoading_1: false,
       actionUrlMoreLoading: false,
       shopLabel: '',
     };
@@ -291,6 +320,8 @@ export default {
       this.loadingText = "拼命加载数据中..."
       this.loading = true
       this.actionUrlLoading = false
+      this.actionUrlLoading_1 = false
+      this.actionUrlMoreLoading = false
       this.model = model
       this.formStatus = 0
       if(model=='ADD') { // 新增
@@ -301,6 +332,11 @@ export default {
           cancelOrderFlag: '-1'
         })
         this.formStatus = 1
+        this.$nextTick(()=>{
+            if(this.form.longitude&&this.form.latitude){
+              this.$refs.qqMapBox.setMakerLayer({},false)
+            }
+          })
       }else if(model=='EDIT') { // 新增
         let obj = {
           ...row
@@ -468,6 +504,36 @@ export default {
     handleAvatarError() {
       this.actionUrlLoading = false
     },
+    /**  上传图片 单张  */
+    handleAvatarSuccess_1(res, file) {
+      console.log("res, file",res, file)
+      this.actionUrlLoading_1 = false
+      if(res.code != 200) {
+        this.$set(this.form,'shopHeadImg',null) 
+      }else {
+        this.$set(this.form,'shopHeadImg',res.data.url) 
+      }
+      
+    },
+    beforeAvatarUpload_1(file) {
+      const isLt2M = file.size / 1024 / 1024 <= 5;
+      let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
+      let typeList = ['png','jepg','jpg','gif']
+      const isJPG = typeList.includes(testmsg);
+      if (!isJPG) {
+        this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片图片大小不能超过 5MB!');
+      }
+      return isJPG && isLt2M;
+    },
+    handleAvatarProgress_1(){
+      this.actionUrlLoading_1 = true
+    },
+    handleAvatarError_1() {
+      this.actionUrlLoading_1 = false
+    },
     /**  上传图片 多张  */
     beforeAvatarUploadMore(file) {
       const isLt2M = file.size / 1024 / 1024 <= 5;