BRS1.0/pages/baggagecheck/index.vue

<template>
  <view class="app-content">
    <view class="header"><view class="log" @tap="fall"></view>{{ navname }}<view class="up">完成</view></view>
    <view class="content">
      <view class="list">
        <p>行李编号</p>
        <input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入行李编号" />
      </view>
      <view class="list">
        <p>当前位置</p>
        <input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入当前位置" />
      </view>
      <view class="list">
        <p>当前状态</p>
        <input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入当前状态" />
      </view>
      <view class="list">
        <p>航班信息</p>
        <input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入航班信息" />
      </view>
      <view class="list">
        <p>异常原因</p>
        <input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入异常原因" />
      </view>
      <view class="picturearea">
        <view class="name">图片上传</view>
        <!-- <view class="content_list">
          <view class="mg">
            <view class="mg_lg"></view>
          </view>
          <view class="mg">
            <view class="mg_lg"></view>
          </view>
          <view class="mg">
            <view class="mg_lg"></view>
          </view>
        </view> -->
        <!-- <sunui-upimg :url="upPicUrl" :before-upload="onBeforeUpload" ref="upload3" title="+" @upload="handleLoaded3" @change="handleChange3" :number="3">
          <template v-slot:icon>
              <text class="s-add-list-btn-icon">+</text>
          </template>
      </sunui-upimg> -->
      <mk-upload 
        :imgList="imgList"
        @onDelete="onDelete"
        @onChoose="onChoose"
      />
      </view>
    </view>
  </view>
</template>
<script>
	import Nav from '../../components/header/nav.vue'
  import mkUpload from "@/components/mk-upload/mk-upload.vue"
	export default {
		data() {
			return {
				isShow: true,
				dataheight: '20.75rem',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				input: '',
				main: null,
				poll: null,
				filter:null,
				pusher:null,
				intentServer:null,
				arr: [],
				navname: '异常行李登记',
        imgList: [
        ]
			}
		},
		created(option) {
		},
		onLoad(){
		},
		onUnload() {
		},
		onShow() {
		},
		mounted() {
		},
		components: {
			Nav,
      mkUpload
		},
		methods: {
			fall () {
				uni.redirectTo({
					url: "/pages/sorting/index"
				})
			},
      onDelete(index){
        console.log(index)
        //删除成功回调后执行 只做演示
        uni.showLoading({
            title: '删除中'
        });
        setTimeout(()=>{
            this.imgList.splice(index, 1);
            wx.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1000
            });
        }, 1000);
      },
      onChoose(e){
          console.log(e)
          //上传成功后回调执行push  只做演示
          uni.showLoading({
              title: '上传中'
          });
          setTimeout(()=>{
              const tempFilePaths = e.tempFilePaths;
              this.imgList.push(tempFilePaths[0]);
              uni.hideLoading();
          }, 1000);
      },
      onPreviewTake(index){
          console.log(index)
          wx.showActionSheet({
            itemList: ['预览图片', '删除图片'],
            success (res) {
              console.log(res.tapIndex)
            },
            fail (res) {
              console.log(res.errMsg)
            }
          })
      },
		},
	}
</script>

<style lang="scss" scoped>
.app-content{
  >.header{
    width: 100%;
    height: 4.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: rgba(49,85,99,1);
    color: rgb(16, 17, 22);
    font-family: Noto Sans SC;
    font-size: 1rem;
    position: relative;
    >.log{
      width: .375rem;
      height: .75rem;
      font-size: .75rem;
      position: absolute;
      left: 1.5rem;
      background: url('../../static/ico@1x.png') no-repeat;
      background-size: 100% 100%;
    }
    >.up{
      position: absolute;
      right: 1.5rem;
      color: rgb(37, 121, 160);
      font-family: Noto Sans SC;
      font-size: .875rem;
      font-weight: 500;
    }
  }
  >.content{
    margin-left: 1.5rem;
    >.list{
      height: 3.375rem;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(238, 238, 238);
      >p{
        color: rgb(0, 0, 0);
        font-family: Noto Sans SC;
        font-size: .8125rem;
        font-weight: 500;
        margin-right: 2.1875rem;
      }
    }
    >.picturearea{
      margin-top: 1.875rem;
      >.name{
        color: rgb(0, 0, 0);
        font-family: Noto Sans SC;
        font-size: .8125rem;
        font-weight: 500;
        margin-bottom: 1.25rem;
      }
      >.content_list{
        width: 100%;
        display: flex;
        margin-top: 1.25rem;
        >.mg{
          width: 5.5rem;
          height: 5.5rem;
          background: rgb(197, 207, 211);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: .625rem;
          >.mg_lg{
            width: 1.75rem;
            height: 1.75rem;
            background: url('../../static/shi.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>