qimall/backend/modules/mall/views/decorate/user-center.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-09-15
 * Time: 12:36
 */
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('com-ellipsis');
?>
<style>
    .form-body {
        padding: 20px;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="cardLoading">
        <div slot="header">
            <div>
                <span>用户中心设置</span>
            </div>
        </div>
        <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">
            <div style="display: flex;">
                <div class="mobile-box">
                    <div class="head-bar" flex="main:center cross:center">
                        <div>用户中心</div>
                    </div>
                    <div class="show-box" style="padding-bottom: 20px;">
                        <img :src="ruleForm.top_pic_url" alt="" class="mall-bg">
                        <div class="top-box">
                            <!--                            <div :style="{'background-image':'url('+ruleForm.top_pic_url+')'}"-->
                            <div class="topic-style top-style-1" flex="dir:top main:center" v-if="ruleForm.top_style == 1">
                                <div flex="cross:center" style="background: none">
                                    <div class="head" v-if='ruleForm.member_pic_url == ""'></div>
                                    <img v-else class="head avatar-img" :src="ruleForm.member_pic_url" alt="">
                                    <span style="font-size:18px;margin-left: 10px;color: #ffffff;">用户昵称</span>
                                </div>
                            </div>

                            <div :style="{'background-image':'url('+ruleForm.top_pic_url+')'}" class="topic-style top-style-2" flex="main:center cross:center dir:top" v-if="ruleForm.top_style == 2" style="background: none">
                                <div class="head" v-if='ruleForm.member_pic_url == ""'></div>
                                <img v-else :src="ruleForm.member_pic_url" alt="" class="avatar-img head">
                                <span style="font-size:18px;color: #ffffff">用户昵称</span>
                            </div>

                            <div :style="{'background-image':'url('+ruleForm.top_pic_url+')'}" class="topic-style top-style-3" flex="main:center cross:center" v-if="ruleForm.top_style == 3" style="background: none">
                                <div class="center-box" :style="{'background-image': 'url('+ruleForm.style_bg_pic_url+')'}" style="background-size: 100%;background-repeat:no-repeat;background-position: center" flex="dir:left cross:center">
                                    <div class="head" v-if='ruleForm.member_pic_url == ""'></div>
                                    <img v-else :src="ruleForm.member_pic_url" alt="" class="avatar-img head">
                                    <span style="font-size:18px;color: #000000;margin-left: 10px;">用户昵称</span>
                                </div>
                            </div>
                        </div>
                        <!-- 左边资产栏 start -->
                        <div v-show="ruleForm.is_assets_bar_status == 1" class="account-box swiper-box ">
                            <div class="swipers swiper-container">
                                <div class="swiper-list swiper-wrapper">
                                    <template v-for="item,index in ruleForm.assets_bar">
                                        <div class="cate-items swiper-slide" v-if="item.status==1">
                                            <div class="cate-num" v-if="!item.air">0</div>
                                            <div class="cate-name">{{item.name}}</div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="swiper-dot swiper-pagination">
                                <div v-for="(item,index) in swiperLength" class="instruct" :class="{ active:index == swiperDotAct }"></div>
                            </div>
                        </div>
                        <!-- 左边资产栏 end -->

                        <div v-if="ruleForm.is_order_bar_status == 1" class="order-bar-box">
                            <div style="padding: 10px 0;border-bottom: 1px solid #EFEFF4;font-size: 15px;justify-content: space-between;display: flex">
                                <div style="padding:0 10px;font-weight: bold">我的订单</div>
                                <div style="padding-right: 10px;color: #909090;font-size: 13px;">查看全部订单 ></div>
                            </div>
                            <div flex="dir:left box:mean" style="margin: 10px 0;padding-bottom: 10px">
                                <div v-for="item in ruleForm.order_bar" flex="main:center cross:center dir:top">
                                    <com-image width="30px" height="30px" mode="aspectFill" :src="item.icon_url">
                                    </com-image>
                                    <com-ellipsis style="margin-top: 5px;" :line="1">{{item.name}}</com-ellipsis>
                                </div>
                            </div>
                        </div>


                        <div style="width: 93%;margin: 0px auto;margin-top: 10px;border-radius: 5px;overflow: hidden;">
                            <div class="menu-title" style="display: flex;justify-content: space-between">
                                {{ruleForm.user_tool_menu_title}}
                                <div><img :src="more_png" alt="" style="width: 10px;height: 10px"></div>
                            </div>
                            <div v-if="ruleForm.is_show_user_tool == 1 && ruleForm.user_tool_menu_style == 1" class="mobile-menus-box" flex="dir:top">
                                <div style="padding: 8px 2px" v-for="item in ruleForm.user_tool_menus" flex="dir:left cross:center">
                                    <com-image width="25px" height="25px" mode="aspectFill" :src="item.icon_url">
                                    </com-image>
                                    <com-ellipsis style="margin-left: 10px;" :line="1">{{item.name}}</com-ellipsis>
                                </div>
                            </div>
                            <div v-if="ruleForm.is_show_user_tool == 1 && ruleForm.user_tool_menu_style == 2" class="mobile-menus-box" flex="wrap:wrap" style="margin-top: 10px">
                                <div v-for="item in ruleForm.user_tool_menus" style="width: 25%;margin-bottom: 18px" flex="cross:center main:center dir:top">
                                    <com-image width="25px" height="25px" style="margin-bottom: 8px" mode="aspectFill" :src="item.icon_url">
                                    </com-image>
                                    <com-ellipsis :line="1">{{item.name}}</com-ellipsis>
                                </div>
                            </div>
                        </div>


                        <div style="width: 93%;margin: 0px auto;border-radius: 5px;overflow: hidden; margin-top: 10px">
                            <div class="menu-title" style="display: flex;justify-content: space-between">{{ruleForm.menu_title}}
                                <div><img :src="more_png" alt="" style="width: 10px;height: 10px"></div>
                            </div>
                            <div v-if="ruleForm.is_menu_status == 1 && ruleForm.menu_style == 1" class="mobile-menus-box" flex="dir:top">
                                <div style="padding: 8px 2px" v-for="item in ruleForm.menus" flex="dir:left cross:center">
                                    <com-image width="25px" height="25px" mode="aspectFill" :src="item.icon_url">
                                    </com-image>
                                    <com-ellipsis style="margin-left: 10px;" :line="1">{{item.name}}</com-ellipsis>
                                </div>
                            </div>
                            <div v-if="ruleForm.is_menu_status == 1 && ruleForm.menu_style == 2" class="mobile-menus-box" flex="wrap:wrap" style="margin-top: 10px">
                                <div v-for="item in ruleForm.menus" style="width: 25%;margin-bottom: 18px" flex="cross:center main:center dir:top">
                                    <com-image width="25px" height="25px" style="margin-bottom: 8px" mode="aspectFill" :src="item.icon_url">
                                    </com-image>
                                    <com-ellipsis :line="1">{{item.name}}</com-ellipsis>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-body">
                    <el-card shadow="never" style="margin-bottom: 20px;min-width:500px" body-style="padding-right:30%">
                        <div slot="header">
                            <span>头像栏设置</span>
                        </div>
                        <el-form-item label="背景图片" prop="top_pic_url">
                            <com-attachment :multiple="false" :max="1" @selected="topPicUrl">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:750*300" placement="top">
                                    <el-button size="mini">选择文件</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <com-image width="80px" height="80px" mode="aspectFill" :src="ruleForm.top_pic_url">
                            </com-image>
                        </el-form-item>
                        <el-form-item label="用户默认头像" prop="member_pic_url">
                            <com-attachment :multiple="false" :max="1" @selected="memberPicUrl">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:44*44" placement="top">
                                    <el-button size="mini">选择文件</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <com-image width="80px" height="80px" mode="aspectFill" :src="ruleForm.member_pic_url">
                            </com-image>
                        </el-form-item>
                        <el-form-item label="头像样式">
                            <el-radio v-model="ruleForm.top_style" :label="1">头像靠左</el-radio>
                            <el-radio v-model="ruleForm.top_style" :label="2">头像居中</el-radio>
                            <el-radio v-model="ruleForm.top_style" :label="3">头像内嵌</el-radio>
                        </el-form-item>
                        <el-form-item label="头像内嵌背景图" v-if="ruleForm.top_style == 3">
                            <com-attachment :multiple="false" :max="1" v-model="ruleForm.style_bg_pic_url">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:656x220" placement="top">
                                    <el-button size="mini">选择文件</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <com-image width="80px" height="80px" mode="aspectFill" :src="ruleForm.style_bg_pic_url">
                            </com-image>
                        </el-form-item>

                        <!-- 是否显示手机号码跟用户ID start -->
                        <el-form-item label="账号显示">
                            <template>
                                <el-radio v-model="ruleForm.account_show_type" :label="1">用户 ID</el-radio>
                                <el-radio v-model="ruleForm.account_show_type" :label="2">手机号码</el-radio>
                            </template>
                        </el-form-item>
                        <!-- 是否显示手机号码跟用户ID end-->
                    </el-card>

                    <!-- 资产栏设置 start -->
                    <el-card shadow="never" style="margin-bottom: 20px;min-width:500px" body-style="padding-right:30%">
                        <div slot="header">
                            <span>资产栏设置</span>
                        </div>
                        <el-form-item label="资产栏显示状态">
                            <el-switch v-model="ruleForm.is_assets_bar_status" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.is_assets_bar_status == 1" label="资产栏">
                            <div flex="box:mean" style="flex-wrap: wrap">
                                <draggable flex="main:left" style="flex-wrap: wrap" id="box" @end="drag" v-model="ruleForm.assets_bar">
                                    <template v-for="(item, index) in ruleForm.assets_bar" v-if="!item.air">
                                        <el-badge :value="item.sort" class="item" type="primary">
                                            <div @click="openDialogForm(item,index, 6)" class="order-box" flex="dir:top box:mean main:center cross:center" style="min-width: 95px;">
                                                <div flex="cross:center">
                                                    <com-image width="30px" height="30px" mode="aspectFill" :src="item.icon_url">
                                                    </com-image>
                                                </div>
                                                <div>{{item.name}}</div>
                                            </div>
                                        </el-badge>
                                    </template>
                                </draggable>
                            </div>
                        </el-form-item>
                    </el-card>
                    <!-- 资产栏设置 end -->
                    <el-card shadow="never" style="margin-bottom: 20px;min-width:500px" body-style="padding-right:30%">
                        <div slot="header">
                            <span>订单栏设置</span>
                        </div>
                        <el-form-item label="订单栏显示状态">
                            <el-switch v-model="ruleForm.is_order_bar_status" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.is_order_bar_status == 1" label="订单栏">
                            <div flex="box:mean" style="flex-wrap: wrap">
                                <div v-for="(item, index) in ruleForm.order_bar" @click="openDialogForm(item,index, 1)" class="order-box" flex="dir:top box:mean main:center cross:center">
                                    <div flex="cross:center">
                                        <com-image width="30px" height="30px" mode="aspectFill" :src="item.icon_url">
                                        </com-image>
                                    </div>
                                    <div>{{item.name}}</div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-card>

                    <el-card shadow="never" style="margin-bottom: 20px;min-width:500px" body-style="padding-right:30%">
                        <div slot="header">
                            <span>我的功能</span>
                        </div>
                        <el-form-item label="我的功能栏目显示">
                            <el-switch v-model="ruleForm.is_show_user_tool" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.is_show_user_tool == 1" label="我的功能栏目标题">
                            <el-input v-model="ruleForm.user_tool_menu_title"></el-input>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.is_show_user_tool == 1" label="我的功能栏目样式">
                            <el-radio v-model="ruleForm.user_tool_menu_style" :label="1">列表形式</el-radio>
                            <el-radio v-model="ruleForm.user_tool_menu_style" :label="2">九宫格形式</el-radio>
                        </el-form-item>
                        <el-form-item label="菜单列表">
                            <div class="menus-box">
                                <div class="menu-add">
                                    <com-pick-link type="single" @selected="selectLinkForUserTool">
                                        <el-button plain size="mini">添加</el-button>
                                    </com-pick-link>
                                </div>
                                <draggable v-model="ruleForm.user_tool_menus">
                                    <div v-for="(item, index) in ruleForm.user_tool_menus" flex="main:center cross:center box:justify" class="menu-item">
                                        <div style="margin: 0 10px;">
                                            <com-image width="25px" height="25px" mode="aspectFill" :src="item.icon_url">
                                            </com-image>
                                        </div>
                                        <div>{{item.name}}</div>
                                        <div flex="dir-left" style="width: 94px;margin: 5px 0;">
                                            <div v-if="item.name != '我的设置'">
                                                <el-button style="padding: 0" @click="openDialogForm(item,index,5)" type="text" circle size="mini">
                                                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                        <img src="resources/img/mall/edit.png" alt="">
                                                    </el-tooltip>
                                                </el-button>
                                                <el-button style="padding: 0" @click="userToolMenuDestroy(index)" type="text" circle size="mini">
                                                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                        <img src="resources/img/mall/del.png" alt="">
                                                    </el-tooltip>
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </draggable>
                            </div>
                        </el-form-item>
                    </el-card>

                    <el-card shadow="never" style="margin-bottom: 20px;min-width:500px" body-style="padding-right:30%">
                        <div slot="header">
                            <span>菜单栏设置</span>
                        </div>
                        <el-form-item label="菜单栏显示状态">
                            <el-switch v-model="ruleForm.is_menu_status" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.is_menu_status == 1" label="菜单栏标题">
                            <el-input v-model="ruleForm.menu_title"></el-input>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.is_menu_status == 1" label="菜单栏样式">
                            <el-radio v-model="ruleForm.menu_style" :label="1">列表形式</el-radio>
                            <el-radio v-model="ruleForm.menu_style" :label="2">九宫格形式</el-radio>
                        </el-form-item>
                        <el-form-item label="菜单栏">
                            <div class="menus-box">
                                <div class="menu-add">
                                    <com-pick-link type="multiple" @selected="selectLinkUrl">
                                        <el-button plain size="mini">添加</el-button>
                                    </com-pick-link>
                                </div>
                                <draggable v-model="ruleForm.menus">
                                    <div v-for="(item, index) in ruleForm.menus" flex="main:center cross:center box:justify" class="menu-item">
                                        <div style="margin: 0 10px;">
                                            <com-image width="25px" height="25px" mode="aspectFill" :src="item.icon_url">
                                            </com-image>
                                        </div>
                                        <div>{{item.name}}</div>
                                        <div flex="dir-left" style="width: 94px;margin: 5px 0;">
                                            <el-button style="padding: 0" @click="openDialogForm(item,index,3)" type="text" circle size="mini">
                                                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                    <img src="resources/img/mall/edit.png" alt="">
                                                </el-tooltip>
                                            </el-button>
                                            <el-button style="padding: 0" @click="menuDestroy(index)" type="text" circle size="mini">
                                                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                    <img src="resources/img/mall/del.png" alt="">
                                                </el-tooltip>
                                            </el-button>
                                        </div>
                                    </div>
                                </draggable>
                            </div>
                        </el-form-item>
                    </el-card>
                </div>
            </div>
            <el-button class="button-item" :loading="btnLoading" type="primary" @click="store('ruleForm')" size="small">
                保存
            </el-button>
            <el-button class="button-item" :loading="btnLoading" type="default" @click="reset" size="small">
                恢复默认
            </el-button>
        </el-form>


        <el-dialog :title="dialogFormType == 4 ? '收藏栏编辑':(dialogFormType == 2 ? '我的账户编辑' : (dialogFormType == 5 ? '我的功能编辑' : (dialogFormType == 6 ? '资产栏编辑' : '订单栏编辑')))" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form @submit.native.prevent :model="dialogForm" label-width="120px" size="small">
                <template v-if="dialogFormType ===  1 || dialogFormType === 4">
                    <el-form-item label="名称">
                        <el-tag type="info">{{dialogForm.name}}</el-tag>
                    </el-form-item>
                    <el-form-item label="图标" prop="icon_url">
                        <com-attachment :multiple="false" :max="1" @selected="iconUrl">
                            <el-tooltip v-if="dialogFormType === 1" class="item" effect="dark" content="建议尺寸:60*60" placement="top">
                                <el-button size="mini">选择文件</el-button>
                            </el-tooltip>
                            <el-tooltip v-if="dialogFormType === 4" class="item" effect="dark" content="建议尺寸:40*40" placement="top">
                                <el-button size="mini">选择文件</el-button>
                            </el-tooltip>
                        </com-attachment>
                        <com-image width="80px" height="80px" mode="aspectFill" :src="dialogForm.icon_url">
                        </com-image>
                    </el-form-item>
                </template>

                <template v-if="dialogFormType === 2 || dialogFormType === 3 || dialogFormType === 5">
                    <el-form-item label="名称">
                        <el-input v-model="dialogForm.name" placeholder="输入自定义名称" maxlength="4" v-if="dialogFormType === 2"></el-input>
                        <el-input v-model="dialogForm.name" placeholder="输入自定义名称" v-if="dialogFormType === 3"></el-input>
                        <el-input v-model="dialogForm.name" placeholder="输入自定义名称" v-if="dialogFormType === 5"></el-input>
                    </el-form-item>
                    <el-form-item label="图标" prop="icon_url">
                        <com-attachment :multiple="false" :max="1" @selected="iconUrl">
                            <el-tooltip v-if="dialogFormType === 2 && dialogFormIndex == 0" class="item" effect="dark" content="建议尺寸:48*48" placement="top">
                                <el-button size="mini">选择文件</el-button>
                            </el-tooltip>
                            <el-tooltip v-if="dialogFormType === 2 && dialogFormIndex != 0" class="item" effect="dark" content="建议尺寸:26*26" placement="top">
                                <el-button size="mini">选择文件</el-button>
                            </el-tooltip>
                            <el-tooltip v-if="dialogFormType === 3 || dialogFormType === 5" class="item" effect="dark" content="建议尺寸:50*50" placement="top">
                                <el-button size="mini">选择文件</el-button>
                            </el-tooltip>
                        </com-attachment>
                        <com-image width="80px" height="80px" mode="aspectFill" :src="dialogForm.icon_url">
                        </com-image>
                    </el-form-item>
                </template>

                <!-- 资产栏资产项编辑 -->
                <template v-if="dialogFormType ===  6">
                    <el-form-item label="名称">
                        <el-tag type="info">{{dialogForm.name}}</el-tag>
                    </el-form-item>

                    <template>
                        <el-form-item label="跳转路径">
                            <el-input :disabled="true" size="small" style="width: 80%;" v-model="dialogForm.link_url" type="text" placeholder="格式如：/pages/order/list">
                            </el-input>
                            <com-pick-link @selected="selectLinkForAssets">
                                <el-button plain size="mini">选择链接</el-button>
                            </com-pick-link>
                        </el-form-item>
                    </template>
                    <el-form-item label="是否启用">
                        <el-switch v-model="dialogForm.status" :active-value="1" :inactive-value="0"> </el-switch>
                    </el-form-item>

                    <el-form-item label="图标" prop="icon_url">
                        <com-attachment :multiple="false" :max="1" @selected="iconUrl">
                            <el-tooltip class="item" effect="dark" content="建议尺寸:60*60" placement="top">
                                <el-button size="mini">选择文件</el-button>
                            </el-tooltip>
                        </com-attachment>
                        <com-image width="80px" height="80px" mode="aspectFill" :src="dialogForm.icon_url">
                        </com-image>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormConfirm">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</div>
<!-- <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.3/Sortable.min.js"></script> -->
<script src="/resources/js/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/js/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="/resources/css/swiper-bundle.min.css">
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                mobile_bg: _baseUrl + '/resources/img/mall/mobile-background.png',
                more_png: _baseUrl + '/resources/img/mall//user-center/more.png',
                ruleForm: {
                    top_pic_url: '',
                    top_style: 1,
                    account_show_type: 1,
                    is_show_user_tool: 1,
                    user_tool_menu_title: '我的功能',
                    user_tool_menu_style: 1,
                    user_tool_menus: [],
                    is_order_bar_status: 1, // 订单栏显示
                    is_assets_bar_status: 1, // 资产栏显示
                    is_foot_bar_status: 1, // 订单栏显示
                    is_menu_status: 1,
                    menu_title: '营销功能',
                    menu_style: '1',
                    menus: [],
                    assets_bar: [{
                            icon_url: "http://jxmall.sinbel.top/web/resources/img/mall/user-center/icon-balance.png",
                            link_url: "/pages/order/list?status=0",
                            name: "余额",
                            open_type: "navigate",
                            status: 1,
                            sort: 1
                        },
                        {
                            icon_url: "http://jxmall.sinbel.top/web/resources/img/mall/user-center/icon-integral.png",
                            link_url: "/pages/order/list?status=0",
                            name: "积分",
                            open_type: "navigate",
                            status: 1,
                            sort: 2
                        }
                    ],
                    order_bar: [{
                            id: 1,
                            name: '待付款',
                            icon_url: '',
                        },
                        {
                            id: 2,
                            name: '待发货',
                            icon_url: '',
                        },
                        {
                            id: 3,
                            name: '待收货',
                            icon_url: '',
                        },
                        {
                            id: 4,
                            name: '已完成',
                            icon_url: '',
                        },
                        {
                            id: 5,
                            name: '售后',
                            icon_url: '',
                        },
                    ],
                    foot_bar: [{
                            id: 1,
                            name: '我的收藏',
                            icon_url: '',
                        },
                        {
                            id: 2,
                            name: '我的足迹',
                            icon_url: '',
                        }
                    ],
                    is_account_status: '1', // 钱包显示
                    account: [{
                            id: 2,
                            name: '积分',
                            icon_url: '',
                        },
                        {
                            id: 3,
                            name: '余额',
                            icon_url: '',
                        },
                    ],
                    account_bar: {
                        status: '1',
                        integral: {
                            status: '1',
                            text: '积分',
                            icon: '',
                        },
                        balance: {
                            status: '1',
                            text: '余额',
                            icon: '',
                        },
                        coupon: {
                            status: '1',
                            text: '优惠券',
                            icon: '',
                        },
                        card: {
                            status: '1',
                            text: '卡券',
                            icon: '',
                        },
                    },
                },
                rules: {
                    top_pic_url: [{
                        required: true,
                        message: '请选择顶部背景图片',
                        trigger: 'change'
                    }, ],
                    member_pic_url: [{
                        required: true,
                        message: '请选择会员图标',
                        trigger: 'change'
                    }, ],
                    member_bg_pic_url: [{
                        required: true,
                        message: '请选择普通会员背景图',
                        trigger: 'change'
                    }, ],
                },
                btnLoading: false,
                cardLoading: false,
                dialogForm: {},
                dialogFormVisible: false,
                dialogFormType: '',
                dialogFormIndex: '',
                sortArrs: [], // 资产设置已经存在的排序值
                swiperDotAct:0,
                oldActiveIndex: 0,
                swiperLength: 0,//资产栏长度
                mySwiper: null,
            };
        },
        methods: {
            store(formName) {
                // console.log(this.ruleForm); return null;
                let newRuleForm = JSON.parse(JSON.stringify(this.ruleForm));
                let index = newRuleForm.assets_bar.findIndex(v => v.air == 1);
                newRuleForm.assets_bar.splice(index,newRuleForm.assets_bar.length - index);
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'mall/decorate/user-center'
                            },
                            method: 'post',
                            data: {
                                form: newRuleForm,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'mall/decorate/user-center',
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        if (e.data.data) {
                            self.ruleForm = e.data.data;
                            self.sortArrs = e.data.data.assets_bar_sorts;
                            if(self.ruleForm.assets_bar){
                                let assLength = self.ruleForm.assets_bar.filter(v => v.status == 1);
                                self.refineAssetsInfo()
                                self.$nextTick(() => {
                                    self.mySwiper = new Swiper(".swiper-container",{
                                        slidesPerView : 3,
                                        slidesPerGroup : 3,
                                        on: {
                                            slideChangeTransitionStart: function(){
                                                self.swiperDotAct = self.mySwiper.realIndex/3;
                                                self.oldActiveIndex = this.activeIndex;
                                            },
                                        },
                                    });
                                })
                            }
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            topPicUrl(e) {
                if (e.length) {
                    this.ruleForm.top_pic_url = e[0].url;
                    this.$refs.ruleForm.validateField('top_pic_url');
                }
            },
            memberPicUrl(e) {
                if (e.length) {
                    this.ruleForm.member_pic_url = e[0].url;
                    this.$refs.ruleForm.validateField('member_pic_url');
                    console.log(this.ruleForm.member_pic_url, 'this.ruleForm.member_pic_url');
                }
            },
            memberBgPicUrl(e) {
                if (e.length) {
                    this.ruleForm.member_bg_pic_url = e[0].url;
                    this.$refs.ruleForm.validateField('member_bg_pic_url');
                }
            },
            // 订单图标
            iconUrl(e, params) {
                if (e.length) {
                    this.dialogForm.icon_url = e[0].url;
                }
            },
            // 添加链接
            selectLinkForUserTool(e) {
                let self = this;

                e.forEach(function(item, index) {
                    let obj = {
                        icon_url: item.icon,
                        name: item.name,
                        link_url: item.new_link_url,
                        open_type: item.open_type,
                        params: item.params ? item.params : []
                    }
                    if (item.key) {
                        obj.key = item.key
                    }
                    self.ruleForm.user_tool_menus.push(obj);
                })


            },
            // 添加链接
            selectLinkUrl(e) {
                let self = this;
                e.forEach(function(item, index) {
                    let obj = {
                        icon_url: item.icon,
                        name: item.name,
                        link_url: item.new_link_url,
                        open_type: item.open_type,
                        params: item.params ? item.params : []
                    }
                    if (item.key) {
                        obj.key = item.key
                    }
                    self.ruleForm.menus.push(obj);
                })
            },
            // 删除链接
            menuDestroy(index) {
                this.ruleForm.menus.splice(index, 1);
            },

            // 删除链接
            userToolMenuDestroy(index) {
                this.ruleForm.user_tool_menus.splice(index, 1);
            },

            // 编辑
            openDialogForm(item, index, type) {
                console.info(item,JSON.parse(JSON.stringify(item)));
                let self = this;
                self.dialogFormVisible = true;
                self.dialogFormType = type;
                self.dialogFormIndex = index;
                let dialogForm = JSON.parse(JSON.stringify(item));
                // dialogForm.status = Number(dialogForm.status);
                // console.log("ffff:" + JSON.stringify(item));
                if (type == 2) {
                    dialogForm.name = item.text;
                    dialogForm.icon_url = item.icon
                }
                this.dialogForm = dialogForm;
                console.info(dialogForm);
            },
            dialogFormConfirm() {
                this.dialogFormVisible = false;
                if (this.dialogFormType == 1) {
                    this.ruleForm.order_bar[this.dialogFormIndex] = this.dialogForm;
                }
                if (this.dialogFormType == 2) {
                    this.ruleForm.account_bar[this.dialogFormIndex].text = this.dialogForm.name;
                    this.ruleForm.account_bar[this.dialogFormIndex].icon = this.dialogForm.icon_url;
                }
                if (this.dialogFormType == 3) {
                    this.ruleForm.menus[this.dialogFormIndex] = this.dialogForm;
                }
                if (this.dialogFormType == 4) {
                    this.ruleForm.foot_bar[this.dialogFormIndex] = this.dialogForm;
                }
                if (this.dialogFormType == 5) {
                    this.ruleForm.user_tool_menus[this.dialogFormIndex] = this.dialogForm;
                }
                if (this.dialogFormType == 6) {
                    this.ruleForm.assets_bar[this.dialogFormIndex] = this.dialogForm;
                    let index = this.ruleForm.assets_bar.findIndex(v => v.air == 1);
                    if(index != -1){
                        this.ruleForm.assets_bar.splice(index,this.ruleForm.assets_bar.length - index);
                    }
                    this.refineAssetsInfo();
                    /* setTimeout(() => {
                        this.mySwiper.update();
                        console.info("刷新");
                    },1000); */
                    this.$nextTick(() => {
                        this.mySwiper.update();
                    })
                   
                }
                // console.log("menu:" + JSON.stringify(this.ruleForm));
                // console.log("gggg:" + JSON.stringify(this.dialogForm));
            },
            reset() {
                this.btnLoading = true;
                this.$confirm('确认恢复默认设置？').then(() => {
                    this.$request({
                        params: {
                            r: 'mall/decorate/user-center-restore'
                        },
                        method: 'post'
                    }).then(response => {
                        this.btnLoading = false;
                        if (response.data.code == 0) {
                            this.$message.success('恢复成功');
                            this.getDetail();
                        }
                    });
                }).catch(() => {
                    this.btnLoading = false;
                })
            },
            // 检查资产设置里面的排序是否重复
            checkSort(sort_val) {
                // console.log(sort_val, this.dialogFormIndex, this.ruleForm.assets_bar[this.dialogFormIndex].sort);
                // console.log(typeof sort_val);
                console.log(this.sortArrs);
                if (sort_val != this.ruleForm.assets_bar[this.dialogFormIndex].sort) {
                    // 改变了排序值
                    let sort_index = this.sortArrs.indexOf(parseInt(sort_val));
                    console.log(this.sortArrs.toString);
                    if (-1 != sort_index) {
                        let msg = '排序值已经存在，请填写 ';
                        this.sortArrs.map((val) => {
                            msg += val + ',';
                        });
                        msg = msg.substr(0, msg.length - 1);
                        msg += ' 之外的排序值';
                        this.$alert(msg, '警告', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                        return null;
                    }
                }
            },

            // 拖拽排序
            drag(e) {
                // console.log(this.ruleForm.assets_bar);
                this.ruleForm.assets_bar.forEach((item, index) => {
                    this.ruleForm.assets_bar[index].sort = index + 1;
                });
            },

            // 资产栏设置选择链接
            selectLinkForAssets(e) {
                console.log(e);
                console.log(this.dialogForm);
                this.dialogForm.link_url = this.ruleForm.assets_bar[this.dialogFormIndex].link_url = e[0].new_link_url;
                this.dialogForm.open_type = this.ruleForm.assets_bar[this.dialogFormIndex].open_type = e[0].new_open_type;
            },
            // 处理资产数据
            refineAssetsInfo(){
                let assets_bar_info = this.ruleForm.assets_bar.filter(v => v.status == 1);
                this.swiperLength = Math.ceil((assets_bar_info.length)/3);
                console.info(this.swiperLength,this.swiperDotAct);
                if(this.swiperLength < this.swiperDotAct + 1){
                    this.swiperDotAct--;
                }
                if(assets_bar_info.length%3 != 0){
                    let length = 3 - (assets_bar_info.length%3);
                    console.info(length);
                    for(let i = 0; i<length;i++){
                        this.ruleForm.assets_bar.push({
                            status: 1,
                            name: '',
                            air: 1,
                        })
                    }
                }
            }
        },
        mounted: function() {
            this.getDetail();
            
        }
    });
</script>
<style>
    .el-badge__content.is-fixed {
        position: absolute;
        right: 28px;
        top: 12px;
    }

    .el-badge__content {
        line-height: 17px;
    }

    .mall-bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 180px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .menu-title {
        font-size: 15px;
        font-weight: bold;
        border-bottom: solid #f0f0f0 1px;
        padding: 10px;
    }

    .mobile-box {
        width: 400px;
        height: 740px;
        padding: 35px 11px;
        background-color: #fff;
        border-radius: 30px;
        background-size: cover;
        position: relative;
        font-size: .85rem;
        float: left;
        margin-right: 1rem;
    }

    .mobile-box .show-box {
        height: 606px;
        width: 375px;
        overflow: auto;
        font-size: 12px;
        background-color: #F7F7F7;
        position: relative;
    }

    .show-box div {

        background-color: #fff;
    }

    .show-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 1px;
        /*高宽分别对应横竖滚动条的尺寸*/
    }

    .order-box {
        height: 80px;
        padding-top: 10px;
        border: 1px solid #eeeeee;
        margin-left: -1px;
        cursor: pointer;
        min-width: 60px;
    }

    .menus-box {
        border: 1px solid #eeeeee;
        background: #F6F8F9;
    }

    .menu-add {
        text-align: right;
        background: #ffffff;
        height: 40px;
        line-height: 40px;
        padding-right: 10px;
    }

    .top-box {
        width: 100%;
        height: 120px;
        background: transparent !important;
        position: relative;
    }

    .top-box .top-style-1 {
        width: 100%;
        height: 100%;
        background: transparent;
    }

    .top-box .top-style-1 .head {
        width: 58px;
        height: 58px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid #ffffff;
        background: #E3E3E3;
        margin-left: 20px;
    }

    .top-box .top-style-2 {
        width: 100%;
        height: 100%;
        background: transparent;
    }

    .top-box .top-style-2 .head {
        width: 40px;
        height: 40px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid #ffffff;
        background: #E3E3E3;
    }

    .top-box .top-style-3 {
        width: 100%;
        height: 100%;
        background: transparent;
    }

    .top-box .top-style-3 .head {
        width: 40px;
        height: 40px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid #ffffff;
        background: #E3E3E3;
    }

    .top-box .top-style-3 .center-box {
        width: 81%;
        height: 120px;
        background: #ffffff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding: 0 20px;
    }

    .account-box {
        /*width: 100%;*/
        /*height: 50px;*/
        /*border-bottom: 1px solid #EFEFF4;*/
        /*padding: 15px;*/
        /* overflow-x: scroll;
        margin: 0 15px;
        border-radius: 6px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #000;
        background: #ffffff; */
        /* overflow: hidden; */
    }

    .jx-btm-item {
        /* flex: 1; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        position: relative;
        width: 33.33333%;
        flex-shrink: 0;
    }

    .jx-btm-item::after {
        content: '';
        border-right: 1px solid #b3b3b3;
        width: 1px;
        height: 50px;
        position: absolute;
        right: 0;
    }

    .jx-btm-item:last-child::after {
        display: none;
    }

    .jx-btm-num {
        font-size: 12pt;
        font-weight: 600;
        position: relative;
    }

    .jx-btm-text {
        font-size: 9pt;
        opacity: 0.85;
        padding-top: 2px;
        white-space: nowrap;
    }

    .order-bar-box {
        position: relative;
        width: 93%;
        margin: 0px auto;
        margin-top: 10px;
        border-radius: 10px;
        overflow: hidden;

    }

    .mobile-menus-box {
        padding: 10px;
        width: 100%;
    }

    .menus-box .menu-item {
        cursor: move;
        background-color: #fff;
        margin: 5px 0;
    }

    .button-item {
        padding: 9px 25px;
        margin-left: 420px;
        margin-top: 10px;
    }

    .head-bar {
        width: 378px;
        height: 64px;
        position: relative;
        background: url('resources/img/mall/home_block/head.png') center no-repeat;
    }

    .head-bar div {
        position: absolute;
        text-align: center;
        width: 378px;
        font-size: 16px;
        font-weight: 600;
        height: 64px;
        line-height: 88px;
    }

    .head-bar img {
        width: 378px;
        height: 64px;
    }

    .form-body {
        width: 100%;
        height: 740px;
        overflow-y: scroll;
    }

    .form-button {
        margin: 0;
    }

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

    .button-item {
        padding: 9px 25px;
    }

    .topic-style {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .account-item {
        width: 25%;
        border: 1px solid #eeeeee;
    }

    .foot-box {
        position: relative;
        background-color: #f7f7f7;
    }

    .foot-box-line {
        position: absolute;
        height: 20px;
        width: 1px;
        background-color: #666666;
        top: 22px;
        left: 50%;
        margin-left: -1px;
    }

    .foot-box-item {
        height: 64px;
        color: #666666;
        font-size: 13px;
        width: 50%;
    }

    .foot-box-num {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .foot-box-info {
        padding-top: 8px;
        margin-left: 8.5px;
        text-align: center;
    }

    .avatar-img {
        border: 0;
    }

    .swiper-wrapper{
        display: flex;
    }

    .swiper-slide {
      /* text-align: center;
      font-size: 18px;
      background: #fff; */

      /* Center slide text vertically */
      /* display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center; */
    }


    .swiper-box {
	    position: relative;
        margin: 0 15px;
        border-radius: 6px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #000;
        background: #ffffff;
        padding: 15px;
        height: 100px;
    }
    .swipers {
		background-color: #fff;
		overflow: hidden;
        width: 100%;
        height: 100%;
        display: flex;
	}
    .swiper-container{
        display: flex;
        --swiper-theme-color: #ff6600;
        --swiper-pagination-color: #00ff33;/* 两种都可以 */
    }
    .swiper-wrapper{
        flex-shrink: 0;
    }
    .swiper-list {
		display: flex;
		justify-content: space-around;
		/* width: 100%; */
	}
    .cate-items {
		/* width: 33%; */
        flex: 1;
		text-align: center;
        flex-shrink: 0;
	}
    .cate-num {
		color: #DB0505;
		margin-bottom: 5px;
		font-size: 20px;
		font-weight: 700;
	}
	.cate-name {
		font-size: 13px;
        line-height: 1.5;
        color: #666;
	}
	.swiper-box .swiper-dot{
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		padding: 10px 0;
        background: none;
        
	}
    .swiper-dot .instruct {
		background-color: #e6e6e6;
		height: 3px;
		width: 15px;
		border-radius: 15px;
		margin: 0 3px;
	}

	.swiper-dot .active {
		width: 25px;
		border-radius: 10px;
		background-color: #DB0505;
	}

    .swiper-box:hover{
        cursor: default;

    }
</style>