hlm_pl_mall_store/pages/seller/index/Index.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="true">
    <title-header />
    <view class="div container">
        <view class="div top-wrapper">
            <view class="div nav-item left-nav-item" @click="goSettingIndex">
                <image mode="aspectFit" src="../../../static/image/seller/icon_setting_nor.png" class="img nav-icon">
            </view>
            <view class="div nav-item right-nav-item" @click="goNews()">
                <image mode="aspectFit" src="../../../static/image/seller/icon_news_nor.png" class="img nav-icon">
                <text class="span" v-if="0"></text>
            </view>
            <view class="div top-info-wrapper">
                <view class="div avatar-wrapper" @click="goSettingIndex">
                    <image mode="aspectFit" class="img avatar" v-bind:src="store_info.store_avatar" v-if="isOnline && store_info"/>
                </view>
                <label class="sellername" @click="goSettingIndex">{{sellername}}</label>
            </view>
        </view>
        <flex-line class="div order-header" :is-link="true" @click.native="goSellerorder('')">
            <text class="span">订单管理</text>
            <text class="span" slot="right">查看全部订单</text>
        </flex-line>
        <view class="div order-wrapper">
            <index-order-item
                    class="order-item"
                    v-on:onclick="goSellerorder('state_new')"
                    :src="require('../../../static/image/seller/icon_pay_seller_nor.png')"
                    title="待付款"
                    :orderNumber = 'seller_info.order_nopay_count'>
            </index-order-item>
            <index-order-item
                    class="order-item"
                    v-on:onclick="goSellerorder('state_pay')"
                    :src="require('../../../static/image/seller/icon_good_seller_nor.png')"
                    title="待发货"
                    :orderNumber = 'seller_info.order_noship_count'>
            </index-order-item>
            <index-order-item
                    class="order-item"
                    v-on:onclick="goSellerorder('state_send')"
                    :src="require('../../../static/image/seller/icon_consignee_seller_nor.png')"
                    title="待收货"
                    :orderNumber = 'seller_info.order_noreceipt_count'>
            </index-order-item>
        </view>
        <view class="div manage-wrapper mt-5">
            <index-manage-item
                    v-on:onclick="goGoodsonline"
                    :src="require('../../../static/image/seller/icon_goods_seller_nor.png')"
                    title="商品管理">
            </index-manage-item>
            <index-manage-item
                    v-on:onclick="goGoodsclass"
                    :src="require('../../../static/image/seller/icon_classify_seller_pre.png')"
                    title="店铺分类">
            </index-manage-item>
            <index-manage-item
                    v-on:onclick="goGoodsspec"
                    :src="require('../../../static/image/seller/icon_specifications_seller_pre.png')"
                    title="商品规格">
            </index-manage-item>
            <index-manage-item
                    v-if="seller && !seller.is_platform_store"
                    v-on:onclick="goMoney"
                    :src="require('../../../static/image/seller/icon_capital_seller_pre.png')"
                    title="店铺资金">
            </index-manage-item>
            <index-manage-item
                    v-if="seller && !seller.is_platform_store"
                    v-on:onclick="goDeposit"
                    :src="require('../../../static/image/seller/icon_deposit_seller_pre.png')"
                    title="店铺保证金">
            </index-manage-item>
            <index-manage-item
                    v-on:onclick="goVrorder"
                    :src="require('../../../static/image/seller/icon_order_seller_pre.png')"
                    title="虚拟订单">
            </index-manage-item>
            <index-manage-item
                    v-on:onclick="goSellerbill"
                    :src="require('../../../static/image/seller/icon_settle_seller_pre.png')"
                    title="结算管理">
            </index-manage-item>
            <index-manage-item
                    v-on:onclick="goSellerRefundList(1)"
                    :src="require('../../../static/image/seller/icon_refunds_seller_pre.png')"
                    title="退款管理">
            </index-manage-item>
            <index-manage-item
                    v-on:onclick="goSellerRefundList(2)"
                    :src="require('../../../static/image/seller/icon_refund_seller_pre.png')"
                    title="退货管理">
            </index-manage-item>
            <index-manage-item
                    v-on:onclick="goSellerChatList"
                    :src="require('../../../static/image/seller/icon_chat_seller_pre.png')"
                    title="聊天列表">
            </index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerChainList"
			        :src="require('../../../static/image/seller/icon_shop_seller_nor.png')"
			        title="门店管理">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerEvaluateList"
			        :src="require('../../../static/image/seller/icon_judge_seller_nor.png')"
			        title="评价管理">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerLiveApplyList"
			        :src="require('../../../static/image/seller/icon_live_seller_nor.png')"
			        title="直播管理">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerComplainList"
			        :src="require('../../../static/image/seller/icon_letterseller__nor.png')"
			        title="投诉管理">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goConsult"
			        :src="require('../../../static/image/seller/icon_consult_seller_nor.png')"
			        title="咨询管理">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goAccount"
			        :src="require('../../../static/image/seller/icon_person_seller_nor.png')"
			        title="子账户管理">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerInviter"
			        :src="require('../../../static/image/seller/icon_retail_nor.png')"
			        title="店铺分销">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerStatisticsGeneral"
			        :src="require('../../../static/image/seller/icon_count_seller_nor.png')"
			        title="店铺概况统计">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerVoucherList"
			        :src="require('../../../static/image/seller/icon_vouchers_nor.png')"
			        title="代金券管理">
			</index-manage-item>
			<index-manage-item
			        v-on:onclick="goSellerCostList"
			        :src="require('../../../static/image/seller/icon_dianpuxiaofei_pre.png')"
			        title="店铺消费">
			</index-manage-item>
        </view>
    </view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
  import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'

import SellerBase from '../SellerBase'
import IndexOrderItem from './IndexOrderItem'
import IndexManageItem from './IndexManageItem'
import flexLine from '../../flexLine'
import { getSellerInfo } from '../../../api/seller'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Index',
  data () {
    return {
      store_info: {},
      seller_info: {},
      statics: {}
    }
  },
  components:{
    TitleHeader,
    flexLine,
    SellerBase,
    IndexManageItem,
    IndexOrderItem
  },
  created: function () {
    this.fetchConfig({})
    if (this.isOnline) {
      getSellerInfo().then(response => {
        if (response && response.result) {
          this.seller_info = response.result.seller_info
          this.store_info = response.result.store_info
          this.statics = response.result.statics
        }
      }
      ).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      isOnline: state => state.seller.isOnline,
      seller: state => state.seller.info,
      config: state => state.config.config
    }),
    sellername () {
      let title = '登录/注册'
      if (this.isOnline) {
        if (this.seller && typeof this.seller !== 'undefined' && JSON.stringify(this.seller) !== '{}') {
          title = this.seller.seller_name
        }
      }
      return title
    }
  },
  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },
    ...mapMutations({
      memberUpdate: 'memberUpdate'
    }),
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    showLogin () {
      uni.navigateTo({url:'/pages/home/sellerlogin/Login'})
    },
    // 店铺资金 普通店铺显示
    goMoney () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/money/Index'})
      } else {
        this.showLogin()
      }
    },
    // 店铺保证金 普通店铺显示
    goDeposit () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/deposit/Index'})
      } else {
        this.showLogin()
      }
    },
    // 店铺设置
    goSettingIndex () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/setting/Index'})
      } else {
        this.showLogin()
      }
    },
    // 投诉
    goSellerComplainList(){
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/complaint/ComplaintList'})
      } else {
        this.showLogin()
      }
    },
    // 直播
    goSellerLiveApplyList () {
      if (this.isOnline) {
        if (this.config.live_type == 1) {
          uni.navigateTo({url:'/pages/seller/minipro_live/MiniproLiveList'})
        } else {
          uni.navigateTo({url:'/pages/seller/live_apply/LiveApplyList'})
        }
      } else {
        this.showLogin()
      }
    },
    goNews () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/notice/NoticeList'})
      } else {
        this.showLogin()
      }
    },
    goSellerChainList () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/chain/ChainList'})
      } else {
        this.showLogin()
      }
    },
    // 子账户管理
    goAccount () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/account/Index'})
      } else {
        this.showLogin()
      }
    },
    // 商品管理
    goGoodsonline () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/goods/Goodsonline'})
      } else {
        this.showLogin()
      }
    },
    // 商家聊天列表
    goSellerChatList () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/chat/ChatList'})
      } else {
        this.showLogin()
      }
    },
    // 订单列表
    goSellerorder (state) {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/order/OrderList'+'?'+urlencode({ state: state })})
      } else {
        this.showLogin()
      }
    },
    // 退款管理
    goSellerRefundList (refundType) {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/refund/RefundList'+'?'+urlencode({ refund_type: refundType })})
      } else {
        this.showLogin()
      }
    },
    // 评价管理
    goSellerEvaluateList () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/evaluate/EvaluateList'})
      } else {
        this.showLogin()
      }
    },

    // 订单结算
    goSellerbill () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/bill/BillList'})
      } else {
        this.showLogin()
      }
    },
    // 店铺统计
    goSellerStatisticsGeneral () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/statisticsgeneral/Index'})
      } else {
        this.showLogin()
      }
    },
    // 咨询管理
    goConsult () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/consult/ConsultList'})
      } else {
        this.showLogin()
      }
    },
    // 商品规格
    goGoodsspec () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/spec/Index'})
      } else {
        this.showLogin()
      }
    },
    // 店铺分类
    goGoodsclass () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/goodsclass/GoodsClassList'})
      } else {
        this.showLogin()
      }
    },
    // 虚拟订单
    goVrorder () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/vrorder/OrderList'})
      } else {
        this.showLogin()
      }
    },
    // 店铺分销
    goSellerInviter () {
      if (this.isOnline) {
        uni.navigateTo({url:'/pages/seller/inviter/Index'})
      } else {
        this.showLogin()
      }
    },
	// 代金券管理
	goSellerVoucherList () {
	  if (this.isOnline) {
	    uni.navigateTo({url:'/pages/seller/voucher/VoucherList'})
	  } else {
	    this.showLogin()
	  }
	},
	// 店铺消费
	goSellerCostList () {
	  if (this.isOnline) {
	    uni.navigateTo({url:'/pages/seller/cost/CostList'})
	  } else {
	    this.showLogin()
	  }
	  
	}
  }

}
</script>

<style scoped lang='scss'>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        background-color: #f0f2f5;
    .top-wrapper {
        position:relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        height:8rem;
        background: linear-gradient(90deg,#f01414,#f01414);
    .top-info-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    }
    .nav-item {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top:0.5rem;
    .span {
        width:0.4rem;
        height:0.4rem;
        background-color: #f0f2f5;
        border-radius: 50%;
        position: absolute;
        top:0.5rem;
        right: 0.5rem;
    }
    }
        .left-nav-item {
            left: 0.5rem;
        }
        .right-nav-item {
            right: 0.5rem;
        }
        .nav-icon {
            width: 1.3rem;
            height: 1.3rem;
            text-align: center;
            color: #fff;
        }
    .avatar-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width:4rem;
        height:4rem;
        border-radius:50%;
        background-color: #fff;
        margin-top:1rem;
    .avatar {
        width:3.6rem;
        height:3.6rem;
        border-radius:50%;
    }
    }
    .sellername {
        width: 100%;
        margin-top:.5rem;
        font-size:$h2;
        color:rgba(255,255,255,1);
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }
    .info-wrapper {
        width: 100%;
        height: 2rem;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        align-content: stretch;
        background-color: rgba(0, 0, 0, 0.1);
    }
    .info-item {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size:$h2;
    }
    .order-header {
        background-color: #fff;
        padding:0 $pageSpace;
    }
    .order-wrapper {
        height:4rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        background-color: #fff;
    }
    .order-item {
        flex: 1;
    }
        .bottom-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin-bottom:2rem;
			padding: 0 $pageSpace;
			background-color: #fff;
		}
		.item-icon{
		  width:1.2rem;
		  height:1.2rem;
		  margin-right: .4rem;
		}
		
        .manage-wrapper{background:#fff;}
    }
</style>