zx_bms_uni/pages/device/device1.vue

<template>
    <view class="container">
        <i-drawer mode="left" :visible="isShowShopContainer" @close="handleCloseShopContainer">
            <view class="shop-container">
                <i-collapse name="xxxx" class="xxxxx">
                    <!-- 最多6层 -->
                    <i-collapse-item
                        v-if="userInfo.shop_id"
                        :title="userInfo.shop_name + '[' + userInfo.own_device_cnt + '/' + userInfo.all_device_cnt + ']'"
                        i-class-title="collapse-item-title"
                        @tap.native.stop.prevent="bindClickMainShop"
                    >
                        <view slot="content">
                            <i-collapse-item
                                @tap.native.stop.prevent="loadFirstChildren"
                                :data-parentid="item1.shop_id"
                                :data-index="index1 + ',' + ',' + ',' + ',' + ','"
                                :title="item1.shop_name + '[' + item1.own_device_cnt + '/' + item1.all_device_cnt + ']'"
                                i-class-title="collapse-item-title"
                                v-for="(item1, index1) in shopChildrenList"
                                :key="index1"
                            >
                                <view slot="content">
                                    <i-collapse-item
                                        @tap.native.stop.prevent="loadFirstChildren"
                                        :data-parentid="item2.shop_id"
                                        :data-index="index1 + ',' + index2 + ',' + ',' + ',' + ','"
                                        :title="item2.shop_name + '[' + item2.own_device_cnt + '/' + item2.all_device_cnt + ']'"
                                        i-class-title="collapse-item-title"
                                        v-for="(item2, index2) in item1.childrenList"
                                        :key="index2"
                                    >
                                        <view slot="content">
                                            <i-collapse-item
                                                @tap.native.stop.prevent="loadFirstChildren"
                                                :data-parentid="item3.shop_id"
                                                :data-index="index1 + ',' + index2 + ',' + index3 + ',' + ',' + ','"
                                                :title="item3.shop_name + '[' + item3.own_device_cnt + '/' + item3.all_device_cnt + ']'"
                                                i-class-title="collapse-item-title"
                                                v-for="(item3, index3) in item2.childrenList"
                                                :key="index3"
                                            >
                                                <view slot="content">
                                                    <i-collapse-item
                                                        @tap.native.stop.prevent="loadFirstChildren"
                                                        :data-parentid="item4.shop_id"
                                                        :data-index="index1 + ',' + index2 + ',' + index3 + ',' + index4 + ',' + ','"
                                                        :title="item4.shop_name + '[' + item4.own_device_cnt + '/' + item4.all_device_cnt + ']'"
                                                        i-class-title="collapse-item-title"
                                                        v-for="(item4, index4) in item3.childrenList"
                                                        :key="index4"
                                                    >
                                                        <view slot="content">
                                                            <i-collapse-item
                                                                @tap.native.stop.prevent="loadFirstChildren"
                                                                :data-parentid="item5.shop_id"
                                                                :data-index="index1 + ',' + index2 + ',' + index3 + ',' + index4 + ',' + index5 + ','"
                                                                :title="item5.shop_name + '[' + item5.own_device_cnt + '/' + item5.all_device_cnt + ']'"
                                                                i-class-title="collapse-item-title"
                                                                v-for="(item5, index5) in item4.childrenList"
                                                                :key="index5"
                                                            >
                                                                <view slot="content"></view>
                                                            </i-collapse-item>
                                                        </view>
                                                    </i-collapse-item>
                                                </view>
                                            </i-collapse-item>
                                        </view>
                                    </i-collapse-item>
                                </view>
                            </i-collapse-item>
                        </view>
                    </i-collapse-item>
                </i-collapse>
            </view>
        </i-drawer>

        <view class="device-container">
            <view class="device-search-container"></view>
            <view class="device-pannel">
                <view class="list-group">
                    <view class="list-item" @tap="bindTest" v-for="(item, index) in deviceList" :key="index">
                        <view class="list-item-head flex-row flex-between">
                            <view class="flex-row flex-start">
                                <image class="car-icon" :src="iconList[item.car_icon].product"></image>
                                <text>{{ item.battery_sn }}</text>
                                <text v-if="item.user_id != 0" class="i-tag i-tag-red">已租</text>
                                <text v-else class="i-tag i-tag-green">未租</text>
                            </view>
                            <view class="order-status">
                                <text class="i-status shop-name">{{ item.shop_name }}</text>
                            </view>
                        </view>

                        <view class="list-item-body">
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">型号</view>
                                <view class="form-value">{{ item.battery_type_id }}</view>
                            </view>
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">单价</view>
                                <view class="form-value">
                                    <text>{{ item.hire_price }}元/</text>
                                    <text v-if="item.hire_duration_unit == 1">天</text>
                                    <text v-else-if="item.hire_duration_unit == 2">月</text>
                                    <text v-else-if="item.hire_duration_unit == 3">年</text>
                                </view>
                            </view>
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">押金</view>
                                <view class="form-value">{{ item.pledge_money }}</view>
                            </view>
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">租赁用户</view>
                                <view class="form-value">{{ item.user_name }} {{ item.phone }}</view>
                            </view>
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">起租时间</view>
                                <view class="form-value">{{ item.hire_time }}</view>
                            </view>
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">租赁时长</view>
                                <view class="form-value">
                                    <text>{{ item.chire_duration }}</text>
                                    <text>天</text>
                                </view>
                            </view>
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">到期时间</view>
                                <view class="form-value">{{ item.hire_expire_time }}</view>
                            </view>
                            <view class="form-item flex-row flex-between">
                                <view class="form-label">备注</view>
                                <view class="form-value">{{ item.remark }}</view>
                            </view>
                        </view>

                        <view v-if="item.pay_type == 1 && item.status == 0" class="list-item-footer flex-row flex-end">
                            <view class="op-btn" @tap="bindCheckPay" :data-ordersn="item.order_sn" :data-idx="index">确认支付</view>
                        </view>
                    </view>

                    <view class="battery-item" v-for="(item, index) in deviceList" :key="index">
                        <view class="batter-info-group flex-row flex-between">
                            <view class="battery-icon">
                                <image class="battery-icon-img" :src="item.iconProduct"></image>
                            </view>
                            <view class="battery-info flex-row flex-between">
                                <view class="no-class" @tap="bindTapToMap" :data-macid="item.macid">
                                    <view class="battery-name">{{ item.dev_name }}</view>
                                    <view class="battery-macid">IMEI:{{ item.macid }}</view>
                                    <view class="battery-macid">
                                        <view class="flex-row">
                                            <view class="flex-row" style="color: rgb(64, 187, 85)">{{ item.voltage }} V</view>
                                            <view class="flex-row" style="margin-left: 8px">里程: {{ item.mil }} 公里</view>
                                            <view class="flex-row" style="margin-left: 8px">{{ item.su }}km/h</view>
                                        </view>
                                    </view>
                                    <view class="battery-com"></view>
                                </view>
                                <form :report-submit="true" @submit="toRenew" :data-macid="item.macid">
                                    <button class="no-class no-btn" form-type="submit">
                                        <view v-if="item.surplus_days >= 0" class="b-day">剩余{{ item.surplus_days }}天</view>
                                        <view v-else class="b-day">已过期{{ item.surplus_days * -1 }}天</view>
                                        <view v-if="item.surplus_days > 5" class="b-status">使用正常</view>
                                        <view v-else class="b-status b-status-xf">立即续费</view>
                                    </button>
                                </form>
                            </view>
                        </view>

                        <view class="op-group flex-row flex-around">
                            <picker mode="date" :value="date" :end="curDate" @change="bindDateChange" :data-macid="item.macid">
                                <view class="op-item flex-row flex-start">
                                    <view>
                                        <image class="op-icon" src="/static/resource/images/g-j.png"></image>
                                    </view>
                                    <view class="op-des">轨迹</view>
                                </view>
                            </picker>
                            <form :report-submit="true" @submit="navToPage" :data-url="'/pages/warnList/warnList?macid=' + item.macid">
                                <view class="op-item flex-row flex-start">
                                    <view>
                                        <image class="op-icon" src="/static/resource/images/b-j.png"></image>
                                    </view>
                                    <!-- <view class="op-des">报警</view> -->
                                    <button class="op-des no-btn" form-type="submit">报警</button>
                                </view>
                            </form>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="show-shop-btn" @tap="handleShowShopContainer">→</view>

        <!-- <movable-area class="mov-area">
    <movable-view style="height: 50px; width: 50px; background: #2d8cf0;z-index: 20" direction="all"></movable-view>
  </movable-area> -->
    </view>
</template>

<style>
@import './device1.css';
</style>