You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1080 lines
26 KiB
1080 lines
26 KiB
<template>
|
|
<div>
|
|
<view class="container" :style="warpCss">
|
|
<!-- 会员信息 -->
|
|
<view class="common-wrap info-wrap" :data-style="value.style">
|
|
<view class="member-info" :style="memberInfostyle">
|
|
<view class="info-wrap" v-if="memberInfo">
|
|
<view class="headimg" @click="getWxAuth">
|
|
<image :src="
|
|
memberInfo.headimg
|
|
? $util.img(memberInfo.headimg)
|
|
: $util.getDefaultImage().head
|
|
" mode="aspectFill" @error="memberInfo.headimg = $util.getDefaultImage().head"></image>
|
|
|
|
<view class="member" @click="redirectBeforeAuth('/pages_tool/member/level')">
|
|
{{ memberInfo.member_level_name }}
|
|
<u-icon name="arrow-right" size="10" color="var(--base-color)"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<block v-if="
|
|
(memberInfo.nickname.indexOf('u_') != -1 &&
|
|
memberInfo.nickname == memberInfo.username) ||
|
|
memberInfo.nickname == memberInfo.mobile
|
|
">
|
|
<view class="nickname">
|
|
<text class="name" @click="getWxAuth">点击获取微信头像</text>
|
|
</view>
|
|
</block>
|
|
<view class="nickname" v-else>
|
|
<text class="name">{{storeData.title}}</text>
|
|
<!-- <text
|
|
class="member-level"
|
|
v-if="value.style == 1 || value.style == 2"
|
|
@click="redirectBeforeAuth(memberInfo.member_level_type ? '/pages_tool/member/card' : '/pages_tool/member/level')"
|
|
>
|
|
<text class="icondiy icon-system-huangguan"></text>
|
|
{{ memberInfo.member_level_name }}
|
|
</text> -->
|
|
<text style="color:#fff;background: var(--base-color);" class="member-level"
|
|
@click="cutClick">
|
|
切换店铺
|
|
</text>
|
|
</view>
|
|
<view class="member-level" v-if="value.style == 3">
|
|
<image :src="$util.img('public/uniapp/member/supervip_icon.png')" mode="heightFix"
|
|
class="level-icon"></image>
|
|
<view class="level-name">{{ memberInfo.member_level_name }}</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<block v-if="
|
|
$util.isWeiXin() &&
|
|
((memberInfo.nickname.indexOf('u_') != -1 &&
|
|
memberInfo.nickname == memberInfo.username) ||
|
|
memberInfo.nickname == memberInfo.mobile)
|
|
">
|
|
<view class="nickname">
|
|
<text class="name" @click="getWxAuth">点击获取微信头像</text>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="nickname">
|
|
<text class="name" v-if="storeData">{{ storeData.title }}</text>
|
|
<text class="name" v-if="!storeData">{{ memberInfo.nickname }}</text>
|
|
<!-- <text
|
|
class="member-level"
|
|
v-if="value.style == 1 || value.style == 2"
|
|
@click="redirectBeforeAuth(memberInfo.member_level_type ? '/pages_tool/member/card' : '/pages_tool/member/level')"
|
|
>
|
|
<text class="icondiy icon-system-huangguan"></text>
|
|
{{ memberInfo.member_level_name }}
|
|
</text> -->
|
|
<text v-if="!storeData"
|
|
style="color:#fff;background: var(--base-color);border-radius: 8rpx;"
|
|
class="member-level" @click="seeAll">
|
|
全部店铺
|
|
</text>
|
|
<text v-if="storeData"
|
|
style="color:#fff;background: var(--base-color);border-radius: 8rpx;"
|
|
class="member-level" @click="cutClick">
|
|
切换店铺
|
|
</text>
|
|
</view>
|
|
<!-- <view class="desc" style="color: #999;">{{ storeData.title }}</view> -->
|
|
</block>
|
|
|
|
<view class="member-level" v-if="value.style == 3">
|
|
<image :src="$util.img('public/uniapp/member/supervip_icon.png')" mode="heightFix"
|
|
class="level-icon"></image>
|
|
<view class="level-name">{{ memberInfo.member_level_name }}</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<!-- <text class="iconfont icon-qrcode member-code" @click="showMemberQrcode"></text> -->
|
|
<text style="color:#000" class="iconfont icon-shezhi user-info"
|
|
@click="$util.redirectTo('/pages_tool/member/info')"></text>
|
|
</view>
|
|
<view class="info-wrap" v-else @click="redirect('/pages/member/index')">
|
|
<view class="headimg">
|
|
<image :src="$util.getDefaultImage().head" mode="widthFix"></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="nickname"><text class="name">登录/注册</text></view>
|
|
<view class="desc" style="color: #999;">点击登录 享受更多精彩信息</view>
|
|
</view>
|
|
<!-- <text class="iconfont icon-qrcode member-code"></text> -->
|
|
</view>
|
|
|
|
<view class="account-info" style="padding:10rpx 0 20rpx;"
|
|
v-show="value.style == 1 || value.style == 3" :style="{
|
|
'margin-left': parseInt(value.infoMargin) * 2 + 'rpx',
|
|
'margin-right': parseInt(value.infoMargin) * 2 + 'rpx'
|
|
}">
|
|
<view class="account-item" @click="redirect('/pages_tool/Recharge/Recharge')">
|
|
<view style="color: #222;" class="value price-font">
|
|
{{
|
|
memberInfo
|
|
? (
|
|
parseFloat(memberInfo.balance) +
|
|
parseFloat(memberInfo.balance_money)
|
|
).toFixed(2)
|
|
: '--'
|
|
}}
|
|
</view>
|
|
<view class="title" style="color: #222;">账户余额</view>
|
|
</view>
|
|
<!-- <view class="solid" ></view> -->
|
|
|
|
<!-- <view class="solid"></view> -->
|
|
<view class="account-item" @click="redirect('/pages_tool/member/my_coupon')">
|
|
<view class="value price-font" style="color: #222;">
|
|
{{
|
|
memberInfo && memberInfo.coupon_num != undefined
|
|
? memberInfo.coupon_num
|
|
: '--'
|
|
}}
|
|
</view>
|
|
<view class="title" style="color: #222;">优惠券</view>
|
|
</view>
|
|
<view class="account-item" @click="redirect('/pages_tool/member/point')">
|
|
<view class="value price-font" style="color: #222;">
|
|
{{ memberInfo ? parseFloat(memberInfo.point) : '--' }}
|
|
</view>
|
|
<view class="title" style="color: #222;">积分商城</view>
|
|
</view>
|
|
</view>
|
|
<view class="super-member" v-if="superMember" :style="superMemberStyle">
|
|
<block v-if="value.style == 1 || value.style == 2">
|
|
<view class="super-info">
|
|
<text class="icondiy icon-system-huangguan"></text>
|
|
<text>超级会员</text>
|
|
</view>
|
|
<view class="super-text">
|
|
<text class="see" v-if="memberInfo && memberInfo.member_level_type"
|
|
@click="redirectBeforeAuth('/pages_tool/member/card')">
|
|
查看特权
|
|
</text>
|
|
<text class="see" v-else @click="redirectBeforeAuth('/pages_tool/member/card_buy')">
|
|
会员可享更多权益
|
|
</text>
|
|
<text class="iconfont icon-right"></text>
|
|
</view>
|
|
</block>
|
|
<block v-if="value.style == 3">
|
|
<view class="super-info">
|
|
<image :src="$util.img('public/uniapp/member/open_member.png')" class="title"
|
|
mode="heightFix" />
|
|
<view class="desc">开通可享更多权益</view>
|
|
</view>
|
|
<view class="super-text">
|
|
<text class="see" v-if="memberInfo && memberInfo.member_level_type"
|
|
@click="redirectBeforeAuth('/pages_tool/member/card')">
|
|
查看特权
|
|
</text>
|
|
<text class="see" v-else @click="redirectBeforeAuth('/pages_tool/member/card_buy')">
|
|
立即开通
|
|
</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="account-info" v-show="value.style == 2" :style="{
|
|
'margin-left': parseInt(value.infoMargin) * 2 + 'rpx',
|
|
'margin-right': parseInt(value.infoMargin) * 2 + 'rpx'
|
|
}">
|
|
<view class="account-item" @click="redirect('/pages_tool/member/balance')">
|
|
<view class="value price-font">
|
|
{{
|
|
memberInfo
|
|
? (
|
|
parseFloat(memberInfo.balance) +
|
|
parseFloat(memberInfo.balance_money)
|
|
).toFixed(2)
|
|
: '--'
|
|
}}
|
|
</view>
|
|
<view class="title">余额</view>
|
|
</view>
|
|
<view class="solid"></view>
|
|
<view class="account-item" @click="redirect('/pages_tool/member/point')">
|
|
<view class="value price-font">
|
|
{{ memberInfo ? parseFloat(memberInfo.point) : '--' }}
|
|
</view>
|
|
<view class="title">积分</view>
|
|
</view>
|
|
<view class="solid"></view>
|
|
<view class="account-item" @click="redirect('/pages_tool/member/coupon')">
|
|
<view class="value price-font">
|
|
{{
|
|
memberInfo && memberInfo.coupon_num != undefined
|
|
? memberInfo.coupon_num
|
|
: '--'
|
|
}}
|
|
</view>
|
|
<view class="title">优惠券</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 会员码 -->
|
|
<uni-popup ref="erWeiPopup" type="center">
|
|
<view class="member-code-popup">
|
|
<view class="popup-top" @click="getMemberQrcode">
|
|
<view class="popup-top-title">
|
|
<view class="iconfont icon-erweima"></view>
|
|
<view class="popup-top-title-txt">会员码</view>
|
|
</view>
|
|
<view class="popup-top-tiao">
|
|
<image :src="$util.img(memberCode.barcode)" mode=""></image>
|
|
</view>
|
|
<view class="popup-top-erwei">
|
|
<image :src="$util.img(memberCode.qrcode)" mode=""></image>
|
|
</view>
|
|
<view class="popup-top-shauxin" @click="getMemberQrcode">
|
|
<text>动态码 {{ memberCode.dynamicNumber }}</text>
|
|
<text class="iconfont icon-shuaxin"></text>
|
|
</view>
|
|
<view class="popup-top-text">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
|
|
</view>
|
|
<view class="popup-bottom">
|
|
<text class="iconfont iconfont-delete icon-close-guanbi" @click="closeMemberQrcode"></text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<ns-login ref="login"></ns-login>
|
|
<cut-account ref="cutAccount"></cut-account>
|
|
</view>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 自定义会员中心——会员信息
|
|
import cutAccount from '@/components/cut_account.vue';
|
|
|
|
export default {
|
|
components: {
|
|
cutAccount
|
|
},
|
|
name: 'diy-member-info',
|
|
props: {
|
|
value: {
|
|
type: Object
|
|
},
|
|
token: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
memberInfo: null,
|
|
superMember: null,
|
|
memberCode: {
|
|
timer: null,
|
|
barcode: '',
|
|
qrcode: '',
|
|
routerParameter: '',
|
|
dynamicNumber: ''
|
|
},
|
|
cutShow: false,
|
|
storeData: {}
|
|
};
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
mounted() {
|
|
uni.$on('changeStore', data => {
|
|
if (data) {
|
|
uni.startPullDownRefresh();
|
|
this.init();
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
});
|
|
},
|
|
watch: {
|
|
token(nVal, oVal) {
|
|
this.init();
|
|
}
|
|
},
|
|
computed: {
|
|
memberInfostyle() {
|
|
let style = {};
|
|
if (this.value.style == 3) {
|
|
style.background =
|
|
`radial-gradient(36% 112% at 16% 6%, rgba(255,97,40,0.12) 0%, rgba(255,97,40,0.12) 0%, rgba(226,239,255,0.1) 100%, rgba(226,239,255,.1) 100%)`;
|
|
} else {
|
|
if (this.value.theme == 'default') {
|
|
style.background =
|
|
`url('` +
|
|
this.$util.img('public/static/img/diy_view/member_info_bg.png') +
|
|
`') no-repeat bottom / contain, var(--base-color)`;
|
|
} else {
|
|
style.background =
|
|
`url('` +
|
|
this.$util.img('public/static/img/diy_view/member_info_bg.png') +
|
|
`') no-repeat bottom / contain, linear-gradient(` +
|
|
this.value.gradientAngle +
|
|
`deg, ` +
|
|
this.value.bgColorStart +
|
|
` 50%, ` +
|
|
this.value.bgColorEnd +
|
|
` 100%)`;
|
|
}
|
|
}
|
|
return this.$util.objToStyle(style);
|
|
},
|
|
superMemberStyle() {
|
|
let style = {
|
|
'margin-left': parseInt(this.value.infoMargin) * 2 + 'rpx ',
|
|
'margin-right': parseInt(this.value.infoMargin) * 2 + 'rpx '
|
|
};
|
|
if (this.value.style == 3) {
|
|
style.background =
|
|
`#292f45 url(` +
|
|
this.$util.img('public/uniapp/member/supervip_bg.png') +
|
|
`) no-repeat bottom / 100% 100%`;
|
|
} else {
|
|
style.background =
|
|
`url('` +
|
|
this.$util.img('public/static/img/diy_view/super_member_bg.png') +
|
|
`') no-repeat bottom / 100% 100%, linear-gradient(107deg, ` +
|
|
this.themeStyle.super_member.super_member_start_bg +
|
|
` 0%, ` +
|
|
this.themeStyle.super_member.super_member_end_bg +
|
|
` 100%)`;
|
|
}
|
|
return this.$util.objToStyle(style);
|
|
},
|
|
warpCss() {
|
|
var obj = '';
|
|
obj += 'background-color:' + this.value.componentBgColor + ';';
|
|
if (this.value.componentAngle == 'round') {
|
|
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
}
|
|
return obj;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
if (uni.getStorageSync('token')) {
|
|
this.getMemberInfo();
|
|
this.getStoreList();
|
|
} else this.memberInfo = null;
|
|
this.getMemberCardInfo();
|
|
},
|
|
cutClick() {
|
|
this.$refs.cutAccount.start();
|
|
},
|
|
|
|
/**
|
|
* 查看全部店铺
|
|
*/
|
|
seeAll() {
|
|
uni.navigateTo({
|
|
url: '/pages_tool/member/store/all_store'
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 查询会员信息
|
|
*/
|
|
getMemberInfo() {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/info',
|
|
data: {},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
if (!this.memberInfo) this.memberInfo = res.data;
|
|
else Object.assign(this.memberInfo, res.data);
|
|
this.getCouponNum();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 查询当前用户店铺
|
|
getStoreList() {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/getStoreList',
|
|
data: {
|
|
status: 1
|
|
},
|
|
success: ({ data }) => {
|
|
this.storeData = data[0];
|
|
if (data.length) {
|
|
if (uni.getStorageSync('myStore').id) {
|
|
let myStore = uni.getStorageSync('myStore');
|
|
if (myStore) {
|
|
this.active = myStore.id;
|
|
this.storeData = uni.getStorageSync('myStore');
|
|
} else {
|
|
this.active = data[0].id;
|
|
uni.setStorageSync('myStore', data[0]);
|
|
console.log(this.active, 111111);
|
|
}
|
|
} else {
|
|
uni.setStorageSync('myStore', data[0]);
|
|
}
|
|
|
|
} else {
|
|
let storeObj = {
|
|
id: 0,
|
|
}
|
|
uni.setStorageSync('myStore', storeObj);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 查询优惠券数量
|
|
*/
|
|
getCouponNum() {
|
|
this.$api.sendRequest({
|
|
url: '/coupon/api/coupon/num',
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.$set(this.memberInfo, 'coupon_num', res.data);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 查询超级会员信息
|
|
*/
|
|
getMemberCardInfo() {
|
|
this.$api.sendRequest({
|
|
url: '/supermember/api/membercard/firstcard',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.superMember = res.data;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 跳转
|
|
* @param {Object} url
|
|
*/
|
|
redirect(url) {
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$refs.login.open(url);
|
|
} else {
|
|
this.$util.redirectTo(url);
|
|
}
|
|
},
|
|
/**
|
|
* 显示会员码
|
|
*/
|
|
showMemberQrcode() {
|
|
if (this.memberCode.timer) clearInterval(this.memberCode.timer);
|
|
this.getMemberQrcode();
|
|
this.memberCode.timer = setInterval(() => {
|
|
this.getMemberQrcode();
|
|
}, 30000);
|
|
},
|
|
/**
|
|
* 关闭会员码
|
|
*/
|
|
closeMemberQrcode() {
|
|
clearInterval(this.memberCode.timer);
|
|
this.$refs.erWeiPopup.close();
|
|
},
|
|
/**
|
|
* 获取会员码
|
|
*/
|
|
getMemberQrcode() {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/membereqrcode',
|
|
data: {
|
|
page: ''
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.memberCode.barcode = res.bar_code;
|
|
this.memberCode.qrcode = res.data.path;
|
|
this.memberCode.routerParameter = res.data.url;
|
|
this.memberCode.dynamicNumber = res.dynamic_number;
|
|
if (!this.$refs.erWeiPopup.showPopup) this.$refs.erWeiPopup.open();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 跳转之前需先进行授权
|
|
* @param {Object} url
|
|
*/
|
|
redirectBeforeAuth(url) {
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$refs.login.open('/pages/member/index');
|
|
return;
|
|
}
|
|
|
|
// #ifdef MP-WEIXIN
|
|
if (
|
|
(this.memberInfo.nickname.indexOf('u_') != -1 &&
|
|
this.memberInfo.nickname == this.memberInfo.username) ||
|
|
this.memberInfo.nickname == this.memberInfo.mobile
|
|
) {
|
|
this.getWxAuth(() => {
|
|
this.$util.redirectTo(url);
|
|
});
|
|
} else {
|
|
this.$util.redirectTo(url);
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
if (
|
|
this.$util.isWeiXin() &&
|
|
((this.memberInfo.nickname.indexOf('u_') != -1 &&
|
|
this.memberInfo.nickname == this.memberInfo.username) ||
|
|
this.memberInfo.nickname == this.memberInfo.mobile)
|
|
) {
|
|
this.getWxAuth();
|
|
} else {
|
|
this.$util.redirectTo(url);
|
|
}
|
|
// #endif
|
|
},
|
|
/**
|
|
* 获取微信授权
|
|
*/
|
|
getWxAuth(callback) {
|
|
// #ifdef MP-WEIXIN
|
|
wx.getUserProfile({
|
|
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
|
|
success: res => {
|
|
this.modifyNickname(res.userInfo.nickName);
|
|
this.modifyHeadimg(res.userInfo.avatarUrl);
|
|
typeof callback == 'function' && callback();
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
if (this.$util.isWeiXin()) {
|
|
this.$api.sendRequest({
|
|
url: '/wechat/api/wechat/authcode',
|
|
data: {
|
|
scopes: 'snsapi_userinfo',
|
|
redirect_url: this.$config.h5Domain + '/pages/member/index'
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
location.href = res.data;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// #endif
|
|
},
|
|
/**
|
|
* 修改昵称
|
|
* @param {Object} nickName
|
|
*/
|
|
modifyNickname(nickName) {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/modifynickname',
|
|
data: {
|
|
nickname: nickName
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) this.memberInfo.nickname = nickName;
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 修改头像
|
|
*/
|
|
modifyHeadimg(headimg) {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/modifyheadimg',
|
|
data: {
|
|
headimg: headimg
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) this.memberInfo.headimg = headimg;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.common-wrap {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// 会员信息
|
|
.member-info {
|
|
.info-wrap {
|
|
/* #ifndef MP-WEIXIN */
|
|
padding: 74rpx 30rpx 60rpx;
|
|
|
|
/* #endif */
|
|
/* #ifdef MP-WEIXIN */
|
|
padding: 134rpx 30rpx 60rpx;
|
|
/* #endif */
|
|
display: flex;
|
|
align-items: center;
|
|
color: #222;
|
|
|
|
view {
|
|
color: var(--btn-text-color);
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
width: 0;
|
|
padding-right: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.headimg {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
// overflow: hidden;
|
|
border-radius: 50%;
|
|
margin-right: 40rpx;
|
|
margin-left: 20rpx;
|
|
position: relative;
|
|
border: 2px solid #fff;
|
|
line-height: 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.member {
|
|
// position: absolute;
|
|
// left: -10rpx;
|
|
// bottom: -20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
color: $base-color;
|
|
justify-content: center;
|
|
font-size: 20rpx;
|
|
width: 120rpx;
|
|
height: 36rpx;
|
|
background: #ffffff;
|
|
border-radius: 18rpx;
|
|
border: 1px solid $base-color;
|
|
margin-top: 0rpx;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.nickname {
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #222;
|
|
}
|
|
|
|
.name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 38rpx;
|
|
font-weight: 600;
|
|
color: #222;
|
|
}
|
|
|
|
.mobile {
|
|
font-size: 26rpx;
|
|
color: #222;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.member-code,
|
|
.user-info {
|
|
font-size: 40rpx;
|
|
color: #222;
|
|
margin-left: 20rpx;
|
|
line-height: 1;
|
|
color: var(--btn-text-color);
|
|
}
|
|
|
|
.member-level {
|
|
font-size: 24rpx;
|
|
background: linear-gradient(107deg, #7c7878 0%, #201a18 100%);
|
|
color: #f7c774;
|
|
line-height: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 4rpx;
|
|
padding: 0 16rpx;
|
|
display: inline-block;
|
|
margin-left: 20rpx;
|
|
|
|
.icondiy {
|
|
line-height: 1;
|
|
font-size: 24rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
&.auth {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.super-member {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 120rpx;
|
|
border-top-left-radius: 10rpx;
|
|
border-top-right-radius: 10rpx;
|
|
background: linear-gradient(107deg, #7c7878 0%, #201a18 100%);
|
|
padding: 30rpx 40rpx;
|
|
box-sizing: border-box;
|
|
|
|
text {
|
|
// color: #fff;
|
|
}
|
|
|
|
.icon-huangguan {
|
|
margin-right: 10rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.super-info {
|
|
flex: 1;
|
|
width: 0;
|
|
font-size: 36rpx;
|
|
color: var(--super-member-start-text-color);
|
|
// background-image: linear-gradient(90deg, var(--super-member-start-text-color) 0%, var(--super-member-end-text-color) 100%);
|
|
// -webkit-background-clip: text;
|
|
// -webkit-text-fill-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icondiy {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.see {
|
|
line-height: 1;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.icon-right {
|
|
font-size: 28rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.account-info {
|
|
display: flex;
|
|
padding: 40rpx 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
view {
|
|
color: #fff;
|
|
}
|
|
|
|
.solid {
|
|
height: 70rpx;
|
|
width: 2rpx;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.account-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.value {
|
|
font-size: 34rpx;
|
|
font-weight: bold !important;
|
|
margin-bottom: 4rpx;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.title {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-style='1'] {
|
|
.super-text {
|
|
background-image: linear-gradient(90deg, #ffdba6 0%, #ffebca 49%, #f7c774 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
[data-style='2'] {
|
|
.member-info {
|
|
border-radius: 0 0 100% 100%/0 0 70rpx 70rpx;
|
|
overflow: hidden;
|
|
|
|
.member-level {
|
|
background: linear-gradient(107deg, #fadcb5 0%, #f6bd74 100%);
|
|
color: #8d4b16;
|
|
}
|
|
}
|
|
|
|
.account-info {
|
|
background: #fff;
|
|
margin: 20rpx 0 0 0;
|
|
color: #333;
|
|
border-radius: 18rpx;
|
|
|
|
.solid {
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.account-item {
|
|
.value {
|
|
color: #000000;
|
|
}
|
|
|
|
.title {
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.super-member {
|
|
color: #8d4b16;
|
|
background: linear-gradient(107deg, #fadcb5 0%, #f6bd74 100%);
|
|
border-top-left-radius: 18rpx;
|
|
border-top-right-radius: 18rpx;
|
|
|
|
.super-info {
|
|
color: var(--super-member-start-text-color);
|
|
// background-image: linear-gradient(90deg, var(--super-member-start-text-color) 0%, var(--super-member-end-text-color) 100%);
|
|
}
|
|
|
|
.see {
|
|
color: var(--super-member-start-text-color);
|
|
}
|
|
|
|
.icon-right {
|
|
color: var(--super-member-start-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-style='3'] {
|
|
.info-wrap view {
|
|
color: #282c38;
|
|
}
|
|
|
|
.member-code,
|
|
.user-info {
|
|
color: #282c38;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.member-code {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.super-member {
|
|
border-radius: 22rpx;
|
|
|
|
.super-text {
|
|
.see {
|
|
width: 160rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
background: #e3c377;
|
|
border-radius: 56rpx;
|
|
color: #77413e;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.super-info {
|
|
flex-direction: column;
|
|
align-items: normal;
|
|
|
|
.title {
|
|
height: 36rpx;
|
|
width: auto;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
|
|
.desc {
|
|
color: #e3c377;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.account-info {
|
|
.solid {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.account-item {
|
|
.value {
|
|
color: #282c38;
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.title {
|
|
color: #aab0ba;
|
|
}
|
|
}
|
|
|
|
.member-level {
|
|
background: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.level-icon {
|
|
height: 36rpx;
|
|
}
|
|
|
|
.level-name {
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
padding: 0 20rpx;
|
|
color: #8d4b16;
|
|
background: #f8cf9a;
|
|
font-size: 24rpx;
|
|
display: inline-block;
|
|
margin-left: 10rpx;
|
|
border-radius: 36rpx;
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.member-code-popup {
|
|
width: 100%;
|
|
min-height: 900rpx;
|
|
background: none;
|
|
|
|
.popup-top {
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 800rpx;
|
|
background: #ffffff;
|
|
border-radius: 12rpx;
|
|
|
|
.popup-top-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 60rpx;
|
|
|
|
.popup-top-title-txt {
|
|
font-size: 30rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.popup-top-tiao {
|
|
width: 480rpx;
|
|
height: 160rpx;
|
|
margin: 0 auto 46rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.popup-top-tiaoJie {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: rgb(153, 153, 153);
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.popup-top-erwei {
|
|
width: 254rpx;
|
|
height: 254rpx;
|
|
margin: 0 auto 20rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.popup-top-shauxin {
|
|
width: 350rpx;
|
|
height: 80rpx;
|
|
border-radius: $border-radius;
|
|
background: rgb(245, 249, 247);
|
|
margin: 0 auto;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.iconfont {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.popup-top-text {
|
|
text-align: center;
|
|
font-size: 18rpx;
|
|
color: rgb(153, 153, 153);
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
|
|
.popup-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none !important;
|
|
|
|
.iconfont-delete {
|
|
font-size: 60rpx;
|
|
margin-top: 20rpx;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
|
background: none !important;
|
|
}
|
|
|
|
.member-code-popup .popup-top {
|
|
height: auto;
|
|
}
|
|
</style>
|