guosen-ldt-shop/pages/index/index.vue

<template>
	<view class="">
		<!-- 扫一扫错误回调 -->
		<u-modal title="扫描异常"  confirm-color="#dc9b21"  v-model="scanNotify.scan" :content="scanNotify.scanMessage"></u-modal>
		
		
		<u-navbar :is-back="false" title="联兑通商户版"></u-navbar>
		<view class="margin-30">
			<view class="flex justify-between">
				<view class="title ">
					<view class="icon">
						<image src="@/static/icon/dianpu.png" mode=""></image>
					</view>
					<view class="center margin-left-10">
						<view @click="shopShow=true">
							<text class="name" >{{shopLable}}</text>
							<u-icon v-if="shopShow" name="arrow-up-fill" style="margin-left: 10rpx;"></u-icon>
							<u-icon v-else name="arrow-down-fill" style="margin-left: 10rpx;"></u-icon>
						</view>
					</view>
				</view>
				
				<view class="btn">
					<view class="image">
						<image src="@/static/icon/logout.png" mode=""></image>
					</view>
					<view @click="logout" class="center padding-left-10" >
						<text>退出</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
			

			<view class="cu-list grid col-3 no-border top-menu">
				<view class="cu-item" @click="operate(index)" v-for="(item,index) in menuList" :key="index">
					<view class="grid-icon margin-top-20">
						<image style="width: 66rpx;height: 66rpx;" :src="item.icon" />
					</view>
					<text style="color: #fff;font-size: 26rpx;">{{item.name}}</text>
				</view>
			</view>

			<view class="menu-list">
				<view @click="$jump('/pages/bill/bill')" class="menu menu1">
					<view class="menu-top">
						<image src="@/static/icon/bill.png"></image>
						<view class="center padding-left-20">
							<text class="text-lg">我的账单</text>
						</view>
					</view>
					<view class="menu-bottom">
						<view class="">
							<text>今日营收</text>
							<text>{{statistic.todayIncome}}</text>
						</view>
						<view class="">
							<text>总资产</text>
							<text>{{statistic.totalAccount}}</text>
						</view>
					</view>
				</view>
				<view class="menu menu2" @click="$jump('/pages/member/member')">
					<view class="menu-top">
						<image src="@/static/icon/center.png"></image>
						<view class="center padding-left-20">
							<text class="text-lg">会员中心</text>
						</view>
					</view>
					<view class="menu-bottom">
						<view class="">
							<text>新增会员</text>
							<text>{{statistic.todayMemberIn}}</text>
						</view>
						<view class="">
							<text>会员总数</text>
							<text>{{statistic.memberCount}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="market">
				<text class="title">营销管理</text>
				<view class="cu-list grid col-2 no-border margin-top-30">
					<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in marketList" :key="index">
						<view class="center">
							<view class="icon" :style="item.background">
								<image :src="item.icon" mode=""></image>
							</view>
						</view>
						<text style="color: #222222;font-size: 26rpx;margin-top: 20rpx;">{{item.name}}</text>
						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
					</view>
				</view>
			</view>

			<view class="system">
				<text class="title">数字化系统</text>
				<view class="cu-list grid col-4 no-border margin-top-30" style="border-radius:20rpx ;">
					<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in systemList" :key="index">
						<view class="grid-icon">
							<image mode="heightFix" style="height: 56rpx;" :src="item.icon" />
						</view>
						<text style="color: #222222;font-size: 26rpx;">{{item.name}}</text>
						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 支付键盘 -->
		<u-keyboard
			default=""
			ref="uKeyboard" 
			mode="number" 
			:mask="true" 
			:mask-close-able="false"
			:dot-enabled="true" 
			v-model="show"
			:confirm-btn="true"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<view v-if="money=='0'" class="" style="position: absolute;left: 80rpx;bottom: 20rpx;">
						<text style="color: #909399;font-size: 24rpx;">请输入付款金额</text>
					</view>
					<text>{{money}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="close">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				
				<u-button @click="inputConfirm" plain :ripple="true" ripple-bg-color="rgba(25, 190, 107,.4)">确认</u-button>
			</view>
		</u-keyboard>
		
		<u-select @confirm="shopConfirm" v-model="shopShow" value-name="id" label-name="name" :list="shopList"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				money:"0",
				scanNotify:{scan: false,scanMessage:'扫描错误，请稍后重试！' },
				
				//下拉选择商铺
				shopShow:false,
				//我的商铺列表
				shopList:[],
				//选中的商铺id
				shopId:'',
				//选中的商铺labe
				shopLable:'',
				//选中的商铺所属的商场
				mallId:'',
				
				//统计数据
				statistic:{},
				
				menuList: [{
						icon: '/static/icon/scan.png',
						name: '扫一扫',
					},
					{
						icon: '/static/icon/pay.png',
						name: '收款码',
					},
					{
						icon: '/static/icon/card.png',
						name: '卡包',
					}
				],
				marketList: [{
						icon: '/static/icon/publish.png',
						name: '发起活动',
						background: "background-image:linear-gradient(#FF9549,#FCB07B)",
						path: '/pages/publish/publish',
						count: 0
					},
					{
						icon: '/static/icon/list.png',
						name: '活动清单',
						background: "background-image:linear-gradient(#5892F7,#67BBF9)",
						path: '/pages/activity/activity',
						count: 0
					},
				],
				systemList: [{
						icon: '/static/icon/system1.png',
						name: '外卖平台',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system2.png',
						name: '预约系统',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system3.png',
						name: 'ERP系统',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system4.png',
						name: '线上商城',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system5.png',
						name: '门店管理',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/add.png',
						name: '添加服务',
						path: '/pages/mine/card/card'
					},
				]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			logout(){
				this.$dialog.showModal('确定要退出吗？').then(res=>{
					uni.clearStorage()
					uni.reLaunch({
						url:"../login/account-login"
					})
				})
			},
			async init(){
				let phone=this.$cache.get('phone')
				let params={
					personTel:phone,
					auditStatus:1 //审核通过
				}
				let res=await this.$api.shop.list(params)
				this.shopList=res.data.records
				let item=this.shopList[0]
				this.shopId = item.id
				this.shopLable = item.name
				this.mallId=item.mallId
				this.cacheSelectedShop()
				//获取统计数据
				this.getStatistic()
			},
			getStatistic(){
				this.$api.shop.statistic(this.shopId).then(res=>{
					this.statistic=res.data
				})
			},
			cacheSelectedShop(item){
				let selectedShop={
					id:this.shopId,
					label:this.shopLable
				}
				this.$cache.put("selectedShop",selectedShop)
				this.$u.vuex('vuex_shopId',this.shopId)
				this.$u.vuex('vuex_mallId',this.mallId)
			},
			shopConfirm(e){
				this.mallId=e[0].value
				this.mallLable=e[0].label
				this.cacheSelectedShop()
			},
			operate(index){
				if (index==0) {
					this.show=true
				}else if (index==1) {
					this.$jump('/pages/checkstand/pay-qrcode')
				}else if (index==2) {
					this.$jump('/pages/card/card')
				}
			},
			//扫描二维码
			onChange(val){
				if (this.money=='0' && val!='.') {
					this.money=val
					return
				}
				console.log(typeof this.money);
				console.log(typeof val);
				this.money += val.toString()
			},
			onBackspace(e){
				if(this.money.length>0 &&this.money!='0'){
					this.money = this.money.substring(0,this.money.length-1);
				}else{
					this.money='0'
				}
			},
			inputConfirm(){
				if (this.$isEmpty(this.money)) {
					this.$u.toast('请输入收款金额')
					return
				}
				if (!this.$verify.isMoney(this.money)) {
					this.$u.toast('请输入正确的收款金额')
					return
				}
				this.show=false
				this.scanCode()
			},
			close(){
				this.money='0'
				this.show=false
			},
			scanCode(){
				const _this = this;
				uni.scanCode({
				    success: function (res) {
						_this.payBefore(res.result)
				    },
					fail: (res) => {
						if(res.errMsg!='scanCode:fail cancel'){
							_this.scanNotify = {scan: true,scanMessage: res.errMsg};
						}
					}
				});
			},
			async payBefore(secret){
				let expireTime=this.$dateTime.getExpireTime(5)
				let params={
					shopId:this.vuex_shopId,
					money:this.money,
					billsTitle:'用户支付',
					expireTime,
					appId:this.$global.wxParams.clientAppId,
					secret,
					type:2
				}
				let resp=await this.$api.shop.payBefore(params)
				console.log(resp);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-list.grid>.cu-item .cu-tag {
		right: auto;
		left: 54%;
		margin-left: 20rpx;
	}

	.title {
		display: flex;

		.icon {
			background-color: #FFFFFF;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;
			height: 50rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		text {
			font-weight: 800;
			font-size: 32rpx;
			color: #303030;
		}
	}

	.top-menu {
		border-radius: 20rpx;
		margin-top: 20rpx;
		background-image: linear-gradient(to right, #FBA33D, #FF8D32);
	}

	.menu-list {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;

		.menu {
			width: 48.8%;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 14rpx;
			padding: 30rpx 20rpx;

			.menu-top {
				display: flex;

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.menu-bottom {
				padding-top: 20rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-around;
				width: 100%;

				view {
					display: flex;
					flex-direction: column;
					text-align: center;

					text:first-child {
						margin-bottom: 10rpx;
						font-size: 26rpx;
						color: #E0E2F6;
					}
				}
			}
		}

		.menu1 {
			background-color: #5C6186;
		}

		.menu2 {
			background-color: #E19D5B;
		}
	}

	.market {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;

		.title {
			font-weight: 800;
		}

		.icon {
			width: 120rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			padding: 20rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.system {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;

		.title {
			font-weight: 800;
		}
	}
	
	
	.btn{
		margin-right: -30rpx;
		display: flex;
		
		.image{
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #FFFFFF;
			padding: 8rpx;
			image{
				width: 20rpx;
				height: 20rpx;
			}
		}
		
		color: #FFFFFF;
		border-radius: 50rpx 0 0 50rpx;
		padding:8rpx 10rpx 8rpx 35rpx;
		background-image: linear-gradient(to right,#FFD67B,#F99200);
	}
	
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
</style>