13 changed files with 539 additions and 197 deletions
Unified 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> | <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> | </template> | ||||
| <script> | <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> | </script> | ||||
| <style scoped> | <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> | </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> | |||||