422 lines
15 KiB
HTML
422 lines
15 KiB
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> |