shenze-sysMan/src/views/uniPay/index.vue

<template>
  <!-- 自充值 -->
  <div class="pageUniPay flex-col">
    <s-header :name="$t('uniPay.selfRecharging')" :noback="false"></s-header>
    <div class="box1 flex-col">
      <van-field v-model="deviceValue" is-link readonly :label="$t('uniPay.selfRecharging')"
        :placeholder="$t('uniPay.pleaseSelectAMachine')" @click="deviceShow = true" />
      <van-popup v-model:show="deviceShow" round closeable position="bottom">
        <van-cascader v-model="deviceId" :title="$t('uniPay.pleaseSelectAMachine')" :options="deviceOptions"
          @close="show = false" @finish="onDeviceFinish" />
      </van-popup>
      <van-field v-model="productValue" is-link readonly :label="$t('uniPay.pattern')"
        :placeholder="$t('uniPay.pleaseSelectAPattern')" @click="productShow = true" />
      <van-popup v-model:show="productShow" round closeable position="bottom">
        <van-cascader v-model="productId" :title="$t('uniPay.pleaseSelectAPattern')" :options="productOptions"
          @close="show = false" @finish="onProductFinish">
          <template #option="{ option }">
            <div class="cascader-item">
              <van-image :src="option.imgUrl" width="50px" height="50px"></van-image>
              <div class="cascader-label">{{ option.value }}</div>
            </div>
          </template>
        </van-cascader>
      </van-popup>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label"><span>{{ $t('uniPay.paymentMethod') }}:</span></div>
        <div class="van-cell__value van-field__value radioBox">
          <van-radio-group v-model="payType" direction="horizontal">
            <van-radio name="WEIXIN_NATIVE" icon-size="18px">{{ $t('uniPay.weChat') }}</van-radio>
            <van-radio name="ALIPAY_NATIVE" icon-size="18px">{{ $t('uniPay.alipay') }}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <van-button round type="primary" class="volumeChangeButton" @click="submitForm">{{ $t('uniPay.placeOrder')
      }}</van-button>
      <van-popup v-model:show="uniPayShow" position="center" :style="{ width: '90%', 'text-align': 'center' }">
        <p>{{ $t('uniPay.orderNumber') }}: {{ uniPayObj.sn }}</p>
        <img :src="uniPayObj.rd_Pic" style="max-width: 100%; height: auto;" />
      </van-popup>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { getListEquipment, selectProducts } from '@/service/device';
import { uniPayAjax } from '@/service/uniPay';
import { showFailToast } from 'vant';
import { getLoginUser } from '@/common/js/utils';
import { useI18n } from 'vue-i18n';
import { styleUrl } from '../../common/js/utils';

export default {
  setup() {
    // 引入语言
    const { t } = useI18n();
    const user = getLoginUser();
    const deviceId = ref('');
    const deviceValue = ref('');
    const deviceShow = ref(false);
    const deviceOptions = ref([]);
    const onDeviceFinish = ({ selectedOptions }) => {
      deviceShow.value = false;
      deviceValue.value = selectedOptions[0].text;
      getProduct();
    }
    const productId = ref('');
    const productValue = ref('');
    const productShow = ref(false);
    const productOptions = ref([]);
    const onProductFinish = ({ selectedOptions }) => {
      productShow.value = false;
      productValue.value = selectedOptions[0].text;
    }
    const payType = ref('WEIXIN_NATIVE');
    const uniPayObj = ref({});
    const uniPayShow = ref(false);
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('uniPay');
      getDeviceOptionFun();
    });
    // 获取机器下拉
    const getDeviceOptionFun = async () => {
      const { data } = await getListEquipment({ adminId: user.id });
      if (data.code === '00000') {
        deviceOptions.value = data.data.map(item => {
          return {
            text: item.name,
            value: item.id,
            clientId: item.clientId,
          };
        });
      } else { showFailToast(data.message); }
    }
    const showSugarPhoto = (no) => {
      return require(`../../assets/order/spunSugar/goods/${no}.png`);
    };
    // 获取花形下拉列表
    const getProduct = async () => {
      const { data } = await selectProducts({ equipmentId: deviceId.value });
      if (data.code) {
        productOptions.value = data.data.map(item => {
          // console.log(item.no);
          return {
            text: item.productName,
            value: item.productName,
            imgUrl: showSugarPhoto(item.no),
          };
        })
      } else { showFailToast(data.message); }
    }
    // 提交表单
    const submitForm = async () => {
      if (deviceId.value === '') { showFailToast(t('uniPay.pleaseSelectAMachine')); return; }
      if (productValue.value === '') { showFailToast(t('uniPay.pleaseSelectAPattern')); return; }
      const device = deviceOptions.value.filter(v => v.value === deviceId.value);
      const { data } = await uniPayAjax({ clientId: device[0].clientId, frpCode: payType.value, productName: productValue.value });
      if (data.code === 0) {
        uniPayObj.value = JSON.parse(data.data);
        uniPayShow.value = true;
      } else {
        showFailToast(data.errmsg);
      }
    };
    return {
      deviceId,
      deviceValue,
      deviceShow,
      deviceOptions,
      onDeviceFinish,
      productId,
      productValue,
      productShow,
      productOptions,
      onProductFinish,
      payType,
      submitForm,
      uniPayObj,
      uniPayShow,
      showSugarPhoto,
    };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>