tf-business/pages_module/scanCoupons/index.vue

<template>
  <view class="scanCoupons">
    <capsule :showBorder="true" bgColor="#FFFFFF">
      <template v-slot:top>
        <view class="shop-top">
          <view class="back-icon" @click="backClick">
            <tui-icon name="arrowleft" :size="42" color="#000000"></tui-icon>
          </view>
          <view class="shop-name">{{ shopInfo.shopName }}</view>
        </view>
      </template>
    </capsule>
    <view class="seat"></view>
    <view class="ipt">
      <view class="ipt-box">
        <template v-if="iptValue == ''">
          <view class="ipt-empty">请输入劵码</view>
        </template>
        <template v-else>
          <view class="ipt-code">{{ iptValue }}</view>
        </template>
      </view>
    </view>
    <view class="footer">
      <keyboard
        :iptValue="iptValue"
        @single="singleWord"
        @deleteOne="deleteOne"
        @deleteAll="this.iptValue = ''"
        @setVerifica="setVerifica"
      >
      </keyboard>
    </view>
  </view>
</template>

<script>
import { getCoupons } from "@/config/index";
export default {
  created() {
    //  获取本地存储的店铺数据
    this.shopInfo = uni.getStorageSync("shopInfo");
  },
  data() {
    return {
      shopInfo: {},
      iptValue: "",
    };
  },
  methods: {
    backClick() {
      uni.navigateBack({
        delta: 1,
        fail: () => {
            uni.switchTab({
              url: "/pages/tabbar/index/index",
            });
        },
      });
    },
    //  修改单个验劵码
    singleWord(val) {
      this.iptValue = `${this.iptValue}${val}`;
    },
    //  验劵
    async setVerifica() {
      if (this.iptValue == "") {
        this.$showToast("请输入劵码");
        return;
      }
      let {data} = await getCoupons({ writeCode: this.iptValue });
      //  传递值过去
      uni.navigateTo({
          url: `/pages_module/orderVerifica/index?orderId=${data.orderId}&code=${data.writeCode}`,
        });
      console.log(res);
    },
    //  删除单个字符
    deleteOne() {
      this.iptValue = this.iptValue.slice(0, this.iptValue.length - 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.scanCoupons {
  width: 100%;
  height: 100vh;
  background-color: rgb(241, 241, 241);

  .shop-top {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
    @include flex(center);

    .back-icon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .shop-name {
      color: #000000;
    }
  }

  .seat {
    width: 100%;
    height: 30rpx;
    background-color: #ffffff;
  }

  .ipt {
    margin-top: 50rpx;
    width: 100%;

    .ipt-box {
      width: 686rpx;
      height: 108rpx;
      background-color: #ffffff;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 32rpx 0 32rpx 38rpx;
      border-radius: 16rpx;

      .ipt-empty {
        color: #999999;
        font-size: 36rpx;
        position: relative;

        &::after {
          content: "";
          width: 6rpx;
          height: 80%;
          background-color: #ef530e;
          position: absolute;
          left: -14rpx;
          top: 60%;
          transform: translateY(-60%);
        }
      }

      .ipt-code {
        width: 100%;
        overflow-x: scroll;
        color: #333333;
        font-size: 36rpx;
      }
    }
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /*  底部安全区域 */
    padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
    padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
  }
}
</style>