From 98bf7ac739a4328f23c86faa45fc19ca6acef8ba Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Wed, 13 Dec 2023 14:26:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9A=E5=BC=80=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=BF=E5=91=8A=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/setting/devise/visualization.vue | 185 ++++++++++++---------
 1 file changed, 108 insertions(+), 77 deletions(-)

diff --git a/src/views/setting/devise/visualization.vue b/src/views/setting/devise/visualization.vue
index ca36a3a..c37a6fa 100644
--- a/src/views/setting/devise/visualization.vue
+++ b/src/views/setting/devise/visualization.vue
@@ -233,85 +233,91 @@
             <div class="right-box">
               <div class="hot_imgs">
                 <div class="title">开屏广告设置</div>
-                  <div class="title-text">建议尺寸：750 * 1334px，拖拽图片可调整图片顺序哦，最多添加五张</div>
-                    <div class="list-box">
-                      <div>
-                        <el-form :model="formItem" label-width="80px">
-                          <el-form-item label="开屏广告:">
-                             <el-switch
-                              v-model="formItem.open_screen_switch"
-                              :active-value="1"
-                              :inactive-value="0"
-                              :width="53"
-                              active-text="开启"
-                              inactive-text="关闭"
-                            />
-                          </el-form-item>
-                          <el-form-item label="停留时间:">
-                              <el-input-number
-                                v-model.number="formItem.open_screen_time"
-                                type="number"
-                                size="small"
-                                :min="1"
-                                placeholder="请输入开屏广告时间"
-                                style="width: 150px"
-                              ></el-input-number>（单位：秒）
-                          </el-form-item>
-                          <el-form-item label="间隔时间:">
-                              <el-input-number
-                                v-model.number="formItem.open_screen_space"
-                                type="number"
-                                size="small"
-                                :min="0"
-                                placeholder="请输入广告间隔时间"
-                                style="width: 150px"
-                              ></el-input-number>（单位：小时）
-                              <span style="color:#999999;">备注：弹广告的频次，即N小时内进入不再显示广告页，0为每次进入都显示</span>
-                          </el-form-item>
-                        </el-form>
+                <div class="title-text">建议尺寸：750 * 1334px，拖拽图片可调整图片顺序哦，最多添加五张</div>
+                <div class="list-box">
+                  <div>
+                    <el-form :model="formItem" label-width="80px">
+                      <el-form-item label="开屏广告:">
+                        <el-switch v-model="formItem.open_screen_switch" :active-value="1" :inactive-value="0" :width="53" active-text="开启" inactive-text="关闭" />
+                      </el-form-item>
+                      <el-form-item label="广告类型:">
+                        <el-radio-group v-model="formItem.open_screen_type">
+                          <el-radio :label="0">图片</el-radio>
+                          <el-radio :label="1">视频</el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+                      <template v-if="formItem.open_screen_type == 1">
+                        <video v-if="formItem.open_screen_video" style="width:360px;height: 180px;" :src="formItem.open_screen_video" controls="controls">
+                          您的浏览器不支持 video 标签。
+                        </video>
+                      </template>
+                      <template v-else>
+                        <el-form-item label="停留时间:">
+                          <el-input-number
+                            v-model.number="formItem.open_screen_time"
+                            type="number"
+                            size="small"
+                            :min="1"
+                            placeholder="请输入开屏广告时间"
+                            style="width: 150px"
+                          ></el-input-number>
+                          （单位：秒）
+                        </el-form-item>
+                        <el-form-item label="间隔时间:">
+                          <el-input-number
+                            v-model.number="formItem.open_screen_space"
+                            type="number"
+                            size="small"
+                            :min="0"
+                            placeholder="请输入广告间隔时间"
+                            style="width: 150px"
+                          ></el-input-number>
+                          （单位：小时）
+                          <span style="color:#999999;">备注：弹广告的频次，即N小时内进入不再显示广告页，0为每次进入都显示</span>
+                        </el-form-item>
+                      </template>
+                    </el-form>
+                  </div>
+                  <draggable class="dragArea list-group" v-if="formItem.open_screen_type != 1" :list="tabList.list" group="peoples" handle=".move-icon">
+                    <div class="item" v-for="(item,index) in tabList.list" :key="index+ 'd'">
+                      <div class="move-icon">
+                        <span class="iconfont icondrag2"></span>
                       </div>
-                    <draggable class="dragArea list-group" :list="tabList.list" group="peoples"
-                        handle=".move-icon">
-                      <div class="item" v-for="(item,index) in tabList.list" :key="index+ 'd'">
-                        <div class="move-icon">
-                          <span class="iconfont icondrag2"></span>
+                      <div class="img-box" @click="modalPicTap('单选',index)">
+                        <img :src="item.pic" alt="" v-if="item.pic">
+                        <div class="upload-box" v-else>
+                          <i class="el-icon-camera-solid" />
                         </div>
-                        <div class="img-box" @click="modalPicTap('单选',index)">
-                          <img :src="item.pic" alt="" v-if="item.pic">
-                          <div class="upload-box" v-else>
-                            <i class="el-icon-camera-solid"/>
+                      </div>
+                      <div class="info">
+                        <div class="info-item">
+                          <span>图片名称：</span>
+                          <div class="input-box">
+                            <el-input v-model="item.name" size="small" placeholder="请填写名称" />
                           </div>
                         </div>
-                        <div class="info">
-                          <div class="info-item">
-                            <span>图片名称：</span>
-                            <div class="input-box">
-                                <el-input v-model="item.name" size="small" placeholder="请填写名称"/>
-                            </div>
-                          </div>
-                          <div class="info-item">
-                            <span>链接地址：</span>
-                            <div class="input-box" @click="link(index)">
-
-                                <el-input v-model="item.url" size="small" suffix-icon="el-icon-arrow-right" readonly
-                                        placeholder="选择链接"/>
-                            </div>
+                        <div class="info-item">
+                          <span>链接地址：</span>
+                          <div class="input-box" @click="link(index)">
+                            <el-input v-model="item.url" size="small" suffix-icon="el-icon-arrow-right" readonly placeholder="选择链接" />
                           </div>
                         </div>
-                        <div class="delect-btn" @click.stop="bindDelete(item,index)">
-                          <i class="el-icon-error"/>
-                        </div>
+                      </div>
+                      <div class="delect-btn" @click.stop="bindDelete(item,index)">
+                        <i class="el-icon-error" />
+                      </div>
                     </div>
                   </draggable>
                 </div>
-              <template>
-              <div class="add-btn">
-                <el-button class="btn-add" @click="addBox">添加图片</el-button>
+                <template>
+                  <div class="add-btn">
+                    <el-button v-if="formItem.open_screen_type != 1" class="btn-add" @click="addBox">添加图片</el-button>
+                    <el-button v-else class="btn-add" @click="modalVideo = true;">选择视频</el-button>
+                  </div>
+                </template>
               </div>
-            </template>
+            </div>
           </div>
-        </div>
-        </div>
         </el-col>
 				<el-col v-else>
         <!-- 右侧轮播图以及其他设置 -->
@@ -369,6 +375,12 @@
           </div>
         </el-card>
 		    <linkaddress ref="linkaddres" @linkUrl="linkUrl"></linkaddress>
+
+    <!--视频上传-->
+    <el-dialog :visible.sync="modalVideo" width="1024px" title="上传视频">
+      <uploadVideo @getVideo="getvideo" :isDiy="true"></uploadVideo>
+    </el-dialog>
+
     </div>
 </template>
 
@@ -389,9 +401,10 @@ import {
 } from "@/api/system";
 import draggable from "vuedraggable";
 import linkaddress from "@/components/linkaddress";
+import uploadVideo from "@/components/uploadVideo";
 export default {
   name: "list",
-  components: { draggable, linkaddress, WangEditor },
+  components: { draggable, linkaddress, WangEditor, uploadVideo },
   computed: {
     bgcolors() {
       return {
@@ -407,15 +420,16 @@ export default {
   },
   data() {
     return {
-      sideBar1:
-        window.localStorage.getItem("sidebarStyle") == "a" ? false : true,
+      modalVideo: false,
+
+      sideBar1: window.localStorage.getItem("sidebarStyle") == "a" ? false : true,
       formValidate: {
         content: "",
       },
       agreementList: [
-        { name: "隐私协议", type: "privacy" },
-        { name: "用户协议", type: "user" },
-        { name: "注销协议", type: "cancel" },
+        {name: "隐私协议", type: "privacy"},
+        {name: "用户协议", type: "user"},
+        {name: "注销协议", type: "cancel"},
       ],
       ruleValidate: {},
       myConfig: {
@@ -519,8 +533,7 @@ export default {
   mounted() {
     this.getGroupAll();
     let time = new Date().getTime() * 1000
-    this.url =
-      this.BaseURL + "/pages/columnGoods/HotNewGoods/index?inner_frame=1&type=new&time="+time;
+    this.url = this.BaseURL + "/pages/columnGoods/HotNewGoods/index?inner_frame=1&type=new&time="+time;
   },
   methods: {
     getEditorContent(data) {
@@ -692,7 +705,15 @@ export default {
     save() {
       this.loadingExist = true;
       let data = {data: this.tabList.list}
-      if(this.guide == 2){data.config={open_screen_switch: this.formItem.open_screen_switch,open_screen_time: this.formItem.open_screen_time,open_screen_space: this.formItem.open_screen_space}}
+      if(this.guide == 2){
+        data.config = {
+          open_screen_switch: this.formItem.open_screen_switch,
+          open_screen_time: this.formItem.open_screen_time,
+          open_screen_space: this.formItem.open_screen_space,
+          open_screen_type: this.formItem.open_screen_type,
+          open_screen_video : this.formItem.open_screen_video
+        }
+      }
       groupSaveApi(this.name,data)
       .then((res) => {
         this.loadingExist = false;
@@ -753,6 +774,16 @@ export default {
     getContent(val) {
       this.formValidate.content = val;
     },
+
+    getvideo(data) {
+      let _this = this;
+      _this.modalVideo = false;
+      this.formItem.open_screen_video = data
+      // this.editor.cmd.do(
+      //   "insertHTML",
+      //   `<video src="${_this.video}" controls style="max-width:100%;"/>`
+      // );
+    },
   },
 };
 </script>