书写维修详情页面

test
jinna 1 year ago
parent 3bbaab9704
commit 1a18d66244
  1. 3
      pages/submission/records.vue
  2. 359
      pages/submission/recordsdetails.vue
  3. BIN
      static/images/loadmore.png

@ -217,9 +217,10 @@ export default {
},
//
goPage(item, type) {
console.log('item----------->',item)
if (type == 'details') {
uni.navigateTo({
url: "/pages/submission/recordsdetails",
url: "/pages/submission/recordsdetails?id=" + item.id,
});
}

@ -1,11 +1,362 @@
<template>
<view class="pages-css">
详情
</view>
<view class="pages-css">
<view class="">
<view class="status_box">
<view class="status_top">
<text class="status_txt">{{detailForm.status == 0 ? '待接单' : '维修完成'}}</text>
<view class="load_more">
<text class="load_more_txt">查看更多</text>
<img style="transform: rotate(90deg)" src="../../static/images/loadmore.png" alt="" />
</view>
</view>
<view class="status_bottom">
<text class="status_tip">
{{detailForm.status == 0 ? '【待接单】当前工单等待接单中' : '【维修完成】维修完成,请尽快完成评价'}}
</text>
<!-- <text class="status_date">{{detailForm.createTime.substring(0,10)}}</text> -->
</view>
</view>
<view class="repair_detail">
<view class="repair_title">故障详情</view>
<view class="detail_item">
<text class="item_left_txt">故障描述</text>
<text class="item_right_txt reason">{{detailForm.faultDescribe}}</text>
</view>
<view class="detail_item">
<text class="item_left_txt">故障位置</text>
<text class="item_right_txt">{{detailForm.faultLocation}}</text>
</view>
<view class="detail_item">
<text class="item_left_txt">设备名称</text>
<text class="item_right_txt">{{detailForm.deviceName}}</text>
</view>
<view class="detail_item">
<text class="item_left_txt">故障类别</text>
<text class="item_right_txt">{{detailForm.faultType}}</text>
</view>
<view class="detail_item">
<text class="item_left_txt">故障视频</text>
<view class="item_right_txt video">
<!-- http://124.221.142.15:9000/laboratory/upload/20241112/45fb049735d6225f7efdcf0faece6477.mp4 -->
<video v-show="detailForm.videoAttaches && detailForm.videoAttaches.length > 0" :src="detailForm.videoAttaches[0].link" style="width: 148px; height: 148px"
controls></video>
</view>
</view>
<view class="detail_item">
<text class="item_left_txt">故障图片</text>
<text class="item_right_txt imgs">故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述</text>
</view>
</view>
<view class="repair_detail">
<view class="repair_title">维修详情</view>
<view class="detail_item">
<text class="item_left_txt">维修人</text>
<text class="item_right_txt">李四</text>
</view>
<view class="detail_item">
<text class="item_left_txt">设备名称</text>
<text class="item_right_txt">通风柜</text>
</view>
<view class="detail_item">
<text class="item_left_txt">故障原因</text>
<text class="item_right_txt reason">此处是故障发生原因此处是故障发生原因此处是故障发生原因此处是故障发生原因此处是故障发生原因此处是故障发生原因</text>
</view>
<view class="detail_item" style="margin-top: 10rpx;">
<text class="item_left_txt">处理方法</text>
<text class="item_right_txt reason">此处是处理方法此处是处理方法此处是处理方法此处是处理方法此处是处理方法</text>
</view>
<view class="detail_item">
<text class="item_left_txt">维修材料</text>
<view class="item_right_table">
<view class="table_box">
<view class="table_txt left">物料名称</view>
<view class="table_txt right">金额</view>
</view>
<view class="table_box table_item" v-for="item in tableList" :key="item.id">
<view class="table_txt left">{{item.goodsName}}</view>
<view class="table_txt right">{{item.goodsPrice}}</view>
</view>
<view class="table_box table_sub">
<view class="table_txt left">合计</view>
<view class="table_txt right">{{totalPrice}}</view>
</view>
<view class="table_box table_sub">
<view class="table_txt left">折扣</view>
<view class="table_txt right">{{discount}}</view>
</view>
<view class="table_box table_sub">
<view class="table_txt left">折后价格</view>
<view class="table_txt right">{{discountPrice}}</view>
</view>
</view>
</view>
</view>
<view class="repair_detail">
<view class="repair_title">其他信息</view>
<view class="detail_item">
<text class="item_left_txt">提报人</text>
<text class="item_right_txt">张三</text>
</view>
<view class="detail_item">
<text class="item_left_txt">提报人电话</text>
<text class="item_right_txt">13210251120</text>
</view>
<view class="detail_item">
<text class="item_left_txt">提报单号</text>
<text class="item_right_txt">20241011001</text>
</view>
<view class="detail_item">
<text class="item_left_txt">提报时间</text>
<text class="item_right_txt">2024-10-11 12:45</text>
</view>
<view class="detail_item">
<text class="item_left_txt">系统接单时间</text>
<text class="item_right_txt">2024-10-12 08:45</text>
</view>
</view>
</view>
<view class="evaluate_box">
<view class="evaluate_btn">
评价
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tableList: [
{
id:'001',
goodsName: '物料1',
goodsPrice: '1000.00'
},
{
id:'002',
goodsName: '物料2',
goodsPrice: '59.00'
},
{
id:'003',
goodsName: '物料3',
goodsPrice: '25.00'
},
],
totalPrice:'1084.00',
discount:'9',
discountPrice:'975.60',
detailId:'',
detailForm:{}
}
},
onLoad(options){
console.log('options==========>',options)
this.detailId = options.id
this.getDetail()
},
mounted() {
},
methods:{
getDetail(){
let query_ = {
id: this.detailId
}
this.$u.api.getBreakdownInfo(query_).then(res => {
this.detailForm = res.data
console.log('detailForm----------->',this.detailForm)
})
},
}
}
</script>
<style lang="scss" scoped>
.pages-css {
width: 100%;
padding: 0;
background: rgba(239, 239, 239, 1);
padding-top: 26rpx;
padding-bottom: 180rpx;
.status_box {
margin: 0 24rpx 20rpx;
height: 180rpx;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
font-size: 36rpx;
text-align: left;
font-family: -bold;
.status_top {
width: 100%;
padding: 40rpx 20rpx 30rpx 30rpx;
// background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
.status_txt {
color: rgba(0, 0, 0, 1);
font-size: 36rpx;
text-align: left;
font-family: SourceHanSansSC-bold;
font-weight: bold;
}
.load_more {
color: rgba(108, 108, 108, 1);
font-size: 28rpx;
text-align: left;
font-family: SourceHanSansSC-regular;
display: flex;
align-items: center;
}
}
.status_bottom {
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(190, 190, 190, 1);
font-size: 28rpx;
text-align: left;
font-family: SourceHanSansSC-regular;
.status_date {
margin-right: 22rpx;
}
}
}
.fault_detail {
margin: 0 24rpx 20rpx;
height: 180rpx;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, 1);
}
.repair_detail {
margin: 0 24rpx 20rpx;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, 1);
padding:6rpx 0 34rpx;
.repair_title {
line-height: 60rpx;
color: rgba(0, 0, 0, 1);
font-size: 32rpx;
text-align: left;
font-family: SourceHanSansSC-bold;
margin: 18rpx 0 0rpx 20rpx;
font-weight: bold;
}
.detail_item {
padding: 4rpx 20rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
.item_left_txt {
color: rgba(108, 108, 108, 1);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
width: 200rpx;
margin-right: 20rpx;
line-height: 60rpx;
}
.item_right_txt {
max-width: calc(100% - 220rpx);
color: rgba(0, 0, 0, 1);
font-size: 28rpx;
// text-align: left;
text-align: justify;
font-family: SourceHanSansSC-regular;
}
.item_right_table {
width: calc(100% - 220rpx);
margin-top: 10rpx;
.table_box {
width: 100%;
height: 60rpx;
background-color: #e8e8e8;
border: 1px solid #bbbbbb;
font-size: 14px;
color: #101010;
line-height: 60rpx;
display: flex;
.left {
width: 72%;
height: 100%;
text-align: center;
border-right: 2rpx solid #bbbbbb;
}
.right {
width: 28%;
height: 100%;
text-align: center;
}
}
.table_item{
background-color: #fff;
border-top: none;
}
.table_sub{
border-top: none;
background-color: #fff;
}
}
.reason {
word-wrap: warp;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 定义显示的行数 */
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.evaluate_box {
width: 100%;
height: 154rpx;
bottom: 0;
position: fixed;
background: #fff;
display: flex;
align-items: center;
justify-content: flex-end;
.evaluate_btn {
width: 160rpx;
height: 60rpx;
border-radius: 8rpx;
background-color: rgba(255, 255, 255, 1);
color: rgba(58, 98, 215, 1);
font-size: 24rpx;
text-align: center;
font-family: PingFangSC-regular;
border: 2rpx solid rgba(58, 98, 215, 1);
margin-right: 26rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 B

Loading…
Cancel
Save