123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377 |
- <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 class="van-cell van-field">
- <div class="van-cell__title van-field__label">
- <span>{{ $t("advertManage.playTimeStatus") }}:</span>
- </div>
- <div class="van-cell__value van-field__value radioBox">
- <van-radio-group v-model="adInfo.playTimeStatus" direction="horizontal">
- <van-radio name="0" icon-size="18px">{{
- $t("advertManage.acquiesce")
- }}</van-radio>
- <van-radio name="1" icon-size="18px">{{
- $t("advertManage.standby")
- }}</van-radio>
- <van-radio name="2" icon-size="18px">{{
- $t("advertManage.work")
- }}</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: "P10",
- id: "P10",
- },
- {
- name: "P10en",
- id: "P10en",
- },
- {
- name: "P20",
- id: "P20",
- },
- {
- name: "P20en",
- id: "P20en",
- },
- {
- name: "P30",
- id: "P30",
- },
- {
- name: "P30en",
- id: "P30en",
- },
- {
- name: "SI320",
- id: "SI320",
- },
- {
- name: "SI320en",
- id: "SI320en",
- },
- {
- name: "SBC320",
- id: "SBC320",
- },
- {
- name: "SBC320en",
- id: "SBC320en",
- },
- {
- name: "SBM10ch",
- id: "SBM10ch",
- },
- {
- name: "SBM10en",
- id: "SBM10en",
- },
- {
- name: "EF210ch",
- id: "EF210ch",
- },
- {
- name: "EF210en",
- id: "EF210en",
- },
- ]);
- 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: "",
- playTimeStatus: "0",
- });
- 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>
-
|