初始上传

This commit is contained in:
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions

View 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%;}

View 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 ? "&#xe643;" : "&#xe63f;" }}</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' ? "&#xe643;" : "&#xe63f;" }}</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' ? "&#xe643;" : "&#xe63f;" }}</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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View 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;
}
}
});