302 lines
13 KiB
HTML
302 lines
13 KiB
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> |