1573 lines
41 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="main">
<view class="content">
<view
class="top"
:style="{
paddingTop: `${menu.bottom + 14}px`,
}"
>
<view class="userInfoLeft">
<view class="userFile">
<button
class="avatarBtn"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
class="headerImg"
:src="WXProfile || user.MEMBERSHIP_HEADIMAGEURL"
/>
</button>
</view>
<view class="userInfoBox">
<view class="userTop">
<span class="userName">{{ user.MEMBERSHIP_NAME || "游客" }}</span>
<image
v-if="user.MEMBERSHIP_LEVEL"
class="userType"
:src="
user.MEMBERSHIP_LEVEL === 1000
? '/static/images/home/normalUser.svg'
: user.MEMBERSHIP_LEVEL === 2000
? '/static/images/home/silverCard.svg'
: ''
"
/>
</view>
</view>
</view>
<view class="userInfoRight" @click="handleSign">
<image class="sginIcon" src="/static/images/home/signInIcon.png" />
<span class="sginText">{{
toDayHaveSign ? "今日已签到" : "签到"
}}</span>
</view>
</view>
<view class="balanceBox">
<view class="balanceTop">
<view class="leftTop">
<view class="balanceValue">0.00</view>
<view class="balanceUnit">余额</view>
</view>
<view class="rightTop" @click="handleGoUserCode">
<image
class="codeIcon"
src="/static/images/home/userInfoCode.svg"
/>
</view>
</view>
<view class="balanceBottom">
<view class="bottomItem">
<view class="bottomValue">{{ user.COUPON_COUNT || 0 }}</view>
<view class="bottomUnit">优惠券</view>
</view>
<view class="bottomItem">
<view class="bottomValue">{{ user.MEMBERSHIP_POINT || 0 }}</view>
<view class="bottomUnit">积分</view>
</view>
</view>
</view>
<!-- 我的订单 -->
<view class="orderBox">
<view class="orderTitle">我的订单</view>
<view class="orderList">
<view
class="orderItem"
v-for="(item, index) in orderList"
:key="index"
@click="handleGoOrder(item)"
>
<image class="orderIcon" :src="item.url" />
<text class="orderText">{{ item.label || "" }}</text>
</view>
</view>
</view>
<view class="orderBox">
<view class="orderTitle">常用功能</view>
<view class="oftenList">
<view
class="oftenItem"
v-for="(item, index) in oftenList"
:key="index"
@click="handleOften(item)"
>
<image class="oftenIcon" :src="item.url" />
<text class="oftenText">{{ item.label || "" }}</text>
</view>
</view>
</view>
<view class="orderBox">
<view class="orderTitle">其他功能</view>
<view class="orderList">
<view
class="orderItem"
v-for="(item, index) in otherList"
:key="index"
@click="handleOther(item)"
>
<image class="orderIcon" :src="item.url" />
<text class="orderText">{{ item.label || "" }}</text>
</view>
</view>
</view>
<tabbar :page="'/pages/userCenter/index'" />
</view>
<view class="pageBg"></view>
<div class="page-body" v-if="false">
<div class="userDetailBox">
<div class="userBox">
<div class="userLeft">
<div class="userImgBox">
<!-- <div
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #eaecee;
border-radius: 50%;
"
>
<image
style="width: 40%; height: 40%"
src="/static/images/home/defaultUser.png"
/>
</div> -->
<button
class="avatarBtn"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
class="headerImg"
:src="WXProfile || user.MEMBERSHIP_HEADIMAGEURL"
/>
</button>
</div>
<div class="userDetail" @click="goRegister()">
<div class="userName">{{ user.MEMBERSHIP_NAME || "游客" }}</div>
<span class="identity">{{
user.MEMBERSHIP_LEVEL_TEXT || ""
}}</span>
</div>
</div>
<div class="codeBox" @click="isGo('/pages/homeFn/payfor/index')">
<image class="codeImg" src="/static/images/home/codeIcon.png" />
<span class="codeText">会员码</span>
</div>
</div>
<div class="propertyBox">
<div
class="propertyItem"
@click="isGo('/pages/homeFn/myCoupon/index')"
>
<div class="propertyLabel">优惠券</div>
<div class="propertyValue">{{ user.COUPON_COUNT || 0 }}</div>
</div>
<div
class="propertyItem"
@click="isGo('/pages/homeFn/integral/index')"
>
<div class="propertyLabel">积分</div>
<div class="propertyValue">{{ user.MEMBERSHIP_POINT || 0 }}</div>
</div>
<!-- <div
class="propertyItem"
@click="isGo('/pages/homeFn/consumption/index')"
>
<div class="propertyLabel">余额</div>
<div class="propertyValue">{{ user.ACCOUNT_BALANCE || 0 }}</div>
</div> -->
</div>
</div>
<div class="funListBox">
<div class="funItem" @click="isGo('/pages/orders/order/index')">
<image class="funIcon" src="/static/images/home/foodIcon.svg" />
<div class="funName">我的点餐</div>
</div>
<div class="funItem" @click="isGo('/pages/homeFn/myCoupon/index')">
<image class="funIcon" src="/static/images/home/couponLogo.png" />
<div class="funName">优惠券</div>
</div>
<div class="funItem" @click="isGo('/pages/homeFn/mycar/index')">
<image class="funIcon" src="/static/images/home/carLogo.png" />
<div class="funName">绑定车辆</div>
</div>
<div class="funItem" @click="isGo('/pages/myAddress/address/index')">
<image class="funIcon" src="/static/images/home/addressUser.png" />
<div class="funName">我的地址</div>
</div>
<div class="funItem" @click="isGo('/pages/community/myPost')">
<image class="funIcon" src="/static/images/home/post.png" />
<div class="funName">我的发帖</div>
</div>
<div class="funItem" @click="isGo('/pages/contact/index')">
<image class="funIcon" src="/static/images/home/lostAndfound.png" />
<div class="funName">失物招领</div>
</div>
<!-- <div class="funItem" @click="isGo('/pages/noDataPage/index')">
<image class="funIcon" src="/static/images/home/customerService.svg" />
<div class="funName">客户服务</div>
</div> -->
<div class="funItem" @click="handleCallPhone">
<image class="funIcon" src="/static/images/home/serviceHotline.svg" />
<div class="funName">服务热线</div>
</div>
<!-- <div
class="funItem"
v-if="loginType && loginType !== 'min'"
@click="handleLoginoOut"
>
<image class="funIcon" src="/static/images/home/closeLogin.png" />
<div class="funName">退出登录</div>
</div> -->
<div class="funItem">
<image class="funIcon" src="/static/images/home/iLike.svg" />
<div class="funName gray">我的关注</div>
</div>
</div>
<UniPopup
:show="isShowPop && !user.MEMBERSHIP_MOBILEPHONE"
@close="isShowPop = false"
custom-style="border-radius: 24rpx;"
>
<div class="pop-box">
<div class="pop-title">温馨提示</div>
<div class="pop-body">您还没有登录快去登录吧!</div>
<div class="popbtn-box">
<div class="popbtn cancel-btn" @click="isShowPop = false">取消</div>
<div class="popbtn confirm-btn" @click="goRegister">去登录</div>
</div>
</div>
</UniPopup>
<UniPopup
:show="isShowBuilding"
@close="isShowBuilding = false"
custom-style="border-radius: 24rpx;"
>
<div class="pop-box">
<div class="pop-title">温馨提示</div>
<div class="pop-body">该模块正在建设中尽请期待</div>
<div class="popbtn-box">
<!-- <div class="popbtn cancel-btn" @click="isShowBuilding=false">关闭</div> -->
<div class="popbtn confirm-btn" @click="isShowBuilding = false">
确定
</div>
</div>
</div>
</UniPopup>
<UniPopup
:show="showInvitedCode"
position="bottom"
overlay="false"
custom-style="height: 60%"
@close="showInvitedCode = false"
>
<van-divider contentPosition="center">我的邀请码</van-divider>
<image
:src="InviteCodePath"
:style="{
width: windowMsg.width * windowMsg.scale + 'px',
height: windowMsg.width + 'rpx',
margin: '48rpx auto',
display: 'block',
}"
/>
<view class="down-img-btn">
<van-button
icon="down"
round
color="linear-gradient(to right, #1f1f1f, #62605f)"
custom-style="width:300rpx;padding:32rpx auto;"
@click="saveImage"
>保存到本地</van-button
>
</view>
</UniPopup>
<!-- <popGet/> -->
<tabbar :page="'/pages/userCenter/index'" />
</div>
</view>
</template>
<script>
import { mapGetters } from "vuex";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import tabbar from "../../components/tabbar.vue";
export default {
computed: {
...mapGetters({
canIuse: "canIuse",
user: "user",
}),
phone() {
if (this.user.MEMBERSHIP_MOBILEPHONE) {
let a = this.user.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
let b = this.user.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
return a + "****" + b;
} else {
return "";
}
},
},
components: {
UniPopup,
tabbar,
},
data() {
const windows = uni.getSystemInfoSync();
return {
isShowBuilding: false,
isShowPop: false,
showInvitedCode: false,
InviteCodePath: "",
windowMsg: {
width: windows.windowWidth,
height: windows.windowHeight,
scale: windows.windowWidth / 750,
},
spreadMsg: {
DirectCount: 0,
IndirectCount: 0,
DoneCount: 0,
}, // 我的营销数据
loginType: "", // 登录类型
WXProfile: "",
menu: {},
orderList: [
{
label: "待付款",
value: 1,
url: "/static/images/home/obligation.svg",
},
{
label: "待收货",
value: 2,
url: "/static/images/home/receiptOfGoods.svg",
},
{ label: "待评价", value: 3, url: "/static/images/home/evaluated.svg" },
{
label: "售后/退货",
value: 4,
url: "/static/images/home/afterSales.svg",
},
],
oftenList: [
{
label: "绑定车辆",
value: 1,
url: "/static/images/home/bindCarIcon.svg",
},
{
label: "失物招领",
value: 2,
url: "/static/images/home/lostFoundIcon.svg",
},
{
label: "我的发帖",
value: 3,
url: "/static/images/home/userMessage.svg",
},
],
otherList: [
{
label: "我的地址",
value: 1,
url: "/static/images/home/addressManager.svg",
},
{
label: "客户服务",
value: 2,
url: "/static/images/home/customerServiceIcon.svg",
},
{
label: "服务热线",
value: 3,
url: "/static/images/home/hostPhone.svg",
},
{
label: "账户设置",
value: 4,
url: "/static/images/home/userConfig.svg",
},
],
toDayHaveSign: false, // 今日是否已经签到了
};
},
onUnload() {
this.isShowPop = false;
},
onLoad() {
// uni.setNavigationBarColor({
// frontColor: "#ffffff",
// backgroundColor: "#4E4E4E",
// animation: {
// duration: 30,
// timingFunc: "linear",
// },
// });
// 判断是小程序还是app
let type = uni.getStorageSync("loginType");
console.log("type", type);
this.loginType = type;
if (type === "min") {
this.menu = uni.getMenuButtonBoundingClientRect();
} else {
this.menu = systemInfo.safeArea;
}
},
onShow() {
let signTime = uni.getStorageSync("signTime");
signTime = new Date(signTime).getTime();
let now = new Date().getTime();
console.log("signTime", signTime);
console.log("now", now);
if (signTime < now) {
this.toDayHaveSign = false;
} else {
this.toDayHaveSign = true;
}
if (!this.user.MEMBERSHIP_ID) {
if (this.loginType === "min") {
uni.navigateTo({ url: "/pages/register/index" });
} else {
uni.navigateTo({ url: "/pages/login/index" });
}
}
this.getMember();
this.getDistributionCount();
this.handleGetUserInfo();
},
methods: {
// 签到
handleSign() {
let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
let nowDay = `${y}-${m < 10 ? "0" + m : m}-${
d < 10 ? "0" + d : d
} 23:59:59`;
let _this = this;
if (this.user.MEMBERSHIP_MOBILEPHONE) {
_this.$api
.getCoop({
action_type: "signIn",
})
.then((res) => {
if (res.ResultCode === "100") {
_this.BonusPoint = res.Data.Bonus_Point;
_this.$api
.getCoop({
action_type: "getConsecutiveSignIn",
})
.then((rs) => {
uni.showToast({
title: "签到成功!",
icon: "none",
});
uni.setStorageSync("signTime", nowDay);
this.toDayHaveSign = true;
});
} else if (res.ResultCode === "101") {
uni.showToast({
title: "今日已签到!",
icon: "none",
});
} else {
uni.showModal({
content: res.ResultDesc,
showCancel: false,
success: (res) => {
if (res.confirm) {
}
},
});
}
});
} else {
this.isShow = true;
}
},
// 跳转会员码页面
handleGoUserCode() {
uni.navigateTo({
url: "/pages/homeFn/payfor/index",
});
},
// 订单的点击跳转
handleGoOrder(obj) {
console.log("obj", obj);
if (obj.value === 1) {
// 待付款
} else if (obj.value === 2) {
// 待收货
} else if (obj.value === 3) {
// 待评价
} else if (obj.value === 4) {
// 售后
}
uni.navigateTo({ url: `/pages/orders/order/index` });
},
// 常用功能的点击
handleOften(obj) {
if (obj.value === 1) {
// 绑定车辆
uni.navigateTo({ url: "/pages/homeFn/mycar/index" });
} else if (obj.value === 2) {
// 失物招领
uni.navigateTo({ url: "/pages/contact/index" });
} else if (obj.value === 3) {
// 我的发帖
uni.navigateTo({ url: "/pages/community/myPost" });
}
},
// 其他的功能点击
handleOther(obj) {
if (obj.value === 1) {
// 我的地址
uni.navigateTo({ url: "/pages/myAddress/address/index" });
} else if (obj.value === 2) {
// 客户服务
uni.navigateTo({ url: "/pages/noDataPage/index" });
} else if (obj.value === 3) {
// 服务热线
this.handleCallPhone();
} else if (obj.value === 4) {
// 账号设置
uni.navigateTo({ url: "/pages/userConfig/index" });
}
},
// 退出登录
handleLoginoOut() {
this.$store.commit("setUser", undefined);
uni.navigateTo({ url: "/pages/login/index" });
},
// 服务区热线
handleCallPhone() {
uni.showModal({
title: "提示",
content: `服务热线96566`,
confirmText: "呼叫",
success: function (res) {
if (res.confirm) {
uni.makePhoneCall({
phoneNumber: "96566", //仅为示例
});
} else if (res.cancel) {
}
},
});
},
// 微信用户头像
async onChooseAvatar(e) {
console.log("e", e);
// this.WXProfile = e.detail.avatarUrl;
// console.log("this.WXProfile", this.WXProfile);
// if (!this.WXProfile) {
// return;
// }
let _this = this;
console.log("this.user", this.user);
uni.uploadFile({
url: "https://api.eshangtech.com/EShangApiMain/Picture/UploadPicture", // 你的接口 URL
filePath: e.detail.avatarUrl,
name: "file", // 表单中的文件字段名
formData: {
Tabletype: "1005", // 表单中其他数据
},
success: async (uploadRes) => {
let data = uploadRes.data ? JSON.parse(uploadRes.data) : "";
let url = data.Result_Data.ImageUrl;
console.log("url", url);
if (url) {
let req = {
membershipId: this.user.MEMBERSHIP_ID,
headImgUrl: url,
};
_this.WXProfile = url;
const userInfoData = await _this.$api.$get(
"/WeChat/UpdateMemberInfo",
req
);
console.log("userInfoData", userInfoData);
if (userInfoData.Result_Code === 100) {
_this.handleGetUserInfo();
}
}
},
});
return;
uni.saveFile({
tempFilePath: e.detail.avatarUrl,
success: async (res) => {
console.log("res.savedFilePath", res.savedFilePath);
let req = {
membershipId: this.user.MEMBERSHIP_ID,
headImgUrl: res.savedFilePath,
};
_this.WXProfile = res.savedFilePath;
const userInfoData = await _this.$api.$get(
"/WeChat/UpdateMemberInfo",
req
);
console.log("userInfoData", userInfoData);
if (userInfoData.Result_Code === 100) {
_this.handleGetUserInfo();
}
},
fail: (err) => {
console.log("err", err);
uni.showToast({
title: err,
icon: "none",
});
},
});
},
// 拿用户最新的user信息
handleGetUserInfo() {
let _this = this;
_this.$api
.getCoop({
action_type: "GetMembershipInfo",
WechatUserId: _this.user.WechatUserId,
})
.then(function (data) {
if (data.ResultCode === "100") {
let _data = data;
console.log("_data", _data);
_this.user.MEMBERSHIP_ID = _data.Data.MEMBERSHIP_ID || "";
_this.user.MEMBERSHIP_NAME = _data.Data.MEMBERSHIP_NAME || "";
_this.user.MEMBERSHIP_LEVEL_TEXT =
_data.Data.MEMBERSHIP_LEVEL_TEXT || "";
_this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
_this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
_this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
_this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
_this.user.ISPLUS = _data.Data.ISPLUS || "";
_this.user.INDUSTRY_MEMBERSHIP_ID =
_data.Data.INDUSTRY_MEMBERSHIP_ID || "";
_this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
_this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
_this.user.InviteCode = _data.Data.InviteCode || "";
_this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
_this.user.MEMBERSHIP_MOBILEPHONE =
_data.Data.MEMBERSHIP_MOBILEPHONE || "";
_this.WXProfile = _data.Data.MEMBERSHIP_HEADIMAGEURL;
// _this.setUser(user);
_this.$store.commit("setUser", _this.user);
} else {
// _this.setUser({});
_this.$store.commit("setUser", user);
}
});
},
goRegister() {
if (this.user.MEMBERSHIP_NAME) {
} else {
if (this.loginType === "min") {
this.isShowPop = false;
uni.navigateTo({ url: "/pages/register/index" });
} else {
uni.redirectTo({ url: "/pages/login/index" });
}
}
},
shouldShowBuilding(url) {
if (url === "/pages/orders/order/index") {
this.isGo(url);
} else {
this.isShowBuilding = true;
}
},
isGo(url) {
console.log("this.user", this.user);
if (this.user.MEMBERSHIP_MOBILEPHONE) {
if (url === "/pages/homeFn/consumption/index") {
if (this.user.INDUSTRY_MEMBERSHIP_ID) {
uni.navigateTo({ url: url });
}
} else {
uni.navigateTo({ url: url });
}
} else {
this.isShowPop = true;
}
},
getMember() {
let _this = this;
_this.$api
.getCoop({
action_type: "GetMembershipInfo",
// memberShipId: this.user.MEMBERSHIP_ID,
WechatUserId: this.user.WechatUserId,
RegisterType: 0,
})
.then(function (data) {
console.log("GetMembershipInfo", data);
if (data.ResultCode === "100") {
let _data = data.Data;
_this.user.MEMBERSHIP_LEVEL_TEXT =
_data.Data.MEMBERSHIP_LEVEL_TEXT || "";
_this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
_this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
_this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
_this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
_this.user.ISPLUS = _data.Data.ISPLUS || "";
_this.user.INDUSTRY_MEMBERSHIP_ID =
_data.Data.INDUSTRY_MEMBERSHIP_ID || "";
_this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
_this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
_this.user.DELIVER_COUNT = _data.Data.DELIVER_COUNT || "";
_this.user.InviteCode = _data.Data.InviteCode || "";
_this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
_this.user.MEMBERSHIP_MOBILEPHONE =
_data.Data.MEMBERSHIP_MOBILEPHONE || "";
_this.$store.commit("setUser", _this.user);
}
});
},
getDistributionCount() {
let _this = this;
if (_this.user.MEMBERSHIP_ID) {
_this.$api
.getCoop({
action_type: "GetDistributionCount",
})
.then((res) => {
console.log("312312", res);
_this.spreadMsg = res.Data;
_this.$forceUpdate();
});
}
},
creatPageQR() {
// 生成当前页面小程序二维码
let _this = this;
uni.showLoading({
title: "正在加载",
});
_this.$api
.getCoop({
action_type: "CreateWxCode",
page: "pages/home/index",
scene: _this.user.InviteCode, // 商品id & 当前用户邀请码
width: 1280,
})
.then((res) => {
_this.InviteCodePath = res.Data.imgUrl;
_this.showInvitedCode = true;
_this.$forceUpdate();
uni.hideLoading();
});
},
saveImage() {
// 将海报保存图片到
let _this = this;
uni.getSetting({
success(res) {
if (!res.authSetting["scope.writePhotosAlbum"]) {
uni.authorize({
scope: "scope.writePhotosAlbum",
success() {
// 用户已经同意小程序使用相册
_this.saveImageToPhotos();
},
fail() {
wx.openSetting({
success: (res) => {},
});
},
});
} else {
// 用户已经同意小程序使用相册
_this.saveImageToPhotos();
}
},
});
},
saveImageToPhotos() {
let _this = this;
uni.showLoading({ title: "正在保存" });
uni.getImageInfo({
src: _this.InviteCodePath, // _this.good.DEFAULT_IMG,
success: (rs) => {
uni.saveImageToPhotosAlbum({
filePath: rs.path,
success(result) {
uni.showToast({
title: "保存成功,从相册中分享到朋友圈吧",
icon: "none",
duration: 4000,
});
uni.hideLoading();
_this.showInvitedCode = false;
},
fail: function (res) {
uni.showToast({
title: "图片保存失败",
icon: "none",
duration: 2000,
});
},
});
},
});
},
},
};
</script>
<style lang="less" scoped>
.main {
background: #f5f7f9;
padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
min-height: 100vh;
position: relative;
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 32rpx;
position: absolute;
top: 0;
left: 0;
z-index: 3;
.top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.userInfoLeft {
display: flex;
.userFile {
width: 120rpx;
height: 120rpx;
margin-right: 24rpx;
border-radius: 50%;
overflow: hidden;
.avatarBtn {
width: 120rpx;
height: 120rpx;
padding: 0;
.headerImg {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.userInfoBox {
.userTop {
display: flex;
align-items: center;
.userName {
font-family: "PingFangSC";
font-weight: 400;
font-size: 40rpx;
color: #130f05;
line-height: 56rpx;
text-align: left;
font-style: normal;
}
.userType {
width: 80rpx;
height: 32rpx;
margin-left: 8rpx;
}
}
}
}
.userInfoRight {
padding: 10rpx 20rpx;
border-radius: 28rpx;
background: linear-gradient(90deg, #ffebe5 0%, #ffedd8 100%);
display: flex;
align-items: center;
.sginIcon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.sginText {
font-family: "PingFangSC";
font-weight: 400;
font-size: 26rpx;
color: #ff7040;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
.balanceBox {
width: 100%;
border-radius: 16rpx;
overflow: hidden;
margin-top: 40rpx;
.balanceTop {
width: 100%;
box-sizing: border-box;
padding: 32rpx;
background: linear-gradient(
270deg,
#393530 0%,
#504741 48%,
#393530 100%
);
display: flex;
align-items: center;
justify-content: space-between;
.leftTop {
.balanceValue {
font-family: "DINAlternate";
font-weight: bold;
font-size: 48rpx;
color: #ecdfbf;
line-height: 56rpx;
text-align: left;
font-style: normal;
}
.balanceUnit {
font-family: "PingFangSC";
font-weight: 400;
font-size: 28rpx;
color: #bdb08f;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.rightTop {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
.codeIcon {
width: 64rpx;
height: 64rpx;
}
}
}
.balanceBottom {
width: 100%;
box-sizing: border-box;
padding: 16rpx 0;
background: #fff;
display: flex;
align-items: center;
.bottomItem {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.bottomValue {
font-family: "DINAlternate";
font-weight: bold;
font-size: 40rpx;
color: #130f05;
line-height: 48rpx;
text-align: left;
font-style: normal;
}
.bottomUnit {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-top: 4rpx;
}
}
}
}
.orderBox {
width: 100%;
margin-top: 24rpx;
background: #fff;
border-radius: 12rpx;
box-sizing: border-box;
padding: 24rpx;
.orderTitle {
font-family: "PingFangSC";
font-weight: 400;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.orderList {
width: 100%;
margin-top: 24rpx;
display: flex;
align-items: center;
.orderItem {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
.orderIcon {
width: 48rpx;
height: 48rpx;
margin-bottom: 8rpx;
}
.orderText {
font-family: "PingFangSC";
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
.oftenList {
width: 100%;
margin-top: 24rpx;
display: flex;
align-items: center;
.oftenItem {
width: calc(100% / 3);
display: flex;
flex-direction: column;
align-items: center;
.oftenIcon {
width: 72rpx;
height: 72rpx;
margin-bottom: 4rpx;
}
.oftenText {
font-family: "PingFangSC";
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
}
.pageBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 720rpx;
background-image: url("https://eshangtech.com/minTestImg/newBackg.png");
background-size: 100% 100%;
z-index: 1;
}
}
// .page-body {
// // background #ffffff
// padding: 24rpx 32rpx;
// // padding-bottom: 20rpx;
// box-sizing: border-box;
// background: linear-gradient(180deg, #F0F4FF 0%, #F6F7F9 100%);
// padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
// min-height: 100vh;
// .userDetailBox {
// width: 100%;
// background: #FFFFFF;
// border-radius: 8rpx;
// box-sizing: border-box;
// padding: 24rpx 32rpx;
// margin-bottom: 32rpx;
// .userBox {
// width: 100%;
// display: flex;
// align-items: center;
// justify-content: space-between;
// box-sizing: border-box;
// padding-bottom: 24rpx;
// border-bottom: 1px solid #F3F3F3;
// .userLeft {
// display: flex;
// align-items: center;
// .userImgBox {
// width: 104rpx;
// height: 104rpx;
// border-radius: 50%;
// overflow: hidden;
// .avatarBtn {
// width: 100%;
// height: 100%;
// padding: 0;
// .headerImg {
// width: 100%;
// height: 100%;
// }
// }
// }
// .userDetail {
// margin-left: 24rpx;
// // display: flex;
// // flex-direction: column;
// // justify-content: space-between;
// height: 104rpx;
// .userName {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 32rpx;
// color: #130F05;
// line-height: 44rpx;
// text-align: justify;
// font-style: normal;
// margin-bottom: 8rpx;
// }
// .identity {
// font-family: PingFangSC, PingFang SC;
// font-weight: 500;
// font-size: 22rpx;
// color: #c79519;
// line-height: 32rpx;
// text-align: justify;
// font-style: normal;
// background: #faf3e2;
// border-radius: 16rpx 16rpx 16rpx 0rpx;
// padding: 2rpx 6rpx;
// }
// }
// }
// .codeBox {
// width: 80rpx;
// box-sizing: border-box;
// padding: 4rpx;
// display: flex;
// flex-direction: column;
// .codeImg {
// width: 64rpx;
// height: 64rpx;
// }
// .codeText {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 22rpx;
// color: #130F05;
// line-height: 32rpx;
// text-align: justify;
// font-style: normal;
// white-space: nowrap;
// }
// }
// }
// .propertyBox {
// width: 100%;
// display: flex;
// box-sizing: border-box;
// padding-top: 24rpx;
// .propertyItem {
// width: calc((100% / 2));
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// .propertyLabel {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 28rpx;
// color: #130F05;
// line-height: 40rpx;
// text-align: left;
// font-style: normal;
// }
// .propertyValue {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 28rpx;
// color: #BA922F;
// line-height: 40rpx;
// text-align: left;
// font-style: normal;
// }
// }
// }
// }
// .funListBox {
// width: 100%;
// background: #fff;
// border-radius: 8rpx;
// box-sizing: border-box;
// padding: 0 32rpx;
// .funItem {
// padding: 32rpx 0;
// display: flex;
// align-items: center;
// border-bottom: 1px solid #F5F6F7;
// .funIcon {
// width: 40rpx;
// height: 40rpx;
// margin-right: 12rpx;
// }
// .funName {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 28rpx;
// color: #130F05;
// line-height: 40rpx;
// text-align: left;
// font-style: normal;
// }
// .gray {
// color: #c5c6c7;
// }
// }
// }
// }
// .user-card {
// display: flex;
// height: 278rpx;
// color: #3e4148;
// border-radius: 20rpx;
// flex-direction: column;
// // align-items center
// // justify-content center
// background-image: url('https://eshangtech.com/ShopICO/user-card.png'); // eshangtech.com/ShopICO/user-card.png)
// background-size: cover;
// background-position: center;
// }
// .photo {
// width: 100rpx;
// height: 100rpx;
// border-radius: 50%;
// overflow: hidden;
// margin-right: 20rpx;
// }
// .user-card-top {
// display: flex;
// // justify-content space-between
// color: #41414b;
// box-sizing: border-box;
// padding: 40rpx 40rpx;
// width: 100%;
// font-size: 28rpx;
// position: relative;
// align-items: center;
// }
// .novip {
// background: url('https://eshangtech.com/ShopICO/nohavevip.png') no-repeat left center; // eshangtech.com/ShopICO/nohavevip.png) no-repeat left center
// background-size: contain;
// height: 30rpx;
// width: 160rpx;
// }
// .user-btn {
// background: url('https://eshangtech.com/ShopICO/join-vip.png') no-repeat center; // eshangtech.com/ShopICO/join-vip.png) no-repeat center
// background-size: contain;
// color: #414141;
// height: 54rpx;
// width: 176rpx;
// border-radius: 28rpx;
// }
// .ico-menu {
// width: 34rpx;
// height: 34rpx;
// vertical-align: middle;
// margin-right: 12rpx;
// }
// .name-text {
// line-height: 50rpx;
// font-size: 32rpx;
// color: #28292d;
// }
// .user-tab {
// display: flex;
// align-items: center;
// justify-content: center;
// height: 138rpx;
// width: 100%;
// background-color: #2C2C2C;
// position: relative;
// top: -20rpx;
// font-family: 'PingFang SC Medium';
// padding: 0 30rpx;
// box-sizing: border-box;
// }
// .u-t-unit {
// font-size: 12px;
// color: #D5C59D;
// width: 40%;
// display: flex;
// align-items: center;
// justify-content: center;
// flex-direction: column;
// height: 100%;
// }
// .user-tab-num {
// margin-top: 12rpx;
// color: #D5C59D;
// font-size: 28rpx;
// }
// .code-cont-box {
// padding: 24rpx 0 24rpx 24rpx;
// border-radius: 12rpx;
// display: flex;
// align-items: center;
// background-color: #fff;
// margin: 0 30rpx 30rpx;
// }
// .code-title {
// font-size: 24rpx;
// width: 100rpx;
// }
// .code-text {
// font-size: 30rpx;
// color: #498fe2;
// width: 370rpx;
// }
// .code-btn {
// font-size: 24rpx;
// color: #498fe2;
// width: 192rpx;
// text-align: center;
// border-left: 1rpx solid #eee;
// }
// .list-num {
// color: #A4A5A8;
// margin-right: 20rpx;
// font-size: 24rpx;
// display: inline-block;
// vertical-align: middle;
// font-family: 'PingFang SC Medium';
// }
// .user-menu {
// margin: 0 30rpx;
// padding: 0 30rpx;
// background: #fff;
// border-radius: 12rpx;
// }
// .my-list + .my-list {
// border-top: 1rpx solid #eee;
// }
// .my-list {
// height: 80rpx;
// padding: 16rpx 0rpx;
// display: flex;
// justify-content: space-between;
// align-items: center;
// font-size: 26rpx;
// color: #383838;
// }
// .list-title {
// flex: 0.5;
// display: flex;
// align-items: center;
// font-family: 'PingFang SC Regular';
// }
// .list-title span {
// flex: 0.7;
// }
// .my-list image, .spread-view image {
// vertical-align: middle;
// margin-right: 18rpx;
// }
// image.my-ico1 {
// width: 35rpx;
// height: 31rpx;
// }
// image.my-ico2 {
// width: 35rpx;
// height: 28rpx;
// }
// image.my-ico3 {
// width: 35rpx;
// height: 26rpx;
// }
// image.my-ico4 {
// width: 17rpx;
// height: 30rpx;
// }
// image.my-ico5 {
// width: 35rpx;
// height: 31rpx;
// }
// .no-border {
// border: none;
// }
// .pop-box {
// width: 588rpx;
// height: 256rpx;
// text-align: center;
// padding: 40rpx 0;
// border-radius: 30rpx;
// overflow: hidden;
// }
// .pop-title {
// font-size: 32rpx;
// }
// .pop-body {
// font-size: 28rpx;
// margin-top: 36rpx;
// }
// .popbtn-box {
// display: flex;
// justify-content: center;
// align-items: center;
// margin-top: 72rpx;
// }
// .popbtn {
// height: 60rpx;
// width: 208rpx;
// border-radius: 32rpx;
// text-align: center;
// font-size: 24rpx;
// line-height: 60rpx;
// }
// .popbtn+.popbtn {
// margin-left: 60rpx;
// }
// .cancel-btn {
// border: 1rpx solid #616161;
// color: #616161;
// }
// .confirm-btn {
// background: #515151;
// color: #fff;
// }
// // 营销
// .spread-view {
// border-radius: 12rpx;
// background: #fff;
// margin: 0 30rpx 24rpx 30rpx;
// font-size: 26rpx;
// padding: 24rpx 0;
// }
// .spread-tab {
// margin-top: 16rpx;
// display: flex;
// align-items: center;
// justify-content: space-between;
// }
// .spread-tab .u-t-unit {
// color: #B89051;
// }
// .spread-tab .user-tab-num {
// color: #B89051;
// margin-bottom: 12rpx;
// }
// .down-img-btn {
// text-align: center;
// padding: 32rpx 0;
// background: #fff;
// position: absolute;
// bottom: 0;
// width: 100%;
// left: 0;
// }
</style>