增加转盘抽奖页面和编辑

src/api/disc-spinning.js

@@ -27,7 +27,7 @@ function get(id) {
         params: data
     })
 }
-function update(updatedata) {
+function update(data) {
     return $http({
         url: 'discSpinning/updateDiscSpinning',
         method: 'post',

src/components/ali-oss-upload.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-upload
+    class="avatar-uploader"
+    v-model="url"
+    action=""
+    :auto-upload="false"
+    :http-request="onFileSubmit"
+    :onChange="onFileChange"
+    :show-file-list="false"
+  >
+    <video
+      v-if="url"
+      :src="url"
+      class="avatar"
+      controls="controls"
+      style="width: 200px; height: 148px"
+    >
+      您的浏览器不支持视频播放
+    </video>
+    <i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
+    <el-progress
+      type="circle"
+      v-if="percentage > 0 && percentage <= 100"
+      :percentage="percentage"
+      color="#efefef"
+    ></el-progress>
+  </el-upload>
+</template>
+<script>
+import OSS from "@/utils/oss-upload.js";
+import { $getCredentials } from "@/api/oss.js";
+export default {
+  data() {
+    return {
+      url: "",
+      ossClient: undefined,
+      percentage: 0,
+    };
+  },
+  mounted() {
+    this.initOssClient();
+  },
+  methods: {
+    async onFileChange(data) {
+      console.log(data);
+      const date = new Date();
+      const start =
+        date.getFullYear() +
+        "" +
+        (date.getMonth() * 1 + 1) +
+        "" +
+        date.getDate();
+      const houzhui = "." + data.name.substr(data.name.lastIndexOf(".") + 1);
+      const name = start + "/" + getUUID() + houzhui;
+      const fileRes = await this.ossClient.partUpload(name, data.raw, (p) => {
+        this.percentage = Math.floor(p * 100);
+        // 这里可以根据进度做相应的处理，例如更新UI等
+      });
+      console.log(fileRes);
+      if (!fileRes) {
+        this.percentage = 0;
+        this.$notify({
+          title: "失败",
+          message: `上传阿里云失败`,
+          type: "error",
+        });
+        return;
+      }
+      if (fileRes.name == "cancel") {
+        return;
+      }
+      this.url = fileRes.replace(
+        "https://djvideo.oss-cn-shanghai.aliyuncs.com/",
+        "https://duanju.hnsiyao.cn/"
+      );
+    },
+    onFileSubmit(data) {
+      console.log("data");
+      console.log(data);
+    },
+    async initOssClient() {
+      console.log("initOssClient");
+      const { data } = await $getCredentials();
+      if (data.code == 0) {
+        const res = data.data;
+        console.log(res);
+        this.ossClient = new OSS({ ...res, stsToken: res.securityToken });
+      }
+    },
+  },
+};
+</script>

src/views/finance/components/pop-add-zhuanpan.vue

@@ -7,21 +7,21 @@
     :close-on-click-modal="true"
   >
     <el-form :model="form" label-width="100px">
-      <el-form-item label="描述">
+      <el-form-item label="名称" required>
         <el-input v-model="form.name"></el-input>
       </el-form-item>
       <el-form-item label="类型" required>
         <el-radio-group v-model="form.type">
-            <el-radio label="1">谢谢惠顾</el-radio>
+          <el-radio :label="1">谢谢惠顾</el-radio>
-            <el-radio label="2">红包</el-radio>
+          <el-radio :label="2">红包</el-radio>
-            <el-radio label="9">其他</el-radio>
+          <el-radio :label="3">物品</el-radio>
+          <!-- <el-radio label="9">其他</el-radio> -->
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="红包金额比例" v-if="form.type=='2'">
+
-        <el-input-number v-model="form.ratio"></el-input-number>
+      <el-form-item label="中奖概率" required>
-      </el-form-item>
+        <el-input-number :min="0" :max="100" v-model="form.odds"></el-input-number>
-      <el-form-item label="中奖概率" v-if="form.type=='2'">
+        <span>%</span>
-        <el-input-number v-model="form.odds"></el-input-number>
       </el-form-item>
       <el-form-item label="图片上传">
         <el-upload
@@ -32,11 +32,7 @@
           :on-success="uploadSuccess"
         >
           <div class="upload-file-box">
-            <img
+            <img v-if="form.url" :src="form.url" class="avatar" />
-              v-if="form.url"
-              :src="form.url"
-              class="avatar"
-            />
             <i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
           </div>
         </el-upload>
@@ -61,9 +57,8 @@ export default {
       form: {
         name: "",
         url: "",
-        ratio:1,
+        type: 1,
-        type:'1',
+        odds: 0,
-        odds:0
       },
     };
   },
@@ -72,18 +67,36 @@ export default {
       this.form.url = file.data;
     },
     open(item) {
+      console.log(item);
       this.dialogVisible = true;
       this.item = item;
+      this.form = {
+        ...item,
+      };
     },
     diaClose() {
       this.dialogVisible = false;
+      this.form = {
+        name: "",
+        url: "",
+        type: 1,
+        odds: 0,
+      };
     },
     async confirm() {
       if (!this.form.name) {
-        return this.$message.error("描述不能为空");
+        return this.$message.error("名称不能为空");
+      }
+      if (this.form.odds === "") {
+        return this.$message.error("中奖概率不能为空！");
+      }
+      const { name, url, type, odds, id } = this.form;
+      const { data } = await $disc.update({ name, url, type, odds, id });
+      if (data.code == 0) {
+        this.$message.success("修改成功");
+        this.$emit("refresh");
+        this.diaClose();
       }
-      const res = await $disc.add(this.form);
-      console.log(res);
     },
   },
 };
@@ -95,13 +108,19 @@ export default {
 ::v-deep .el-form-item__label {
   text-align: left;
 }
-.upload-file-box{
+.upload-file-box {
-    border-radius: 6px; width: 148px; height: 148px;
+  border-radius: 6px;
-    display: flex; justify-content: center; align-items: center;
+  width: 148px;
-    overflow: hidden;
+  height: 148px;
-    border: 1px solid #c0c4cc;
+  display: flex;
-    img{
+  justify-content: center;
-        width: 100%; height: 100%; object-fit: cover;
+  align-items: center;
-    }
+  overflow: hidden;
+  border: 1px solid #c0c4cc;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 </style>

src/views/mission/mission.vue

@@ -1726,7 +1726,6 @@
 <script>
 import OSS from "@/utils/oss-upload.js";
 import { $getCredentials } from "@/api/oss.js";
-import md5 from "js-md5";
 
 // 加密结果：aa888a86dca6e9d5ae216c23070e8c47
 import { quillEditor } from "vue-quill-editor";