bigDataApp/pages/cb/sim/sim.vue

<template>
	<view>
		<view class="section">
			<view class="sim_info_loding" v-if="loding">
				<image src="../../../static/images/cb/6286299.gif" mode="" class="img"></image>
			</view>
			<view class="tit">
				<image mode="widthFix" src="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/sim1.png"></image>
				数据sim卡流量{{"("+sim.simnew+")"}}
			</view>
			<view class="item" @click="copy(sim.iccid)">
				<text>ICCID:</text>
				<text>{{sim.iccid}}</text>
				<image src="../../../static/images/ba167c2774bc7a63381dc3aaf1ef95c.png" mode="" class="tishi"></image>
			</view>
			<view class="item">
				<text>状态:</text>
				<text>{{sim.account_status}}</text>
			</view>
			<view class="item">
				<text>套餐:</text>
				<text>{{sim.data_plan}}MB</text>
			</view>
			<view class="item">
				<text>已用流量:</text>
				<text>{{sim.data_usage.toFixed(2)}}MB</text>
			</view>
			<view class="item">
				<text>剩余流量:</text>
				<text>{{sim.data_balance.toFixed(2)}}MB</text>
			</view>
			<view class="item">
				<text>到期时间:</text>
				<text v-if="sim.simnew=='新'">{{sim.expiry_date|timeFormat}}</text>
				<text v-else>{{sim.expiry_date|timeFormat}}</text>
			</view>
		</view>
		<template v-if="showHksimFlag">
			<view class="section">
				<view class="sim_info_loding" v-if="loding2">
					<image src="../../../static/images/cb/6286299.gif" mode="" class="img"></image>
				</view>
				<view class="tit">
					<image mode="widthFix" src="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/sim2.png"></image>
					图片sim卡流量{{"("+hksim.simnew+")"}}
				</view>
				<view class="item" @click="copy(hksim.iccid)">
					<text>ICCID:</text>
					<text>{{hksim.iccid}}</text>
					<image src="../../../static/images/ba167c2774bc7a63381dc3aaf1ef95c.png" mode="" class="tishi"></image>
				</view>
				<view class="item">
					<text>状态:</text>
					<text>{{hksim.account_status}}</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 v-if="hksim.simnew=='新'">{{hksim.expiry_date}}</text>
					<text v-else>{{hksim.expiry_date|timeFormat}}</text>
				</view>
				<view class="item">
					<text>更换ICCID:</text>
					<u-input v-model="hksiminp" type="text" :custom-style="sty" style="z-index: 1;"/>
				</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, //到期日期，
					simnew:""
				},
				showHksimFlag: true, //是否显示hksim卡标识
				hksim: {
					iccid: "",
					account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
					data_plan: 0, //套餐大小
					data_usage: 0, //当月用量
					data_balance: 0, //剩余流量
					expiry_date: 0, //到期日期
					simnew:""
				},
				hksiminp: '', //更换ICCID
				d_id: '',
				sty: {
					'background': '#F7F8FA'
				},
				loding:false,
				loding2:false
			}
		},
		onLoad(option) {
			if (Number(option.device_type) == 4) {
				this.showHksimFlag = false
			}
			this.d_id = option.d_id
			this.lookSIMCode('sim')
			this.lookSIMCode('hksim')
			this.loding = true
			this.loding2 = true
		},
		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 = res2.data.data
				if (res2.code == 1) { //企鹏 新
					var state = ""
					switch (obj.deviceStatus) {
						case "TEST_READY_NAME":
							state = "可测试"
							break;
						case "INVENTORY_NAME":
							state = "库存"
							break;
						case "ACTIVATION_READY_NAME":
							state = "可激活"
							break;
						case "ACTIVATED_NAME":
							state = "已激活"
							break;
						case "DEACTIVATED_NAME":
							state = "已停卡"
							break;
						case "RETIRED_NAME":
							state = "已销卡"
							break;
						case "PURGED_NAME":
							state = "已清除"
							break;
					}
					console.log(obj)
					if (flag == 'sim') {
						this.sim = {
							iccid: res[0].iccid,
							account_status: state,
							data_plan: obj.totalDataVolume, //套餐大小
							data_usage: obj.usedDataVolume, //当月用量
							data_balance: Number(obj.totalDataVolume) - Number(obj.usedDataVolume), //剩余流量
							expiry_date: obj.expireDate, //到期日期，
							simnew:"新"
						}
						this.loding = false
					} else if (flag == 'hksim') {
						this.hksim = {
							iccid: res[0].iccid,
							account_status: state,
							data_plan: obj.totalDataVolume, //套餐大小
							data_usage: obj.usedDataVolume, //当月用量
							data_balance: Number(obj.totalDataVolume) - Number(obj.usedDataVolume), //剩余流量
							expiry_date: obj.expireDate, //到期日期
							simnew:"新"
						}
						this.loding2 = false
					}
				} else if (res2.code == 2) { //合宙 旧
					var state = ""
					switch (obj.account_status) {
						case 0:
							state = "未知"
							break;
						case 1:
							state = "测试期"
							break;
						case 2:
							state = "沉默期"
							break;
						case 3:
							state = "使用中"
							break;
						case 4:
							state = "停机"
							break;
						case 5:
							state = "停机保号"
							break;
						case 6:
							state = "预销号"
							break;
						case 7:
							state = "销号"
							break;
					}
					this.simnew = "旧"
					if (flag == 'sim') {
						this.sim = {
							iccid: res[0].iccid,
							account_status: state, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
							data_plan: obj.data_plan, //套餐大小
							data_usage: obj.data_usage, //当月用量
							data_balance: obj.data_balance, //剩余流量
							expiry_date: obj.expiry_date, //到期日期
							simnew:"旧"
						}
						this.loding = false
					} else if (flag == 'hksim') {
						this.hksim = {
							iccid: res[0].iccid,
							account_status: state, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
							data_plan: obj.data_plan, //套餐大小
							data_usage: obj.data_usage, //当月用量
							data_balance: obj.data_balance, //剩余流量
							expiry_date: obj.expiry_date, //到期日期
							simnew:"旧"
						}
						this.loding2 = false
					}
				}
			},
			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
						});
					}
				})
			},
			copy(item){
				uni.setClipboardData({
				    data: item , 
				    success: function () {
				        console.log('success');
				    }
				});
			},
		}
	}
</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;
			position: relative;
			.sim_info_loding{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				background-color: rgba(0,0,0,0.3);
				border-radius: 20rpx;
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				z-index: 10;
				.img{
					width: 200rpx;
					height: 175rpx;
					
				}
			}
			.item {
				line-height: 56rpx;
				font-size: 26rpx;

				text:nth-child(1) {
					margin-right: 10rpx;
				}

				display:flex;
				.tishi{
					width: 30rpx;
					height: 30rpx;
					margin: 16rpx 0 0 20rpx;
				}
			}

			.tit {
				margin-bottom: 20rpx;
				font-size: 28rpx;

				image {
					width: 22rpx;
					margin-right: 10rpx;

				}
			}

			.submit-box {
				margin-top: 20rpx;
			}
		}
	}
</style>