shenze-sysMan/src/views/merchantManage/set.vue

<template>
  <!-- 商户信息添加|修改 -->
  <div class="merchantSetPage flex-col">
    <s-header :name="$t('merchantManage.merchantInformation')" :noback="false"></s-header>
    <div class="merchantSetBox">
      <div class="Body flex-col">
        <div class="Body flex-col">
          <div class="wrap1 flex-col">
            <div class="section1 flex-row justify-between">
              <span class="word3" :class="{ acttive: tabType === '0' }" @click="tabType = '0'">{{
                $t('merchantManage.essentialInformation') }}</span>
              <span class="info1" :class="{ acttive: tabType === '1' }" @click="tabType = '1'">{{
                $t('merchantManage.withdrawalData') }}</span>
            </div>
            <!-- <div class="section2 flex-col"></div> -->
            <img class="img1" referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a" />
          </div>
          <div v-if="tabType === '0'">
            <!-- <div class="wrap2 l-flex-RC">
              <span class="info2">*</span>
              <span class="info3">{{ $t('merchantManage.region') }}：
              </span>
            </div> -->

            <!-- <span class="info5">{{ $t('merchantManage.subscriptionAdministrator') }}：</span> -->
            <van-form @submit="onSubmit">
              <div class="van-cell van-field">
                <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.accountNumber') }}</span>
                </div>
                <div class="van-field__value o-pt-8" style="text-align: left;">
                  <span> {{ adminObj.username }}</span>
                </div>
              </div>
              <van-field v-model="adminObj.name" name="password" :label="$t('merchantManage.fullNameLabel')"
                :placeholder="$t('merchantManage.fullNamePlaceholder')"
                :rules="[{ required: true, message: $t('merchantManage.fullNamePlaceholder') }]" />
              <van-field v-model="adminObj.password" name="password" type="password"
                :label="$t('merchantManage.passwordLabel')" :placeholder="$t('merchantManage.passwordPlaceholder')" />
              <span class="txt3">{{ $t('merchantManage.leavBlanToIndiNoModi') }}</span>
              <van-field v-model="adminObj.checkPassword" name="password" type="password"
                :label="$t('merchantManage.confirmPasswordLabel')"
                :placeholder="$t('merchantManage.confirmPasswordPlaceholder')" />
              <van-field v-model="adminObj.email" name="password" :label="$t('merchantManage.mailbox')"
                :placeholder="$t('merchantManage.mailboxPlaceholder')" />
              <van-field v-model="adminObj.phone" name="password" :label="$t('merchantManage.telephone')"
                :placeholder="$t('merchantManage.telephonePlaceholder')" />
              <van-field v-model="adminObj.tradeMerchantNo" name="password"
                :label="$t('merchantManage.merchantFilingNumberLabel')"
                :placeholder="$t('merchantManage.merchantFilingNumberPlaceholder')" />
              <div class="van-cell van-field">
                <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.domesticOrNot') }}:</span></div>
                <div class="van-cell__value van-field__value radioBox">
                  <van-radio-group v-model="adminObj.ifForeign" direction="horizontal">
                    <van-radio name="0" icon-size="18px">{{ $t('merchantManage.yes') }}</van-radio>
                    <van-radio name="1" icon-size="18px">{{ $t('merchantManage.no') }}</van-radio>
                  </van-radio-group>
                </div>
              </div>
              <div v-if="adminType === 0 || adminType === 1">
                <div class="van-cell van-field">
                  <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.discountCode') }}</span>
                  </div>
                  <div class="van-cell__value van-field__value radioBox">
                    <van-radio-group v-model="adminObj.promoCodeOpen" direction="horizontal">
                      <van-radio name="0" icon-size="18px">{{ $t('merchantManage.yes') }}</van-radio>
                      <van-radio name="1" icon-size="18px">{{ $t('merchantManage.no') }}</van-radio>
                    </van-radio-group>
                  </div>
                </div>
                <div class="van-cell van-field">
                  <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.paymentPlatform') }}</span>
                  </div>
                  <div class="van-cell__value van-field__value radioBox">
                    <van-radio-group v-model="adminObj.payPlatform" direction="horizontal">
                      <van-radio name="0" icon-size="18px">{{ $t('merchantManage.convergence') }}</van-radio>
                      <van-radio name="1" icon-size="18px">{{ $t('merchantManage.huifuPaymnt') }}</van-radio>
                    </van-radio-group>
                  </div>
                </div>
              </div>
              <van-row justify="space-around" style="padding: 1em;">
                <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{
                  $t('merchantManage.modificationSubmission') }}
                </van-button>
              </van-row>
            </van-form>
          </div>
          <div v-if="tabType === '1'" class="tab2">
            <div class="kBordBott o-w o-pb-10">
              <span class="info3">{{ $t('merchantManage.merchantType') }}：{{ adminMchObj.altMerchantType == 10 ? "个人" :
                (adminMchObj.altMerchantType == 12 ? "企业" : "") }}</span>
              <span class="info4">{{ $t('merchantManage.contactName') }}：{{ adminMchObj.busiContactName }}</span>
              <span class="word4">{{ $t('merchantManage.cellPhone') }}：{{ adminMchObj.busiContactMobileNo }}</span>
            </div>
            <div class="kBordBott o-w o-pb-10">

              <span class="txt2">{{ $t('merchantManage.nameOfLegalPerson/Individual') }}：{{ adminMchObj.legalPerson
              }}</span>
              <span class="word5">{{ $t('merchantManage.phoneNumberOfLegalPerson/Individual') }}：{{ adminMchObj.phoneNo
              }}</span>
              <span class="word6">{{ $t('merchantManage.legalPerson/IndividualIDNumber') }}：{{ adminMchObj.idCardNo
              }}</span>
              <span class="txt3">{{ $t('merchantManage.validityOfIDCard') }}：{{ adminMchObj.idCardExpiry }}</span>
              <span v-if="adminMchObj.altMerchantType == 12" class="txt4">{{ $t('merchantManage.businessLicenseCode')
              }}：{{ adminMchObj.licenseNo }}</span>
              <span v-if="adminMchObj.altMerchantType == 12" class="word7">{{
                $t('merchantManage.validityOfBusinessLicense') }}：{{ adminMchObj.licenseExpiry
  }}</span>
              <span class="txt5">{{ $t('merchantManage.natureOfBusiness') }}：{{ adminMchObj.manageScope }}</span> <span
                class="word8">{{ $t('merchantManage.businessAddress') }}：{{ adminMchObj.manageAddr }}</span>
            </div>

            <div class="block5 flex-row justify-between">
              <span class="txt6">{{ $t('merchantManage.accountType') }}
                ：{{ adminMchObj.bankAccountType === 1 ? $t('merchantManage.debitCard') : (adminMchObj.bankAccountType === 4
                  ? $t('merchantManage.corporateAccount') : "") }}</span>
              <!-- <span class="word9"></span> -->
            </div>
            <span class="word10">{{ $t('merchantManage.bankAccountName') }}：{{ adminMchObj.bankAccountName }}</span>
            <span class="word11">{{ $t('merchantManage.bankAccount') }}：{{ adminMchObj.bankAccountNo }}</span>
            <span v-if="adminMchObj.bankAccountType == 4" class="word12">{{ $t('merchantManage.bankNo') }}：{{
              adminMchObj.bankChannelNo }}</span>
            <div v-if="adminType < 2">
              <span class="word12">{{ $t('merchantManage.joinpayMch') }}：{{ adminMchObj.signStatus == '签约成功' ?
                adminMchObj.signStatus : '未签约' }}</span>
              <span class="word12">{{ $t('merchantManage.huifuMch') }}：{{ huifuMchObj.status == '2' ? '签约成功' : '未签约' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getAdmin, getAdminMch, updateAdmin, getHuifuMch } from "@/service/merchantManage";
import { showFailToast, showSuccessToast } from "vant";
import { useRoute } from "vue-router";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import { useI18n } from "vue-i18n";

export default {
  components: { sHeader },
  setup() {
    // 引入语言
    const { t } = useI18n();
    const tabType = ref('0');
    const user = getLoginUser();
    const adminType = ref(user.type);
    const route = useRoute();
    const merchantId = ref('');
    const adminObj = ref({});
    const adminMchObj = ref({});
    const huifuMchObj = ref({});
    const ifForeign = ref('0');
    onMounted(async () => {
      // 加载样式
      styleUrl('merchantManage');
      merchantId.value = route.query.merchantId;
      getAdminFun();
      console.log(ifForeign.value);
      getAdminMchFun();
      getHuifuMchFun();

    });
    const getAdminFun = async () => {
      const { data } = await getAdmin({ id: merchantId.value });
      if (data.code === "00000") {
        adminObj.value = data.data;
        adminObj.value.password = '';
        adminObj.value.checkPassword = '';
        if (data.data.payPlatform == null) {
          adminObj.value.payPlatform = '0';
        }
        if (data.data.promoCodeOpen == null) {
          adminObj.value.promoCodeOpen = '1';
        }
        ifForeign.value = data.data.ifForeign;
      } else { showFailToast(data.message); }
      console.log('getAdminFun', data);
    };
    const getAdminMchFun = async () => {
      const { data } = await getAdminMch({ id: merchantId.value });
      if (data.code === "00000") { adminMchObj.value = data.data; } else { showFailToast(data.message); }
      console.log('getAdminMchFun', data);
      console.log('adminMchObj', adminMchObj.value.signStatus);
    }
    const getHuifuMchFun = async () => {
      const { data } = await getHuifuMch({ adminId: merchantId.value });
      if (data.code === "00000") { huifuMchObj.value = data.data; } else { showFailToast(data.message); }
      console.log('getHuifuMchFun', data);
    }
    const onSubmit = async () => {
      const params = {
        id: adminObj.value.id,
        name: adminObj.value.name,
        username: adminObj.value.username,
        ifForeign: adminObj.value.ifForeign,
        phone: adminObj.value.phone,
        email: adminObj.value.email,
        tradeMerchantNo: adminObj.value.tradeMerchantNo,
      };
      if (adminType.value === 0 || adminType.value === 1) {
        params.promoCodeOpen = adminObj.value.promoCodeOpen;
        params.applyStartTime = adminObj.value.applyStartTime;
        params.applyEndTime = adminObj.value.applyEndTime;
        params.payPlatform = adminObj.value.payPlatform;
      }
      if (adminObj.value.password !== '') {
        if (adminObj.value.checkPassword === '') { showFailToast(t('merchantManage.confirmPasswordPlaceholder')); return; }
        if (adminObj.value.password === adminObj.value.checkPassword) {
          params.password = adminObj.value.password;
        } else {
          showFailToast(t('merchantManage.theTwoPasswordsAreDifferent'));
        }
      }
      const { data } = await updateAdmin(params);
      if (data.code === "00000") {
        showSuccessToast(t('merchantManage.modificationSucceeded'));
        setTimeout(() => {
          // router.go(0);
          getAdminFun();
        }, 1500);
      } else { showFailToast(data.message); }
      console.log('onSubmit', data);
    }
    return {
      tabType,
      adminType,
      adminObj,
      adminMchObj,
      huifuMchObj,
      onSubmit
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";
@import "../../styles/merchantManage/index.less";
</style>