wanyu_frontend/pages/order/order-submit.vue

<template>
  <view class="ctr">
    <view class="group">
      <view class="group-name flex-l line-after">
        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
        <text class="text">沟通后请提交信息</text>
      </view>
      <view class="item time">
        <view class="item-row flex-sb">
          <view class="title flex-l">上门时间</view>
          <uni-datetime-picker type="datetime" :hide-second="true">
            <view class="value flex-r">2025年03月22日21:42</view>
          </uni-datetime-picker>
        </view>
        <view class="desc flex-l">点击时间可更改，请确认和客户沟通的上门时间</view>
      </view>
    </view>
    <view class="group">
      <view class="group-name flex-l line-after">
        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
        <text class="text">服务完成后请提交信息</text>
      </view>
      <view class="item upload flex-sb">
        <view class="left">
          <view class="title flex-l">拍照打卡</view>
          <view class="desc flex-l">请上传完成图片，留存记录</view>
        </view>
        <view class="right flex-c">
          <view class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4" hover-start-time="0" hover-stay-time="50">
            <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
            <view class="up flex-c">点击上传</view>
          </view>
        </view>
      </view>
    </view>
    <view class="group">
      <view class="group-name flex-l line-after">
        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
        <text class="text">提交收款信息</text>
      </view>
      <view class="item input flex-sb line-after">
        <view class="title flex-l">收款金额</view>
        <view class="input-ctr">
          <input type="digit" class="uni-input" placeholder-class="placeholder-class" placeholder="请输入收款金额"/>
        </view>
      </view>
      <view class="item input flex-sb line-after">
        <view class="title flex-l">优惠信息</view>
        <view class="uni-input flex-r">30.00元抵扣50.00元</view>
      </view>
      <view class="item upload flex-sb">
        <view class="left">
          <view class="title flex-l">收款信息</view>
          <view class="desc flex-l">请上传收款成功图片</view>
        </view>
        <view class="right flex-c">
          <view class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4" hover-start-time="0" hover-stay-time="50">
            <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
            <view class="up flex-c">点击上传</view>
          </view>
        </view>
      </view>
    </view>
    <me-empty-space height="376"></me-empty-space>
    <view class="bottom">
      <me-button @click="submit()" text="确认上门时间" width="686rpx" icon-type="icon-arrow-right-circle" margin-top="32rpx"></me-button>
    </view>
  </view>
</template>

<script setup>

import MeIcon from "../../components/me-icon/me-icon.vue";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeButton from "../../components/me-button/me-button.vue";
import helpers from "../../utils/helpers";

</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  height: 100vh;
  .group {
    width: 100%;
    background: var(--containerBgColor);
    border-radius: 16rpx;
    padding: 20rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    .group-name {
      width: 100%;
      height: 80rpx;
      position: relative;
      .text {
        font-size: 30rpx;
        color: #E18F00;
        margin-left: 8rpx;
      }
    }
    .item {
      width: 100%;
    }
    .time {
      .item-row {
        width: 100%;
        height: 100rpx;
        .title {
          width: 200rpx;
          height: 100rpx;
          font-size: 30rpx;
          color: var(--titleColor);
        }
        .value {
          width: 446rpx;
          height: 100rpx;
          font-size: 30rpx;
          color: var(--titleColor);
        }
      }
      .desc {
        width: 100%;
        min-height: 50rpx;
        font-size: 28rpx;
        color: var(--descriptionColor);
        line-height: 48rpx;
      }
    }
    .upload {
      .left {
        width: 516rpx;
        height: 130rpx;
        .title {
          width: 100%;
          height: 80rpx;
          font-size: 30rpx;
          color: var(--titleColor);
        }
        .desc {
          width: 100%;
          height: 50rpx;
          font-size: 28rpx;
          color: var(--descriptionColor);
        }
      }
      .right {
        width: 130rpx;
        height: 130rpx;
        .up-ctr {
          width: 100rpx;
          height: 100rpx;
          background: var(--contentBgColor);
          border-radius: 8rpx;
          .up {
            width: 100%;
            height: 36rpx;
            font-size: 20rpx;
            color: var(--summaryColor);
          }
        }
      }
    }
    .input {
      width: 100%;
      height: 100rpx;
      position: relative;
      .title {
        width: 200rpx;
        height: 100rpx;
        font-size: 30rpx;
        color: var(--titleColor);
      }
      .input-ctr {
        width: 446rpx;
        height: 100rpx;
      }
      .uni-input {
        text-align: right;
        width: 100%;
        height: 100%;
        font-size: 30rpx;
        color: var(--titleColor);
      }
    }
  }
  .bottom {
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: 68rpx;
    background: var(--pageBgColor);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
  }
}
</style>