docs:再生体验版发布

yangan

2024-08-02 78252f8407345ffceed8157a1c1685c09cdec029

 pages/public-page/historicalOrders/index.vue

@@ -1,78 +1,109 @@
<template>
    <div>
        <div class="warp">
            <div class="ingOrder" v-for="item,i in historyData" :key="i"
                @click="list3CardIconClick(item)"
                >
                <!-- 第一行 -->
                <div class="firstLine">
                    <div class="leftIcon">
                        <div class="leftOneDiv">
                            <span class="leftOne">装</span>
                        </div>
                        <div class="leftLine"></div>
                        <div class="rightDiv">
                            <span class="rightone">卸</span>
                        </div>
                    </div>
                    <div class="centerTitle">
                        <view class="filedname exceedHide">
                  <text
                     v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.deptName }}</text>
                     <text
                     v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerName }}</text>
                     <text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
                     {{item.filedName}}
                  </text>
                  </view>
                        <p class="centerLine"></p>
                        <view class="filedname exceedHide">
                     <text
                  v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.customerName }}</text>
                  <text
                  v-else-if="item.orderType == '外购' || item.orderType == '内购'">{{ item.deptName }}</text>
                  <text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
                  {{item.toFiledName}}
               </text>
               </view>
                    </div>
                    <div class="rightIcon">
                        <u-icon name="map"
                   color="#4978F0"
                         @click.stop="skipMap(item)"
                  size="40"></u-icon
                        >
                        <u-icon 
                        @click.stop="skipMap(item)"
                        name="map"
                   color="#4978F0"
                  size="40"></u-icon>
                    </div>
             <div class="ingOrderDiv">
          <div
            class="ingOrder"
            v-for="(item, i) in historyData"
            :key="i"
            @click="list3CardIconClick(item)"
          >
            <!-- 第一行 -->
            <div class="firstLine">
              <div class="leftIcon">
                <div class="leftOneDiv">
                  <span class="leftOne">装</span>
                </div>
                <div class="statusBox">
                    <view class="status">
            <u-tag :text="coalStatus[item.statusWeigh] || ''"
            plain>
            </u-tag>
          </view>
                <div class="leftLine"></div>
                <div class="rightDiv">
                  <span class="rightone">卸</span>
                </div>
                
                <div class="twoLine">
                    <div class="twoleft">
                     <view class="time-icon"><u-icon name="clock"
                           color="#515151"
                           size="25"></u-icon></view>
                     <view class="send-date">{{ item.yuYueSection || item.yuYueTime }}</view>
                    </div>
                    <div class="twoRight">
                        <u-tag :text="item.coalName" plain> </u-tag>
                        <u-tag :text="item.orderType" plain> </u-tag>
                    </div>
                </div>
                <!-- <div class="threeLine">
                    <span class="more" @click="todoHistory">MORE>></span>
                </div> -->
              </div>
              <div class="centerTitle">
                <view class="filedname exceedHide">
                  <text
                    v-if="item.orderType == '外销' || item.orderType == '内销'"
                    >{{ item.deptName }}</text
                  >
                  <text
                    v-else-if="
                      item.orderType == '外购' || item.orderType == '内购'
                    "
                    >{{ item.customerName }}</text
                  >
                  <text
                    v-else-if="
                      item.orderType == '转出' || item.orderType == '转入'
                    "
                  >
                    {{ item.filedName }}
                  </text>
                </view>
                <p class="centerLine"></p>
                <view class="filedname exceedHide">
                  <text
                    v-if="item.orderType == '外销' || item.orderType == '内销'"
                    >{{ item.customerName }}</text
                  >
                  <text
                    v-else-if="
                      item.orderType == '外购' || item.orderType == '内购'
                    "
                    >{{ item.deptName }}</text
                  >
                  <text
                    v-else-if="
                      item.orderType == '转出' || item.orderType == '转入'
                    "
                  >
                    {{ item.toFiledName }}
                  </text>
                </view>
              </div>
              <div class="rightIcon">
                <u-icon
                  name="map"
                  color="#4978F0"
                  @click.stop="skipMap(item)"
                  size="40"
                ></u-icon>
                <u-icon
                  @click.stop="skipMap(item)"
                  name="map"
                  color="#4978F0"
                  size="40"
                ></u-icon>
              </div>
            </div>
            <div class="statusBox">
              <div class="twoleft">
                <view class="time-icon"
                  ><u-icon name="clock" color="#515151" size="25"></u-icon
                ></view>
                <view
                  class="send-date"
                  style="font-size: 13px; color: #1f4978f0"
                  >{{ item.yuYueSection || item.yuYueTime }}</view
                >
              </div>
              <view class="status">
                <u-tag :text="coalStatus[item.statusWeigh] || ''" plain>
                </u-tag>
              </view>
            </div>

            <div class="twoLine">
              <div class="twoRight">
                <view>
                  <u-tag :text="item.coalName" plain> </u-tag>
                </view>
                <view style="margin-left: 10rpx">
                  <u-tag :text="item.orderType" plain> </u-tag>
                </view>
              </div>
            </div>
          </div>
        </div>
        </div>
    </div>
</template>
@@ -121,145 +152,153 @@
        
    }

} .ingOrder{
} 
  .ingOrder {
      width: 94%;
      height: 370rpx;
      margin: 0 auto;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14),
        0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      padding-top: 20rpx;
      margin-bottom: 30rpx;
      .statusBox {
        width: 94%;
        height: 380rpx;
        margin:  0 auto;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73,120,240,0.14), 0rpx 7rpx 45rpx 0rpx rgba(73,120,240,0.12);
        border-radius: 20rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        .twoleft {
          display: flex;
          justify-items: center;
          align-items: center;
          .time-icon {
            margin-right: 10rpx;
            display: flex;
            align-items: center;
          }
        }
      }
      .status {
        display: flex;
        width: 150rpx;
      }

      .firstLine {
        flex: 0 1 60%;
        width: 92%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .rightIcon {
          display: flex;
          height: 150rpx;
          flex-direction: column;
          justify-content: space-between;
        }
        .leftIcon {
          display: flex;
          height: 150rpx;
          flex-direction: column;
          justify-content: space-between;
          .leftOneDiv {
            width: 46rpx;
            height: 46rpx;
            background: #035cfb;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255, 255, 255, 0.85);
            border-radius: 5rpx;
            text-align: center;
            .leftOne {
              width: 31rpx;
              height: 31rpx;
              font-size: 30rpx;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }
          }
          .rightDiv {
            width: 46rpx;
            height: 46rpx;
            background: #f1333c;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255, 255, 255, 0.85);
            border-radius: 5rpx;
            text-align: center;
            .rightone {
              width: 29rpx;
              height: 31rpx;
              font-size: 30rpx;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }
          }
          .leftLine {
            width: 2rpx;
            height: 43rpx;
            border-right: 2px dotted #303030;
            transform: translateX(15rpx);
          }
        }
      }
      .centerTitle {
        display: flex;
        flex-direction: column;
        padding-top: 20rpx;
        margin-bottom: 15rpx;
        margin-top: 10rpx;
        .statusBox{
            width: 94%;
            margin: 0 auto;
            margin-top: 20rpx;
        justify-content: space-between;
 
        height: 150rpx;
        .centerLine {
          width: 510rpx;
          height: 1rpx;
          border-bottom: solid 1px #ccc;
        }
        .status{
            display: flex;
            width: 150rpx;
        }
       
        .firstLine{
            flex:  0 1 60%;
            width: 92%;
            margin:  0 auto;
            display: flex;
            justify-content: space-between;
            .rightIcon{
                display: flex;
                height: 150rpx;
                flex-direction: column;
                justify-content: space-between;
            }
            .leftIcon{
                display: flex;
                height: 150rpx;
                flex-direction: column;
                justify-content: space-between;
                .leftOneDiv{
                    width: 46rpx;
                    height: 46rpx;
                    background: #035CFB;
                    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
                    border-radius: 5rpx;
                    text-align: center;
                    .leftOne{
                    width: 31rpx;
                    height: 31rpx;
                    font-size: 30rpx;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                }
                }
                .rightDiv{
                    width: 46rpx;
                    height: 46rpx;
                    background: #F1333C;
                    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
                    border-radius: 5rpx;
                    text-align: center;
                    .rightone{
                        width: 29rpx;
                        height: 31rpx;
                        font-size: 30rpx;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
                .leftLine{
                    width: 2rpx;
                    height: 43rpx;
                    border-right: 2px dotted #303030;
                    transform: translateX(15rpx);
                }
               
            }
         
        }
        .centerTitle{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 150rpx;
            .centerLine{
                width: 510rpx;
                height: 1rpx;
                border-bottom: solid 1px #ccc;
            }
        }
      }

        .twoLine{
            flex:  0 1 25%;
            width: 92%;
            margin:   20rpx auto;
            display: flex;
            justify-content: space-between;
            .twoleft{
                width: 325rpx;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .send-date{
                    font-size: 25rpx;
                    font-family: Microsoft YaHei;
                    font-weight: 300;
                    color: #515151;
                }
                span{
                    color: #515151;
                    font-size: 30rpx;
                    font-weight: 300;
                }
            }
            .twoRight{
                display: flex;
                justify-content: space-around;
            }
      .twoLine {
        flex: 0 1 25%;
        width: 92%;
        margin: 20rpx auto;
        display: flex;
        justify-content: space-between;
        .twoleft {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .send-date {
            font-size: 25rpx;
            font-family: Microsoft YaHei;
            font-weight: 300;
            color: #515151;
          }
          span {
            color: #515151;
            font-size: 30rpx;
            font-weight: 300;
          }
        }
        .threeLine{
            flex:  0 1 25%;
            display: flex;
            justify-content: flex-end;
            height: 100rpx;
            margin-bottom: 20rpx;
            transform: translateY(-20rpx);
            .more{
                width: 106rpx;
                height: 20rpx;
                font-size: 24rpx;
                font-family: Microsoft YaHei;
                font-weight: 300;
                color: #494949;
                margin-right: 20rpx;
            }
        .twoRight {
          display: flex;
          justify-content: space-around;
        }

      }
      .threeLine {
        flex: 0 1 25%;
        display: flex;
        justify-content: flex-end;
        height: 100rpx;
        .more {
          width: 106rpx;
          height: 20rpx;
          font-size: 24rpx;
          font-family: Microsoft YaHei;
          font-weight: 300;
          color: #494949;
          margin-right: 20rpx;
        }
      }
    }