增加阿里云oss上传

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

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    :title="title"
+    width="500px"
+    :visible.sync="dialogVisible"
+    @close="diaClose"
+    :close-on-click-modal="true"
+  >
+    <el-form :model="form" label-width="100px">
+      <el-form-item label="描述">
+        <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="2">红包</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>
+      <el-form-item label="中奖概率" v-if="form.type=='2'">
+        <el-input-number v-model="form.odds"></el-input-number>
+      </el-form-item>
+      <el-form-item label="图片上传">
+        <el-upload
+          class="avatar-uploader"
+          v-model="form.url"
+          :action="$http.adornUrl('alioss/upload')"
+          :show-file-list="false"
+          :on-success="uploadSuccess"
+        >
+          <div class="upload-file-box">
+            <img
+              v-if="form.url"
+              :src="form.url"
+              class="avatar"
+            />
+            <i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
+          </div>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+
+    <div class="dialog-footer">
+      <el-button @click="diaClose">取 消</el-button>
+      <el-button type="primary" @click="confirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import $disc from "@/api/disc-spinning.js";
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      title: "编辑转盘",
+      form: {
+        name: "",
+        url: "",
+        ratio:1,
+        type:'1',
+        odds:0
+      },
+    };
+  },
+  methods: {
+    uploadSuccess(file) {
+      this.form.url = file.data;
+    },
+    open(item) {
+      this.dialogVisible = true;
+      this.item = item;
+    },
+    diaClose() {
+      this.dialogVisible = false;
+    },
+    async confirm() {
+      if (!this.form.name) {
+        return this.$message.error("描述不能为空");
+      }
+      const res = await $disc.add(this.form);
+      console.log(res);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.el-form-item__label {
+  text-align: left;
+}
+::v-deep .el-form-item__label {
+  text-align: left;
+}
+.upload-file-box{
+    border-radius: 6px; width: 148px; height: 148px;
+    display: flex; justify-content: center; align-items: center;
+    overflow: hidden;
+    border: 1px solid #c0c4cc;
+    img{
+        width: 100%; height: 100%; object-fit: cover;
+    }
+}
+</style>