JDD-WXCP/pages/order/create.vue

<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="#ffffff">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="box">
      <h3>
        选择油枪号 | <small>选择所加油枪号</small>
        <span @click="showPopup=true">更多></span>
      </h3>
      <van-row gutter="10">
        <van-col span="8" v-for="(item, index) in gasarr" :key="index" class="gas">
          <van-button :type="gas==item.oilGunNo?'primary':'default'" block @click="selectGas(item.oilGunNo,item.oilName)">
            {{item.oilGunNo+'号枪'}}
            <p style="font-size: 16px;">{{item.oilName}}</p>
          </van-button>
        </van-col>
      </van-row>
      <h3>输入金额 | <small>建议询问加油员后输入</small></h3>
      <div class="input-box">
        <input type="number" :value="account" class="my-input">
        <span class="input-left">￥</span>
        <span class="input-right">(元)</span>
      </div>
      <van-row gutter="10">
        <van-col span="6" v-for="(item, index) in money" :key="index">
          <van-button type="default" block class="btn-money" @click="account=item">{{item}}</van-button>
        </van-col>
      </van-row>
      <center class="tips">
        <van-icon name="warning-o" /> <span>请勿在油机旁使用手机</span></center>
      <van-popup v-model="showPopup" round position="bottom" safe-area-inset-bottom>
        <center>
          <h3>选择油枪号</h3>
        </center>
        <van-row gutter="10">
          <van-col span="8" v-for="(item, index) in gasallarr" :key="index" class="gas">
            <van-button :type="gas==item.oilGunNo?'primary':'default'" block @click="selectGasAll(index, item.oilGunNo,item.oilName)">
              {{item.oilGunNo+'号枪'}}
              <p style="font-size: 16px;">{{item.oilName}}</p>
            </van-button>
          </van-col>
        </van-row>
      </van-popup>
      <van-goods-action>
        <van-goods-action-button type="primary" text="去结算" v-if="gas>0 && account>0" @click="toConfirmOrder()" />
        <van-goods-action-button text="去结算" color="#cdcbce" v-else @click="toastMsg" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {
    Swipe,
    SwipeItem,
    Lazyload,
    Button,
    Col,
    Row,
    Popup,
    GoodsAction,
    GoodsActionButton,
    Icon,
    Toast
  } from 'vant';

  Vue.use(Swipe);
  Vue.use(SwipeItem);
  Vue.use(Lazyload);
  Vue.use(Button);
  Vue.use(Col);
  Vue.use(Row);
  Vue.use(Popup);
  Vue.use(GoodsAction);
  Vue.use(GoodsActionButton);
  Vue.use(Icon);
  Vue.use(Toast);

  export default Vue.extend({
    head() {
      return {
        title:'一键加油'
      }
    },
    data() {
      return {
        showPopup: false,
        images: [
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2684369054,623698254&fm=26&gp=0.jpg',
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2684369054,623698254&fm=26&gp=0.jpg',
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2684369054,623698254&fm=26&gp=0.jpg',
        ],
        gasarr: [],
        gasallarr: [],
        money: [200, 400, 600, 800],
        gas: 0,
        oName: '',
        account: ''
      };
    },
    created() {
      console.log(this.$route.query);
    },
    mounted() {
      var r = this.$axios.get('/stationOilGunList', {
        params: {
          stationId: this.$route.query.stationId
        },
      });
      r.then(res => {
        if (res.data.retCode == 0) {
          this.gasallarr = this.gasallarr.concat(res.data.data); //追加数据
          var gasarr = [];
          var gasallarr = [];
          var index = gasallarr.length;
          if (index > 5) {
            for (let i = index - 5; i <= index; i++) {
              gasarr.push(this.gasallarr[i]);
            }
          } else {
            for (let i = 0; i < 6; i++) {
              gasarr.push(this.gasallarr[i]);
            }
          }
          this.gasarr = gasarr;
        }
      })
    },
    methods: {
      selectGas: function(num, name) {
        this.gas = num;
        this.oName = name;
        this.showPopup = false;
      },
      selectGasAll: function(index, num) {
        var gasarr = [];
        if (index > 5) {
          for (let i = index - 5; i <= index; i++) {
            gasarr.push(this.gasallarr[i]);
          }
        } else {
          for (let i = 0; i < 6; i++) {
            gasarr.push(this.gasallarr[i]);
          }
        }
        this.gasarr = gasarr;
        this.gas = num;
        this.showPopup = false;
      },
      toConfirmOrder: function() {
        var $this = this;
        let data = {
          stationId: this.$route.query.stationId,
          oilGun: this.gas,
          oilName: this.oName,
          amt: '0.1',
          token: this.$route.query.openId,
          userType: '1'
        }
        var getOrderInfoUrl = '/AddPayOrderInfo';
        this.$axios.post(getOrderInfoUrl, data).then(res => {
          if (res.data.retCode == 0) {
            let stationId=data.stationId;
            let stationName=this.$route.query.stationName;
            let oilName=data.oilName;
            let gas = data.oilGun;
            let account = data.amt;
            let orderNo = res.data.data;
            let openId =data.token;
            this.$router.push({
              path: '/order/confirm',
              query: {
                stationId: stationId,
                stationName: stationName,
                gasNum: gas,
                oilName: oilName,
                account: account,
                orderNo: orderNo,
                openId:openId
              }
            });
          } else {
            Toast.fail('创建订单失败！请联系管理员');
          }
        })
      },
      toastMsg: function() {
        if (this.gas <= 0) {
          Toast.fail('请选择油枪');
        } else if (this.account <= 0) {
          Toast.fail('请输入金额');
        }
      }
    }
  })
</script>

<style lang="less">
  .my-swipe {
    z-index: 1;

    .van-swipe__indicators {
      bottom: 32px;
    }

    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;

      img {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 185px;
        background-color: #fff;
        pointer-events: none;
        overflow: hidden;
        object-fit: cover;
      }
    }
  }

  .box {
    box-sizing: border-box;
    width: 100%;
    min-height: 60vh;
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: 190px;
    left: 0;
    z-index: 999;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
    padding: 0 15px 80px 15px;

    .van-button--primary {
      background-color: rgb(15, 179, 123);
      border-color: rgb(15, 179, 123);
    }

    h3 {
      font-size: 16px;

      small {
        font-size: 12px;
        color: #ccc;
        font-weight: normal;
      }

      span {
        font-size: 14px;
        color: #ccc;
        font-weight: normal;
        float: right;
      }
    }

    .input-box {
      position: relative;
      margin-bottom: 10px;

      .my-input {
        width: 100%;
        height: 44px;
        line-height: 44px;
        border: 0;
        border-radius: 5px;
        box-shadow: 0 1px 2px 2px rgba(15, 179, 123, 0.1);
        text-indent: 25px;
        font-size: 18px;
        font-weight: bold;
      }

      .input-left,
      .input-right {
        position: absolute;
        top: 0;
        z-index: 999;
        line-height: 44px;
        font-size: 12px;
      }

      .input-left {
        left: 10px;
        font-weight: bold;
        line-height: 46px;
      }

      .input-right {
        right: 10px;
        color: #999;
      }
    }

    .gas {
      margin-bottom: 10px;

      .van-button {
        line-height: 1.5em;
        border-radius: 3px;
        height: 54px;

        p {
          font-size: 9px;
          margin-block: 0;
        }
      }

      .van-button--default {
        background-color: #eee;
        color: rgb(102, 101, 104);
      }
    }

    .btn-money {
      border: 0;
      box-shadow: 0 1px 2px 2px rgba(15, 179, 123, 0.1);
      color: rgb(168, 170, 170);
      height: 40px;
    }

    .tips {
      padding: 10px;
      color: rgb(240, 180, 80);

      .van-icon {
        vertical-align: middle;
      }

      span {
        font-size: 14px;
      }
    }

    .van-popup {
      box-sizing: border-box;
      padding: 20px;
      top: 20vh;
    }

    .van-goods-action {
      height: 80px;
      padding: 0 15px;
    }
  }
</style>