4 changed files with 1 additions and 1276 deletions
Unified View
Diff Options
-
2pages/mine/index.vue
-
425pages/mine/index.vue.BASE.vue
-
425pages/mine/index.vue.LOCAL.vue
-
425pages/mine/index.vue.REMOTE.vue
@ -1,425 +0,0 @@ |
|||||
<template> |
|
||||
<view class="content"> |
|
||||
<view class="top-area"> |
|
||||
<view class="reset"> |
|
||||
<image class="bg" src="/static/imgs/mine/mine-top-bg.png"></image> |
|
||||
<view class="operation-area"> |
|
||||
<view class="user"> |
|
||||
<image class="avatar" :src="curAvatar"></image> |
|
||||
<view v-if="!hasLogin" @click="go2('login')"> |
|
||||
<view> |
|
||||
<text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text> |
|
||||
</view> |
|
||||
<view style="margin-top: 10rpx"> |
|
||||
<text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-else> |
|
||||
<view class="user__name"> |
|
||||
<text class="name">{{ userInfo.name }}</text> |
|
||||
<image v-if="userInfo.fddEnterpriseStatus === fddStatus.CERTIFIED_SUCCESS" class="image" src="/static/imgs/mine/certified-icon.png"></image> |
|
||||
<image v-else class="image" @click="certifyCompany()" src="/static/imgs/mine/non-certified-icon.png"></image> |
|
||||
</view> |
|
||||
<view style="margin-top: 10rpx"> |
|
||||
<text style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all"> |
|
||||
{{ userInfo.companyName }} |
|
||||
</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="logout" @click="logout"> |
|
||||
<text class="text">退出登录</text> |
|
||||
<image class="icon" src="/static/imgs/mine/logout-icon.png"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area" style="margin-top: -94rpx; z-index: 10"> |
|
||||
<view class="header"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">我的订单</text> |
|
||||
<view class="item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"> |
|
||||
<text style="font-size: 26rpx; color: #000000">查看更多订单</text> |
|
||||
<uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="order-area"> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-all-icon.png"></image> |
|
||||
<text class="label">全部订单</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_CONFIRM })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-ready-icon.png"></image> |
|
||||
<text class="label">待确认</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_SUPPLIER_CONFIRM })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-supplier-ready-icon.png"></image> |
|
||||
<text class="label">待供应商确认</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ORDERED })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-ing-icon.png"></image> |
|
||||
<text class="label">已下单</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.FINISHED })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-done-icon.png"></image> |
|
||||
<text class="label">已完成</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area" v-if="fsInfo.status !== -1" style="border-radius: 16rpx"> |
|
||||
<image |
|
||||
class="poster" |
|
||||
v-if="fsInfo.status == fsAuditStatus.WAIT_APPLY || fsInfo.status == fsAuditStatus.REJECT" |
|
||||
src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-to-apply.png" |
|
||||
@click="applyForFinance()" |
|
||||
></image> |
|
||||
<image |
|
||||
class="poster" |
|
||||
v-if="fsInfo.status == fsAuditStatus.AUDITING" |
|
||||
src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-to-apply.png" |
|
||||
></image> |
|
||||
<view class="fs-card" v-if="fsInfo.status == fsAuditStatus.PASS"> |
|
||||
<view class="left"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">可用采购额度</text> |
|
||||
<!-- 下面这行不要换行 --> |
|
||||
<!-- prettier-ignore --> |
|
||||
<view style="margin:24rpx 0 16rpx;"><text class="pre">￥</text><text class="next">{{fsInfo.availableCreditLine}}</text></view> |
|
||||
<text style="font-size: 24rpx; color: rgba(0, 0, 0, 0.75)">{{ `已使用: ￥ ${fsInfo.usedCreditLine}` }}</text> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<text>{{ `授信额度: ${fsInfo.creditLine / 10000}万` }}</text> |
|
||||
<uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area"> |
|
||||
<view class="header"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">其他工具</text> |
|
||||
</view> |
|
||||
<view class="icon-area"> |
|
||||
<view class="icon-item" style="margin-right: 64rpx"> |
|
||||
<image class="icon" src="/static/imgs/mine/account-icon.png"></image> |
|
||||
<text class="label">账号管理</text> |
|
||||
</view> |
|
||||
<view class="icon-item" style="margin-right: 64rpx" @click="go2('enquiry-list')"> |
|
||||
<image class="icon" src="/static/imgs/mine/enquiry-icon.png"></image> |
|
||||
<text class="label">我的询价</text> |
|
||||
</view> |
|
||||
<view class="icon-item" style="margin-right: 64rpx"> |
|
||||
<image class="icon" src="/static/imgs/mine/address-icon.png"></image> |
|
||||
<text class="label">收货地址</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view @click="loginGo2('test')">test</view> |
|
||||
<view @click="loginGo2('order-detail')">order-detail</view> |
|
||||
<view @click="loginGo2('enterprise-info')">enterprise-info</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { exit, go2, loginGo2 } from '@/utils/hook.js' |
|
||||
import { fddEnterpriseStatus, fsAuditStatus, orderStatusEnum } from '@/enums/index.js' |
|
||||
import { getVerifyUrl, getFsCredit, getBaseInfo, getFeisuanUrl } from '@/apis/commonApi.js' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
fddStatus: Object.freeze(fddEnterpriseStatus), |
|
||||
fsInfo: { |
|
||||
status: -1, // 初始不存在 |
|
||||
availableCreditLine: 0, |
|
||||
usedCreditLine: 0, |
|
||||
creditLine: 0 |
|
||||
}, |
|
||||
fsAuditStatus: Object.freeze(fsAuditStatus), |
|
||||
orderStatusEnum: Object.freeze(orderStatusEnum) |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
loginGo2, |
|
||||
logout() { |
|
||||
exit() |
|
||||
}, |
|
||||
// 企业法大大实名认证 |
|
||||
certifyCompany() { |
|
||||
if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED || this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL) { |
|
||||
getVerifyUrl({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => { |
|
||||
if (res) { |
|
||||
// #ifdef APP-PLUS |
|
||||
go2('page-view', { |
|
||||
title: '实名认证', |
|
||||
url: encodeURIComponent(res) |
|
||||
}) |
|
||||
// #endif |
|
||||
// #ifdef H5 |
|
||||
window ? (window.location.href = res) : '' |
|
||||
// #endif |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED) { |
|
||||
uni.showToast({ |
|
||||
title: '认证中，请稍后~', |
|
||||
icon: 'none' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
go2, |
|
||||
applyForFinance() { |
|
||||
getFeisuanUrl().then((res) => { |
|
||||
if (res) { |
|
||||
// #ifdef APP-PLUS |
|
||||
go2('page-view', { |
|
||||
title: '飞算申请', |
|
||||
url: encodeURIComponent(res) |
|
||||
}) |
|
||||
// #endif |
|
||||
// #ifdef H5 |
|
||||
window ? (window.location.href = res) : '' |
|
||||
// #endif |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
// 获取纸盘商订单统计 |
|
||||
}, |
|
||||
computed: { |
|
||||
hasLogin() { |
|
||||
return this.$store.state.qnToken != '' |
|
||||
}, |
|
||||
curAvatar() { |
|
||||
if (!this.hasLogin) { |
|
||||
return '/static/imgs/mine/user-avatar.png' |
|
||||
} |
|
||||
if (this.userInfo.avatar) { |
|
||||
return this.userInfo.avatar |
|
||||
} else { |
|
||||
return '/static/imgs/mine/default-avatar.png' |
|
||||
} |
|
||||
}, |
|
||||
userInfo() { |
|
||||
console.log('userInfo:', this.$store.state.userInfo) |
|
||||
console.log('companyInfo:', this.$store.state.companyInfo) |
|
||||
return { |
|
||||
avatar: this.$store.state.userInfo.avatar || '', |
|
||||
name: this.$store.state.userInfo.name || this.$store.state.userInfo.mobile || '', |
|
||||
companyName: this.$store.state.companyInfo.name || '', |
|
||||
fddEnterpriseStatus: this.$store.state.companyInfo.fddEnterpriseStatus || 1 |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
onShow() { |
|
||||
this.hasLogin && |
|
||||
getFsCredit({ |
|
||||
enterpriseId: this.$store.state.companyInfo.id |
|
||||
}).then((res) => { |
|
||||
if (res) { |
|
||||
this.fsInfo = res |
|
||||
} |
|
||||
}) |
|
||||
this.hasLogin && getBaseInfo({}, true) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.content { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.top-area { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
border-radius: 0 0 350px 350px; |
|
||||
transform: scaleX(2.5); |
|
||||
.reset { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
transform: scaleX(0.4); // 将比例缩至正常 |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.bg { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
z-index: 0; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
.operation-area { |
|
||||
width: 750rpx; |
|
||||
margin: 96rpx 0 36rpx; |
|
||||
padding: 0 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
.user { |
|
||||
z-index: 5; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
.avatar { |
|
||||
width: 156rpx; |
|
||||
height: 156rpx; |
|
||||
border-radius: 50%; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
overflow: hidden; |
|
||||
margin-right: 16rpx; |
|
||||
} |
|
||||
.user__name { |
|
||||
flex-grow: 1; |
|
||||
flex-shrink: 1; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
.name { |
|
||||
font-size: 38rpx; |
|
||||
color: #fff; |
|
||||
font-weight: 600; |
|
||||
margin-right: 16rpx; |
|
||||
word-break: break-all; |
|
||||
} |
|
||||
.image { |
|
||||
width: 100rpx; |
|
||||
height: 32rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.logout { |
|
||||
z-index: 5; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
.text { |
|
||||
font-size: 24rpx; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.icon { |
|
||||
margin-left: 8rpx; |
|
||||
width: 24rpx; |
|
||||
height: 24rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.card-area { |
|
||||
width: 686rpx; |
|
||||
margin: 20rpx 32rpx 0; |
|
||||
background-color: #fff; |
|
||||
box-shadow: 0 2rpx 14rpx 0 rgba(220, 220, 220, 0.5); |
|
||||
border-radius: 10rpx; |
|
||||
.header { |
|
||||
padding: 20rpx 24rpx 14rpx; |
|
||||
border-bottom: 2rpx solid #f8f8f8; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
.item { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
.icon { |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
.text { |
|
||||
font-size: 30rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
letter-spacing: 1.5rpx; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.order-area { |
|
||||
padding: 40rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: nowrap; |
|
||||
} |
|
||||
.icon-area { |
|
||||
padding: 40rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
.icon-item { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.icon { |
|
||||
width: 68rpx; |
|
||||
height: 68rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
.label { |
|
||||
font-size: 26rpx; |
|
||||
color: #666666; |
|
||||
margin-top: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
.poster { |
|
||||
width: 686rpx; |
|
||||
height: 140rpx; |
|
||||
} |
|
||||
.fs-card { |
|
||||
width: 686rpx; |
|
||||
padding: 24rpx 32rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: nowrap; |
|
||||
.left { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: flex-start; |
|
||||
justify-content: flex-start; |
|
||||
.pre { |
|
||||
font-size: 36rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
.next { |
|
||||
font-size: 56rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
.right { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
font-size: 32rpx; |
|
||||
color: #333333; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,425 +0,0 @@ |
|||||
<template> |
|
||||
<view class="content"> |
|
||||
<view class="top-area"> |
|
||||
<view class="reset"> |
|
||||
<image class="bg" src="/static/imgs/mine/mine-top-bg.png"></image> |
|
||||
<view class="operation-area"> |
|
||||
<view class="user"> |
|
||||
<image class="avatar" :src="curAvatar"></image> |
|
||||
<view v-if="!hasLogin" @click="go2('login')"> |
|
||||
<view> |
|
||||
<text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text> |
|
||||
</view> |
|
||||
<view style="margin-top: 10rpx"> |
|
||||
<text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-else> |
|
||||
<view class="user__name"> |
|
||||
<text class="name">{{ userInfo.name }}</text> |
|
||||
<image v-if="userInfo.fddEnterpriseStatus === fddStatus.CERTIFIED_SUCCESS" class="image" src="/static/imgs/mine/certified-icon.png"></image> |
|
||||
<image v-else class="image" @click="certifyCompany()" src="/static/imgs/mine/non-certified-icon.png"></image> |
|
||||
</view> |
|
||||
<view style="margin-top: 10rpx"> |
|
||||
<text style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all"> |
|
||||
{{ userInfo.companyName }} |
|
||||
</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="logout" @click="logout"> |
|
||||
<text class="text">退出登录</text> |
|
||||
<image class="icon" src="/static/imgs/mine/logout-icon.png"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area" style="margin-top: -94rpx; z-index: 10"> |
|
||||
<view class="header"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">我的订单</text> |
|
||||
<view class="item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"> |
|
||||
<text style="font-size: 26rpx; color: #000000">查看更多订单</text> |
|
||||
<uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="order-area"> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-all-icon.png"></image> |
|
||||
<text class="label">全部订单</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_CONFIRM })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-ready-icon.png"></image> |
|
||||
<text class="label">待确认</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_SUPPLIER_CONFIRM })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-supplier-ready-icon.png"></image> |
|
||||
<text class="label">待供应商确认</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ORDERED })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-ing-icon.png"></image> |
|
||||
<text class="label">已下单</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.FINISHED })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-done-icon.png"></image> |
|
||||
<text class="label">已完成</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area" v-if="fsInfo.status !== -1" style="border-radius: 16rpx"> |
|
||||
<image |
|
||||
class="poster" |
|
||||
v-if="fsInfo.status == fsAuditStatus.WAIT_APPLY || fsInfo.status == fsAuditStatus.REJECT" |
|
||||
src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-to-apply.png" |
|
||||
@click="applyForFinance()" |
|
||||
></image> |
|
||||
<image |
|
||||
class="poster" |
|
||||
v-if="fsInfo.status == fsAuditStatus.AUDITING" |
|
||||
src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-to-apply.png" |
|
||||
></image> |
|
||||
<view class="fs-card" v-if="fsInfo.status == fsAuditStatus.PASS"> |
|
||||
<view class="left"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">可用采购额度</text> |
|
||||
<!-- 下面这行不要换行 --> |
|
||||
<!-- prettier-ignore --> |
|
||||
<view style="margin:24rpx 0 16rpx;"><text class="pre">￥</text><text class="next">{{fsInfo.availableCreditLine}}</text></view> |
|
||||
<text style="font-size: 24rpx; color: rgba(0, 0, 0, 0.75)">{{ `已使用: ￥ ${fsInfo.usedCreditLine}` }}</text> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<text>{{ `授信额度: ${fsInfo.creditLine / 10000}万` }}</text> |
|
||||
<uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area"> |
|
||||
<view class="header"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">其他工具</text> |
|
||||
</view> |
|
||||
<view class="icon-area"> |
|
||||
<view class="icon-item" style="margin-right: 64rpx" @click="go2('account-management')"> |
|
||||
<image class="icon" src="/static/imgs/mine/account-icon.png"></image> |
|
||||
<text class="label">账号管理</text> |
|
||||
</view> |
|
||||
<view class="icon-item" style="margin-right: 64rpx" @click="go2('enquiry-list')"> |
|
||||
<image class="icon" src="/static/imgs/mine/enquiry-icon.png"></image> |
|
||||
<text class="label">我的询价</text> |
|
||||
</view> |
|
||||
<view class="icon-item" style="margin-right: 64rpx"> |
|
||||
<image class="icon" src="/static/imgs/mine/address-icon.png" @click="go2('address-manage')"></image> |
|
||||
<text class="label">收货地址</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view @click="loginGo2('test')">test</view> |
|
||||
<view @click="loginGo2('order-detail')">order-detail</view> |
|
||||
<view @click="loginGo2('enterprise-info')">enterprise-info</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { exit, go2, loginGo2 } from '@/utils/hook.js' |
|
||||
import { fddEnterpriseStatus, fsAuditStatus, orderStatusEnum } from '@/enums/index.js' |
|
||||
import { getVerifyUrl, getFsCredit, getBaseInfo, getFeisuanUrl } from '@/apis/commonApi.js' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
fddStatus: Object.freeze(fddEnterpriseStatus), |
|
||||
fsInfo: { |
|
||||
status: -1, // 初始不存在 |
|
||||
availableCreditLine: 0, |
|
||||
usedCreditLine: 0, |
|
||||
creditLine: 0 |
|
||||
}, |
|
||||
fsAuditStatus: Object.freeze(fsAuditStatus), |
|
||||
orderStatusEnum: Object.freeze(orderStatusEnum) |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
loginGo2, |
|
||||
logout() { |
|
||||
exit() |
|
||||
}, |
|
||||
// 企业法大大实名认证 |
|
||||
certifyCompany() { |
|
||||
if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED || this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL) { |
|
||||
getVerifyUrl({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => { |
|
||||
if (res) { |
|
||||
// #ifdef APP-PLUS |
|
||||
go2('page-view', { |
|
||||
title: '实名认证', |
|
||||
url: encodeURIComponent(res) |
|
||||
}) |
|
||||
// #endif |
|
||||
// #ifdef H5 |
|
||||
window ? (window.location.href = res) : '' |
|
||||
// #endif |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED) { |
|
||||
uni.showToast({ |
|
||||
title: '认证中，请稍后~', |
|
||||
icon: 'none' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
go2, |
|
||||
applyForFinance() { |
|
||||
getFeisuanUrl().then((res) => { |
|
||||
if (res) { |
|
||||
// #ifdef APP-PLUS |
|
||||
go2('page-view', { |
|
||||
title: '飞算申请', |
|
||||
url: encodeURIComponent(res) |
|
||||
}) |
|
||||
// #endif |
|
||||
// #ifdef H5 |
|
||||
window ? (window.location.href = res) : '' |
|
||||
// #endif |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
// 获取纸盘商订单统计 |
|
||||
}, |
|
||||
computed: { |
|
||||
hasLogin() { |
|
||||
return this.$store.state.qnToken != '' |
|
||||
}, |
|
||||
curAvatar() { |
|
||||
if (!this.hasLogin) { |
|
||||
return '/static/imgs/mine/user-avatar.png' |
|
||||
} |
|
||||
if (this.userInfo.avatar) { |
|
||||
return this.userInfo.avatar |
|
||||
} else { |
|
||||
return '/static/imgs/mine/default-avatar.png' |
|
||||
} |
|
||||
}, |
|
||||
userInfo() { |
|
||||
console.log('userInfo:', this.$store.state.userInfo) |
|
||||
console.log('companyInfo:', this.$store.state.companyInfo) |
|
||||
return { |
|
||||
avatar: this.$store.state.userInfo.avatar || '', |
|
||||
name: this.$store.state.userInfo.name || this.$store.state.userInfo.mobile || '', |
|
||||
companyName: this.$store.state.companyInfo.name || '', |
|
||||
fddEnterpriseStatus: this.$store.state.companyInfo.fddEnterpriseStatus || 1 |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
onShow() { |
|
||||
this.hasLogin && |
|
||||
getFsCredit({ |
|
||||
enterpriseId: this.$store.state.companyInfo.id |
|
||||
}).then((res) => { |
|
||||
if (res) { |
|
||||
this.fsInfo = res |
|
||||
} |
|
||||
}) |
|
||||
this.hasLogin && getBaseInfo({}, true) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.content { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.top-area { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
border-radius: 0 0 350px 350px; |
|
||||
transform: scaleX(2.5); |
|
||||
.reset { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
transform: scaleX(0.4); // 将比例缩至正常 |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.bg { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
z-index: 0; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
.operation-area { |
|
||||
width: 750rpx; |
|
||||
margin: 96rpx 0 36rpx; |
|
||||
padding: 0 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
.user { |
|
||||
z-index: 5; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
.avatar { |
|
||||
width: 156rpx; |
|
||||
height: 156rpx; |
|
||||
border-radius: 50%; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
overflow: hidden; |
|
||||
margin-right: 16rpx; |
|
||||
} |
|
||||
.user__name { |
|
||||
flex-grow: 1; |
|
||||
flex-shrink: 1; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
.name { |
|
||||
font-size: 38rpx; |
|
||||
color: #fff; |
|
||||
font-weight: 600; |
|
||||
margin-right: 16rpx; |
|
||||
word-break: break-all; |
|
||||
} |
|
||||
.image { |
|
||||
width: 100rpx; |
|
||||
height: 32rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.logout { |
|
||||
z-index: 5; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
.text { |
|
||||
font-size: 24rpx; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.icon { |
|
||||
margin-left: 8rpx; |
|
||||
width: 24rpx; |
|
||||
height: 24rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.card-area { |
|
||||
width: 686rpx; |
|
||||
margin: 20rpx 32rpx 0; |
|
||||
background-color: #fff; |
|
||||
box-shadow: 0 2rpx 14rpx 0 rgba(220, 220, 220, 0.5); |
|
||||
border-radius: 10rpx; |
|
||||
.header { |
|
||||
padding: 20rpx 24rpx 14rpx; |
|
||||
border-bottom: 2rpx solid #f8f8f8; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
.item { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
.icon { |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
.text { |
|
||||
font-size: 30rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
letter-spacing: 1.5rpx; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.order-area { |
|
||||
padding: 40rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: nowrap; |
|
||||
} |
|
||||
.icon-area { |
|
||||
padding: 40rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
.icon-item { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.icon { |
|
||||
width: 68rpx; |
|
||||
height: 68rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
.label { |
|
||||
font-size: 26rpx; |
|
||||
color: #666666; |
|
||||
margin-top: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
.poster { |
|
||||
width: 686rpx; |
|
||||
height: 140rpx; |
|
||||
} |
|
||||
.fs-card { |
|
||||
width: 686rpx; |
|
||||
padding: 24rpx 32rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: nowrap; |
|
||||
.left { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: flex-start; |
|
||||
justify-content: flex-start; |
|
||||
.pre { |
|
||||
font-size: 36rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
.next { |
|
||||
font-size: 56rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
.right { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
font-size: 32rpx; |
|
||||
color: #333333; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,425 +0,0 @@ |
|||||
<template> |
|
||||
<view class="content"> |
|
||||
<view class="top-area"> |
|
||||
<view class="reset"> |
|
||||
<image class="bg" src="/static/imgs/mine/mine-top-bg.png"></image> |
|
||||
<view class="operation-area"> |
|
||||
<view class="user"> |
|
||||
<image class="avatar" :src="curAvatar"></image> |
|
||||
<view v-if="!hasLogin" @click="go2('login')"> |
|
||||
<view> |
|
||||
<text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text> |
|
||||
</view> |
|
||||
<view style="margin-top: 10rpx"> |
|
||||
<text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-else> |
|
||||
<view class="user__name"> |
|
||||
<text class="name">{{ userInfo.name }}</text> |
|
||||
<image v-if="userInfo.fddEnterpriseStatus === fddStatus.CERTIFIED_SUCCESS" class="image" src="/static/imgs/mine/certified-icon.png"></image> |
|
||||
<image v-else class="image" @click="certifyCompany()" src="/static/imgs/mine/non-certified-icon.png"></image> |
|
||||
</view> |
|
||||
<view style="margin-top: 10rpx"> |
|
||||
<text style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all"> |
|
||||
{{ userInfo.companyName }} |
|
||||
</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="logout" @click="logout"> |
|
||||
<text class="text">退出登录</text> |
|
||||
<image class="icon" src="/static/imgs/mine/logout-icon.png"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area" style="margin-top: -94rpx; z-index: 10"> |
|
||||
<view class="header"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">我的订单</text> |
|
||||
<view class="item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"> |
|
||||
<text style="font-size: 26rpx; color: #000000">查看更多订单</text> |
|
||||
<uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="order-area"> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-all-icon.png"></image> |
|
||||
<text class="label">全部订单</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_CONFIRM })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-ready-icon.png"></image> |
|
||||
<text class="label">待确认</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_SUPPLIER_CONFIRM })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-supplier-ready-icon.png"></image> |
|
||||
<text class="label">待供应商确认</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ORDERED })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-ing-icon.png"></image> |
|
||||
<text class="label">已下单</text> |
|
||||
</view> |
|
||||
<view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.FINISHED })"> |
|
||||
<image class="icon" src="/static/imgs/mine/order-done-icon.png"></image> |
|
||||
<text class="label">已完成</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area" v-if="fsInfo.status !== -1" style="border-radius: 16rpx"> |
|
||||
<image |
|
||||
class="poster" |
|
||||
v-if="fsInfo.status == fsAuditStatus.WAIT_APPLY || fsInfo.status == fsAuditStatus.REJECT" |
|
||||
src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-to-apply.png" |
|
||||
@click="applyForFinance()" |
|
||||
></image> |
|
||||
<image |
|
||||
class="poster" |
|
||||
v-if="fsInfo.status == fsAuditStatus.AUDITING" |
|
||||
src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-applying.png" |
|
||||
></image> |
|
||||
<view class="fs-card" v-if="fsInfo.status == fsAuditStatus.PASS"> |
|
||||
<view class="left"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">可用采购额度</text> |
|
||||
<!-- 下面这行不要换行 --> |
|
||||
<!-- prettier-ignore --> |
|
||||
<view style="margin:24rpx 0 16rpx;"><text class="pre">￥</text><text class="next">{{fsInfo.availableCreditLine}}</text></view> |
|
||||
<text style="font-size: 24rpx; color: rgba(0, 0, 0, 0.75)">{{ `已使用: ￥ ${fsInfo.usedCreditLine}` }}</text> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<text>{{ `授信额度: ${fsInfo.creditLine / 10000}万` }}</text> |
|
||||
<uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="card-area"> |
|
||||
<view class="header"> |
|
||||
<text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">其他工具</text> |
|
||||
</view> |
|
||||
<view class="icon-area"> |
|
||||
<view class="icon-item" style="margin-right: 64rpx"> |
|
||||
<image class="icon" src="/static/imgs/mine/account-icon.png"></image> |
|
||||
<text class="label">账号管理</text> |
|
||||
</view> |
|
||||
<view class="icon-item" style="margin-right: 64rpx" @click="loginGo2('enquiry-list')"> |
|
||||
<image class="icon" src="/static/imgs/mine/enquiry-icon.png"></image> |
|
||||
<text class="label">我的询价</text> |
|
||||
</view> |
|
||||
<view class="icon-item" style="margin-right: 64rpx" @click="loginGo2('address-manage')"> |
|
||||
<image class="icon" src="/static/imgs/mine/address-icon.png"></image> |
|
||||
<text class="label">收货地址</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view @click="loginGo2('test')">test</view> |
|
||||
<view @click="loginGo2('order-detail')">order-detail</view> |
|
||||
<view @click="loginGo2('enterprise-info')">enterprise-info</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { exit, go2, loginGo2 } from '@/utils/hook.js' |
|
||||
import { fddEnterpriseStatus, fsAuditStatus, orderStatusEnum } from '@/enums/index.js' |
|
||||
import { getVerifyUrl, getFsCredit, getBaseInfo, getFeisuanUrl } from '@/apis/commonApi.js' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
fddStatus: Object.freeze(fddEnterpriseStatus), |
|
||||
fsInfo: { |
|
||||
status: -1, // 初始不存在 |
|
||||
availableCreditLine: 0, |
|
||||
usedCreditLine: 0, |
|
||||
creditLine: 0 |
|
||||
}, |
|
||||
fsAuditStatus: Object.freeze(fsAuditStatus), |
|
||||
orderStatusEnum: Object.freeze(orderStatusEnum) |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
loginGo2, |
|
||||
logout() { |
|
||||
exit() |
|
||||
}, |
|
||||
// 企业法大大实名认证 |
|
||||
certifyCompany() { |
|
||||
if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED || this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL) { |
|
||||
getVerifyUrl({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => { |
|
||||
if (res) { |
|
||||
// #ifdef APP-PLUS |
|
||||
go2('page-view', { |
|
||||
title: '实名认证', |
|
||||
url: encodeURIComponent(res) |
|
||||
}) |
|
||||
// #endif |
|
||||
// #ifdef H5 |
|
||||
window ? (window.location.href = res) : '' |
|
||||
// #endif |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED) { |
|
||||
uni.showToast({ |
|
||||
title: '认证中，请稍后~', |
|
||||
icon: 'none' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
go2, |
|
||||
applyForFinance() { |
|
||||
getFeisuanUrl().then((res) => { |
|
||||
if (res) { |
|
||||
// #ifdef APP-PLUS |
|
||||
go2('page-view', { |
|
||||
title: '飞算申请', |
|
||||
url: encodeURIComponent(res) |
|
||||
}) |
|
||||
// #endif |
|
||||
// #ifdef H5 |
|
||||
window ? (window.location.href = res) : '' |
|
||||
// #endif |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
// 获取纸盘商订单统计 |
|
||||
}, |
|
||||
computed: { |
|
||||
hasLogin() { |
|
||||
return this.$store.state.qnToken != '' |
|
||||
}, |
|
||||
curAvatar() { |
|
||||
if (!this.hasLogin) { |
|
||||
return '/static/imgs/mine/user-avatar.png' |
|
||||
} |
|
||||
if (this.userInfo.avatar) { |
|
||||
return this.userInfo.avatar |
|
||||
} else { |
|
||||
return '/static/imgs/mine/default-avatar.png' |
|
||||
} |
|
||||
}, |
|
||||
userInfo() { |
|
||||
console.log('userInfo:', this.$store.state.userInfo) |
|
||||
console.log('companyInfo:', this.$store.state.companyInfo) |
|
||||
return { |
|
||||
avatar: this.$store.state.userInfo.avatar || '', |
|
||||
name: this.$store.state.userInfo.name || this.$store.state.userInfo.mobile || '', |
|
||||
companyName: this.$store.state.companyInfo.name || '', |
|
||||
fddEnterpriseStatus: this.$store.state.companyInfo.fddEnterpriseStatus || 1 |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
onShow() { |
|
||||
this.hasLogin && |
|
||||
getFsCredit({ |
|
||||
enterpriseId: this.$store.state.companyInfo.id |
|
||||
}).then((res) => { |
|
||||
if (res) { |
|
||||
this.fsInfo = res |
|
||||
} |
|
||||
}) |
|
||||
this.hasLogin && getBaseInfo({}, true) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.content { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.top-area { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
border-radius: 0 0 350px 350px; |
|
||||
transform: scaleX(2.5); |
|
||||
.reset { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
transform: scaleX(0.4); // 将比例缩至正常 |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.bg { |
|
||||
width: 750rpx; |
|
||||
height: 380rpx; |
|
||||
z-index: 0; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
.operation-area { |
|
||||
width: 750rpx; |
|
||||
margin: 96rpx 0 36rpx; |
|
||||
padding: 0 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
.user { |
|
||||
z-index: 5; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
.avatar { |
|
||||
width: 156rpx; |
|
||||
height: 156rpx; |
|
||||
border-radius: 50%; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
overflow: hidden; |
|
||||
margin-right: 16rpx; |
|
||||
} |
|
||||
.user__name { |
|
||||
flex-grow: 1; |
|
||||
flex-shrink: 1; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
.name { |
|
||||
font-size: 38rpx; |
|
||||
color: #fff; |
|
||||
font-weight: 600; |
|
||||
margin-right: 16rpx; |
|
||||
word-break: break-all; |
|
||||
} |
|
||||
.image { |
|
||||
width: 100rpx; |
|
||||
height: 32rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.logout { |
|
||||
z-index: 5; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
.text { |
|
||||
font-size: 24rpx; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.icon { |
|
||||
margin-left: 8rpx; |
|
||||
width: 24rpx; |
|
||||
height: 24rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.card-area { |
|
||||
width: 686rpx; |
|
||||
margin: 20rpx 32rpx 0; |
|
||||
background-color: #fff; |
|
||||
box-shadow: 0 2rpx 14rpx 0 rgba(220, 220, 220, 0.5); |
|
||||
border-radius: 10rpx; |
|
||||
.header { |
|
||||
padding: 20rpx 24rpx 14rpx; |
|
||||
border-bottom: 2rpx solid #f8f8f8; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
.item { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
.icon { |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
.text { |
|
||||
font-size: 30rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
letter-spacing: 1.5rpx; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.order-area { |
|
||||
padding: 40rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: nowrap; |
|
||||
} |
|
||||
.icon-area { |
|
||||
padding: 40rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
.icon-item { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.icon { |
|
||||
width: 68rpx; |
|
||||
height: 68rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
.label { |
|
||||
font-size: 26rpx; |
|
||||
color: #666666; |
|
||||
margin-top: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
.poster { |
|
||||
width: 686rpx; |
|
||||
height: 140rpx; |
|
||||
} |
|
||||
.fs-card { |
|
||||
width: 686rpx; |
|
||||
padding: 24rpx 32rpx 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: nowrap; |
|
||||
.left { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: flex-start; |
|
||||
justify-content: flex-start; |
|
||||
.pre { |
|
||||
font-size: 36rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
.next { |
|
||||
font-size: 56rpx; |
|
||||
color: rgba(0, 0, 0, 0.85); |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
.right { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
font-size: 32rpx; |
|
||||
color: #333333; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save