<template>
	<view class="page">
		<u-navbar title="商户" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar" :custom-back="btns">
		</u-navbar>
        <image src="https://api.ccttiot.com/smartmeter/img/static/uo5KnRUd2Lbmx6kqLD8y" class="bj" mode=""></image>
        <view class="ul">
			<view class="name">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uEolrIvAh3MqeGuPgKgR" mode=""></image> 运营设置
			</view>
        	<view class="li" @click="btntab(4)">
        		<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uu4X0e9KWkHKry0p4Zb7" mode=""></image>
				<text>设备管理</text>
        	</view>
			<!-- <view class="li" @click="btntab(6)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uxtgmBUWYfcQEh88Q8FJ" mode=""></image>
				<text>门店管理</text>
			</view> -->
			<!-- <view class="li">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uLzS7dLnb60RU4yNtIEa" mode=""></image>
				<text>订单管理</text>
			</view> -->
			<!-- <view class="li" @click="btntab(5)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/us3CgwYcp1FH4bpAEeth" mode=""></image>
				<text>套餐组合</text>
			</view>
			<view class="li" @click="btntab(7)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uuKwlMWsZP26VkUvEXBP" mode=""></image>
				<text>用户管理</text>
			</view> -->
			<view class="li" @click="btyunwei">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uTvoGCZlGTu3ObkK9YS8" mode=""></image>
				<text>运维管理</text>
			</view>
			<view class="li" @click="btnzeng">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/us3CgwYcp1FH4bpAEeth" mode=""></image>
				<text>赠送次数</text>
			</view>
        </view>
		<!-- <view class="ul" style="height: 328rpx;">
			<view class="name">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/usrr4JBNTcGocGQEMGWY" mode=""></image> 其他
			</view>
			<view class="li">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uf0uYgQlWdmd5YD5ZNAv" mode=""></image>
				<text>收款账户</text>
			</view>
			<view class="li">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uSoELB8jdYqS0vvhvgLG" mode=""></image>
				<text>意见反馈</text>
			</view>
			<view class="li">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/u5xPXn4mgv9NytMRvsz6" mode=""></image>
				<text>安全中心</text>
			</view>
		</view> -->
        
		<!--自定义tab -->
		<view class="tab_list">
			<view class="tab_list_item" @click="btntab(1)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uPgK88hNUhrNNWIZUSFX" mode=""></image>
				<text style="color: #FF8998;">工作台</text>
			</view>
			<view class="tab_list_item" @click="btntab(2)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uijLmwRZbuA5ttwSDeBk" mode=""></image>
				<text>运营</text>
			</view>
			<view class="tab_list_item" @click="btntab(3)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uCQPWug03c3oJuoOqNFu" mode=""></image>
				<text>订单</text>
			</view>
		</view>
		
		<view class="zengsong" v-if="zengsongflag">
		    <view class="top">
		    	赠送爆灯次数
		    </view>	
			<input type="text" v-model="phone" placeholder="请输入赠送手机号" />
			<input type="text" v-model="number" placeholder="请输入爆灯次数" />
			<view class="anniu">
				<view class="qx" @click="zengsongflag = false">
					取消
				</view>
				<view class="qd" @click="btnqd">
					确定
				</view>
			</view>
		</view>
		<view class="mask" v-if="zengsongflag"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#0B0B0B",
                },
				zengsongflag:false,
				zengsuo:true,
				phone:'',
				number:''
			}
		},
		onLoad() {

		},
		methods: {
			// 点击确定赠送
			btnqd(){
				let data = {
					storeId:this.$store.state.storeId,
					phone:this.phone,
					number:this.number
				}
				if(this.zengsuo == true){
					this.zengsuo = false
					this.$u.put(`/bst/lightingNum/giftLightingNum`,data).then(res=>{
						if(res.code == 200){
							this.zengsongflag = false
						    this.phone = ''
							this.number = ''
							uni.showToast({
								title: '赠送成功',
								icon: 'success',
								duration:2000
							})
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration:2000
							})
						}
					})
				}
			},
			// 点击弹出弹框赠送次数
			btnzeng(){
				this.zengsongflag = true
				this.zengsuo = true
			},
			// 点击跳转到运维管理
			btyunwei(){
				uni.navigateTo({
					url:'/page_user/yunwei/index'
				})
			},
			// 点击跳转到我的
			btns(){
				uni.switchTab({
					url:'/pages/my'
				})
			},
			// 自定义tab跳转
			btntab(num){
				if(num == 1){
					// uni.reLaunch({
					// 	url:'/page_shanghu/index'
					// })
				}else if(num == 2){
					uni.reLaunch({
						url:'/page_shanghu/yuying'
					})
				}else if(num == 3){
					uni.reLaunch({
						url:'/page_shanghu/orderlist'
					})
				}else if(num == 4){
					uni.navigateTo({
						url:'/page_shanghu/device/index'
					})
				}else if(num == 5){
					// uni.navigateTo({
					// 	url:'/page_shanghu/chongzhi'
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none',
						duration:2000
					})
				}else if(num == 6){
					// uni.navigateTo({
					// 	url:'/page_shanghu/shop/index'
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'none',
						duration:2000
					})
				}else if(num == 7){
					uni.navigateTo({
						url:'/page_shanghu/yonghu/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
    .zengsong{
    	position: fixed;
    	top: 562rpx;
    	left: 50%;
    	transform: translateX(-50%);
    	width: 656rpx;
    	max-height: 592rpx;
    	background: #272727;
    	border-radius: 20rpx 20rpx 20rpx 20rpx;
    	z-index: 2;
    	.top{
    		font-size: 36rpx;
    		color: #FFFFFF;
    		width: 100%;
    		text-align: center;
    		margin-top: 40rpx;
    	}
    	.cen{
    		font-size: 28rpx;
    		color: #D8D8D8;
    		margin-left: 50rpx;
    		margin-top: 22rpx;
    	}
    	input{
    		margin: auto;
    		padding-left: 30rpx;
    		height: 80rpx;
    		color: #fff;
    		box-sizing: border-box;
    		margin-top: 28rpx;
    		width: 586rpx;
			border: 1px solid #808080;
			border-radius: 20rpx;
    	}
    	.anniu{
    		display: flex;
    		justify-content: space-between;
    		text-align: center;
    		margin-top: 50rpx;
    		border-top: 1px solid #808080;
    		.qd{
    			font-size: 36rpx;
    			color: #FF8998;
    			border-left: 1px solid #808080;
    		}
    		view{
    			width: 50%;
    			height: 104rpx;
    			line-height: 104rpx;
    			font-size: 36rpx;
    			color: #808080;
    		}
    	}
    }
    .mask{
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100vh;
    	z-index: 1;
    	background-color: #000;
    	opacity: .5;
    }
	.tab_list{
		width: 750rpx;
		height: 176rpx;
		background: #0B0B0B;
		box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		.tab_list_item{
			width: 33%;
			text-align: center;
			text{
				font-size: 26rpx;
				color: #FFFFFF;
				display: block;
				margin-top: 12rpx;
			}
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.ul{
		margin: auto;
		margin-top: 38rpx;
		width: 680rpx;
		height: 320rpx;
		background: rgba(1,0,0,0.2);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #FF8998;
		padding: 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.li{
			width: 25%;
			text-align: center;
			margin-top: 38rpx;
			image{
				width: 80rpx;
				height: 80rpx;
			}
			text{
				font-size: 28rpx;
				color: #FFFFFF;
				display: block;
				margin-top: 16rpx;
			}
		}
		.name{
			width: 100%;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 18rpx;
			}
		}
	}
    .bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>