惊喜盒子类型任意

src/main/java/com/izouma/nineth/domain/Privilege.java

@@ -16,7 +16,7 @@ import java.util.List;
 @JsonInclude(JsonInclude.Include.NON_NULL)
 @JsonIgnoreProperties(value = {"hibernateLazyInitializer"}, ignoreUnknown = true)
 public class Privilege {
-    private Long   id;
+    private Long id;
 
     @ApiModelProperty("特权名称")
     private String name;
@@ -33,6 +33,8 @@ public class Privilege {
     @ApiModelProperty("类型")
     private String type;
 
+    private String anywhereType;
+
     @ApiModelProperty("图标")
     private List<String> icon;
 

src/main/vue/src/components/VideoUploadUrl.vue

@@ -0,0 +1,126 @@
+<template>
+    <div v-if="value" class="video-wrapper">
+        <video :src="value" controls></video>
+        <div class="icon-close" @click="remove">
+            <i class="el-icon-close"></i>
+        </div>
+    </div>
+    <el-upload
+        v-else
+        class="video-upload"
+        :action="videoUploadUrl"
+        :before-upload="beforeUpload"
+        :on-progress="onProgress"
+        :on-success="onSuccess"
+        :on-error="onError"
+        :headers="headers"
+        :show-file-list="false"
+        accept="video/*"
+        :disabled="uploading"
+    >
+        <div class="progress-wrapper" v-if="uploading">
+            <i class="el-icon-loading"></i>
+            <el-progress :stroke-width="4" :percentage="progress"></el-progress>
+        </div>
+        <el-button v-else type="primary" size="mini">上传 </el-button>
+    </el-upload>
+</template>
+<script>
+import resolveUrl from 'resolve-url';
+export default {
+    props: ['value'],
+    data() {
+        return {
+            videoUploadUrl: '',
+            uploading: false,
+            progress: 0
+        };
+    },
+    created() {
+        this.videoUploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
+    },
+    computed: {
+        headers() {
+            return {
+                Authorization: 'Bearer ' + localStorage.getItem('token')
+            };
+        }
+    },
+    methods: {
+        beforeUpload(file) {
+            console.log(file);
+            const isVideo = /video\/.*/.test(file.type);
+            const isLt100M = file.size / 1024 / 1024 < 100;
+
+            if (!isVideo) {
+                this.$message.error('请上传视频文件!');
+            }
+            if (!isLt100M) {
+                this.$message.error('上传视频大小不能超过 100MB!');
+            }
+            const allow = isVideo && isLt100M;
+            if (allow) {
+                this.progress = 0;
+                this.uploading = true;
+            }
+            return allow;
+        },
+        onSuccess(res, file, fileList) {
+            console.log(res, file, fileList);
+            this.$emit('input', res);
+            this.uploading = false;
+        },
+        onError(err) {
+            console.log(err);
+            this.uploading = false;
+        },
+        onProgress(e) {
+            console.log(e);
+        },
+        remove() {
+            this.$emit('input', null);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.video-wrapper {
+    width: 220px;
+    height: 140px;
+    position: relative;
+    .icon-close {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        color: white;
+        background: #f56c6c;
+        position: absolute;
+        right: -7px;
+        top: -7px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
+    }
+    video {
+        width: 100%;
+        height: 100%;
+        outline: none;
+        border-radius: 6px;
+        object-fit: cover;
+        overflow: hidden;
+        background: black;
+    }
+}
+.video-upload {
+    .progress-wrapper {
+        display: flex;
+        height: 28px;
+        align-items: center;
+        .el-progress {
+            width: 350px;
+        }
+    }
+}
+</style>

src/main/vue/src/main.js

@@ -10,6 +10,7 @@ import MultiUpload from '@/components/MultiUpload';
 import SingleUpload from '@/components/SingleUpload';
 import FileUpload from '@/components/FileUpload';
 import VideoUpload from '@/components/VideoUpload';
+import VideoUploadUrl from '@/components/VideoUploadUrl';
 import RichText from '@/components/RichText';
 import CropUpload from '@/components/CropUpload';
 import DistrictChoose from '@/components/DistrictChoose';
@@ -55,6 +56,7 @@ Vue.component('multi-upload', MultiUpload);
 Vue.component('single-upload', SingleUpload);
 Vue.component('file-upload', FileUpload);
 Vue.component('video-upload', VideoUpload);
+Vue.component('video-upload-url', VideoUploadUrl);
 Vue.component('rich-text', RichText);
 Vue.component('crop-upload', CropUpload);
 Vue.component('district-choose', DistrictChoose);

src/main/vue/src/views/CollectionEdit.vue

@@ -223,6 +223,31 @@
                 >
                     <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="privilegeForm.remark"></el-input>
                 </el-form-item>
+
+                <div v-if="privilegeForm.type === 'anywhere'">
+                    <el-form-item label="类型">
+                        <el-select v-model="privilegeForm.anywhereType">
+                            <el-option
+                                v-for="item in privilegeTypeOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="detail" label="详细内容" v-if="privilegeForm.anywhereType === 'text'">
+                        <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="privilegeForm.detail"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="detail" label="图片" v-if="privilegeForm.anywhereType === 'image'">
+                        <single-upload v-model="privilegeForm.detail"></single-upload>
+                    </el-form-item>
+                    <el-form-item prop="detail" label="视频" v-if="privilegeForm.anywhereType === 'video'">
+                        <video-upload-url v-model="privilegeForm.detail"></video-upload-url>
+                    </el-form-item>
+                    <el-form-item prop="detail" label="视频" v-if="privilegeForm.anywhereType === 'audio'">
+                        <file-upload :limit="1" v-model="privilegeForm.detail"></file-upload>
+                    </el-form-item>
+                </div>
             </el-form>
             <div slot="footer">
                 <el-button @click="showPrivilegeEditDialog = false">取消</el-button>
@@ -234,9 +259,10 @@
 <script>
 import resolveUrl from 'resolve-url';
 import ModelUpload from '../components/ModelUpload.vue';
+import FileUpload from '../components/FileUpload.vue';
 export default {
     name: 'CollectionEdit',
-    components: { ModelUpload },
+    components: { ModelUpload, FileUpload },
     created() {
         Promise.all([
             new Promise((resolve, reject) => {
@@ -435,7 +461,14 @@ export default {
                 detail: [{ required: true, message: '请填写内容' }],
                 remark: [{ required: true, message: '请填写说明' }]
             },
-            customUrl: resolveUrl(this.$baseUrl, 'upload/3dModel')
+            customUrl: resolveUrl(this.$baseUrl, 'upload/3dModel'),
+            privilegeType: '',
+            privilegeTypeOptions: [
+                { label: '文本', value: 'text' },
+                { label: '视频', value: 'video' },
+                { label: '音频', value: 'audio' },
+                { label: '图片', value: 'image' }
+            ]
         };
     },
     methods: {
@@ -568,7 +601,7 @@ export default {
 .inline-wrapper {
     .el-form-item {
         display: inline-block;
-        width: 250px
+        width: 250px;
     }
 }
 </style>

src/main/vue/src/views/PrivilegeOptionEdit.vue

@@ -136,7 +136,8 @@ export default {
                 { label: '文本', value: 'text' },
                 { label: '二维码', value: 'qrcode' },
                 { label: '验证码', value: 'code' },
-                { label: '铸造', value: 'exchange' }
+                { label: '铸造', value: 'exchange' },
+                { label: '任意', value: 'anywhere' }
             ]
         };
     },
@@ -152,7 +153,6 @@ export default {
         },
         submit() {
             let data = { ...this.formData };
-
             this.saving = true;
             this.$http
                 .post('/privilegeOption/save', data, { body: 'json' })

src/main/vue/src/views/PrivilegeOptionList.vue

@@ -104,7 +104,8 @@ export default {
                 { label: '文本', value: 'text' },
                 { label: '二维码', value: 'qrcode' },
                 { label: '验证码', value: 'code' },
-                { label: '铸造', value: 'exchange' }
+                { label: '铸造', value: 'exchange' },
+                { label: '任意', value: 'anywhere' }
             ]
         };
     },