初始上传
76
app/component/view/member_info/css/design.css
Executable file
@@ -0,0 +1,76 @@
|
||||
@CHARSET "UTF-8";
|
||||
/* 会员信息组件 */
|
||||
|
||||
.diy-member-info-wrap .member-info-wrap .info-wrap {padding: 15px;display: flex;align-items: center;color: #fff;}
|
||||
.diy-member-info-wrap .member-info-wrap .info-wrap .info {flex: 1;width: 0;padding-right: 10px;overflow: hidden;}
|
||||
.diy-member-info-wrap .member-info-wrap .headimg {width: 60px;height: 60px;overflow: hidden;border-radius: 50%;margin-right: 10px;}
|
||||
.diy-member-info-wrap .member-info-wrap .headimg img {height: 100%;}
|
||||
.diy-member-info-wrap .member-info-wrap .nickname {font-weight: bold;font-size: 14px;white-space: nowrap;margin-bottom: 10px;line-height: 1;display: flex;align-items: center;}
|
||||
.diy-member-info-wrap .member-info-wrap .name {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||||
.diy-member-info-wrap .member-info-wrap .desc {font-size: 12px;line-height: 1;}
|
||||
.diy-member-info-wrap .member-info-wrap .member-code {font-size: 20px;}
|
||||
.diy-member-info-wrap .member-info-wrap .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-wrap .member-info-wrap .member-level .iconfont {font-size: 12px;margin-right: 5px;}
|
||||
|
||||
.diy-member-info-wrap .account-info {display: flex;padding: 20px 0;color: #fff;align-items: center;justify-content: center;}
|
||||
.diy-member-info-wrap .account-info .solid {height: 35px;width: 1px;background: #fff;border-radius: 1px;}
|
||||
.diy-member-info-wrap .account-item {flex: 1;text-align: center;}
|
||||
.diy-member-info-wrap .account-item .value {font-size: 17px;font-weight: bold;margin-bottom: 2px;}
|
||||
.diy-member-info-wrap .account-item .title {font-size: 13px;}
|
||||
.diy-member-info-wrap .member-info-wrap .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('../img/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-wrap .member-info-wrap .super-member .super-info {flex: 1;width: 0;font-size: 18px;}
|
||||
|
||||
.diy-member-info-wrap[data-style="1"] .account-info{padding:10px 0;}
|
||||
.diy-member-info-wrap[data-style="1"] .member-info-wrap .super-member{height:50px;}
|
||||
.diy-member-info-wrap[data-style="1"] .member-info-wrap .super-member .super-info {color:#FFDBA6;}
|
||||
.diy-member-info-wrap[data-style="1"] .member-info-wrap .super-member .super-text{display: flex;align-items: center;justify-content: space-between;color:#FFDBA6;}
|
||||
|
||||
.diy-member-info-wrap .member-info-wrap .super-member .see {line-height: 1;}
|
||||
.diy-member-info-wrap[data-style="2"] .member-info-wrap {border-radius: 0 0 100% 100%/0 0 35px 35px;overflow: hidden;}
|
||||
.diy-member-info-wrap[data-style="2"] .account-info {background: #fff;margin: 10px 0 0 0;color: #333;border-radius: 9px;}
|
||||
.diy-member-info-wrap[data-style="2"] .account-info .solid{background: #F2F2F2;}
|
||||
.diy-member-info-wrap[data-style="2"] .account-info .account-title .title{color: #666666;}
|
||||
.diy-member-info-wrap[data-style="2"] .super-member {color: #8D4B16;border-top-left-radius: 9px;border-top-right-radius: 9px;background: url('../img/super_member_bg.png') no-repeat bottom / 100% 100%, linear-gradient(107deg, #FADCB5 0%, #F6BD74 100%);}
|
||||
.diy-member-info-wrap[data-style="2"] .super-member .super-info {}
|
||||
|
||||
.diy-member-info-wrap[data-style="3"] .member-info-wrap .info-wrap {color: #282C38;}
|
||||
.diy-member-info-wrap[data-style="3"] .account-info {color: #282C38;}
|
||||
.diy-member-info-wrap[data-style="3"] .account-item .value {font-size: 22px;}
|
||||
.diy-member-info-wrap[data-style="3"] .account-item .title {color: #AAB0BA;}
|
||||
.diy-member-info-wrap[data-style="3"] .account-info .solid {background: none;}
|
||||
.diy-member-info-wrap[data-style="3"] .member-info-wrap .super-member {border-radius: 11px;background: #292F45 url("../img/supervip_bg.png") no-repeat bottom / 100% 100%;}
|
||||
.diy-member-info-wrap[data-style="3"] .member-info-wrap .super-text .see{width: 80px;height: 28px;line-height: 28px;background: #E3C377;border-radius: 28px;color: #77413E;text-align: center;font-weight: bold;font-size: 12px;display: block;}
|
||||
.diy-member-info-wrap[data-style="3"] .super-info .title {height: 18px;width: auto;margin-bottom: 7px;}
|
||||
.diy-member-info-wrap[data-style="3"] .super-info .desc {color: #E3C377;}
|
||||
.diy-member-info-wrap[data-style="3"] .member-level {background: none;padding: 0;margin: 0;height: auto;display: flex;align-items: center;}
|
||||
.diy-member-info-wrap[data-style="3"] .member-level .level-icon {width: auto;height: 18px;}
|
||||
.diy-member-info-wrap[data-style="3"] .member-level .level-name {height: 18px;line-height: 18px;padding: 0 10px;color: #8D4B16;background: #F8CF9A;font-size: 12px;display: inline-block;margin-left: 5px;border-radius: 18px;border-bottom-left-radius: 0;border-top-left-radius: 20px;font-weight: bold;}
|
||||
|
||||
|
||||
.diy-member-info-wrap[data-style="4"] .account-info {color: #282C38;}
|
||||
.diy-member-info-wrap[data-style="4"] .account-item .value {font-size: 18px;}
|
||||
.diy-member-info-wrap[data-style="4"] .account-item .title {color: #666666;}
|
||||
.diy-member-info-wrap[data-style="4"] .account-info .solid {background: none;}
|
||||
|
||||
.diy-member-info-wrap[data-style="4"] .member-level {background: #474758;padding: 0;margin: 0;height: auto;border-radius: 10px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-level .level-icon {width: auto;height: 18px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-level .level-name {padding: 0 10px 0 3px;color: #DDC095;font-size: 12px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-wrap{position: relative;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-wrap .info-wrap{color: #fff;padding-bottom: 133px !important;margin-bottom: 113px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4{position: absolute;top: 100px;left: 12px;right: 12px;padding: 15px;background-color: #fff;border-radius: 8px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .account-info{padding: 25px 0;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .account-info .account-item .value{color: #282c38;font-size: 19px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .account-info .account-item .title{color: #666666;font-size: 12px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .super-member{display: flex;align-items: center;border-radius: 11px;height: 60px;line-height: 60px;padding: 10px;background: #292F45 url("../img/super_vip_bg_4.png") no-repeat bottom / 100% 100%;box-sizing: border-box;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .super-member .super-info{display: flex;align-items: center;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .super-member .super-info .title{width: 40px;height: auto;will-change: transform;margin-right: 10px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .super-member .super-info .desc{font-size: 15px;color: #333;font-weight: bold;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .super-member .super-text{display: flex;align-items: center;justify-content: center;background-color: #333;border-radius: 13px;width: 69px;height: 26px;margin-left: auto;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .super-member .super-text .see{color: #F6DCAD;font-size: 11px;line-height: 1;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .style4-other{display: flex;justify-content: space-between;padding: 0 5px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .style4-other .style4-btn-wrap{flex: 1;display: flex;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .style4-other .style4-btn-wrap button{margin: 0;width: 100px;height: 40px;line-height: 40px;border-radius: 22px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .style4-other .style4-btn-wrap button:first-of-type{margin-right: 15px;border: #FFDEAD;color: #fff;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .style4-other .style4-btn-wrap button:last-of-type{border: 1px solid;background-color: #fff;height: 38px;line-height: 38px;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .style4-other .code{width: 40px;height: 40px;padding: 10px;border-radius: 50%;box-sizing: border-box;}
|
||||
.diy-member-info-wrap[data-style="4"] .member-info-style4 .style4-other .code img{width: 100%;height: 100%;}
|
||||
196
app/component/view/member_info/design.html
Executable file
@@ -0,0 +1,196 @@
|
||||
<nc-component :data="data[index]" class="diy-member-info-wrap" :data-style="nc.style">
|
||||
|
||||
<!-- 预览 -->
|
||||
<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="member-info-wrap" :style="nc.tempData.methods ? nc.tempData.methods.getBgStyle() : {}">
|
||||
<div class="info-wrap">
|
||||
<div class="headimg">
|
||||
<img :src="changeImgUrl('public/static/img/default_img/head.png')" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<template v-if="nc.style == 1 || nc.style == 2">
|
||||
<div class="nickname">
|
||||
<span class="name">勇敢的小鱼</span>
|
||||
<span class="member-level"><i class="iconfont iconhuangguan"></i>会员</span>
|
||||
</div>
|
||||
<div class="desc">点击登录 享受更多精彩信息</div>
|
||||
</template>
|
||||
<template v-if="nc.style == 3">
|
||||
<div class="nickname">
|
||||
<span class="name">勇敢的小鱼</span>
|
||||
</div>
|
||||
<div class="member-level">
|
||||
<img src="__PUBLIC__/uniapp/member/supervip_icon.png" alt="" class="level-icon">
|
||||
<span class="level-name">普通会员</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="nc.style == 4">
|
||||
<div class="nickname">
|
||||
<span class="name">勇敢的小鱼</span>
|
||||
</div>
|
||||
<div class="member-level">
|
||||
<img :src="changeImgUrl('{$resource_path}/img/style_4_vip_tag.png')" alt="" class="level-icon">
|
||||
<span class="level-name">普通会员</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<i class="iconfont iconico member-code"></i>
|
||||
</div>
|
||||
<div class="account-info" v-show="nc.style == 1 || nc.style == 3" :style="{'margin-left': nc.infoMargin + 'px', 'margin-right': nc.infoMargin + 'px' }">
|
||||
<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" v-if="nc.style == 1 || nc.style == 2" :style="{'margin-left': nc.infoMargin + 'px', 'margin-right': nc.infoMargin + 'px' }">
|
||||
<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 class="super-member" v-if="nc.style == 3" :style="{'margin-left': nc.infoMargin + 'px', 'margin-right': nc.infoMargin + 'px' }">
|
||||
<div class="super-info">
|
||||
<img :src="changeImgUrl('public/uniapp/member/open_member.png')" class="title">
|
||||
<div class="desc">开通可享更多权益</div>
|
||||
</div>
|
||||
<div class="super-text">
|
||||
<span class="see">查看特权</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-info-style4" v-if="nc.style == 4">
|
||||
<div class="super-member">
|
||||
<div class="super-info">
|
||||
<img :src="changeImgUrl('{$resource_path}/img/style_4_vip_huangguan.png')" class="title">
|
||||
<div class="desc">开通会员 享六大权益</div>
|
||||
</div>
|
||||
<div class="super-text">
|
||||
<span class="see">立即开通</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="account-info" :style="{'margin-left': nc.infoMargin + 'px', 'margin-right': nc.infoMargin + 'px' }">
|
||||
<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="style4-other">
|
||||
<div class="style4-btn-wrap">
|
||||
<button :style="{'backgroundColor': nc.tempData.baseColor}">余额充值</button>
|
||||
<button :style="{'color': nc.tempData.baseColor, 'borderColor': nc.tempData.baseColor}">专属顾问</button>
|
||||
</div>
|
||||
<div class="code" :style="{'backgroundColor': nc.tempData.baseColor}">
|
||||
<img :src="changeImgUrl('{$resource_path}/img/style_4_code.png')" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="account-info" v-show="nc.style == 2" :style="{'margin-left': nc.infoMargin + 'px', 'margin-right': nc.infoMargin + 'px' }">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<diy-member-info-sources></diy-member-info-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.style = item.value" :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>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">背景</label>
|
||||
<div class="layui-input-block">
|
||||
<div @click="nc.theme='default'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.theme == 'default') }">
|
||||
<i class="layui-anim layui-icon">{{ nc.theme == 'default' ? "" : "" }}</i>
|
||||
<div>跟随主题风格</div>
|
||||
</div>
|
||||
<div @click="nc.theme='diy'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.theme == 'diy') }">
|
||||
<i class="layui-anim layui-icon">{{ nc.theme == 'diy' ? "" : "" }}</i>
|
||||
<div>自定义</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="nc.theme == 'diy'">
|
||||
<color :data="{ field : 'bgColorStart,bgColorEnd', 'label' : '背景颜色', defaultColor : '#FF7130,#FF1542' }"></color>
|
||||
<slide :data="{ field : 'gradientAngle', label: '渐变角度', min:0, max: 365 }"></slide>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<slide :data="{ field : 'infoMargin', label: '间距', min:0, max: 20 }"></slide>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var diyMemberInfoSystemColor = {:json_encode($system_color)};
|
||||
var memberInfoResourcePath = "{$resource_path}"; // http路径
|
||||
var memberInfoRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
BIN
app/component/view/member_info/img/style_4_bg.png
Executable file
|
After Width: | Height: | Size: 69 KiB |
BIN
app/component/view/member_info/img/style_4_code.png
Executable file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
app/component/view/member_info/img/style_4_vip_huangguan.png
Executable file
|
After Width: | Height: | Size: 18 KiB |
BIN
app/component/view/member_info/img/style_4_vip_tag.png
Executable file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
app/component/view/member_info/img/super_member_bg.png
Executable file
|
After Width: | Height: | Size: 25 KiB |
BIN
app/component/view/member_info/img/super_vip_bg_4.png
Executable file
|
After Width: | Height: | Size: 185 KiB |
BIN
app/component/view/member_info/img/supervip_bg.png
Executable file
|
After Width: | Height: | Size: 14 KiB |
62
app/component/view/member_info/js/design.js
Executable file
@@ -0,0 +1,62 @@
|
||||
var diyMemberInfoHtml = '<div></div>';
|
||||
|
||||
Vue.component("diy-member-info-sources", {
|
||||
template: diyMemberInfoHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
styleList: [
|
||||
{text: '样式一', value: 1},
|
||||
{text: '样式二', value: 2},
|
||||
{text: '样式三', value: 3},
|
||||
{text: '样式四', value: 4}
|
||||
]
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.$parent.data.ignore = ['componentAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
styleList: this.styleList,
|
||||
baseColor: diyMemberInfoSystemColor.main_color,
|
||||
methods: {
|
||||
getBgStyle: this.getBgStyle
|
||||
},
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
"data.style": function(val){
|
||||
this.data.theme = "default";
|
||||
if(val == 3){
|
||||
this.data.theme = "diy";
|
||||
this.data.bgColorStart = "#f9e6df";
|
||||
this.data.bgColorEnd = "#f6f8f9";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
return res;
|
||||
},
|
||||
getBgStyle() {
|
||||
let style = {},
|
||||
img = "",
|
||||
backSize = "contain";
|
||||
if (this.data.style == 4) {
|
||||
img = ns.img(memberInfoRelativePath + '/img/style_4_bg.png');
|
||||
backSize = "cover";
|
||||
} else if(this.data.style != 3) {
|
||||
img = ns.img('public/static/img/diy_view/member_info_bg.png')
|
||||
}
|
||||
if (this.data.theme == 'default') {
|
||||
style.background = `url('${img}') no-repeat bottom / ${backSize}, linear-gradient(${this.data.gradientAngle}deg, ${diyMemberInfoSystemColor.main_color} 0%, ${diyMemberInfoSystemColor.main_color} 100%)`;
|
||||
} else {
|
||||
style.background = `url('${img}') no-repeat bottom / ${backSize},linear-gradient(${this.data.gradientAngle}deg, ${this.data.bgColorStart} 0%, ${this.data.bgColorEnd} 100%)`;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
});
|
||||