qimall/addons/ShortVideo/backend/views/default/details.php

<?php

/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * 名片
 * Author: james
 * Date: 2020-07-10
 * Time: 15:48
 */

?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1400px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>基础详情页</span>
        </div>
        <div class="table-body body-main">
            <!-- 左侧视频 -->
            <div class="main-left">
                <video :src="detailsInfo.video_url" controls="controls" ref="videoPlayer" @loadedmetadata="handleMetadataLoaded">
                </video>
                <!-- 关联商品才显示商品信息 -->
                <div v-if="detailsInfo.related_type==1 && detailsInfo.goods.id" class="video-top">
                    <div style="padding-right: 20px;">
                        <image style="width: 70px;height: 70px;" mode="aspectFill" :src="detailsInfo.goods.cover_pic"></image>
                    </div>
                    <div class="top-right">
                        <div class="top-title">{{detailsInfo.goods.name}}</div>
                        <div class="wrapper">
                            <div>商品id: </div>
                            <div id="text">{{detailsInfo.goods.id}}</div>
                            <textarea id="input" style="opacity: 0;width: 0;height: 0;">这是幕后黑手</textarea>
                            <el-button type="primary" size="mini" class="to-copy" @click="copyText()">复制</el-button>
                        </div>
                        <div class="detail-price">¥{{detailsInfo.goods.price}}</div>
                    </div>
                </div>

            </div>
            <div class="main-right">
                <div class="">
                    <el-form :model="form" label-width="100px">
                        <el-form-item label="标题">
                            <div>{{detailsInfo.title}}</div>
                        </el-form-item>
                        <el-form-item label="内容">
                            <div>{{detailsInfo.content}}</div>
                        </el-form-item>
                    </el-form>
                    <el-form :model="form" label-width="100px" style="display: flex;flex-wrap:wrap;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="视频id">
                                    <div>{{detailsInfo.id}}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="会员">
                                    <div>{{detailsInfo.nickname}}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="发布时间">
                                    <div>{{detailsInfo.created_at|formatDate}}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="审核时间">
                                    <div>{{detailsInfo.check_time|formatDate}}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="视频时长">
                                    <div>{{detailsInfo.duration_seconds}}秒</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="状态">
                                    <div>{{detailsInfo.status}}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="关联类型">
                                    <div v-if="detailsInfo.related_type==1">商品</div>
                                    <div v-if="detailsInfo.related_type==2">店铺</div>
                                    <div v-if="detailsInfo.related_type==3">地址</div>
                                    <div v-if="detailsInfo.related_type==4">暂无关联</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="分红比例">
                                    <div v-if="detailsInfo.share.share_type==2">{{detailsInfo.share.fixed_value}}元</div>
                                    <div v-else-if="detailsInfo.share.share_type==1">{{detailsInfo.share.percentage}}%</div>
                                    <div v-else>暂未开启</div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-form :model="form" label-width="100px" style="display: flex;flex-wrap:wrap;">
                        <el-form-item label="标签" prop="status">
                            <div style="margin: 20px 0">
                                <el-button v-for="item in detailsInfo.label_list" type="primary" plain>{{item.name}}</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <el-card class="box-card" v-loading="cardLoading" shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
                    <div class="form-body">
                        <el-form size="small" label-width="150px">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="最大限制">
                                        <div>单条视频不能超过最大限制</div>
                                    </el-form-item>
                                    <el-form-item>
                                        <div class="demo-input-suffix agent-setting-item">
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">总共</div>
                                                <el-input class="member-money repeat-input" v-model="detailsInfo.max_integral" placeholder="" :disabled="true">
                                                    <template slot="append">积分</template>
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">剩余积分</div>
                                                <el-input type="number" class="member-money repeat-input" v-model="detailsInfo.surplus_integral" placeholder="" :disabled="true">
                                                    <!-- <template slot="append">%</template> -->
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input item-mini">
                                                <div flex="cross:center">
                                                    <el-radio v-model="integralMine" :label="false">增加</el-radio>
                                                    <el-radio v-model="integralMine" :label="true">减少</el-radio>
                                                </div>
                                                <el-input type="number" class="repeat-input member-operation" v-model="form.operation_integral" :min="0.00" placeholder="">
                                                </el-input>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item>
                                        <div class="demo-input-suffix agent-setting-item">
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">总共</div>
                                                <el-input class="member-money repeat-input" v-model="detailsInfo.max_money" placeholder="" :disabled="true">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">剩余金额</div>
                                                <el-input type="number" class="member-money repeat-input" v-model="detailsInfo.surplus_money" placeholder="" :disabled="true">
                                                    <!-- <template slot="append">%</template> -->
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input item-mini">
                                                <div flex="cross:center">
                                                    <el-radio v-model="moneyMine" :label="false">增加</el-radio>
                                                    <el-radio v-model="moneyMine" :label="true">减少</el-radio>
                                                </div>
                                                <!-- <el-button v-if="!moneyMine" type="primary" icon="el-icon-arrow-left" @click="operationMoney(false)">增加</el-button> -->
                                                <!-- <el-button v-if="moneyMine" type="info" icon="el-icon-arrow-left" @click="operationMoney(false)">增加</el-button> -->
                                                <el-input type="number" class="repeat-input member-operation" v-model="form.operation_money" :min="0.00" placeholder="">
                                                </el-input>
                                                <!-- <el-button v-if="!moneyMine" type="info" @click="operationMoney(true)" :disabled="form.operation_money>detailsInfo.surplus_money">减少<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
                                                <!-- <el-button v-if="moneyMine" type="primary" @click="operationMoney(true)" :disabled="form.operation_money>detailsInfo.surplus_money">减少<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="用户观看奖励设置">
                                        <!-- <div>短视频直播带货八月分享购</div> -->
                                    </el-form-item>
                                    <el-form-item label="积分" prop="status">
                                        <el-switch v-model="form.open_integral_award" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                                        </el-switch>
                                        <div v-if="form.open_integral_award==1" class="demo-input-suffix agent-setting-item">
                                            <div class="agent-item-input">
                                                <el-input class="member-money repeat-input" type="number" v-model="form.watch_integral_sum" :min="0" placeholder="">
                                                    <template slot="append">积分</template>
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">观看</div>
                                                <el-input type="number" :min="0" class="member-money repeat-input" v-model="form.watch_integral" placeholder="">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">上级分享</div>
                                                <el-input type="number" :min="0" class="member-money repeat-input" v-model="form.watch_integral_one" placeholder="">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </div>
                                            <!-- <div class="agent-item-input">
                                                <div class="item-lab-title">二级</div>
                                                <el-input type="number" :min="0" class="member-money repeat-input" v-model="form.watch_integral_two" placeholder="">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </div> -->
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="金额" prop="status">
                                        <el-switch v-model="form.open_money_award" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                                        </el-switch>
                                        <div v-if="form.open_money_award==1" class="demo-input-suffix agent-setting-item">
                                            <div class="agent-item-input">
                                                <el-input class="member-money repeat-input" type="number" :min="0" v-model="form.watch_money_sum" placeholder="">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">观看</div>
                                                <el-input type="number" :min="0" class="member-money repeat-input" v-model="form.watch_money" placeholder="">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </div>
                                            <div class="agent-item-input">
                                                <div class="item-lab-title">上级分享</div>
                                                <el-input type="number" :min="0" class="member-money repeat-input" v-model="form.watch_money_one" placeholder="">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </div>
                                            <!-- <div class="agent-item-input">
                                                <div class="item-lab-title">二级</div>
                                                <el-input type="number" :min="0" class="member-money repeat-input" v-model="form.watch_money_two" placeholder="">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </div> -->
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-button class="button-item" :loading="btnLoading" type="primary" @click="editConfig" size="small">保存</el-button>
                        </el-form>
                    </div>
                </el-card>

            </div>
        </div>
    </el-card>

    <!-- 2.0 视频概况 -->
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">

        <!-- style="padding-top: 0;" -->
        <div class="table-body">
            <div slot="header">
                <span style="font-size: 25px;">视频概况</span>
            </div>
            <!-- <el-form size="small" :inline="true" flex="dir:left cross:center">
                <div class="item-box" flex="dir:left cross:center">
                    <el-date-picker @change="changeVideoDataTime" v-model="video_time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button type="primary" style="padding: 9px 15px !important;" @click="videoSearchs">搜索
                    </el-button>
                </div>
            </el-form> -->

            <div class="video_card">
                <el-row class="video-list" v-loading="loading">
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">观看人数</div>
                        <div class="video-item-num"><span>{{video_data.look_people_num}}</span>人</div>
                    </el-col>
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">收藏人数</div>
                        <div class="video-item-num"><span>{{video_data.like_num}}</span>人</div>
                    </el-col>
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">分享次数</div>
                        <div class="video-item-num"><span>{{video_data.share_num}}</span>次</div>
                    </el-col>
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">分享点击数</div>
                        <div class="video-item-num"><span>{{video_data.share_click_num}}</span>次</div>
                    </el-col>
                    <!-- <el-col v-if="detailsInfo.related_type==1" :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">累计订单金额</div>
                        <div class="video-item-num"><span>{{video_data.order_sum_money}}</span>元</div>
                    </el-col> -->
                    <el-col v-if="detailsInfo.related_type==1" :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">分红奖励</div>
                        <div class="video-item-num"><span>{{video_data.dividend_money}}</span>元</div>
                    </el-col>
                </el-row>
            </div>
            <div class="video_card">
                <div class="label video_card_title">观看奖励</div>
                <el-row class="video-list" v-loading="loading">
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">积分</div>
                        <div class="video-item-num"><span>{{video_data.look_integral_own}}</span>积分</div>
                    </el-col>
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">一级</div>
                        <div class="video-item-num"><span>{{video_data.look_integral_one}}</span>积分</div>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">二级</div>
                        <div class="video-item-num"><span>{{video_data.look_integral_two}}</span>积分</div>
                    </el-col> -->
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">金额</div>
                        <div class="video-item-num"><span>{{video_data.look_money_own}}</span>元</div>
                    </el-col>
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">一级</div>
                        <div class="video-item-num"><span>{{video_data.look_money_one}}</span>元</div>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">二级</div>
                        <div class="video-item-num"><span>{{video_data.look_money_two}}</span>元</div>
                    </el-col> -->
                </el-row>
            </div>
            <div v-if="detailsInfo.related_type==1" class="video_card">
                <div class="label video_card_title">订单数据</div>
                <el-row class="video-list" v-loading="loading">
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">订单数量</div>
                        <div class="video-item-num"><span>{{video_data.order_num}}</span>单</div>
                    </el-col>
                    <el-col :xs="24" :sm="6" :md="4" :lg="4">
                        <div class="video-item-title">订单金额</div>
                        <div class="video-item-num"><span>{{video_data.order_sum_money}}</span>元</div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-card>

    <!-- 2.1 视频交易转化 -->
    <!-- v-if="detailsInfo.related_type==1" -->
    <el-card v-if="detailsInfo.related_type==1" shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="table-body">
            <div slot="header">
                <span style="font-size: 25px;">视频交易转化</span>
            </div>
            <!-- <el-form size="small" :inline="true" flex="dir:left cross:center">
                <div class="item-box" flex="dir:left cross:center">
                    <el-date-picker @change="changeTransactionTime" v-model="transaction_time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button type="primary" style="padding: 9px 15px !important;" @click="transactionSearchs">搜索
                    </el-button>
                </div>
            </el-form> -->
            <div class="persen-main">
                <div class="persen-main-left">
                    <div class="main-item item-one">
                        <div class="item-data">
                            <span class="data-title">观看人数</span>
                            <span class="data-num">{{transaction_data.look_people_num||0}}</span>
                        </div>
                    </div>
                    <div class="main-item item-two">
                        <div class="item-data">
                            <span class="data-title">完播人数</span>
                            <span class="data-num">{{transaction_data.look_complete_num||0}}</span>
                            <span class="data-persen">{{transaction_data.look_proportion||0}}%</span>
                        </div>
                    </div>
                    <div class="main-item item-three">
                        <div class="item-data">
                            <span class="data-title">下单人数</span>
                            <span class="data-num">{{transaction_data.order_people||0}}</span>
                            <span class="data-persen">{{transaction_data.order_proportion||0}}%</span>
                        </div>
                        <div class="item-data">
                            <span class="data-title">下单金额(元)</span>
                            <span class="data-num">{{transaction_data.order_money||0}}</span>
                        </div>
                    </div>
                    <div class="main-item item-four">
                        <div class="item-data">
                            <span class="data-title">支付客户数</span>
                            <span class="data-num">{{transaction_data.pay_people||0}}</span>
                            <span class="data-persen">{{transaction_data.pay_proportion||0}}%</span>
                        </div>
                        <div class="item-data">
                            <span class="data-title">支付金额(元)</span>
                            <span class="data-num">{{transaction_data.pay_money||0}}</span>
                            <!-- <span class="data-persen">100%</span> -->
                        </div>
                        <div class="item-data">
                            <span class="data-title">客单价(元)</span>
                            <span class="data-num">{{transaction_data.pay_average_money||0}}</span>
                            <!-- <span class="data-persen">100%</span> -->
                        </div>
                    </div>
                </div>
                <div class="persen-main-right">
                    <div class="right-info">
                        <div class="main-right-one">
                            <div class="right-title">完播转换率</div>
                            <div class="right-title">{{transaction_data.look_proportion||0}}%</div>
                        </div>
                        <div class="main-right-two">
                            <div class="right-title">下单转换率</div>
                            <div class="right-title">{{transaction_data.order_proportion||0}}%</div>
                        </div>
                        <div class="main-right-three">
                            <div class="right-title">支付转换率</div>
                            <div class="right-title">{{transaction_data.pay_proportion||0}}%</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </el-card>

    <!-- 3.0 订单列表 -->
    <el-card v-if="detailsInfo.related_type==1" shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="table-body">
            <div slot="header" style="margin-bottom:20px;">
                <span style="font-size: 25px;">订单列表</span>
            </div>
            <el-form size="small" :inline="true" flex="dir:left cross:center">
                <div class="item-box" flex="dir:left cross:center">
                    <div class="label">会员</div>
                    <el-input style="width: 200px" v-model="search.nickname" placeholder="请输入会员呢称"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <div class="label">创建时间</div>
                    <el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button type="primary" style="padding: 9px 15px !important;" @click="searchs">搜索
                    </el-button>
                </div>
            </el-form>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;" @selection-change="handleSelectionChange">

                    <el-table-column label="商品" prop="goods_name" width="150" align="center">
                        <template slot-scope="scope">
                            <div class="order-goods-name">{{scope.row.goods_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="avatar_url,nickname" label="会员" width="200">
                        <template slot-scope="scope">
                            <div flex="box:first">
                                <div style="padding-right: 10px;">
                                    <com-image mode="aspectFill" :src="scope.row.avatar_url"></com-image>
                                </div>
                                <div flex="cross:top cross:center">
                                    {{scope.row.nickname}}
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="订单时间" prop="created_at" width="150" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="order_no" label="订单编号" width="200" align="center"></el-table-column>
                    <el-table-column prop="total_pay_price" label="订单金额" width="150" align="center"></el-table-column>
                    <el-table-column prop="money" label="佣金(元)" width="150" align="center"></el-table-column>
                    <el-table-column prop="award_money" label="分红奖励(元)" width="150" align="center"></el-table-column>

                    <el-table-column prop="is_settlement" label="状态" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.is_settlement==1">已结算</div>
                            <div v-if="scope.row.is_settlement==0">未结算</div>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="160" align="center">
                        <template slot-scope="scope">
                            <el-button @click="toOrderDetail(scope.row.order_id)" type="text" size="small">查看详情</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-tabs>
            <!-- 分页器 -->
            <div flex="box:last cross:center">
                <div></div>
                <div>
                    <el-pagination v-if="list.length > 0" style="display: inline-block;float: right;" background :page-size="pagination.pageSize" @current-change="pageChange" layout="prev, pager, next" :current-page="pagination.current_page" :page-count="pageCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            video_id: '', //视频id
            video_ids: '',
            detailsInfo: {}, //视频详情信息
            form: {}, //编辑的数据
            integralMine: false, //默认积分不是减少的操作
            moneyMine: false, //默认金额不是减少的操作
            totalIntegral: '', //总积分
            totalMoney: '', //总金额
            isMineIntegral: false, //操作积分方式，默认不是减小
            isMineMoney: false, //操作金额方式，默认不是减小

            page: 1,
            avatar: '',
            time: [], //本地存时间，请求时不发送
            search: {
                nickname: '', //昵称
                // title : '',//标题
                start_time: null,
                end_time: null,
            },
            loading: false,
            activeName: '-1',
            list: [], //列表数据
            recommend: [], //推荐标签列表
            pagination: null,

            btnLoading: false,
            cardLoading: false,

            video_time: [], //本地存时间，请求时不发送
            video_search: {
                start_time: null,
                end_time: null,
            },

            transaction_time: [], //本地存时间，请求时不发送
            transaction_search: {
                start_time: null,
                end_time: null,
            },
            transaction_data: {}, //视频转化返回数据

            video_data: { //视频概况数据
                dividend_money: 0,
                like_num: 0,
                look_integral_one: 0,
                look_integral_own: 0,
                look_integral_two: 0,
                look_money_one: 0,
                look_money_own: 0,
                look_money_two: 0,
                look_num: 0,
                order_money: 0,
                order_num: 0,
                order_sum_money: 0,
                share_click_num: 0,
                share_num: 0,
            },
            pageCount: 1, // 订单列表页码总数
        },

        filters: {
            // 秒级时间戳转标准时间格式
            formatDate: function(value) {
                let date = new Date(value * 1000);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            },

        },

        mounted() {
            this.video_id = getQuery('video_id');
            this.getDetails();
            console.log(this.page, this.search, '///////////////')


            this.getVideoData(); //获取视频概况
            this.getTransactionData(); //获取视频交易转化
            // this.getVideoInfo();
            this.$nextTick(() => {
                    const video = document.getElementById('myVideo');
                    // if (element) {
                    // // 进行你的操作
                    // } else {
                    // console.error('Element not found');
                    // }
                    console.log('video----',video);
                });
        },


        methods: {
            // 0.0.1 一键复制
            copyText() {
                var text = document.getElementById("text").innerText;
                var input = document.getElementById("input");
                input.value = text; // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
                this.$message.success('已成功复制商品id');
            },

            // 0.0.2 操作积分的方法-是否为减少
            operationIntegral(e) {
                if (!e) { //增加
                    // this.totalIntegral = parseFloat(this.detailsInfo.surplus_integral) + parseFloat(this.form.operation_integral);
                } else {
                    if (parseFloat(this.form.operation_integral) > parseFloat(this.detailsInfo.surplus_integral)) {
                        this.$message.error('减少积分不可超过剩余积分');
                        this.form.operation_integral = 0.00;
                        return
                    } else {
                        // this.totalIntegral = parseFloat(this.detailsInfo.surplus_integral) - parseFloat(this.form.operation_integral);
                    }
                }
                this.integralMine = e; //点击设置增加或减少的状态
            },
            // 0.0.2 操作金额的方法-是否为减少
            operationMoney(e) {
                if (!e) { //增加
                    // this.totalMoney = parseFloat(this.detailsInfo.surplus_money) + parseFloat(this.form.operation_money);
                } else {
                    if (parseFloat(this.form.operation_money) > parseFloat(this.detailsInfo.surplus_money)) {
                        this.$message.error('减少金额不可超过剩余金额');
                        this.form.operation_money = 0.00;
                        return
                    } else {
                        // this.totalMoney = parseFloat(this.detailsInfo.surplus_money) - parseFloat(this.form.operation_money);
                    }
                }
                this.moneyMine = e; //点击设置增加或减少的状态
            },


            // 编辑表单数据
            editConfig() {
                // console.log(this.form);
                let postData = {};
                postData['id'] = this.video_id;
                let operation_money_setting = !this.form.operation_money ? 0 : JSON.parse(JSON.stringify(parseInt(this.form.operation_money)));
                let operation_integral_setting = !this.form.operation_integral ? 0 : JSON.parse(JSON.stringify(parseInt(this.form.operation_integral)));
                postData['operation_money'] = this.moneyMine ? operation_money_setting * (-1) : operation_money_setting * 1;
                postData['operation_integral'] = this.integralMine ? operation_integral_setting * (-1) : operation_integral_setting * 1;
                postData['open_integral_award'] = parseInt(this.form.open_integral_award);
                postData['open_money_award'] = parseInt(this.form.open_money_award);
                postData['duration_seconds'] = this.form.duration_seconds;
                // 开关打开且不为100%
                if (this.form.open_integral_award == 1) {
                    // postData['watch_integral_sum'] = parseInt(this.form.watch_integral_sum);
                    postData['watch_integral_sum'] = this.form.watch_integral_sum;
                    postData['watch_integral'] = !this.form.watch_integral ? 0 : JSON.parse(JSON.stringify(parseInt(this.form.watch_integral)));
                    postData['watch_integral_one'] = !this.form.watch_integral_one ? 0 : JSON.parse(JSON.stringify(parseInt(this.form.watch_integral_one)));
                    postData['watch_integral_two'] = !this.form.watch_integral_two ? 0 : JSON.parse(JSON.stringify(parseInt(this.form.watch_integral_two)));
                    let watch_integral_percent = parseInt(postData.watch_integral) + parseInt(postData.watch_integral_one) + parseInt(postData.watch_integral_two);
                    if (watch_integral_percent != 100) {
                        this.$message.error('积分观看奖励设置比例累计应为100%');
                        return
                    }
                }
                if (this.form.open_money_award == 1) {
                    // postData['watch_money_sum'] = parseInt(this.form.watch_money_sum);
                    postData['watch_money_sum'] = this.form.watch_money_sum;
                    postData['watch_money'] = !this.form.watch_money ? 0 : parseInt(this.form.watch_money);
                    postData['watch_money_one'] = !this.form.watch_money_one ? 0 : parseInt(this.form.watch_money_one);
                    postData['watch_money_two'] = !this.form.watch_money_two ? 0 : parseInt(this.form.watch_money_two);
                    let watch_money_percent = parseInt(postData.watch_money) + parseInt(postData.watch_money_one) + parseInt(postData.watch_money_two);
                    if (watch_money_percent != 100) {
                        this.$message.error('金额观看奖励设置比例累计应为100%');
                        return
                    }
                }

                request({
                    params: {
                        r: 'short-video/default/video-detail',
                    },
                    method: 'post',
                    data: {
                        form: postData
                    },
                }).then(e => {
                    this.loading = false;
                    this.integralMine = false;
                    this.moneyMine = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                        // 从新获取数据
                        this.getDetails();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});

            },

            // 1.0 获取订单列表
            loadData(page, others) {
                this.loading = true;
                // 检查是否选择了搜索时间
                if (!this.time) {
                    this.search.start_time = '';
                    this.search.end_time = '';
                } else {
                    this.search.start_time = this.time[0];
                    this.search.end_time = this.time[1];
                }
                request({
                    params: {
                        r: 'short-video/video/order-list',
                        page: page,
                        video_id: this.video_ids,
                        ...others, //其他搜索字段
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.pagination = e.data.data.pagination;
                        this.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },

            // 1.2 获取视频概况
            getVideoData(others) {
                this.loading = true;
                request({
                    params: {
                        r: 'short-video/video/video-data',
                        id: this.video_id,
                        ...others, //其他搜索字段
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.video_data = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },
            // 1.3 获取视频交易转化
            getTransactionData(others) {
                this.loading = true;
                request({
                    method: 'get',
                    params: {
                        r: 'short-video/video/video-transaction',
                        id: this.video_id,
                        ...others, //其他搜索字段
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.transaction_data = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },


            // 1.0 获取视频详情
            getDetails() {
                this.loading = true;
                request({
                    params: {
                        r: 'short-video/default/video-detail',
                        id: this.video_id
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.video_ids = e.data.data.id;
                        this.loadData(this.page, this.search); //获取列表数据
                        this.detailsInfo = e.data.data;
                        // 构造本地的编辑数据对象
                        let form = {};
                        form['operation_integral'] = !!e.data.data.operation_integral ? e.data.data.operation_integral : 0;
                        form['operation_money'] = !!e.data.data.operation_money ? e.data.data.operation_money : 0;
                        form['open_integral_award'] = e.data.data.open_integral_award;
                        form['open_money_award'] = e.data.data.open_money_award;
                        form['watch_integral_sum'] = !!e.data.data.watch_integral_sum ? e.data.data.watch_integral_sum : 0;
                        form['watch_integral'] = !!e.data.data.watch_integral ? e.data.data.watch_integral : 0;
                        form['watch_integral_one'] = !!e.data.data.watch_integral_one ? e.data.data.watch_integral_one : 0;
                        form['watch_integral_two'] = !!e.data.data.watch_integral_two ? e.data.data.watch_integral_two : 0;
                        form['watch_money_sum'] = !!e.data.data.watch_money_sum ? e.data.data.watch_money_sum : 0;
                        form['watch_money'] = !!e.data.data.watch_money ? e.data.data.watch_money : 0;
                        form['watch_money_one'] = !!e.data.data.watch_money_one ? e.data.data.watch_money_one : 0;
                        form['watch_money_two'] = !!e.data.data.watch_money_two ? e.data.data.watch_money_two : 0;
                        console.log(form);
                        this.form = form;
                        this.totalIntegral = parseFloat(this.detailsInfo.surplus_integral) + parseFloat(this.form.operation_integral); //总积分
                        this.totalMoney = parseFloat(this.detailsInfo.surplus_money) + parseFloat(this.form.operation_money); //总金额
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },

            pageChange(page) {
                this.page = page;
                this.loadData(this.page, this.search);
            },
            handleClick(tab, event) {
                this.page = 1;
                this.search.status = this.activeName;
                this.loadData(this.page, this.search);
            },
            handleSelectionChange(val) {
                let self = this;
                self.choose_list = [];
                val.forEach(function(item) {
                    self.choose_list.push(item.id);
                })
            },
            searchs() {
                this.page = 1;
                this.loadData(this.page, this.search);
            },
            // 视频概况搜索
            videoSearchs() {
                this.getVideoData(this.video_search);
            },
            // 搜搜视频交易转化
            transactionSearchs() {
                this.getTransactionData(this.transaction_search);
            },
            // 3.0 跳转订单详情
            toOrderDetail(id) {
                this.$navigate({
                    r: 'mall/order/index',
                    order_id: id
                })
            },
            changeVideoDataTime() {
                if (this.video_time) {
                    this.video_search.start_time = this.video_time[0];
                    this.video_search.end_time = this.video_time[1];
                } else {
                    this.video_time = [];
                    this.video_search.start_time = null;
                    this.video_search.end_time = null;
                }
            },
            changeTransactionTime() {
                if (this.transaction_time) {
                    this.transaction_search.start_time = this.transaction_time[0];
                    this.transaction_search.end_time = this.transaction_time[1];
                } else {
                    this.transaction_time = [];
                    this.transaction_search.start_time = null;
                    this.transaction_search.end_time = null;
                }
            },
            getVideoInfo(){
                this.$nextTick(() => {
                    const video = document.getElementById('myVideo');
                    // if (element) {
                    // // 进行你的操作
                    // } else {
                    // console.error('Element not found');
                    // }
                    console.log('video',video);
                });
                // video.addEventListener('loadedmetadata', () => {
                //     // this.duration = video.duration; // 获取视频时长，单位为秒
                //     console.log('duration----', video.duration);
                // });
            },
            handleMetadataLoaded() {
                this.form.duration_seconds = this.$refs.videoPlayer.duration;
            // this.duration = this.$refs.videoPlayer.duration;
                // console.log('duration----', this.$refs.videoPlayer.duration);
            }
        }
    });
</script>
<style>
    .persen-main {
        position: relative;
        margin: 20px 0;
    }

    .persen-main-left {
        width: 70%;
    }

    .persen-main-left .main-item {
        margin-bottom: 2px;
        height: 80px;
        padding: 16px 30px;
        box-sizing: border-box;
        display: flex;
    }

    .item-one,
    .item-three {
        background: #edf4ff;
    }

    .item-two {
        background: #f0faf2;
    }

    .item-four {
        background: #fff7e8;
    }

    .main-item .item-data {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 40px;
        padding-right: 50px;
        margin-right: 60px;
    }

    .main-item .item-data span {
        font-size: 14px;
        line-height: 16px;
    }

    .main-item .item-data .data-title,
    .main-item .item-data .data-persen {
        color: #C0C4CC;
    }

    .main-item .item-data .data-persen {
        position: absolute;
        font-size: 12px;
        top: -1px;
        right: 0;
    }

    .persen-main-right {
        height: 405px;
        background-image: url(resources/img/plugins/short_video/persen-bg.png);
        /* background-image: url(https://img.yzcdn.cn/retail/img/data/conversion-bg.png); */
        background-repeat: no-repeat;
        background-size: cover;
        width: 560px;
        position: absolute;
        top: -55px;
        left: 56%;
    }

    .right-info {
        position: relative;
        width: 500px;
        height: 327px;
        /* background-color: #ccc; */
    }

    .right-info .main-right-one {
        position: absolute;
        top: 122px;
        right: 80px;
    }

    .right-info .main-right-two {
        position: absolute;
        top: 240px;
        right: 100px;
    }

    .right-info .main-right-three {
        position: absolute;
        top: 342px;
        right: 140px;
    }



    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        /* padding: 0 !important; */
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

    .item-box {
        margin-right: 20px;
    }

    .item-box .label {
        margin-right: 8px;
    }

    .body-main {
        margin-bottom: 20px;
        display: flex;
    }

    .body-main .main-left {
        width: 22%;
        position: relative;
    }

    .body-main .main-left video {
        /* position: absolute;
		z-index: 10;
		top: 0; */
        width: 100%;
    }

    .body-main .main-left .video-top {
        /* position: absolute;
		z-index: 99;
		top: 0; */
        width: 100%;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        padding: 20px;
        /* opacity: .5; */
        background-color: #FFFFFF;
    }

    .body-main .main-left .video-top .top-right {
        line-height: 26px;
    }

    .body-main .main-left .video-top .top-right .top-title {
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 260px;
    }

    .body-main .main-left .video-top .top-right .wrapper {
        display: flex;
        /* align-items: flex-start; */
    }

    .body-main .main-left .video-top .top-right .wrapper .to-copy {
        /* color: #03C5FF; */
        margin-left: 20px;
    }

    .body-main .main-left .video-top .top-right .detail-price {
        color: #BC0100;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
    }


    .body-main .main-right {
        width: 78%;
        box-sizing: border-box;
        padding-left: 60px;
    }



    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
        /* width: 66px; */
        height: 38px;
    }

    .demo-input-suffix {
        display: flex;
    }

    .demo-input-suffix .member-money {
        width: 160px;
        margin-right: 20px;
    }

    .member-operation {
        width: 160px;
        margin-left: 20px;
        margin-right: 0;
    }

    .agent-setting-item,
    .agent-item-input {
        display: flex;
        font-size: 14px;
        color: #606266;
    }

    .agent-setting-item .agent-setting-item-lab {
        margin-right: 30px;
    }

    .agent-setting-item .item-lab-title {
        margin-right: 12px;
        white-space: nowrap;
    }

    .agent-setting-item {
        margin-top: 18px;
    }

    .agent-setting-item:first-child {
        margin-top: 0;
    }

    .demo-input-suffix .repeat-input {
        /* width: 100px; */
    }

    .order-goods-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* 视频概况 */
    .video-list {
        padding: 20px 0 30px;
    }

    .video-item-title,
    .video-item-num {
        color: #C0C4CC;
    }

    .video-item-num {
        margin-top: 10px;
    }

    .video-item-num span {
        font-size: 30px;
        color: #303133;
    }

    .video_card_title {
        margin-bottom: -10px;
    }

    .item-mini {
        margin-left: 20px;
    }

    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }
</style>