From c462126d2eaf08e95c7bbb7f5db0a1a826356a75 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 28 十一月 2024 15:08:13 +0800
Subject: [PATCH] Merge branch 'master' of http://139.186.142.91:10010/r/productDev/funingyunwei
---
h5/pages/operation/device.vue | 376 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 376 insertions(+), 0 deletions(-)
diff --git a/h5/pages/operation/device.vue b/h5/pages/operation/device.vue
new file mode 100644
index 0000000..125001a
--- /dev/null
+++ b/h5/pages/operation/device.vue
@@ -0,0 +1,376 @@
+<template>
+ <view class="main_app">
+ <view class="list">
+ <view class="item">
+ <view class="la"><text class="red">*</text>閫夋嫨璁惧</view>
+ <view class="line">
+ <view class="sel_wrap" @click="showModal = true">
+ <view class="left" :class="param.name ? '' : 'placeholder9'">{{ param.name ? param.name : '璇烽�夋嫨璁惧' }}</view>
+ <u-icon name="arrow-right" color="#999999" size="17"></u-icon>
+ </view>
+ <image class="icon" src="@/static/side/scan.png" mode=""></image>
+ </view>
+ </view>
+ <view class="item">
+ <view class="la">璁惧鐘舵��</view>
+ <view class="line">
+ <view class="radio_wrap">
+ <view class="ite" :class="{active: param.status == 0}" @click="statusChange(0)">姝ｅ父</view>
+ <view class="ite" :class="{active: param.status == 1}" @click="statusChange(1)">鎹熷潖</view>
+ <view class="ite" :class="{active: param.status == 2}" @click="statusChange(2)">鎶ュ簾</view>
+ </view>
+ </view>
+ </view>
+ <view class="item">
+ <view class="la">涓婁紶瑙嗛/鍥剧墖</view>
+ <view class="upload_wrap">
+ <view class="upload_file" @click="showUpload = true">
+ <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
+ <view class="mt6">鍥剧墖/瑙嗛</view>
+ </view>
+ <view class="upload_file" v-for="(item, i) in dealFileList" :key="i">
+ <u-icon class="close" size="20" name="close-circle-fill" color="red"
+ @click="fileDel('dealBeforeFileList', i)"></u-icon>
+ <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
+ <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
+ </view>
+ </view>
+ </view>
+ <view class="item">
+ <view class="la">杩愮淮澶囨敞</view>
+ <view class="line">
+ <textarea v-model="param.checkInfo" placeholder="璇疯緭鍏�" placeholder-class="placeholder9" />
+ </view>
+ </view>
+ </view>
+ <view class="sub_btn">
+ 鎻愪氦
+ </view>
+ <!-- -->
+ <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
+ <view class="sel_upload_wrap">
+ <view class="btn" @click="uploadImage">閫夋嫨鍥剧墖</view>
+ <view class="btn" @click="uploadVideo">閫夋嫨瑙嗛</view>
+ </view>
+ </u-popup>
+ <!-- -->
+ <u-popup :show="showModal" @close="showModal = false" :safeAreaInsetBottom="true" :round="10" closeable closeOnClickOverlay>
+ <view class="appr_modal">
+ <view class="title">璇烽�夋嫨璁惧</view>
+ <view class="search_wrap">
+ <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>
+ <input v-model="searchValue" @confirm="getDevice()" type="text" placeholder="鎼滅储璁惧鍚嶇О/缂栧彿" placeholder-class="placeholder9" />
+ </view>
+ <view class="modal_list">
+ <view class="item">
+ <view class="name">璁惧name</view>
+ <image src="@/static/radioed.png" mode=""></image>
+ </view>
+ </view>
+ <view class="sub_btn">
+ 纭畾閫夋嫨
+ </view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ import {
+ uploadUrl
+ } from '@/api'
+ import dayjs from 'dayjs';
+ export default {
+ data() {
+ return {
+ param: {status: 0},
+ showUpload: false,
+ showModal: false,
+ dealFileList: [],
+
+ searchValue: '',
+ deviceList: [],
+ activeDevice: {}
+ };
+ },
+ methods: {
+ getDevice(){
+
+ },
+ statusChange(val){
+ this.param.status = val
+ },
+ fileDel(str, i) {
+ this[str].splice(i, 1);
+ },
+ uploadImage() {
+ this.showUpload = false;
+ let token = uni.getStorageSync('token') || '';
+ uni.chooseImage({
+ count: 4,
+ success: chooseImageRes => {
+ uni.showLoading({
+ title: '涓婁紶涓�',
+ mask: true
+ });
+ const tempFilePaths = chooseImageRes.tempFilePaths;
+ let imgs = tempFilePaths.map((value, index) => {
+ return {
+ name: 'file',
+ uri: value
+ };
+ });
+ uni.uploadFile({
+ url: `${uploadUrl}`,
+ files: imgs,
+ name: 'file',
+ formData: {
+ folder: 'HIDDEN_DANGER_FILE'
+ },
+ header: {
+ Dm_user_token: token
+ },
+ success: uploadFileRes => {
+ let res = JSON.parse(uploadFileRes.data);
+ if (res.data && res.data.length > 0) {
+ res.data.forEach(i => {
+ i.type = 0;
+ i.fileurl = i.imgaddr;
+ i.fileurlFull = i.url;
+ this.submitFileList.push(i);
+ });
+ }
+ },
+ fail(err) {
+ console.log('err', err);
+ },
+ complete() {
+ uni.hideLoading();
+ // if (i === chooseImageRes.tempFilePaths.length - 1) {
+ // uni.hideLoading()
+ // }
+ }
+ });
+ }
+ });
+ },
+ uploadVideo() {
+ this.showUpload = false;
+ let token = uni.getStorageSync('token') || '';
+ uni.chooseVideo({
+ success: chooseImageRes => {
+ uni.showLoading({
+ title: '涓婁紶涓�',
+ mask: true
+ });
+ uni.uploadFile({
+ url: `${uploadUrl}`,
+ filePath: chooseImageRes.tempFilePath,
+ header: {
+ Dm_user_token: token
+ },
+ name: 'file',
+ formData: {
+ folder: 'HIDDEN_DANGER_FILE'
+ },
+ success: uploadFileRes => {
+ let res = JSON.parse(uploadFileRes.data);
+ if (res.data && res.data.length > 0) {
+ res.data.forEach(i => {
+ i.type = 1;
+ i.fileurl = i.imgaddr;
+ i.fileurlFull = i.url;
+ this.submitFileList.push(i);
+ });
+ }
+ },
+ complete() {
+ uni.hideLoading();
+ }
+ });
+ }
+ });
+ }
+ }
+ }
+</script>
+
+<style lang="scss">
+ .list {
+
+ .item {
+ .la {
+ margin-top: 30rpx;
+ }
+
+ .line {
+ display: flex;
+ align-items: center;
+ .icon{
+ width: 52rpx;
+ height: 52rpx;
+ margin-left: 40rpx;
+ }
+ textarea {
+ box-sizing: border-box;
+ width: 690rpx;
+ min-height: 160rpx;
+ background-color: #f7f7f7;
+ font-size: 28rpx;
+ color: #333333;
+ padding: 24rpx;
+ border-radius: 8rpx;
+ margin-bottom: 30rpx;
+ margin-top: 20rpx;
+ }
+ }
+
+ .sel_wrap {
+ flex: 1;
+ height: 90rpx;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1rpx solid #E5E5E5;
+ }
+ .radio_wrap{
+ margin-top: 20rpx;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ .ite{
+ width: 216rpx;
+ height: 68rpx;
+ background: #F7F7F7;
+ border-radius: 36rpx;
+ font-size: 30rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .active{
+ color: $primaryColor;
+ border-color: $primaryColor;
+ background: rgba(0,104,255,0.1);
+ }
+ }
+ .upload_wrap {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 30rpx;
+ }
+
+ .upload_file {
+ margin-top: 24rpx;
+ width: 156rpx;
+ height: 156rpx;
+ margin-right: 20rpx;
+ border: 2rpx solid #e5e5e5;
+ background: #f7f7f7;
+ color: #666666;
+ font-size: 22rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ &:nth-of-type(4n) {
+ margin-right: 0;
+ }
+
+ .close {
+ position: absolute;
+ right: -20rpx;
+ top: -20rpx;
+ z-index: 9999;
+ }
+
+ image {
+ width: 100%;
+ height: 100%;
+ }
+
+ video {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ }
+ }
+ .sel_upload_wrap {
+ width: 100%;
+ border-top: 1px solid #333333;
+ box-shadow: 0 1 1 #333333;
+
+ .btn {
+ height: 90rpx;
+ line-height: 90rpx;
+ text-align: center;
+ }
+ }
+ .sub_btn {
+ position: fixed;
+ bottom: 68rpx;
+ left: 40rpx;
+ width: 670rpx;
+ height: 88rpx;
+ background: $primaryColor;
+ box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);
+ border-radius: 44rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #FFFFFF;
+ }
+ .appr_modal {
+ padding: 36rpx 30rpx 0;
+ height: calc( 100vh - 120rpx );
+ .title {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #222222;
+ margin-bottom: 40rpx;
+ text-align: center;
+ }
+
+ .search_wrap {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 76rpx;
+ background: #f2f2f2;
+ border-radius: 38rpx;
+ padding-left: 30rpx;
+ input{
+ flex: 1;
+ }
+ .search {
+ width: 28rpx;
+ height: 28rpx;
+ }
+ }
+ .modal_list{
+ height: calc( 100% - 360rpx );
+ .item{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 100rpx;
+ font-size: 30rpx;
+ border-bottom: 1px solid #E5E5E5;
+ image{
+ width: 40rpx;
+ height: 40rpx;
+ }
+ }
+ .active{
+ color: $primaryColor;
+ }
+ }
+
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3