初始上传
This commit is contained in:
9
app/component/view/member_my_order/css/design.css
Executable file
9
app/component/view/member_my_order/css/design.css
Executable file
@@ -0,0 +1,9 @@
|
||||
@CHARSET "UTF-8";
|
||||
/* 会员中心——我的订单组件 */
|
||||
|
||||
.diy-member-my-order .order-wrap .status-wrap {display: flex;padding: 15px 0;align-items: center;justify-content: center;color: #333;}
|
||||
.diy-member-my-order .order-wrap .status-wrap .item-wrap {flex: 1;text-align: center;}
|
||||
.diy-member-my-order .order-wrap .status-wrap .item-wrap .icon-block {width: 30px;height: 30px;font-size: 30px;margin: 2px auto;position: relative;}
|
||||
.diy-member-my-order .order-wrap .status-wrap .item-wrap .icon-block > img {width: 100%;height: 100%;position: absolute;z-index: 6;left: 0;top: 0;}
|
||||
.diy-member-my-order .order-wrap .status-wrap .item-wrap .icon-block .icon-shade {width: 100%;height: 100%;position: absolute;z-index: 5;left: 0;top: 0;-webkit-mask: no-repeat center / contain;}
|
||||
.diy-member-my-order .order-wrap .status-wrap .item-wrap .title {font-size: 13px;}
|
||||
111
app/component/view/member_my_order/design.html
Executable file
111
app/component/view/member_my_order/design.html
Executable file
@@ -0,0 +1,111 @@
|
||||
<nc-component :data="data[index]" class="diy-member-my-order">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<div :style="{ backgroundColor: nc.componentBgColor,
|
||||
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
}">
|
||||
<div class="order-wrap" v-if="nc.lazyLoad">
|
||||
<div class="status-wrap">
|
||||
<div class="item-wrap">
|
||||
<div class="icon-block">
|
||||
<template v-if="nc.style == 3">
|
||||
<img src="__PUBLIC__/uniapp/member/order/wait_pay.png" alt="">
|
||||
<div class="icon-shade" :style="{ background : nc.tempData.systemColor ? nc.tempData.systemColor.main_color : '' }" style="-webkit-mask-image: url(__PUBLIC__/uniapp/member/order/wait_pay_shade.png);"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<iconfont :icon="nc.icon.waitPay.icon" v-if="nc.icon.waitPay" :value="nc.icon.waitPay.style && nc.tempData.methods ? nc.tempData.methods.handleIconStyle(nc.icon.waitPay.style) : null"></iconfont>
|
||||
</template>
|
||||
</div>
|
||||
<div class="title" v-if="nc.icon.waitPay">{{ nc.icon.waitPay.title}}</div>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="icon-block">
|
||||
<template v-if="nc.style == 3">
|
||||
<img src="__PUBLIC__/uniapp/member/order/wait_send.png" alt="">
|
||||
<div class="icon-shade" :style="{ background : nc.tempData.systemColor ? nc.tempData.systemColor.main_color : '' }" style="-webkit-mask-image: url(__PUBLIC__/uniapp/member/order/wait_send_shade.png);"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<iconfont :icon="nc.icon.waitSend.icon" v-if="nc.icon.waitSend" :value="nc.icon.waitSend.style && nc.tempData.methods ? nc.tempData.methods.handleIconStyle(nc.icon.waitSend.style) : null"></iconfont>
|
||||
</template>
|
||||
</div>
|
||||
<div class="title" v-if="nc.icon.waitSend">{{ nc.icon.waitSend.title}}</div>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="icon-block">
|
||||
<template v-if="nc.style == 3">
|
||||
<img src="__PUBLIC__/uniapp/member/order/wait_confirm.png" alt="">
|
||||
<div class="icon-shade" :style="{ background : nc.tempData.systemColor ? nc.tempData.systemColor.main_color : '' }" style="-webkit-mask-image: url(__PUBLIC__/uniapp/member/order/wait_confirm_shade.png);"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<iconfont :icon="nc.icon.waitConfirm.icon" v-if="nc.icon.waitConfirm" :value="nc.icon.waitConfirm.style && nc.tempData.methods ? nc.tempData.methods.handleIconStyle(nc.icon.waitConfirm.style) : null"></iconfont>
|
||||
</template>
|
||||
</div>
|
||||
<div class="title" v-if="nc.icon.waitConfirm">{{ nc.icon.waitConfirm.title}}</div>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="icon-block">
|
||||
<template v-if="nc.style == 3">
|
||||
<img src="__PUBLIC__/uniapp/member/order/wait_use.png" alt="">
|
||||
<div class="icon-shade" :style="{ background : nc.tempData.systemColor ? nc.tempData.systemColor.main_color : '' }" style="-webkit-mask-image: url(__PUBLIC__/uniapp/member/order/wait_rate_shade.png);"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<iconfont :icon="nc.icon.waitUse.icon" v-if="nc.icon.waitUse" :value="nc.icon.waitUse.style && nc.tempData.methods ? nc.tempData.methods.handleIconStyle(nc.icon.waitUse.style) : null"></iconfont>
|
||||
</template>
|
||||
</div>
|
||||
<div class="title" v-if="nc.icon.waitUse">{{ nc.icon.waitUse.title}}</div>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="icon-block">
|
||||
<template v-if="nc.style == 3">
|
||||
<img src="__PUBLIC__/uniapp/member/order/refunding.png" alt="">
|
||||
<div class="icon-shade" :style="{ background : nc.tempData.systemColor ? nc.tempData.systemColor.main_color : '' }" style="-webkit-mask-image: url(__PUBLIC__/uniapp/member/order/refunding_shade.png);"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<iconfont :icon="nc.icon.refunding.icon" v-if="nc.icon.refunding" :value="nc.icon.refunding.style && nc.tempData.methods ? nc.tempData.methods.handleIconStyle(nc.icon.refunding.style) : null"></iconfont>
|
||||
</template>
|
||||
</div>
|
||||
<div class="title" v-if="nc.icon.refunding">{{ nc.icon.refunding.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<diy-member-my-order-sources></diy-member-my-order-sources>
|
||||
|
||||
<div class="layui-form-item" v-if="nc.tempData.styleList">
|
||||
<label class="layui-form-label sm">风格</label>
|
||||
<div class="layui-input-block">
|
||||
<div v-for="(item,styleIndex) in nc.tempData.styleList" :key="styleIndex" @click="nc.tempData.methods.switchIconStyle(styleIndex)" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.style==item.value) }">
|
||||
<i class="layui-anim layui-icon">{{ nc.style == item.value ? "" : "" }}</i>
|
||||
<div>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var diyMemberMyOrderSystemColor = {:json_encode($system_color)};
|
||||
var memberMyOrderResourcePath = "{$resource_path}"; // http路径
|
||||
var memberMyOrderRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
272
app/component/view/member_my_order/js/design.js
Executable file
272
app/component/view/member_my_order/js/design.js
Executable file
@@ -0,0 +1,272 @@
|
||||
var memberMyOrderHtml = '<div></div>';
|
||||
|
||||
Vue.component("diy-member-my-order-sources", {
|
||||
template: memberMyOrderHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
styleList: [
|
||||
{text: '样式一', value: 1},
|
||||
{text: '样式二', value: 2},
|
||||
{text: '样式三', value: 3},
|
||||
{text: '样式四', value: 4}
|
||||
],
|
||||
iconList: [
|
||||
{
|
||||
title: "风格一",
|
||||
data: {
|
||||
"waitPay": {
|
||||
"title": "待付款",
|
||||
"icon": "icondiy icon-system-daifukuan2",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#FF7B1D", "#FF1544"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitSend": {
|
||||
"title": "待发货",
|
||||
"icon": "icondiy icon-system-daifahuo2",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#FF7B1D", "#FF1544"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitConfirm": {
|
||||
"title": "待收货",
|
||||
"icon": "icondiy icon-system-daishouhuo2",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#FF7B1D", "#FF1544"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitUse": {
|
||||
"title": "待使用",
|
||||
"icon": "icondiy icon-system-daishiyong2",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#FF7B1D", "#FF1544"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"refunding": {
|
||||
"title": "售后",
|
||||
"icon": "icondiy icon-system-shuhou2",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#FF7B1D", "#FF1544"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "风格二",
|
||||
data: {
|
||||
"waitPay": {
|
||||
"title": "待付款",
|
||||
"icon": "icondiy icon-system-daifukuan",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": [],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitSend": {
|
||||
"title": "待发货",
|
||||
"icon": "icondiy icon-system-daifahuo",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": [],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitConfirm": {
|
||||
"title": "待收货",
|
||||
"icon": "icondiy icon-system-daishouhuo",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": [],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitUse": {
|
||||
"title": "待使用",
|
||||
"icon": "icondiy icon-system-daishiyong",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": [],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"refunding": {
|
||||
"title": "售后",
|
||||
"icon": "icondiy icon-system-shuhou",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": [],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "风格三",
|
||||
data: {
|
||||
"waitPay": {"title": "待付款"},
|
||||
"waitSend": {"title": "待发货"},
|
||||
"waitConfirm": {"title": "待收货"},
|
||||
"waitUse": {"title": "待使用"},
|
||||
"refunding": {"title": "售后"}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "风格四",
|
||||
data: {
|
||||
"waitPay": {
|
||||
"title": "待支付",
|
||||
"icon": "icondiy icon-system-daizhifu",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 90,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#20DA86", "#03B352"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitSend": {
|
||||
"title": "备货中",
|
||||
"icon": "icondiy icon-system-beihuozhong",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 90,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#20DA86", "#03B352"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitConfirm": {
|
||||
"title": "配送中",
|
||||
"icon": "icondiy icon-system-paisongzhong",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 90,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#20DA86", "#03B352"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"waitUse": {
|
||||
"title": "待使用",
|
||||
"icon": "icondiy icon-system-daishiyong2",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 75,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#20DA86", "#03B352"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
},
|
||||
"refunding": {
|
||||
"title": "退换货",
|
||||
"icon": "icondiy icon-system-tuihuoguanli",
|
||||
"style": {
|
||||
"bgRadius": 0,
|
||||
"fontSize": 90,
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"iconColor": ["#20DA86", "#03B352"],
|
||||
"iconColorDeg": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.$parent.data.ignore = [];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
styleList: this.styleList,
|
||||
systemColor: diyMemberMyOrderSystemColor,
|
||||
methods: {
|
||||
switchIconStyle: this.switchIconStyle,
|
||||
handleIconStyle: this.handleIconStyle
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
return res;
|
||||
},
|
||||
handleIconStyle(data) {
|
||||
if (this.data.style == 1 || this.data.style == 4) {
|
||||
data.iconColor = [colourBlend(diyMemberMyOrderSystemColor.main_color, '#ffffff', 0.5), diyMemberMyOrderSystemColor.main_color];
|
||||
}
|
||||
return data;
|
||||
},
|
||||
switchIconStyle(index) {
|
||||
this.$parent.data.style = index + 1;
|
||||
this.$parent.data.icon = {};
|
||||
var self = this;
|
||||
setTimeout(function () {
|
||||
self.$parent.data.icon = self.iconList[index].data;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user