123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/page/placeAnOrder/page/adScreening.vue

@@ -1,11 +1,13 @@
<template>
  <div id="full" class="adScreening">
    <div class="flex box-border items-center justify-between px-36 w-full mt-26 font-36 font-700 text-center">
    <div
      class="flex box-border items-center justify-between px-36 w-full mt-26 font-36 font-700 text-center"
    >
      <div></div>
      <span class="c2cColor">{{ $t('广告筛选') }}</span>
      <span class="c2cColor">{{ $t("广告筛选") }}</span>
      <van-icon class="c2cColor" name="cross" @click="handlerBack" />
    </div>
    <div class="font-27 mb-35 text-grey ml-32 mt-40">{{ $t('总额') }}</div>
    <div class="font-27 mb-35 text-grey ml-32 mt-40">{{ $t("总额") }}</div>
    <div class="px-32">
      <van-field v-model="amount" :size="large" :placeholder="$t('请输入总额')">
        <template #extra>
@@ -15,8 +17,18 @@
        </template>
      </van-field>
    </div>
    <select-item class="mt-64" :title="$t('交易方式')" :options="fullPayMethods" v-model="method_type" />
    <select-item class="mt-64" :title="$t('国家/地区')" :options="countries" v-model="country_code" />
    <select-item
      class="mt-64"
      :title="$t('交易方式')"
      :options="fullPayMethods"
      v-model="method_type"
    />
    <select-item
      class="mt-64"
      :title="$t('国家/地区')"
      :options="countries"
      v-model="country_code"
    />
    <div class="px-32">
      <van-cell class="c2cColor" center :title="$t('仅显示商家发布的广告')">
        <template #right-icon>
@@ -27,28 +39,54 @@
        <van-collapse-item>
          <template #title>
            <div class="flex items-center">
              <img class="w-24 h-24 mr-18" src="~@/assets/image/otc/wantBuyHead/tip_ico.png" alt="">
              <span class="mr-16 font-24 text-grey">{{ $t('广告筛选说明') }}</span>
              <van-icon name="arrow-down" class="block relative top-1 font-24 font-700"
                :class="{ 'rotateZ': activeNames.length > 0 }" />
              <img
                class="w-24 h-24 mr-18"
                src="~@/assets/image/otc/wantBuyHead/tip_ico.png"
                alt=""
              />
              <span class="mr-16 font-24 text-grey">{{
                $t("广告筛选说明")
              }}</span>
              <van-icon
                name="arrow-down"
                class="block relative top-1 font-24 font-700"
                :class="{ rotateZ: activeNames.length > 0 }"
              />
            </div>
          </template>
          <template #right-icon><i></i></template>
          <template #default>
            <div class="font-28 c2cColor">
              <div><span>{{ $t('交易方式：') }}</span><span class="font-700">{{ $t('仅显示可用的交易方式') }}</span></div>
              <div class="mt-6"><span>{{ $t('国家/地区') }}</span><span class="font-700">{{ $t('仅显示可用的国家 / 地区') }}</span>
              <div>
                <span>{{ $t("交易方式：") }}</span
                ><span class="font-700">{{ $t("仅显示可用的交易方式") }}</span>
              </div>
              <div class="mt-6">
                <span>{{ $t("国家/地区") }}</span
                ><span class="font-700">{{
                  $t("仅显示可用的国家 / 地区")
                }}</span>
              </div>
            </div>
          </template>
        </van-collapse-item>
      </van-collapse>
      <div class="flex mt-56 mb-36 justify-center ">
        <button class="w-370 h-82 tabBackground c2cColor rounded-lg font-400 font-30 border-none mr-21"
          @click="onReset">{{ $t('重置') }}
      <div class="flex mt-56 mb-36 justify-center">
        <button
          class="w-370 h-82 tabBackground c2cColor rounded-lg font-400 font-30 border-none mr-21"
          @click="onReset"
        >
          {{ $t("重置") }}
        </button>
        <button class="w-370 h-82 bg-grey rounded-lg font-400 font-30 border-none"
          :class="[{ 'btnMain': tabindex === 1 }, { 'text-white': tabindex === 1 }]" @click="onConfirm">{{ $t('确认') }}
        <button
          class="w-370 h-82 bg-grey rounded-lg font-400 font-30 border-none"
          :class="[
            { btnMain: tabindex === 1 },
            { 'text-white': tabindex === 1 },
          ]"
          @click="onConfirm"
        >
          {{ $t("确认") }}
        </button>
      </div>
    </div>
@@ -57,11 +95,21 @@

<script>
import SelectItem from "@/page/placeAnOrder/components/selectItem/SelectItem";
import { Cell, Icon, Popup, DropdownMenu, DropdownItem, Field, Switch, Collapse, CollapseItem } from 'vant';
import {
  Cell,
  Icon,
  Popup,
  DropdownMenu,
  DropdownItem,
  Field,
  Switch,
  Collapse,
  CollapseItem,
} from "vant";

import { mapGetters, mapState } from 'vuex'
import countries from '@/components/country-list/countryList.js'
import { timeStamp } from 'console';
import { mapGetters, mapState } from "vuex";
import countries from "@/components/country-list/countryList.js";
import { timeStamp } from "console";

export default {
  name: "adScreening",
@@ -78,83 +126,90 @@
    SelectItem,
  },
  computed: {
    ...mapGetters('c2c', ['payMethods']),
    ...mapGetters('c2c', ['symbolList', 'payMethods', 'exchangeCurrency']),
    ...mapGetters("c2c", ["payMethods"]),
    ...mapGetters("c2c", ["symbolList", "payMethods", "exchangeCurrency"]),
    // 处理交易方式对象
    fullPayMethods() {
      const payMethods = [];
      Object.keys(this.payMethods).forEach((key) => {
        payMethods.push({
          method_type: key,
          title: this.payMethods[key]
        })
      })
          title: this.payMethods[key],
        });
      });
      payMethods.unshift({
        method_type: '',
        title: this.$t('全部')
      })
        method_type: "",
        title: this.$t("全部"),
      });

      return payMethods;
    }
    },
  },
  created() {
  },
  created() {},
  data() {
    return {
      countries, // 国家列表
      activeNames: [],
      amount: '',
      amount: "",
      // 0 代表全部
      method_type: '', // 支付方式
      method_type: "", // 支付方式
      country_code: 99, // 国家
      tradeList: [
        {
          '': this.$t('全部'),
          "": this.$t("全部"),
          // Bank_card: '银行卡',
          // Coin_collection: '币收款',
        }
        },
      ],
      large: '80',
      large: "80",
      checked: false,
      tabindex: 1,
      showAd: false,
    }
    };
  },
  methods: {
    onChooseType(key) { // 选择支付方式
      this.method_type = key
      this.$refs.paymentMethod[0].toggle()
    onChooseType(key) {
      // 选择支付方式
      this.method_type = key;
      this.$refs.paymentMethod[0].toggle();
    },
    onSelectCountry(item) {
      this.country_code = item.code;
      this.$refs.country.toggle()
      this.$refs.country.toggle();
    },
    onReset() { // 重置
      this.amount = ''
      this.method_type = 99
      this.country_code = 99
    onReset() {
      // 重置
      this.amount = "";
      this.method_type = 99;
      this.country_code = 99;
    },
    onConfirm() { // 确认
      console.log(this.amount, this.method_type, this.country_code, this.checked)
      this.$emit('confirm', {
    onConfirm() {
      // 确认
      console.log(
        this.amount,
        this.method_type,
        this.country_code,
        this.checked
      );
      this.$emit("confirm", {
        amount: this.amount,
        method_type: this.method_type
      })
        method_type: this.method_type,
      });

      this.$emit('back')
      this.$emit("back");
    },
    handlerBack() {
      this.$emit('back')
      this.$emit("back");
    },
    payMethod(val) {
      console.log(val);
      this.method_type = val
      this.method_type = val;
    },
    address(val) {
      this.country_code = val
    }
  }
}
      this.country_code = val;
    },
  },
};
</script>

<style lang="scss" scoped>