增加转盘抽奖页面和编辑

2024-12-04 13:51:52 +08:00
parent 00280e133a
commit d558c99018
5 changed files with 938 additions and 771 deletions
--- a/src/api/disc-spinning.js
+++ b/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',
--- a/src/components/ali-oss-upload.vue
+++ b/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>
--- a/src/views/finance/components/pop-add-zhuanpan.vue
+++ b/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="2">红包</el-radio>
-            <el-radio label="9">其他</el-radio>
+          <el-radio :label="1">谢谢惠顾</el-radio>
+          <el-radio :label="2">红包</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>
-      <el-form-item label="中奖概率" v-if="form.type=='2'">
-        <el-input-number v-model="form.odds"></el-input-number>
+
+      <el-form-item label="中奖概率" required>
+        <el-input-number :min="0" :max="100" v-model="form.odds"></el-input-number>
+        <span>%</span>
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload
@@ -32,11 +32,7 @@
          :on-success="uploadSuccess"
        >
          <div class="upload-file-box">
-            <img
-              v-if="form.url"
-              :src="form.url"
-              class="avatar"
-            />
+            <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>
@@ -61,9 +57,8 @@ export default {
      form: {
        name: "",
        url: "",
-        ratio:1,
-        type:'1',
-        odds:0
+        type: 1,
+        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);
    },
  },
 };
@@ -96,12 +109,18 @@ export default {
  text-align: left;
 }
 .upload-file-box {
-    border-radius: 6px; width: 148px; height: 148px;
-    display: flex; justify-content: center; align-items: center;
+  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;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
  }
 }
 </style>
--- a/src/views/finance/financeList.vue
+++ b/src/views/finance/financeList.vue
@@ -48,7 +48,10 @@
              @click="phoneSelect"
              style="position: absolute; right: 18px; top: 8px"
            >
-            <icon-svg name="shousuo" class="site-sidebar__menu-icon"></icon-svg>
+              <icon-svg
+                name="shousuo"
+                class="site-sidebar__menu-icon"
+              ></icon-svg>
            </span>
          </div>
          <div style="position: relative; display: inline-block">
@@ -64,7 +67,10 @@
              @click="phoneSelect"
              style="position: absolute; right: 18px; top: 8px"
            >
-            <icon-svg name="shousuo" class="site-sidebar__menu-icon"></icon-svg>
+              <icon-svg
+                name="shousuo"
+                class="site-sidebar__menu-icon"
+              ></icon-svg>
            </span>
          </div>
          <div style="position: relative; display: inline-block">
@@ -80,7 +86,10 @@
              @click="phoneSelect"
              style="position: absolute; right: 18px; top: 8px"
            >
-            <icon-svg name="shousuo" class="site-sidebar__menu-icon"></icon-svg>
+              <icon-svg
+                name="shousuo"
+                class="site-sidebar__menu-icon"
+              ></icon-svg>
            </span>
          </div>
          <div style="position: relative; display: inline-block">
@@ -252,7 +261,9 @@
              <el-button
                size="mini"
                type="primary"
-              :disabled="!isAuth('financeList:refund') || scope.row.state != 0"
+                :disabled="
+                  !isAuth('financeList:refund') || scope.row.state != 0
+                "
                @click="refund(scope.row)"
                >拒绝
              </el-button>
@@ -286,7 +297,9 @@
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
-          <el-button type="primary" @click="refundNoticeTo()">确 定</el-button>
+            <el-button type="primary" @click="refundNoticeTo()"
+              >确 定</el-button
+            >
          </div>
        </el-dialog>
      </el-tab-pane>
@@ -451,7 +464,9 @@
              <div class="box_num">
                <div class="box_color">充值总金额</div>
                <div class="text_color">
-                <span>{{ rechgeData.sumMoney ? rechgeData.sumMoney : 0 }}</span
+                  <span>{{
+                    rechgeData.sumMoney ? rechgeData.sumMoney : 0
+                  }}</span
                  >元
                </div>
              </div>
@@ -503,7 +518,9 @@
                <div class="box_color">支付APP充值金额</div>
                <div class="text_color">
                  <span>{{
-                  rechgeData.zhiFuBaoAppMoney ? rechgeData.zhiFuBaoAppMoney : 0
+                    rechgeData.zhiFuBaoAppMoney
+                      ? rechgeData.zhiFuBaoAppMoney
+                      : 0
                  }}</span
                  >元
                </div>
@@ -552,7 +569,9 @@
              <div class="box_num">
                <div class="box_color">苹果充值金额</div>
                <div class="text_color">
-                <span>{{ rechgeData.iosMoney ? rechgeData.iosMoney : 0 }}</span
+                  <span>{{
+                    rechgeData.iosMoney ? rechgeData.iosMoney : 0
+                  }}</span
                  >元
                </div>
              </div>
@@ -772,23 +791,56 @@
          <!-- <el-button type="primary" @click="refAddZhuanpanOpen">添加抽奖项</el-button> -->
          <el-table :border="true" :data="zhuanpanData">
            <el-table-column label="名称" prop="name"></el-table-column>
+            <el-table-column label="图片">
+              <template slot-scope="scope">
+                <img style="width: 50px; height: 50px" v-if="scope.row.url" :src="scope.row.url" />
+              </template>
+            </el-table-column>
            <el-table-column label="类型">
              <template slot-scope="scope">
                <span>{{ returnTypeName(scope.row.type) }}</span>
              </template>
            </el-table-column>
+            <el-table-column label="数量">
+              <template slot-scope="scope">
+                <span>{{ scope.row.number }}</span>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column label="红包金额比例"  >
+              <template slot-scope="scope">
+                <span>{{ scope.row.ratio }}</span>
+              </template>
+           </el-table-column> -->
+            <el-table-column label="中奖概率">
+              <template slot-scope="scope">
+                <span>{{ scope.row.odds }}%</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="编辑">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="refAddZhuanpanOpen(scope.row)"
+                  >编辑</el-button
+                >
+              </template>
+            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

-  <pop-add-zhuanpan ref="refAddZhuanpan"></pop-add-zhuanpan>
+    <pop-add-zhuanpan
+      ref="refAddZhuanpan"
+      @refresh="zhuanPanRefresh"
+    ></pop-add-zhuanpan>
  </div>
 </template>

 <script>
-import $disc from '@/api/disc-spinning.js'
-import popAddZhuanpan from './components/pop-add-zhuanpan.vue'
+import $disc from "@/api/disc-spinning.js";
+import popAddZhuanpan from "./components/pop-add-zhuanpan.vue";
 export default {
  components: { popAddZhuanpan },
  data() {
@@ -919,17 +971,22 @@ export default {
    };
  },
  methods: {
+    zhuanPanRefresh() {
+      this.page = 1;
+      this.limit = 10;
+      this.zhuanPanInit();
+    },
    returnTypeName(type) {
      const $types = {
-        '1':'谢谢惠顾',
-        '2':'现金红包',
-        '3':'物品',
-      }
-      return $types[type]?$types[type]:''
+        1: "谢谢惠顾",
+        2: "现金红包",
+        3: "物品",
+      };
+      return $types[type] ? $types[type] : "";
    },
    // 转盘添加弹窗show
-    refAddZhuanpanOpen(){
-      this.$refs.refAddZhuanpan.open()
+    refAddZhuanpanOpen(item) {
+      this.$refs.refAddZhuanpan.open(item);
    },
    // 会员详情跳转
    updates(userId) {
@@ -1238,9 +1295,9 @@ export default {
    async zhuanPanInit() {
      const { data } = await $disc.getList({
        page: this.page,
-        limit:this.limit
-      })
-      this.zhuanpanData = data.data.records
+        limit: this.limit,
+      });
+      this.zhuanpanData = data.data.records;
    },
    handleClick(tab, event) {
      this.orderId = "";
--- a/src/views/mission/mission.vue
+++ b/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";