shangmenanmo/agent/pages/index.vue

<template>
	<view class="agent-index" v-if="isLoad">
		<block v-if="options.agent">
			<view class="mine-count-list c-base pd-lg radius-16" :style="{background:primaryColor}">
				<view class="flex-between">
					<view>
						<view class="text flex-center f-caption">可提现(元)</view>
						<view class="f-sm-title">{{detail.cash}} </view>
					</view>
					<view @tap.stop="$util.goUrl({url:`/user/pages/cash-out?type=agent`})"
						class="cash-out-btn fill-base flex-center f-desc text-bold radius"
						:style="{color: primaryColor}">
						我要提现
					</view>
				</view>
				<view class="count-data-list flex-x-center mt-lg pt-lg b-1px-t">
					<view class="list-item flex-center flex-column">
						<view class="f-sm-title">{{detail.total_cash}}</view>
						<view class="text f-caption c-caption">总金额 (元)</view>
					</view>
					<view class="list-item flex-center flex-column">
						<view class="f-sm-title">{{detail.unrecorded_cash}}</view>
						<view @tap.stop="$refs.show_rule_item.open()" class="text flex-center f-caption c-caption">未入账
							(元)<i class="iconfont iconshuyi_shuoming ml-sm"></i></view>
					</view>
				</view>
			</view>

			<view @tap.stop="$util.goUrl({url:`/user/pages/distribution/bind-technician`})"
				class="mine-menu-list share flex-center fill-base radius-16">
				<view class="icon-info flex-center">
					<i class="iconfont iconjishi1" :style="{color:primaryColor}"></i>
				</view>
				<view class="flex-1">
					<view class="f-mini-title c-title text-bold">绑定{{$t('action.attendantName')}}</view>
					<view class="f-desc c-caption mt-sm ellipsis">整合自己的{{$t('action.attendantName')}}资源,获取分润</view>
				</view>
				<view class="share-btn flex-center f-desc c-base text-bold" :style="{background:primaryColor}">邀请Ta
				</view>
			</view>
		<!-- 	<view @tap.stop="$util.goUrl({url:`/agent/pages/poster/salesman`})"
				class="mine-menu-list share flex-center fill-base radius-16" v-if="detail.salesman_auth">
				<view class="icon-info flex-center">
					<i class="iconfont iconbangdingyewuyuan" :style="{color:primaryColor}"></i>
				</view>
				<view class="flex-1">
					<view class="f-mini-title c-title text-bold">绑定业务员</view>
					<view class="f-desc c-caption mt-sm ellipsis">招揽人才,为自己拓宽渠道</view>
				</view>
				<view class="share-btn flex-center f-desc c-base text-bold" :style="{background:primaryColor}">邀请Ta
				</view>
			</view>
			<view @tap.stop="$util.goUrl({url:`/agent/pages/poster/channel`})"
				class="mine-menu-list share flex-center fill-base radius-16" v-if="detail.channel_auth">
				<view class="icon-info flex-center">
					<i class="iconfont iconbangdingqudaoshang" :style="{color:primaryColor}"></i>
				</view>
				<view class="flex-1">
					<view class="f-mini-title c-title text-bold">绑定渠道商</view>
					<view class="f-desc c-caption mt-sm ellipsis">直招渠道,获利更多</view>
				</view>
				<view class="share-btn flex-center f-desc c-base text-bold" :style="{background:primaryColor}">邀请Ta
				</view>
			</view> -->
		</block>
<!-- 
		<view class="mine-menu-list fill-base radius-16">
			<view class="menu-title flex-between pl-lg pr-sm">
				<view class="f-paragraph c-title text-bold">智能助手</view>
			</view>
			<view @tap.stop="goOrder(index)" class="notice-info flex-center pl-lg pr-md pb-lg"
				v-for="(item,index) in detail.notice" :key="index">
				<view class="title flex-center f-icontext c-base mr-md"
					:style="{background:item.type==1?primaryColor: item.type==2?'#FFA229':'#E82F21'}">
					{{noticeType[item.type].title}}
				</view>
				<view class="flex-1 flex-between f-desc">
					<view class="c-title">{{item.id ? noticeType[item.type].text : '暂无数据'}}</view>
					<view class="flex-y-center c-caption" v-if="item.id">点击查看<i class="iconfont icon-right"></i></view>
				</view>
			</view>
		</view> -->
<!-- 
		<view class="mine-menu-list box-shadow fill-base radius-16" v-if="detail.node.includes('shopOrder')">
			<view class="menu-title flex-between pl-lg pr-sm">
				<view class="f-paragraph c-title text-bold">订单管理</view>
			</view>
			<view class="flex-warp pb-lg">
				<view @tap.stop="toJump('shopOrder', index)"
					class="item-child flex-center flex-column f-caption c-title" v-for="(item, index) in shopOrder"
					:key="index">
					<view class="item-img rel flex-center radius">
						<view class="abs dot-unread-number flex-center"
							:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
							v-if="item.number > 0">
							{{item.number < 100 ? item.number : '99+'}}
						</view>
						<view class="item-img radius abs" :style="{background:primaryColor}"></view>
						<i class="iconfont c-title" :class="item.icon" :style="{color:primaryColor}"></i>
					</view>
					<view class="mt-sm">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="mine-menu-list box-shadow fill-base radius-16" v-if="detail.node.includes('shopBellOrder')">
			<view class="menu-title flex-between pl-lg pr-sm">
				<view class="f-paragraph c-title text-bold">加钟管理</view>
			</view>
			<view class="flex-warp pb-lg">
				<view @tap.stop="toJump('shopBellOrder', index)"
					class="item-child flex-center flex-column f-caption c-title" v-for="(item, index) in shopBellOrder"
					:key="index">
					<view class="item-img rel flex-center radius">
						<view class="abs dot-unread-number flex-center"
							:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
							v-if="item.number > 0">
							{{item.number < 100 ? item.number : '99+'}}
						</view>
						<view class="item-img radius abs" :style="{background:primaryColor}"></view>
						<image mode="heightFix" class="icon-img" :src="item.icon"></image>
					</view>
					<view class="mt-sm">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="mine-menu-list box-shadow fill-base radius-16" v-if="detail.node.includes('shopRefuseOrder')">
			<view class="menu-title flex-between pl-lg pr-sm">
				<view class="f-paragraph c-title text-bold">拒单管理</view>
			</view>
			<view class="flex-warp pb-lg">
				<view @tap.stop="toJump('shopRefuseOrder', index)"
					class="item-child flex-center flex-column f-caption c-title"
					v-for="(item, index) in shopRefuseOrder" :key="index">
					<view class="item-img rel flex-center radius">
						<view class="abs dot-unread-number flex-center"
							:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
							v-if="item.number > 0">
							{{item.number < 100 ? item.number : '99+'}}
						</view>
						<view class="item-img radius abs" :style="{background:primaryColor}"></view>
						<i class="iconfont c-title" :class="item.icon" :style="{color:primaryColor}"></i>
					</view>
					<view class="mt-sm">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="mine-menu-list box-shadow fill-base radius-16" v-if="detail.node.includes('shopRefund')">
			<view class="menu-title flex-between pl-lg pr-sm">
				<view class="f-paragraph c-title text-bold">服务退款</view>
			</view>
			<view class="flex-warp pb-lg">
				<view @tap.stop="toJump('shopRefund', index)"
					class="item-child flex-center flex-column f-caption c-title" v-for="(item, index) in shopRefund"
					:key="index">
					<view class="item-img rel flex-center radius">
						<view class="abs dot-unread-number flex-center"
							:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
							v-if="item.number > 0">
							{{item.number < 100 ? item.number : '99+'}}
						</view>
						<view class="item-img radius abs" :style="{background:primaryColor}"></view>
						<i class="iconfont c-title" :class="item.icon" :style="{color:primaryColor}"></i>
					</view>
					<view class="mt-sm">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="mine-menu-list box-shadow fill-base radius-16" v-if="detail.node.includes('shopBellRefund')">
			<view class="menu-title flex-between pl-lg pr-sm">
				<view class="f-paragraph c-title text-bold">加钟退款</view>
			</view>
			<view class="flex-warp pb-lg">
				<view @tap.stop="toJump('shopBellRefund', index)"
					class="item-child flex-center flex-column f-caption c-title" v-for="(item, index) in shopBellRefund"
					:key="index">
					<view class="item-img rel flex-center radius">
						<view class="abs dot-unread-number flex-center"
							:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
							v-if="item.number > 0">
							{{item.number < 100 ? item.number : '99+'}}
						</view>
						<view class="item-img radius abs" :style="{background:primaryColor}"></view>
						<image mode="heightFix" class="icon-img" :src="item.icon"></image>
					</view>
					<view class="mt-sm">{{ item.text }}</view>
				</view>
			</view>
		</view> -->


		<view class="mine-menu-list fill-base radius-16" v-if="options.agent">
			<view class="menu-title flex-between pl-lg pr-sm">
				<view class="f-paragraph c-title text-bold">其他功能</view>
			</view>
			<view class="flex-warp pb-sm">
				<view @tap.stop="toJump('toolList', index)" class="item-child flex-center flex-column f-caption c-title"
					style="width: 25%;margin:10rpx 0 20rpx 0" v-for="(item, index) in toolList" :key="index">
					<i class="iconfont c-title" :class="item.icon" :style="{color:primaryColor}"></i>
					<view class="mt-sm">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="space-footer"></view>


		<uni-popup ref="show_rule_item" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">未入账</view>
				<view class="f-desc c-title mt-lg">
					平台未到账的服务订单金额
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_rule_item.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				isLoad: false,
				options: {},
				detail: {},
				noticeType: {
					1: {
						title: '订单通知',
						text: '您有新的订单来啦!'
					},
					2: {
						title: '退款通知',
						text: '您有新的客户退款通知!'
					},
					3: {
						title: '拒单通知',
						text: '有' + this.$t('action.attendantName') + '拒单, 请尽快处理!'
					},
				},
				shopOrder: [{
					icon: 'icondaifuwu4',
					text: '待服务',
					url: '/agent/pages/order/list?tab=1',
					key: 2,
					number: 0
				}, {
					icon: 'iconjishijiedan1',
					text: this.$t('action.attendantName') + '接单',
					url: '/agent/pages/order/list?tab=2',
					key: 3,
					number: 0
				}, {
					icon: 'iconjishichufa1',
					text: this.$t('action.attendantName') + '出发',
					url: '/agent/pages/order/list?tab=3',
					key: 4,
					number: 0
				}, {
					icon: 'iconjishidaoda1',
					text: this.$t('action.attendantName') + '到达',
					url: '/agent/pages/order/list?tab=4',
					key: 5,
					number: 0
				}, {
					icon: 'iconanmo2',
					text: '服务中',
					url: '/agent/pages/order/list?tab=5',
					key: 6,
					number: 0
				}, {
					icon: 'iconyiwancheng',
					text: '已完成',
					url: '/agent/pages/order/list?tab=6'
				}],
				shopBellOrder: [{
					icon: 'https://lbqny.migugu.com/admin/anmo/menu/daifuwu.png',
					text: '待服务',
					url: '/agent/pages/order/list?bell=1&tab=1',
					key: 2,
					number: 0
				}, {
					icon: 'https://lbqny.migugu.com/admin/anmo/menu/jiedan.png',
					text: this.$t('action.attendantName') + '接单',
					url: '/agent/pages/order/list?bell=1&tab=2',
					key: 3,
					number: 0
				}, {
					icon: 'https://lbqny.migugu.com/admin/anmo/menu/fuwuzhong.png',
					text: '服务中',
					url: '/agent/pages/order/list?bell=1&tab=3',
					key: 6,
					number: 0
				}, {
					icon: 'https://lbqny.migugu.com/admin/anmo/menu/wancheng.png',
					text: '已完成',
					url: '/agent/pages/order/list?bell=1&tab=4',
				}],
				shopRefuseOrder: [{
					icon: 'icondaizhuandan',
					text: '待转单',
					url: '/agent/pages/order/list?tab=8',
					key: 8,
					number: 0
				}],
				shopRefund: [{
					icon: 'iconshenqingzhong',
					text: '申请中',
					url: '/agent/pages/refund/list?tab=1',
					key: 1,
					number: 0
				}, {
					icon: 'icontongyituikuan',
					text: '同意退款',
					url: '/agent/pages/refund/list?tab=2',
					key: 2,
					number: 0
				}, {
					icon: 'iconjujuetuikuan',
					text: '拒绝退款',
					url: '/agent/pages/refund/list?tab=3',
					key: 3,
					number: 0
				}],
				shopBellRefund: [{
					icon: 'https://lbqny.migugu.com/admin/anmo/menu/shenqingzhong.png',
					text: '申请中',
					url: '/agent/pages/refund/list?bell=1&tab=1',
					key: 1,
					number: 0
				}, {
					icon: 'https://lbqny.migugu.com/admin/anmo/menu/tongyi.png',
					text: '同意退款',
					url: '/agent/pages/refund/list?bell=1&tab=2',
					key: 2,
					number: 0
				}, {
					icon: 'https://lbqny.migugu.com/admin/anmo/menu/jujue.png',
					text: '拒绝退款',
					url: '/agent/pages/refund/list?bell=1&tab=3',
					key: 3,
					number: 0
				}],
				toolList: [
					// {
					// 	icon: 'iconzhanghaoshezhi',
					// 	text: '账号设置',
					// 	url: '/agent/pages/account'
					// },
					{
						icon: 'iconshenqingjishi3',
						text: this.$t('action.attendantName') + '管理',
						url: '/agent/pages/technician/list'
					},
					{
						icon: 'iconyongjinxinxi1',
						text: '佣金信息',
						url: '/agent/pages/income/commission'
					},
					{
						icon: 'icontixianshenqing1',
						text: '提现申请',
						url: '/user/pages/distribution/record?type=5'
					}
				],
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			commonOptions: state => state.user.commonOptions,
			userInfo: state => state.user.userInfo,
			haveOperItem: state => state.technician.haveOperItem,
		}),
		onLoad(options) {
			let {
				agent = 0
			} = options
			options.agent = agent * 1
			this.options = options
			uni.setNavigationBarTitle({
				title: agent == 1 ? '代理商端' : '管理员端'
			})
			this.initIndex()
		},
		onShow() {
			if (!this.haveOperItem) return
			this.initRefresh()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapMutations(['updateTechnicianItem']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.$util.showLoading()
				this.updateTechnicianItem({
					key: 'haveOperItem',
					val: false
				})
				let {
					agent
				} = this.options
				let methodKey = agent ? 'agent' : 'admin'
				let data = await this.$api[methodKey].index()
				if (agent) {
					data.node = ['shopOrder', 'shopBellOrder', 'shopRefuseOrder', 'shopRefund', 'shopBellRefund']
				}
				let {
					notice
				} = data
				let {
					order_id,
					refund_id,
					refuse_id
				} = notice
				if (order_id && order_id.length == 0) {
					order_id = {
						type: 1
					}
				}
				if (refund_id && refund_id.length == 0) {
					refund_id = {
						type: 2
					}
				}
				if (refuse_id && refuse_id.length == 0) {
					refuse_id = {
						type: 3
					}
				}
				let arr = []
				if (data.node.includes('shopOrder') || data.node.includes('shopOrder')) {
					arr.push(order_id)
				}
				if (data.node.includes('shopRefund') || data.node.includes('shopBellRefund')) {
					arr.push(refund_id)
				}
				if (data.node.includes('shopRefuseOrder')) {
					arr.push(refuse_id)
				}
				data.notice = arr
				this.shopOrder.map(item => {
					if (item.key) {
						item.number = data.order_count[item.key]
					}
				})
				this.shopBellOrder.map(item => {
					if (item.key) {
						item.number = data.add_count[item.key]
					}
				})
				this.shopRefuseOrder.map(item => {
					if (item.key) {
						item.number = data.refuse_order[item.key]
					}
				})
				this.shopRefund.map(item => {
					if (item.key) {
						item.number = data.refund_count[item.key]
					}
				})
				this.shopBellRefund.map(item => {
					if (item.key) {
						item.number = data.add_refund_count[item.key]
					}
				})
				this.detail = data
				this.isLoad = true
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex(true)
			},
			toJump(key, index) {
				let {
					url
				} = this[key][index]
				let {
					agent
				} = this.options
				let joinKey = url.includes('?') ? '&' : '?'
				url += `${joinKey}agent=${agent}`
				this.$util.goUrl({
					url
				})
			},
			async goOrder(index) {
				let {
					id = 0,
						order_id = 0,
						type
				} = this.detail.notice[index]
				if (!order_id) return
				let {
					agent
				} = this.options
				let methodKey = agent ? 'agent' : 'admin'
				await this.$api[methodKey].noticeUpdate({
					id,
					have_look: 1
				})
				this.initRefresh()
				let page = type == 2 ? 'refund' : 'order'
				let url = `/agent/pages/${page}/detail?id=${order_id}&agent=${agent}`
				this.$util.goUrl({
					url
				})
			}
		}
	}
</script>


<style lang="scss">
	.agent-index {

		.mine-count-list {
			width: 710rpx;
			height: 295rpx;
			margin: 20rpx 20rpx 0 20rpx;

			.text {
				color: rgba(255, 255, 255, 0.6)
			}

			.cash-out-btn {
				width: 180rpx;
				height: 70rpx;
			}

			.count-data-list {
				.list-item {
					width: 50%;
				}
			}
		}

		.dot-unread-number {
			top: 0;
			right: 0;
			width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			text-align: center;
			color: #fff;
			font-size: 18rpx;
			border-radius: 24rpx;
			background-color: #F1381F;
		}

		// 我的订单/其他
		.mine-menu-list {
			margin: 20rpx 20rpx 0 20rpx;

			.menu-title {
				height: 90rpx;
				color: #434343;

				.iconfont {
					font-size: 24rpx;
				}
			}

			.icon-info {
				width: 80rpx;
				height: 80rpx;
				background: #FFFFFF;
				box-shadow: 0 3rpx 31rpx -2rpx rgba(217, 224, 219, 0.5);
				border-radius: 29rpx;
				margin-right: 16rpx;

				.iconfont {
					font-size: 48rpx;
				}
			}

			.share-btn {
				width: 130rpx;
				height: 52rpx;
				border-radius: 8rpx;
			}

			.notice-info {
				.title {
					width: 100rpx;
					height: 34rpx;
					border-radius: 4rpx;
				}

				.iconfont {
					font-size: 20rpx;
				}
			}

			.item-child {
				width: 25%;
				margin: 10rpx 0;

				.iconfont {
					font-size: 52rpx;
				}

				.item-img {
					width: 60rpx;
					height: 60rpx;

					.iconfont {
						font-size: 36rpx;
					}

					.item-img {
						top: 0;
						left: 0;
						opacity: 0.1;
					}
				}

				.icon-img {
					height: 32rpx;
				}
			}
		}

		.mine-menu-list.share {
			padding: 30rpx 30rpx 30rpx 20rpx;
		}

	}
</style>