h5

liukangdong

2024-11-28 19754e8f95a24d3b3b0cd023badd245fea8f6cd5

h5

 h5/.hbuilderx/launch.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
{
    "version" : "1.0",
    "configurations" : [
        {
            "openVueDevtools" : false,
            "type" : "uni-app:h5"
        }
    ]
}

 h5/App.vue

@@ -15,13 +15,21 @@
<style lang="scss">
/*每个页面公共css */
@import "uview-ui/index.scss";

body{
    font-size: 28rpx;
}
.flex-cb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.container {
  height: 100%;
  width: 100%;
@@ -110,7 +118,9 @@
  padding: 16rpx;
  position: relative;
}

.red{
    color: red;
}
.card::after {
  content: "";
  display: block;

 h5/manifest.json

@@ -121,6 +121,7 @@
        },
        // "base" : "/h5/"
        "devServer" : {
                        "open": false,
            "port" : 8090,
            "historyApiFallback" : true,
            "disableHostCheck" : true,

 h5/pages.json

@@ -2,13 +2,79 @@
    "easycom": {

        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"

    },

    "pages": [

        {

            "path": "pages/index/index",

    "pages": [{

            "path": "pages/index",

            "style": {

                "navigationBarTitleText": "访客中心",

                "navigationBarTitleText": "首页",

                "enablePullDownRefresh": false

            }

        },

        {

            "path": "pages/login",

            "style": {

                "navigationBarTitleText": "登录"

            }

        },

        {

            "path": "pages/workOrder/list",

            "style": {

                "navigationBarTitleText": "工单列表"

            }

        },

        {

            "path": "pages/workOrder/detail",

            "style": {

                "navigationBarTitleText": "工单详情"

            }

        },
        {
            "path" : "pages/workOrder/edit",
            "style" : 
            {
                "navigationBarTitleText" : "新增工单"
            }
        },
        {
            "path" : "pages/operation/record",
            "style" : 
            {
                "navigationBarTitleText" : "运维记录"
            }
        },
        {
            "path" : "pages/operation/detail",
            "style" : 
            {
                "navigationBarTitleText" : "运维详情"
            }
        },
        {
            "path" : "pages/operation/device",
            "style" : 
            {
                "navigationBarTitleText" : "设备运维"
            }
        },
        {
            "path" : "pages/polling/task",
            "style" : 
            {
                "navigationBarTitleText" : "巡检任务"
            }
        },
        {
            "path" : "pages/polling/detail",
            "style" : 
            {
                "navigationBarTitleText" : "运维详情"
            }
        },
        {
            "path" : "pages/polling/point",
            "style" : 
            {
                "navigationBarTitleText" : "巡检点"
            }
        }

    ],

    "globalStyle": {


 h5/pages/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,135 @@
<template>

    <view class="main_app">

        <view class="hone_name title">{{ userInfo.name }}，欢迎登录</view>

        <view class="home_con">

            <image class="bg" src="@/static/home/home_bg.jpg" mode=""></image>

            <view class="h1">阜宁文体中心</view>

            <view class="h2">欢迎你</view>

        </view>

        <view class="title">业务办理</view>

        <view class="list">

            <view v-for="item in list1" class="item" @click="itemClick(item)">

                <image :src="item.img"></image>

                <view class="name">{{item.name}}</view>

            </view>

        </view>

        <view class="title">业务查询</view>

        <view class="list">

            <view v-for="item in list2" class="item" @click="itemClick(item)">

                <image :src="item.img"></image>

                <view class="name">{{item.name}}</view>

            </view>

        </view>

    </view>



</template>



<script>

    export default {

        data() {

            return {

                userInfo: uni.getStorageSync('userInfo') || {},

                list1: [{

                        name: '扫码巡检',

                        url: '',

                        img: require('@/static/home/ic_fangkebaobei@2x.png'),

                        auth: 'weixin:menu:visitcar'

                    },

                    {

                        name: '工单服务',

                        url: '/pages/workOrder/list',

                        img: require('@/static/home/ic_fangkeba.png'),

                        auth: 'weixin:menu:visitcar'

                    },

                    {

                        name: '设备运维',

                        url: '/pages/operation/device',

                        img: require('@/static/home/ic_fangkebaobe@2x.png'),

                        auth: 'weixin:menu:visitcar'

                    },

                ],

                list2: [{

                        name: '巡检任务',

                        url: '/pages/polling/task',

                        img: require('@/static/home/ic_renwuzhongxin@2x.png'),

                        auth: 'weixin:menu:visitcar'

                    },

                    {

                        name: '运维记录',

                        url: '/pages/operation/record',

                        img: require('@/static/home/ic_wodehuiyi@2x.png'),

                        auth: 'weixin:menu:visitcar'

                    },

                ]

            }

        },

        onLoad() {



        },

        methods: {

            itemClick(item) {

                uni.navigateTo({

                    url: item.url

                })

            },

			
        }

    }

</script>



<style lang="scss" scoped>

    .main_app {

        padding: 0 30rpx;



        .hone_name {



            height: 90rpx;

            display: flex;

            align-items: center;

        }



        .home_con {

            width: 690rpx;

            height: 270rpx;

            border-radius: 8rpx;

            margin-bottom: 40rpx;

            padding: 36rpx 40rpx;

            position: relative;

            color: #fff;



            .h1 {

                font-weight: bold;

                font-size: 44rpx;

                margin-bottom: 14rpx;

            }

        }



        .title {

            font-weight: 500;

            font-size: 34rpx;

        }



        .list {

            margin-top: 30rpx;

            margin-bottom: 80rpx;

            display: flex;



            .item {

                display: flex;

                flex-direction: column;

                align-items: center;

                width: 25%;



                image {

                    width: 88rpx;

                    height: 88rpx;

                    margin-bottom: 20rpx;

                }



                .name {

                    font-size: 26rpx;

                }

            }

        }

    }

</style>

 h5/pages/index/index.vue

ÎļþÒÑɾ³ý

 h5/pages/login.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,225 @@
<template>
  <view class="login">
    <view class="login_title">欢迎登录</view>
    <view class="login_title login_title2">阜宁文体中心</view>
    <view class="login_list">
      <view class="login_list_item">
        <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
        <input v-model="form.username" maxlength="18" placeholder="请输入手机号" />
      </view>
<!--      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
        <input v-model="form.password" type="password" placeholder="密码" />
      </view> -->
      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix"></image>
        <input v-model="form.code" placeholder="请输入验证码" type="text" />
        <view class="btn">获取验证码</view>
      </view>
    </view>
    <view class="login_btn">
      <view class="login_btn_n" @click="onLogin">登录</view>
    </view>
  </view>
</template>

<script>
import { loginPost, loginCaptcha, getUserInfo, getSystemDictData } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'login',

  data() {
    return {
      form: {
        // username: '18056814089',
        username: '',
        password: '',
                code: ''
      },
      isShowProtocol: false,
      ProtocolFlag: false,
      captcha: {},
      htmlText: ''
    }
  },

  onLoad() {
    this.initCaptcha()
  },
  onBackPress(options) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
    return true
  },
  methods: {
    ...mapMutations(["setToken", "setUserInfo"]),
    changeFalg() {
      this.ProtocolFlag = !this.ProtocolFlag
    },
    getContent() {
      getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'USER_PROTOCOL'
      }).then(res => {
        this.htmlText = res.data.code
        this.isShowProtocol = true
      })
    },
    showContent() {
      this.getContent()
    },
    initCaptcha() {
      loginCaptcha().then(res => {
        this.captcha = res.data
      })
    },

    onLogin() {
      const { form, ProtocolFlag } = this
      if (!ProtocolFlag) return uni.showToast({
        title: '请先阅读并同意用户协议',
        icon: 'none'
      })
      if (!form.username) return uni.showToast({
        title: '账号不能为空',
        icon: 'none'
      })
      if (!form.password) return uni.showToast({
        title: '密码不能为空',
        icon: 'none'
      })
      if (!form.code) return uni.showToast({
        title: '验证码不能为空',
        icon: 'none'
      })
      loginPost({
        ...form,
        uuid: this.captcha.uuid,
        openId: this.$store.state.openId
      }).then(res => {
        if (res.code === 200) {
          this.setToken(res.data)
          getUserInfo().then(ress => {
            this.setUserInfo(ress.data)
            uni.redirectTo({
              url: "/pages/staff/index"
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  padding-top: 130rpx;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  background: linear-gradient( 180deg, #C5DDFF 0%, #FFFFFF 100%);
  .login_title {
    font-weight: 500;
    font-size: 52rpx;
    color: #222222;
    margin-top: 180rpx;
        width: 100%;
        padding-left: 60rpx;
  }
    .login_title2{
        margin-top: 10rpx;
        margin-bottom: 80rpx;
    }
  .login_list {
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    .login_list_item {
      width: 100%;
      border-radius: 50rpx;
      height: 98rpx;
      padding: 0 40rpx;
      box-sizing: border-box;
      background: #ffffff;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        margin-bottom: 0 !important;
      }
      image {
        flex-shrink: 0;
        width: 40rpx;
        height: 40rpx;
      }
      .btn{
          width: 145rpx;
          color:  $primaryColor;
      }
      input {
        flex: 1;
        height: 100%;
        color: #666666;
        margin-left: 24rpx;
        border: none;
      }
    }
  }
  .login_btn {
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    margin-top: 60rpx;
    .for_psd {
      color: $uni-color-primary;
      width: 140rpx;
      text-align: center;
      margin: 40rpx auto;
    }
    .login_btn_n {
      width: 100%;
      height: 98rpx;
      background: $uni-color-primary;
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      border-radius: 50rpx;
            font-weight: 500;
            font-size: 32rpx;
    }
  }
  .deal_wrap {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .deal {
      color: $uni-color-primary;
    }
    .checked {
      width: 48rpx;
      margin-right: 12rpx;
    }
  }
}
.modal {
  width: 690rpx;
  min-height: 920rpx;
  max-height: 720px;
  border-radius: 24rpx;
  padding: 32rpx;
}
</style>

 h5/pages/operation/detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,92 @@
<template>

    <view>

        <view class="content">

            <view class="name_wrap">

                <view class="name">xx设备</view>

                <view class="status red">正常</view>

            </view>

            <view class="line">运维人：xxx</view>

            <view class="line">运维时间：121212</view>

        </view>
        <!--  -->
        <view class="remark">
            <view class="title">运维备注</view>
            <view class="file_list">
                <view class="file">
					
                </view>
            </view>
            <view class="desc">remark</view>
        </view>

    </view>

</template>



<script>

    export default {

        data() {

            return {



            };

        }

    }

</script>



<style lang="scss" scoped>

    .content {

        flex: 1;

        color: #666666;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        height: 260rpx;
        padding: 30rpx;
        border-bottom: 20rpx solid #f7f7f7;

        .name_wrap {

            display: flex;

            justify-content: space-between;

            align-items: center;



            .name{
                font-weight: 600;
                font-size: 34rpx;
                color: #222222;
            }



            .status {

                color: $primaryColor;

            }

        }

    }

    .remark{
        padding: 0 30rpx;
        .title{
            font-weight: 600;
            font-size: 32rpx;
            color: #222222;
            height: 104rpx;
            display: flex;
            align-items: center;
        }
        .file_list{
            display: flex;
            flex-wrap: wrap;
			
            .file{
                width: 156rpx;
                height: 156rpx;
                border-radius: 12rpx;
                margin-right: 22rpx;
                margin-bottom: 22rpx;
                &:nth-of-type(4n){
                    margin-right: 0;
                }
            }
        }
        .desc{
            margin-top: 8rpx;
            padding: 24rpx 30rpx;
            background: #F7F7F7;
            border-radius: 12rpx;
        }
    }
</style>

 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>

 h5/pages/operation/record.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,134 @@
<template>

    <view class="main_app">

        <view class="head_wrap">

            <view class="search_wrap">

                <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>

                <input v-model="param.keyword" @confirm="getList()" type="text" placeholder="搜索设备名称/编号" placeholder-class="placeholder9" />

            </view>

            <view class="name_wrap" @click="showModal = true">

                <view class="name">运维人</view>

                <u-icon :name="showModal  ? 'arrow-right' : 'arrow-down'" color="#999999" size="12"></u-icon>

            </view>

        </view>

        <!--  -->

        <view class="list">

            <view class="item" v-for="item in 10" @click="itemClick(item)">

                <image src="@/static/side/ic_shuiyu@2x.png" class="icon"></image>

                <view class="content">

                    <view class="name_wrap">

                        <view class="name">

                            <text class="device">xx设备</text>

                            <text>D20231</text>

                        </view>

                        <view class="status red">正常</view>

                    </view>

                    <view class="line">运维人：xxx</view>

                    <view class="line">运维时间：121212</view>

                </view>



            </view>

        </view>

        <!--  -->

        <u-picker :show="showModal" keyName="name" @cancel="showModal = false" @confirm='confirm'

            :columns="columns"></u-picker>

    </view>

</template>



<script>

    export default {

        data() {

            return {

                param: {},

                columns: [],

                showModal: false

            };

        },

        methods: {
            getList() {},

            confirm() {

                this.showModal = false

            },
            itemClick() {
                uni.navigateTo({
                    url: '/pages/operation/detail'
                })
            }

        }

    }

</script>



<style lang="scss" scoped>
    .main_app{
        padding: 0 30rpx;
    }

    .head_wrap {

        display: flex;

        align-items: center;



        .search_wrap {

            display: flex;

            align-items: center;

            width: 540rpx;

            height: 76rpx;

            background: #F7F7F7;

            border-radius: 38rpx;

            padding-left: 30rpx;

            input{
                flex: 1;
            }

            .search {

                width: 28rpx;

                height: 28rpx;

            }

        }



        .name_wrap {

            display: flex;

            align-items: center;

            margin-left: 12rpx;

            justify-content: flex-end;

            flex: 1;

        }

    }



    .list {

        .item {

            display: flex;

            height: 228rpx;
            padding: 30rpx 0;
            border-bottom: 2rpx solid #E5E5E5;

            .icon {

                width: 80rpx;

                height: 80rpx;
                margin-right: 24rpx;

            }



            .content {

                flex: 1;
                color: #666666;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .name_wrap{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .name{
                        display: flex;
                        align-items: flex-end;
                        font-size: 26rpx;
                        .device{
                            font-weight: 600;
                            font-size: 34rpx;
                            color: #222222;
                            margin-right: 6rpx;
                        }
                    }
                    .status{
                        color: $primaryColor;
                    }
                }

            }

        }

    }

</style>

 h5/pages/polling/detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,204 @@
<template>

    <view class="main_app">

        <view class="head_bg"></view>

        <view class="info">
            <image v-if="true" class="icon" src="@/static/side/ic_dabiaoed.png" mode=""></image>
            <image v-else class="icon" src="@/static/side/ic_dabiao.png" mode=""></image>

            <view class="head">

                <view class="name">巡检计划</view>

                <view class="status">待开始</view>

            </view>

            <view class="line">

                <view class="la">任务日期：</view>

                <view class="val">2023-23-23</view>

            </view>

            <view class="line">

                <view class="la">执行时间：</view>

                <view class="val">2023-23-23</view>

            </view>

            <view class="line">

                <view class="la">完成情况：</view>

                <view class="val">2023-23-23</view>

            </view>

        </view>

        <view class="title">巡检点列表(1)</view>

        <view class="list">

            <view class="item" v-for="i in 10" @click="itemClick()">

                <view class="icon"></view>

                <view class="content">

                    <view class="head">

                        <view>巡检点10</view>

                        <view class="status">待巡检</view>

                    </view>

                    <view class="desc">巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略

                    </view>

                </view>

            </view>

        </view>

        <view class="footer">
            <view class="sub_btn">扫码巡检</view>
        </view>

    </view>

</template>



<script>

    export default {

        data() {

            return {



            };

        },
        methods: {
            itemClick() {
                uni.navigateTo({
                    url: '/pages/polling/point'
                })
            }
        }

    }

</script>



<style lang="scss">

    page {

        background: #F7F7F7;

    }



    .main_app {

        padding: 30rpx;



        .head_bg {

            background: linear-gradient(180deg, #008BFF 0%, rgba(247, 247, 247, 0) 100%);

            height: 240rpx;

            width: 750rpx;

            position: absolute;

            top: 0;

            left: 0;

        }



        .info {

            width: 690rpx;

            box-shadow: 0rpx 4rpx 16rpx 0rpx #E5E5E5;

            border-radius: 20rpx;

            opacity: 0.95;

            padding: 30rpx 30rpx 10rpx;

            margin-bottom: 40rpx;

            background: linear-gradient(#FFFFFF 0%, #FFFFFF 48%, #F0F5FF 100%);

            position: relative;
            .icon{
                position: absolute;
                right: 30rpx;
                bottom: 30rpx;
                width: 160rpx;
                height: 122rpx;
            }

            .head {

                display: flex;

                justify-content: space-between;

                margin-bottom: 30rpx;



                .name {

                    font-weight: 600;

                    font-size: 34rpx;

                }



                .status {

                    color: $primaryColor;

                }

            }



            .line {

                display: flex;

                margin-bottom: 20rpx;



                .la {

                    color: #666666;

                }

            }

        }



        .title {

            font-weight: 600;

            font-size: 32rpx;

            color: #222222;

            margin-bottom: 30rpx;

        }



        .list {
            height: calc( 100vh - 720rpx ) ;
            overflow: auto;

            .item {

                width: 690rpx;

                height: 188rpx;

                background: linear-gradient(#FFFFFF 0%, #FFFFFF 48%, #F0F5FF 100%);

                box-shadow: 0rpx 4rpx 12rpx 0rpx #E5E5E5;

                border-radius: 12rpx;

                opacity: 0.95;

                display: flex;

                padding: 20rpx 30rpx 0 16rpx;

                margin-bottom: 20rpx;



                .icon {

                    width: 10rpx;

                    height: 148rpx;

                    background: $primaryColor;

                    border-radius: 6rpx;

                    margin-right: 24rpx;

                }



                .content {

                    flex: 1;



                    .head {

                        display: flex;

                        align-items: center;

                        justify-content: space-between;

                        font-weight: 500;

                        font-size: 32rpx;

                        margin-bottom: 16rpx;



                        .status {

                            offset-anchor: 28rpx;

                            color: $primaryColor;

                            font-weight: 400;

                        }

                    }



                    .desc {

                        font-size: 26rpx;

                        color: #666666;

                        display: -webkit-box;

                        -webkit-line-clamp: 2;

                        -webkit-box-orient: vertical;

                        overflow: hidden;

                        text-overflow: ellipsis;

                        width: 100%;

                    }

                }

            }

        }

        .footer{
            position: fixed;
            bottom: 0rpx;
            left: 0rpx;
            width: 750rpx;
            height: 172rpx;
            background-color: #fff;
            padding: 20rpx 40rpx;
            .sub_btn {
				
                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;
            }
        }

		
    }

</style>

 h5/pages/polling/point.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,378 @@
<template>

    <view class="main_app">

        <view class="info">

            <view class="head">

                <view class="">巡检点</view>

                <view class="status">已巡检</view>

            </view>

            <template v-if="false">

                <view class="line">

                    <div class="la">巡检结果：</div>

                    <div class="val">正常</div>

                </view>

                <view class="line">

                    <div class="la">巡检时间：</div>

                    <div class="val">2022</div>

                </view>

            </template>

            <template v-else>

                <view class="desc">

                    å·¡æ£€å†…容

                </view>

            </template>

        </view>

        <!--  -->

        <view v-if="false" class="content">

            <view class="title">巡检记录</view>

            <view class="desc">已经更换灯泡</view>

            <view class="line line_s">

                <view class="la">巡检人：</view>

                <view class="val">xxx</view>

            </view>

            <view class="line line_s">

                <view class="la">巡检时间：</view>

                <view class="val">xxx</view>

            </view>

        </view>

        <view v-else class="content">

            <view class="title">巡检处理</view>

            <view class="appr_modal">

                <view class="df_sb">

                    <view>处理时间</view>

                    <view class="df_ac" @click="isShowHandleDate = true" v-if="handleParam.dealTime">

                        {{ handleParam.dealTime }}

                        <u-icon name="arrow-right"></u-icon>

                    </view>

                    <view @click="isShowHandleDate = true" v-else class="placeholder9 df_ac">

                        è¯·é€‰æ‹©

                        <u-icon name="arrow-right"></u-icon>

                    </view>

                </view>



                <view class="label">

                    <text>*</text>

                    ä¸Šä¼ å›¾ç‰‡/视频

                </view>

                <view class="upload_wrap">

                    <view class="adduser_list_item_ipt1_upload" @click="showUpload = true">

                        <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>

                        <view class="mt6">图片/视频</view>

                    </view>

                    <view class="adduser_list_item_ipt1_upload" 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 class="label">处理说明</view>

                <textarea v-model="handleParam.checkInfo" placeholder="请填写处理说明" placeholder-class="placeholder9" />

            </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-datetime-picker :minDate="new Date().getTime()" :show="isShowHandleDate" @confirm="confirmHandleDate"

            @cancel="isShowHandleDate = false" mode="datetime"></u-datetime-picker>

    </view>

</template>



<script>

    import {

        uploadUrl

    } from '@/api'

    import dayjs from 'dayjs';

    export default {

        data() {

            return {

                showUpload: false,

                isShowHandle: false,

                isShowHandleDate: false,

                handleParam: {},

                dealFileList: []

            };

        },

        methods: {

            onSubmit() {



            },

            callPhone() {

                uni.makePhoneCall({

                    phoneNumber: '114' //仅为示例

                });

            },

            confirmHandleDate(e) {

                this.$set(this.handleParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'));

                this.isShowHandleDate = false;

            },

            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">

    .main_app {

        .info {

            margin: 0 -30rpx;

            border-bottom: 14rpx solid #f7f7f7;

            padding: 30rpx;



            .head {

                display: flex;

                align-items: center;

                justify-content: space-between;

                font-weight: 600;

                font-size: 34rpx;

                margin-bottom: 30rpx;



                .status {

                    font-weight: 400;

                    font-size: 28rpx;

                    color: #999999;

                }

            }

        }



        .line {

            display: flex;

            margin-top: 20rpx;



            .la {

                color: #666666;



            }

        }



        .desc {

            padding: 24rpx 30rpx;

            width: 690rpx;

            background: #F7F7F7;

            border-radius: 12rpx;

        }



        .line_s {

            justify-content: space-between;

        }



        .title {

            font-weight: 600;

            font-size: 32rpx;

            color: #222222;

            margin: 30rpx 0;

        }

    }



    .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 {

        .label {

            text {

                color: #ed4545;

            }

        }



        .df_sb {

            display: flex;

            justify-content: space-between;

            align-items: center;

            height: 90rpx;

            border-bottom: 1rpx solid #e4e4e4;

            margin-bottom: 30rpx;

        }



        .back_footer {

            display: flex;



            .btn {

                flex: 1;

                height: 88rpx;

                line-height: 88rpx;

                background: #ffffff;

                border-radius: 44rpx;

                border: 1rpx solid #999999;

                font-size: 32rpx;

                text-align: center;

                margin: 16rpx 8rpx;

            }



            .agree {

                background: $uni-color-primary;

                color: #fff;

                border: 1rpx solid $uni-color-primary;

            }

        }



        textarea {

            box-sizing: border-box;

            width: 690rpx;

            min-height: 200rpx;

            background-color: #f7f7f7;

            font-size: 28rpx;

            color: #333333;

            padding: 24rpx;

            border-radius: 8rpx;

            margin-bottom: 30rpx;

        }



        .upload_wrap {

            display: flex;

            flex-wrap: wrap;

            margin-bottom: 30rpx;

        }



        .adduser_list_item_ipt1_upload {

            margin-top: 24rpx;

            width: 156rpx;

            height: 156rpx;

            margin-right: 24rpx;

            border: 2rpx solid #e5e5e5;

            background: #f7f7f7;

            color: #666666;

            font-size: 22rpx;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            position: relative;



            .close {

                position: absolute;

                right: -20rpx;

                top: -20rpx;

                z-index: 9999;

            }



            image {

                width: 100%;

                height: 100%;

            }



            video {

                width: 100%;

                height: 100%;

            }

        }

    }

</style>

 h5/pages/polling/task.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,213 @@
<template>

    <view class="main_app">

<!--         <view class="head_wrap">

            <view class="search_wrap">

                <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>

                <input v-model="param.keyword" @confirm="getList()" type="text" placeholder="搜索楼宇/房间名称" placeholder-class="placeholder9" />

            </view>

        </view> -->
        <!--  -->
        <view class="tabs">
            <view class="tab" :class="{active: activeTab == 0}" @click="tabsClick(0)">
                <text>待处理</text>
                <text class="border"></text>
            </view>
            <view class="tab" :class="{active: activeTab == 1}" @click="tabsClick(1)">
                <text>已处理</text>
                <text class="border"></text>
            </view>
            <view class="tab" @click="allClick">
                <view class="name">
                    <image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>
                    <image v-else class="icon" src="@/static/check.png" mode=""></image>
                    <text>查看全部</text>
                </view>
                <text class="border"></text>
            </view>
        </view>

        <!--  -->

        <view class="list">

            <view class="item" v-for="item in 10" @click="itemClick(item)">

                <image v-if="item.stats == 1" src="@/static/side/xunjianed.png" class="icon"></image>
                <image v-else src="@/static/side/xunjian.png" class="icon"></image>

                <view class="content">

                    <view class="name_wrap line">

                        <view class="name">巡检酒啊</view>

                        <view class="status">待开始</view>

                    </view>

                    <view class="line">任务日期：xxx</view>

                    <view class="line">执行时间：121212</view>
                    <view class="line">
                        <view>完成情况：121212</view>
                        <view class="btn">
                            <image src="@/static/side/ic_saoma@2x.png" class="saoma" mode=""></image>
                            <view>扫码巡检</view>
                        </view>
                    </view>

                </view>

            </view>

        </view>

        <!--  -->

    </view>

</template>



<script>

    export default {

        data() {

            return {

                param: {},
                activeTab: 0,
                selectAll: false

            };

        },

        methods: {

            tabsClick(val) {
                this.activeTab = val
            },
            allClick() {
                this.selectAll = !this.selectAll
            },
            itemClick() {
                uni.navigateTo({
                    url: '/pages/polling/detail'
                })
            },
            getList() {
                console.log('---');
            }

        }

    }

</script>



<style lang="scss" scoped>
    .main_app{
        padding: 0 30rpx;
    }
    .tabs{
        display: flex;
        width: 750rpx;
        margin: 12rpx -30rpx 0;
        border-bottom: 1rpx solid #E5E5E5;
        .tab{
            font-size: 30rpx;
            color: #666666;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            height: 88rpx;
            .name{
                display: flex;
                align-items: center;
            }
            .icon{
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
            .border{
                width: 54rpx;
                height: 6rpx;
                background-color: #fff;
                border-radius: 3rpx;
                margin-top: 24rpx;
            }
        }
        .active{
            font-weight: 600;
            font-size: 32rpx;
            color: #222222;
            .border{
                background-color: $primaryColor;
            }
			
        }
		
    }

    .head_wrap {

        display: flex;

        align-items: center;



        .search_wrap {

            display: flex;

            align-items: center;

            width: 100%;

            height: 76rpx;

            background: #F7F7F7;

            border-radius: 38rpx;

            padding-left: 30rpx;

            input{
                flex: 1;
            }

            .search {

                width: 28rpx;

                height: 28rpx;

            }

        }



    }



    .list {

        .item {

            display: flex;

            // height: 290rpx;
            padding: 30rpx 0;
            border-bottom: 2rpx solid #E5E5E5;

            .icon {

                width: 80rpx;

                height: 80rpx;
                margin-right: 24rpx;

            }



            .content {

                flex: 1;
                color: #666666;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .line{
                    margin-bottom: 20rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .btn{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 180rpx;
                        height: 60rpx;
                        background: $primaryColor;
                        color: #fff;
                        font-size: 26rpx;
                        box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,104,255,0.3);
                        border-radius: 30rpx;
                        .saoma{
                            width: 28rpx;
                            height: 28rpx;
                            margin-right: 8rpx;
                        }
                    }
                    &:nth-last-child(1){
                        margin-bottom: 0;
                    }
                }
                .name_wrap{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .name{
                        display: flex;
                        align-items: flex-end;
                        font-weight: 600;
                        font-size: 34rpx;
                        color: #222222;
                    }
                    .status{
                        color: $primaryColor;
                    }
                }

            }

        }

    }

</style>

 h5/pages/workOrder/detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,480 @@
<template>

    <view>

        <view class="main_info">

            <view class="title">

                <text>阜宁文体中心/A座/401</text>

                <text class="status">待处理</text>

            </view>

            <view class="desc">西边走廊的一个顶灯坏了，不亮需要维修西边</view>

            <view class="file_list">

                <view class="file">



                </view>

            </view>

            <view class="content">

                <view class="line">

                    <view class="la">工单类型：</view>

                    <view class="val">1111</view>

                </view>

                <view class="line">

                    <view class="la">上报人：</view>

                    <view class="val">1111</view>

                </view>

                <view class="line">

                    <view class="la">联系电话：</view>

                    <view class="val">1111</view>

                </view>

                <view class="line">

                    <view class="la">上报时间：</view>

                    <view class="val">1111</view>

                </view>

                <view class="line">

                    <view class="la">上门时间：</view>

                    <view class="val">1111</view>

                </view>

            </view>

            <view class="result_wrap">

                <div class="title">处理结果</div>

                <view class="file_list">

                    <view class="file">



                    </view>

                </view>

                <view class="content">

                    å·²æ›´æ¢ç¯æ³¡å’Œç¯ç½©å·²æ›´æ¢ç¯æ³¡å’Œç¯ç½©å·²æ›´æ¢ç¯

                </view>

                <view class="line">

                    <view class="la">处理人：</view>

                    <view class="val">{{ 1111 }}</view>

                </view>

                <view class="line">

                    <view class="la">处理时间：</view>

                    <view class="val">{{ 1111 }}</view>

                </view>

            </view>

        </view>

        <!--  -->

        <view class="btns">

            <view class="btn">

                <image src="@/static/side/phoneed.png" class="icon"></image>

                <text>上报人</text>

            </view>

            <view class="btn active" @click="isShowHandle = true">去处理</view>

        </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="isShowHandle" :round="10" :safeAreaInsetBottom="true" mode="bottom" closeable @close="isShowHandle = false">

            <view class="appr_modal">

                <view class="title">工单处理</view>

                <view class="df_sb">

                    <view>处理时间</view>

                    <view class="df_ac" @click="isShowHandleDate = true" v-if="handleParam.dealTime">

                        {{ handleParam.dealTime }}

                        <u-icon name="arrow-right"></u-icon>

                    </view>

                    <view @click="isShowHandleDate = true" v-else class="placeholder9 df_ac">

                        è¯·é€‰æ‹©

                        <u-icon name="arrow-right"></u-icon>

                    </view>

                </view>



                <view class="label">

                    <text>*</text>

                    ä¸Šä¼ å›¾ç‰‡/视频

                </view>

                <view class="upload_wrap">

                    <view class="adduser_list_item_ipt1_upload" @click="showUpload = true">

                        <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>

                        <view class="mt6">图片/视频</view>

                    </view>

                    <view class="adduser_list_item_ipt1_upload" 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 class="label">处理说明</view>

                <textarea v-model="handleParam.checkInfo" placeholder="请填写处理说明" placeholder-class="placeholder9" />

                <view class="back_footer">

                    <view class="btn" @click="isShowHandle = false">取消</view>

                    <view class="btn agree" @click="onSubmit">提交</view>

                </view>

            </view>

        </u-popup>

        <!--  -->

        <u-datetime-picker :minDate="new Date().getTime()" :show="isShowHandleDate" @confirm="confirmHandleDate"

            @cancel="isShowHandleDate = false" mode="datetime"></u-datetime-picker>

        <!--  -->

    </view>

</template>



<script>

    import {

        uploadUrl

    } from '@/api'

    import dayjs from 'dayjs';

    export default {

        data() {

            return {

                showUpload: false,

                isShowHandle: false,

                isShowHandleDate: false,

                handleParam: {},

                dealFileList: []

            };

        },

        methods: {

            onSubmit() {



            },

            callPhone() {

                uni.makePhoneCall({

                    phoneNumber: '114' //仅为示例

                });

            },

            confirmHandleDate(e) {

                this.$set(this.handleParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'));

                this.isShowHandleDate = false;

            },

            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" scoped>

    page {

        ::v-deep .u-toolbar {

            border-top: 1rpx solid #cccccc;

        }

    }



    .main_info {

        padding: 0 30rpx;



        .title {

            font-weight: 600;

            font-size: 32rpx;

            color: #222222;

            height: 90rpx;

            display: flex;

            justify-content: space-between;

            align-items: center;



            .status {

                font-weight: 400;

                font-size: 28rpx;

                color: $primaryColor;

            }

        }



        .file_list {

            display: flex;

            flex-wrap: wrap;



            .file {

                width: 156rpx;

                height: 156rpx;

                border-radius: 12rpx;

                margin-right: 22rpx;

                margin-bottom: 22rpx;



                &:nth-of-type(4n) {

                    margin-right: 0;

                }

            }

        }



        .desc {

            margin: 0rpx 0 30rpx;

        }



        .content {

            margin-top: 8rpx;

            padding: 24rpx 30rpx;

            background: #F7F7F7;

            border-radius: 12rpx;



            .line {

                display: flex;

                margin-bottom: 20rpx;

                color: #333333;



                &:nth-last-child(1) {

                    margin-bottom: 0;

                }



                .la {

                    color: #666666;

                    width: 140rpx;

                }

            }

        }



        .result_wrap {

            border-top: 20rpx solid #f7f7f7;

            margin: 20rpx -30rpx 0;

            padding: 0 30rpx;



            .line {

                margin-top: 30rpx;

                height: 42rpx;

                display: flex;

                align-items: center;

                justify-content: space-between;



                .la {

                    color: #666666;

                }

            }

        }

    }



    .btns {

        position: fixed;

        bottom: 68rpx;

        left: 0;

        width: 750rpx;

        padding: 0 40rpx;

        display: flex;

        justify-content: space-between;



        .btn {

            width: 224rpx;

            height: 88rpx;

            background: #FFFFFF;

            box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);

            border-radius: 44rpx;

            border: 2rpx solid $primaryColor;

            color: $primaryColor;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 500;

            font-size: 32rpx;



            .icon {

                width: 32rpx;

                height: 32rpx;

                margin-right: 6rpx;

            }

        }



        .active {

            flex: 1;

            margin-left: 20rpx;

            color: #fff;

            background-color: $primaryColor;

        }

    }



    .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;

        }

    }



    .appr_modal {

        padding: 36rpx 30rpx 0;



        .title {

            font-weight: 600;

            font-size: 32rpx;

            color: #222222;

            margin-bottom: 40rpx;

            text-align: center;

        }



        .label {

            text {

                color: #ed4545;

            }

        }



        .df_sb {

            display: flex;

            justify-content: space-between;

            align-items: center;

            height: 90rpx;

            border-bottom: 1rpx solid #e4e4e4;

            margin-bottom: 30rpx;

        }



        .back_footer {

            display: flex;



            .btn {

                flex: 1;

                height: 88rpx;

                line-height: 88rpx;

                background: #ffffff;

                border-radius: 44rpx;

                border: 1rpx solid #999999;

                font-size: 32rpx;

                text-align: center;

                margin: 16rpx 8rpx;

            }



            .agree {

                background: $uni-color-primary;

                color: #fff;

                border: 1rpx solid $uni-color-primary;

            }

        }



        textarea {

            box-sizing: border-box;

            width: 690rpx;

            min-height: 200rpx;

            background-color: #f7f7f7;

            font-size: 28rpx;

            color: #333333;

            padding: 24rpx;

            border-radius: 8rpx;

            margin-bottom: 30rpx;

        }



        .upload_wrap {

            display: flex;

            flex-wrap: wrap;

            margin-bottom: 30rpx;

        }



        .adduser_list_item_ipt1_upload {

            margin-top: 24rpx;

            width: 156rpx;

            height: 156rpx;

            margin-right: 24rpx;

            border: 2rpx solid #e5e5e5;

            background: #f7f7f7;

            color: #666666;

            font-size: 22rpx;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            position: relative;



            .close {

                position: absolute;

                right: -20rpx;

                top: -20rpx;

                z-index: 9999;

            }



            image {

                width: 100%;

                height: 100%;

            }



            video {

                width: 100%;

                height: 100%;

            }

        }

    }

</style>

 h5/pages/workOrder/edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,258 @@
<template>

    <view class="main_app">

        <view class="list">

            <view class="item">

                <view class="la"><text class="red">*</text>位置类型</view>

                <view class="line sel_wrap">

                    <view class="left" :class="param.name ? '' : 'placeholder9'">{{ param.name ? param.name : '请选择' }}</view>

                    <u-icon name="arrow-right" color="#999999" size="15"></u-icon>

                </view>

            </view>

            <view class="item">

                <view class="la"><text class="red">*</text>选择区域</view>

                <view class="line sel_wrap">

                    <view class="left" :class="param.name ? '' : 'placeholder9'">{{ param.name ? param.name : '请选择' }}</view>

                    <u-icon name="arrow-right" color="#999999" size="15"></u-icon>

                </view>

            </view>

            <view class="item">

                <view class="la">上门时间</view>

                <view class="line sel_wrap">

                    <view class="left" :class="param.name ? '' : 'placeholder9'">{{ param.name ? param.name : '请选择' }}</view>

                    <u-icon name="arrow-right" color="#999999" size="15"></u-icon>

                </view>

            </view>

            <view class="item">

                <view class="la">描述</view>

                <view class="line">

                    <textarea v-model="param.checkInfo" placeholder="请输入" placeholder-class="placeholder9" />

                </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>
        <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>

    </view>

</template>



<script>
    import {
        uploadUrl
    } from '@/api'
    import dayjs from 'dayjs';

    export default {

        data() {

            return {

                param: {},

                showUpload: false,

                dealFileList: [],

            };

        },
        methods: {
            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" scoped>

    .list {
		
        .item {

            .la {

                margin-top: 30rpx;

            }



            .line {



                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 {

                height: 90rpx;

                display: flex;

                justify-content: space-between;

                align-items: center;

                border-bottom: 1rpx solid #E5E5E5;

            }



            .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%;

                }

            }



        }

    }
    .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;
    }

</style>

 h5/pages/workOrder/list.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,188 @@
<template>

    <view class="main_app">

        <view class="head_wrap">

            <view class="search_wrap">

                <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>

                <input v-model="param.keyword" @confirm="getList()" type="text" placeholder="搜索楼宇/房间名称" placeholder-class="placeholder9" />

            </view>

        </view>
        <!--  -->
        <view class="tabs">
            <view class="tab" :class="{active: activeTab == 0}" @click="tabsClick(0)">
                <text>待处理</text>
                <text class="border"></text>
            </view>
            <view class="tab" :class="{active: activeTab == 1}" @click="tabsClick(1)">
                <text>已处理</text>
                <text class="border"></text>
            </view>
            <view class="tab" @click="allClick">
                <view class="name">
                    <image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>
                    <image v-else class="icon" src="@/static/check.png" mode=""></image>
                    <text>查看全部</text>
                </view>
                <text class="border"></text>
            </view>
        </view>

        <!--  -->

        <view class="list">

            <view class="item" v-for="item in 10" @click="itemClick(item)">

                <image v-if="item.stats == 1" src="@/static/side/workordered.png" class="icon"></image>
                <image v-else src="@/static/side/workorder.png" class="icon"></image>

                <view class="content">

                    <view class="name_wrap line">

                        <view class="name">A座/401</view>

                        <view class="status">已处理</view>

                    </view>

                    <view class="line">工单类型：xxx</view>

                    <view class="line">报修物品：121212</view>
                    <view class="line">上报时间：121212</view>
                    <view class="line">上门时间：121212</view>

                </view>

            </view>

        </view>

        <!--  -->

    </view>

</template>



<script>

    export default {

        data() {

            return {

                param: {},
                activeTab: 0,
                selectAll: false

            };

        },

        methods: {

            tabsClick(val) {
                this.activeTab = val
            },
            allClick() {
                this.selectAll = !this.selectAll
            },
            itemClick() {
                uni.navigateTo({
                    url: '/pages/workOrder/detail'
                })
            },
            getList() {
                console.log('---');
            }

        }

    }

</script>



<style lang="scss" scoped>
    .main_app{
        padding: 0 30rpx;
    }
    .tabs{
        display: flex;
        width: 750rpx;
        margin: 12rpx -30rpx 0;
        border-bottom: 1rpx solid #E5E5E5;
        .tab{
            font-size: 30rpx;
            color: #666666;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            height: 88rpx;
            .name{
                display: flex;
                align-items: center;
            }
            .icon{
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
            .border{
                width: 54rpx;
                height: 6rpx;
                background-color: #fff;
                border-radius: 3rpx;
                margin-top: 24rpx;
            }
        }
        .active{
            font-weight: 600;
            font-size: 32rpx;
            color: #222222;
            .border{
                background-color: $primaryColor;
            }
			
        }
		
    }

    .head_wrap {

        display: flex;

        align-items: center;



        .search_wrap {

            display: flex;

            align-items: center;

            width: 100%;

            height: 76rpx;

            background: #F7F7F7;

            border-radius: 38rpx;

            padding-left: 30rpx;

            input{
                flex: 1;
            }

            .search {

                width: 28rpx;

                height: 28rpx;

            }

        }



    }



    .list {

        .item {

            display: flex;

            // height: 290rpx;
            padding: 30rpx 0;
            border-bottom: 2rpx solid #E5E5E5;

            .icon {

                width: 80rpx;

                height: 80rpx;
                margin-right: 24rpx;

            }



            .content {

                flex: 1;
                color: #666666;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .line{
                    margin-bottom: 20rpx;
                    &:nth-last-child(1){
                        margin-bottom: 0;
                    }
                }
                .name_wrap{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .name{
                        display: flex;
                        align-items: flex-end;
                        font-weight: 600;
                        font-size: 34rpx;
                        color: #222222;
                    }
                    .status{
                        color: $primaryColor;
                    }
                }

            }

        }

    }

</style>

 h5/static/check.png

 h5/static/checked.png

 h5/static/home/home_bg.jpg

 h5/static/home/ic_fangkeba.png

 h5/static/home/ic_fangkebaobe@2x.png

 h5/static/home/ic_fangkebaobei@2x.png

 h5/static/home/ic_renwuzhongxin@2x.png

 h5/static/home/ic_search@2x.png

 h5/static/home/ic_wodehuiyi@2x.png

 h5/static/login_ic_password@2x.png

 h5/static/login_ic_phone@2x.png

 h5/static/radioed.png

 h5/static/side/ic_dabiao.png

 h5/static/side/ic_dabiaoed.png

 h5/static/side/ic_saoma@2x.png

 h5/static/side/ic_shuiyu@2x.png

 h5/static/side/phoneed.png

 h5/static/side/scan.png

 h5/static/side/workorder.png

 h5/static/side/workordered.png

 h5/static/side/xunjian.png

 h5/static/side/xunjianed.png

 h5/uni.scss

@@ -15,7 +15,8 @@
/* é¢œè‰²å˜é‡ */

/* è¡Œä¸ºç›¸å…³é¢œè‰² */
$uni-color-primary: #279baa;
$uni-color-primary: #2b66f6;
$primaryColor: #2b66f6;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;