999 lines
27 KiB
Vue
999 lines
27 KiB
Vue
<template>
|
|
<view class="main" :style="{
|
|
backgroundImage:
|
|
pageType === 'spring'
|
|
? `url(https://eshangtech.com/minTestImg/springPageBg.png)`
|
|
: `url(https://eshangtech.com/minTestImg/pageBg.png)`,
|
|
}">
|
|
<view class="topBox" :style="{
|
|
height: menu.bottom + 14 + 'px',
|
|
backgroundImage:
|
|
pageType === 'spring'
|
|
? `url(https://eshangtech.com/minTestImg/springPageBg.png)`
|
|
: `url(https://eshangtech.com/minTestImg/pageBg.png)`,
|
|
}">
|
|
<view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
|
|
<view class="topLeft">
|
|
<image class="YDIcon" src="/static/images/home/yunnanLogo.svg" />
|
|
</view>
|
|
<view class="topRight" @click="goSelectServer">
|
|
<image class="searchIcon" src="/static/images/home/searchIcon.svg" />
|
|
<span class="searchText">请输入服务区</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content" :style="{
|
|
paddingTop: menu.bottom + 18 + 'px',
|
|
height: `calc(100vh - 50px - ${safeHeight}px )`,
|
|
}">
|
|
<!-- 用户信息栏 -->
|
|
<view class="userBox">
|
|
<view class="userTop" @click="hanldGoConfig">
|
|
<view class="topLeft">
|
|
<view class="userImg">
|
|
<image class="imgIcon" :src="WXProfile ||
|
|
(userInfo && userInfo.MEMBERSHIP_HEADIMAGEURL
|
|
? userInfo.MEMBERSHIP_HEADIMAGEURL
|
|
: '')
|
|
" />
|
|
<!-- <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<image class="headerImg" :src="WXProfile ||
|
|
(userInfo && userInfo.MEMBERSHIP_HEADIMAGEURL
|
|
? userInfo.MEMBERSHIP_HEADIMAGEURL
|
|
: '')
|
|
" />
|
|
</button> -->
|
|
</view>
|
|
<view class="userDetail">
|
|
<view class="phoneText">
|
|
{{ phone }}
|
|
<image v-if="userInfo && userInfo.MEMBERSHIP_LEVEL" class="userType" :src="userInfo && userInfo.MEMBERSHIP_LEVEL === 1000
|
|
? 'https://eshangtech.com/wanmeiyizhanImg/home/normalUser.svg'
|
|
: userInfo && userInfo.MEMBERSHIP_LEVEL === 2000
|
|
? 'https://eshangtech.com/wanmeiyizhanImg/home/silverCard.svg'
|
|
: ''
|
|
" />
|
|
</view>
|
|
<view class="bindCar">
|
|
<span v-if="!cards" class="bindCarText" @click.stop="handleGoBindCar">未绑定爱车</span>
|
|
<span v-if="cards" class="bindCarText" @click.stop="handleGoBindCar">{{ cards }}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="topRight" @click.stop="handleGoUserCode">
|
|
<view class="codeBox">
|
|
<image class="code" src="/static/images/home/codeIcon.svg" />
|
|
</view>
|
|
<view class="codeText">会员码</view>
|
|
</view>
|
|
</view>
|
|
<view class="userBottom">
|
|
<view class="bottomItem" @click="handleGoCoupon">
|
|
<view class="label">优惠券</view>
|
|
<!-- $utils.handleFormatNumber(userInfo.COUPON_COUNT || 0) -->
|
|
<view class="value">{{
|
|
userInfo.COUPON_COUNT || 0
|
|
}}</view>
|
|
<view class="rightLine"></view>
|
|
</view>
|
|
<view class="bottomItem">
|
|
<view class="label">积分</view>
|
|
<view class="value">{{
|
|
$utils.handleFormatNumber(userInfo.MEMBERSHIP_POINT || 0)
|
|
}}</view>
|
|
<view class="rightLine"></view>
|
|
</view>
|
|
<view class="bottomItem">
|
|
<view class="label">余额</view>
|
|
<view class="value">{{
|
|
$utils.handleFormatNumber(userInfo.ACCOUNT_BALANCE || 0)
|
|
}}</view>
|
|
</view>
|
|
<!-- <view class="line"></view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的商城订单栏 -->
|
|
<view class="orderFun">
|
|
<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">
|
|
<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 class="orderRight">
|
|
<!-- <view
|
|
class="orderFunItem"
|
|
@click="
|
|
handleGo(
|
|
`/pages/order/buyOrder/index?type=6&pageType=UnionMall`
|
|
)
|
|
"
|
|
>
|
|
<image
|
|
class="orderFunIcon"
|
|
src="/static/images/home/afterSales.svg"
|
|
/>
|
|
<text class="orderFunText">退换/售后</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%; paddingright: 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>
|
|
</view>
|
|
<view class="orderRight">
|
|
<!-- <view
|
|
class="orderFunItem"
|
|
@click="handleGo(`/pages/order/foodOrder/index?type=6`)"
|
|
>
|
|
<image
|
|
class="orderFunIcon"
|
|
src="/static/images/home/afterSales.svg"
|
|
/>
|
|
<text class="orderFunText">退换/售后</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 常用功能 -->
|
|
<view class="commonFunction">
|
|
<view class="boxTitleTop">
|
|
<text class="boxTitle">常用功能</text>
|
|
</view>
|
|
|
|
<view class="commonFunContent">
|
|
<view class="commonFunItem" v-for="(item, index) in commonFunList" :key="index" @click="handleGoNormal(item)">
|
|
<image class="commonFunIcon" :src="pageType === 'spring' ? item.springSrc : item.src" />
|
|
<text class="commonFunText">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 客服帮助 那俩 -->
|
|
<view class="customerService">
|
|
<view class="customerServiceItem" @click="handleLastFun(1)">
|
|
<view class="customerServiceLeft">
|
|
<view class="label">客服帮助</view>
|
|
<view class="smallLabel">伴您行程无忧</view>
|
|
</view>
|
|
<view class="customerServiceRight">
|
|
<image class="customerIcon" src="/static/images/home/customerIcon.svg" />
|
|
</view>
|
|
</view>
|
|
<view class="customerServiceItem" @click="handleLastFun(2)">
|
|
<view class="customerServiceLeft">
|
|
<view class="label">服务热线</view>
|
|
<view class="smallLabel">伴您行程无忧</view>
|
|
</view>
|
|
<view class="customerServiceRight">
|
|
<image class="customerIcon" src="/static/images/home/customerPhoneIcon.svg" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<tabbar :page="'/pages/user/index'" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import tabbar from "../../components/tabbar.vue";
|
|
export default {
|
|
components: { tabbar },
|
|
data() {
|
|
return {
|
|
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,
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
let height = uni.getStorageSync("safeHeight");
|
|
this.safeHeight = Number(height);
|
|
this.$utils.addUserBehaviorNew();
|
|
},
|
|
onShow() {
|
|
console.log("this.user", this.user);
|
|
if (!this.user.MEMBERSHIP_ID) {
|
|
uni.navigateTo({ url: "/pages/register/index" });
|
|
}
|
|
// 拿车牌号
|
|
this.handleGetCarCode();
|
|
// 拿用户信息
|
|
this.handleGetUserDetail();
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
phone() {
|
|
if (this.userInfo.MEMBERSHIP_MOBILEPHONE) {
|
|
let a = this.userInfo.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
|
|
let b = this.userInfo.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
|
|
return a + "****" + b;
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
// 跳转会员设置
|
|
hanldGoConfig() {
|
|
uni.navigateTo({
|
|
url: '/pages/useConfig/userConfig'
|
|
})
|
|
},
|
|
// 跳转券包
|
|
handleGoCoupon() {
|
|
uni.navigateTo({
|
|
url: '/pages/homeFn/myCoupon/index'
|
|
})
|
|
},
|
|
// 用户上传头像
|
|
async onChooseAvatar(e) {
|
|
let _this = this;
|
|
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;
|
|
if (url) {
|
|
let req = {
|
|
membershipId: this.user.MEMBERSHIP_ID,
|
|
headImgUrl: url,
|
|
};
|
|
_this.WXProfile = url;
|
|
const userInfoData = await _this.$api.$get(
|
|
"/WeChat/UpdateMemberInfo",
|
|
req
|
|
);
|
|
if (userInfoData.Result_Code === 100) {
|
|
_this.handleGetUserDetail();
|
|
}
|
|
}
|
|
},
|
|
});
|
|
},
|
|
// 拿到用户详情
|
|
async handleGetUserDetail() {
|
|
const userData = await this.$api.getCoop({
|
|
action_type: "GetMembershipInfo",
|
|
WechatUserId: this.user.WechatUserId,
|
|
});
|
|
this.userInfo = userData.Data;
|
|
this.$forceUpdate();
|
|
console.log("this.userInfo", this.userInfo);
|
|
},
|
|
// 跳转去售后 即已完成的列表
|
|
handleGo(url) {
|
|
uni.navigateTo({
|
|
url: url,
|
|
});
|
|
},
|
|
// 跳转去点餐订单页面
|
|
handleGoFoodOrder(value) {
|
|
uni.navigateTo({
|
|
url: `/pages/order/foodOrder/index?type=${value}`,
|
|
});
|
|
},
|
|
// 绑定车辆
|
|
handleGoBindCar() {
|
|
uni.navigateTo({
|
|
url: `/pages/bindCar/index`,
|
|
});
|
|
},
|
|
// 拿到车牌号
|
|
handleGetCarCode() {
|
|
let _this = this;
|
|
uni.showLoading({ title: "加载中" });
|
|
this.$api
|
|
.getCoop({
|
|
action_type: "GetVehicleList",
|
|
})
|
|
.then((res) => {
|
|
let list = res.Result_Data.List;
|
|
if (list && list.length > 0) {
|
|
_this.cards = list[0].License_Plate;
|
|
}
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
// 常用功能的跳转
|
|
handleGoNormal(obj) {
|
|
console.log("obj", 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",
|
|
});
|
|
}
|
|
},
|
|
// // 调起付款码
|
|
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);
|
|
console.log("data", data);
|
|
wx.openOfflinePayView({
|
|
appId: "wxee018fb96955552a",
|
|
timeStamp: timeStamp,
|
|
nonceStr: nonceStr,
|
|
package: "1672298991",
|
|
signType: "MD5",
|
|
paySign: data.Result_Data,
|
|
success(res) {
|
|
console.log("res", res);
|
|
},
|
|
});
|
|
},
|
|
// 最底下的两个点击事件
|
|
handleLastFun(value) {
|
|
console.log("value", value);
|
|
if (value === 1) {
|
|
// 客服帮助
|
|
// uni.navigateTo({
|
|
// url: `/pages/noDataPage/index`,
|
|
// });
|
|
wx.openCustomerServiceChat({
|
|
extInfo: {
|
|
url: "", // 客服链接
|
|
}, // 客服信息
|
|
corpId: "", //企业ID
|
|
success(res) {
|
|
console.log("res", res);
|
|
},
|
|
});
|
|
} else if (value === 2) {
|
|
// 服务热线
|
|
uni.navigateTo({
|
|
url: `/pages/noDataPage/index`,
|
|
});
|
|
}
|
|
},
|
|
// 跳转订单
|
|
handleGoOrder(value, pageType) {
|
|
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() {
|
|
uni.navigateTo({
|
|
url: "/pages/payfor/index",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.topBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
|
|
.topContent {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.topLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.YDIcon {
|
|
width: 176rpx;
|
|
height: 48rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.topRight {
|
|
width: 310rpx;
|
|
height: 72rpx;
|
|
background: #f6f8fa;
|
|
border-radius: 36rpx;
|
|
margin-left: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.searchIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.searchText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #9fa1aa;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx 48rpx;
|
|
overflow-y: auto;
|
|
|
|
.userBox {
|
|
width: 100%;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
overflow: hidden;
|
|
|
|
.userTop {
|
|
width: 100%;
|
|
height: 216rpx;
|
|
background: #32ba68;
|
|
box-sizing: border-box;
|
|
padding: 40rpx 32rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.topLeft {
|
|
height: 104rpx;
|
|
display: flex;
|
|
|
|
.userImg {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.avatarBtn {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
padding: 0;
|
|
|
|
.headerImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.imgIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.userDetail {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 6rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.phoneText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
line-height: 48rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.userType {
|
|
width: 80rpx;
|
|
height: 32rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.bindCar {
|
|
.bindCarText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #716f69;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
display: inline;
|
|
font-style: normal;
|
|
padding: 2rpx 16rpx;
|
|
background: #ffffff;
|
|
border-radius: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topRight {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.codeBox {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin-bottom: 4rpx;
|
|
|
|
.code {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
}
|
|
|
|
.codeText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #ffffff;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.userBottom {
|
|
width: 100%;
|
|
height: 128rpx;
|
|
background: #fff;
|
|
border-radius: 0 0 16rpx 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.bottomItem {
|
|
width: calc((100% - 16rpx) / 3);
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.label {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716f69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.value {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #130f05;
|
|
line-height: 48rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rightLine {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 2rpx;
|
|
height: 72rpx;
|
|
background: #eeeeee;
|
|
}
|
|
}
|
|
|
|
// .line {
|
|
// position: absolute;
|
|
// width: 2rpx;
|
|
// height: 72rpx;
|
|
// background: #eeeeee;
|
|
// top: 50%;
|
|
// transform: translate(-50%, -50%);
|
|
// left: 50%;
|
|
// }
|
|
}
|
|
}
|
|
|
|
.orderFun {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
|
|
.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: 72rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.commonFunction {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
background: #fff;
|
|
margin-top: 24rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.commonFunContent {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
|
|
.commonFunItem {
|
|
width: calc((100% - 48rpx) / 3);
|
|
height: 188rpx;
|
|
background: #f5f8f6;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.commonFunIcon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.commonFunText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.customerService {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.customerServiceItem {
|
|
width: calc((100% - 24rpx) / 2);
|
|
box-sizing: border-box;
|
|
padding: 28rpx 24rpx;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.customerServiceLeft {
|
|
.label {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.smallLabel {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.customerServiceRight {
|
|
.customerIcon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
</style> |