工单维修申请、我的申请、详情

nnzwminiapp/app.json

@@ -64,7 +64,9 @@
                 "pages/menu/menu",
                 "pages/myCollection/myCollection",
                 "pages/myComment/myComment",
-                "pages/like/like"
+                "pages/like/like",
+                "pages/work-order/work-order",
+                "pages/work-order-detail/work-order-detail"
             ]
         }
     ],

nnzwminiapp/pages/myCenter/myCenter.js

@@ -24,7 +24,14 @@ Page({
 		wx.navigateTo({
 			url: '/pages/ourCanteen/ourCanteen'
 		})
-	},
+    },
+    
+    toWorkOrder:function(e) {
+        wx.navigateTo({
+          url: '/pagesPublic/pages/work-order/work-order',
+        });
+    },
+
 	handleAction() {
 		var that = this
 		wx.showActionSheet({

nnzwminiapp/pages/myCenter/myCenter.wxml

@@ -89,6 +89,16 @@
 					<image src="../images/arrow.png" alt=""></image>
 				</view>
 			</view>
+            <view class="line"></view>
+			<view class="list-item" bindtap="toWorkOrder">
+				<view class="left">
+					<image src="../images/l-grzl.png" alt=""></image>
+					<text>工单维修</text>
+				</view>
+				<view class="arrow">
+					<image src="../images/arrow.png" alt=""></image>
+				</view>
+			</view>
 			<!-- <view class="line"></view>
 			<view class="list-item">
 				<view class="left">

nnzwminiapp/pagesPublic/pages/work-order-detail/work-order-detail.js

@@ -0,0 +1,64 @@
+// pagesPublic/pages/work-order-detail/work-order-detail.js
+import {
+    imgUrl
+} from "../api/request"
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        imgUrl: imgUrl,
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+})

nnzwminiapp/pagesPublic/pages/work-order-detail/work-order-detail.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "工单详情",
+    "navigationBarTextStyle": "white",
+    "navigationStyle": "custom"
+}

nnzwminiapp/pagesPublic/pages/work-order-detail/work-order-detail.wxml

@@ -0,0 +1,41 @@
+<!--pagesPublic/pages/work-order-detail/work-order-detail.wxml-->
+<view class="navigation">
+    <image class="nav-back" src="/pages/images/arrow.png" mode="" />
+    <text class="nav-title">工单详情</text>
+</view>
+<view class="pageBox">
+    <image class="bgimage" src="/pages/images/work-order-detail-bg.png" mode="aspectFill" />
+
+    <view class="detail">
+        <view class="item-row">
+            <text class="item-label">报修类型：</text>
+            <text class="item-value">{{type}}</text>
+        </view>
+        <view class="item-row">
+            <text class="item-label">维修地址：</text>
+            <text class="item-value">{{address}}</text>
+        </view>
+        <view class="item-row">
+            <text class="item-label">联系电话：</text>
+            <text class="item-value">{{phone}}</text>
+        </view>
+        <view class="item-row">
+            <text class="item-label">预约上门时间：</text>
+            <text class="item-value">{{arriveTime}}</text>
+        </view>
+        <view class="item-row">
+            <text class="item-label">问题描述：</text>
+            <text class="item-value">{{description}}</text>
+        </view>
+        <view class="item-row">
+            <text class="item-label">图片：</text>
+            <view class="item-image-box">
+                <image src="" mode="" />
+                <image src="" mode="" />
+            </view>
+        </view>
+    </view>
+</view>
+<view class="progressBox">
+    
+</view>

nnzwminiapp/pagesPublic/pages/work-order-detail/work-order-detail.wxss

@@ -0,0 +1,82 @@
+/* pagesPublic/pages/work-order-detail/work-order-detail.wxss */
+/* .pageBox {
+    width: 100%;
+    background-size: 100% 100%;
+    position: relative;
+    color: #fff;
+    background-image: url('/pages/images/work-order-detail-bg.png');
+} */
+page {
+    background: #F5F5F5;
+}
+
+.navigation {
+    margin-top: 20rpx;
+    height: 136rpx;
+    width: 100%;
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 136rpx;
+    font-size: 36rpx;
+    border-bottom: 2rpx solid #FFFFFF30;
+}
+
+.nav-back {
+    width: 18rpx;
+    height: 33rpx;
+    transform: scaleX(-1);
+    position: absolute;
+    left: 35rpx;
+    top: 71rpx;
+}
+
+.bgimage {
+    position: absolute;
+    left: -31%;
+    top: 0;
+    display: block;
+    width: 160%;
+    z-index: -999;
+}
+
+.detail {
+    margin-top: 39rpx;
+    margin-left: 35rpx;
+    margin-right: 35rpx;
+}
+
+.item-row {
+    margin-top: 20rpx;
+    color: #FFFFFF;
+    font-size: 28rpx;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.item-label {
+    width: 210rpx;
+    text-align: right;
+    color: #FFFFFF;
+    opacity: 0.7;
+}
+
+.item-value {
+    margin-left: 20rpx;
+    font-size: 28rpx;
+}
+
+.item-image-box image {
+    height: 98rpx;
+    width: 98rpx;
+    margin-left: 10rpx;
+}
+
+.progressBox {
+    background: #FFFFFF;
+    border-radius: 10rpx;
+    margin-left: 35rpx;
+    margin-right: 35rpx;
+    height: 900rpx;
+}

nnzwminiapp/pagesPublic/pages/work-order/work-order.js

@@ -0,0 +1,134 @@
+// pagesPublic/pages/work-order/work-order.js
+var dateTimePicker = require('../../../utils/dateTimePicker');
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        currentIndex: 0,
+        date: '2023-10-01',
+        time: '12:00',
+        dateTimeArray: null,
+        dateTime: null,
+        startYear: 2000,
+        endYear: 2250,
+        list: [{ type: '维修类型一', address: '食堂二楼楼梯地砖', time: '2022-03-15 13:45' }, { type: '维修类型一', address: '食堂二楼楼梯地砖', time: '2022-03-15 13:45' }]
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        // 获取完整的年月日 时分秒，以及默认显示的数组
+        var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
+        // 精确到分的处理，将数组的秒去掉
+        // var lastArray = obj.dateTimeArray.pop();
+        // var lastTime = obj.dateTime.pop();
+        this.setData({
+            dateTime: obj.dateTime,
+            dateTimeArray: obj.dateTimeArray
+        });
+
+        // 查询所有报修类型
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 点击切换标题
+     * @param {*} e 
+     */
+    titleClick(e) {
+        this.setData({
+            currentIndex: e.currentTarget.dataset.idx
+        });
+    },
+
+    /**
+     * 切换swiper-item触发bindchange事件
+     * @param {*} e 
+     */
+    pagechange: function (e) {
+        console.info(e)
+        // 通过touch判断，改变tab的下标值
+        if ("touch" === e.detail.source) {
+            // let currentPageIndex = this.data.currentIndex;
+            // currentPageIndex = (currentPageIndex + 1) % 2;
+            // 拿到当前索引并动态改变
+            this.setData({
+                currentIndex: e.detail.current
+            });
+        }
+    },
+
+    /**
+     * 提交工单
+     * @param {*} e 
+     */
+    submitWorkOrder(e) {
+        console.info(e);
+    },
+
+    /**
+     * 上传报修图片
+     */
+    uploadImage() {
+        wx.chooseMedia({
+            success(res) {
+                console.info(res);
+            }
+        });
+    },
+
+    /**
+     * 查看工单详情
+     * @param {*} e 
+     */
+    toDetail(e) {
+        wx.navigateTo({
+            url: '../work-order-detail/work-order-detail',
+        });
+    }
+})

nnzwminiapp/pagesPublic/pages/work-order/work-order.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "工单维修",
+    "navigationBarBackgroundColor": "#508FF4",
+    "navigationBarTextStyle": "white"
+}

nnzwminiapp/pagesPublic/pages/work-order/work-order.wxml

@@ -0,0 +1,72 @@
+<!--pagesPublic/pages/work-order/work-order.wxml-->
+<view>
+    <view class="navBox">
+        <view class="titleBox" bindtap="titleClick" data-idx="0">
+            <text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">发起工单</text>
+            <hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
+        </view>
+        <view class="titleBox" bindtap="titleClick" data-idx="1">
+            <text class="{{1 == currentIndex ? 'fontColorBox' : ''}}">我的申请</text>
+            <hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
+        </view>
+    </view>
+    <swiper class="swiperBox" bindchange="pagechange" current="{{currentIndex}}">
+        <swiper-item class="swiperTtemBox">
+            <form bindsubmit="submitWorkOrder">
+                <view class="formBox">
+                    <view class="form-item">
+                        <label for="" class="form-item-label">报修类型：</label>
+                        <input type="text" class="form-input" name="type" placeholder="请选择报修类型" placeholder-style="color:#999999" />
+                        <image class="form-icon" src="/pages/images/arrow.png" alt=""></image>
+                    </view>
+                    <view class="form-item">
+                        <label for="" class="form-item-label">维修地址：</label>
+                        <input type="text" class="form-input" name="address" confirm-type="next" maxlength="50" placeholder="请输入地址" placeholder-style="color:#999999" />
+                    </view>
+                    <view class="form-item">
+                        <label for="" class="form-item-label">问题描述：</label>
+                        <input type="text" class="form-input" name="description" maxlength="500" placeholder="请描述您的问题" placeholder-style="color:#999999" />
+                    </view>
+                    <view class="form-item">
+                        <label for="" class="form-item-label">报修物品图片：</label>
+                        <image class="form-photo" src="/pages/images/photo2.png" mode="" bindtap="uploadImage" />
+                        <input type="text" name="" style="display: none;" />
+                    </view>
+                    <view class="form-item">
+                        <label for="" class="form-item-label">联系电话：</label>
+                        <input type="text" class="form-input" name="phone" confirm-type="next" maxlength="11" placeholder="请输入联系电话" placeholder-style="color:#999999" />
+                    </view>
+                    <view class="form-item">
+                        <label for="" class="form-item-label">预约上门时间：</label>
+                        <picker class="form-item-picker" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
+                            <input type="text" class="form-input" style="width: 100%;" name="arriveTime" disabled="true" placeholder="请选择上门时间" placeholder-style="color:#999999" value="{{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}" />
+                            <!-- <image class="form-icon" src="/pages/images/arrow.png" alt="" bindtap="pickArriveTime"></image> -->
+                        </picker>
+                        <!-- <input type="text" class="form-input" name="arriveTime" disabled="true" placeholder="请选择上门时间" placeholder-style="color:#999999" /> -->
+                        <image class="form-icon" src="/pages/images/arrow.png" alt="" bindtap="pickArriveTime"></image>
+                    </view>
+                </view>
+                <button class="form-button" form-type="submit">提交工单</button>
+            </form>
+        </swiper-item>
+        <swiper-item class="swiperTtemBox">
+            <scroll-view class="viewBox" wx:for="{{list}}" wx:for-item="item">
+                <view class="item" bindtap="toDetail">
+                    <image class="item-status" src="/pages/images/status-complete.png" mode="" />
+                    <view class="item-row">
+                        <text class="item-label">报修类型：</text>
+                        <text class="item-value">{{item.type}}</text>
+                    </view>
+                    <view class="item-row">
+                        <text class="item-label">维修地址：</text>
+                        <text class="item-value">{{item.address}}</text>
+                    </view>
+                    <view class="item-row">
+                        <text class="item-label">预约时间：</text>
+                        <text class="item-value">{{item.time}}</text>
+                    </view>
+                </view>
+            </scroll-view>
+        </swiper-item>
+    </swiper>
+</view>

nnzwminiapp/pagesPublic/pages/work-order/work-order.wxss

@@ -0,0 +1,156 @@
+/* pagesPublic/pages/work-order/work-order.wxss */
+Page {
+    /* 全局样式 */
+    background: #FFFFFF;
+    height: 100%;
+    position: fixed;
+}
+
+.fontColorBox,
+.fontColorBox1 {
+    color: #508FF4;
+    font-size: 34rpx;
+}
+
+.navBox {
+    /* 顶部tab盒子样式 */
+    width: 100%;
+    height: 94rpx;
+    background: white;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    border-bottom: solid #C8C8C8 1rpx;
+}
+
+.navBox view:last-child {
+    /* 最后一个tab标题的样式 */
+    padding-left: 20%;
+}
+
+.titleBox {
+    /* 未选中文字的样式 */
+    color: #333333;
+    font-size: 32rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.lineBox,
+.notLineBox {
+    /* 选中及未选中底线共同样式 */
+    width: 215rpx;
+    height: 6rpx;
+    margin-top: 21rpx;
+}
+
+.lineBox {
+    /* 选中底线样式 */
+    background: #508FF4;
+    border-radius: 3rpx;
+}
+
+.notLineBox {
+    /* 未选中底线样式 */
+    background: transparent;
+}
+
+.swiperBox {
+    height: 100vh;
+}
+
+.swiperTtemBox {
+    /* 底部内容样式 */
+    height: 100%;
+    overflow: scroll;
+    background: #FFFFFF;
+    color: #333333;
+}
+
+.formBox {
+    margin: 10rpx 30rpx;
+    font-size: 28rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 28rpx;
+    width: 100%;
+}
+
+.form-item-picker {
+    width: 67%;
+}
+
+.form-item-label {
+    width: 210rpx;
+    text-align: right;
+}
+
+.form-input {
+    border-bottom: solid 1rpx #999999;
+    width: 68%;
+}
+
+.form-icon {
+    width: 13rpx;
+    height: 24rpx;
+    background-size: 100% 100%;
+}
+
+.form-photo {
+    width: 44rpx;
+    height: 40rpx;
+    padding: 35rpx;
+    background: #E9E9E9;
+}
+
+.form-button {
+    width: 100%;
+    height: 97rpx;
+    position: absolute;
+    bottom: 97rpx;
+    background: #508FF4;
+    color: #FFFFFF;
+    font-size: 28rpx;
+    text-align: center;
+    padding: 0 !important;
+    margin: 0 !important;
+    line-height: 97rpx;
+    border-radius: 0;
+}
+
+.item {
+    margin: 0 30rpx;
+    border-bottom: solid 1rpx #C8C8C8;
+    padding-bottom: 16rpx;
+}
+
+.item-status {
+    width: 146rpx;
+    height: 146rpx;
+    position: absolute;
+    right: -20rpx;
+    top: -20rpx;
+}
+
+.item-row {
+    margin-top: 30rpx;
+}
+
+.item-label {
+    font-size: 28rpx;
+    color: #999999;
+}
+
+.item-value {
+    font-size: 28rpx;
+    color: #333333;
+}

nnzwminiapp/utils/dateTimePicker.js

@@ -0,0 +1,85 @@
+function withData(param) {
+    return param < 10 ? '0' + param : '' + param;
+}
+
+function getLoopArray(start, end) {
+    var start = start || 0;
+    var end = end || 1;
+    var array = [];
+    for (var i = start; i <= end; i++) {
+        array.push(withData(i));
+    }
+    return array;
+}
+
+function getMonthDay(year, month) {
+    var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
+
+    switch (month) {
+        case '01':
+        case '03':
+        case '05':
+        case '07':
+        case '08':
+        case '10':
+        case '12':
+            array = getLoopArray(1, 31)
+            break;
+        case '04':
+        case '06':
+        case '09':
+        case '11':
+            array = getLoopArray(1, 30)
+            break;
+        case '02':
+            array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
+            break;
+        default:
+            array = '月份格式不正确，请重新输入！'
+    }
+    return array;
+}
+
+function getNewDateArry() {
+    // 当前时间的处理
+    var newDate = new Date();
+    var year = withData(newDate.getFullYear()),
+        mont = withData(newDate.getMonth() + 1),
+        date = withData(newDate.getDate()),
+        hour = withData(newDate.getHours()),
+        minu = withData(newDate.getMinutes()),
+        seco = withData(newDate.getSeconds());
+
+    return [year, mont, date, hour, minu, seco];
+}
+
+function dateTimePicker(startYear, endYear, date) {
+    // 返回默认显示的数组和联动数组的声明
+    var dateTime = [], dateTimeArray = [[], [], [], [], [], []];
+    var start = startYear || 1978;
+    var end = endYear || 2100;
+    // 默认开始显示数据
+    var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
+    // 处理联动列表数据
+    /*年月日 时分秒*/
+    dateTimeArray[0] = getLoopArray(start, end);
+    dateTimeArray[1] = getLoopArray(1, 12);
+    dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
+    dateTimeArray[3] = getLoopArray(0, 23);
+    dateTimeArray[4] = getLoopArray(0, 59);
+    dateTimeArray[5] = getLoopArray(0, 59);
+
+    dateTimeArray.forEach((current, index) => {
+        dateTime.push(current.indexOf(defaultDate[index]));
+    });
+
+    return {
+        dateTimeArray: dateTimeArray,
+        dateTime: dateTime
+    }
+}
+
+module.exports = {
+    dateTimePicker: dateTimePicker,
+    getMonthDay: getMonthDay
+}