mall_client/zyhs3_uniapp/pages/merchants/home.vue

533 lines
17 KiB
Vue

<template>
<view>
<view :style="{paddingTop: statusBarHeight + 'px'}" class="top-bg">
<image :src="storeInfo.backgroundImage" mode="aspectFill" class="bj"></image>
<view class="mask bj"></view>
<view
class="header flex flex-between"
@click="toNav('view')">
<view class="flex flex-grow" style="justify-content: space-between;">
<view class="flex flex-align-center">
<view>
<image :src="storeInfo.logoImage" mode="" class="avatar"></image>
</view>
<view class="flex flex-column">
<view class="flex flex-align-center">
<text class="font38 line">{{storeInfo.name}}</text>
</view>
<text class="font26 line">{{storeInfo.introduce}}</text>
</view>
</view>
</view>
<text class="iconfont blod font48">&#xe770;</text>
</view>
</view>
<view class="list">
<view class="list-item flex flex-between bg-w" @click="toNav('/pages/user/wallet/index?type=3&assetAccount=' + myAssetObj.assetAccount || 0)">
<view class="flex flex-align-center">
<text class="font30 blod">商家货款钱包</text>
</view>
<view class="flex flex-align-center color-b6">
<text class="font30">{{ myAssetObj.assetAccount || 0 }}</text>
<text class="iconfont font40">&#xe770;</text>
</view>
</view>
</view>
<view class="flex flex-align-end flex-space-around padding-20 margin-b-10 ">
<u-button text="收取货款" @click="jumpTo('withdrawal')"></u-button>
<u-button text="收取记录" @click="jumpTo('withdrawalRecord')"></u-button>
</view>
<view class="con">
<view class="culist" @click="toNav('collection/index')">
<!-- <view class="title flex flex-between">
<text class="blod font32">收款</text>
<text class="iconfont icon">&#xe770;</text>
</view> -->
<view class="flex flex-column pad">
<view class="grod">
<view class="grod-item" @click="toNav('/pages/merchants/collection/list?type=1')">
<text class="font48" style="color: #f53b58;">{{collectionData.inAGroupOrder || 0}}</text>
<text class="color-b5 font26">当日交易额</text>
</view>
<view class="grod-item" @click="toNav('/pages/merchants/collection/list?type=2')">
<text class="font48" style="color: #f53b58;">{{collectionData.confirmReceipt || 0}}</text>
<text class="color-b5 font26">当日确认</text>
</view>
<view class="grod-item" @click="toNav('/pages/merchants/collection/list?type=3')">
<text class="font48" style="color: #f53b58;">{{collectionData.turnoverTotal || 0}}</text>
<text class="color-b5 font26">累计销售额</text>
</view>
</view>
</view>
</view>
</view>
<view class="con">
<view class="culist">
<view class="title flex flex-between">
<text class="blod font32">商品订单</text>
</view>
<view class="flex flex-column pad">
<view class="grod flex flex-between">
<view class="grod-item" v-for="(item, i) in orderList" :key="i" style="width: 20%;" @click="jumpToOrder(item, null)">
<text class="iconfont icon" v-if="i === 0">&#xe68f;</text>
<text class="iconfont icon" v-if="i === 1">&#xe62e;</text>
<text class="iconfont icon" v-if="i === 2">&#xe651;</text>
<text class="iconfont icon" v-if="i === 3">&#xe631;</text>
<text class="iconfont icon" v-if="i === 4">&#xe60a;</text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total" style="left: 80rpx;">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view>
<view class="culist" v-if="false">
<view class="title flex flex-between">
<text class="blod font32">拼团订单</text>
</view>
<view class="flex flex-column pad">
<view class="grod">
<view class="grod-item" v-for="(item, i) in collateList" :key="i" style="width: 50%;" @click="jumpToOrder(item, 6)">
<text class="iconfont icon" v-if="i === 0">&#xe68f;</text>
<text class="iconfont icon" v-if="i === 1">&#xe62e;</text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total" style="left: 180rpx">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view>
<view class="culist">
<view class="title flex flex-between">
<text class="blod font32">物流配送订单</text>
</view>
<view class="flex flex-column pad">
<view class="grod">
<view class="grod-item" v-for="(item, i) in logisticsList" :key="i" @click="jumpToOrder(item, 1)">
<text class="iconfont icon" v-if="i === 0">&#xe63a;</text>
<text class="iconfont icon" v-if="i === 1">&#xe636;</text>
<text class="iconfont icon" v-if="i === 2">&#xe71a;</text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view>
<view class="culist">
<view class="title flex">
<text class="blod font32">到店体验</text>
</view>
<view class="flex flex-column pad">
<view class="grod flex-space-around">
<view class="grod-item" v-for="(item, i) in onStoreList" :key="i" @click="jumpToOrder(item, 5)">
<text class="zyhs zyhs-daishiyong icon" v-if="i === 0"></text>
<text class="zyhs zyhs-yishiyong icon" v-if="i === 1"></text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view>
<view class="culist" v-if="false">
<view class="title flex flex-between">
<text class="blod font32">商家配送订单</text>
</view>
<view class="flex flex-column pad">
<view class="grod">
<view class="grod-item" v-for="(item, i) in businessList" :key="i" @click="jumpToOrder(item, 2)">
<text class="iconfont icon" v-if="i === 0">&#xe633;</text>
<text class="iconfont icon" v-if="i === 1">&#xe632;</text>
<text class="iconfont icon" v-if="i === 2">&#xe634;</text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view>
<!-- <view class="culist">
<view class="title flex flex-between">
<text class="blod font32">平台配送订单</text>
</view>
<view class="flex flex-column pad">
<view class="grod">
<view class="grod-item" v-for="(item, i) in platformList" :key="i" style="width: 25%;" @click="jumpToOrder(item, 4)">
<text class="iconfont icon" v-if="i === 0">&#xe629;</text>
<text class="iconfont icon" v-if="i === 1">&#xe610;</text>
<text class="iconfont icon" v-if="i === 2">&#xe632;</text>
<text class="iconfont icon" v-if="i === 3">&#xe634;</text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total" style="left: 100rpx;">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view> -->
<view class="culist" v-if="false">
<view class="title flex flex-between">
<text class="blod font32">用户自提订单</text>
</view>
<view class="flex flex-column pad">
<view class="grod">
<view class="grod-item" v-for="(item, i) in extractionList" :key="i" style="width: 50%;" @click="jumpToOrder(item, 3)">
<text class="iconfont icon" v-if="i === 0">&#xe612;</text>
<text class="iconfont icon" v-if="i === 1">&#xe6e8;</text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total" style="left: 190rpx;">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="list" @click="jumpToOrder(null, 5)">
<view class="list-item flex flex-between bg-w">
<view class="flex flex-align-center">
<text class="font30 blod">到店体验订单<text v-if="noDeliveryRequired">({{noDeliveryRequired}})</text></text>
</view>
<view class="flex flex-align-center color-b6">
<text class="iconfont font40">&#xe770;</text>
</view>
</view>
</view> -->
<view class="con">
<view class="culist">
<view class="title flex flex-between" @click="jumpToGoods(null)">
<text class="blod font32">所有商品<text v-if="goodsTotalInfo.allProducts">({{goodsTotalInfo.allProducts}})</text></text>
<text class="iconfont icon">&#xe770;</text>
</view>
<view class="flex flex-column pad">
<view class="grod">
<view class="grod-item" v-for="(item, i) in goodsList" :key="i" style="width: 20%;" @click="jumpToGoods(item)">
<text class="iconfont icon" v-if="i === 0">&#xe63f;</text>
<text class="iconfont icon" v-if="i === 1">&#xe641;</text>
<text class="iconfont icon" v-if="i === 2">&#xe69a;</text>
<text class="iconfont icon" v-if="i === 3">&#xe63e;</text>
<text class="iconfont icon" v-if="i === 4">&#xe645;</text>
<text class="color-b5 font26">{{item.name}}</text>
<text class="tips" v-if="item.total" style="left: 80rpx;">{{item.total>99?'99+':item.total}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="cell bg-w">
<view class="flex flex-between item" @click="toNav('goods/add')">
<text class="label">添加商品</text>
<text class="iconfont icon">&#xe770;</text>
</view>
<view class="flex flex-between item" @click="toNav('class/index')">
<text class="label">商品分类<text v-if="goodsTotalInfo.classification">({{goodsTotalInfo.classification}})</text></text>
<text class="iconfont icon">&#xe770;</text>
</view>
<!-- <view class="flex flex-between item" @click="toNav('coupon/index')">
<text class="label">优惠券<text v-if="goodsTotalInfo.discount">({{goodsTotalInfo.discount}})</text></text>
<text class="iconfont icon">&#xe770;</text>
</view> -->
<view class="flex flex-between item" @click="toNav('cupboard')">
<text class="label">橱柜展示</text>
<text class="iconfont icon">&#xe770;</text>
</view>
<view class="flex flex-between item" @click="toNav('/pages/user/address/index?type=2')">
<text class="label">发货地址</text>
<text class="iconfont icon">&#xe770;</text>
</view>
<view class="flex flex-between item" @click="toNav('attestation')">
<text class="label">认证信息</text>
<text class="iconfont icon">&#xe770;</text>
</view>
</view>
<view style="height: 100rpx;"></view>
</view>
</template>
<script>
const curDate = new Date().getTime();
import url from "@/common/http/url.js"
import selectOptions from "@/common/utils/selectOptions.js"
let options = JSON.parse(JSON.stringify(selectOptions))
import { mapState } from 'vuex';
import dayjs from 'dayjs';
const nowDate = dayjs(curDate).format("YYYY-MM-DD")
console.log(nowDate)
export default{
data(){
return {
statusBarHeight: getApp().statusBarHeight,
storeInfo: {},
// 物流
logisticsList: options.logisticsList,
// 商家
businessList: options.businessList,
// 平台
platformList: options.platformList,
// 自提
extractionList: options.extractionList,
// 订单
orderList: options.merchantsOrderList,
// 到店体验订单总数
noDeliveryRequired: 0,
// 到店体验到店
onStoreList: options.onStoreList,
// 商品
goodsList: options.goodsStatusList,
collateList: options.collateList,
walletData: {},
goodsTotalInfo: {},
collectionData: {},
myAssetObj: {
assetAccount: 0
}
}
},
onShow() {
this.init();
this.getMyAsset();
},
onPullDownRefresh() {
this.init()
},
computed: {
...mapState(["userInfo", "myAsset"])
},
methods:{
jumpTo(path) {
console.log('path', path)
if (path == 'withdrawal') {
this.$navigateTo('/pages/user/wallet/withdrawal'+'?type=3' + '&assetAccount=' + this.myAssetObj.assetAccount)
} else this.$navigateTo('/pages/user/wallet/withdrawalRecord'+'?type=3')
},
getMyAsset () {
this.myAsset.forEach((item) => {
if (item.assetType == 6) this.myAssetObj = item;
})
},
init(){
this.getInfo()
this.getCollectionToday()
this.getWallet()
this.getGoodsTotal()
},
getInfo(){
this.$http("GET", url.store.getStoreInfo).then(res=>{
this.storeInfo = res.data || {}
this.getOrderTotal()
})
},
getCollectionToday(){
this.$http("GET", url.store.getStaoreCount, {
startTime: nowDate + ' 00:00:00',
endTime: nowDate + ' 23:59:59'
}).then(res=>{
this.collectionData = res.data || {}
})
},
getWallet(){
this.$http("GET", url.store.getWalletInfo).then(res=>{
this.walletData = res.data || {}
})
},
getOrderTotal(){
console.log('获取商家订单数量')
this.$http("GET", url.store.getOrderAmount).then(res =>{
uni.stopPullDownRefresh()
let data = res.data
// 到店体验
this.onStoreList[0].total = data.deliveryStoreUnused
this.onStoreList[1].total = data.deliveryStoreUsed
// 物流
this.logisticsList[0].total = data.logisticsToBeDelivered
this.logisticsList[1].total = data.logisticsDelivered
this.logisticsList[2].total = data.logisticsConfirmed
// 商家
this.businessList[0].total = data.businessToBeDelivered
this.businessList[1].total = data.businessDelivery
this.businessList[2].total = data.businessDelivered
// 平台
this.platformList[0].total = data.platformWaitingForDelivery
this.platformList[1].total = data.platformPickingUp
this.platformList[2].total = data.platformPickedUp
this.platformList[3].total = data.platformDelivered
// 自提
this.extractionList[0].total = data.raisingToBePickedUp
this.extractionList[1].total = data.raisingPickedUp
// 无需配送
this.noDeliveryRequired = data.noDeliveryRequired
// 订单
this.orderList[0].total = data.waitingForPayment
this.orderList[1].total = data.toBeEvaluated
this.orderList[2].total = data.completed
// this.orderList[3].total = data.refunded
this.orderList[3].total = data.overtimeClosing
// 拼团
this.collateList[0].total = data.inAGroupOrder
this.collateList[1].total = data.successAGroupOrder
this.$forceUpdate()
})
},
getGoodsTotal(){
this.$http("GET", url.store.storeInitStatistics).then(res => {
let data = res.data
this.goodsTotalInfo = data
this.goodsList[0].total = data.onTheShelves
this.goodsList[1].total = data.onTheShelf
this.goodsList[2].total = data.underReview
this.goodsList[3].total = data.auditFailure
this.goodsList[4].total = data.violation
this.$forceUpdate()
})
},
jumpToOrder(row, method){
let path = ""
if (!method){
path = 'order/index?status='
} else {
if (method === 5) { // 无需配送
path = 'order/index?deliveryMethod='+method + '&status='
} else {
path = 'order/index?deliveryMethod='+method+"&&deliveryStatus="
}
}
this.$navigateTo(path+(row ? row.value : ""))
},
jumpToGoods(row){
let path = "goods/list"
if (row) {
path = path + "?status=" + row.value
}
this.toNav(path)
},
toNav(path){
this.$navigateTo(path)
}
}
}
</script>
<style scoped lang="scss">
.top-bg{
// background-repeat: no-repeat;
// background-size: 100% 100%;
// padding: 80rpx 50rpx 0;
background-color: white;
position: relative;
width: 750rpx;
height: 300rpx;
.bj{
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mask{
background: linear-gradient(to top, #ffffff 0%, rgba($color: #ffffff, $alpha: .2) 100%);
}
}
.header{
height: 200rpx;
position: absolute;
bottom: 0rpx;
left: 30rpx;
right: 30rpx;
.avatar{
width: 150rpx;
height: 150rpx;
background-color: white;
border-radius: 50%;
margin-right: 30rpx;
}
}
.cell{
margin: 20rpx;
padding: 20rpx 20rpx 50rpx;
border-radius: 20rpx;
.item{
margin-top: 40rpx;
.label{
font-size: 32rpx;
color: #333;
}
.icon{
color: #666;
font-size: 38rpx;
}
}
}
.list{
margin-bottom: 20rpx;
// padding: 0 20rpx;
&-item{
height: 110rpx;
padding: 0 30rpx;
// border-radius: 14rpx;
margin-bottom: 10rpx;
.icon{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
}
.con{
padding: 0 20rpx;
.culist{
background-color: white;
border-radius: 16rpx;
padding-top: 20rpx;
margin-bottom: 20rpx;
.title{
padding: 0 30rpx;
border-bottom: 2rpx solid #eee;
padding-bottom: 20rpx;
}
.pad{
padding: 30rpx 0;
}
.grod{
border-radius: 14rpx;
display: flex;
flex-wrap: wrap;
&-item{
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
.img{
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
.icon{
font-size: 56rpx;
color: #f53b58;
// margin-bottom: 10rpx;
}
.tips{
position: absolute;
left: 120rpx;
top: -20rpx;
color: white;
font-size: 24rpx;
padding: 0 14rpx;
border-radius: 50rpx;
z-index: 9;
background-color: #CA0400;
}
}
&-item text:last-child{
margin-top: 10rpx;
}
}
}
}
</style>