zhongshen_project/app/shop/view/diy/member_info_component.html

<template id="diy-member-info">
    <div class="component-wrap" :class="{curr: curr == 'diy-member-info'}" :data-style="value.member_info.style" @click="selectComponent()">
        <div class="diy-member-info" :style="style">
            <div class="info-wrap">
                <div class="headimg">
                    <img src="STATIC_EXT/diyview/img/member_index/member_head.png" alt="">
                </div>
                <div class="info">
                    <div class="nickname">
                        <span class="name">勇敢的小鱼</span>
                        <span class="member-level"><i class="iconfont iconhuangguan"></i>会员</span>
                    </div>
                    <div class="desc">点击登录 享受更多精彩信息</div>
                </div>
                <i class="iconfont iconico member-code"></i>
            </div>
            <div class="account-info" v-show="value.member_info.style == 1" :style="{'margin-left': value.member_info.margin, 'margin-right': value.member_info.margin }">
                <div class="account-item">
                    <div class="value">200</div>
                    <div class="title">余额</div>
                </div>
                <div class="solid"></div>
                <div class="account-item">
                    <div class="value">80</div>
                    <div class="title">积分</div>
                </div>
                <div class="solid"></div>
                <div class="account-item">
                    <div class="value">4</div>
                    <div class="title">优惠券</div>
                </div>
            </div>
            <div class="super-member" :style="{'margin-left': value.member_info.margin, 'margin-right': value.member_info.margin }">
                <div class="super-info">
                    <i class="iconfont iconhuangguan"></i>
                    <span>超级会员</span>
                </div>
                <div class="super-text">
                    <span class="see">查看特权</span>
                    <i class="iconfont iconyoujiantou"></i>
                </div>
            </div>
        </div>
        <div class="account-info"
             v-show="value.member_info.style == 2"
             :style="{'margin-left': value.member_info.margin, 'margin-right': value.member_info.margin }"
        >
            <div class="account-item">
                <div class="value">200</div>
                <div class="title">余额</div>
            </div>
            <div class="solid"></div>
            <div class="account-item">
                <div class="value">80</div>
                <div class="title">积分</div>
            </div>
            <div class="solid"></div>
            <div class="account-item">
                <div class="value">4</div>
                <div class="title">优惠券</div>
            </div>
        </div>
        <div class="selected-area"></div>
    </div>
</template>

<!-- 组件样式 -->
<style>
    .diy-member-info {
        padding-top: 64px;
    }
    .diy-member-info .info-wrap {
        padding: 15px;
        display: flex;
        align-items: center;
        color: #fff;
    }
    .diy-member-info .info-wrap .info {
        flex: 1;
        width: 0;
        padding-right: 10px;
        overflow: hidden;
    }
    .diy-member-info .headimg {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 10px;
    }
    .diy-member-info .headimg img {
        height: 100%;
    }
    .diy-member-info .nickname {
        font-weight: bold;
        font-size: 14px;
        white-space: nowrap;
        margin-bottom: 10px;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    .diy-member-info .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .diy-member-info .desc {
        font-size: 12px;
        line-height: 1;
    }
    .diy-member-info .member-code {
        font-size: 20px;
    }
    .diy-member-info .member-level {
        font-size: 12px;
        background: linear-gradient(107deg, #7C7878 0%, #201A18 100%);
        color: #F7C774;
        line-height: 18px;
        height: 18px;
        border-radius: 2px;
        padding: 0 8px;
        display: inline-block;
        margin-left: 5px;
    }
    .diy-member-info .member-level .iconfont {
        font-size: 12px;
        margin-right: 5px;
    }
    .account-info {
        display: flex;
        padding: 20px 0;
        color: #fff;
        align-items: center;
        justify-content: center;
    }
    .account-info .solid {
        height: 35px;
        width: 1px;
        background: #fff;
        border-radius: 1px;
    }
    .account-item {
        flex: 1;
        text-align: center;
    }
    .account-item .value {
        font-size: 17px;
        font-weight: bold;
        margin-bottom: 2px;
    }
    .account-item .title {
        font-size: 13px;
    }
    .diy-member-info .super-member {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background: url('STATIC_IMG/diy_view/super_member_bg.png') no-repeat bottom / 100% 100%, linear-gradient(107deg, #7C7878 0%, #201A18 100%);
        padding: 15px 20px;
        box-sizing: border-box;
        color: #fff;
    }
    .diy-member-info .super-member  .super-info {
        flex: 1;
        width: 0;
        font-size: 18px;
        background-image:linear-gradient(90deg, #FFDBA6 0%, #FFEBCA 49%, #F7C774 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
    [data-style="1"] .diy-member-info .super-member .super-text{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-image: linear-gradient(90deg, #FFDBA6 0%, #FFEBCA 49%, #F7C774 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .diy-member-info .super-member .see {
        line-height: 1;
    }
    [data-style="2"] .diy-member-info {
        border-radius: 0 0 100% 100%/0 0 35px 35px;
        overflow: hidden;
    }
    [data-style="2"] .account-info {
        background: #fff;
        margin: 10px 0 0 0;
        color: #333;
        border-radius: 9px;
    }
    [data-style="2"] .account-info .solid{
        background: #F2F2F2;
    }
    [data-style="2"] .account-info .account-title .title{
        color: #666666;
    }
    [data-style="2"] .super-member {
        color: #8D4B16;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        background: url('STATIC_IMG/diy_view/super_member_bg.png') no-repeat bottom / 100% 100%, linear-gradient(107deg, #FADCB5 0%, #F6BD74 100%);
    }
    [data-style="2"] .super-member  .super-info {
        background-image:linear-gradient(90deg, #AB6126 0%, #D19336 47%, #CB742F 100%);
    }
</style>

<script>
    Vue.component('diy-member-info', {
        props: {
            curr: {
                type: String,
                default: ''
            },
            value: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data: function () {
            return {
                count: 0
            }
        },
        created(){
        },
        computed: {
            style(){
                let style = {}
                if (this.value.member_info.background_type == 'system') {
                    style.background = `url('`+ ns.img('public/static/img/diy_view/member_info_bg.png') +`') no-repeat bottom / contain, linear-gradient(`+ this.value.member_info.background[0] +`, `+ systemColor.main_color +` 0%, `+ systemColor.main_color +` 100%)`;
                } else {
                    style.background = `url('`+ ns.img('public/static/img/diy_view/member_info_bg.png') +`') no-repeat bottom / contain,linear-gradient(`+ this.value.member_info.background[0] +`, `+ this.value.member_info.background[1] +` 0%, `+ this.value.member_info.background[2] +` 100%)`;
                }
                return style;
            }
        },
        methods: {
            selectComponent(){
                this.$emit('click', 'diy-member-info');
            }
        },
        template: '#diy-member-info'
    })
</script>

<!--会员信息编辑组件-->
<template id="diy-member-info-edit">
    <div class="component-wrpp diy-member-info-edit">
        <div class="edit-title">
            <span>会员信息</span>
            <div class="tab-wrap">
                <span class="tab-item" :class="{active: tab == 'content'}" @click="tab = 'content'">内容</span>
                <span class="tab-item" :class="{active: tab == 'style'}" @click="tab = 'style'">样式</span>
            </div>
        </div>
        <div class="layui-form">
                <div v-show="tab == 'content'">
                <div class="group-title">
                    <span>风格设置</span>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">样式风格</label>
                    <div class="layui-input-block">
                        <div class="layui-unselect layui-form-radio"
                             :class="{'layui-form-radioed': value.member_info.style == item.value}"
                             v-for="(item, index) in styleList" :key="index"
                             @click="value.member_info.style = item.value"
                        >
                            <i class="layui-anim layui-icon"></i>
                            <div>{{ item.title }}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">背景颜色</label>
                    <div class="layui-input-block">
                            <div class="layui-unselect layui-form-radio"
                             :class="{'layui-form-radioed': value.member_info.background_type == 'system'}"
                             @click="value.member_info.background_type = 'system'"
                        >
                            <i class="layui-anim layui-icon"></i>
                            <div>跟随系统风格</div>
                        </div>
                        <div class="layui-unselect layui-form-radio"
                             :class="{'layui-form-radioed': value.member_info.background_type == 'custom'}"
                             @click="value.member_info.background_type = 'custom'"
                        >
                            <i class="layui-anim layui-icon"></i>
                            <div>自定义</div>
                        </div>
                    </div>
                </div>
                <div v-show="value.member_info.background_type == 'custom'">
                    <div class="layui-form-item">
                        <label class="layui-form-label sm">背景颜色</label>
                        <div class="layui-input-block color-wrap">
                            <div class="color-text">
                                <span>{{ value.member_info.background[1] }}</span>
                                <span>{{ value.member_info.background[2] }}</span>
                            </div>
                            <div class="color-box" id="start-color">
                                <div :style="{background: value.member_info.background[1]}"></div>
                            </div>
                            <div class="color-box" id="end-color">
                                <div :style="{background: value.member_info.background[2]}"></div>
                            </div>
                            <a href="javascript:;" @click="resetBackground()" class="text-color reset">重置</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label sm">渐变角度</label>
                        <div class="layui-input-block slide-wrap">
                            <div class="angle"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="tab == 'style'">
                <div class="group-title">
                    <span>组件样式</span>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">左右边距</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="margin"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .diy-member-info-edit {

    }
</style>

<script>
    Vue.component('diy-member-info-edit', {
        props: {
            value: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data: function () {
            return {
                tab: 'content',
                styleList: [
                    { title: '样式一', value: 1},
                    { title: '样式二', value: 2}
                ]
            }
        },
        mounted(){
            var self = this;

            form.render();

            slider.render({
                elem: '.diy-member-info-edit .margin',
                input: true,
                value: self.value.member_info.margin.split('px')[0],
                max: 20,
                change: function (value) {
                    self.value.member_info.margin = value + 'px';
                }
            });
            slider.render({
                elem: '.diy-member-info-edit .angle',
                input: true,
                value: self.value.member_info.background[0].split('deg')[0],
                max: 365,
                change: function (value) {
                    self.value.member_info.background[0] = value + 'deg';
                    self.updateBackground();
                }
            });
            setTimeout(function () {
                Colorpicker.create({
                    el: 'start-color',
                    color: self.value.member_info.background[1],
                    change: function (elem, hex) {
                        self.value.member_info.background[1] = hex;
                        self.updateBackground();
                    }
                });
                Colorpicker.create({
                    el: 'end-color',
                    color: self.value.member_info.background[2],
                    change: function (elem, hex) {
                        self.value.member_info.background[2] = hex;
                        self.updateBackground();
                    }
                });
            }, 500)
        },
        methods: {
            updateBackground(){
                this.value.member_info.background.push('')
                this.value.member_info.background.pop()
            },
            resetBackground(){
                this.value.member_info.background[1] = '#FF7230';
                this.value.member_info.background[2] = '#FF1544';
                this.updateBackground();
            }
        },
        template: '#diy-member-info-edit'
    })
</script>