BRS1.0/pages/baggageEntry/index.vue

<template>
  <view class="app-content">
    <view class="header"><view class="log" @tap="fall"></view>{{ navname }}</view>
	<view class="searchInput">
		<uni-easyinput class="uni-mt-5" :inputBorder='false' suffixIcon="scan" v-model="value" placeholder="请输入行李号" @iconClick="iconClick"></uni-easyinput>
	</view>
	<button type="default" v-if="value==''" class="defaultBtn">保存并提交</button>
	<button type="default" v-else class="sendBtn" @tap="send">保存并提交</button>
	<!-- 提示信息和下拉弹窗 -->
	<mask-model :headername="headername" :typeShow="typeShow" :tabname="tabname" ref="showMask" btnType="1" @confirm="confirm" @cancel="cancel" titleColoe="#666666" cancelColor="#666666" confirmColor="#007AFF" :maskTitle="maskTitle"></mask-model>
  </view>
</template>
<script>
	import Nav from '../../components/header/nav.vue'
	import maskModel from '../../components/mask-model/mask-model.vue'
	export default {
		data() {
			return {
				navname: '行李号录入',
				value:"",
				maskTitle:'请核对录入的行李号是否正确',
				tabname: '',//按钮名称
				typeShow:true,
				headername: '请核对信息',
			}
		},
		created(option) {
		},
		onLoad(){
		},
		onUnload() {
		},
		onShow() {
		},
		mounted() {
		},
		components: {
			Nav
		},
		methods: {
		  fall () {
			uni.navigateBack({
				delta: 1
			})
		  },
		  iconClick(){
			alert("点击")
		  },
		  send(){
			  this.typeShow = false
			  this.maskTitle = '请核对录入的行李号是否正确'
			  this.headername = '请核对信息'
			  this.$refs.showMask.show();
		  },
		  confirm:function(e){//确定按钮
		  	console.log('您点击了确定按钮');
		  },
		  cancel:function(){//取消按钮
		  	console.log('您点击了取消按钮');
		  },
		},
	}
</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%;
    }
  }
  >.searchInput{
	  width: calc(100% - 2rem);
	  margin-left: 1rem;
	  border-bottom:1px solid rgb(224, 230, 238);
	  color: rgb(48, 51, 57);
  }
  >.defaultBtn{
	  width: calc(100% - 2rem);
	  margin-left: 1rem;
	  height: 44px;
	  top: 204px;
	  background: rgb(180, 191, 196);
	  color: rgb(255, 255, 255);
	  border-radius:4px;
	  border: none;
	  top: 4rem;
  }
  >.sendBtn{
  	  width: calc(100% - 2rem);
  	  margin-left: 1rem;
  	  height: 44px;
  	  top: 204px;
  	  background: linear-gradient(179.10deg, rgba(51,161,165,1.00) 11.326%,rgba(59,111,142,1.00) 119.032%,rgba(59,111,142,1.00) 119.032%,rgba(59,111,142,1.00) 119.032%);
  	  color: rgb(255, 255, 255);
  	  border-radius:4px;
  	  border: none;
  	  top: 4rem;
  }
}
</style>