DWY_mobile/src/views/page/Package/index.vue

<template>
  <div>
    <div class="bdy">

      <div style="font-size: 1.3rem; font-weight: bold ; color: #fff;margin-bottom:1rem">销售单号</div>
      <div class="secd_input_r">
        <b-form-select id="input-3" :options="options" v-model="selected" class="inp select_list" style="height: 3rem"
                       required placeholder="请选择站点"></b-form-select>
      </div>
      <div class="bdy_btn">
        <Button
            type="warning"
            ghost
            class="header_btn"
            style="margin-right: 3rem; height: 2.6rem"
            @click="handleReturn"
        >
          返回</Button
        >
        <Button

            class="header_btn"
            ghost
            style="margin-left: 3rem; height: 2.6rem"
            @click="handelGoSure"
        >
          确认</Button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      is_show: true,
      is_use: false,
      selected: '',
      options: []
    }
  },
  created () {
    const data = {
      url: 'http://121.36.142.167:7774/jbl/api/module-data/exe_sale_order_b/page',
      post:{"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"dynamicFormCode":"exe_sale_order_b","developmentSystemId":null,"debugFlag":false}
    }
    this.axios.post('/api/testdwy', { ...data }).then(res => {
      this.options = res.data.content
      this.options.forEach(v => {
        v.value = v.exe_sale_order_b.no
        v.text = v.exe_sale_order_b.no
      })
    })
  },
  methods: {
    handelGoSure () {
      if (!this.selected) {
        return this.$Message.warning('请先选择销售单号！')
      }
      this.$router.push({ path: '/cms/Package/detail', query: { id: this.selected } })
    },
    handleReturn () {
      this.$router.push('/cms/home')
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  width: 94%;
  height: 7rem;
  // overflow: hidden;
  // transition: all 0.4s;
  position: relative;
  top: 0.5rem;
  left: 3%;
  box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
  border-radius: 1rem;
  padding: 0.4rem 0.7rem 0 1rem;
  background: #fff;
}
.header_btn {
  border-radius: .5rem;
  padding: 0.1rem;
  width: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ot {
  position: relative;
  top: -1.3rem;
}
.header_middle1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .ft {
    font-size: 1.5rem;
    width: 5rem;
    text-align: center;
  }
}
.header_middle {
  position: relative;
  top: -0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/ .btn-group > .btn,
.btn-group-vertical > .btn {
  background: #ffffff;
  color: #2c3e50;
  outline: none;
  border: none;
  margin: 0;
  z-index: 3;
}
.header_footer {
  position: relative;
  top: -1.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    font-size: 0.5rem;
    color: rgb(244, 136, 42);
  }
}
.bdy {
  height: 14.09rem;
  background-image: url('../../../assets/home/packUpback.png');
  background-size: 100% 100%;
  padding: 1.78rem 2.03rem;
  box-sizing: border-box;
  position: absolute;
  width: 94%;
  transform: translate(-50%,-50%);
  top: 40%;
  border-radius: 1rem;
  left: 50%;
}
.bdy_btn {
  margin-top: 2rem;

  display: flex;
  justify-content: center;
  align-items: center;
}
.select_list {
  border-radius: 0.38rem;
  border: 0.03rem solid #76CFFF;
  background-color: #00000000;
  outline: none;
  padding: 0 .625rem;
  box-sizing: border-box;
  color: #fff;
  width: 100%;
  height: 100%;
  font-weight: 500;
  letter-spacing: 0.1rem;
}
/deep/.inp {
  background: #032a64 !important;
  // opacity: 0.4;
  //border: none;
  color: #fff;
}

::-webkit-input-placeholder {
  color: #ffffff84;
  /* 设置占位符文字的颜色 */
}
</style>