kxmall-ui/kxmall-rider-ui/pages/task/complete.vue

<template>
  <view class="complete-page">
    <view class="success-container">
      <image class="success-image" src="/static/task/success.png" mode="widthFix" />
      <view style="padding-top: 50upx; color: #1c84c6"> 订单已完成，感谢您的付出！ </view>
      
      <view class="btn-group" style="padding-top: 200upx">
        <view class="btn btn-primary " @click="goToHome">去首页</view>
        <view class="btn btn-secondary" @click="uploadImage">去上传图片</view>
      </view>
    </view>
  
  </view>


</template>

<script>
export default {
  data() {
    return {
      riderOrderId: ''
    }
  },
  onLoad(options) {
    if (options.id) {
      this.riderOrderId = options.id
    }
  },
  methods: {
    // 去首页
    goToHome() {
      uni.switchTab({
        url: '/pages/task/task'
      })
    },
    
    // 上传图片
    uploadImage() {
      if (!this.riderOrderId) {
        this.$api.msg('订单ID不存在')
        return
      }
      
      // 跳转到图片上传页面，带上订单ID
      uni.redirectTo({
        url: `/pages/order/order?id=${this.riderOrderId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.complete-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40upx;
  box-sizing: border-box;
}

.success-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .success-image {
    width: 550upx;
    height: 550upx;
  }
}

.button-container {
  width: 100%;
  max-width: 600upx;
}

.btn {
  flex: 1;
  height: 88upx;
  line-height: 88upx;
  text-align: center;
  border-radius: 44upx;
  font-size: 32upx;
  font-weight: 500;
  
  width: 500upx;
  margin-top: 40upx;
  margin-bottom: 60upx;
  
  &.btn-primary {
    background-color: #007aff;
    color: #fff;
  }
  
  &.btn-secondary {
    background-color: #fff;
    color: #007aff;
    border: 2upx solid #007aff;
  }
  
  &:active {
    opacity: 0.8;
  }
}
</style>