【前端】云工厂的纸掌柜app
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.

668 lines
19 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: 30rpx">
<text
style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all"
@click="loginGo2(hasCompany ? 'enterprise-info-edit' : 'enterprise-info')"
>
{{ hasCompany ? userInfo.supplierName : '点击完善企业信息' }}
</text>
</view>
</view>
</view>
<view class="operation">
<view class="box" v-if="hasLogin">
<view class="container" v-if="hasCompany" @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">{{ isVip ? `到期时间:${vipExpireTime}` : '立即开通会员 尊享特权' }}</text>
<view class="right" @click="makeVip">
<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" @click="loginGo2('trade')">
<image class="icon" src="/static/imgs/mine/order-icon.png"></image>
<text class="label">订单管理</text>
</view>
<view class="icon-item" @click="handleJump('credit-order-list')">
<image class="icon" src="/static/imgs/mine/finance-icon.png"></image>
<text class="label">账期订单融资</text>
</view>
<view class="icon-item" @click="handleJump('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-record.png"></image>
<text class="label">授信记录</text>
</view>
<view class="icon-item" @click="loginGo2('my-client')">
<image class="icon" src="/static/imgs/mine/my-client.png"></image>
<text class="label">客户列表</text>
</view>
<view class="icon-item" @click="loginGo2('my-receipt-code')">
<image class="icon" src="/static/imgs/mine/my-receipt-code.png"></image>
<text class="label">收款码</text>
</view>
<view class="icon-item" @click="setMerchant">
<image class="icon" src="/static/imgs/mine/merchant-icon.png"></image>
<text class="label">特约商户</text>
</view>
<!-- <view
class="icon-item"
@click="
go2('page-view', {
url: 'http://192.168.12.58:5500/'
})
"
>
<image class="icon" src="/static/imgs/mine/my-receipt-code.png"></image>
<text class="label">收款码</text>
</view> -->
</view>
</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 { 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 {
data() {
return {
customerServicer: '17606507108',
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.hasCompany) {
uni.showToast({
title: '您还没有企业信息,请先完善企业信息',
icon: 'none'
})
return
}
if (
this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED ||
this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL ||
this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_ING
) {
getVerifyUrl({ enterpriseId: this.$store.state.supplierInfo.id }).then((res) => {
if (res) {
// #ifdef APP-PLUS
go2('page-view', { title: '实名认证', url: encodeURIComponent(res) })
// #endif
// #ifdef H5
if (window) {
window.location.href = res
}
// #endif
}
})
}
},
go2,
loginGo2,
handleJump(page) {
if (!this.hasCompany) {
uni.showToast({
title: '您还没有企业,请先加入企业',
icon: 'none'
})
return
}
loginGo2(page)
},
makeVip() {
if (this.hasCompany) {
loginGo2('vip-center')
} else {
uni.showToast({
title: '请先完善企业信息',
icon: 'none'
})
}
},
// 复制客服手机号
copyPhone() {
uni.setClipboardData({
data: this.customerServicer,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'none',
duration: 2000
})
}
})
},
// 获取纸盘商订单统计
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
}
})
},
setMerchant() {
if (!this.hasCompany) {
uni.showModal({
title: '提示',
content: '您还没有企业信息,请先完善企业信息',
success: (res) => {
if (res.confirm) {
loginGo2('enterprise-info')
}
}
})
return
}
loginGo2('merchant-list')
}
},
watch: {
'$store.state.supplierInfo.supplierId': {
handler(val) {
console.log('切换了供应商:', val)
if (val) {
this.getStatistics()
}
},
immediate: true
},
tradeDate() {
this.getStatistics()
},
hasLogin(val) {
if (!val) {
// 重置数据
this.tradeData = {
tradingVolume: 0,
volumeOfBusiness: 0,
orderQuantity: 0
}
}
}
},
computed: {
vipExpireTime() {
if (this.$store.state.supplierInfo.vipExpireTime) {
return this.$store.state.supplierInfo.vipExpireTime.substr(0, 10)
}
return ''
},
hasLogin() {
return this.$store.state.qnToken != ''
},
isVip() {
return this.$store.state.supplierInfo.isVip
},
hasCompany() {
return this.$store.state.supplierInfo.id != null
},
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
}
}
},
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: flex-start;
flex-wrap: wrap;
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 154rpx;
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;
}
.vip-top {
width: 560rpx;
height: 268rpx;
background-color: #ff883b;
padding: 54rpx 20rpx;
.text {
font-size: 40rpx;
color: #ffffff;
line-height: 72rpx;
}
}
.button {
width: 250rpx;
height: 70rpx;
background: #ff5550;
border-radius: 34rpx;
margin: 40rpx 0;
.text {
font-size: 34rpx;
color: #ffffff;
}
}
</style>