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

<template id="diy-order">
    <div class="component-wrap" :class="{curr: curr == 'diy-order'}" @click="selectComponent()" :style="{padding: value.order.margin.join(' ')}">
        <div class="order-wrap" :style="radius">
            <div class="head-wrap">
                <div class="title">我的订单</div>
                <span class="see">全部订单</span>
                <i class="iconfont iconyoujiantou"></i>
            </div>
            <div class="status-wrap">
                <div class="item-wrap">
                    <div class="icon-block">
                        <iconfont :icon="value.order.icon.waitPay.icon" v-if="value.order.icon.waitPay" :value="value.order.icon.waitPay.style ? handleIconStyle(value.order.icon.waitPay.style) : null"></iconfont>
                    </div>
                    <div class="title">待付款</div>
                </div>
                <div class="item-wrap">
                    <div class="icon-block">
                        <iconfont :icon="value.order.icon.waitSend.icon" v-if="value.order.icon.waitSend" :value="value.order.icon.waitSend.style ? handleIconStyle(value.order.icon.waitSend.style) : null"></iconfont>
                    </div>
                    <div class="title">待发货</div>
                </div>
                <div class="item-wrap">
                    <div class="icon-block">
                        <iconfont :icon="value.order.icon.waitConfirm.icon" v-if="value.order.icon.waitConfirm" :value="value.order.icon.waitConfirm.style ? handleIconStyle(value.order.icon.waitConfirm.style) : null"></iconfont>
                    </div>
                    <div class="title">待收货</div>
                </div>
                <div class="item-wrap">
                    <div class="icon-block">
                        <iconfont :icon="value.order.icon.waitRate.icon" v-if="value.order.icon.waitRate" :value="value.order.icon.waitRate.style ? handleIconStyle(value.order.icon.waitRate.style) : null"></iconfont>
                    </div>
                    <div class="title">待评价</div>
                </div>
                <div class="item-wrap">
                    <div class="icon-block">
                        <iconfont :icon="value.order.icon.refunding.icon" v-if="value.order.icon.refunding" :value="value.order.icon.refunding.style ? handleIconStyle(value.order.icon.refunding.style) : null"></iconfont>
                    </div>
                    <div class="title">售后</div>
                </div>
            </div>
        </div>
        <div class="selected-area"></div>
    </div>
</template>

<!-- 组件样式 -->
<style>
    .order-wrap {
        background: #fff;
    }
    .order-wrap .status-wrap {
        display: flex;
        padding: 15px 0;
        align-items: center;
        justify-content: center;
        color: #333;
    }
    .order-wrap .item-wrap {
        flex: 1;
        text-align: center;
    }
    .order-wrap .item-wrap .icon-block {
        width: 30px;
        height: 30px;
        font-size: 30px;
        margin: 2px auto;
    }
    .order-wrap .item-wrap .title {
        font-size: 13px;
    }
    .order-wrap .head-wrap {
        display: flex;
        padding: 15px 0;
        margin: 0 15px;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
    }
    .order-wrap .head-wrap .title {
        flex: 1;
        width: 0;
        font-size: 17px;
        font-weight: bold;
    }
    .order-wrap .head-wrap .see {
        line-height: 1;
        color: #999;
    }
</style>

<script>
    Vue.component('diy-order', {
        props: {
            curr: {
                type: String,
                default: ''
            },
            value: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data: function () {
            return {
                count: 0
            }
        },
        created(){
        },
        computed: {
            radius(){
                return {
                    'border-top-left-radius': this.value.order.radius[0],
                    'border-top-right-radius': this.value.order.radius[0],
                    'border-bottom-left-radius': this.value.order.radius[1],
                    'border-bottom-right-radius': this.value.order.radius[1],
                }
            }
        },
        methods: {
            selectComponent(){
                this.$emit('click', 'diy-order');
            },
            handleIconStyle(data){
                if (this.value.order.icon_style == 0) {
                    if (this.value.member_info.background_type == 'system') {
                        data.iconColor = [ colourBlend(systemColor.main_color, '#ffffff', 0.5), systemColor.main_color ];
                    } else {
                        data.iconColor = [ this.value.member_info.background[1], this.value.member_info.background[2] ];
                    }
                }
                return data;
            }
        },
        template: '#diy-order'
    })
</script>

<!--会员信息编辑组件-->
<template id="diy-order-edit">
    <div class="component-wrpp diy-order-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="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.order.icon_style == index}"
                             v-for="(item, index) in styleList" :key="index"
                             @click="switchIconStyle(index)"
                        >
                            <i class="layui-anim layui-icon"></i>
                            <div>{{ item.title }}</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="top"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">下边距</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="bottom"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">左右边距</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="about"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">上圆角</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="top-radius"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">下圆角</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="bottom-radius"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .diy-order-edit {

    }
</style>

<script>
    Vue.component('diy-order-edit', {
        props: {
            value: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data: function () {
            return {
                tab: 'content',
                styleList: [
                    { title: '风格一', data: {"waitPay":{"title":"待付款","icon":"icon-system-daifukuan2","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":["#FF7B1D","#FF1544"],"iconColorDeg":111}},"waitSend":{"title":"待发货","icon":"icon-system-daifahuo2","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":["#FF7B1D","#FF1544"],"iconColorDeg":111}},"waitConfirm":{"title":"待收货","icon":"icon-system-daishouhuo2","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":["#FF7B1D","#FF1544"],"iconColorDeg":111}},"waitRate":{"title":"待评价","icon":"icon-system-daipingjie2","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":["#FF7B1D","#FF1544"],"iconColorDeg":111}},"refunding":{"title":"售后","icon":"icon-system-shuhou2","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":["#FF7B1D","#FF1544"],"iconColorDeg":111}}} },
                    { title: '风格二', data: {"waitPay":{"title":"待付款","icon":"icon-system-daifukuan","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":[],"iconColorDeg":0}},"waitSend":{"title":"待发货","icon":"icon-system-daifahuo","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":[],"iconColorDeg":0}},"waitConfirm":{"title":"待收货","icon":"icon-system-daishouhuo","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":[],"iconColorDeg":0}},"waitRate":{"title":"待评价","icon":"icon-system-daipingjie","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":[],"iconColorDeg":0}},"refunding":{"title":"售后","icon":"icon-system-shuhou","style":{"bgRadius":0,"fontSize":65,"iconBgColor":[],"iconBgColorDeg":0,"iconBgImg":"","iconColor":[],"iconColorDeg":0}}} }
                ]
            }
        },
        mounted(){
            var self = this;
            slider.render({
                elem: '.diy-order-edit .top',
                input: true,
                value: self.value.order.margin[0].split('px')[0],
                change: function (value) {
                    self.value.order.margin[0] = value + 'px';
                    self.updateMargin();
                }
            });
            slider.render({
                elem: '.diy-order-edit .bottom',
                input: true,
                value: self.value.order.margin[2].split('px')[0],
                change: function (value) {
                    self.value.order.margin[2] = value + 'px';
                    self.updateMargin();
                }
            });
            slider.render({
                elem: '.diy-order-edit .about',
                input: true,
                max: 20,
                value: self.value.order.margin[1].split('px')[0],
                change: function (value) {
                    self.value.order.margin[1] = value + 'px';
                    self.value.order.margin[3] = value + 'px';
                    self.updateMargin();
                }
            });
            slider.render({
                elem: '.diy-order-edit .top-radius',
                input: true,
                value: self.value.order.radius[0].split('px')[0],
                max: 30,
                change: function (value) {
                    self.value.order.radius[0] = value + 'px';
                    self.updateRadius()
                }
            });
            slider.render({
                elem: '.diy-order-edit .bottom-radius',
                input: true,
                value: self.value.order.radius[1].split('px')[0],
                max: 30,
                change: function (value) {
                    self.value.order.radius[1] = value + 'px';
                    self.updateRadius()
                }
            });
        },
        methods: {
            updateMargin(){
                this.value.order.margin.push('')
                this.value.order.margin.pop()
            },
            updateRadius(){
                this.value.order.radius.push('')
                this.value.order.radius.pop()
            },
            switchIconStyle(index){
                this.value.order.icon_style = index;
                this.value.order.icon = {};
                var self = this;
                setTimeout(function () {
                    self.value.order.icon = self.styleList[index].data;
                })
            }
        },
        template: '#diy-order-edit'
    })
</script>