pc端修改

src/views/member/equitysetting/index.vue

@@ -97,7 +97,14 @@
     <!--      <el-button @click="resetForm">重置</el-button>-->
     <!--    </div>-->
     <!--新增会员等级弹窗-->
-    <el-dialog :title="formTitle" :close-on-click-modal="false" :visible.sync="open" width="779px" append-to-body @close="reset">
+    <el-dialog
+      :title="formTitle"
+      :close-on-click-modal="false"
+      :visible.sync="open"
+      width="779px"
+      append-to-body
+      @close="reset"
+    >
       <el-form ref="addForm" :model="form" :rules="rule" label-width="100px" class="demo-dynamic">
         <el-form-item prop="name" label="会员名称">
           <el-input v-model="form.name" placeholder="请输入会员名称" :maxlength="120" />
@@ -114,6 +121,72 @@
             <span style="margin-left: 12px">{{ '%' }}</span>
           </div>
         </el-form-item>
+        <el-form-item label="等级卡片" prop="rankCard">
+          <el-upload
+            class="upload-demo"
+            action="#"
+            :http-request="upload"
+            list-type="picture"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+            :disabled="randuploaddisable"
+          >
+            <!--          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
+            <div v-if="randUrl" style="position: relative">
+              <i
+                class="el-icon-error"
+                style="position: absolute;top: 5px;right: 5px;color: #efefef;z-index: 999"
+                @click="handleRemove"
+              />
+              <el-image
+                class="avatar"
+                :src="randUrl"
+                :preview-src-list="srcList"
+              />
+            </div>
+            <div v-else class="upload-trademark">
+              <i class="el-icon-plus" style="width: 20px;height: 20px;margin-top: 10px;" />
+              <div class="upload-trademark-title">上传图片</div>
+            </div>
+            <!--            <div v-if="!randUrl" slot="tip" class="el-upload__tip">支持文件格式：.jpg .gpeg-->
+            <!--              .png.单个文件不能超过4M,推荐上传文件大小：110px*83px-->
+            <!--            </div>-->
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="描述卡片" prop="membershipCard">
+          <el-upload
+            class="upload-demo"
+            action="#"
+            :http-request="memberUrlupload"
+            list-type="picture"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+            :disabled="memberUrluploaddisable"
+          >
+            <!--          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
+            <div v-if="memberUrlUrl" style="position: relative">
+              <i
+                class="el-icon-error"
+                style="position: absolute;top: 5px;right: 5px;color: #efefef;z-index: 999"
+                @click="handlememberRemove"
+              />
+              <el-image
+                class="avatar"
+                :src="memberUrlUrl"
+                :preview-src-list="memberUrlsrcList"
+              />
+            </div>
+            <div v-else class="upload-trademark">
+              <i class="el-icon-plus" style="width: 20px;height: 20px;margin-top: 10px;" />
+              <div class="upload-trademark-title">上传图片</div>
+            </div>
+            <!--            <div v-if="!randUrl" slot="tip" class="el-upload__tip">支持文件格式：.jpg .gpeg-->
+            <!--              .png.单个文件不能超过4M,推荐上传文件大小：110px*83px-->
+            <!--            </div>-->
+          </el-upload>
+        </el-form-item>
         <div style="text-align: center">
           <el-button type="primary" @click="addsubmitForm">提交</el-button>
           <el-button @click="resetForm">重置</el-button>
@@ -121,7 +194,14 @@
       </el-form>
     </el-dialog>
     <!-- 新增积分对换弹窗   -->
-    <el-dialog :title="dynamicTitle" :close-on-click-modal="false"  :visible.sync="opens" width="779px" append-to-body @close="resets">
+    <el-dialog
+      :title="dynamicTitle"
+      :close-on-click-modal="false"
+      :visible.sync="opens"
+      width="779px"
+      append-to-body
+      @close="resets"
+    >
       <el-form ref="dynamicFrom" :model="dynamicFrom" :rules="dynamicRule" label-width="100px" class="demo-dynamic">
         <el-form-item prop="amount" label="消费金额">
           <el-input
@@ -143,11 +223,31 @@
 </template>
 
 <script>
-import { queryIntegralList, addIntegralInfo, queryInfoById, updataInfo, deleteIntegralLogic, queryMemberBenefits, queryMemberLevel, addMemberBenefits, getMemberBenefits, updataMemberBenefits, deleteMemberBenefits } from '@/api/equitySeting/equitySeting'
+import {
+  queryIntegralList,
+  addIntegralInfo,
+  queryInfoById,
+  updataInfo,
+  deleteIntegralLogic,
+  queryMemberBenefits,
+  queryMemberLevel,
+  addMemberBenefits,
+  getMemberBenefits,
+  updataMemberBenefits,
+  deleteMemberBenefits
+} from '@/api/equitySeting/equitySeting'
+import { activityupload } from '@/api/activity'
 
 export default {
   data() {
     return {
+      memberUrluploaddisable: false,
+      memberUrlsrcList: [],
+      memberUrlUrl: '', // 等级卡片url
+      randuploaddisable: false,
+      srcList: [],
+      randUrl: '', // 等级卡片url
+      baseURl: 'http://192.144.239.97:20043/file/',
       dynamicTitle: '',
       formTitle: '',
       twoloading: true,
@@ -191,7 +291,9 @@ export default {
         discount: [
           { required: true, message: '请输入折扣', trigger: 'blur' },
           { pattern: /^100$|^(\d{1,2}(\.\d{1,2})?)$/, message: '数值在0到100之间，最多两位小数', trigger: 'blur' }
-        ]
+        ],
+        rankCard: [{ required: true, validator: this.Randimagerule, trigger: 'blur' }],
+        membershipCard: [{ required: true, validator: this.Memberimagerule, trigger: 'blur' }]
       },
       membershiplevel: [],
       dynamicValidate: [],
@@ -206,6 +308,74 @@ export default {
     this.getBenefitsList()
   },
   methods: {
+    Randimagerule(rule, value, callback) {
+      if (!this.randUrl) {
+        callback('请上传等级卡片')
+      } else {
+        callback()
+      }
+    },
+    Memberimagerule(rule, value, callback) {
+      if (!this.memberUrlUrl) {
+        callback('请上传描述卡片')
+      } else {
+        callback()
+      }
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+      this.randUrl = ''
+      setTimeout(() => {
+        this.randuploaddisable = false
+      }, 500)
+    },
+    handlememberRemove(file, fileList) {
+      console.log(file, fileList)
+      this.memberUrlUrl = ''
+      setTimeout(() => {
+        this.randuploaddisable = false
+      }, 500)
+    },
+    upload(file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      formData.append('temp', 'member')
+      // TODO: clear this log
+      console.log(`formData`, formData)
+      activityupload(formData).then(res => {
+        // TODO: clear this log
+        console.log(`res`, res)
+        if (res.code === 200) {
+          this.randUrl = res.data.url
+          this.randuploaddisable = true
+          this.memberUrlsrcList = []
+          this.memberUrlsrcList.push(this.randUrl)
+          this.form.membershipCard = res.data.businessId
+        }
+      })
+    },
+    memberUrlupload(file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      formData.append('temp', 'member')
+      // TODO: clear this log
+      console.log(`formData`, formData)
+      activityupload(formData).then(res => {
+        // TODO: clear this log
+        console.log(`res`, res)
+        if (res.code === 200) {
+          this.memberUrlUrl = res.data.url
+          this.memberUrluploaddisable = true
+          this.srcList = []
+          this.srcList.push(this.memberUrlUrl)
+          this.form.rankCard = res.data.businessId
+        }
+      })
+    },
+    handleAvatarSuccess(file) {
+    },
+    beforeAvatarUpload(file) {
+    },
     /** 获取会员等级列表**/
     getBenefitsList() {
       queryMemberBenefits().then(res => {
@@ -250,7 +420,7 @@ export default {
     },
     // 新增会员等级提交按钮
     addsubmitForm() {
-      console.log('form', this.form.businessId)
+      console.log('form', this.form)
       this.$refs.addForm.validate(valid => {
         if (valid) {
           if (this.form.businessId !== undefined) {
@@ -274,7 +444,7 @@ export default {
                 this.resetForm()
                 this.getBenefitsList()
                 this.open = false
-              } else if (res.code === null){
+              } else if (res.code === null) {
                 this.$message.error(res.message)
               }
             })
@@ -401,6 +571,18 @@ export default {
       getMemberBenefits(id).then(res => {
         console.log('查询到会员等级信息', res)
         this.form = res.data
+        if (this.form.randUrl != null) {
+          this.randUrl = this.baseURl + this.form.randUrl
+          this.randuploaddisable = true
+          this.srcList = []
+          this.srcList.push(this.randUrl)
+        }
+        if (this.form.memberUrl != null) {
+          this.memberUrlUrl = this.baseURl + this.form.memberUrl
+          this.memberUrluploaddisable = true
+          this.memberUrlsrcList = []
+          this.memberUrlsrcList.push(this.memberUrlUrl)
+        }
         this.open = true
       })
     },