qianqianJingzhun/pages/index/index.wxml

<!--pages/index/index.wxml-->
<view class="newIndex" style="padding-bottom:{{isIphoneX?'68rpx':'0px'}}">
    <view class="topBar">
        <van-button custom-class="borders" bind:click="goConnect" plain type="info">{{!deviceId?"未连接智能笔":"已连接"}}
        </van-button>
        <van-button custom-class="borders" bind:click="saveCanvasImage" plain type="info">上传试卷
        </van-button>
        <!-- <van-button custom-class="borders" bind:click="gotoTeacher" plain type="info">老师端测试
        </van-button> -->
        <!-- <view>{{currentPage+1}}</view>  -->
    </view>
    <van-tabs active="{{activeTabBar}}" color="#FC6C1E" bind:change="onChange">
        <van-tab title="作业纸">
            <canvas type="2d" id="myCanvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px">
            </canvas>
        </van-tab>
    </van-tabs>
    <!-- 选择线宽 -->
    <van-transition show="{{ activeTab==='penWidth' }}" name="fade">
        <view class="penWidthPic" style="bottom:{{isIphoneX?'75px':'39px'}}">
            <view wx:for="{{penWidthImg}}" wx:key="index" class="{{index===penWidthIndex?'chosenPenWidth':''}}" bindtap="chosenPenwidth" data-index="{{index}}">
                <image src="{{item.img}}" alt="" />
            </view>
        </view>
    </van-transition>
    <!-- 选择颜色 -->
    <van-transition show="{{activeTab==='color'}}" name="fade">
        <view class="penColor" style="bottom:{{isIphoneX?'75px':'39px'}}">
            <view wx:for="{{penColors}}" bindtap="changeColor" data-index="{{index}}" class="ChosenColor" wx:key="index" style="background-color:{{item.color}}">
                <van-icon name="success" color="{{chosenIndex===index?'#fff':item.color}}" />
            </view>
        </view>
    </van-transition>
    <!-- 所有选项 -->
    <van-transition show="{{activeTab==='more'}}" name="fade">
        <view class="allOption" style="bottom:{{isIphoneX?'75px':'39px'}}">
            <view class="optionTitle" bindtap="hideOffline">
                <van-icon name="arrow-left" wx:if="{{checkOffline}}" color="#132238" size="18rpx" />
                选项
            </view>
            <view class="menu">
                <view class="menuOpt" wx:if="{{!checkOffline}}">
                    <view wx:for="{{optionImg}}" wx:key="index" class="onOpt m9" bindtap="tapOption" data-index="{{index}}">
                        <image class="optImg" src="{{item.img}}"></image>
                        <text class="optTxt">{{item.text}}</text>
                        <van-icon name="arrow" wx:if="{{index===1}}" color="#132238" size="20rpx" />
                    </view>
                </view>
                <view class="menuOpt" wx:if="{{checkOffline}}">
                    <view wx:for="{{offlineImg}}" wx:key="index" bindtap="offlineDataActivity" data-index="{{index}}" class="onOpt m9">
                        <image class="optImg" src="{{item.img}}"></image>
                        <text class="optTxt">{{item.text}}</text>
                    </view>
                </view>
            </view>
        </view>
    </van-transition>
    <van-tabbar placeholder='{{true}}' active-color="#EC6938" active="{{activeTab}}" bind:change="changeTab">
        <van-tabbar-item wx:for="{{basePic}}" name="{{item.name}}" wx:key="name">
            <image slot="icon" src="{{item.icon}}" mode="aspectFit" style="width:30px;height:18px"></image>
            <image slot="icon-active" src="{{item.iconClick}}" mode="aspectFit" style="width: 30px; height: 18px;"></image>
            {{item.text}}
        </van-tabbar-item>
    </van-tabbar>
    <van-overlay z-index='{{999}}' show="{{ showConnectPen }}">
        <view class="connectPen">
            <view class="penDeteils">
                <view class="w50 flex closeButton">
                    <van-icon name="close" size="20px" color='#8492A6' bind:click="hidePen" />
                </view>
                <view class="w50 middleInfo flex columnCenter">
                    <view class="penName">笔名：{{deviceName}}</view>
                    <text class="macAdrress">mac:{{deviceMac}}</text>
                    <text class="macAdrress">电量剩余：{{penBattery}}</text>
                </view>
                <view class="w50 columnCenter">
                    <van-button custom-class='changeButton' bind:click="changePen" color='#8492A6' plain type="info">切换智能笔
                    </van-button>
                </view>
            </view>
        </view>
    </van-overlay>
    <van-dialog id='van-dialog'></van-dialog>
    <van-toast id="van-toast" />
    <view wx:if="{{showOfflineDialog}}" class="offlineProcess">
        <van-loading type='spinner' wx:if="{{continueFlag}}"></van-loading>
        <van-icon size="30" color='#fff' name="play-circle-o" wx:if="{{!continueFlag}}" />
        <view class="process">{{offlineProcess}}%</view>
        <view bindtap="processButton" class="processButton">{{continueFlag?'暂停':'继续'}}</view>
    </view>
</view>