qimall/backend/modules/admin/views/template/mall.php

<?php
$currentRoute = Yii::$app->controller->route;
?>
<div id="app" v-cloak>
    <el-card v-loading="loading">
        <div class="nav">
            {{ routeType == 'mall_template' ?  '我的模板' : '模板市场' }}
            <el-button v-if="routeType == 'template'" type="primary" style="float: right;position: relative;top: -5px;" size="small" @click="$navigate({r: 'admin/template/edit'})">新建模板</el-button>
        </div>

        <div class="header_box">
<!--            <div class="cate_header flex flex-y-center">-->
<!--                <span class="cate_title">模板类型：</span>-->
<!--                <div class="flex" style="flex-wrap: wrap;flex:1">-->
<!--                    <div :class="{cate_item_active:template_index==0}" class="cate_item" @click='selectTemplate(0)'>全部</div>-->
<!--                    <div v-for="(name,index) in template_type" :class="{cate_item_active:template_index==index}" class="cate_item" @click='selectTemplate(index)'>{{ name }}</div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="cate_header flex flex-y-center">
                <span class="cate_title">行业分类：</span>
                <div class="flex" style="flex-wrap: wrap;flex:1">
                    <div :class="{cate_item_active:cate_index==0}" class="cate_item" @click='selectCate(0)'>全部</div>
                    <div v-for="(name,index) in cate_arr" :class="{cate_item_active:cate_index==index}" class="cate_item" @click='selectCate(index)'>{{ name }}</div>
                </div>
            </div>
            <div class="add_temp_box flex flex-x-between flex-y-center">
                <div class="add_temp_right">
                    <el-input placeholder="输入页面关键词搜索" v-model='title' size="small" suffix-icon="el-icon-search" @change='changeName'></el-input>
                </div>
            </div>
        </div>

        <div class="template_body">
            <div class="flex" style="flex-wrap: wrap;">
                <div class='template_item' v-for="(item,index) in temp_list">
                    <div class="template_img_box">
                        <div class="template-text-top">
                            <div class="template_title flex flex-y-center">
                                <div style="margin-right: 12px;"> <div v-if="item.status == 0" class="template-disable">已禁用</div>{{item.title}}</div>
                                <div v-if="routeType == 'template'" class="template-switch">
                                    <el-switch v-model="item.is_on_sale" :active-value="1" :inactive-value="0" @change="handle('sell',item)"></el-switch>
                                </div>
                            </div>
                        </div>
                        <div class="template_img_block">
                            <img class="template_img" :src="item.cover" alt="">
                        </div>
                        <div class='mask flex flex-x-center flex-y-center'>
                            <div class="temp_preview" @click="handle('showImg',item)">预览</div>
                            <div v-if="routeType == 'template'" class="temp_preview" @click="handle('edit',item)">编辑</div>
                            <div v-if="routeType == 'template'" class="temp_preview" @click="handle('delete',item)">删除</div>
                        </div>

                        <div class="template_text">
                            <div class="template_title flex flex-y-center">
                                <div style="margin-right: 12px;"> 分类：{{ cate_arr[item.cate_id] }}</div>
                            </div>
                            <div class="template_title flex flex-y-center" style="margin-bottom: 5px;" v-if="mall_template_ids.includes(item.id)">
                                <span class="buyed"><i class="el-icon-check"></i> 已购买</span>
                                <span class="expire_time" v-if="mall_template_arr[item.id] == -1">永久有效</span>
                                <span class="expire_time" v-else>{{ mall_template_arr[item.id] | dateTimeFormat('Y-m-d') }} 到期</span>
                            </div>

                            <div class="use_number" v-if="routeType == 'mall_template'">
                                <el-button type="primary" size="mini" style="width: 100%;" @click="handle('use',item)">使用模板</el-button>
                                <div class="price-bottom">
                                    <span v-if="item.expire_time == -1">永久有效</span>
                                    <span v-else>{{ item.expire_time | dateTimeFormat('Y-m-d') }} 到期</span>
                                </div>
                            </div>

                            <div class="use_number" v-else>
                                <div class="price-top" flex>
                                    <div class="price-li"
                                        v-for="(val, index) in item.setting"
                                        :key="item.id+'_'+index"
                                        @click="tabClick(index,item,val)"
                                        :class="current[item.id] == index ? 'active' : ''"
                                    >{{ val.duration == -1 ? val.unit : val.duration + '个' + val.unit }}</div>
                                </div>
                                <div class="price-bottom">
                                    <span class="template-price">{{ setting_arr[item.id].money }}元</span> / {{ setting_arr[item.id].duration == -1 ? setting_arr[item.id].unit : setting_arr[item.id].duration+'个'+setting_arr[item.id].unit }}
                                </div>
                            </div>
                            <!--                                         -->
                            <!-- 购买按钮处理 -->
                            <div v-if="routeType == 'market'">
                                <div v-if="mall_template_ids.includes(item.id) == true">
                                    <el-button v-if="mall_template_arr[item.id] != -1" class="template-setting" type="text" @click="handle('buy',item)">购买</el-button>
                                </div>
                                <div v-else>
                                    <el-button class="template-setting" type="text" @click="handle('buy',item)">购买</el-button>
                                </div>
                            </div>

                            <el-button v-else-if="routeType == 'mall_template' && item.status == 2" class="template-setting" type="text" @click="handle('buy',item)">续费</el-button>
                            <el-button v-else-if="routeType == 'template'" class="template-setting" type="text" @click="handle('setting',item)">设置</el-button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="pagination flex flex-x-between">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>

        <!-- 预览框 -->
        <el-dialog :visible.sync="dialogVisible" width="24%" :before-close="handleClose" class="preview">
            <div class="preview_box">
                <div class="preview_content">
                    <img class="preview_img" :src="selectObj.cover" alt="">
                </div>
            </div>
        </el-dialog>
        <!-- 支付 -->
        <el-dialog :visible.sync="payVisible" width="40%" title="支付" :close-on-click-modal="false">
            <div class="pay-box">
                <el-descriptions :column="1" direction="horizontal" v-loading="payLoading">
                    <el-descriptions-item label="模板名称">{{ payInfo.template.title }}</el-descriptions-item>
                    <el-descriptions-item label="购买时长">{{ payInfo.duration == -1 ? '永久' : payInfo.duration + '个月' }}</el-descriptions-item>
                    <el-descriptions-item label="支付金额">{{ payInfo.pay_money.toFixed(2) }}</el-descriptions-item>
                    <el-descriptions-item label="支付方式" :content-style="{display: 'flex', alignItems: 'center'}">
                        <el-radio 
                            @input="radioChange"
                            v-model="payType" 
                            :label="item.payment_way" 
                            v-for="(item, index) in payInfo.extra_info.payment_arr"
                            :key="index"
                        >{{ item.payment_name }}</el-radio>
                    </el-descriptions-item>
                    <el-descriptions-item label="微信扫码支付" v-if="payType == 'scan'">
                        <div id="qrcode-info">
                            <div id="qrcode"></div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="支付宝跳转支付" v-if="payType == 'navigate'">
                        <el-button size="small" @click="alipay()">点击跳转支付宝支付</el-button>
                    </el-descriptions-item>
                </el-descriptions>
                <div v-if="payType == 'scan'">
                    <el-button @click="toMyTemplate()">完成支付</el-button>
                </div>
            </div>
        </el-dialog>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                current: {},
                setting_arr: {},
                loading: '',
                temp_list: [],
                cate_arr: [],
                template_type: {
                    'home_page': '首页',
                    'goods_detail': '商品详情',
                    'user_center': '会员中心',
                    'custom_page': '普通页面',
                },
                cate_index: 0,
                template_index: 0,
                temp_index: -1,
                page: 1,
                pageCount: 0,
                dialogVisible: false,
                dialogSettingVisible: false,
                title: null,
                selectObj: {},
                form: {},
                mall_template_ids: [],
                mall_template_arr: {},
                currentRoute: "<?= $currentRoute; ?>",
                mid: "<?= isset($mid) ? $mid : ''; ?>",
                routeType: 'market',
                list_route: 'admin/template/mall',
                payVisible: false,
                payInfo: {
                    pay_money: 0,
                    template: {},
                    extra_info: {},
                },
                payLoading: false,
                payType: 'scan', // 支付方式
            }
        },
        created() {
            if (this.currentRoute === 'admin/template/mall') {
                this.routeType = 'template';
            } else if (this.currentRoute === 'mall/diy/my-template') {
                this.routeType = 'mall_template';
                // this.list_route = 'mall/diy/my-template';
            }
            this.list_route = this.currentRoute;
            this.getList();
        },
        watch: {
            payInfo: {
                handler(newInfo, oldInfo) {
                    if (newInfo.extra_info && newInfo.extra_info.payment_arr) {
                        let scanPay = newInfo.extra_info.payment_arr.find(function (item) {
                            return item.payment_way == 'scan'
                        })
                        scanPay && this.createQrcode(scanPay.payment_url)
                    }
                },
                immediate: true,
                deep: true
            },
        },
        methods: {
            tabClick(i,item,val) {
                Object.assign(this.current, {[item.id]:i});
                Object.assign(this.setting_arr, {[item.id]:val});
                this.$forceUpdate();// 强制更新视图
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                let params = {};
                switch (type) {
                    case 'edit':// 编辑
                        params = {
                            r: 'admin/template/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'setting':// 前往设置
                        params = {
                            r: 'admin/template/setting'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'showImg':// 预览
                        this.dialogVisible = true;
                        this.selectObj = data;
                        break;
                    case 'sell':// 上下架
                        this.send(data,'admin/template/handle');
                        break;
                    case 'buy':// 购买模板
                        let duration = this.setting_arr[data.id].duration;
                        params = {'template_id': data.id, duration: duration};
                        this.$confirm('是否继续购买此模板?', '提示', {
                            type: 'warning'
                        }).then(() => {
                            // this.send(params,'mall/diy/buy-template');
                            this.createOrder(id)
                        })
                        break;
                    case 'use':// 使用模板
                        params = {'id': data.id,};
                        this.send(params,'mall/diy/use-template', (resp) => {
                            console.log(resp,'use');
                            // 模板复制成功跳转到编辑页面
                            if (resp.code == 0) {
                                navigateTo({
                                    r: 'mall/diy/edit',
                                    id:resp.data
                                });
                            }
                        });
                        break;
                    case 'delete':// 使用模板
                        this.$confirm('确认删除?', '提示', {
                            type: 'warning'
                        }).then(() => {
                            this.send(data,'admin/template/delete');
                        })
                        break;
                }
            },
            send(params, url = '', callback = null) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            changeName(e) {
                this.title = e;
                this.getList();
            },
            getList() {
                let self = this;
                self.loading = true;
                self.$request({
                    params: {
                        r: self.list_route,
                        mid: self.mid ?? null,
                        title: self.title,
                        cate_id: self.cate_index,
                        template: self.template_index,
                        route_type: self.routeType,
                        page: self.page,
                    },
                    method: 'get',
                }).then(e => {
                    self.loading = false;
                    if (e.data.code == 0) {
                        self.temp_list = e.data.data.list.list;
                        self.cate_arr = e.data.data.cate_arr;
                        self.pageCount = e.data.data.list.page_count;
                        if (!isEmpty(e.data.data.mall_template)) {
                            e.data.data.mall_template.forEach(function(item) {
                                self.mall_template_ids.push(item.template_id);
                                self.mall_template_arr[item.template_id] = item.expire_time;
                            });
                        }

                        if (!isEmpty(self.temp_list)) {
                            let setting = [];
                            self.temp_list.forEach(function (item, index) {
                                if (!isEmpty(item.setting)) {
                                    setting = JSON.parse(item.setting);
                                    self.temp_list[index].setting = setting;
                                    Object.assign(self.current, {[item.id]:0});
                                    Object.assign(self.setting_arr, {[item.id]: setting[0]});
                                }
                            })
                        }
                    }
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            handleClose(done) {
                this.dialogVisible = false;
            },
            selectCate(index) {
                this.cate_index = index;
                this.page = 1;
                this.getList();
            },
            selectTemplate(index) {
                this.template_index = index;
                this.page = 1;
                this.getList();
            },
            /**
             * 创建订单
             */
            createOrder(id) {
                request({
                    params: {
                        r: 'mall/diy/create-order',
                        id: id,
                        index: this.current[id]
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.toPay(e.data.data.id)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            /**
             * 支付
             */
            toPay(id) {
                this.payVisible = true
                this.payLoading = true
                request({
                    params: {
                        r: 'mall/diy/pay',
                        id: id,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.payLoading = false
                        this.payInfo = e.data.data
                        if (this.payInfo.pay_status == 1) {
                            this.toMyTemplate()
                            return 
                        }
                    }
                })
            },
            radioChange(e) {
                let scanPay = this.payInfo.extra_info.payment_arr.find(function (item) {
                    return item.payment_way == 'scan'
                })
                setTimeout(() => {
                    scanPay && this.createQrcode(scanPay.payment_url)
                }, 100)
            },
            /**
             * 刻画二维码
             */
            createQrcode(url) {
                let qrcodeInfo = document.getElementById("qrcode-info");
                document.getElementById("qrcode").remove(); //删除生成的二维码
                let addCodeDom = document.createElement("div");
                addCodeDom.setAttribute("id", "qrcode");
                addCodeDom.setAttribute("style", "width:200px; height:200px;");
                qrcodeInfo.appendChild(addCodeDom) //添加标签
                let qrCodeDom = document.getElementById("qrcode");
                var qrcode = new QRCode(qrCodeDom, {
                    width: 200,
                    height: 200,
                });
                qrcode.makeCode(url);
                // 获取二维码生成的图片信息
                return new Promise((req, rej) => {
                    setTimeout(() => {
                        src = qrCodeDom.getElementsByTagName("img")[0].src;
                        req(src);
                    }, 200);
                })
            },
            /**
             * 支付宝支付
             */
            alipay() {
                let navigate = this.payInfo.extra_info.payment_arr.find(function (item) {
                    return item.payment_way == 'navigate'
                })
                window.open(navigate.payment_url, '_self')
            },
            /**
             * 去我的模板页面
             */
            toMyTemplate() {
                navigateTo({
                    r: 'mall/diy/paid'
                })
            },
        }
    })
</script>

<style scoped>
    img {
        display: block;
    }

    .buyed {
        background-color: #1A73E8;
        padding: 5px 10px;
        color: #fff;
        border-radius: 5px 0 0 5px;
        font-size: 12px;
        width: 35%;
    }

    .expire_time {
        border: 1px solid #1A73E8;
        padding: 4px 0px;
        font-size: 12px;
        border-radius: 0 5px 5px 0;
        color: #1A73E8;
        width: 65%;
        text-align: center;
    }

    .price-top {
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #f1f1f1;
    }

    .price-bottom {
        padding-top: 10px;
    }

    .price-li {
        border-right: 1px solid #f1f1f1;
        padding: 5px;
        flex: 1;
        text-align: center
    }

    .price-li.active {
        background-color: #1A73E8;
        color: #fff;
    }

    .price-li:last-child {
       border-right: 0;
    }

    .cate_item {
        padding: 3px 10px;
        border-radius: 20px;
        margin-right: 20px;
        cursor: pointer;
    }

    .cate_item_active {
        color: #5DA8FC;
        background: #EDF6FF;
    }

    .nav {
        background: #ffffff;
        border-radius: 5px;
        padding: 26px 24px;
        margin-bottom: 10px;
        /*color: #808695;*/
    }

    .cate_header {
        font-size: 14px;
        color: #808695;
        padding: 10px 0;
    }

    .cate_title {
        margin-right: 24px;
        color: #303133;
    }

    .cate_item_active {
        color: #2DB7F5;
        background: #EDF6FF;
    }

    .template_body {
        background: #fff;
        border-radius: 5px;
        padding: 20px 25px 70px;
    }

    .template_item {
        width: 280px;
        margin: 0 20px 60px 0;
        cursor: pointer;
    }

    .template_img_box {
        width: 260px;
        height: 430px;
        /* border: 1px solid #BFBFBF; */
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        /*background: url('resources/img/mall/decorate/duihuakuang240.png');*/
        background-size: 100% 100%;
        padding: 0 10px 10px 10px;
        border: 1px solid #f1f1f1;
    }

    .template_img_block {
        width: 95.7%;
        height: 271px;
        /*height: 100%;*/
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 55px;
        overflow: hidden;
        border: 1px solid #f1f1f1;
    }

    .template_img {
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .mask {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 271px;
        /*height: 100%;*/
        position: absolute;
        top: 55px;
        left: 0;
        z-index: 5;
        opacity: 0;
        transition: all 0.3s;
        flex-direction: column;
    }

    .template_item:hover .mask {
        opacity: 1;
    }

    .temp_preview_small {
        width: 80px;
        height: 30px;
        /*border-radius: 5px;*/
        text-align: center;
        line-height: 30px;
        background: #ffffff;
        color: #313131;
        font-size: 12px;
    }

    .temp_preview {
        width: 170px;
        height: 36px;
        border-radius: 5px;
        /*background: #2DB7F5;*/
        color: #ffffff;
        text-align: center;
        line-height: 36px;
        font-size: 12px;
        margin-bottom: 8px;
        border: 1px solid #fff;
    }

    .temp_preview:hover {
        background: #2DB7F5;
        border: 1px solid #2DB7F5;
    }

    .template_text {
        font-size: 14px;
        color: #515A6E;
        padding: 0 10px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 7;
        background-color: #fff;
        width: 258px;
    }

    .template-text-top {
        font-size: 14px;
        color: #515A6E;
        padding: 10px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 7;
        background-color: #fff;
        width: 280px;
    }

    .template-disable {
        font-size: 12px;
        color: #ffffff;
        display: inline-block;
        background-color: #ff2626;
        width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin-right: 10px;
        border-radius: 5px;
    }

    .template_title {
        margin: 10px 0 6px;
    }

    .use_number {
        font-size: 12px !important;
        align-items: center;
    }

    .use_number .template-price {
        font-size: 14px !important;
        align-items: center;
        color: #fb6638;
        margin-right: 5px;
    }

    .template-setting {
        position: absolute;
        right: 35px;
        bottom: 0px;
    }

    .template-switch {
        position: absolute;
        right: 35px;
        top: 18px;
    }

    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pagination {
        width: 100%;
        flex-direction: row-reverse;
    }

    .pop {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    /* 预览框 */
    .preview_box {
        width: 377px;
        height: 760px;
        /*background: url('resources/img/mall/decorate/duihuakuang.png')no-repeat;*/
        background: url('resources/img/decorate/phone.png')no-repeat;
        position: relative;
    }

    .preview_content {
        background: #ffffff;
        width: 339px;
        height: 594px;
        position: absolute;
        top: 82px;
        left: 49.8%;
        transform: translateX(-50%);
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .preview_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .preview_img {
        width: 100%;
    }

    .preview .el-dialog__body {
        padding: 0;
        width: 377px;
        height: 760px;
    }

    .preview .el-dialog__header {
        display: none;
    }

    .preview .el-dialog {
        min-width: 377px;
        max-width: 377px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .header_box {
        padding: 25px;
        background: #fff;
        border-radius: 5px;
        color: #808695;
        margin-bottom: 10px;
    }

    .add_temp_right {
        width: 400px;
        padding: 10px 0;
    }

    .el-card {
        background: transparent;
        box-shadow: none !important;
        border: 0;
    }

    .el-card__body {
        padding: 0;
    }

    .logo_text {
        width: 56px;
        height: 21px;
        border-radius: 30px;
        background: #FF7161;
        text-align: center;
        line-height: 21px;
        color: #fff;
    }

    .logo_text2 {
        background: #C5C8CE;
    }

    .pay-box {
        padding: 0 30px;
    }
</style>