You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
554 lines
16 KiB
554 lines
16 KiB
<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.supplierName }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="operation">
|
|
<view class="box">
|
|
<view class="container" @click="go2('message')">
|
|
<image class="icon" src="/static/imgs/mine/msg-icon.png"></image>
|
|
<view v-if="messageNum > 0" class="number">
|
|
<text class="text">{{ messageNum }}</text>
|
|
</view>
|
|
</view>
|
|
<image class="icon" @click="go2('setting')" src="/static/imgs/mine/setting-icon.png"></image>
|
|
</view>
|
|
<view v-if="companyNum > 1" class="box" @click="go2('toggle-supplier')">
|
|
<text style="font-size: 24rpx; color: #fff; flex-shrink: 0">切换账号</text>
|
|
<image class="icon" style="width: 24rpx; height: 24rpx; margin-left: 8rpx" src="/static/imgs/mine/toggle-icon.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="vip-area">
|
|
<view class="vip-content">
|
|
<view class="left">
|
|
<image class="icon" src="/static/imgs/mine/vip-icon.png"></image>
|
|
<text class="text">VIP会员</text>
|
|
</view>
|
|
<text class="center">立即开通会员 尊享特权</text>
|
|
<view class="right">
|
|
<text class="text">{{ isVip ? '续费会员' : '开通会员' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-area">
|
|
<view class="header">
|
|
<view class="item" style="justify-content: flex-start">
|
|
<image class="icon" style="width: 32rpx; height: 32rpx" src="/static/imgs/mine/money-icon.png"></image>
|
|
<text class="text">掌柜收入</text>
|
|
</view>
|
|
<view class="item" style="justify-content: flex-end">
|
|
<qn-data-picker
|
|
v-model="tradeDate"
|
|
text="right"
|
|
:border="false"
|
|
placeholder="交易区间"
|
|
popup-title="请选择时间"
|
|
:localdata="tradeRange"
|
|
:clear-icon="false"
|
|
v-slot:default="{ data }"
|
|
>
|
|
<view class="time-range">
|
|
<text style="font-size: 24rpx; color: rgba(0, 0, 0, 0.65); margin-right: 8rpx">{{ data[0] ? data[0].value : '' }}</text>
|
|
<text style="font-size: 24rpx; color: #333333; font-weight: 500; margin-right: 8rpx">{{ data[0] ? data[0].text : '' }}</text>
|
|
<uni-icons type="bottom" size="14" color="rgba(0,0,0,0.65)"></uni-icons>
|
|
</view>
|
|
</qn-data-picker>
|
|
</view>
|
|
</view>
|
|
<view class="order-area">
|
|
<view class="order-item">
|
|
<text class="value">{{ tradeData.tradingVolume }}</text>
|
|
<text class="label">交易额(元)</text>
|
|
</view>
|
|
<view class="order-item">
|
|
<text class="value">{{ tradeData.volumeOfBusiness }}</text>
|
|
<text class="label">交易量(吨)</text>
|
|
</view>
|
|
<view class="order-item">
|
|
<text class="value">{{ tradeData.orderQuantity }}</text>
|
|
<text class="label">成交订单(个)</text>
|
|
</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">
|
|
<image class="icon" src="/static/imgs/mine/order-icon.png"></image>
|
|
<text class="label">订单管理</text>
|
|
</view> -->
|
|
<view class="icon-item" @click="loginGo2('credit-order-list')">
|
|
<image class="icon" src="/static/imgs/mine/finance-icon.png"></image>
|
|
<text class="label">账期订单融资</text>
|
|
</view>
|
|
<view class="icon-item" @click="loginGo2('contract-manage')">
|
|
<image class="icon" src="/static/imgs/mine/contract-icon.png"></image>
|
|
<text class="label">合同管理</text>
|
|
</view>
|
|
<!-- <view class="icon-item" @click="loginGo2('credit-management')">
|
|
<image class="icon" src="/static/imgs/mine/credit-icon.png"></image>
|
|
<text class="label">征信管理</text>
|
|
</view> -->
|
|
<view class="icon-item" @click="loginGo2('client-credit-list')">
|
|
<image class="icon" src="/static/imgs/mine/credit-icon.png"></image>
|
|
<text class="label">授信记录</text>
|
|
</view>
|
|
<!-- <view class="icon-item">
|
|
<image class="icon" src="/static/imgs/mine/contract-icon.png"></image>
|
|
<text class="label">服务区域</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view @click="go2('client-credit')">client-credit</view>
|
|
<view @click="go2('enterprise-info')">enterprise-info</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { go2, loginGo2 } from '@/utils/hook.js'
|
|
import { fddEnterpriseStatus } from '@/enums/index.js'
|
|
import { getBaseInfo, getVerifyUrl } from '@/apis/commonApi.js'
|
|
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
|
|
import { dateTimeFormat } from '@/utils/index.js'
|
|
import { getOrderStatistics } from '@/apis/mineApi.js'
|
|
// 获取本月第一天和最后一天
|
|
const currentMonth = (() => {
|
|
let endDate = new Date()
|
|
let beginDate = new Date(endDate.getFullYear(), endDate.getMonth(), 1)
|
|
return [dateTimeFormat(beginDate, 'yyyy-mm-dd'), dateTimeFormat(endDate, 'yyyy-mm-dd')]
|
|
})()
|
|
|
|
// 获取上月第一天和最后一天
|
|
const lastMonth = (() => {
|
|
let now = new Date()
|
|
let endDate = new Date(now.getFullYear(), now.getMonth(), 0)
|
|
let beginDate = new Date(now.getFullYear(), now.getMonth() - 1, 1)
|
|
return [dateTimeFormat(beginDate, 'yyyy-mm-dd'), dateTimeFormat(endDate, 'yyyy-mm-dd')]
|
|
})()
|
|
export default {
|
|
components: { qnDataPicker },
|
|
data() {
|
|
return {
|
|
fddStatus: Object.freeze(fddEnterpriseStatus),
|
|
messageNum: 0,
|
|
companyNum: 0,
|
|
tradeRange: [
|
|
{
|
|
text: '本月',
|
|
value: currentMonth.join('~')
|
|
},
|
|
{
|
|
text: '上月',
|
|
value: lastMonth.join('~')
|
|
},
|
|
{
|
|
text: '总计',
|
|
value: ''
|
|
}
|
|
],
|
|
tradeDate: currentMonth.join('~'),
|
|
tradeData: {
|
|
tradingVolume: 0,
|
|
volumeOfBusiness: 0,
|
|
orderQuantity: 0
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 企业法大大实名认证
|
|
certifyCompany() {
|
|
if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED || this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL) {
|
|
getVerifyUrl({ enterpriseId: this.$store.state.supplierInfo.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,
|
|
loginGo2,
|
|
// 获取纸盘商订单统计
|
|
getStatistics() {
|
|
if (!this.hasLogin) {
|
|
return
|
|
}
|
|
let beginDate = this.tradeDate.split('~')[0] || ''
|
|
let endDate = this.tradeDate.split('~')[1] || ''
|
|
// 供应商id
|
|
let currentSupplier = this.$store.state.supplierInfo.supplierId
|
|
getOrderStatistics({
|
|
beginDate,
|
|
endDate,
|
|
currentSupplier
|
|
}).then((res) => {
|
|
console.log('res', res)
|
|
if (res) {
|
|
this.tradeData = res
|
|
}
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
tradeDate(val) {
|
|
console.log('val:', val)
|
|
},
|
|
'$store.state.supplierInfo.supplierId': {
|
|
handler(val) {
|
|
console.log('切换了供应商:', val)
|
|
if (val) {
|
|
this.getStatistics()
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
tradeDate() {
|
|
this.getStatistics()
|
|
}
|
|
},
|
|
computed: {
|
|
hasLogin() {
|
|
return this.$store.state.qnToken != ''
|
|
},
|
|
isVip() {
|
|
return this.$store.state.supplierInfo.isVip == true
|
|
},
|
|
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() {
|
|
return {
|
|
avatar: this.$store.state.userInfo.avatar || '',
|
|
name: this.$store.state.userInfo.name || this.$store.state.userInfo.mobile || '',
|
|
supplierName: this.$store.state.supplierInfo.name || '',
|
|
fddEnterpriseStatus: this.$store.state.supplierInfo.fddEnterpriseStatus || 1
|
|
}
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
this.hasLogin &&
|
|
getBaseInfo({}, true).then((res) => {
|
|
if (res) {
|
|
this.companyNum = res.enterpriseList?.length || 1
|
|
}
|
|
})
|
|
this.hasLogin && this.getStatistics()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 750rpx;
|
|
overflow: hidden;
|
|
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: flex-start;
|
|
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: 40rpx;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
margin-right: 16rpx;
|
|
word-break: break-all;
|
|
}
|
|
.image {
|
|
width: 100rpx;
|
|
height: 32rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
.operation {
|
|
z-index: 5;
|
|
margin-top: 18rpx;
|
|
margin-left: 20rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
.box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-bottom: 36rpx;
|
|
.container {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
margin-right: 26rpx;
|
|
position: relative;
|
|
.number {
|
|
position: absolute;
|
|
top: -12rpx;
|
|
right: -12rpx;
|
|
// width:32rpx;
|
|
// height: 32rpx;
|
|
padding: 6rpx 10rpx;
|
|
background-color: #f5222d;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.text {
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.vip-area {
|
|
z-index: 5;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 686rpx;
|
|
height: 90rpx;
|
|
margin: 0 32rpx;
|
|
background-image: linear-gradient(90deg, #333333 0%, #696c6b 99%);
|
|
border-radius: 10rpx;
|
|
.vip-content {
|
|
width: 686rpx;
|
|
padding: 18rpx 24rpx 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.text {
|
|
font-size: 26rpx;
|
|
color: #dbc189;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.center {
|
|
font-size: 24rpx;
|
|
color: #e7e1be;
|
|
font-weight: 600;
|
|
}
|
|
.right {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 128rpx;
|
|
height: 44rpx;
|
|
border-radius: 14rpx;
|
|
background-image: linear-gradient(90deg, #f4edce 1%, #f3d99e 98%);
|
|
.text {
|
|
font-size: 24rpx;
|
|
color: #443015;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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: 20rpx 20rpx 30rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.order-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.value {
|
|
font-size: 36rpx;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-weight: 500;
|
|
}
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.icon-area {
|
|
padding: 40rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.icon-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 140rpx;
|
|
margin-bottom: 36rpx;
|
|
.icon {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.time-range {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|