From f8fd1bd1df45a1aa7b6717562722e61c7ee8b4c3 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期三, 15 十月 2025 10:20:31 +0800
Subject: [PATCH] 显示调整
---
manager/src/views/kitchen/kitchenVideo.vue | 78 ++++++++++++++++++++++++++++++++++++---
1 files changed, 72 insertions(+), 6 deletions(-)
diff --git a/manager/src/views/kitchen/kitchenVideo.vue b/manager/src/views/kitchen/kitchenVideo.vue
index d3e945a..5d9a7e1 100644
--- a/manager/src/views/kitchen/kitchenVideo.vue
+++ b/manager/src/views/kitchen/kitchenVideo.vue
@@ -112,6 +112,7 @@
<FormItem label="瑙嗛">
<video style="width: 150px;height: 150px"
controls
+ @loadedmetadata="getVideoDuration"
:poster="uploadVideoForm.showCoverUrl"
:autoplay="false"
id="remoteVideo" :src="uploadVideoForm.showVideoUrl"
@@ -251,9 +252,12 @@
@on-selection-change="showSelect"
>
<template slot-scope="{ row, index }" slot="typeList">
- <div v-for="(tag, index) in row.typeList" :key="'tag' + index" style="margin-top: 5px">
- <Tag color="red">{{ tag.typeName }}</Tag>
+ <div style="display: flex;flex-wrap: wrap">
+ <div v-for="(tag, index) in row.typeList" :key="'tag' + index" style="margin-top: 5px">
+ <Tag color="red">{{ tag.typeName }}</Tag>
+ </div>
</div>
+
</template>
<template slot-scope="{ row, index }" slot="videoFileKey">
<div class="play-text" @click="playVideo(row.videoFileKey, row.title)">鐐瑰嚮鎾斁</div>
@@ -283,9 +287,30 @@
<Button type="success" size="small" style="margin-right: 5px"
@click="deleteHealthVideo(row)">鍒犻櫎
</Button>
+ <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'"
+ @click="generalQrCode(row)">鐢熸垚浜岀淮鐮�
+ </Button>
</template>
- </Table>
+ </Table>
+ <Modal
+ v-model="showGeneralQrCode"
+ title="浜岀淮鐮�"
+ width="800"
+ :mask-closable="false"
+ >
+ <vue-qr
+ :text="QRCodeUrl"
+ :margin="0"
+ colorDark="#000"
+ colorLight="#fff"
+ :size="150"
+ ></vue-qr>
+ <div slot="footer">
+ <Button type="text" @click="closeGeneralQrCode">鍏抽棴</Button>
+ <!-- <Button type="primary" @click="generalQrCode">纭</Button>-->
+ </div>
+ </Modal>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
@@ -301,6 +326,8 @@
></Page>
</Row>
</Card>
+
+
</div>
</template>
@@ -312,12 +339,17 @@
import COS from 'cos-js-sdk-v5';
import {getFileKey} from "@/utils/file.js";
import {getKitchenTypeAllList} from "@/api/kitchen";
+import vueQr from "vue-qr";
export default {
name: "VideoList",
- components: {Editor},
+ components: {Editor,"vue-qr": vueQr},
data() {
return {
+ showGeneralQrCode:false,
+ codeUrl: this.QRcodeBaseUrl+ '/scanpage/cook',
+ QRCodeUrl:'',
+
videoDownForm: {
id: '',
reason: ''
@@ -393,7 +425,7 @@
checkKitchenType: [
{
required: true,
- message: '璇烽�夋嫨鍘ㄧ鏍囩',
+ message: '璇烽�夋嫨鍘ㄧ鏍囩涓斾笉鑳借秴杩�5涓�',
trigger: 'blur',
validator: (rule, value, callback) => {
console.log('楠岃瘉鍊�:-------------->', value, '绫诲瀷:', typeof value);
@@ -461,7 +493,7 @@
{
title: "瑙嗛鍒嗙被",
key: "typeList",
- width: 180,
+ width: 310,
slot: "typeList",
},
{
@@ -520,6 +552,7 @@
slot: "action",
align: "center",
width: 200,
+ fixed: "right",
},
],
data: [], // 琛ㄥ崟鏁版嵁
@@ -549,6 +582,23 @@
this.getTypes('')
},
methods: {
+ closeGeneralQrCode(){
+ this.showGeneralQrCode = false;
+ },
+
+ generalQrCode(row){
+ console.log(row)
+ this.QRCodeUrl = '';
+ this.showGeneralQrCode = true
+ console.log('-------------------->',row);
+ //shareType鍙兘浼氭槸鍔ㄦ�佺殑锛屼細鍔犲垽鏂棰戞潵婧�
+
+ this.QRCodeUrl = this.codeUrl + '?shareType=cook' + '&videoId='+ row.id + '&source=' + 'system';
+ //TODO 鏍规嵁瑙嗛淇℃伅涓殑 锛屼綔鑰卛d鑾峰緱鐢ㄦ埛 鍒ゆ柇 鏉ユ簮 锛岀敤鎴蜂綔鑰呯殑uniid涓簄ull鍒欐槸绯荤粺涓婁紶锛屼笉涓虹┖鍒欐槸鐢ㄦ埛涓婁紶
+ console.log(this.QRCodeUrl)
+ // console.log(this.QRCodeUrl)
+ },
+
// 绉掕浆x鍒唜绉�
formatSeconds(seconds) {
if (isNaN(seconds) || seconds < 0) return '0绉�';
@@ -580,6 +630,12 @@
this.$set(this.uploadVideoForm, 'showCoverUrl', '');
this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
},
+ calculateVideoFit(width, height) {
+ const videoRatio = width / height;
+ // 瑙勫垯2锛氱珫灞忚棰戯紙濡�9:16锛�
+ if (videoRatio < 0.8) return 'cover';
+ return 'contain';
+ },
//閲嶆柊涓婁紶瑙嗛
clearVideo() {
this.clearCoverImage();
@@ -588,6 +644,16 @@
this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
console.log(this.uploadVideoForm)
},
+ getVideoDuration(e){
+ const duration = this.$refs.healthVideoInfo.duration;
+ const videoWidth = this.$refs.healthVideoInfo.videoWidth;
+ const videoHeight = this.$refs.healthVideoInfo.videoHeight;
+ // 鏍规嵁瀹介珮姣旈�夋嫨瑙嗛濉厖妯″紡
+ const fitType = this.calculateVideoFit(videoWidth, videoHeight)
+ this.uploadVideoForm.videoFit = fitType
+ console.log('------瑙嗛淇℃伅3------------>', videoWidth,videoHeight,fitType)
+ this.uploadVideoForm.videoDuration = Math.floor(duration);
+ },
// 瑙嗛涓婃灦
videoUp(row) {
this.$Modal.confirm({
--
Gitblit v1.8.0