|
@@ -0,0 +1,545 @@
|
|
|
+<template>
|
|
|
+ <view class="jpmain ">
|
|
|
+ <view class="gradient-header">
|
|
|
+ <view class="jpback">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="body">
|
|
|
+ <view class="page-top">
|
|
|
+ <view class="text1">地锁名称</view>
|
|
|
+ <view class="text2">地锁名称11<u-icon name="edit-pen" size="32" color="#FFFFFF" ></u-icon></view>
|
|
|
+ </view>
|
|
|
+ <view class="page">
|
|
|
+ <view class="info-title">
|
|
|
+ <view class="name">设备信息</view>
|
|
|
+ <view class="value">
|
|
|
+ <view class="pack-up" v-show="listShow" @click="listShow=false">
|
|
|
+ 收起<u-icon name="arrow-up" size="32" color="#AAAAAA" ></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="pack-up" v-if="!listShow" @click="listShow=true">
|
|
|
+ 展开<u-icon name="arrow-down" size="32" color="#AAAAAA" ></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="table">
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">设备型号</view>
|
|
|
+ <view class="value">{{obj.model}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">出厂编号</view>
|
|
|
+ <view class="value">{{obj.deviceNo}}</view>
|
|
|
+ </view>
|
|
|
+ <template v-if="!listShow">
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">固件版号</view>
|
|
|
+ <view class="value">{{obj.firmwareVersion}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">防护等级</view>
|
|
|
+ <view class="value">{{obj.protectionGrade}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">输入电压</view>
|
|
|
+ <view class="value">{{obj.inputVoltage}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">输出电压</view>
|
|
|
+ <view class="value">{{obj.outputVoltage}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">输出电流</view>
|
|
|
+ <view class="value">{{obj.outputCurrent}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">输出功率</view>
|
|
|
+ <view class="value">{{obj.outputPower}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">生产日期</view>
|
|
|
+ <view class="value">{{obj.manufactureTime}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">标准依据</view>
|
|
|
+ <view class="value">{{obj.standardBasis}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">联网卡号</view>
|
|
|
+ <view class="value">{{obj.trafficCardNumber}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">资费标准</view>
|
|
|
+ <view class="value">{{obj.tariffStandard}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">设备启动时间</view>
|
|
|
+ <view class="value">{{obj.bindingTime}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">设备质保期</view>
|
|
|
+ <view class="value">{{obj.shelfLife}}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="page">
|
|
|
+ <view class="info-title">
|
|
|
+ <view class="name">联网信息</view>
|
|
|
+ <view class="value">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="table">
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">联网卡号</view>
|
|
|
+ <view class="value">{{obj.trafficCardNumber}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">有效期至</view>
|
|
|
+ <view class="value">{{obj.expirationTime?obj.expirationTime.split(' ')[0]:''}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="tips">
|
|
|
+ <u-icon style=" margin-top: 2px;" size="30" name="info-circle"></u-icon>
|
|
|
+ <view>
|
|
|
+ 家用充电桩内含物联网卡,此卡随设备出厂时赠送三年免费使用时长,三年后将按5元/月资费标准收取费用。
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="page">
|
|
|
+ <view class="info-title">
|
|
|
+ <view class="name">充电白名单<span class="span">({{vipUserList.length}}/3)</span></view>
|
|
|
+ <view class="value" @click="addUser()">
|
|
|
+ <u-icon style=" margin-top: 2px;" size="30" name="plus"></u-icon> 添加
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="table">
|
|
|
+ <table>
|
|
|
+ <tr>
|
|
|
+ <td>姓名</td>
|
|
|
+ <td>手机号</td>
|
|
|
+ <td>车牌号</td>
|
|
|
+ <td>操作</td>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(item,i) in vipUserList" :key="i">
|
|
|
+ <td>{{item.userName}}</td>
|
|
|
+ <td>{{item.phone}}</td>
|
|
|
+ <td>{{item.carNum==0?'':item.carNum}}</td>
|
|
|
+ <td class="" style="color:#1677FF" @click="editUser(item)">修改</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </table>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-popup v-model="popupShow" mode="bottom" :closeable="true" border-radius="30">
|
|
|
+ <view class="popup-screen">
|
|
|
+ <view class="popup-title">{{vipUser.id?'修改':'添加'}}白名单信息</view>
|
|
|
+ <view style="padding: 4px;">白名单车主姓名<span style="color: red;">*</span></view>
|
|
|
+ <u-input :customStyle="customStyle" v-model="vipUser.name" placeholder="白名单车主姓名(必填)"></u-input>
|
|
|
+ <view style="padding: 4px;">白名单车主手机号码<span style="color: red;">*</span></view>
|
|
|
+ <u-input :customStyle="customStyle" type="number" v-model="vipUser.phone"
|
|
|
+ placeholder="白名单车主手机号码(必填)"></u-input>
|
|
|
+ <view style="padding: 4px;">白名单车主车牌号</view>
|
|
|
+ <u-input :customStyle="customStyle" v-model="vipUser.carNum" placeholder="白名单车主车牌号"></u-input>
|
|
|
+
|
|
|
+ <view v-if="vipUser.id" style="display: flex;">
|
|
|
+ <u-button type="info" style="margin-top: 10px;width: 49%;" shape="circle"
|
|
|
+ @click="delUser()">删除</u-button>
|
|
|
+ <u-button type="success" style="margin-top: 10px;width: 49%;" shape="circle"
|
|
|
+ @click="submitUser()">保存</u-button>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+
|
|
|
+ <u-button type="success" style="margin-top: 10px;" shape="circle"
|
|
|
+ @click="submitUser()">保存</u-button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-modal v-model="delShow" @confirm="confirmDelete" confirm-color="#fa3534" :show-cancel-button="true"
|
|
|
+ ref="uModal" title="删除白名单用户" content="是否删除当前白名单用户?" confirm-text="删除"></u-modal>
|
|
|
+
|
|
|
+ <view class="floating-button">
|
|
|
+ <view class="button">
|
|
|
+
|
|
|
+ 保存
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/pagejs/mylock.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listShow: true,
|
|
|
+ popupShow: false,
|
|
|
+ customStyle: {
|
|
|
+ "border-radius": "50px",
|
|
|
+ "background-color": 'rgba(242, 244, 246, 1)',
|
|
|
+ padding: "5px 20px",
|
|
|
+ margin: "5px 0 "
|
|
|
+ },
|
|
|
+ applyList: [],
|
|
|
+ vipUserList: [],
|
|
|
+ vipUser: {},
|
|
|
+ delShow: false,
|
|
|
+ obj: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ //this.myApplyList()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submitUser() {
|
|
|
+ if (!this.vipUser.name) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请填写白名单车主姓名"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.vipUser.phone) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请填写白名单车主手机号码"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API_apply.saveVipUser(this.vipUser).then((res) => {
|
|
|
+ //this.obj = res.data
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ this.delShow = false
|
|
|
+ this.popupShow = false
|
|
|
+ this.findVipUser(1)
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ confirmDelete() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API_apply.deleteVipUser({
|
|
|
+ id: this.vipUser.id
|
|
|
+ }).then((res) => {
|
|
|
+ //this.obj = res.data
|
|
|
+ uni.hideLoading()
|
|
|
+ this.delShow = false
|
|
|
+ this.popupShow = false
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作成功"
|
|
|
+ })
|
|
|
+ this.findVipUser(1)
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delUser() {
|
|
|
+ this.delShow = true;
|
|
|
+ },
|
|
|
+ editUser(item) {
|
|
|
+ this.popupShow = true;
|
|
|
+ this.vipUser = item;
|
|
|
+ this.vipUser.name = item.userName
|
|
|
+ var item = this.applyList[0]
|
|
|
+ this.vipUser.stationId = item.stationId
|
|
|
+ if (this.vipUser.carNum == 0) {
|
|
|
+ this.vipUser.carNum = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addUser() {
|
|
|
+ if (this.vipUserList.length >= 3) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "添加白名单用户已达到上限"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.popupShow = true;
|
|
|
+ this.vipUser = {}
|
|
|
+ var item = this.applyList[0]
|
|
|
+ this.vipUser.stationId = item.stationId
|
|
|
+
|
|
|
+ },
|
|
|
+ findDeviceByNo() {
|
|
|
+ var item = this.applyList[0]
|
|
|
+ API_apply.findDeviceByNoD({
|
|
|
+ deviceNo: item.deviceNo
|
|
|
+ }).then((res) => {
|
|
|
+ this.obj = res.data.chargingDevice
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ findVipUser(bl) {
|
|
|
+ if (bl) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var item = this.applyList[0]
|
|
|
+ this.vipUserList = []
|
|
|
+ API_apply.findVipUser({
|
|
|
+ stationId: item.stationId
|
|
|
+ }).then((res) => {
|
|
|
+ if (bl) {
|
|
|
+
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作成功"
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.vipUserList = res.data.vipUserList
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ myApplyList() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API_apply.myApplyList({
|
|
|
+
|
|
|
+ }).then((res) => {
|
|
|
+ //this.obj = res.data
|
|
|
+
|
|
|
+ this.applyList = res.data.applyList;
|
|
|
+ this.findVipUser()
|
|
|
+ this.findDeviceByNo()
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background-color: rgba(242, 244, 246, 1);
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .gradient-header {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jpback {
|
|
|
+ height: 360rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(22,119,255,1) 11%,rgba(242,244,246,1) 100%); }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ padding: 32rpx;
|
|
|
+ }
|
|
|
+ .page-top{
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ margin: 48rpx 0;
|
|
|
+ .text1{
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+ .text2{
|
|
|
+ font-size: 40rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+
|
|
|
+ padding: 32rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgb(16, 16, 16);
|
|
|
+
|
|
|
+ .info-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 24rpx ;
|
|
|
+ .name{
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ .span{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pack-up {
|
|
|
+
|
|
|
+
|
|
|
+ color: rgba(119, 119, 119, 100);
|
|
|
+ }
|
|
|
+ .tips{
|
|
|
+ margin-top: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .table{
|
|
|
+ table{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .row{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 72rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .name{
|
|
|
+ width: 240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ height: 72rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ }
|
|
|
+ /* 隔行变色: 偶数行设置背景色 */
|
|
|
+ .row:nth-child(odd) {
|
|
|
+ background-color: #f9f9f9; /* 偶数行 */
|
|
|
+ }
|
|
|
+ tr:nth-child(odd) {
|
|
|
+ background-color: #f9f9f9; /* 偶数行 */
|
|
|
+ }
|
|
|
+ .row:nth-child(even) {
|
|
|
+ background-color: #ffffff; /* 奇数行 */
|
|
|
+ }
|
|
|
+ tr:nth-child(even) {
|
|
|
+ background-color: #ffffff; /* 奇数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-screen{
|
|
|
+ padding: 40rpx;
|
|
|
+ .popup-title{
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .cardList{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ .cardInfo{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 1);
|
|
|
+ .name{
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cardInfoCk{
|
|
|
+ background-color: rgba(225, 247, 237, 1);
|
|
|
+ border: 1px solid rgba(0, 185, 98, 1);
|
|
|
+
|
|
|
+ .price{
|
|
|
+ color: rgba(0, 161, 85, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .floating-button {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ /* 距离底部 20px */
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ height: 120rpx;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .button {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ height: 80rpx;
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 12rpx;
|
|
|
+
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|