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.url" 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' : '']" :key="item.oilGunId">
          <text>{{ item.oilGunNo + "号油枪"}}</text>
          <text>{{item.oilName}}</text>
        </view>
        <view @click="openMoreGun" :class="[showMoreGasSelected? 'selected':'']" v-if="cutGasList.length >= 5">
          <text class="more">更多>></text>
        </view>
      </view>
      <view class="title">
        <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"
           />
          <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">
        <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"
  export default {
    data() {
      return {
        stationPicList: [],
        notice: '',
        gasList: [],
        selectedGas: undefined,
        accountList: [100, 200, 300, 400],
        account: "",
        loading: false,
      }
    },
    created() {
      this.init()
    },
    computed: {
      ...mapState(["appId", "stationId", "phoneNumber", "countryCode", "purePhoneNumber", "openId", "unionId",
        "userInfo"
      ]),
      cutGasList() {
        return this.gasList.slice(0, 5)
      },
      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"]),
      init() {
        // 轮播图
        this.$Request({
          url: "/getStationPicList",
          method: "GET",
          data: {
            stationId: this.stationId
          }
        }).then((res) => {
          if (res.retCode === 0) {
            this.stationPicList = res.data
          }
        })
        // 通知消息
        this.$Request({
          url: "/getStationNoticeInfo",
          method: "GET",
          data: {
            stationId: this.stationId
          }
        }).then((res) => {
          if (res.retCode === 0) {
            this.notice = res.data.notice.toString()
          }
        })

        // 获得油枪列表
        this.$Request({
          url: "/stationOilGunList",
          data: {
            stationId: this.stationId
          }
        }).then((res) => {
          if (res.retCode === 0) {
            this.gasList = res.data
          }
        })
      },
      change(e) {
        this.current = e.detail.current;
      },
      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
      },
      creatOrder() {
        if (!getPermission()) {
          return
        }
        this.loading = true
        uni.showLoading({
          title: '订单创建中...',
          mask: true
        });
        this.$Request({
          url: "/AddPayOrderInfoNew",
          method: "POST",
          data: {
            "userType": "2",
            "openId": this.openId,
            "stationId": this.stationId,
            "orderType": this.selectedGas.oilGunType, //油品是1 非油品2
            "receivableAmt": this.account,
            "oilName": this.selectedGas.oilName,
            "payType": "wx", //wx 微信 dzk电子卡
            "oilGun": this.selectedGas.oilGunNo
          }
        }).then((res) => {
          if (res.retCode === 0) {
            console.log(res.data)
            this.updateOrderInfo(res.data)
            this.loading = false
            uni.hideLoading();
            uni.navigateTo({
              url: "/pages/confirm/confirm"
            })
          } else {
            this.loading = false
            uni.hideLoading();
            uni.showToast({
              title: '创建订单失败'
            })
          }
        }).catch((err) => {
          uni.showToast({
            title: '创建订单失败'
          })
        }).finally((res) => {
          this.loading = false
        })
      },
      inputAccount(e) {
        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.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>