bigDataApp/pages/cb/sim/sim.vue

<template>
	<view>
		<view class="section">
			<view class="tit">
				<image mode="widthFix" src="http://static.yfpyx.com/bigdata_app/image/cb/sim1.png" ></image>
				数据sim卡流量
			</view>
			<view class="item">
				<text>ICCID:</text>
				<text>{{sim.iccid}}</text>
			</view>
			<view class="item">
				<text>状态:</text>
				<text>{{sim.account_status|simStatus}}</text>
			</view>
			<view class="item">
				<text>套餐:</text>
				<text>{{sim.data_plan}}MB</text>
			</view>
			<view class="item">
				<text>已用流量:</text>
				<text>{{sim.data_usage}}MB</text>
			</view>
			<view class="item">
				<text>剩余流量:</text>
				<text>{{sim.data_balance}}MB</text>
			</view>
			<view class="item">
				<text>到期时间:</text>
				<text>{{sim.expiry_date|timeFormat}}</text>
			</view>
		</view>
		<template v-if="showHksimFlag">
			<view class="section">
				<view class="tit">
					<image mode="widthFix" src="http://static.yfpyx.com/bigdata_app/image/cb/sim2.png" ></image>
					图片sim卡流量
				</view>
				<view class="item">
					<text>ICCID:</text>
					<text>{{hksim.iccid}}</text>
				</view>
				<view class="item">
					<text>状态:</text>
					<text>{{hksim.account_status|simStatus}}</text>
				</view>
				<view class="item">
					<text>套餐:</text>
					<text>{{hksim.data_plan}}MB</text>
				</view>
				<view class="item">
					<text>已用流量:</text>
					<text>{{hksim.data_usage}}MB</text>
				</view>
				<view class="item">
					<text>剩余流量:</text>
					<text>{{hksim.data_balance}}MB</text>
				</view>
				<view class="item">
					<text>到期时间:</text>
					<text>{{hksim.expiry_date|timeFormat}}</text>
				</view>
				<view class="item">
					<text>更换ICCID:</text>
					<u-input v-model="hksiminp" type="text" :custom-style="sty"  />
				</view>
				<view class="submit-box">
					<u-button  @click="submit" type="warning">确定</u-button>
				</view>
				<u-toast ref="toast" />
			</view>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sim: {
			        iccid: "",
			        account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
			        data_plan: 0, //套餐大小
			        data_usage: 0, //当月用量
			        data_balance: 0, //剩余流量
			        expiry_date: 0, //到期日期
			      },
				showHksimFlag: true, //是否显示hksim卡标识
				hksim: {
					iccid: "",
					account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
					data_plan: 0, //套餐大小
					data_usage: 0, //当月用量
					data_balance: 0, //剩余流量
					expiry_date: 0, //到期日期
				  },
				hksiminp:'',//更换ICCID
				d_id:'',
				sty:{
					'background':'#F7F8FA'
				}
			}
		},
		onLoad(option){
			if(Number(option.device_type)==4){
				this.showHksimFlag = false
			}
			this.d_id=option.d_id
			this.lookSIMCode('sim')
			this.lookSIMCode('hksim')
		},
		 filters: {
			simStatus(val) {
			  switch (val) {
				case 0:
				  return "未知";
				case 1:
				  return "测试期";
				case 2:
				  return "沉默期";
				case 3:
				  return "使用中";
				case 4:
				  return "停机";
				case 5:
				  return "停机保号";
				case 6:
				  return "预销号";
				case 7:
				  return "销号";
			  }
			},
		  },
		methods: {
			async lookSIMCode(flag){
				let res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.device_sim',
					data:{
						d_id:this.d_id,
						type:flag
					}
				})
				let res2=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.sim_query',
					data:{
						iccid:res[0].iccid,
					}
				})
				
				// let obj=eval('('+res2.data+')').data
				let obj = res2.data.data
				console.log(obj)
				if(flag=='sim'){
					this.sim={
						iccid: res[0].iccid,
						account_status: obj.account_status, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
						data_plan: obj.data_plan, //套餐大小
						data_usage: obj.data_usage, //当月用量
						data_balance:obj.data_balance, //剩余流量
						expiry_date:obj.expiry_date, //到期日期
					}
					
				}else if(flag=='hksim'){
					this.hksim={
						iccid: res[0].iccid,
						account_status: obj.account_status, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
						data_plan: obj.data_plan, //套餐大小
						data_usage: obj.data_usage, //当月用量
						data_balance:obj.data_balance, //剩余流量
						expiry_date: obj.expiry_date, //到期日期
					}
				}
			},
			async submit(){
				let res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.device_sim',
					data:{
						d_id: this.d_id,
						 iccid: this.hksiminp,
						 type: "change",
					}
				})
				this.$refs.toast.show({
					title: '修改成功!',
					type: 'success',
					callback:function(){
						uni.navigateBack({
							delta: 1
						});	
					}
				})	
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding:30rpx;
		box-sizing: border-box;
		.section{
			padding:30rpx;
			box-shadow: 0px 0px 5px 3px rgba(136,136,136,.1);
			margin-bottom:20rpx;
			box-sizing: border-box;
			.item{
				line-height:56rpx;
				font-size:26rpx;
				text:nth-child(1){
					margin-right:10rpx;
				}
				display:flex;
			}
			.tit{
				margin-bottom:20rpx;
				font-size:28rpx;
				image{
					width:22rpx;
					margin-right:10rpx;
				
				}
			}
			.submit-box{
				margin-top:20rpx;
			}
		}
	}
	

</style>