13 changed files with 539 additions and 197 deletions
Split View
Diff Options
-
+1 -1App.vue
-
+2 -2api/api.js
-
+36 -9components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue
-
+1 -1config.js
-
+7 -0pages.json
-
+45 -9pages/center/center.vue
-
+9 -5pages/finish/finish.vue
-
+151 -132pages/login/login.vue
-
+232 -0pages/order/order.vue
-
+14 -6pages/repair/repair.vue
-
+15 -8pages/repairList/repairList.vue
-
+25 -23store/store.js
-
+1 -1uni.scss
+ 1
- 1
App.vue
View File
+ 2
- 2
api/api.js
View File
+ 36
- 9
components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue
View File
+ 1
- 1
config.js
View File
+ 7
- 0
pages.json
View File
+ 45
- 9
pages/center/center.vue
View File
+ 9
- 5
pages/finish/finish.vue
View File
+ 151
- 132
pages/login/login.vue
View File
| @ -1,140 +1,159 @@ | |||
| <template> | |||
| <view class="content"> | |||
| <view class="topBox"> | |||
| <h3 class="title">登录</h3> | |||
| <h3>欢迎使用xx报修</h3> | |||
| </view> | |||
| <view class="inputBox"> | |||
| <view class="ipt"> | |||
| <h4>学号</h4> | |||
| <input type="text" value="" placeholder="请输入学生学号" /> | |||
| </view> | |||
| <view class="ipt"> | |||
| <h4>密码</h4> | |||
| <input type="text" value="" placeholder="请输入密码" /> | |||
| </view> | |||
| <button class="loginBtn">登录</button> | |||
| <!-- <button class="registerBtn">注册</button> --> | |||
| <!-- <view class="tipbox"> | |||
| <view class="txt"> | |||
| —— 其他账号登录 —— | |||
| </view> | |||
| <view class="otherUser"> | |||
| <uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons> | |||
| <uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons> | |||
| </view> | |||
| </view> --> | |||
| </view> | |||
| </view> | |||
| <view class="content"> | |||
| <view class="topBox"> | |||
| <h3 class="title">登录</h3> | |||
| <h3>欢迎使用xx报修</h3> | |||
| </view> | |||
| <view class="inputBox"> | |||
| <view class="ipt"> | |||
| <h4>手机号</h4> | |||
| <input v-model="form.account" type="text" value="" placeholder="请输入手机号" /> | |||
| </view> | |||
| <view class="ipt"> | |||
| <h4>密码</h4> | |||
| <input v-model="form.password" type="password" value="" placeholder="请输入密码" /> | |||
| </view> | |||
| <button @click="login" class="loginBtn">登录</button> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| methods: { | |||
| } | |||
| } | |||
| export default { | |||
| data() { | |||
| return { | |||
| form: { | |||
| account: '', | |||
| password: '' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| //登录 | |||
| login() { | |||
| if(this.form.account.trim() == ''){ | |||
| return uni.showToast({ | |||
| icon: 'none', | |||
| title: '请填写手机号' | |||
| }) | |||
| } | |||
| if(this.form.password.trim() == ''){ | |||
| return uni.showToast({ | |||
| icon: 'none', | |||
| title: '请填写密码' | |||
| }) | |||
| } | |||
| this.$api('loginLogin', this.form, res => { | |||
| if (res.code == 200) { | |||
| uni.setStorageSync('token', res.result.token); | |||
| uni.setStorageSync('userInfo', JSON.stringify(res.result.userInfo)); | |||
| this.$store.commit('setUserInfo',res.result.userInfo) | |||
| uni.switchTab({ | |||
| url: '/pages/repair/repair' | |||
| }) | |||
| } | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .content { | |||
| height: 100vh; | |||
| background-color: #f5f5f5; | |||
| /* 微信小程序不允许使用本地图片 */ | |||
| /* background: url("@/static/login/bj.jpg") no-repeat center; */ | |||
| /* 所以这里我把背景图片上传在阿里云oss.下面这个地址是阿里云oss图片地址 */ | |||
| background: url("https://tennis-oss.xzaiyp.top/2024-09-02/0030f0ef-4270-47dc-a870-b24bffb6ce28.jpg") no-repeat center; | |||
| background-size: cover; | |||
| } | |||
| .topBox { | |||
| font-size: 34rpx; | |||
| color: #fff; | |||
| padding: 80rpx 50rpx; | |||
| } | |||
| .topBox .title{ | |||
| font-size: 45rpx; | |||
| } | |||
| h3 { | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .inputBox { | |||
| position: fixed; | |||
| bottom: 0; | |||
| left: 0; | |||
| width: 750rpx; | |||
| height: 85vh; | |||
| background-color: #fff; | |||
| border-top-left-radius: 40rpx; | |||
| border-top-right-radius: 40rpx; | |||
| padding: 60rpx; | |||
| box-sizing: border-box; | |||
| } | |||
| .ipt { | |||
| margin-bottom: 50rpx; | |||
| } | |||
| .ipt h4 { | |||
| margin-bottom: 20rpx; | |||
| font-size: 36rpx; | |||
| color: #333; | |||
| } | |||
| .ipt input { | |||
| border-bottom: 1px solid #dedede; | |||
| padding-bottom: 20rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .loginBtn { | |||
| margin-top: 20rpx; | |||
| line-height: 85rpx; | |||
| text-align: center; | |||
| background: #3c9cff; | |||
| border-radius: 40rpx; | |||
| color: #fff; | |||
| margin-top: 50rpx; | |||
| } | |||
| .registerBtn { | |||
| margin-top: 20rpx; | |||
| line-height: 85rpx; | |||
| text-align: center; | |||
| border-radius: 40rpx; | |||
| color: #ccc; | |||
| margin-top: 50rpx; | |||
| border: none; | |||
| } | |||
| .tipbox { | |||
| position: fixed; | |||
| bottom: 120rpx; | |||
| left: 50%; | |||
| transform: translate(-50%, -120px); | |||
| } | |||
| .otherUser { | |||
| margin-top: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .txt { | |||
| font-size: 28rpx; | |||
| color: #969696; | |||
| } | |||
| .otherUser .uni-icons { | |||
| margin-left: 20rpx; | |||
| } | |||
| .content { | |||
| height: 100vh; | |||
| /* 微信小程序不允许使用本地图片 */ | |||
| /* background: url("@/static/login/bj.jpg") no-repeat center; */ | |||
| /* 所以这里我把背景图片上传在阿里云oss.下面这个地址是阿里云oss图片地址 */ | |||
| background: url("https://tennis-oss.xzaiyp.top/2024-09-02/0030f0ef-4270-47dc-a870-b24bffb6ce28.jpg") no-repeat center; | |||
| background-size: cover; | |||
| } | |||
| .topBox { | |||
| font-size: 34rpx; | |||
| color: #fff; | |||
| padding: 80rpx 50rpx; | |||
| } | |||
| .topBox .title { | |||
| font-size: 45rpx; | |||
| } | |||
| h3 { | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .inputBox { | |||
| position: fixed; | |||
| bottom: 0; | |||
| left: 0; | |||
| width: 750rpx; | |||
| height: 85vh; | |||
| background-color: #fff; | |||
| border-top-left-radius: 40rpx; | |||
| border-top-right-radius: 40rpx; | |||
| padding: 60rpx; | |||
| box-sizing: border-box; | |||
| } | |||
| .ipt { | |||
| margin-bottom: 50rpx; | |||
| } | |||
| .ipt h4 { | |||
| margin-bottom: 20rpx; | |||
| font-size: 36rpx; | |||
| color: #333; | |||
| } | |||
| .ipt input { | |||
| border-bottom: 1px solid #dedede; | |||
| padding-bottom: 20rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .loginBtn { | |||
| margin-top: 20rpx; | |||
| line-height: 85rpx; | |||
| text-align: center; | |||
| background: #3c9cff; | |||
| border-radius: 40rpx; | |||
| color: #fff; | |||
| margin-top: 50rpx; | |||
| } | |||
| .registerBtn { | |||
| margin-top: 20rpx; | |||
| line-height: 85rpx; | |||
| text-align: center; | |||
| border-radius: 40rpx; | |||
| color: #ccc; | |||
| margin-top: 50rpx; | |||
| border: none; | |||
| } | |||
| .tipbox { | |||
| position: fixed; | |||
| bottom: 120rpx; | |||
| left: 50%; | |||
| transform: translate(-50%, -120px); | |||
| } | |||
| .otherUser { | |||
| margin-top: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .txt { | |||
| font-size: 28rpx; | |||
| color: #969696; | |||
| } | |||
| .otherUser .uni-icons { | |||
| margin-left: 20rpx; | |||
| } | |||
| </style> | |||
+ 232
- 0
pages/order/order.vue
View File
| @ -0,0 +1,232 @@ | |||
| <template> | |||
| <view class="repairList reserveSpace"> | |||
| <view class="tab"> | |||
| <uv-tabs :list="list" lineWidth="60" lineHeight="10" @click="selectTag"></uv-tabs> | |||
| </view> | |||
| <view class="repairList-main"> | |||
| <view v-for="item in repairList" :key="item.id" class="repairItem"> | |||
| <view class="repairMain"> | |||
| <!-- <view class="userName">用户名</view> --> | |||
| <view class="build"> | |||
| <view> | |||
| <text style="margin-right: 10rpx;">{{ item.building }}</text> | |||
| <text> {{ item.room }}</text> | |||
| </view> | |||
| <text style="font-size: 26rpx;">{{ item.createTime }}</text> | |||
| </view> | |||
| <view class="desc"> | |||
| <uv-read-more :shadowStyle="shadowStyle" show-height="80rpx" fontSize="30rpx" :toggle="true"> | |||
| <view> | |||
| {{ item.context }} | |||
| </view> | |||
| </uv-read-more> | |||
| </view> | |||
| <view class="repairImages"> | |||
| <view v-for="(image,index) in item.image" :key="index" class="image-item"> | |||
| <image @click="viewImageAsList(index,item.image)" :src="image" mode="widthFix"></image> | |||
| </view> | |||
| </view> | |||
| <view class="btns"> | |||
| <view v-if="userInfo.isDai == '1' && !item.cleckState" @click="toReject(item.id)" class="btn">驳回 | |||
| </view> | |||
| <view v-if="userInfo.isDai == '1' && !item.cleckState" @click="toFinish(item.id)" class="btn">结单 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { | |||
| mapState, | |||
| } from 'vuex' | |||
| export default { | |||
| data() { | |||
| return { | |||
| list: [{ | |||
| name: '待完成', | |||
| }, { | |||
| name: '已完成', | |||
| }], | |||
| current: 0, | |||
| currentIndex: 0, | |||
| repairList: [], //报修列表 | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 3, | |||
| state: 0 | |||
| }, | |||
| total: 0 | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getRepairList() | |||
| }, | |||
| //滚动到屏幕底部 | |||
| onReachBottom() { | |||
| if (this.queryParams.pageSize <= this.total) { | |||
| this.queryParams.pageSize += 3 | |||
| this.getRepairList() | |||
| } | |||
| }, | |||
| methods: { | |||
| //跳转驳回 | |||
| toReject(id) { | |||
| uni.navigateTo({ | |||
| url: `/pages/reject/reject?orderId=${id}` | |||
| }) | |||
| }, | |||
| //跳转结单页面 | |||
| toFinish(id) { | |||
| uni.navigateTo({ | |||
| url: `/pages/finish/finish?orderId=${id}` | |||
| }) | |||
| }, | |||
| //查看图片 | |||
| viewImageAsList(index, imgArr) { | |||
| this.currentIndex = index | |||
| this.$utils.previewImage({ | |||
| current: this.currentIndex, | |||
| urls: imgArr | |||
| }) | |||
| }, | |||
| //选择了顶部的标签 | |||
| selectTag(tag) { | |||
| this.queryParams.state = tag.index | |||
| this.getRepairList() | |||
| }, | |||
| //获取报修列表 | |||
| getRepairList() { | |||
| this.$api('getSchoolOrderList', this.queryParams, res => { | |||
| if (res.code == 200) { | |||
| res.result.records.forEach(item => { | |||
| item.image ? item.image = item.image.split(',') : item.image = [] | |||
| }) | |||
| this.repairList = res.result.records | |||
| this.total = res.result.total | |||
| } | |||
| }) | |||
| } | |||
| }, | |||
| computed: { | |||
| shadowStyle() { | |||
| return { | |||
| // #ifndef APP-NVUE | |||
| backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)", | |||
| // #endif | |||
| // #ifdef APP-NVUE | |||
| // nvue上不支持设置复杂的backgroundImage属性 | |||
| backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))", | |||
| // #endif | |||
| paddingTop: "50px", | |||
| marginTop: "-50px", | |||
| } | |||
| }, | |||
| ...mapState(['userInfo']), | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .repairList { | |||
| background: #f8f8f8; | |||
| } | |||
| .tab { | |||
| display: flex; | |||
| align-items: center; | |||
| height: 80rpx; | |||
| background: white; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .repairList-main { | |||
| min-height: 100vh; | |||
| } | |||
| .repairItem { | |||
| display: flex; | |||
| background: white; | |||
| width: 96%; | |||
| margin: 0rpx auto; | |||
| border-radius: 20rpx; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .repairMain { | |||
| width: 100%; | |||
| box-sizing: border-box; | |||
| padding-left: 20rpx; | |||
| } | |||
| /* | |||
| .userName { | |||
| font-size: 32rpx; | |||
| margin: 10rpx 0rpx; | |||
| } */ | |||
| .build { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| font-size: 28rpx; | |||
| margin: 20rpx 0rpx; | |||
| } | |||
| .desc { | |||
| overflow-y: scroll; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .repairImages { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| margin: 10rpx 0rpx; | |||
| } | |||
| .image-item { | |||
| width: 24%; | |||
| margin-left: 1%; | |||
| height: 180rpx; | |||
| overflow: hidden; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| padding: 20rpx; | |||
| background: #f5f5f5; | |||
| border-radius: 20rpx; | |||
| } | |||
| .image-item image { | |||
| width: 100%; | |||
| } | |||
| .btns { | |||
| margin: 20rpx 0rpx; | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| } | |||
| .btn { | |||
| width: 200rpx; | |||
| height: 50rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| border-radius: 50rpx; | |||
| margin-left: 15rpx; | |||
| font-size: 30rpx; | |||
| color: white; | |||
| background: #f9ae3d; | |||
| } | |||
| .btn:nth-child(2) { | |||
| background: #3c9cff; | |||
| } | |||
| </style> | |||