techtron/pages/index.vue

<template>
	<view class="content">
		<!-- <view class="banner">
      <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
        <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
          <swiper-item v-for="(item, index) in data" :key="index">
            <view class="swiper-item" @click="clickBannerItem(item)">
              <image :src="imgUrl+item.image" mode="aspectFill" :draggable="false" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view> -->
		<view style="height: 10vh;text-align: center;">
			<image style="height: 3vh;width: 15vh;margin-top: 5vh;"
				src="../static/images/new/starts/login/backImg2.png"></image>
				
		</view>
		<view style="text-align: center;top:12vh;position: relative;color: aliceblue;">
						<view style="font-size: 30rpx;">Please choose from the below options:</view>
						<view style="font-size: 20rpx;">Charge up quickly & easily to enjoy a smarter life!</view>
					</view>
		<view
			style="margin:0 5vw;left:0px;right:0px;text-align: center;top:55vh;position: absolute;display: flex;flex-direction: rows;justify-content: space-evenly;">
			<!-- <view style="color:white;width:80px;">
   					设备编号
   				</view> -->
			<view style="text-align: center;">
				<view class="blue" @click="buleTeeth()">
					<image src="../static/images/new/starts/index/blue.png" style="width: 60px;height: 60px;margin-top: 2vh;"></image>
					</view>
					<view class="" @click="scan">
				<image src="../static/images/new/starts/index/scan.png" style="width: 60px;height: 60px;margin-top: 2vh;"
					></image>
					</view>
					<!-- <view class="" @click="scan">
					<image src="../static/images/new/starts/index/bind.png" style="width: 60px;height: 60px;margin-top: 2vh;"
						></image>
						</view> -->
				<!-- <u--input v-model="sn" placeholder="请输入设备编号" color="white"
   						style="width: 10vw;padding-left:10px;background: rgb(90, 88, 115);text-align: left;font-size: 20px;width:90vw;border-radius: 100vh;height: 40px;">
   						<u-button slot="suffix" @click="binddevice"
   							style="background: #505086;color:white;border-radius: 100vh;width: 120px;margin-right: -10px;">绑 定</u-button>
   					</u--input> -->
			</view>
		</view>
		<!-- <view class="container">
      <view class="item" @click="buleTeeth">
        <image :src = "imgUrl+'/index/bluetooth.png'"/>
        <view class="item-text">{{i18('蓝牙连接')}}</view>
      </view>

      <view class="item" @click="scan">
        <image :src = "imgUrl+'/index/scan.png'"/>
        <view class="item-text">{{i18('扫码绑定')}}</view>
      </view>
      <view class="item" @click="devicelist">
        <image :src = "imgUrl+'/index/device-2.png'"/>
        <view class="item-text">{{i18('设备列表')}}</view>
      </view>
        <view class="item" @click="wifi">
          <image :src = "imgUrl+'/index/bluetooth.png'"/>
          <view class="item-text">{{i18('WIFI配网')}}</view>
        </view>
    </view> -->
	</view>
</template>

<script>
	import {
		getDeviceInfoFromQrcode,
		bindDevice
	} from '@/api/device/device.js'
	import i18 from '@/utils/i18.js'
	export default {
		data: function() {
			return {
				current: 0,
				swiperDotIndex: 0,
				data: [{
					image: '/index/banner-index.png'
				}]
			}
		},
		computed: {
			imgUrl() {
				return getApp().globalData.config.imgUrl;
			}
		},
		onLoad: function() {},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('page.worktai')
			})
		},
		methods: {
			devicelist() {
				uni.navigateTo({
					url: '/pages/weitiandi/deviceList'
				});
			},
			i18(text) {
				return i18(text)
			},
			buleTeeth() {
				uni.navigateTo({
					url: '/pages/bluetooth/index/index'
				});
			},
			wifi() {
				uni.navigateTo({
					url: '/pages/bluetooth/index/wifi'
				});
			},
			toBind(qrcode) {
				bindDevice(qrcode).then(res => {
					let data = res.data;
					if (data != null) {
						let imei = res.data.imei;
						let ccid = res.data.ccid;
						let qrcode = res.data.qrcode;
						let uuid = res.data.uuid;
						this.$modal.showToast("绑定成功");
					} else {
						this.$modal.showToast("绑定失败");
					}
				})
			},
			scan() {
				let self = this;
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						getDeviceInfoFromQrcode(res.result).then(res => {
							if (res.data != null) {
								let imei = res.data.imei;
								let ccid = res.data.ccid;
								let qrcode = res.data.qrcode;
								let uuid = res.data.userId;
								if (uuid) {
									self.$modal.showToast("该设备已被绑定");
								} else {
									self.$modal.confirm("确认绑定该设备？").then(res => {
										self.toBind(qrcode)
									})
								}
								// uni.navigateTo({
								//   url: '/pages/weitiandi/device/status?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
								// });
							} else {
								self.$modal.showToast("找不到设备,请联系管理员");
							}
						});
					}
				});
			},
			scan2() {
				let self = this;
				getDeviceInfoFromQrcode("http://wetiandi.com/index.php?do=wepay&sn=GD1B388803").then(res => {
					if (res.data != null) {
						let imei = res.data.imei;
						let ccid = res.data.ccid;
						let qrcode = res.data.qrcode;
						let uuid = res.data.userId;
						if (uuid) {
							self.$modal.showToast("该设备已被绑定");
						} else {
							self.$modal.confirm("确认绑定该设备？").then(res => {
								self.toBind(qrcode)
							})
						}
						// uni.navigateTo({
						//   url: '/pages/weitiandi/device/status?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
						// });
					} else {
						self.$modal.showToast("找不到设备,请联系管理员");
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		background-image: url('../static/images/new/starts/bg1.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		inset: 0;
		position: absolute;
	}


	.swiper {
		height: 22vh;
	}

	.banner {
		height: 22vh;
		width: 100%;
		margin-top: 1vh
	}

	.swiper-box {
		height: 22vh;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.item {
		display: inline-block;
		width: 50%;
		position: relative;
	}

	.item image {
		height: 12vh;
	}

	.item-text {
		position: absolute;
		top: 30px;
		left: 50%;
	}
</style>