forked from zhongyuanhaiju/uniapp
1038 lines
27 KiB
Vue
1038 lines
27 KiB
Vue
<template>
|
|
<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="widthFix"
|
|
@error="memberInfo.headimg = $util.getDefaultImage().head"
|
|
></image>
|
|
</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" @click="getWxAuth">{{ memberInfo.nickname }}</text>
|
|
<text
|
|
class="member-level"
|
|
v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level"
|
|
@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>
|
|
</view>
|
|
<view
|
|
class="member-level"
|
|
v-if="value.style == 3 && memberInfo.member_level"
|
|
@click="redirectBeforeAuth(memberInfo.member_level_type ? '/pages_tool/member/card' : '/pages_tool/member/level')"
|
|
>
|
|
<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 -->
|
|
|
|
<!-- #ifdef H5 -->
|
|
<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>
|
|
<view class="nickname" v-else>
|
|
<text class="name">{{ memberInfo.nickname }}</text>
|
|
<text
|
|
class="member-level"
|
|
v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level"
|
|
@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>
|
|
</view>
|
|
<view
|
|
class="member-level"
|
|
v-if="value.style == 3 && memberInfo.member_level"
|
|
@click="redirectBeforeAuth(memberInfo.member_level_type ? '/pages_tool/member/card' : '/pages_tool/member/level')"
|
|
>
|
|
<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 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">点击登录 享受更多精彩信息</view>
|
|
</view>
|
|
<text class="iconfont icon-qrcode member-code"></text>
|
|
</view>
|
|
|
|
<view
|
|
class="account-info"
|
|
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/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 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" v-if="memberCode">
|
|
<view class="popup-top">
|
|
<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-text">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
|
|
</view>
|
|
<view class="popup-bottom"><text class="iconfont iconfont-delete icon-close-guanbi" @click="closeMemberQrcode"></text></view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 完善会员资料 -->
|
|
<view @touchmove.prevent.stop class="member-complete-info-popup">
|
|
<uni-popup ref="completeInfoPopup" type="bottom" :maskClick="false">
|
|
<view class="complete-info-wrap">
|
|
<view class="head">
|
|
<text class="title">获取您的昵称、头像</text>
|
|
<text class="color-tip tips">获取用户头像、昵称完善个人资料，主要用于向用户提供具有辨识度的用户中心界面</text>
|
|
<text class="iconfont icon-close color-tip" @click="cancelCompleteInfo"></text>
|
|
</view>
|
|
<view class="item-wrap">
|
|
<text class="label">头像</text>
|
|
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<image :src="avatarUrl ? avatarUrl : $util.getDefaultImage().head" @error="avatarUrl = $util.getDefaultImage().head" mode="aspectFill"></image>
|
|
<text class="iconfont icon-right color-tip"></text>
|
|
</button>
|
|
</view>
|
|
<view class="item-wrap">
|
|
<text class="label">昵称</text>
|
|
<input type="nickname" placeholder="请输入昵称" v-model="nickName" @blur="blurNickName" />
|
|
</view>
|
|
|
|
<button type="default" class="save-btn" @click="saveCompleteInfo" :disabled="isDisabled">保存</button>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
<ns-login ref="login"></ns-login>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 自定义会员中心——会员信息
|
|
export default {
|
|
name: 'diy-member-info',
|
|
props: {
|
|
value: {
|
|
type: Object
|
|
},
|
|
token: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
memberInfo: null,
|
|
superMember: null,
|
|
memberCode: null,
|
|
avatarUrl: '', // 头像预览
|
|
headImg: '', // 头像保存
|
|
nickName: '',
|
|
completeInfoCallback: null
|
|
};
|
|
},
|
|
options: { styleIsolation: 'shared' },
|
|
created() {
|
|
this.init();
|
|
},
|
|
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 +
|
|
` 0%, ` +
|
|
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;
|
|
},
|
|
isDisabled() {
|
|
if (this.nickName.length > 0) return false;
|
|
return true;
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
if (uni.getStorageSync('token')) this.getMemberInfo();
|
|
else this.memberInfo = null;
|
|
this.getMemberCardInfo();
|
|
},
|
|
/**
|
|
* 查询会员信息
|
|
*/
|
|
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.headImg = this.memberInfo.headimg;
|
|
this.nickName = this.memberInfo.nickname;
|
|
this.avatarUrl = this.headImg ? this.$util.img(this.headImg) : this.$util.getDefaultImage().head;
|
|
|
|
/*
|
|
小程序用户头像昵称获取规则调整公告
|
|
https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01
|
|
用于处理昵称将统一返回 “微信用户”
|
|
*/
|
|
if (this.nickName == '微信用户') {
|
|
this.openCompleteInfoPop();
|
|
}
|
|
this.getCouponNum();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 查询优惠券数量
|
|
*/
|
|
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.memberInfo.mobile && !this.memberInfo.member_code) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '使用会员码需先绑定手机号，是否绑定手机号？',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
this.$util.redirectTo('/pages_tool/member/info_edit', { action: 'mobile' });
|
|
}
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
if (this.memberCode) {
|
|
this.$refs.erWeiPopup.open();
|
|
}
|
|
this.$api.sendRequest({
|
|
url: '/api/member/membereqrcode',
|
|
data: {
|
|
page: ''
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.memberCode = {
|
|
barcode: res.bar_code,
|
|
qrcode: res.data.path
|
|
};
|
|
this.$refs.erWeiPopup.open();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 关闭会员码
|
|
*/
|
|
closeMemberQrcode() {
|
|
this.$refs.erWeiPopup.close();
|
|
},
|
|
/**
|
|
* 跳转之前需先进行授权
|
|
* @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
|
|
this.openCompleteInfoPop(() => {
|
|
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;
|
|
}
|
|
});
|
|
},
|
|
openCompleteInfoPop(callback) {
|
|
this.$refs.completeInfoPopup.open(()=>{
|
|
this.$store.commit('setBottomNavHidden', false); //显示底部导航
|
|
});
|
|
this.$store.commit('setBottomNavHidden', true); // 隐藏底部导航
|
|
this.completeInfoCallback = callback;
|
|
},
|
|
saveCompleteInfo() {
|
|
if (this.nickName.length == 0) {
|
|
this.$util.showToast({
|
|
title: '请输入昵称'
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.modifyNickname(this.nickName);
|
|
this.modifyHeadimg(this.headImg);
|
|
this.$refs.completeInfoPopup.close();
|
|
this.$store.commit('setBottomNavHidden', false); // 显示底部导航
|
|
typeof this.completeInfoCallback == 'function' && this.completeInfoCallback();
|
|
},
|
|
cancelCompleteInfo() {
|
|
this.$refs.completeInfoPopup.close();
|
|
this.$store.commit('setBottomNavHidden', false); // 显示底部导航
|
|
},
|
|
blurNickName(e) {
|
|
if (e.detail.value) this.nickName = e.detail.value;
|
|
},
|
|
onChooseAvatar(e) {
|
|
this.avatarUrl = e.detail.avatarUrl;
|
|
uni.getFileSystemManager().readFile({
|
|
filePath: this.avatarUrl, //选择图片返回的相对路径
|
|
encoding: 'base64', //编码格式
|
|
success: res => {
|
|
let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦
|
|
this.myUpload(base64);
|
|
}
|
|
});
|
|
},
|
|
//上传返回图片
|
|
myUpload(base64) {
|
|
let app_type = 'h5';
|
|
let app_type_name = 'H5';
|
|
|
|
// #ifdef MP
|
|
app_type = 'weapp';
|
|
app_type_name = 'weapp';
|
|
// #endif
|
|
uni.request({
|
|
url: this.$config.baseUrl + '/api/upload/headimgBase64',
|
|
method: 'POST',
|
|
data: {
|
|
app_type: app_type,
|
|
app_type_name: app_type_name,
|
|
images: base64
|
|
},
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded;application/json'
|
|
},
|
|
dataType: 'json',
|
|
responseType: 'text',
|
|
success: res => {
|
|
if (res.data.code == 0) {
|
|
this.headImg = res.data.data.pic_path;
|
|
} else {
|
|
this.$util.showToast({
|
|
title: res.message
|
|
});
|
|
}
|
|
},
|
|
fail: () => {
|
|
this.$util.showToast({
|
|
title: '上传失败'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.common-wrap {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
// 会员信息
|
|
.member-info {
|
|
// #ifdef MP
|
|
padding-top: 108rpx;
|
|
// #endif
|
|
|
|
.info-wrap {
|
|
padding: 44rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
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: 20rpx;
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.nickname {
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 38rpx;
|
|
font-weight: 600;
|
|
}
|
|
.mobile {
|
|
font-size: 26rpx;
|
|
line-height: 1.5;
|
|
}
|
|
.desc {
|
|
font-size: 24rpx;
|
|
}
|
|
.member-code,
|
|
.user-info {
|
|
font-size: 40rpx;
|
|
color: #fff;
|
|
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;
|
|
}
|
|
.member-complete-info-popup {
|
|
.complete-info-wrap {
|
|
background: #fff;
|
|
padding: 50rpx 40rpx 40rpx;
|
|
padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
|
|
|
.head {
|
|
position: relative;
|
|
border-bottom: 2rpx solid $color-line;
|
|
padding-bottom: 20rpx;
|
|
.title {
|
|
font-size: $font-size-toolbar;
|
|
display: block;
|
|
}
|
|
.tips {
|
|
font-size: $font-size-base;
|
|
display: block;
|
|
}
|
|
.iconfont {
|
|
position: absolute;
|
|
right: 0;
|
|
top: -30rpx;
|
|
display: inline-block;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
text-align: right;
|
|
font-size: $font-size-toolbar;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.item-wrap {
|
|
border-bottom: 2rpx solid $color-line;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
|
|
.label {
|
|
font-size: $font-size-toolbar;
|
|
margin-right: 40rpx;
|
|
}
|
|
button {
|
|
background: transparent;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
flex: 1;
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $font-size-toolbar;
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.iconfont {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
box-sizing: border-box;
|
|
font-size: $font-size-toolbar;
|
|
}
|
|
}
|
|
.save-btn {
|
|
width: 280rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background-color: #07c160;
|
|
color: #fff;
|
|
margin: 40rpx auto 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom,
|
|
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom .uni-popup__wrapper-box {
|
|
border-top-left-radius: 30rpx !important;
|
|
border-top-right-radius: 30rpx !important;
|
|
}
|
|
</style>
|