caiyunyi/pages/user/index.vue
ylj20011123 caba7797f1 update
2025-12-02 18:35:40 +08:00

2603 lines
77 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" :class="{ 'refreshing': isRefreshing }">
<view class="fixedHeader" :style="{ height: menu.bottom + 16 + 'px' }">
<image class="YDIcon" src="/static/images/home/yunnanLogo.svg" />
</view>
<!-- 用户页面骨架屏 -->
<view class="user-skeleton" v-if="!showContent" :style="{ paddingTop: menu.bottom + 16 + 'px' }">
<!-- 用户信息骨架 -->
<view class="skeleton-user-info">
<view class="skeleton-avatar skeleton"></view>
<view class="skeleton-user-details">
<view class="skeleton skeleton-username"></view>
<view class="skeleton skeleton-level"></view>
</view>
<view class="skeleton skeleton-qr-code"></view>
</view>
<!-- 优惠券统计骨架 -->
<view class="skeleton-coupon-box">
<view class="skeleton-coupon-item">
<view class="skeleton skeleton-number"></view>
<view class="skeleton skeleton-label"></view>
</view>
<view class="skeleton-coupon-item">
<view class="skeleton skeleton-number"></view>
<view class="skeleton skeleton-label"></view>
</view>
</view>
<!-- 我的服务骨架 -->
<view class="skeleton-service-box">
<view class="skeleton skeleton-title"></view>
<view class="skeleton-service-grid">
<view class="skeleton-service-item" v-for="index in 5" :key="index">
<view class="skeleton skeleton-service-icon"></view>
<view class="skeleton skeleton-service-text"></view>
</view>
</view>
</view>
<!-- 我的订单骨架 -->
<view class="skeleton-order-box">
<view class="skeleton-order-header">
<view class="skeleton skeleton-title"></view>
<view class="skeleton skeleton-more"></view>
</view>
<view class="skeleton-order-grid">
<view class="skeleton-order-item" v-for="index in 4" :key="index">
<view class="skeleton skeleton-order-icon"></view>
<view class="skeleton skeleton-order-text"></view>
</view>
</view>
</view>
</view>
<view class="pageTop" v-else :style="{ paddingTop: menu.bottom + 16 + 'px' }">
<!-- 两个包一下 改一下样式 -->
<view class="userTopInfo">
<!-- 用户信息内容 -->
<view class="userInfoBox">
<!-- 头像内容 -->
<view class="headerImgBox">
<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
v-if="userInfo && userInfo.MEMBERSHIP_ID">
<image class="headerImg" :src="WXProfile ||
(userInfo && userInfo.MEMBERSHIP_HEADIMAGEURL
? userInfo.MEMBERSHIP_HEADIMAGEURL
: '')
" />
</button>
</view>
<view class="userInfo">
<view class="userInfoLeft">
<view class="userInfoLeftTop">
<view class="userName">{{ inShop === 2 ? (userInfo.MEMBERSHIP_NAME || user.MEMBERSHIP_NAME || "微信用户")
:
(userInfo.Membership_NickName || userInfo.NICK_NAME || userInfo.MEMBERSHIP_NAME || "未填写名称") }}
</view>
<view class="userLevelBox" style="width: 100%;min-height: 40rpx;">
<view class="userLevel" v-if="user.MEMBERSHIP_LEVEL_TEXT">
<image class="userLevelIcon" src="https://eshangtech.com/caiyunyiImg/levelIcon2.png" />
<view class="userLevelName">{{ user.MEMBERSHIP_LEVEL_TEXT || "" }}</view>
</view>
</view>
<!-- <view class="userSetting" @click="hanldGoConfig">
<image class="userSettingIcon" src="https://eshangtech.com/caiyunyiImg/userSettingIcon.png" />
</view> -->
</view>
<!-- <view class="userInfoLeftBottom">
<view class="userInfoLeftBottomItem">
<view class="bindCarBox" @click="handleGoBindCar">{{ cards ? cards : "未绑定爱车" }}</view>
</view>
<view class="userInfoLeftBottomItem">
<view class="userCollect" @click="handleGoCollect">我的收藏</view>
</view>
</view> -->
</view>
<view class="userInfoRight" @click="handleGoUserCode">
<image class="userCodeImg" src="https://eshangtech.com/caiyunyiImg/userInfoCode.png" />
<view class="userCodeText">会员码</view>
</view>
</view>
</view>
<!-- 优惠券信息 -->
<view class="couponBox">
<view class="CouponContent">
<view class="CouponItem" @click="handleGoCoupon"
:style="{ width: userInfo && userInfo.INDUSTRY_MEMBERSHIP_ID ? 'calc((100% - 2px) / 3)' : 'calc((100% - 2px) / 2)' }">
<view class="CouponItemValue">{{ userInfo.COUPON_COUNT || 0 }}</view>
<view class="CouponItemLabel">优惠券</view>
</view>
<view class="line"></view>
<view class="CouponItem" @click="handleGoPoint"
:style="{ width: userInfo && userInfo.INDUSTRY_MEMBERSHIP_ID ? 'calc((100% - 2px) / 3)' : 'calc((100% - 2px) / 2)' }">
<view class="CouponItemValue">{{
$utils.handleFormatNumber(userInfo.MEMBERSHIP_POINT || 0)
}}</view>
<view class="CouponItemLabel">积分</view>
</view>
<view class="line" v-if="userInfo && userInfo.INDUSTRY_MEMBERSHIP_ID"></view>
<view class="CouponItem" @click="hanldGoBalance" v-if="userInfo && userInfo.INDUSTRY_MEMBERSHIP_ID"
:style="{ width: userInfo && userInfo.INDUSTRY_MEMBERSHIP_ID ? 'calc((100% - 2px) / 3)' : 'calc((100% - 2px) / 2)' }">
<view class="CouponItemValue">{{
$utils.handleFormatNumber(userInfo.ACCOUNT_BALANCE || 0)
}}</view>
<view class="CouponItemLabel">工会福利</view>
</view>
</view>
</view>
</view>
</view>
<!-- {{ showErrorText || "" }} -->
<view class="pageContent" v-if="showContent">
<!-- 基础按钮 -->
<view class="basicBox">
<view class="userOrderTop">
<view class="userOrderTitle">我的服务</view>
</view>
<view class="basicBoxContent">
<view class="basicItem" @click="handleGoCollect">
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/productCollection.png" />
<view class="basicText">商品收藏</view>
</view>
<view class="basicItem" @click="handleGoNormal({ value: 1 })">
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/MemberBenefitsIcon.png" />
<view class="basicText">会员权益</view>
</view>
<view class="basicItem" @click="handleGoBindCar">
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/bindCarIcon.png" />
<view class="basicText">绑定车辆</view>
</view>
<view class="basicItem" @click="handleGoPointsRedemption">
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/pointsRedemption.png" />
<view class="basicText">积分兑换</view>
</view>
<!-- @click="handleGoNormal({ value: 3 })" -->
<!-- <view class="basicItem" >
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/suggestionFeedbackIcon.png" />
<view class="basicText">建议反馈</view>
</view> -->
<view class="basicItem" @click="hanldGoConfig">
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/configIcon.png" />
<view class="basicText">设置</view>
</view>
</view>
</view>
<!-- 我的订单 -->
<view class="userOrder">
<view class="userOrderTop" @click="handleGoOrder(0, '')">
<view class="userOrderTitle">我的订单</view>
<image class="userOrderMoreIcon" src="https://eshangtech.com/caiyunyiImg/moreIcon.png" />
</view>
<view class="userOrderBottom">
<view class="userOrderBottomItem" @click="handleGoOrder(1, '')">
<img class="userOrderBottomItemImg" src="/static/images/home/obligationIcon.svg" />
<view class="userOrderBottomItemText">未付款</view>
<view class="orderCount" v-if="mallOrderCountList[0] > 0">{{ mallOrderCountList[0] }}</view>
</view>
<view class="userOrderBottomItem" @click="handleGoOrder(2, '')">
<img class="userOrderBottomItemImg" src="/static/images/home/shipmentIcon.svg" />
<view class="userOrderBottomItemText">待发货</view>
<view class="orderCount" v-if="mallOrderCountList[1] > 0">{{ mallOrderCountList[1] }}</view>
</view>
<view class="userOrderBottomItem" @click="handleGoOrder(3, '')">
<img class="userOrderBottomItemImg" src="/static/images/home/receiptOfGoods.svg" />
<view class="userOrderBottomItemText">待收货</view>
<view class="orderCount" v-if="mallOrderCountList[2] > 0">{{ mallOrderCountList[2] }}</view>
</view>
<view class="userOrderBottomItem" @click="handleGoOrder(4, '')">
<img class="userOrderBottomItemImg" src="/static/images/home/evaluatedIcon.svg" />
<view class="userOrderBottomItemText">待评价</view>
</view>
<view class="userOrderBottomItem" @click="handleGo('/pages/order/buyOrder/index?type=6')">
<img class="userOrderBottomItemImg" src="/static/images/home/afterSales.svg" />
<view class="userOrderBottomItemText">退换货</view>
</view>
</view>
</view>
<view class="orderFun" v-if="false">
<view class="boxTitleTop" @click="handleGoOrder(0, '')">
<text class="boxTitle">商城订单</text>
<image class="rightArrow" src="/static/images/home/rightArrow.svg" />
</view>
<view class="orderContent">
<view class="orderLeft">
<view class="orderFunItem" v-for="(item, index) in orderFunList" :key="index"
@click="handleGoOrder(item.value, '')">
<image class="orderFunIcon" :src="item.src" />
<text class="orderFunText">{{ item.label }}</text>
</view>
</view>
<view class="orderRight">
<view class="orderFunItem" @click="handleGo(`/pages/order/buyOrder/index?type=6`)">
<image class="orderFunIcon" src="/static/images/home/afterSales.svg" />
<text class="orderFunText">退换/售后</text>
</view>
</view>
</view>
</view>
<!-- 工会之家订单栏 -->
<view class="orderFun" v-if="false">
<view class="boxTitleTop" @click="handleGoOrder(0, 'UnionMall')">
<text class="boxTitle">工会订单</text>
<image class="rightArrow" src="/static/images/home/rightArrow.svg" />
</view>
<view class="orderContent">
<view class="orderLeft">
<view class="orderFunItem" v-for="(item, index) in orderFunList" :key="index"
@click="handleGoOrder(item.value, 'UnionMall')">
<image class="orderFunIcon" :src="item.src" />
<text class="orderFunText">{{ item.label }}</text>
</view>
</view>
</view>
</view>
<!-- 我的点餐订单栏 -->
<view class="orderFun">
<view class="boxTitleTop" @click="handleGoFoodOrder(0)">
<text class="boxTitle">我的点餐</text>
<image class="rightArrow" src="/static/images/home/rightArrow.svg" />
</view>
<view class="orderContent">
<view class="newOrderLeft" style="width: 100%; padding-right: 0">
<view class="orderFunItem" v-for="(item, index) in foodFunList" :key="index"
@click="handleGoFoodOrder(item.value)">
<image class="orderFunIcon" :src="item.src" />
<text class="orderFunText">{{ item.label }}</text>
<view class="orderCount" v-if="item.orderCount > 0">{{ item.orderCount }}</view>
</view>
</view>
</view>
</view>
<!-- 常用功能 -->
<view class="oftenFunBox" v-if="false">
<view class="ofternFunTitle">常用功能</view>
<view class="funListBox">
<view class="funItemBox" @click="handleGoNormal({ value: 1 })">
<image class="funItemImg" src="/static/images/home/memberBenefits.svg" />
<view class="funItemText">会员权益</view>
</view>
<view class="funItemBox" @click="handleGoNormal({ value: 2 })">
<image class="funItemImg" src="/static/images/home/serviceIcon.svg" />
<view class="funItemText">我的爱车</view>
</view>
<!-- @click="handleGoNormal({ value: 3 })" -->
<view class="funItemBox">
<image class="funItemImg" src="/static/images/home/suggestion.svg" />
<view class="funItemText">建议反馈</view>
</view>
</view>
</view>
<!-- 客服帮助 -->
<view class="customerServiceBox">
<view class="customerServiceTitle">客服帮助</view>
<view class="customerServiceContent">
<view class="customerServiceItem">
<button class="no-border-btn" hover-class="none" hover-start-time="0" hover-stay-time="0"
style="background-color: transparent;border-width: 0;padding: 0;" open-type="contact"
@contact="onContact">
<view class="customerServiceItemTitle">客服帮助</view>
<view class="customerServiceItemContent">伴您行程无忧</view>
</button>
</view>
<view class="customerServiceItem customerServiceItemBg2">
<view class="customerServiceItemTitle">服务热线</view>
<view class="customerServiceItemContent" style="color: #182145;">伴您行程无忧</view>
</view>
</view>
</view>
</view>
<tabbar :page="'/pages/user/index'" v-if="showContent" />
</view>
</template>
<script>
import { handleSaveOrderStore } from '../../utils/publicMethods'
import { mapGetters } from "vuex";
import tabbar from "../../components/tabbar.vue";
import shopTabbar from "../../components/shopTabbar.vue";
import { useSkeletonControl } from '../../utils/skeletonManager.js'
export default {
components: { tabbar, shopTabbar },
data() {
return {
showContent: false, // 是否显示内容(控制骨架屏切换)
isFirstLoad: true, // 是否是首次进入页面
isFirstShow: true, // 是否是首次onShow
skeletonControl: null, // 骨架屏控制器
isRefreshing: false, // 是否正在刷新
pageType: "", // spring 春节模式
menu: {},
orderFunList: [
{
label: "待付款",
value: 1,
src: "/static/images/home/obligationIcon.svg",
},
{
label: "待发货",
value: 2,
src: "/static/images/home/shipmentIcon.svg",
},
{
label: "待收货",
value: 3,
src: "/static/images/home/receiptOfGoods.svg",
},
{
label: "待评价",
value: 4,
src: "/static/images/home/evaluatedIcon.svg",
},
], // 我的订单前面四个
commonFunList: [
{
label: "会员权益",
value: 1,
src: "/static/images/home/memberBenefits.svg",
springSrc: "/static/images/home/springMemberBenefits.svg",
},
{
label: "我的爱车",
value: 2,
src: "/static/images/home/serviceIcon.svg",
springSrc: "/static/images/home/springService.svg",
},
{
label: "建议反馈",
value: 3,
src: "/static/images/home/suggestion.svg",
springSrc: "/static/images/home/springSuggestion.svg",
},
], // 常用功能
foodFunList: [
{
label: "待付款",
value: 1,
src: "/static/images/home/obligationIcon.svg",
},
{
label: "待接单",
value: 2,
src: "/static/images/home/shipmentIcon.svg",
},
{
label: "制作中",
value: 3,
src: "/static/images/home/receiptOfGoods.svg",
},
{
label: "待评价",
value: 4,
src: "/static/images/home/evaluatedIcon.svg",
},
{}
],
cards: "",
userInfo: {},
safeHeight: 0,
serviceDetail: {}, // 当前服务区的详情
seat: {},
chargingObj: {},
inShop: 0,// 判断是否在商城里面
shopCarListCount: 0, // 购物车商品数量
showErrorText: "",
mallOrderCountList: [0, 0, 0],// 商城订单的数量
foodOrderCountList: [0, 0, 0],// 点餐订单的数量
};
},
async onLoad(options) {
// 初始化骨架屏控制
this.skeletonControl = useSkeletonControl('/pages/user/index', options.pageType)
this.showContent = this.skeletonControl.showContent
this.isFirstLoad = this.skeletonControl.showSkeleton
if (!this.user.MEMBERSHIP_ID) {
uni.navigateTo({ url: `/pages/register/index?backTo=index` });
}
this.menu = uni.getMenuButtonBoundingClientRect();
let height = uni.getStorageSync("safeHeight");
this.safeHeight = Number(height);
// 拿到新的缓存数据
let userData = uni.getStorageSync('userData')
if (userData) {
this.userInfo = userData
this.cards = userData.LicencePlate.List && userData.LicencePlate.List.length > 0 ? userData.LicencePlate.List[0].License_Plate : ""
}
// 拿用户信息
await this.handleGetUserDetail();
// let shopOrderStatus = uni.getStorageSync('shopOrderStatus')
// if (!shopOrderStatus) {
// 拿到订单信息
await this.handleGetOrderDetail()
// }
// 请求一下云南那边的积分信息
// this.handleGetYNUserInfo()
// 拿到订单信息
// await this.handleGetOrderDetail()
// 拿车牌号
// await this.handleGetCarCode();
// 如果是首次访问,延迟显示内容并标记已访问
if (this.skeletonControl && this.skeletonControl.showSkeleton) {
setTimeout(async () => {
if (this.skeletonControl) {
await this.skeletonControl.showContentAfterLoading(0)
this.showContent = true;
this.isFirstLoad = false;
}
}, 500);
} else {
// 非首次访问直接显示内容
this.showContent = true;
this.isFirstLoad = false;
}
this.$utils.addUserBehaviorNew({
behaviorRecordDesc: "进入了我的页面"
});
},
async onShow() {
// onShow 中不控制骨架屏,骨架屏只在 onLoad 中控制一次
// 如果不是首次加载,直接显示内容
if (!this.isFirstLoad) {
this.showContent = true;
}
// 跳过第一次onShow因为onLoad已经加载过数据了
if (this.isFirstShow) {
this.isFirstShow = false;
let inShop = uni.getStorageSync("inShop");
this.inShop = inShop
// 拿到订单的缓存数据
let shopOrderStatus = uni.getStorageSync('shopOrderStatus')
let foodOrderStatus = uni.getStorageSync('foodOrderStatus')
this.mallOrderCountList = shopOrderStatus ? shopOrderStatus : []
if (foodOrderStatus && foodOrderStatus.length > 0) {
let foodTab = JSON.parse(JSON.stringify(this.foodFunList))
foodTab.forEach((item) => {
if (item.value === 1) {
item.orderCount = foodOrderStatus[0] || 0
} else if (item.value === 2) {
item.orderCount = foodOrderStatus[1] || 0
} else if (item.value === 3) {
item.orderCount = foodOrderStatus[2] || 0
}
})
this.foodFunList = foodTab
}
if (this.inShop === 2 || this.inShop === 1) {
// 判断当前的购物车里面是否有东西
let shopCarList = [];
if (this.inShop === 2) {
shopCarList = this.$store.state.unionMyShopCar;
} else {
shopCarList = this.$store.state.myShopCar;
}
let count = 0;
if (shopCarList && shopCarList.length > 0) {
shopCarList.forEach((item) => {
count += item.count;
});
}
this.shopCarListCount = count;
}
// 拿到新的缓存数据
let userData = uni.getStorageSync('userData')
if (userData) {
this.userInfo = userData
this.cards = userData.LicencePlate.List && userData.LicencePlate.List.length > 0 ? userData.LicencePlate.List[0].License_Plate : ""
this.$forceUpdate()
}
return;
}
let inShop = uni.getStorageSync("inShop");
this.inShop = inShop
// 拿到订单的缓存数据
let shopOrderStatus = uni.getStorageSync('shopOrderStatus')
let foodOrderStatus = uni.getStorageSync('foodOrderStatus')
console.log('foodOrderStatusfoodOrderStatusfoodOrderStatus', foodOrderStatus);
this.mallOrderCountList = shopOrderStatus ? shopOrderStatus : []
if (foodOrderStatus && foodOrderStatus.length > 0) {
let foodTab = JSON.parse(JSON.stringify(this.foodFunList))
foodTab.forEach((item) => {
if (item.value === 1) {
item.orderCount = foodOrderStatus[0] || 0
} else if (item.value === 2) {
item.orderCount = foodOrderStatus[1] || 0
} else if (item.value === 3) {
item.orderCount = foodOrderStatus[2] || 0
}
})
this.foodFunList = foodTab
}
// if (!this.user.MEMBERSHIP_ID) {
// uni.navigateTo({ url: "/pages/register/index" });
// }
// let seatInfo = uni.getStorageSync("seatInfo");
// if (seatInfo) {
// this.seat = JSON.parse(seatInfo);
// }
// let currentService = uni.getStorageSync("currentService");
// if (currentService) {
// await this.handleGetServiceDetail(currentService.SERVERPART_ID);
// let obj = this.handleMergeDetail(currentService)
// let newObj = {
// ...currentService,
// sumDetail: obj,
// haveREFUELINGGUN: obj.haveREFUELINGGUN,
// HASCHARGE: obj.HASCHARGE,
// havePARKING: obj.havePARKING,
// haveWC: obj.haveWC,
// HASMOTHER: obj.HASMOTHER,
// HASPILOTLOUNGE: obj.HASPILOTLOUNGE,
// }
// this.serviceDetail = newObj
// this.handleGetChargingStation(this.serviceDetail);
// }
if (this.inShop === 2 || this.inShop === 1) {
// 判断当前的购物车里面是否有东西
let shopCarList = [];
if (this.inShop === 2) {
shopCarList = this.$store.state.unionMyShopCar;
} else {
shopCarList = this.$store.state.myShopCar;
}
let count = 0;
if (shopCarList && shopCarList.length > 0) {
shopCarList.forEach((item) => {
count += item.count;
});
}
this.shopCarListCount = count;
}
// 拿到新的缓存数据
let userData = uni.getStorageSync('userData')
if (userData) {
this.userInfo = userData
this.cards = userData.LicencePlate.List && userData.LicencePlate.List.length > 0 ? userData.LicencePlate.List[0].License_Plate : ""
this.$forceUpdate()
}
await this.handleGetOrderDetail()
// 拿用户信息
await this.handleGetUserDetail();
this.$forceUpdate()
},
computed: {
...mapGetters({
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 "";
}
},
},
onUnload() {
handleSaveOrderStore()
},
// 下拉刷新
onPullDownRefresh() {
this.isRefreshing = true
this.handleRefresh()
},
methods: {
handleGoPointsRedemption() {
uni.navigateTo({ url: "/pages/pointsRedemption/index" });
},
// 请求云南那边的积分信息
async handleGetYNUserInfo() {
let params = {
// mobile: this.user.MEMBERSHIP_MOBILEPHONE,
mobile: "13508703001",
// out_user_id: this.user.MEMBERSHIP_ID,
outUserId: "46999999",
};
let time = Math.ceil(new Date().getTime() / 1000);
let req = {
app_id: "530000801",
biz_content: JSON.stringify(params),
charset: "UTF-8",
pid: "530000801",
service: "trawe.eats.etc",
utc_timestamp: 1764153268844,
version: "1.0",
sign_type: "RSA2",
}
let signText = `app_id=${req.app_id}&biz_content=${req.biz_content}&charset=UTF-8&pid=${req.app_id}&service=trawe.eats.etc&utc_timestamp=${req.utc_timestamp}&version=1.0`;
// 签名
const sign = await new Promise((resolve, reject) => {
uni.request({
url: "https://java.es.eshangtech.com:443/api/sign",
// url: "http://111.229.213.193:18071/api/sign",
method: "POST",
data: signText,
header: {
"content-type": "text/plain",
},
success(res) {
console.log('res2112', res);
resolve(res.data.Result_Data);
},
});
});
console.log('signsignsignsignsignsignsignsign', sign);
// console.log('signTextsignTextsignTextsignText', signText);
req.sign = sign.sign
const tweetsData = await new Promise((resolve, reject) => {
uni.request({
url: `https://tuozhan.yns-etc.com/gzh/api/v1/gzh/point/balance`,
method: "POST",
data: req,
header: {
"content-type": "application/x-www-form-urlencoded",
},
success(res) {
console.log('res', res);
if (res.data.response.data) {
resolve(res.data.response.data);
} else {
resolve([])
}
},
reject(res) {
console.log('res', res);
}
});
});
console.log('tweetsDatatweetsDatatweetsData', tweetsData);
},
onContact(e) {
// e.detail.path / query 等可用于透传会话来源
},
// 下拉刷新处理
async handleRefresh() {
try {
// 添加一个小延迟,让用户看到刷新动画
await new Promise(resolve => setTimeout(resolve, 300))
// 刷新用户信息
await this.handleGetUserDetail()
// 刷新订单信息
await this.handleGetOrderDetail()
// 更新缓存数据
let userData = uni.getStorageSync('userData')
if (userData) {
this.userInfo = userData
this.cards = userData.LicencePlate.List && userData.LicencePlate.List.length > 0 ? userData.LicencePlate.List[0].License_Plate : ""
}
this.$forceUpdate()
} catch (error) {
console.error('刷新失败:', error)
uni.showToast({
title: '刷新失败',
icon: 'none',
duration: 2000
})
} finally {
// 停止下拉刷新
this.isRefreshing = false
uni.stopPullDownRefresh()
}
},
// 跳转客服帮助
handleGoCustomerService() {
uni.navigateTo({ url: "/pages/useConfig/customerService" });
},
// 跳转到余额
hanldGoBalance() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: `/pages/useConfig/balanceManage`,
});
},
handleGoDetail() {
uni.navigateTo({
url: `/pages/serviceDetail/index?pageType=userInfo`,
});
},
// 打开地图的跳转
handleGoMap() {
uni.openLocation({
latitude: this.serviceDetail.SERVERPART_Y * 1,
longitude: this.serviceDetail.SERVERPART_X * 1,
scale: 16, // 缩放比例
name: this.serviceDetail.SERVERPART_NAME,
// address: "", // 这个可能会影响地图的定位,所以可以选择不填
success(data) {
},
fail(err) {
},
});
},
// 拿到服务区详情
async handleGetServiceDetail(id) {
if (!id) {
return;
}
let req = {
ServerpartId: id,
latitude: this.seat.latitude,
longitude: this.seat.longitude,
};
const data = await this.$api.$get(
"/CommercialApi/BaseInfo/GetServerpartInfo",
req
);
let obj = data.Result_Data;
this.serviceDetail = obj;
this.serviceDetail.sumDetail = this.handleMergeDetail(obj);
}, // 合并服务区数据
handleMergeDetail(obj) {
let sumObj = {
LIVESTOCKPACKING: 0, // 充电桩数
STATEGRIDCHARGE: 0, // 国网充电桩数量
LIAUTOCHARGE: 0, // 理想5C充电桩数量
GACENERGYCHARGE: 0, // 广汽能源充电桩数量
OTHERCHARGE: 0, // 其他充电桩数量
REFUELINGGUN92: 0, // 加油枪92号
REFUELINGGUN95: 0, // 加油枪95号
REFUELINGGUN0: 0, // 加油枪0号
HASPANTRY: 0, // 男厕数量
HASWIFI: 0, // 女厕数量
TOILETCOUNT: 0, // 潮汐厕位
HASSHOWERROOM: 0, // 淋浴房
HASWATERROOM: 0, // 开水器
MICROWAVEOVEN: 0, // 微波炉
WASHERCOUNT: 0, // 洗衣机数量
SLEEPINGPODS: 0, // 睡眠仓
HASPILOTLOUNGE: false, // 有无司机之家
HASCHILD: false, // 有无车辆维修
VEHICLEWATERFILLING: false, // 有无车辆加水
SMALLPARKING: 0, // 轿车车位
PACKING: 0, // 客车车位
TRUCKPACKING: 0, // 货车车位
DANPACKING: 0, // 危化品车位
DININGBXCOUNT: 0, // 商铺数量
DININGROOMCOUNT: 0, // 餐饮店
HASBACKGROUNDRADIO: 0, // 便利店
POINTCONTROLCOUNT: 0, // 客房
BUSINESSTYPE: "",
TOILET_PAPER: 0, // 厕纸巾
MABROOMWATER_DISPENSER: 0, // 母婴室饮水机
NURSING_TABLE: 0, // 哺乳桌
BABY_COT: 0, // 婴儿床
CHANGING_TABLE: 0, // 尿布台
DROOMWATER_DISPENSER: 0, // 司机之家饮水机
haveREFUELINGGUN: false, // 判断有无加油
havePARKING: false, // 判断有无停车场
haveWC: false, // 判断有无卫生间
HASMOTHER: false
};
if (obj.RegionInfo && obj.RegionInfo.length > 0) {
obj.RegionInfo.forEach((item) => {
sumObj.LIVESTOCKPACKING += item.LIVESTOCKPACKING;
sumObj.STATEGRIDCHARGE += item.STATEGRIDCHARGE;
sumObj.LIAUTOCHARGE += item.LIAUTOCHARGE;
sumObj.GACENERGYCHARGE += item.GACENERGYCHARGE;
sumObj.OTHERCHARGE += item.OTHERCHARGE;
sumObj.REFUELINGGUN92 += item.REFUELINGGUN92;
sumObj.REFUELINGGUN95 += item.REFUELINGGUN95;
sumObj.REFUELINGGUN0 += item.REFUELINGGUN0;
sumObj.HASPANTRY += item.HASPANTRY;
sumObj.HASWIFI += item.HASWIFI;
sumObj.TOILETCOUNT += item.TOILETCOUNT;
sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
sumObj.HASWATERROOM += item.HASWATERROOM;
sumObj.MICROWAVEOVEN += item.MICROWAVEOVEN;
sumObj.WASHERCOUNT += item.WASHERCOUNT;
sumObj.SLEEPINGPODS += item.SLEEPINGPODS;
sumObj.SMALLPARKING += item.SMALLPARKING;
sumObj.PACKING += item.PACKING;
sumObj.TRUCKPACKING += item.TRUCKPACKING;
sumObj.DANPACKING += item.DANPACKING;
sumObj.BUSINESSTYPE = item.BUSINESSTYPE;
sumObj.TOILET_PAPER += item.TOILET_PAPER;
sumObj.MABROOMWATER_DISPENSER += item.MABROOMWATER_DISPENSER;
sumObj.NURSING_TABLE += item.NURSING_TABLE;
sumObj.BABY_COT += item.BABY_COT;
sumObj.CHANGING_TABLE += item.CHANGING_TABLE;
sumObj.DROOMWATER_DISPENSER += item.DROOMWATER_DISPENSER;
if (item.HASMOTHER) {
sumObj.HASMOTHER = true
}
if (sumObj.LIVESTOCKPACKING > 0 || sumObj.STATEGRIDCHARGE > 0 || sumObj.LIAUTOCHARGE > 0 || sumObj.GACENERGYCHARGE > 0 || sumObj.OTHERCHARGE > 0) {
sumObj.HASCHARGE = true;
}
if (item.HASPILOTLOUNGE) {
sumObj.HASPILOTLOUNGE = true;
}
if (item.VEHICLEWATERFILLING) {
sumObj.VEHICLEWATERFILLING = true;
}
if (item.HASCHILD) {
sumObj.HASCHILD = true;
}
sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;
if (
sumObj.REFUELINGGUN92 > 0 ||
sumObj.REFUELINGGUN95 > 0 ||
sumObj.REFUELINGGUN0 > 0
) {
sumObj.haveREFUELINGGUN = true;
}
if (
sumObj.SMALLPARKING > 0 ||
sumObj.PACKING > 0 ||
sumObj.TRUCKPACKING > 0 ||
sumObj.DANPACKING > 0
) {
sumObj.havePARKING = true;
}
if (
sumObj.HASPANTRY > 0 ||
sumObj.HASWIFI > 0 ||
sumObj.TOILETCOUNT > 0
) {
sumObj.haveWC = true;
}
});
}
return sumObj;
},
// 查询现在的充电桩
async handleGetChargingStation(obj) {
let _this = this;
uni.request({
url: "https://xny.yciccloud.com/interconnect/api/interconnection/open/getConnectList", //仅为示例,并非真实接口地址。
method: "POST",
success: (res) => {
let list = res.data;
let result = [];
if (list && list.length > 0) {
list.forEach((item) => {
if (
(item.stationName.indexOf("读书铺") !== -1 &&
obj.SERVERPART_NAME.indexOf("读书铺") !== -1) ||
(item.stationName.indexOf("鸡街") !== -1 &&
obj.SERVERPART_NAME.indexOf("鸡街") !== -1) ||
(item.stationName.indexOf("星云") !== -1 &&
obj.SERVERPART_NAME.indexOf("星云") !== -1) ||
(item.stationName.indexOf("富民") !== -1 &&
obj.SERVERPART_NAME.indexOf("富民") !== -1)
) {
result.push(item);
}
});
}
let sum = 0;
let have = 0;
let use = 0;
if (result && result.length > 0) {
result.forEach((item) => {
if (item.status === "50") {
sum += 1;
}
});
}
if (sum > 0) {
use = sum;
if (obj.sumDetail.STATEGRIDCHARGE > 0) {
if (obj.sumDetail.STATEGRIDCHARGE < result.length) {
have = result.length;
} else {
have = obj.sumDetail.STATEGRIDCHARGE;
}
} else {
have = result.length;
}
} else {
have = obj.sumDetail.LIVESTOCKPACKING;
let rank = Number(uni.getStorageSync("rankNumber"));
if (rank > 0) {
} else {
rank = Math.random() * (0.7 - 0.5) + 0.5;
uni.setStorageSync("rankNumber", rank);
}
use = Math.floor(have * rank);
}
_this.chargingObj = {
have: have,
use: use,
};
_this.$forceUpdate();
},
});
},
// 跳转会员设置
hanldGoConfig() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: '/pages/useConfig/userConfig'
})
},
// 跳转到积分页面
handleGoPoint() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: '/pages/useConfig/pointsDetail'
})
},
// 跳转券包
handleGoCoupon() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: '/pages/homeFn/myCoupon/index'
})
},
// 用户上传头像
async onChooseAvatar(e) {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
let _this = this;
_this.showErrorText = 1
uni.uploadFile({
url: "https://eshangtech.com:18900/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;
if (url) {
let req = {
membershipId: this.user.MEMBERSHIP_ID,
headImgUrl: url,
};
_this.WXProfile = url;
_this.showErrorText = _this.WXProfile
const userInfoData = await _this.$api.$get(
"/WeChat/UpdateMemberInfo",
req
);
if (userInfoData.Result_Code === 100) {
_this.handleGetUserDetail();
}
}
},
fail: (error) => {
_this.showErrorText = JSON.stringify(error)
}
});
},
// 拿到用户详情
async handleGetUserDetail() {
let _this = this;
_this.$api
.getCoop({
action_type: "GetMembershipInfo",
WechatUserId: _this.user.WechatUserId,
noLoading: true,
})
.then(function (data) {
if (data.ResultCode === "100") {
let _data = data;
_this.userInfo = _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.user.TEST_MEMBER = _data.Data.TEST_MEMBER || "";
_this.$store.commit("setUser", _this.user);
_this.$forceUpdate()
} else {
// _this.setUser({});
_this.$store.commit("setUser", user);
}
});
},
// 跳转去售后 即已完成的列表
handleGo(url) {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: url,
});
},
// 跳转去点餐订单页面
handleGoFoodOrder(value) {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: `/pages/order/foodOrder/index?type=${value}`,
});
},
// 绑定车辆
handleGoBindCar() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: `/pages/bindCar/index`,
});
},
// 拿到车牌号
async handleGetCarCode() {
let _this = this;
uni.showLoading({ title: "加载中" });
const res = await this.$api.getCoop({ action_type: "GetVehicleList" })
let list = res.Result_Data.List;
if (list && list.length > 0) {
_this.cards = list[0].License_Plate;
}
uni.hideLoading();
},
// 常用功能的跳转
handleGoNormal(obj) {
if (obj.value === 1) {
// 会员权益
uni.navigateTo({
url: `/pages/noDataPage/index`,
});
// this.handleShowPayCode();
} else if (obj.value === 2) {
// 我的爱车
this.handleGoBindCar();
} else if (obj.value === 3) {
// 建议反馈
// uni.navigateToMiniProgram({
// shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
// });
// uni.navigateTo({
// url: `/pages/complaints/index`,
// });
}
},
// // 调起付款码
async handleShowPayCode() {
let timeStamp = Math.ceil(new Date().getTime() / 1000);
let nonceStr = Math.random().toString(36).substring(2, 8);
let req = {
appId: "wxee018fb96955552a",
timeStamp: timeStamp,
nonceStr: nonceStr,
package: "1672298991",
signType: "MD5",
};
let reqSign = {
parameters: `appId=wxee018fb96955552a&nonceStr=${nonceStr}&package=mch_id=1672298991&signType=MD5&timeStamp=${timeStamp}`,
// "wxee018fb96955552a\n" +
// timeStamp +
// "\n" +
// nonceStr +
// "\npackage=" +
// req.package +
// "\n",
};
const data = await this.$api.$get("/WeChat/GenerateSign", reqSign);
wx.openOfflinePayView({
appId: "wxee018fb96955552a",
timeStamp: timeStamp,
nonceStr: nonceStr,
package: "1672298991",
signType: "MD5",
paySign: data.Result_Data,
success(res) {
},
});
},
// 最底下的两个点击事件
handleLastFun(value) {
if (value === 1) {
// 客服帮助
// uni.navigateTo({
// url: `/pages/noDataPage/index`,
// });
wx.openCustomerServiceChat({
extInfo: {
url: "", // 客服链接
}, // 客服信息
corpId: "", //企业ID
success(res) {
},
});
} else if (value === 2) {
// 服务热线
uni.navigateTo({
url: `/pages/noDataPage/index`,
});
}
},
// 跳转订单
handleGoOrder(value, pageType) {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
if (value === 4) {
uni.navigateTo({
url: `/pages/evaluateList/index?pageType=${pageType}`,
});
} else {
uni.navigateTo({
url: `/pages/order/buyOrder/index?type=${value || ""
}&pageType=${pageType}`,
});
}
},
// 跳转到选择服务区
goSelectServer() {
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
},
// 跳转到会员码页面
handleGoUserCode() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url: "/pages/payfor/index",
});
},
// 跳转去收藏页面
handleGoCollect() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.navigateTo({ url: "/pages/register/index" });
}
},
});
return;
}
uni.navigateTo({
url:
"/pages/useConfig/FavoriteStore"
});
},
async handleGetOrderDetail() {
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
return;
}
// 商城订单数据
const req = {
action_type: "GetMallOrderList",
salebillType: '3000,3001,3002,3999',
salebillState: "",
PageIndex: 1,
pageSize: 99999,
ownerUnitId: 911,
requestType: "application/x-www-form-urlencoded",
noLoading: true
};
const data = await this.$api.postCoop(req);
if (data.ResultCode === "100") {
let list = data.Data.List
// 待付款
let obligation = []
// 待发货
let pendingShipment = []
// 待收货
let pendingReceiptOfGoods = []
if (list && list.length > 0) {
list.forEach((item) => {
if (item.SALEBILL_STATE === 1005) {
obligation.push(item)
} else if (item.SALEBILL_STATE === 1010) {
pendingShipment.push(item)
} else if (item.SALEBILL_STATE === 2010) {
pendingReceiptOfGoods.push(item)
}
})
}
let mallOrderCountList = [obligation && obligation.length > 0 ? obligation.length : 0,
pendingShipment && pendingShipment.length > 0 ? pendingShipment.length : 0,
pendingReceiptOfGoods && pendingReceiptOfGoods.length > 0 ? pendingReceiptOfGoods.length : 0,]
this.mallOrderCountList = mallOrderCountList
} else {
this.mallOrderCountList = [0, 0, 0]
}
this.$forceUpdate()
uni.setStorageSync("shopOrderStatus", this.mallOrderCountList)
const reqFood = {
action_type: "GetOrderList",
salebillType: 6000,
salebillState: "",
PageIndex: 1,
pageSize: 99999,
ownerUnitId: 911,
requestType: "application/x-www-form-urlencoded",
noLoading: true
};
const dataFood = await this.$api.postCoop(reqFood);
if (dataFood.ResultCode === "100") {
let list = dataFood.Data.List
// 待付款
let obligation = []
// 待接单
let pendingShipment = []
// 制作中
let pendingReceiptOfGoods = []
if (list && list.length > 0) {
list.forEach((item) => {
if (item.SALEBILL_STATE === 1005) {
obligation.push(item)
} else if (item.SALEBILL_STATE === 1010) {
pendingShipment.push(item)
} else if (item.SALEBILL_STATE === 2000) {
pendingReceiptOfGoods.push(item)
}
})
}
let foodOrderCountList = [obligation && obligation.length > 0 ? obligation.length : 0,
pendingShipment && pendingShipment.length > 0 ? pendingShipment.length : 0,
pendingReceiptOfGoods && pendingReceiptOfGoods.length > 0 ? pendingReceiptOfGoods.length : 0,]
// this.foodOrderCountList = foodOrderCountList
let foodTab = JSON.parse(JSON.stringify(this.foodFunList))
foodTab.forEach((item) => {
if (item.value === 1) {
item.orderCount = obligation && obligation.length > 0 ? obligation.length : 0
} else if (item.value === 2) {
item.orderCount = pendingShipment && pendingShipment.length > 0 ? pendingShipment.length : 0
} else if (item.value === 3) {
item.orderCount = pendingReceiptOfGoods && pendingReceiptOfGoods.length > 0 ? pendingReceiptOfGoods.length : 0
}
})
this.foodFunList = foodTab
uni.setStorageSync("foodOrderStatus", foodOrderCountList)
} else {
this.foodFunList = [
{
label: "待付款",
value: 1,
src: "/static/images/home/obligationIcon.svg",
},
{
label: "待接单",
value: 2,
src: "/static/images/home/shipmentIcon.svg",
},
{
label: "制作中",
value: 3,
src: "/static/images/home/receiptOfGoods.svg",
},
{
label: "待评价",
value: 4,
src: "/static/images/home/evaluatedIcon.svg",
},
]
}
this.$forceUpdate()
}
},
};
</script>
<style lang="less" scoped>
/* 骨架屏动画 */
@keyframes shimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.skeleton {
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
background-size: 400px 100%;
animation: shimmer 1.2s infinite;
border-radius: 8rpx;
}
/* 用户页面骨架屏样式 */
.user-skeleton {
padding: 0 32rpx;
background: #f7f8fa;
transition: all 0.3s ease;
}
.skeleton-user-info {
background: #ffffff;
border-radius: 20rpx;
padding: 40rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
.skeleton-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 32rpx;
}
.skeleton-user-details {
flex: 1;
.skeleton-username {
width: 200rpx;
height: 32rpx;
margin-bottom: 16rpx;
}
.skeleton-level {
width: 120rpx;
height: 24rpx;
}
}
.skeleton-qr-code {
width: 80rpx;
height: 80rpx;
border-radius: 8rpx;
}
}
.skeleton-coupon-box {
background: #ffffff;
border-radius: 20rpx;
padding: 40rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-around;
.skeleton-coupon-item {
text-align: center;
.skeleton-number {
width: 80rpx;
height: 40rpx;
margin: 0 auto 16rpx;
}
.skeleton-label {
width: 60rpx;
height: 24rpx;
margin: 0 auto;
}
}
}
.skeleton-service-box {
background: #ffffff;
border-radius: 20rpx;
padding: 40rpx;
margin-bottom: 20rpx;
.skeleton-title {
width: 120rpx;
height: 32rpx;
margin-bottom: 32rpx;
}
.skeleton-service-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.skeleton-service-item {
width: calc(20% - 16rpx);
text-align: center;
margin-bottom: 32rpx;
.skeleton-service-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin: 0 auto 16rpx;
}
.skeleton-service-text {
width: 60rpx;
height: 24rpx;
margin: 0 auto;
}
}
}
}
.skeleton-order-box {
background: #ffffff;
border-radius: 20rpx;
padding: 40rpx;
margin-bottom: 20rpx;
.skeleton-order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
.skeleton-title {
width: 120rpx;
height: 32rpx;
}
.skeleton-more {
width: 40rpx;
height: 24rpx;
}
}
.skeleton-order-grid {
display: flex;
justify-content: space-between;
.skeleton-order-item {
text-align: center;
.skeleton-order-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin: 0 auto 16rpx;
}
.skeleton-order-text {
width: 60rpx;
height: 24rpx;
margin: 0 auto;
}
}
}
}
.main {
width: 100vw;
height: 100vh;
// background-color: #F5F5F5;
background-image: url('https://eshangtech.com/minTestImg/pageBg.png');
transition: all 0.3s ease;
&.refreshing {
.pageTop {
opacity: 0.7;
transform: translateY(10rpx);
}
.pageContent {
opacity: 0.7;
transform: translateY(10rpx);
}
.user-skeleton {
opacity: 0.7;
transform: translateY(10rpx);
}
}
.fixedHeader {
width: 100vw;
position: fixed;
// background-image: url('https://eshangtech.com/caiyunyiImg/userInfoBg.png');
background-image: url('https://eshangtech.com/minTestImg/pageBg.png');
background-repeat: no-repeat;
background-size: 100% 100vh;
top: 0;
left: 0;
z-index: 999999;
display: flex;
align-items: flex-end;
.YDIcon {
width: 176rpx;
height: 48rpx;
margin-left: 32rpx;
margin-bottom: 16px;
}
}
.pageTop {
width: 100vw;
// height: 456rpx;
// background-image: url('https://eshangtech.com/caiyunyiImg/userInfoBg.png');
background-image: url('https://eshangtech.com/minTestImg/pageBg.png');
background-repeat: no-repeat;
background-size: 100% 100vh;
box-sizing: border-box;
transition: all 0.3s ease;
.userTopInfo {
width: calc(100vw - 64rpx);
margin-left: 32rpx;
background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
border-radius: 16rpx;
.userInfoBox {
width: 100%;
// height: 136rpx;
box-sizing: border-box;
padding: 40rpx 42rpx;
display: flex;
align-items: center;
.headerImgBox {
width: 136rpx;
height: 136rpx;
.avatarBtn {
width: 136rpx;
height: 136rpx;
border-radius: 50%;
border: 1px solid #fff;
padding: 0 !important;
.headerImg {
width: 100%;
height: 100%;
}
}
}
.userInfo {
width: calc(100% - 170rpx);
height: 100%;
margin-left: 34rpx;
display: flex;
align-items: center;
.userInfoLeft {
// width: calc(100% - 82rpx);
width: 100%;
box-sizing: border-box;
// padding: 16rpx 0 0 0;
.userInfoLeftTop {
// display: flex;
// align-items: center;
.userName {
display: block;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.userLevel {
display: inline-flex;
align-items: center;
margin-top: 24rpx;
box-sizing: border-box;
padding: 0 14rpx;
border-radius: 32rpx;
// background-color: #2D2D2D;
background-color: #fff;
.userLevelIcon {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
.userLevelName {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
// color: #F4DA7F;
color: #716F69;
line-height: 34rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.userSetting {
width: 48rpx;
height: 48rpx;
margin-left: 24rpx;
.userSettingIcon {
width: 100%;
height: 100%;
}
}
}
.userInfoLeftBottom {
width: 100%;
margin-top: 16rpx;
// display: flex;
// align-items: center;
.userInfoLeftBottomItem {
.bindCarBox {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
line-height: 34rpx;
text-align: right;
font-style: normal;
padding: 4rpx 22rpx 2rpx 22rpx;
border-radius: 32rpx;
// color: #2D2D2D;
// background-color: #D8D8D8;
color: #716F69;
background-color: #fff;
display: inline-block;
}
.userCollect {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
line-height: 34rpx;
text-align: right;
font-style: normal;
padding: 4rpx 22rpx 2rpx 22rpx;
border-radius: 32rpx;
// margin-left: 18rpx;
// color: #2D2D2D;
// background-color: #D8D8D8;
color: #716F69;
background-color: #fff;
display: inline-block;
}
}
}
}
.userInfoRight {
width: 82rpx;
height: 100%;
box-sizing: border-box;
// padding-top: 18rpx;
.userCodeImg {
width: 82rpx;
height: 76rpx;
margin-bottom: 4rpx;
}
.userCodeText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
// color: #F2CC93;
color: #fff;
line-height: 34rpx;
text-align: center;
font-style: normal;
}
}
}
}
.couponBox {
width: 100%;
height: 132rpx;
// margin-top: 36rpx;
box-sizing: border-box;
// padding: 0 30rpx;
.CouponContent {
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
// border-radius: 8rpx;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
box-sizing: border-box;
padding: 20rpx 0;
display: flex;
align-items: center;
.CouponItem {
width: calc((100% - 2px) / 3);
// width: calc((100% - 2px) / 2);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.CouponItemValue {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 30rpx;
color: #101010;
line-height: 44rpx;
text-align: left;
font-style: normal;
margin-bottom: 2rpx;
}
.CouponItemLabel {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #333330;
line-height: 44rpx;
text-align: center;
font-style: normal;
}
}
.line {
width: 2rpx;
height: 48rpx;
background-color: #B9B6B6;
border-radius: 1rpx;
}
}
}
}
}
.pageContent {
width: 100%;
box-sizing: border-box;
padding: 0 32rpx 200rpx;
transition: all 0.3s ease;
.basicBox {
width: 100%;
background: #FFFFFF;
border-radius: 14rpx;
margin-top: 24rpx;
box-sizing: border-box;
padding: 22rpx 34rpx;
.userOrderTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.userOrderTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-align: right;
font-style: normal;
}
.userOrderMoreIcon {
width: 24rpx;
height: 24rpx;
}
}
.basicBoxContent {
width: 100%;
display: flex;
align-items: center;
margin-top: 42rpx;
.basicItem {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.basicItemImg {
width: 48rpx;
height: 48rpx;
margin-bottom: 16rpx;
}
.basicText {
font-family: 'PingFangSC';
font-weight: 400;
font-size: 24rpx;
color: #000;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
.userOrder {
width: 100%;
background: #FFFFFF;
border-radius: 14rpx;
margin-top: 24rpx;
box-sizing: border-box;
padding: 22rpx 34rpx;
.userOrderTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.userOrderTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-align: right;
font-style: normal;
}
.userOrderMoreIcon {
width: 24rpx;
height: 24rpx;
}
}
.userOrderBottom {
width: 100%;
display: flex;
margin-top: 42rpx;
.userOrderBottomItem {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.userOrderBottomItemImg {
width: 48rpx;
height: 48rpx;
margin-bottom: 16rpx;
}
.userOrderBottomItemText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #000;
line-height: 36rpx;
text-align: right;
font-style: normal;
}
.orderCount {
position: absolute;
min-width: 28rpx;
min-height: 28rpx;
text-align: center;
top: -10rpx;
right: 10rpx;
color: #fff;
background-color: red;
border-radius: 50%;
font-size: 20rpx;
}
}
}
}
.oftenFunBox {
width: 100%;
margin-top: 24rpx;
background: #FFFFFF;
border-radius: 14rpx;
box-sizing: border-box;
padding: 22rpx 32rpx;
.ofternFunTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.funListBox {
width: 100%;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.funItemBox {
width: calc((100% - 48rpx) / 3);
height: 136rpx;
box-sizing: border-box;
padding: 14rpx 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #F1F5FA;
border-radius: 9rpx;
.funItemImg {
width: 64rpx;
height: 64rpx;
margin-bottom: 8rpx;
}
.funItemText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #222222;
line-height: 40rpx;
text-align: center;
font-style: normal;
}
}
}
}
.customerServiceBox {
width: 100%;
margin-top: 24rpx;
background: #FFFFFF;
border-radius: 14rpx;
box-sizing: border-box;
padding: 22rpx 32rpx;
.customerServiceTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.customerServiceContent {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
.customerServiceItem {
width: calc((100% - 20rpx) / 2);
height: 130rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('https://eshangtech.com/caiyunyiImg/customerServiceItem1.png');
box-sizing: border-box;
padding: 20rpx;
/* 覆盖系统生成的伪元素 */
.no-border-btn::after,
.no-border-btn::before {
content: '' !important;
border: 0 !important;
box-shadow: none !important;
display: none !important;
height: 0 !important;
width: 0 !important;
-webkit-transform: scale(0) !important;
transform: scale(0) !important;
}
.customerServiceItemTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.customerServiceItemContent {
font-family: STYuanti-SC, STYuanti-SC;
font-weight: 400;
font-size: 20rpx;
color: #0754F3;
line-height: 28rpx;
text-align: left;
font-style: normal;
margin-top: 8rpx;
}
}
.customerServiceItemBg2 {
background-image: url('https://eshangtech.com/caiyunyiImg/customerServiceItem2.png');
}
}
}
.serviceDetail {
width: 100%;
margin-top: 32rpx;
box-sizing: border-box;
padding: 24rpx;
background: #ffffff;
border-radius: 12rpx;
.detailTop {
width: 100%;
display: flex;
align-items: flex-start;
position: relative;
.detailImg {
width: 160rpx;
height: 136rpx;
border-radius: 6rpx;
overflow: hidden;
margin-right: 20rpx;
.img {
width: 160rpx;
height: 136rpx;
}
}
.detailRight {
width: calc(100% - 180rpx);
height: 136rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.detailTop {
display: flex;
flex-direction: column;
.title {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 32rpx;
color: #130f05;
line-height: 44rpx;
text-align: left;
font-style: normal;
display: inline-block;
width: 352rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 4rpx;
}
.status {
.statusText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #009f43;
line-height: 32rpx;
text-align: justify;
font-style: normal;
padding: 2rpx 6rpx;
background: #e9f8ee;
border-radius: 4rpx;
display: inline-block;
}
}
}
.detailBottom {
margin-top: 16rpx;
.distance {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 8rpx;
}
.addressText {
max-width: 342rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
.navigation {
width: 64rpx;
height: 64rpx;
position: absolute;
right: 0;
top: 0;
}
}
.detailBottom {
width: 100%;
margin-top: 24rpx;
display: flex;
align-items: center;
.detailBottomItem {
width: calc(100% / 6);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.detailIcon {
width: 48rpx;
height: 48rpx;
margin-bottom: 4rpx;
}
.detailText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #130f05;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
}
}
.stateGrid {
width: 100%;
margin-top: 24rpx;
background: #f6f6f6;
border-radius: 12rpx;
box-sizing: border-box;
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
.leftGrid {
display: flex;
align-items: center;
.gridImg {
width: 40rpx;
height: 40rpx;
margin-right: 12rpx;
}
.gridText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-right: 12rpx;
}
.fastCharg {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #ffffff;
line-height: 28rpx;
text-align: justify;
font-style: normal;
display: inline;
padding: 2rpx 6rpx;
background: linear-gradient(270deg, #ff500e 0%, #ff7d0a 100%);
border-radius: 4rpx;
}
}
.rightGrid {
display: flex;
align-items: center;
.other {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 4rpx;
}
.have {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 32rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 4rpx;
}
.all {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 32rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
.orderFun {
width: 100%;
margin-top: 24rpx;
background: #fff;
box-sizing: border-box;
padding: 22rpx 34rpx;
border-radius: 14rpx;
.boxTitleTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.boxTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.rightArrow {
width: 24rpx;
height: 24rpx;
}
}
.orderContent {
margin-top: 32rpx;
width: 100%;
display: flex;
align-items: center;
.orderLeft,
.newOrderLeft {
width: calc(100% - 108rpx);
display: flex;
justify-content: space-between;
position: relative;
box-sizing: border-box;
padding-right: 44rpx;
.orderFunItem {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.orderFunIcon {
width: 48rpx;
height: 48rpx;
margin-bottom: 16rpx;
}
.orderFunText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #000;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
.orderCount {
position: absolute;
right: 10rpx;
top: -10rpx;
min-width: 28rpx;
min-height: 28rpx;
text-align: center;
color: #fff;
background-color: red;
border-radius: 50%;
font-size: 20rpx;
}
}
}
.orderLeft::after {
content: "";
width: 2rpx;
height: 76rpx;
background: #eeeeee;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.orderRight {
width: 162rpx;
box-sizing: border-box;
padding-left: 44rpx;
.orderFunItem {
width: 108rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.orderFunIcon {
width: 48rpx;
height: 48rpx;
margin-bottom: 16rpx;
}
.orderFunText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
}
}
}
</style>