WECHAT-UNIAPP/pages/index/index.vue

<template>
  <view class="content">
    <swiper :indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff"
      :autoplay="true" :interval="4000" :duration="1000" circular>
      <swiper-item v-for="item in stationPicList" :key="item.id">
        <image :src="item" mode="scaleToFill"></image>
      </swiper-item>
    </swiper>
    <view class="box">
      <view class="title">
        <view class="left">
          选择油枪 |
          <text v-if="!selectedGas.oilGunNo">请选择油枪</text>
          <text class="selected" v-else>已选择{{selectedGas.oilGunNo}}号油枪</text>
        </view>
        <!-- <text class="right" @click="openMoreGun">更多 ></text> -->
      </view>
      <view class="notice-bar-container">
        <uni-notice-bar class="notice-bar" scrollable="true" single="true" showIcon="true" :speed="50" :text="notice">
        </uni-notice-bar>
      </view>
      <view class="gun">
        <view v-for="item in cutGasList" @click="selectGas(item)"
          :class="[item.oilGunId === selectedGas.oilGunId ? 'selected' : '', cutGasList.length === 2 || cutGasList.length ===4 ? 'lengthIs2Or4' : '',cutGasList.length ===1 ? 'lengthIs1' : '' ]"
          :key="item.oilGunId">
          <text>{{ item.oilGunNo + "号油枪"}}</text>
          <text>{{item.oilName}}</text>
        </view>
        <view @click="openMoreGun" :class="[showMoreGasSelected? 'selected':'']" v-if="gasList.length > 6">
          <text class="more">更多>></text>
        </view>
      </view>
      <view class="title" @click="changeInputFocus">
        <view class="left">
          输入金额 |
          <text>建议询问加油员后输入</text>
        </view>
      </view>
      <view class="amount">
        <view class="inp">
          <input placeholder="点击输入金额" confirm-type="done" type="digit" step="0.01" min="0" @blur="inputAccount"
            v-model="account" :focus="inputFocusFlag" />
          <text>(元)</text>
        </view>
        <view class="btn">
          <view :class="[item === account ? 'selected' : '']" v-for="item in accountList" :key="item"
            @click="selectAccount(item)">
            {{item}}
          </view>
        </view>
      </view>
      <view class="tip" @click="changeInputFocus">
        <image src="../../static/icon/a01-zhuyi.2x.png" mode="scaleToFill"></image>
        <text>请勿在油机旁使用手机</text>
      </view>
      <view class="submit">
        <button type="default" :class="[avalibleSettle ? 'avalible' : '']" @click="creatOrder" :loading="loading"
          :disabled="!avalibleSettle || loading">
          结算
        </button>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" :maskClick="true">
      <view class="more-gun">
        <view class="title">
          <text>选择油枪号</text>
          <view class="icon" @click="closeMoreGun"></view>
        </view>
        <view class="gun-list">
          <scroll-view scroll-y="true">
            <view v-for="item in gasList" @click="selectGasPopup(item)"
              :class="[item.oilGunId === selectedGas.oilGunId ? 'selected' : '']" :key="item.oilGunId">
              <text>{{ item.oilGunNo + "号油枪"}}</text>
              <text>{{item.oilName}}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "vuex";
  import getPermission from "../../util/permission.js"
  import Parse from "../../util/parse.js"

  export default {
    data() {
      return {
        stationPicList: [],
        notice: '',
        gasList: [],
        selectedGas: undefined,
        accountList: [100, 200, 300, 400],
        account: "",
        loading: false,
        inputFocusFlag: false,
        employeeList: [],
      }
    },
    created() {
      this.init()
    },
    async mounted() {
    },
    computed: {
      cutGasList() {
        if (this.gasList.length > 6) {
          return this.gasList.slice(0, 5)
        }
        return this.gasList.slice(0, 6)
      },
      showMoreGasSelected() {
        if (!this.selectedGas) {
          return false
        }
        const len = this.cutGasList.filter((ele) => {
          return ele.oilGunId == this.selectedGas.oilGunId
        })
        if (len.length === 0) {
          return true
        }
        return false
      },
      avalibleSettle() {
        return !!this.account && this.account > 0 && !!this.selectedGas
      }
    },
    methods: {
      ...mapMutations(["updateOrderInfo", "updateSelectedGas", "resetApplet"]),
      async init() {
        // 准入条件
        if (!this.stationId) {
          const parse = Parse.getInstance()
          return parse.scanCode(true,{
            showCancel: false,
            content:'亲，请扫码进入~',
          }).then(()=>{
            this.init()
          }).catch((err)=>{}); 
          // this.scanCode("亲，请扫码进入~").then(()=>{
          //   this.init()
          // });
        }

        try {
          uni.showLoading({
            title: '加载中~',
            mask: true
          });

          const initDataPro = await this.$Request({
            url: "/stationOilGunListNew",
            method: "GET",
            data: {
              stationId: this.stationId,
              personnelId: this.employeeId
            }
          })
          if (initDataPro.retCode != 0) {
            throw new Error("油站初始化失败")
          }
          this.stationPicList = initDataPro.data.listPic
          this.notice = initDataPro.data.notice
          this.gasList = initDataPro.data.stationOilGunList
          this.employeeList = initDataPro.data.personnalList
          if (!this.employeeId && this.employeeList.length > 1) {
            uni.hideLoading()
            const parse = Parse.getInstance()
            parse.scanCode(true,{
              showCancel: true,
              content:'此站点只能扫码进入~',
            }).then(()=>{
              this.init()
            }).catch((err)=>{
            
            });
          }

          if (this.gasList.length == 1) {
            this.selectedGas = this.gasList[0]
            this.updateSelectedGas(this.gasList[0])
          }
          uni.hideLoading();

        } catch (e) {
          //TODO handle the exception
          uni.hideLoading();
          uni.showModal({
            title: '≧▽≦*',
            content: '矮油，初始化失败',
            confirmText: "重新进入",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                uni.redirectTo({
                  url: "/pages/index/index"
                })
              }
            }
          });
        }
      },
      // async scanCode(msg) {
      //   const showModalPro = await uni.showModal({
      //     title: '~(￣▽￣)~',
      //     showCancel: !!this.stationId,
      //     content: msg || '此站点只能扫码进入~',
      //     cancelText: '返回',
      //     confirmText: '立刻扫码',
      //   })
      //   if (showModalPro[1].cancel) {
      //     uni.navigateBack({
      //       delta: 1
      //     })
      //   } else if (showModalPro[1].confirm) {
      //     const parse = Parse.getInstance()
      //     return parse.scanCode().catch((err) => {
      //       return this.scanCode(err)
      //     });
      //   }
      // },
      change(e) {
        this.current = e.detail.current;
      },
      changeInputFocus() {
        this.inputFocusFlag = true
      },
      openMoreGun() {
        this.$refs.popup.open()
      },
      closeMoreGun() {
        this.$refs.popup.close()
      },
      selectGas(ele) {
        this.selectedGas = ele
        this.updateSelectedGas(ele)
      },
      selectGasPopup(ele) {
        this.updateSelectedGas(ele)
        this.selectedGas = ele
        this.$refs.popup.close()
      },
      selectAccount(ele) {
        this.account = ele
      },
      async creatOrder() {
        if (!getPermission()) {
          return
        }

        this.loading = true
        uni.showLoading({
          title: '订单创建中...',
          mask: true
        });

        try {
          const addNewOrderPro = await this.$Request({
            url: "/AddPayOrderInfoNew",
            method: "POST",
            data: {
              "userType": "1",
              "openId": this.openId,
              "stationId": this.stationId,
              "receivableAmt": this.account,
              "oilName": this.selectedGas.oilName,
              "oilGun": this.selectedGas.oilGunNo,
              "labelId": this.labelId,
              "personnelId": this.employeeId,
            }
          })

          if (addNewOrderPro.retCode != 0) {
            throw new Error("创建失败~")
            return
          }
          this.loading = false
          uni.hideLoading();
          this.updateOrderInfo(addNewOrderPro.data)

          uni.navigateTo({
            url: "/pages/confirm/confirm"
          })

        } catch (e) {
          this.loading = false
          uni.hideLoading();
          uni.showToast({
            icon: "error",
            title: '请重试~'
          })
          this.resetApplet();
        }
      },
      inputAccount(e) {
        this.inputFocusFlag = false;
        if (isNaN(+e.detail.value)) {
          this.account = ''
          return
        }
        this.account = (+e.detail.value).toFixed(2).toString()

        // // const reg = /^[1-9]{1,}(\.)?([0-9]{0,2})?/ // 最小数额1
        // const reg = /^[0-9]{1,}(\.)?([0-9]{0,2})?/  // 不设置最小数额
        // let res = e.detail.value.match(reg, "");
        // console.log(this)
        // console.log(res)
        // if(res === null){
        //   this.account = ""
        //   return
        // }
        // res = res[0]
        // const reg1 = /\.$/
        // res = + res.replace(reg1, '')
        // if (res == 0) {
        //   this.account = ''
        //   return
        // }
        // this.account = res.toString() 
        // setTimeout(() => {  
        //   this.account = res.toString() 
        // }, 0)
      }

    }
  }
</script>

<style lang="scss">
  page {
    width: 750rpx;

    .content {
      swiper {
        height: 389rpx;

        swiper-item {
          image {
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }
        }
      }

      .box {
        box-sizing: border-box;
        width: 750rpx;
        background: #FFFFFF;
        border-radius: 36rpx 36rpx 0px 0px;
        box-shadow: 0 -2rpx 2rpx rgba(0, 0, 0, 0.1);
        padding: 40rpx;
        display: flex;
        flex-direction: column;

        .title {
          display: flex;
          justify-content: space-between;

          .left {
            height: 42rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #111111;
            line-height: 45rpx;

            text {
              font-weight: 500;
              color: #b0b0b0;
              font-size: 28rpx;
              margin-left: 8rpx;
            }

            .selected {
              color: #ff0000;
              font-weight: 500;
            }
          }

          .right {
            height: 40rpx;
            font-size: 28rpx;
            color: #AAAAAA;
            line-height: 40rpx;
            margin-top: 4rpx;
          }
        }

        .notice-bar-container {
          margin-top: 20rpx;

          .notice-bar,
          .uni-noticebar {
            margin: 0;
            border-radius: 20rpx;
            overflow: hidden;
          }
        }

        .gun {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-content: space-around;
          margin-top: 30rpx;

          view {
            width: 200rpx;
            height: 110rpx;
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0px 2rpx 9rpx 4rpx rgba(16, 178, 125, 0.1);
            border-radius: 12rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            margin-bottom: 20rpx;

            text {
              font-size: 28rpx;
              font-weight: 500;
              color: #666666;
              line-height: 40rpx;
            }

            text:nth-child(1) {
              margin-top: 10rpx;
              color: #7c7c7c;
              font-size: 20rpx;
              line-height: 40rpx;
            }

            text:nth-child(2) {
              font-size: 25rpx;
              line-height: 60rpx;
              font-weight: 500;

            }

            text.more {
              font-size: 28rpx;
              font-weight: 500;
              color: #000;
              line-height: 100rpx;
              margin-top: 0;
            }
          }

          view.lengthIs2Or4 {
            width: 280rpx;
          }

          view.lengthIs1 {
            width: 480rpx;
          }

          view.selected {
            background-color: #0ea374;

            text {
              color: #FFFFFF;
            }
          }
        }

        .title:nth-of-type(4) {
          margin-top: 10rpx;
        }

        .amount {
          margin-top: 30rpx;

          .inp {
            width: 670rpx;
            height: 100rpx;
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0px 2rpx 9rpx 4rpx rgba(16, 178, 125, 0.1);
            border-radius: 13rpx;
            position: relative;

            input {
              position: absolute;
              top: 30rpx;
              left: 30rpx;
              color: #ff0000;
              font-weight: 600;
            }

            text {
              position: absolute;
              top: 40rpx;
              right: 30rpx;
              width: 56rpx;
              height: 33rpx;
              font-size: 24rpx;
              color: #AAAAAA;
              line-height: 33rpx;
            }
          }

          .btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            view {
              width: 153rpx;
              height: 80rpx;
              background: rgba(255, 255, 255, 0.08);
              box-shadow: 0px 2rpx 9rpx 4rpx rgba(16, 178, 125, 0.1);
              border-radius: 13rpx;
              text-align: center;
              line-height: 80rpx;
              font-size: 32rpx;
              color: #AAAAAA;
            }

            .selected {
              background-color: #0ea374;
              color: #fff;
            }
          }
        }

        .tip {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60rpx;
          margin-top: 20rpx;

          image {
            display: inline-block;
            width: 25rpx;
            height: 25rpx;
            border-radius: 12.5rpx;
          }

          text {
            font-size: 27rpx;
            color: #DB9D28;
            line-height: 60rpx;
            padding: 0;
            margin: 0;
          }
        }

        .submit {
          height: 80rpx;
          margin-top: 20rpx;

          button {
            width: 670rpx;
            height: 80rpx;
            background: #CCCCCC;
            border-radius: 45rpx;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 80rpx;
            text-align: center;
          }

          button.avalible {
            background: #0EA374;
          }
        }

      }
    }

    .more-gun {
      width: 750rpx;
      max-height: 985rpx;
      background: #F8F8F8;
      border-radius: 42rpx 42rpx 0px 0px;

      .title {
        height: 80rpx;
        text-align: center;
        position: relative;

        text {
          width: 160rpx;
          font-size: 32rpx;
          font-weight: 600;
          color: #111111;
          line-height: 70rpx;
        }

        .icon {
          width: 45rpx;
          height: 45rpx;
          background-color: red;
          background: url(../../static/icon/6_d05_close.2x.png) no-repeat 0px 0px;
          background-size: 100% 100%;
          position: absolute;
          top: 10rpx;
          right: 40rpx;
        }
      }

      .gun-list {
        margin-top: 20rpx;

        scroll-view {
          padding: 0 30rpx;
          max-height: 850rpx;

          view {
            width: 200rpx;
            height: 110rpx;
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0px 2rpx 9rpx 4rpx rgba(16, 178, 125, 0.1);
            border-radius: 12rpx;
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            margin: 5rpx 15rpx 40rpx 15rpx;

            text {
              font-size: 28rpx;
              font-weight: 500;
              color: #666666;
              line-height: 40rpx;
            }

            text:nth-child(1) {
              margin-top: 10rpx;
              color: #7c7c7c;
              font-size: 20rpx;
              line-height: 40rpx;
            }

            text:nth-child(2) {
              font-size: 25rpx;
              line-height: 60rpx;
              font-weight: 500;

            }

            text.more {
              font-size: 28rpx;
              font-weight: 500;
              color: #000;
              line-height: 100rpx;
              margin-top: 0;
            }
          }

          .selected {
            background-color: #0ea374;

            text {
              color: #fff;
            }

            color: #fff;
          }

        }
      }

    }

  }
</style>