wardrobe/pages/chuanghome/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-message ref="toast"></tm-message>
		<tm-menubars title="创建家庭" :shadow="0" :showback="false"></tm-menubars>
		<tm-sheet :shadow="24" v-if="active==1">
			<tm-steps model="number" color="bg-gradient-blue-accent" activeFontColor="blue" line-color="bg-gradient-blue-accent" v-model="active" :list="list"></tm-steps>
			<view class="mt-20">
				<text class="text-primary text-size-s">扫柜体上的二维码和衣柜绑定</text>
			</view>
			<image block class="zhanshi" mode="widthFix" src="https://picsum.photos/300?k=1"></image>
			<tm-button theme="bg-gradient-blue-accent" @click="saoma()" block>扫二维码</tm-button>
		</tm-sheet>
		<tm-sheet :shadow="24" v-if="active==2">
			<view class="flex fulled-height" >
				<view style="width: 80px;">
					111
				</view>
				<view style="width:calc(100% - 160rpx);">
					222
				</view>
			</view>
			<tm-button theme="bg-gradient-blue-accent" @click="saoma()" block>下一步</tm-button>
		</tm-sheet>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			active:2,
			list:['创建家庭','创建角色','创建成功'],
			list2:[
				{text:'苏州'},
				{text:'北京'},
				{text:'广东'},
				{text:'江西',dot:8},
				{text:'深圳'},
			],
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		saoma(){
			console.log("111")
			var that=this;
			that.active=2;
			uni.scanCode({
				scanType: ['barCode'],
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					that.active=2;
				},
				error : function(e) {
					alert("网络异常，请重试");
				}
			})
		},
	},
}
</script>

<style lang="scss">
	.zhanshi{
		width: 100%;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 40px;
	}
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
</style>