|
|
@@ -1,22 +1,16 @@
|
|
|
-<template>
|
|
|
+<template>
|
|
|
<scroll-view scroll-y class="container">
|
|
|
<view class="banner">
|
|
|
<text class="banner-title">拍照点</text>
|
|
|
</view>
|
|
|
- <view class="record-card" style="flex-direction: row;">
|
|
|
- <uni-tag
|
|
|
- v-for="(tag,index) in 6" :key="index"
|
|
|
- :text="tag+''"
|
|
|
- size="medium"
|
|
|
- type="primary"
|
|
|
- circle
|
|
|
- @click="tabsClick(tag)"
|
|
|
- style="width:40rpx;margin: 0 10rpx;"
|
|
|
- ></uni-tag>
|
|
|
+ <view class="record-card flex-row">
|
|
|
+ <uni-tag class="tag-circle" v-for="(tag,index) in 6" :key="index" :text="tag+''" size="medium" type="primary" circle
|
|
|
+ @click="tabsClick(tag)"></uni-tag>
|
|
|
</view>
|
|
|
<view class="record-card" v-for="(item, index) in records" :key="index" v-show="current == item.sxid as number">
|
|
|
<view class="header-row">
|
|
|
- <text class="department">{{ item.photoitem }}</text>
|
|
|
+ <text class="label">序号：</text>
|
|
|
+ <text class="value">{{ item.photoitem }}</text>
|
|
|
<text class="status" :class="{'status-cancelled': item.status === '已取消'}">{{ item.status }}</text>
|
|
|
</view>
|
|
|
|
|
|
@@ -48,38 +42,28 @@
|
|
|
<button class="cancel-btn" v-if="item.status === '未执行'" @click="cancel(item.sxid)">
|
|
|
拍照
|
|
|
</button>
|
|
|
-
|
|
|
- <view class="info-row" style="margin: 10px 0;" >
|
|
|
- <view v-for="(tag,index) in item.imgname" :key="index" >
|
|
|
- <uni-badge text="x" absolute="rightTop" :offset="[-3,-3]" size="small" >
|
|
|
- <view>
|
|
|
- <uni-tag
|
|
|
- :text="tag"
|
|
|
- size="medium"
|
|
|
- type="primary"
|
|
|
- circle
|
|
|
- v-if="closeTags[index]"
|
|
|
- @click="closeTag(index)"
|
|
|
- ></uni-tag>
|
|
|
- </view>
|
|
|
- </uni-badge>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <view class="info-row" style="margin: 10px 0;">
|
|
|
+ <view v-for="(tag,index) in item.imgname" :key="index">
|
|
|
+ <uni-badge text="x" absolute="rightTop" :offset="[-3,-3]" size="small">
|
|
|
+ <view>
|
|
|
+ <uni-tag :text="tag" size="medium" type="primary" circle v-if="closeTags[index]"
|
|
|
+ @click="closeTag(index)"></uni-tag>
|
|
|
+ </view>
|
|
|
+ </uni-badge>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="my-page">
|
|
|
- <swiper class="swiper-box my-swiper" :current="0" :indicator-dots="true" v-if="item.urlpdt.length>0">
|
|
|
- <swiper-item v-for="(url, index) in item.urlpdt" :key="index">
|
|
|
- <view class="swiper-item ">
|
|
|
- <image class="my-image" :src="url" mode="aspectFill" />
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <image
|
|
|
- :src="item.urlspl"
|
|
|
- mode="widthFix"
|
|
|
- v-if="item.urlpdt.length == 0"
|
|
|
- ></image>
|
|
|
+ <swiper class="swiper-box my-swiper" :current="0" :indicator-dots="true" v-if="item.urlpdt.length>0">
|
|
|
+ <swiper-item v-for="(url, index) in item.urlpdt" :key="index">
|
|
|
+ <view class="swiper-item ">
|
|
|
+ <image class="my-image" :src="url" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <image :src="item.urlspl" mode="widthFix" v-if="item.urlpdt.length == 0"></image>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</template>
|
|
|
@@ -89,69 +73,69 @@
|
|
|
ref
|
|
|
} from 'vue'
|
|
|
type Record = {
|
|
|
- sxid: number,
|
|
|
- senum: string,
|
|
|
- photoitem: number,
|
|
|
- productNo: string,
|
|
|
- part: string,
|
|
|
- descb: string,
|
|
|
- date: string,
|
|
|
- partno: string,
|
|
|
- num: number,
|
|
|
- status: string,
|
|
|
- urlspl: string
|
|
|
- imgname: string[],
|
|
|
- urlpdt: string[]
|
|
|
+ sxid : number,
|
|
|
+ senum : string,
|
|
|
+ photoitem : number,
|
|
|
+ productNo : string,
|
|
|
+ part : string,
|
|
|
+ descb : string,
|
|
|
+ date : string,
|
|
|
+ partno : string,
|
|
|
+ num : number,
|
|
|
+ status : string,
|
|
|
+ urlspl : string
|
|
|
+ imgname : string[],
|
|
|
+ urlpdt : string[]
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
var current = ref(1)
|
|
|
var records = ref<Record[]>([]);
|
|
|
- var closeTags = ref([true,true,true,true,true,true,true])
|
|
|
+ var closeTags = ref([true, true, true, true, true, true, true])
|
|
|
const initRecords = [{
|
|
|
- sxid: 1,
|
|
|
- senum: '1',
|
|
|
- photoitem: 1,
|
|
|
- productNo: 'YH0001',
|
|
|
- part: '角焊缝',
|
|
|
- descb: '角片角焊缝',
|
|
|
- date: '2025-06-05',
|
|
|
- partno: 'TD10-01',
|
|
|
- num: 2,
|
|
|
- status: '未执行',
|
|
|
- urlspl: '/static/images/banner/banner01.jpg',
|
|
|
- imgname: ['1.jpg','2.jpg'],
|
|
|
- urlpdt: ['/static/images/banner/banner02.jpg', '/static/images/banner/banner03.jpg']
|
|
|
- },
|
|
|
- {
|
|
|
- sxid: 2,
|
|
|
- senum: '2',
|
|
|
- photoitem: 2,
|
|
|
- productNo: 'YH0002',
|
|
|
- part: '角焊缝',
|
|
|
- descb: '角片角焊缝',
|
|
|
- date: '2025-06-05',
|
|
|
- partno: 'TD10-02',
|
|
|
- num: 3,
|
|
|
- status: '未执行',
|
|
|
- urlspl: '/static/images/banner/banner01.jpg',
|
|
|
- imgname: ['1.jpg','2.jpg','3.jpg'],
|
|
|
- urlpdt: []
|
|
|
- }] as Record[];
|
|
|
-
|
|
|
- records.value = initRecords.filter(item=>item['photoitem'] == current.value)
|
|
|
- const tabsClick = (obj : number) =>{
|
|
|
+ sxid: 1,
|
|
|
+ senum: '1',
|
|
|
+ photoitem: 1,
|
|
|
+ productNo: 'YH0001',
|
|
|
+ part: '角焊缝',
|
|
|
+ descb: '角片角焊缝',
|
|
|
+ date: '2025-06-05',
|
|
|
+ partno: 'TD10-01',
|
|
|
+ num: 2,
|
|
|
+ status: '未执行',
|
|
|
+ urlspl: '/static/images/banner/banner01.jpg',
|
|
|
+ imgname: ['1.jpg', '2.jpg'],
|
|
|
+ urlpdt: ['/static/images/banner/banner02.jpg', '/static/images/banner/banner03.jpg']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sxid: 2,
|
|
|
+ senum: '2',
|
|
|
+ photoitem: 2,
|
|
|
+ productNo: 'YH0002',
|
|
|
+ part: '角焊缝',
|
|
|
+ descb: '角片角焊缝',
|
|
|
+ date: '2025-06-05',
|
|
|
+ partno: 'TD10-02',
|
|
|
+ num: 3,
|
|
|
+ status: '未执行',
|
|
|
+ urlspl: '/static/images/banner/banner01.jpg',
|
|
|
+ imgname: ['1.jpg', '2.jpg', '3.jpg'],
|
|
|
+ urlpdt: []
|
|
|
+ }] as Record[];
|
|
|
+
|
|
|
+ records.value = initRecords.filter(item => item['photoitem'] == current.value)
|
|
|
+ const tabsClick = (obj : number) => {
|
|
|
current.value = obj
|
|
|
- records.value = initRecords.filter(item=>item['photoitem'] == current.value)
|
|
|
+ records.value = initRecords.filter(item => item['photoitem'] == current.value)
|
|
|
}
|
|
|
- const closeTag = (index:number) =>{
|
|
|
+ const closeTag = (index : number) => {
|
|
|
closeTags.value[index] = false
|
|
|
}
|
|
|
|
|
|
- const cancel = (id:number) => {
|
|
|
+ const cancel = (id : number) => {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/work/record/PhotoList?id=${id}`
|
|
|
})
|
|
|
- }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -166,7 +150,7 @@
|
|
|
min-height: 100vh;
|
|
|
/* #endif */
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.banner {
|
|
|
background: linear-gradient(135deg, #6dd5ed, #2193b0);
|
|
|
border-radius: 24rpx;
|
|
|
@@ -174,14 +158,14 @@
|
|
|
margin-bottom: 40rpx;
|
|
|
box-shadow: 0 8rpx 16rpx rgba(33, 147, 176, 0.3);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.banner-title {
|
|
|
color: white;
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/* 卡片整体 */
|
|
|
.record-card {
|
|
|
background: #ffffff;
|
|
|
@@ -191,7 +175,7 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-bottom: 20rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
/* 头部：科室 和 状态 */
|
|
|
@@ -233,6 +217,8 @@
|
|
|
.label {
|
|
|
color: #102a43;
|
|
|
min-width: 100rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
@@ -266,35 +252,45 @@
|
|
|
.cancel-btn:active {
|
|
|
background-color: #a93232;
|
|
|
}
|
|
|
+
|
|
|
.swiper {
|
|
|
- height: 300rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
+ height: 300rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.swiper-box {
|
|
|
- height: 150px;
|
|
|
+ height: 150px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.swiper-item {
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
- display: flex;
|
|
|
- /* #endif */
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- height: 300rpx;
|
|
|
- line-height: 300rpx;
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
+ display: flex;
|
|
|
+ /* #endif */
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ height: 300rpx;
|
|
|
+ line-height: 300rpx;
|
|
|
}
|
|
|
+
|
|
|
.my-page {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
/* #ifndef APP-ANDROID */
|
|
|
min-height: 100%;
|
|
|
/* #endif */
|
|
|
- height: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex-row {
|
|
|
+ flex-direction: row;
|
|
|
}
|
|
|
|
|
|
+ .tag-circle {
|
|
|
+ width: 40rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
</style>
|
