增加转盘抽奖页面和编辑

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;
+  height: 148px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   overflow: hidden;
   border: 1px solid #c0c4cc;
-    img{
+  img {
-        width: 100%; height: 100%; object-fit: cover;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }
 </style>

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>
@@ -771,26 +790,59 @@
         <div class="">
           <!-- <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="名称" prop="name"></el-table-column>
-           <el-table-column label="类型"  >
+            <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
-</div>
+      ref="refAddZhuanpan"
+      @refresh="zhuanPanRefresh"
+    ></pop-add-zhuanpan>
+  </div>
 </template>
 
 <script>
-import $disc from '@/api/disc-spinning.js'
+import $disc from "@/api/disc-spinning.js";
-import popAddZhuanpan from './components/pop-add-zhuanpan.vue'
+import popAddZhuanpan from "./components/pop-add-zhuanpan.vue";
 export default {
-  components:{popAddZhuanpan},
+  components: { popAddZhuanpan },
   data() {
     return {
       //抽奖转盘数据
@@ -919,17 +971,22 @@ export default {
     };
   },
   methods: {
-    returnTypeName(type){
+    zhuanPanRefresh() {
+      this.page = 1;
+      this.limit = 10;
+      this.zhuanPanInit();
+    },
+    returnTypeName(type) {
       const $types = {
-        '1':'谢谢惠顾',
+        1: "谢谢惠顾",
-        '2':'现金红包',
+        2: "现金红包",
-        '3':'物品',
+        3: "物品",
-      }
+      };
-      return $types[type]?$types[type]:''
+      return $types[type] ? $types[type] : "";
     },
     // 转盘添加弹窗show
-    refAddZhuanpanOpen(){
+    refAddZhuanpanOpen(item) {
-      this.$refs.refAddZhuanpan.open()
+      this.$refs.refAddZhuanpan.open(item);
     },
     // 会员详情跳转
     updates(userId) {
@@ -1235,12 +1292,12 @@ export default {
       this.rechargeSelect();
     },
     //转盘数据初始化
-    async zhuanPanInit(){
+    async zhuanPanInit() {
-      const {data}=await $disc.getList({
+      const { data } = await $disc.getList({
-        page:this.page,
+        page: this.page,
-        limit:this.limit
+        limit: this.limit,
-      })
+      });
-      this.zhuanpanData = data.data.records
+      this.zhuanpanData = data.data.records;
     },
     handleClick(tab, event) {
       this.orderId = "";

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";