shenze-sysMan/src/views/advertManage/adSet.vue

<template>
  <!-- 广告管理 - 新增|修改 -->
  <div class="advertPage flex-col">
    <s-header :name="pageTitle" :noback="false"></s-header>
    <div class="advertBox flex-col">
      <van-form @submit="updateAdFun">
        <van-field required v-model="adInfo.name" name="name" :label="`${$t('advertManage.advertisingNameLabel')}:`"
          :placeholder="$t('advertManage.advertisingNamePlaceholder')" :rules="[
            {
              required: true,
              message: $t('advertManage.advertisingNamePlaceholder'),
            },
          ]" />
        <van-field v-model="adInfo.adminId" name="adminId" :label="`${$t('advertManage.affiliatedMerchantsLabel')}:`"
          :placeholder="$t('advertManage.affiliatedMerchantsPlaceholder')" />
        <van-field v-model="adInfo.orders" name="orders" type="number"
          :label="`${$t('advertManage.advertisingOrderLabel')}:`"
          :placeholder="$t('advertManage.advertisingOrderPlaceholder')" />
        <van-field required clearable @click-input="busiInpClk" v-model="adInfo.equipmentType" name="equipmentType"
          :label="`${$t('advertManage.machineType')}:`" :placeholder="$t('advertManage.machineTypePlace')" :rules="[
            {
              required: true,
              message: $t('advertManage.machineTypePlace'),
            },
          ]">
          <template #right-icon>
            <div class="l-flex-RC">
              <van-icon v-if="adInfo.equipmentType" @click="adInfo.equipmentType = ''" class="o-mr-6" name="clear" />
              <van-icon @click="busiInpClk" name="arrow-down" />
            </div>
          </template>
        </van-field>
        <van-field v-model="adInfo.duration" name="duration" type="number"
          :label="`${$t('advertManage.advertisingDurationLabel')}:`"
          :placeholder="$t('advertManage.advertisingDurationPlaceholder')" />
        <van-field v-model="adInfo.plays" name="plays" type="number" :label="`${$t('advertManage.playbackTimesLabel')}:`"
          :placeholder="$t('advertManage.playbackTimesPlaceholder')" />
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span>{{ $t("advertManage.advertisingPosition") }}:</span>
          </div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.screenType" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{
                $t("advertManage.screenA")
              }}</van-radio>
              <van-radio name="1" icon-size="18px">{{
                $t("advertManage.screenB")
              }}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span>{{ $t("advertManage.locationType") }}:</span>
          </div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.locationType" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{
                $t("advertManage.advertising")
              }}</van-radio>
              <van-radio name="1" icon-size="18px">{{
                $t("advertManage.externalAdvertising")
              }}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span>{{ $t("advertManage.defaultDownload") }}:</span>
          </div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.type" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{
                $t("advertManage.defaultDownload")
              }}</van-radio>
              <van-radio name="1" icon-size="18px">{{
                $t("advertManage.doNotDownloadByDefault")
              }}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span>{{ $t("advertManage.advertisingType") }}:</span>
          </div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.adType" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{
                $t("advertManage.picture")
              }}</van-radio>
              <van-radio name="1" icon-size="18px">{{
                $t("advertManage.video")
              }}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div v-if="adInfo.adType === '0'">
          <van-field required v-model="adInfo.url" name="url" :label="`${$t('advertManage.pictureAddressLabel')}:`"
            :placeholder="$t('advertManage.pictureAddressPlaceholder')" :rules="[
              {
                required: true,
                message: $t('advertManage.pictureAddressPlaceholder'),
              },
            ]" />
        </div>
        <div v-if="adInfo.adType === '1'">
          <van-field v-model="adInfo.mediaPreview" name="mediaPreview"
            :label="`${$t('advertManage.thumbnailAddressLabel')}:`"
            :placeholder="$t('advertManage.thumbnailAddressPlaceholder')" />
          <van-field required v-model="adInfo.url" name="url" :label="`${$t('advertManage.videoLinkLabel')}:`"
            :placeholder="$t('advertManage.videoLinkPlaceholder')" :rules="[
              {
                required: true,
                message: $t('advertManage.videoLinkPlaceholder'),
              },
            ]" />
        </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("advertManage.submit") }}
          </van-button>
        </van-row>
      </van-form>
    </div>
    <!-- 机器类型选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker v-model="busiDefaIdx" :title="$t('advertManage.machineTypePlace')" :columns="busiPopList"
        :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
    </van-popup>
  </div>
</template>

<script>
import { onMounted, ref, reactive } from "vue";
import sHeader from "../../components/SimpleHeader";
import { addAdInfo, updateAdInfo } from "../../service/advertManage";
import { useRouter } from "vue-router";
import { showFailToast, showSuccessToast } from 'vant';
import { useI18n } from "vue-i18n";
import { styleUrl } from "../../common/js/utils";

export default {
  components: { sHeader },
  setup() {
    // 点击机器类型
    const busiInpClk = () => {
      busiPopShow.value = true;
    };
    // 机器类型
    const busiPopShow = ref(false);
    const busiDefaIdx = ref(["280"]);
    const busiPopList = reactive([
      {
        name: "280",
        id: "280",
      },
      {
        name: "280en",
        id: "280en",
      },
      {
        name: "301",
        id: "301",
      },
      {
        name: "301en",
        id: "301en",
      },
      {
        name: "320",
        id: "320",
      },
      {
        name: "320en",
        id: "320en",
      },
      {
        name: "330",
        id: "330",
      },
      {
        name: "330en",
        id: "330en",
      },
      {
        name: "P30",
        id: "P30",
      },
      {
        name: "P30en",
        id: "P30en",
      },
      {
        name: "SI320",
        id: "SI320",
      },
      {
        name: "SI320en",
        id: "SI320en",
      },
      {
        name: "SBC320",
        id: "SBC320",
      },
      {
        name: "SBC320en",
        id: "SBC320en",
      },
    ]);
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 点击机器类型的弹窗确定
    const busiPopConfirm = ({ selectedOptions }) => {
      adInfo.value.equipmentType = selectedOptions[0].id;
      busiPopShow.value = false;
    };
    const { t } = useI18n();
    const router = useRouter();
    const adInfo = ref({
      adminId: "",
      username: null,
      name: "",
      orders: "",
      duration: "",
      plays: "",
      status: "推送中",
      screenType: "0",
      locationType: "0",
      type: "0",
      adType: "0",
      url: "",
      mediaPreview: "",
      equipmentType: "",
    });
    const pageTitle = ref("");
    onMounted(async () => {
      // 加载样式
      styleUrl('advertManage');
      let adverInfo = localStorage.getItem("adverInfo");
      if (adverInfo) {
        pageTitle.value = t("advertManage.modifyAdvertisement");
        adverInfo = JSON.parse(adverInfo);
        adInfo.value.id = adverInfo.id;
        adInfo.value.adminId = adverInfo.adminId;
        adInfo.value.username = adverInfo.username;
        adInfo.value.name = adverInfo.name;
        adInfo.value.orders = adverInfo.orders;
        adInfo.value.duration = adverInfo.duration;
        adInfo.value.plays = adverInfo.plays;
        adInfo.value.screenType =
          typeof adverInfo.screenType === "object"
            ? "0"
            : adverInfo.screenType.toString();
        adInfo.value.locationType =
          typeof adverInfo.locationType === "object"
            ? "0"
            : adverInfo.locationType.toString();
        adInfo.value.type =
          typeof adverInfo.type === "object" ? "0" : adverInfo.type.toString();
        adInfo.value.adType =
          typeof adverInfo.adType === "object"
            ? "0"
            : adverInfo.adType.toString();
        adInfo.value.url = adverInfo.url;
        adInfo.value.mediaPreview = adverInfo.mediaPreview;
        adInfo.value.equipmentType = adverInfo.equipmentType;
        // 找到机器类型的下标
        // busiPopList.forEach((item, index) => {
        //   console.log(item, index);
        //   console.log(adverInfo.equipmentType);

        //   if (item.id == adverInfo.equipmentType) {
        //     busiDefaIdx.value = index;
        //   }
        // });
        busiDefaIdx.value = [adverInfo.equipmentType];
        // console.log(adInfo.value);
      } else {
        pageTitle.value = t("advertManage.addAds");
      }
    });

    const updateAdFun = async () => {
      if (pageTitle.value === t("advertManage.modifyAdvertisement")) {
        const params = Object.assign({}, adInfo.value);
        const { data } = await updateAdInfo(params);
        if (data.code === "00000") {
          showSuccessToast(t("advertManage.successfullyModifiedTheAdvertisement"));
          router.push({ path: "advertManage" });
        } else {
          showFailToast(data.message);
        }
        console.log("updateAdFun", data);
      } else {
        const params = Object.assign({}, adInfo.value);
        const { data } = await addAdInfo(params);
        if (data.code === "00000") {
          showSuccessToast(t("advertManage.advertisementAddedSuccessfully"));
          router.push({ path: "advertManage" });
        } else {
          showFailToast(data.message);
        }
      }
    };
    return {
      pageTitle,
      adInfo,
      updateAdFun,
      busiPopShow,
      busiDefaIdx,
      busiPopList,
      busiPopFieldName,
      busiPopConfirm,
      busiInpClk,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
</style>