washcar-employee-miniprogram 1.0.1

package/miniprogram_npm/tdesign-miniprogram/watermark/utils/generateBase64Url.d.ts

@@ -0,0 +1,14 @@
+export default function generateBase64Url(canvas: any, { width, height, gapX, gapY, offsetLeft, offsetTop, rotate, alpha, watermarkContent, lineSpace, watermarkColor, layout, }: {
+    width: any;
+    height: any;
+    gapX: any;
+    gapY: any;
+    offsetLeft: any;
+    offsetTop: any;
+    rotate: any;
+    alpha: any;
+    watermarkContent: any;
+    lineSpace: any;
+    watermarkColor: any;
+    layout: any;
+}, onFinish: any): void;

package/miniprogram_npm/tdesign-miniprogram/watermark/utils/generateBase64Url.js

@@ -0,0 +1 @@
+import{systemInfo}from"../../common/utils";export default function generateBase64Url(t,{width:a,height:e,gapX:o,gapY:l,offsetLeft:r,offsetTop:n,rotate:s,alpha:i,watermarkContent:c,lineSpace:f,watermarkColor:h,layout:g},m){const d="hexagonal"===g,p=t.getContext("2d");if(!p)return console.warn("当前环境不支持Canvas, 无法绘制水印"),void m("");const u=systemInfo.pixelRatio||1;let v={width:o+a};const x=(o+a)*u,w=(l+e)*u,y=a*u,I=e*u,C=x,A=w,D=(o+a)*u,R=(l+e)*u;t.width=x,t.height=w,d&&(t.width=2*x,t.height=2*w,v={width:o+2*a+a/2}),p.translate(r*u,n*u),p.globalAlpha=i,p.fillStyle="transparent",p.fillRect(0,0,y,I);const S=(t,a,e,o)=>{t.translate(a,e),t.rotate(Math.PI/180*Number(o)),t.translate(-a,-e)},$=Array.isArray(c)?c:[Object.assign({},c)];let b=0,E=0,L=0;$.forEach(t=>{t.top=b,t.url?(b+=e,L+=d?2:1):t.text&&(b+=f)});const U=(o,l=0,r=0,n=0,i=0)=>{var c,f;if(o.url){const{url:c,isGrayscale:f=!1}=o,h=t.createImage();h.crossOrigin="anonymous",h.referrerPolicy="no-referrer",h.src=c,h.onload=()=>{var c,g;if(null===(c=p.save)||void 0===c||c.call(p),S(p,n,i,s),f){p.drawImage(h,l,r+o.top*u,a*u,e*u);const t=p.getImageData(0,0,p.canvas.width,p.canvas.height),n=t.data;for(let t=0;t<n.length;t+=4){const a=(n[t]+n[t+1]+n[t+2])/3;n[t]=a,n[t+1]=a,n[t+2]=a}p.putImageData(t,0,0)}else p.drawImage(h,l,r+o.top*u,a*u,e*u);null===(g=p.restore)||void 0===g||g.call(p),E+=1,E===L&&m(t.toDataURL(),v)}}else if(o.text){const{text:t,fontSize:a=16,fontFamily:e="normal",fontWeight:g="normal"}=o,m=(null==o?void 0:o.fontColor)||h;null===(c=p.save)||void 0===c||c.call(p),S(p,n,i,s),((t,a,e,o,l,r,n,s,i)=>{t.font=`normal normal ${r} ${n*u}px/${o}px ${s}`,t.fillStyle=i,t.textAlign="start",t.textBaseline="top",t.fillText(l,a,e)})(p,l,r+o.top*u,I,t,g,a,e,m),null===(f=p.restore)||void 0===f||f.call(p)}};$.forEach(t=>{U(t,0,0,0,0)}),d&&$.forEach(t=>{U(t,D,R,C,A)}),0===L&&m(t.toDataURL(),v)}

package/miniprogram_npm/tdesign-miniprogram/watermark/utils/randomMovingStyle.d.ts

@@ -0,0 +1,10 @@
+export default function randomMovingStyle(): {
+    left0: string;
+    left25: string;
+    left50: string;
+    left75: string;
+    top0: string;
+    top25: string;
+    top50: string;
+    top75: string;
+};

package/miniprogram_npm/tdesign-miniprogram/watermark/utils/randomMovingStyle.js

@@ -0,0 +1 @@
+export default function randomMovingStyle(){const t=Math.floor(4*Math.random()),o=Math.floor(70*Math.random())+30;return{left0:`${1===t?90:3===t?0:o}%`,left25:`${0===t?90:2===t?0:100-o}%`,left50:`${1===t?0:3===t?90:100-o}%`,left75:`${0===t?0:2===t?90:o}%`,top0:`${0===t?0:2===t?95:o}%`,top25:`${1===t?95:3===t?0:o}%`,top50:`${0===t?95:2===t?0:100-o}%`,top75:`${1===t?0:3===t?95:100-o}%`}}

package/miniprogram_npm/tdesign-miniprogram/watermark/watermark.d.ts

@@ -0,0 +1,19 @@
+import { SuperComponent } from '../common/src/index';
+export default class Watermark extends SuperComponent {
+    externalClasses: string[];
+    properties: import("./type").TdWatermarkProps;
+    data: {
+        classPrefix: string;
+        watermarkStyle: {};
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    observers: {
+        'watermarkContent, movable, rotate, x, y, width, height, alpha, lineSpace, moveInterval, zIndex, rotate, offset, removable, isRepeat, layout'(): void;
+    };
+    methods: {
+        watermarkColor(): "rgba(238, 238, 238, 0.1)" | "rgba(0, 0, 0, 0.1)";
+        renderWatermark(): void;
+    };
+}

package/miniprogram_npm/tdesign-miniprogram/watermark/watermark.js

@@ -0,0 +1 @@
+import{__awaiter,__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import generateBase64Url from"./utils/generateBase64Url";import randomMovingStyle from"./utils/randomMovingStyle";import{appBaseInfo}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-watermark`;let Watermark=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.properties=props,this.data={classPrefix:name,watermarkStyle:{}},this.lifetimes={attached(){this.renderWatermark()}},this.observers={"watermarkContent, movable, rotate, x, y, width, height, alpha, lineSpace, moveInterval, zIndex, rotate, offset, removable, isRepeat, layout"(){this.renderWatermark()}},this.methods={watermarkColor:()=>"dark"===appBaseInfo.theme?"rgba(238, 238, 238, 0.1)":"rgba(0, 0, 0, 0.1)",renderWatermark(){this.createSelectorQuery().select("#watermarkCanvas").fields({node:!0,size:!0}).exec(e=>__awaiter(this,void 0,void 0,function*(){var t;if(!(null===(t=e[0])||void 0===t?void 0:t.node))return void console.error("Canvas node not found");const r=e[0].node,a=this.properties,o=a.movable?0:a.x,n=a.movable?0:a.y,i=a.offset||[],m=i[0]||o/2,s=i[1]||n/2,l={width:a.width,height:a.height,rotate:a.movable?0:a.rotate,lineSpace:a.lineSpace,alpha:a.alpha,gapX:o,gapY:n,watermarkContent:a.watermarkContent,offsetLeft:m,offsetTop:s,watermarkColor:this.watermarkColor(),layout:a.layout};generateBase64Url(r,l,(e,t)=>{let r={};if(a.movable){const{left0:e,left25:t,left50:a,left75:o,top0:n,top25:i,top50:m,top75:s}=randomMovingStyle();r={"--watermark-left-0":e,"--watermark-left-25":t,"--watermark-left-50":a,"--watermark-left-75":o,"--watermark-top-0":n,"--watermark-top-25":i,"--watermark-top-50":m,"--watermark-top-75":s}}this.setData({watermarkStyle:Object.assign({zIndex:a.zIndex,position:"absolute",left:0,right:0,top:0,bottom:0,width:"100%",height:"100%",backgroundSize:`${(null==t?void 0:t.width)||o.value+a.width}px`,pointerEvents:"none",backgroundRepeat:a.movable?"no-repeat":"repeat",backgroundImage:`url('${e}')`,animation:a.movable?`watermark infinite ${4*a.moveInterval/60}s`:"none"},r)})})}))}}}};Watermark=__decorate([wxComponent()],Watermark);export default Watermark;

package/miniprogram_npm/tdesign-miniprogram/watermark/watermark.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}

package/miniprogram_npm/tdesign-miniprogram/watermark/watermark.wxml

@@ -0,0 +1 @@
+<wxs module="_" src="../common/utils.wxs"/><view class="{{classPrefix}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}"><block wx:if="{{content}}">{{content}}</block><slot name="content"/><slot/><canvas type="2d" id="watermarkCanvas" style="display: none; width: 100%; height: 100%"/><view id="watermark" style="{{_._style(watermarkStyle)}}"></view></view>

package/miniprogram_npm/tdesign-miniprogram/watermark/watermark.wxss

@@ -0,0 +1,7 @@
+@import '../common/style/index.wxss';.t-watermark{position:relative;overflow:hidden;width:100%;}
+@keyframes watermark{
+0%{left:var(--watermark-left-0);top:var(--watermark-top-0);}
+25%{left:var(--watermark-left-25);top:var(--watermark-top-25);}
+50%{left:var(--watermark-left-50);top:var(--watermark-top-50);transform:translateX(-100%);}
+75%{left:var(--watermark-left-75);top:var(--watermark-top-75);}
+100%{left:var(--watermark-left-0);top:var(--watermark-top-0);}}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "washcar-employee-miniprogram",
+  "version": "1.0.1",
+  "description": "甜甜洗车员工端小程序",
+  "scripts": {
+    "publish:patch": "npm version patch && npm publish",
+    "publish:minor": "npm version minor && npm publish",
+    "publish:major": "npm version major && npm publish"
+  },
+  "dependencies": {
+    "@forgetman505/ttwashcar-order": "1.0.6",
+    "tdesign-miniprogram": "1.13.2"
+  }
+}

package/pages/car-wash/car-wash.js

@@ -0,0 +1,363 @@
+const {OrderStatus} = require('@forgetman505/ttwashcar-order')
+
+Page({
+    data: {
+        order_id: '',
+        orderInfo: {},
+        afterPhotos: [],
+        isUploading: false,
+        canComplete: false,
+        OrderStatus: OrderStatus
+    },
+
+    onLoad(options) {
+        const isLoggedIn = wx.getStorageSync('employeeLoggedIn')
+        if (!isLoggedIn) {
+            wx.navigateTo({url: '/pages/login/login'})
+            return
+        }
+
+        this.setData({order_id: options.order_id})
+        this.loadOrderInfo()
+    },
+
+    loadOrderInfo() {
+        wx.cloud.callFunction({
+            name: 'getOrders',
+            data: {
+                order_id: this.data.order_id
+            }
+        }).then(res => {
+            if (res.result.success && res.result.data.length > 0) {
+                const data = res.result.data[0]
+                console.log('loadOrderInfo - 订单信息:', data)
+                console.log('loadOrderInfo - 订单状态:', data.status)
+                console.log('loadOrderInfo - OrderStatus.PROGRESSING:', OrderStatus.PROGRESSING)
+                console.log('loadOrderInfo - OrderStatus.ACCEPTED:', OrderStatus.ACCEPTED)
+                console.log('loadOrderInfo - 状态是否匹配:', data.status === OrderStatus.PROGRESSING || data.status === OrderStatus.ACCEPTED)
+                
+                // 从orderInfo.images中提取照片信息并设置到afterPhotos
+                const afterPhotos = []
+                if (data.images && Array.isArray(data.images)) {
+                    // 获取临时下载链接
+                    wx.cloud.getTempFileURL({
+                        fileList: data.images,
+                        success: (res) => {
+                            res.fileList.forEach((file, index) => {
+                                afterPhotos.push({
+                                    fileID: data.images[index],
+                                    downloadUrl: file.tempFileURL
+                                })
+                            })
+                            
+                            this.setData({
+                                orderInfo: data,
+                                afterPhotos: afterPhotos
+                            }, () => {
+                                this.updateCanComplete()
+                            })
+                        },
+                        fail: (error) => {
+                            console.error('获取下载链接失败:', error)
+                            // 即使获取下载链接失败，也要设置orderInfo
+                            this.setData({
+                                orderInfo: data,
+                                afterPhotos: data.images.map(fileID => ({fileID}))
+                            }, () => {
+                                this.updateCanComplete()
+                            })
+                        }
+                    })
+                } else {
+                    this.setData({
+                        orderInfo: data,
+                        afterPhotos: afterPhotos
+                    }, () => {
+                        this.updateCanComplete()
+                    })
+                }
+            } else {
+                console.error('加载订单信息失败:', res.result.message)
+                wx.showToast({title: '加载订单信息失败', icon: 'none'})
+            }
+        }).catch(error => {
+            console.error('加载订单信息异常:', error)
+            wx.showToast({title: '加载订单信息异常', icon: 'none'})
+        })
+    },
+
+    takePhoto(e) {
+        wx.chooseImage({
+            count: 1,
+            sizeType: ['compressed'],
+            sourceType: ['camera'],
+            success: (res) => {
+                console.log('选择图片成功', res)
+                const tempFilePaths = res.tempFilePaths
+                this.uploadPhoto(tempFilePaths[0])
+            },
+            fail: (err) => {
+                console.error('选择图片失败', err)
+                wx.showToast({title: '拍照失败，请重试', icon: 'none'})
+            }
+        })
+    },
+
+    uploadPhoto(tempFilePath) {
+        this.setData({isUploading: true})
+
+        const fileName = `${this.data.order_id}_after_${Date.now()}.jpg`
+
+        wx.cloud.uploadFile({
+            cloudPath: `car-wash-photos/${fileName}`,
+            filePath: tempFilePath,
+            success: (res) => {
+                console.log('上传图片成功', res)
+                console.log('当前afterPhotos长度:', this.data.afterPhotos.length)
+                
+                // 获取临时下载链接
+                wx.cloud.getTempFileURL({
+                    fileList: [res.fileID],
+                    success: (fileRes) => {
+                        console.log('获取下载链接成功', fileRes)
+                        const downloadUrl = fileRes.fileList[0].tempFileURL
+                        
+                        const photo = {
+                            fileID: res.fileID,
+                            downloadUrl: downloadUrl
+                        }
+
+                        // 只保留一张照片
+                        const photos = [photo]
+                        console.log('更新后afterPhotos长度:', photos.length)
+                        this.setData({afterPhotos: photos}, () => {
+                            console.log('setData完成后afterPhotos长度:', this.data.afterPhotos.length)
+                            this.updateCanComplete()
+                        })
+
+                        wx.showToast({title: '上传成功', icon: 'success'})
+                    },
+                    fail: (error) => {
+                        console.error('获取下载链接失败:', error)
+                        // 即使获取下载链接失败，也要设置photo
+                        const photo = {
+                            fileID: res.fileID
+                        }
+
+                        // 只保留一张照片
+                        const photos = [photo]
+                        console.log('更新后afterPhotos长度:', photos.length)
+                        this.setData({afterPhotos: photos}, () => {
+                            console.log('setData完成后afterPhotos长度:', this.data.afterPhotos.length)
+                            this.updateCanComplete()
+                        })
+
+                        wx.showToast({title: '上传成功', icon: 'success'})
+                    }
+                })
+            },
+            fail: (error) => {
+                console.error('上传图片失败:', error)
+                wx.showToast({title: '上传失败，请重试', icon: 'none'})
+            },
+            complete: () => {
+                this.setData({isUploading: false})
+            }
+        })
+    },
+
+    retakePhoto(e) {
+        const index = e.currentTarget.dataset.index
+        console.log('retakePhoto - 当前afterPhotos长度:', this.data.afterPhotos.length)
+        console.log('retakePhoto - 要删除的索引:', index)
+
+        wx.showModal({
+            title: '确认重拍',
+            content: '确定要重拍洗车后的照片吗？',
+            success: (res) => {
+                if (res.confirm) {
+                    // 清空照片数组
+                    this.setData({afterPhotos: []}, () => {
+                        console.log('retakePhoto - setData完成后afterPhotos长度:', this.data.afterPhotos.length)
+                        this.updateCanComplete()
+                    })
+                    this.takePhoto({})
+                }
+            }
+        })
+    },
+
+    previewPhoto(e) {
+        const photos = e.currentTarget.dataset.photos
+        const index = e.currentTarget.dataset.index
+        
+        // 获取所有照片的fileID
+        const fileIDs = photos.map(p => p.fileID)
+        
+        // 获取临时下载链接
+        wx.cloud.getTempFileURL({
+            fileList: fileIDs,
+            success: (res) => {
+                const urls = res.fileList.map(file => file.tempFileURL)
+                
+                wx.previewImage({
+                    current: urls[index],
+                    urls: urls
+                })
+            },
+            fail: (error) => {
+                console.error('获取预览链接失败:', error)
+                wx.showToast({title: '预览失败，请重试', icon: 'none'})
+            }
+        })
+    },
+
+    updateCanComplete() {
+        console.log('updateCanComplete - afterPhotos长度:', this.data.afterPhotos.length)
+        const canComplete = this.data.afterPhotos.length === 1
+        console.log('updateCanComplete - canComplete:', canComplete)
+        this.setData({canComplete})
+    },
+
+    handleStartService() {
+        wx.showModal({
+            title: '确认开始',
+            content: '确定要开始此订单的服务吗？',
+            success: (res) => {
+                if (res.confirm) {
+                    wx.showLoading({title: '提交中...'})
+
+                    const employeeInfo = wx.getStorageSync('employeeInfo')
+                    if (!employeeInfo) {
+                        wx.hideLoading()
+                        wx.showToast({title: '员工信息不存在', icon: 'none'})
+                        return
+                    }
+
+                    wx.cloud.callFunction({
+                        name: 'updateOrder',
+                        data: {
+                            order_id: this.data.order_id,
+                            updates: {
+                                status: OrderStatus.PROGRESSING,
+                                employee_id: employeeInfo._id
+                            }
+                        }
+                    }).then(res => {
+                        wx.hideLoading()
+                        if (res.result.success) {
+                            wx.showToast({title: '服务已开始', icon: 'success'})
+                            setTimeout(() => {
+                                // 重新加载订单信息
+                                this.loadOrderInfo()
+                            }, 1500)
+                        } else {
+                            console.error('开始订单服务失败:', res.result.message)
+                            wx.showToast({title: '提交失败，请重试', icon: 'none'})
+                        }
+                    }).catch(error => {
+                        wx.hideLoading()
+                        console.error('开始订单服务异常:', error)
+                        wx.showToast({title: '提交失败，请重试', icon: 'none'})
+                    })
+                }
+            }
+        })
+    },
+
+    handleCompleteService() {
+        console.log('handleCompleteService - canComplete:', this.data.canComplete)
+        console.log('handleCompleteService - afterPhotos长度:', this.data.afterPhotos.length)
+        if (!this.data.canComplete) {
+            wx.showToast({title: '请完成所有照片拍摄', icon: 'none'})
+            return
+        }
+
+        wx.showModal({
+            title: '确认完成',
+            content: '确定要完成此订单的服务吗？',
+            success: (res) => {
+                if (res.confirm) {
+                    wx.showLoading({title: '提交中...'})
+
+                    const employeeInfo = wx.getStorageSync('employeeInfo')
+                    if (!employeeInfo) {
+                        wx.hideLoading()
+                        wx.showToast({title: '员工信息不存在', icon: 'none'})
+                        return
+                    }
+
+                    const photos = this.data.afterPhotos.map(photo => photo.fileID)
+
+                    console.log('handleCompleteService - 要提交的照片数量:', photos.length)
+
+                    wx.cloud.callFunction({
+                        name: 'updateOrder',
+                        data: {
+                            order_id: this.data.order_id,
+                            updates: {
+                                status: OrderStatus.FINISHED,
+                                employee_id: employeeInfo._id,
+                                finish_time: new Date()
+                            },
+                            photos: photos
+                        }
+                    }).then(res => {
+                        wx.hideLoading()
+                        if (res.result.success) {
+                            wx.showToast({title: '服务完成', icon: 'success'})
+                            setTimeout(() => {
+                                // 获取上一页
+                                const pages = getCurrentPages()
+                                let prevPage = null
+                                if (pages.length > 1) {
+                                    prevPage = pages[pages.length - 2]
+                                }
+                                
+                                // 返回上一页
+                                wx.navigateBack({
+                                    delta: 1
+                                })
+                                
+                                // 延迟执行，确保页面已经返回
+                                setTimeout(() => {
+                                    if (prevPage) {
+                                        if (prevPage.route === 'pages/main/main') {
+                                            // 上一页是main页面，调用其方法传递订单ID
+                                            prevPage.removeCompletedOrder(this.data.order_id)
+                                        } else if (prevPage.route === 'pages/order/order') {
+                                            // 上一页是order页面，直接调用其方法
+                                            prevPage.removeCompletedOrder(this.data.order_id)
+                                        }
+                                    }
+                                }, 500)
+                            }, 1500)
+                        } else {
+                            console.error('完成订单服务失败:', res.result.message)
+                            wx.showToast({title: '提交失败，请重试', icon: 'none'})
+                        }
+                    }).catch(error => {
+                        wx.hideLoading()
+                        console.error('完成订单服务异常:', error)
+                        wx.showToast({title: '提交失败，请重试', icon: 'none'})
+                    })
+                }
+            }
+        })
+    },
+
+    handlePhoneCall(e) {
+        const phone = e.currentTarget.dataset.phone
+        if (phone) {
+            wx.makePhoneCall({
+                phoneNumber: phone,
+                success: function() {
+                    console.log('拨打电话成功')
+                },
+                fail: function() {
+                    console.log('拨打电话失败')
+                }
+            })
+        }
+    }
+})

package/pages/car-wash/car-wash.json

@@ -0,0 +1,14 @@
+{
+  "navigationBarTitleText": "洗车服务",
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTextStyle": "black",
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-image": "tdesign-miniprogram/image/image",
+    "t-upload": "tdesign-miniprogram/upload/upload",
+    "t-tag": "tdesign-miniprogram/tag/tag",
+    "t-divider": "tdesign-miniprogram/divider/divider"
+  }
+}

package/pages/car-wash/car-wash.wxml

@@ -0,0 +1,94 @@
+<view class="car-wash-page">
+    <view class="header-section">
+        <view class="order-card">
+            <view class="card-title">
+                <text class="title-icon">🚗</text>
+                <text>订单信息</text>
+            </view>
+            <t-cell-group>
+                <t-cell title="车牌">
+                    <view slot="note" class="cell-note">
+                        <text class="car-number">{{orderInfo.car_number}}</text>
+                        <t-tag theme="default" variant="light" size="small">{{orderInfo.car_type}}</t-tag>
+                    </view>
+                </t-cell>
+                <t-cell title="地址" note="{{orderInfo.address}}" noteAlign="right"/>
+                <t-cell title="手机号">
+                    <view slot="note" class="cell-note phone" bindtap="handlePhoneCall" data-phone="{{orderInfo.phone}}">
+                        {{orderInfo.phone}}
+                    </view>
+                </t-cell>
+                <t-cell title="服务金额">
+                    <view slot="note" class="amount-note">
+                        <text class="amount">¥{{orderInfo.amount}}</text>
+                    </view>
+                </t-cell>
+            </t-cell-group>
+        </view>
+    </view>
+
+
+    <view class="photo-section" wx:if="{{orderInfo.status === OrderStatus.PROGRESSING || (orderInfo.status === OrderStatus.FINISHED && afterPhotos.length > 0)}}">
+        <view class="section-header">
+            <text class="section-title">✨ 洗车照片</text>
+        </view>
+        <view class="photo-grid">
+            <view wx:for="{{afterPhotos}}" wx:key="index" class="photo-item">
+                <view class="photo-wrapper" wx:if="{{orderInfo.status === OrderStatus.PROGRESSING}}" bindtap="retakePhoto" data-index="{{index}}">
+                    <t-image
+                        src="{{item.downloadUrl || item.fileID}}"
+                        mode="aspectFill"
+                        class="photo-image"
+                        bind:click="previewPhoto"
+                        data-photos="{{afterPhotos}}"
+                        data-index="{{index}}"
+                    />
+                    <view class="photo-overlay">
+                        <text class="overlay-plus">+</text>
+                    </view>
+                </view>
+                <view wx:else class="photo-wrapper" bindtap="previewPhoto" data-photos="{{afterPhotos}}" data-index="{{index}}">
+                    <t-image
+                        src="{{item.downloadUrl || item.fileID}}"
+                        mode="aspectFill"
+                        class="photo-image"
+                    />
+                </view>
+            </view>
+            <view wx:if="{{afterPhotos.length < 1 && orderInfo.status !== OrderStatus.FINISHED}}"
+                  class="photo-item add-photo" bindtap="takePhoto" data-type="after">
+                <view class="add-wrapper">
+                    <text class="add-icon">+</text>
+                    <text class="add-text">拍摄</text>
+                </view>
+            </view>
+        </view>
+    </view>
+
+    <view class="footer-section"
+          wx:if="{{orderInfo.status === OrderStatus.PROGRESSING || orderInfo.status === OrderStatus.ACCEPTED}}">
+        <t-button
+            wx:if="{{orderInfo.status === OrderStatus.ACCEPTED}}"
+            theme="default"
+            size="large"
+            block
+            bindtap="handleStartService"
+        >
+            开始
+        </t-button>
+        <t-button
+            wx:else
+            theme="default"
+            size="large"
+            block
+            disabled="{{!canComplete}}"
+            loading="{{isUploading}}"
+            bindtap="handleCompleteService"
+        >
+            完成服务
+        </t-button>
+        <view class="tip-text">
+            <text wx:if="{{!canComplete && orderInfo.status === OrderStatus.PROGRESSING}}">请完成所有照片拍摄后才能提交</text>
+        </view>
+    </view>
+</view>