qimall/addons/WechatVideoShop/backend/views/goods/index.php

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>商品管理</span>
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" size="small" @click="onEdit(0)">添加商品</el-button>
            </div>
        </div>
        <div class="table-body">
            <el-form size="small" :inline="true" flex="dir:left cross:center">
                <div class="item-box">
                    <el-select v-model="search.shop_id" placeholder="请选择所属店铺进行搜索" clearable size="small">
                        <el-option v-for="(name, index) in shops" :key="index" :label="name" :value="index"></el-option>
                    </el-select>
                </div>
                <div class="item-box">
                    <el-select v-model="search.audit_status" placeholder="请选择审核状态搜索" clearable size="small">
                        <el-option v-for="(name, index) in status_map" :key="index" :label="name" :value="index"></el-option>
                    </el-select>
                </div>
                <div class="item-box">
                    <el-input clearable size="small" style="width: 200px" v-model="search.keyword" placeholder="请输入商品名称"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button size="small" type="primary" style="padding: 9px 15px !important;" @click="searchs">搜索</el-button>
                </div>
            </el-form>

            <el-tabs v-model="activeName" @tab-click="handleClick" v-="loading">
                <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;" @selection-change="handleSelectionChange">
                    <el-table-column label="店铺" align="center" width="150px">
                        <template slot-scope="scope">
                            {{scope.row.shop.name}}
                        </template>
                    </el-table-column>
                    <el-table-column label="商品ID" prop="goods_id" align="center" width="120px"></el-table-column>
                    <el-table-column label="商品信息" align="left">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img circle" :src="scope.row.goods.cover_pic">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div style="color:#000; text-align: left">{{scope.row.goods.goods_name}}</div>
<!--                                    <div style="font-size: 12px; text-align: left">{{scope.row.user.mobile}}</div>-->
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="库存" prop="stock" align="center" width="120px"></el-table-column>
                    <el-table-column label="审核状态" align="center" width="120px">
                        <template slot-scope="scope">
                            <el-tag size="mini" :type="audit_status_map[scope.row.audit_status].type">
                                {{edit_status_map[scope.row.third_data.edit_product.edit_status]}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="失败原因" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.audit_reason" style="color:red;">
                                {{scope.row.audit_reason}}
                            </span>
                            <span v-else>
                                -
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品状态" align="center" width="120px">
                        <template slot-scope="scope">
                            <template v-if="scope.row.third_data.product">
                                <el-tag size="mini" type="default">
                                    {{_status_map[scope.row.third_data.product.status]}}
                                </el-tag>
                            </template>
                            <template v-else>
                                -
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间" width="160" align="center" width="150px">
                        <template slot-scope="scope">
                            <div>{{scope.row.updated_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
<!--                            v-if="scope.row.edit_status == 3"-->
                            <!-- 更新库存， 修改商品， 提交审核，上架，下架，删除，取消审核 -->
                            <template v-if="scope.row.third_data.edit_product.status == 5">
                                <el-popconfirm @confirm="onSale(scope.row, 0)" title="您真的要下架当前商品吗？">
                                    <el-button type="text" slot="reference" style="color: #F56C6C">下架</el-button>
                                </el-popconfirm>
                                <el-button size="mini" type="text" @click="onUpdateStock(scope.row)">设置库存</el-button>
                            </template>
                            <template v-if="scope.row.third_data.edit_product.edit_status == 1">
                                <el-popconfirm @confirm="onSale(scope.row, 1)" title="您真的要将当前商品提交审核吗？">
                                    <el-button type="text" slot="reference" style="color: #F56C6C">提交审核</el-button>
                                </el-popconfirm>
                            </template>
                            <template v-if="scope.row.third_data.edit_product.edit_status == 2">
                                <el-popconfirm @confirm="onCancelAudit(scope.row)" title="您真的要将当前商品取消审核吗？">
                                    <el-button type="text" slot="reference" style="color: #F56C6C">取消审核</el-button>
                                </el-popconfirm>
                            </template>
                            <el-button size="mini" type="text" @click="editGoods(scope.row)">编辑</el-button>
                            <el-popconfirm @confirm="removeGoods(scope.row, scope.$index)"
                                           title="您真的要删除当前商品吗？">
                                <el-button type="text" slot="reference"
                                           style="color: #F56C6C">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
            <!-- 分页器 -->

            <div flex="box:last cross:center">
                <div></div>
                <div>
                    <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize" style="display: inline-block;" background @current-change="pageChange" layout="prev, pager, next" :total="pagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 这个是复制用的容器，已隐藏 -->
        <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">这是幕后黑手</textarea>

        <!-- 添加商品 -->
        <el-dialog
                title="添加商品"
                :visible.sync="goodsDialogVisible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :before-close="onBeforeCloseGoodsDialogVisible"
                width="60%">
            <el-form size="small" ref="goodsForm" :model="goodsForm" label-position="top">
                <el-form-item label="请选择店铺" prop="shop_id" :rules="[{required: true, message: '请选择店铺'}]">
                    <el-select v-model="goodsForm.shop_id" placeholder="请选择店铺" clearable size="small" @change="onChangeShop">
                        <el-option v-for="(name, index) in shops" :key="index" :label="name" :value="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择类目" prop="cat_id" :rules="[
                    {required: true, message:'类目不能为空'}
                ]">
                    <el-cascader-panel v-loading="catLoading" v-model="goodsForm.cats" :options="wxList" :props="{
                    value: 'id',
                    label: 'name'
                }" @change="onChangeWxCat($event, {}, goodsForm.shop_id)"></el-cascader-panel>
                    <el-input v-model="goodsForm.cat_id" style="display: none"></el-input>
                </el-form-item>

                <el-form-item label="选择商品" prop="goods_id" :rules="[
                    {required: true, message:'商品不能为空'}
                ]">
                    <el-table border size="mini" :data="good ? [good] : []">
                        <el-table-column prop="id" label="ID" width="80"></el-table-column>
                        <el-table-column prop="cover_pic" label="商品图" width="180">
                            <template slot-scope="scope">
                                <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称">
                            <template slot-scope="scope">
                                <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120" align="center">
                            <template slot="header" slot-scope="scope">
                                <com-dialog-select :multiple="false" @selected="goodsSelect" title="选择商品">
                                    <el-button size="mini" type="primary">选择商品</el-button>
                                </com-dialog-select>
                            </template>
                            <template slot-scope="scope">
                                <el-popconfirm @confirm="onDeleteGoods(scope.row, scope.$index)" title="您真的要移除当前商品吗？">
                                    <el-button type="text" slot="reference" style="color: #F56C6C">删除</el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-input v-model="goodsForm.goods_id" style="display: none"></el-input>
                </el-form-item>

                <!--是否需要资质-->
                <div v-loading="catInfoLoading">
                    <template v-if="catInfo && catInfo.attr && catInfo.attr.product_attr_list.length > 0">
                        <h4>产品属性</h4>
                        <el-form-item :prop="'attr.' + index + '.value'" :rules="item.is_required ? [{required: true, message: item.name + '不能为空'}] : []"
                                      :label="item.name" v-for="(item, index) in catInfo.attr.product_attr_list" :key="index">
                            <el-input v-model="goodsForm.attr[index].value" v-if="item.type_v2 == 'string'" :placeholder="`请选输入${item.name}`"></el-input>
                            <el-input type="number" v-model="goodsForm.attr[index].value" v-if="item.type_v2 == 'integer'" :placeholder="`请选输入${item.name}`"></el-input>
                            <el-input type="number" v-model="goodsForm.attr[index].value" v-if="item.type_v2 == 'decimal4'" :placeholder="`请选输入${item.name}`"></el-input>
                            <el-input type="number" v-model="goodsForm.attr[index].value" v-if="item.type_v2 == 'integer_unit'" :placeholder="`请选输入${item.name}`" class="input-with-select">
                                <template slot="append">
                                    <el-select v-model="goodsForm.attr[index].ext.value" :placeholder="`请选输入${item.name}`" style="width: 100px">
                                        <el-option v-for="(val, key) in item.select_value.split(';')" :key="key" :label="val" :value="val"></el-option>
                                    </el-select>
                                </template>
                            </el-input>
                            <el-input type="number" v-model="goodsForm.attr[index].value" v-if="item.type_v2 == 'decimal4_unit'" :placeholder="`请选输入${item.name}`">
                                <template slot="append">
                                    <el-select v-model="goodsForm.attr[index].ext.value" :placeholder="`请选输入${item.name}`" style="width: 100px">
                                        <el-option v-for="(val, key) in item.select_value.split(';')" :key="key" :label="val" :value="val"></el-option>
                                    </el-select>
                                </template>
                            </el-input>
                            <el-checkbox-group v-model="goodsForm.attr[index].value" v-if="item.type_v2 == 'select_many'">
                                <el-checkbox v-for="(val, key) in item.value.split(';')" :key="key" :label="val"></el-checkbox>
                            </el-checkbox-group>
                            <el-select v-model="goodsForm.attr[index].value" v-if="item.type_v2 == 'select_one'" :placeholder="`请选选择${item.name}`">
                                <el-option v-for="(val, key) in item.value.split(';')" :key="key" :label="val" :value="val"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template v-if="catInfo && catInfo.attr && catInfo.attr.sale_attr_list.length > 0">
                        <h4>销售属性</h4>
                        <el-form-item :prop="'sale_attr.' + index + '.value'"  :rules="item.is_required ? [{required: true, message: item.name + '不能为空'}] : []"
                                      :label="item.name" v-for="(item, index) in catInfo.attr.sale_attr_list" :key="index">
                            <el-input v-model="goodsForm.sale_attr[index].value" v-if="item.type_v2 == 'string'" :placeholder="`请选输入${item.name}`"></el-input>
                            <el-input type="number" v-model="goodsForm.sale_attr[index].value" v-if="item.type_v2 == 'integer'" :placeholder="`请选输入${item.name}`"></el-input>
                            <el-input type="number" v-model="goodsForm.sale_attr[index].value" v-if="item.type_v2 == 'decimal4'" :placeholder="`请选输入${item.name}`"></el-input>
                            <el-input type="number" v-model="goodsForm.sale_attr[index].value" v-if="item.type_v2 == 'integer_unit'" :placeholder="`请选输入${item.name}`">
                                <template #append>{{item.value}}</template>
                            </el-input>
                            <el-input type="number" v-model="goodsForm.sale_attr[index].value" v-if="item.type_v2 == 'decimal4_unit'" :placeholder="`请选输入${item.name}`">
                                <template #append>{{item.value}}</template>
                            </el-input>
                            <el-checkbox-group v-model="goodsForm.sale_attr[index].value" v-if="item.type_v2 == 'select_many'">
                                <el-checkbox v-for="(val, key) in item.value.split(';')" :key="key" :label="val"></el-checkbox>
                            </el-checkbox-group>
                            <el-select v-model="goodsForm.sale_attr[index].value" v-if="item.type_v2 == 'select_one'" :placeholder="`请选选择${item.name}`">
                                <el-option v-for="(val, key) in item.value.split(';')" :key="key" :label="val" :value="val"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </div>

                <div style="padding-top: 10px">
                    <h4>商品资质</h4>
                    <div flex="dir:left">
                        <div class="card-coverimg" v-for="(item, index) in goodsForm.qualifications" :key="index">
                            <el-image class="elImages" style="width: 80px; height: 80px;cursor: move;" :src="item"></el-image>
                            <el-button @click="delCertificate(index)" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
                        </div>
                        <com-attachment v-if="goodsForm.qualifications.length < 5" :multiple="true" :max="9" type="images" @selected="certificatePic">
                            <div class="card-upload">
                                <i class="el-icon-plus"></i>
                            </div>
                        </com-attachment>
                    </div>
                    <p>商品资质图片（最多5张）</p>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onCloseGoodsDialogVisible">取 消</el-button>
                <el-button type="primary" @click="onSubmit" :disabled="btnLoading" v-loading="btnLoading">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="设置库存"
                :visible.sync="setStockDialogVisible"
                width="50%">
            <el-form size="small" ref="stockForm" :model="stockForm" label-position="top">
                <el-table size="mini" border :data="stockForm.skus">
                    <el-table-column label="SKU名称" align="left" prop="name">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img" :src="scope.row.img">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div style="color:#000; text-align: left">{{scope.row.name}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="销售价格" align="center" prop="sale_price" width="120px"></el-table-column>
                    <el-table-column label="库存数量" align="center" width="200px">
                        <template slot-scope="scope">
                            <el-form-item label="" :prop="'skus.' + scope.$index + '.num'" :rules="[{required: true, message: '库存数量不能为空'}]">
                                <el-input type="number" v-model="scope.row.num"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setStockDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitSetStock" :disabled="btnLoading" v-loading="btnLoading">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            page: 1,
            time: [], //本地存时间，请求时不发送
            search: {
                keyword: '',
                audit_status: '',
            },
            loading: false,
            activeName: '-1',
            list: [], //列表数据
            pagination: null,
            status_map: {
                0: '全部',
                2: '审核拒绝',
                3: '审核通过'
            },
            audit_status_map: {
                0: {
                    title: '待提审',
                    type: 'default'
                },
                2: {
                    title: '审核未通过',
                    type: 'danger'
                },
                3: {
                    title: '审核通过',
                    type: 'success'
                },
            },
            wxList: [],
            goodsDialogVisible: false,
            goodsForm: {
                cats: [],
                goods_id: 0,
                attr: [],
                sale_attr: [],
                seven_day_return: 0,
                qualifications: [],
                cat_id: 0,
                shop_id: '',
                product_id: ''
            },
            btnLoading: false,
            rules: {},
            good: null,
            catInfo: null,
            catInfoLoading: false,
            catLoading: false,
            shops: {},
            edit_status_map: {},
            _status_map: {},
            stockCurrentItem: null,
            setStockDialogVisible: false,
            stockForm: {
                skus: []
            }
        },
        mounted() {
            // 获取列表首页数据
            this.loadData(this.page, this.search); //获取列表数据
        },

        methods: {
            // 1.0 获取视频列表
            loadData(page, others) {
                this.loading = true;
              
                request({
                    method: 'get',
                    params: {
                        r: 'wechat-video-shop/goods/index',
                        page: page,
                        limit: 10,
                        ...others, //其他搜索字段
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.edit_status_map = e.data.data.edit_status_map
                        this._status_map = e.data.data.status_map
                        this.list = e.data.data.list;
                        this.shops = e.data.data.shop;
                        this.pagination = e.data.data.pagination;
                    } 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);
            },
            onEdit(id) {
                this.goodsDialogVisible = true;
            },
            getWxCat(shop_id) {
                //  获取所有类目
                this.catLoading = true
                request({
                    method: 'get',
                    params: {
                        r: 'wechat-video-shop/cate/list',
                        shop_id: shop_id
                    },
                }).then(e => {
                    this.catLoading = false;
                    if (e.data.code === 0) {
                        this.wxList = e.data.data
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.catLoading = false;
                });
            },
            onChangeWxCat(val, values, shop_id) {
                this.catInfoLoading = true
                if (values == null) values = {}
                request({
                    method: 'get',
                    params: {
                        r: 'wechat-video-shop/cate/wx-info',
                        id: val[2],
                        shop_id: shop_id
                    },
                }).then(e => {
                    this.catInfoLoading = false;
                    if (e.data.code === 0) {
                        this.catInfo = e.data.data
                        this.goodsForm.cat_id = val[2]
                        this.goodsForm.seven_day_return = e.data.data.attr.seven_day_return ? 1 : (e.data.data.attr.seven_day_return ? e.data.data.attr.seven_day_return : 0)
                        this.goodsForm.attr = []
                        if (e.data.data.attr.product_attr_list && e.data.data.attr.product_attr_list.length) {
                            for (let productAttrListKey in e.data.data.attr.product_attr_list) {
                                let value = values[e.data.data.attr.product_attr_list[productAttrListKey].name] ? values[e.data.data.attr.product_attr_list[productAttrListKey].name] : ''
                                switch (e.data.data.attr.product_attr_list[productAttrListKey].type_v2) {
                                    case 'integer_unit':
                                    case 'decimal4_unit':
                                        value = value !== "" ? value.split(" ")[0] : '';
                                        // 因为接口中这两种类型有单位需要拆分
                                        let unitValue = e.data.data.attr.product_attr_list[productAttrListKey].value;
                                        e.data.data.attr.product_attr_list[productAttrListKey].select_value = unitValue;
                                        e.data.data.attr.product_attr_list[productAttrListKey].value = unitValue.split(";")[0];
                                        break;
                                    case 'select_many':
                                        value = value !== "" ? value.split(";") : []
                                        break;
                                }

                                this.goodsForm.attr.push({
                                    name: e.data.data.attr.product_attr_list[productAttrListKey].name,
                                    value: value,
                                    ext: e.data.data.attr.product_attr_list[productAttrListKey]
                                })
                            }
                        }
                        if (e.data.data.attr.sale_attr_list && e.data.data.attr.sale_attr_list.length) {
                            for (let productAttrListKey in e.data.data.attr.sale_attr_list) {
                                let value = values[e.data.data.attr.product_attr_list[productAttrListKey].name] ? values[e.data.data.attr.product_attr_list[productAttrListKey].name] : ''
                                switch (e.data.data.attr.product_attr_list[productAttrListKey].type_v2) {
                                    case 'integer_unit':
                                    case 'decimal4_unit':
                                        value = value !== "" ? value.split(" ")[0] : ''
                                        break;
                                    case 'select_many':
                                        value = value !== "" ? value.split(";") : []
                                        break;
                                }
                                this.goodsForm.sale_attr.push({
                                    name: e.data.data.attr.sale_attr_list[productAttrListKey].name,
                                    value: value,
                                    ext: e.data.data.attr.sale_attr_list[productAttrListKey]
                                })
                            }
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.catInfoLoading = false;
                });
            },
            onSubmit() {
                this.$refs['goodsForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true
                        request({
                            method: 'post',
                            params: {
                                r: 'wechat-video-shop/goods/create',
                            },
                            data: this.goodsForm
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code === 0) {
                                this.page = 1
                                this.search = {
                                    keyword: '',
                                    audit_status: '',
                                }
                                this.loadData(this.page, this.search);
                                this.onCloseGoodsDialogVisible()
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                        });
                    } else {
                        console.log(valid)
                    }
                })
            },
            goodsSelect(goods) {
                if (goods) {
                    this.good = goods
                    this.goodsForm.goods_id = goods.id
                }
            },
            onDeleteGoods(item, index) {
                this.good = null
                this.goodsForm.goods_id = 0
            },
            certificatePic(e) { // 选择轮播图
                if (e.length) {
                    e.forEach((item, index) => {
                        if (this.goodsForm.qualifications.length >= 5) return;
                        this.goodsForm.qualifications.push(item.url);
                    })
                }
            },
            delCertificate(type, index) { // 删除图片
                this.goodsForm.qualifications.splice(index, 1)
            },
            onChangeShop(shop_id) {
                this.getWxCat(shop_id)
            },
            editGoods(item) {
                let content = JSON.parse(item.content)
                let cats = []
                for (let catsKey in content.cats) {
                    cats.push(parseInt(content.cats[catsKey].cat_id))
                }
                let attr_values = {}
                if (content.attrs.length > 0) {
                    for (let i in content.attrs) {
                        attr_values[content.attrs[i].attr_key] = content.attrs[i].attr_value
                    }
                }
                this.getWxCat(item.shop_id)
                this.goodsForm = {
                    cats: cats,
                    goods_id: item.goods_id,
                    attr: [],
                    sale_attr: [],
                    seven_day_return: 0,
                    qualifications: content.qualifications ? content.qualifications : [],
                    cat_id: cats[2],
                    shop_id: item.shop_id + '',
                    product_id: item.product_id
                }
                this.good = item.goods
                this.onChangeWxCat(cats, attr_values, item.shop_id)
                this.goodsDialogVisible = true
            },
            removeGoods(item, index) {
                request({
                    method: 'post',
                    params: {
                        r: 'wechat-video-shop/goods/delete',
                    },
                    data: {
                        id: item.id
                    }
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.list.splice(index, 1)
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            onBeforeCloseGoodsDialogVisible() {
                this.onCloseGoodsDialogVisible()
            },
            onCloseGoodsDialogVisible() {
                try {
                    this.goodsDialogVisible = false
                    this.good = null
                    this.catInfo = null
                    this.wxList = []
                    this.$set(this.goodsForm, 'cats', [])
                    this.$set(this.goodsForm, 'goods_id', 0)
                    this.$set(this.goodsForm, 'qualifications', [])
                    this.$set(this.goodsForm, 'shop_id', '')
                    this.$set(this.goodsForm, 'product_id', '')
                } catch (e) {

                }
            },
            onSale(item, type) {
                this.btnLoading = true;
                request({
                    method: 'post',
                    params: {
                        r: 'wechat-video-shop/goods/on-sale',
                    },
                    data: {
                        id: item.id,
                        type: type,
                    }
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.loadData(this.page, this.search);
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            onCancelAudit(item) {
                this.btnLoading = true;
                request({
                    method: 'post',
                    params: {
                        r: 'wechat-video-shop/goods/cancel-audit',
                    },
                    data: {
                        id: item.id,
                    }
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.loadData(this.page, this.search);
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            onUpdateStock(item) {
                this.stockCurrentItem = item
                this.stockForm.skus = []
                for (let skusKey in this.stockCurrentItem.third_data.product.skus) {
                    let name = ''
                    for (let skuAttrsKey in this.stockCurrentItem.third_data.product.skus[skusKey].sku_attrs) {
                        name += this.stockCurrentItem.third_data.product.skus[skusKey].sku_attrs[skuAttrsKey].attr_value + ','
                    }
                    this.stockForm.skus.push({
                        sku_id: this.stockCurrentItem.third_data.product.skus[skusKey].sku_id,
                        out_sku_id: this.stockCurrentItem.third_data.product.skus[skusKey].out_sku_id,
                        status: this.stockCurrentItem.third_data.product.skus[skusKey].status,
                        img: this.stockCurrentItem.third_data.product.skus[skusKey].thumb_img,
                        stock_num: this.stockCurrentItem.third_data.product.skus[skusKey].stock_num,
                        num: this.stockCurrentItem.third_data.product.skus[skusKey].stock_num,
                        name: name.substr(0, name.length - 1),
                        sale_price: parseFloat(this.stockCurrentItem.third_data.product.skus[skusKey].sale_price * 0.01).toFixed(2),
                    })
                }
                this.setStockDialogVisible = true;
            },
            onSubmitSetStock() {
                this.$refs['stockForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true
                        request({
                            method: 'post',
                            params: {
                                r: 'wechat-video-shop/goods/set-stock',
                            },
                            data: {
                                skus: JSON.stringify(this.stockForm.skus),
                                id: this.stockCurrentItem.id
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code === 0) {
                                this.setStockDialogVisible = false;
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                        });
                    } else {
                        console.log(valid)
                    }
                })
            }
        },
    });
</script>
<style>
    .set-el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .sort-input {
        width: 100%;
        background-color: #F3F5F6;
        height: 32px;
    }

    .sort-input span {
        height: 32px;
        width: 100%;
        line-height: 32px;
        display: inline-block;
        padding: 0 10px;
        font-size: 13px;
    }

    .sort-input .el-input__inner {
        height: 32px;
        line-height: 32px;
        background-color: #F3F5F6;
        float: left;
        padding: 0 10px;
        border: 0;
    }

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

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

    .input-item {
        margin: 0 0 20px;
    }

    .input-item-name {
        margin-right: 5px;
    }

    .input-search {
        margin-right: 30px;
    }


    .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;
    }

    .data-pop-info {
        /* padding: 18px 15px 30px; */
        color: #333;
    }

    .data-pop-mode {
        background: #F8F8F8;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .data-pop-top {
        height: 90px;
    }

    .data-price {
        width: 200px;
        flex-direction: column;
        border-right: 1px solid #E5E5E5;
    }

    .data-info {
        flex: 1;
        padding: 22px 15px;
        font-size: 16px;
    }

    .data-info-name {
        display: inline-block;
        text-align: end;
    }

    .data-pop-detail {
        padding: 15px 18px;
    }

    .data-detail-mode {
        min-width: 33%;
        flex-shrink: 0;
        text-align: center;
        margin-top: 16px;
        line-height: 26px;
        font-size: 16px;
    }

    .share-pop-model {
        margin-top: 20px;
    }

    .share-name {
        width: 90px;
        display: inline-block;
        margin-right: 18px;
        text-align: end;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }
</style>
<style>
    .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;
    }

    .item-box .symbol {
        margin: 0 6px;
    }

    .form-nickname {
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .index-video-url {
        width: 300px;
    }

    .index-video-url video {
        width: 100%;
    }

    .index-related-info {
        width: 500px;
    }

    .video-top {
        width: 100%;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        padding: 20px;
        /* opacity: .5; */
        background-color: #FFFFFF;
    }

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

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

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

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

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

    /* .atooltip {
      background: #FFFFFF !important;
      border: none !important;
    } */


    .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;
    }

    .price_col {
        color: #FF5D05;
    }
</style>