uni-Identify-quality/pages/consignment-painting/index.vue

<template>
  <div class="order-details">
    <title-block title="寄存画作">
      <template #left>
        <div> <image style="width: 112rpx;height: 52rpx" src="../../static/zu506@3x.png"></image></div>
      </template>
    </title-block>
    <div class="content2">
      <image src="../../static/zu709@3x.png"></image>
    </div>
    <tm-poup height="700" v-model="show_2" position="bottom">
      <div class="poup1">
        <div class="content1">
          <div class="wrap1">更换您的寄存地址</div>
          <div @click="show_2=false" class="wrap2">
            <image src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
          </div>
        </div>
        <div class="content2"></div>
        <div class="content3">
          <div class="wrap1">
            <div class="wrap1_1">某某某某某某某地方</div>
            <div class="wrap1_2">*剩余12位置</div>
          </div>
          <div class="wrap1 active">
            <div class="wrap1_1">某某某某某某某地方</div>
            <div class="wrap1_2">剩余12位置</div>
          </div>
          <div class="wrap1 disabled">
            <div class="wrap1_1">某某某某某某某地方</div>
            <div class="wrap1_2">*已满员</div>
          </div>
        </div>
        <div class="content2"></div>
        <div class="content6">
          <div class="wrap1">确定</div>
        </div>
      </div>
    </tm-poup>
    <tm-poup height="1200" v-model="show_1" position="bottom">
      <div class="poup">
        <div class="content1">
          <div class="wrap1">请选择您的寄存时限</div>
          <div @click="show_1=false" class="wrap2">
            <image src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
          </div>
        </div>
        <div class="content2"></div>
        <div class="content3">
          <div class="wrap1">1个月</div>
          <div class="wrap1">3个月</div>
          <div class="wrap1 active">6个月</div>
          <div class="wrap4">
            <div class="wrap4_1">12个月</div>
            <div class="wrap4_2">*暂时不可选</div>
          </div>
        </div>
        <div class="content2"></div>
        <div class="content4">起始日期</div>
        <div class="content5">
          <div class="wrap1">年份</div>
          <div class="wrap2">月</div>
          <div class="wrap3">日</div>
        </div>
        <div style="margin-left: -30rpx;margin-right: -30rpx">
          <picker-view   indicator-class="test" :value="value"  @change="changeData" class="picker-view">
            <picker-view-column>
              <view style="display: flex;align-items: center;justify-content: center" class="item" :class="[isDateFont(item,0)?'fontDate':'']" v-for="(item,index) in years" :key="index">{{item}}年</view>
            </picker-view-column>
            <picker-view-column>
              <view style="display: flex;align-items: center;justify-content: center" class="item" :class="[isDateFont(item,1)?'fontDate':'']" v-for="(item,index) in months" :key="index">{{item}}月</view>
            </picker-view-column>
            <picker-view-column>
              <view style="display: flex;align-items: center;justify-content: center" class="item" :class="[isDateFont(item,2)?'fontDate':'']" v-for="(item,index) in days" :key="index">{{item}}日</view>
            </picker-view-column>
          </picker-view>
        </div>
        <div class="content2"></div>
        <div class="content6">
          <div class="wrap1">确定</div>
        </div>
      </div>
    </tm-poup>
    <div class="content3">
      <div class="prompt">*扫描自动填入</div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">画作编号</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画作编号" />
          </div>
          <div class="wrap1_1_4"></div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">画作名称</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画作名称" />
          </div>
          <div class="wrap1_1_4"></div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">画家名称</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画家名称" />
          </div>
          <div class="wrap1_1_4">
          </div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">画作平尺数</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画作平尺数" />
          </div>
        </div>
      </div>
      <div class="wrap2"></div>
    </div>
    <div class="content4">
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">订单编号</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="订单编号" />
          </div>
          <div class="wrap1_1_4"></div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">寄存地址</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="寄存地址" />
          </div>
          <div class="wrap1_1_4"></div>
          <div @click="show_2=true" class="wrap1_1_5">
            <image src="../../static/zu611@3x.png"></image>
          </div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">寄存时限</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="寄存时限" />
          </div>
          <div @click="show_1=true" class="wrap1_1_5">
            <image src="../../static/zu612@3x.png"></image>
          </div>
          <div class="wrap1_1_4">
          </div>
        </div>
      </div>
      <div class="wrap2"></div>
    </div>
    <div class="content5">
      <div class="wrap1">
        <div class="wrap1_1">*仅微信付款</div>
        <div class="wrap1_2">预计 ¥600.00</div>
      </div>
      <div class="wrap2">确认金额并签署合同</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "order-details",
  data(){
    const date = new Date()
    const years = []
    const year = date.getFullYear()
    const months = []
    const month = date.getMonth() + 1
    const days = []
    const day = date.getDate()
    for (let i = 1990; i <= date.getFullYear(); i++) {
      years.push(i)
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i)
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i)
    }
    return {
      show_2:false,
      data:[],
      show_1:false,
      title: 'picker-view',
      years,
      year,
      months,
      month,
      days,
      day,
      value: [9999, month - 1, day - 1],
      visible: true,
    }
  },
  mounted(){
    const today = new Date();
    this.value= [today.getFullYear() - 1990, today.getMonth(),today.getDate()-1]
    this.data=[today.getFullYear(),today.getMonth() + 1,today.getDate()]
  },
  methods:{
    isDateFont(item,num){
      if (Array.isArray&&this.data.length===3){
        return this.data[num]===item
      }
    },
    changeData(e){
      this.data=[e.detail.value[0]+1990,e.detail.value[1]+1,e.detail.value[2]+1]
    }
  }
}
</script>
<style scoped lang="scss">
.fontDate{
  color: #fff;
}
/deep/ .pickerSelected {
  color: #ffffff !important;
  z-index: 2;
}
/deep/ .test{
  display: flex;
  justify-content: center;
  align-items: center;
 z-index: -1;
  background: #A9D897;
  color: #fff;
    height: 62rpx;
}
uni-picker-view {
  display: block;
}
uni-picker-view .uni-picker-view-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 100%;
  background-color: white;
}
uni-picker-view[hidden] {
  display: none;
}
picker-view {
  width: 100%;
  // height: 600upx;
  height: 400rpx;
  margin-top: 20upx;
}
.item {
  line-height: 100upx;
  text-align: center;
}
.order-details{
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;

  &>.content5{
    align-items: center;

    background: #fff;
    width: 750rpx;
    position: fixed;
    bottom: 0;
    height: 172rpx;
    display: flex;
    overflow: hidden;
    .wrap2{
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 392rpx;
      height: 56rpx;
      color: #fff;
      font-size: 32rpx;
      background:#76C458;

    }
    .wrap1{
      margin-left: 58rpx;
      margin-right: 70rpx;
    display: flex;
      flex-direction: column;
      align-items: start;
      .wrap1_1{
        color: #939393;
        font-size: 16rpx;
      }
      .wrap1_2{
        font-size: 32rpx;
        color: #76C458;
      }
    }
  }
  .poup1{
    padding-top: 28rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    &>.content6{
      margin-top: 26rpx;
      display: flex;
      justify-content: center;
      .wrap1{
        color: #fff;
        font-size: 28rpx;
        width: 436rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #76C458;
        border-radius: 30rpx;
      }
    }
    &>.content3{
      margin-bottom: 70rpx;
.wrap1{
  margin-bottom: 18rpx;
  border-radius: 32rpx;
  height: 80rpx;
  box-sizing: border-box;
  border: 2px solid #76C458;
  padding-left: 44rpx;
  padding-right:42rpx ;
    display: flex;
  justify-content: space-between;
  align-items: center;
  .wrap1_2{
    color: #76C458;
    font-size: 26rpx;
  }
  .wrap1_1{
    font-size: 28rpx;
    color: #000;
  }
  &.disabled{
    border:none ;
    background:#D8D8D8 ;
    .wrap1_1{
      color: #626262;
      font-size: 28rpx;
    }
    .wrap1_2{
      color: #626262;
      font-size: 16rpx;
    }
  }
  &.active{
    background:#76C458 ;
    .wrap1_2{
      color: #fff;
      font-size: 26rpx;
    }
    .wrap1_1{
      font-size: 28rpx;
      color: #fff;
    }
  }
}
    }
    &>.content1{
      margin-bottom: 36rpx;
      display: flex;
      justify-content: space-between;
      .wrap1{
        color: #000;
        font-size: 32rpx;
      }
      .wrap2{
        image{
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
    &>.content2{
      margin-bottom: 36rpx;
      height: 1rpx;
      background:#626262 ;
    }
  }
  .poup{
    padding-top: 28rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    &>.content3{
      display: flex;
      flex-wrap: wrap;
      .wrap4{
        margin-bottom: 40rpx;
        border-radius: 32rpx;
        margin-top: 30rpx;
        width: 220rpx;
        height: 84rpx;
        background: #D8D8D8;
        display: flex;
        flex-direction: column;
      align-items: center;
        justify-content: center;
        .wrap4_1{
          color: #626262;
          font-size: 28rpx;
        }
        .wrap4_2{
          color: #BE7E7E;
          font-size: 16rpx;
        }
      }
      .wrap1{
        box-sizing: border-box;
        flex-shrink: 0;
        margin-right: 16rpx;
        font-size: 28rpx;
        border-radius: 32rpx;
        border: 2rpx solid #76C458;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220rpx;
        height: 84rpx;
        &:nth-child(3){
          margin-right: 0;
        }

        &.active{
          color: #fff;
          background:#76C458 ;
        }
      }
    }
    &>.content6{
      margin-top: 26rpx;
      display: flex;
      justify-content: center;
      .wrap1{
        color: #fff;
        font-size: 28rpx;
        width: 436rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #76C458;
        border-radius: 30rpx;
      }
    }
    &>.content5{
      margin-top: 36rpx;
      height: 66rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #BABABA;
      border-top: 1rpx solid #BABABA;
    .wrap1{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      color: #4E964D;
      font-size: 28rpx;
    }
      .wrap2{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4E964D;
        font-size: 28rpx;
      }
      .wrap3{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4E964D;
        font-size: 28rpx;
      }
    }
    &>.content4{
      font-size: 32rpx;
      color: #000;
    }
    &>.content2{
      margin-bottom: 36rpx;
      height: 1rpx;
      background:#626262 ;
    }
    &>.content1{
      margin-bottom: 36rpx;
      display: flex;
      justify-content: space-between;
      .wrap1{
        color: #000;
        font-size: 32rpx;
      }
      .wrap2{
        image{
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
 &>.content4{
    margin-top: 60rpx;
    .wrap1{
      border: 1rpx dashed #DFE9F0;
      background-color: #fff;
      .wrap1_1{
        position: relative;
        height: 114rpx;
        display: flex;
        align-items: center;
        .wrap1_1_4{
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          position: absolute;
          height: 0;
          width: 636rpx;
          border-bottom: 0.5px solid #626262;
        }
        .wrap1_1_5{
          right: 42rpx;
          position: absolute;
          image{
            width: 46.34rpx;
            height: 20rpx;
          }
        }
        .wrap1_1_2{
          margin-right: 36rpx;
          width: 0;
          height: 66rpx;
          border-left: 0.5px solid #626262;

        }
        .wrap1_1_1{
          width: 210rpx;
          padding-left: 32rpx;

          color: #626262;
          font-size: 24rpx;
        }
      }
    }
  }
  &>.content3{
    margin-top: 60rpx;
    .prompt{
      color: #4E964D;
      font-size: 16rpx;
      margin-bottom: 4rpx;
    }
    .wrap1{
      border: 1rpx dashed #DFE9F0;
      background-color: #fff;
      .wrap1_1{
        position: relative;
        height: 114rpx;
        display: flex;
        align-items: center;
        .wrap1_1_4{
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          position: absolute;
          height: 0;
          width: 636rpx;
          border-bottom: 0.5px solid #626262;
        }
        .wrap1_1_2{
          margin-right: 36rpx;
          width: 0;
          height: 66rpx;
          border-left: 0.5px solid #626262;

        }
        .wrap1_1_1{
          width: 210rpx;
          padding-left: 32rpx;

          color: #626262;
          font-size: 24rpx;
        }
      }
    }
  }
  &>.content2{
    margin-top: 42rpx;
    display: flex;
    justify-content: center;
    image{
      width: 404rpx;
      height: 306rpx;
    }
  }
}
</style>