first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/myAd/index.vue

@@ -2,98 +2,193 @@
  <div id="my_ad" class="pb-180 flex flex-col w-full h-full bg-grey">
    <order-nav :title="$t('我的广告')">
      <template #right>
        <div>
          <img class="w-36 h-36 mr-34" src="@/assets/image/otc/buy/plus.png" alt="" @click="clickAD">
        <div @click="clickAD">
          <img
            class="w-36 h-36 mr-34"
            src="@/assets/image/otc/buy/plus.png"
            alt=""
          />
        </div>
        <div>
          <img class="w-32 h-36" src="@/assets/image/otc/buy/ggbj.png" alt="" @click="AdHistory">
        <div @click="AdHistory">
          <img class="w-32 h-36" src="@/assets/image/otc/buy/ggbj.png" alt="" />
        </div>
      </template>
    </order-nav>
    <div class="border_top">
      <van-dropdown-menu active-color="#1D91FF">
        <van-dropdown-item v-model="form.symbol" :options="option1" active-color="#ffffff" />
        <van-dropdown-item
          v-model="form.symbol"
          :options="option1"
          active-color="#ffffff"
        />
        <van-dropdown-item v-model="form.direction" :options="option2" />
        <van-dropdown-item v-model="form.on_sale" :options="option3" />
      </van-dropdown-menu>
    </div>

    <div style="overflow-y: auto; flex: 1">
      <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
        v-model="isLoading" @refresh="onRefresh">
      <van-pull-refresh
        :pulling-text="$t('下拉即可刷新')"
        :loosing-text="$t('释放即可刷新')"
        :loading-text="$t('加载中')"
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <template v-if="list.length !== 0">
          <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad">
            <div class="flex-1 w-full bg-grey box-border px-32 py-32 overflow-y ">

              <div @click="$router.push({
                path: '/adDetails',
                query: {
                  id: item.id
                }
              })" class="bg-white rounded-xl mb-32 " v-for="(item, index) in list" :key="'AD' + index">
                <div class="flex justify-between items-center px-28 pt-26 ">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('没有更多了')"
            @load="onLoad"
          >
            <div
              class="flex-1 w-full bg-grey box-border px-32 py-32 overflow-y"
            >
              <div
                @click="
                  $router.push({
                    path: '/adDetails',
                    query: {
                      id: item.id,
                    },
                  })
                "
                class="bg-white rounded-xl mb-32"
                v-for="(item, index) in list"
                :key="'AD' + index"
              >
                <div class="flex justify-between items-center px-28 pt-26">
                  <div>
                    <span :class="item.direction === 'sell' ? 'text-red' : 'text-green'" class="font-400 mr-10">{{
                      item.direction === 'sell' ? $t('出售') : $t('购买') }}</span>
                    <span class="font-500 font-32 mr-10">{{ item.symbol.toUpperCase() }}</span>
                    <span class="font-400 font-32 mr-10">{{ $t('用') }}</span>
                    <span
                      :class="
                        item.direction === 'sell' ? 'text-red' : 'text-green'
                      "
                      class="font-400 mr-10"
                      >{{
                        item.direction === "sell" ? $t("出售") : $t("购买")
                      }}</span
                    >
                    <span class="font-500 font-32 mr-10">{{
                      item.symbol.toUpperCase()
                    }}</span>
                    <span class="font-400 font-32 mr-10">{{ $t("用") }}</span>
                    <span class="font-500 font-32">{{ item.currency }}</span>
                  </div>
                  <div class="flex ">
                    <div v-if="!item.on_sale" class="text-grey bg-grey px-12 py-6 font-24">{{ $t('已下架') }}</div>
                    <div v-if="item.on_sale" class="bg-grey px-12 py-6 font-24" :class="{ grey: checked }">{{ $t('已上架') }}
                  <div class="flex">
                    <div
                      v-if="!item.on_sale"
                      class="text-grey bg-grey px-12 py-6 font-24"
                    >
                      {{ $t("已下架") }}
                    </div>
                    <van-switch class="ml-28" disabled v-model="item.on_sale" size="24" />
                    <div
                      v-if="item.on_sale"
                      class="bg-grey px-12 py-6 font-24"
                      :class="{ grey: checked }"
                    >
                      {{ $t("已上架") }}
                    </div>
                    <van-switch
                      class="ml-28"
                      disabled
                      v-model="item.on_sale"
                      size="24"
                    />
                  </div>
                </div>
                <div class="px-28 pb-26">
                  <div class="mt-34">
                    <span class="font-600 font-32 mr-18">{{ $store.state.home.currency.currency_symbol }}</span>
                    <span class="font-700 font-52">{{ item.symbol_value }}</span>
                    <span class="font-600 font-32 mr-18">{{
                      $store.state.home.currency.currency_symbol
                    }}</span>
                    <span class="font-700 font-52">{{
                      item.symbol_value
                    }}</span>
                  </div>
                  <div class="flex justify-between mt-30">
                    <span class="font-400 font-28 text-grey">{{ $t('交易总额') }}</span>
                    <span class="font-600 font-28">{{ item.symbol_value * item.coin_amount }} {{ item.symbol }}</span>
                    <span class="font-400 font-28 text-grey">{{
                      $t("交易总额")
                    }}</span>
                    <span class="font-600 font-28"
                      >{{ item.symbol_value * item.coin_amount }}
                      {{ item.symbol }}</span
                    >
                  </div>
                  <div class="flex justify-between mt-30">
                    <span class="font-400 font-28 text-grey">{{ $t('限额') }}</span>
                    <span class="font-600 font-28">{{ item.investment_min + ' - ' + item.investment_max + ' ' +
                      item.currency }}</span>
                    <span class="font-400 font-28 text-grey">{{
                      $t("限额")
                    }}</span>
                    <span class="font-600 font-28">{{
                      item.investment_min +
                      " - " +
                      item.investment_max +
                      " " +
                      item.currency
                    }}</span>
                  </div>
                  <div class="flex justify-between items-center mt-64">
                    <div class="flex items-center">
                      <div class="w-7 h-29 col  mr-9"></div>
                      <div class="w-7 h-29 col mr-9"></div>
                      <span class="mr-19">{{ item.pay_type_name }}</span>
                    </div>
                    <img @click="$router.push(item.path)" class="w-44 h-44" src="@/assets/image/otc/buy/Group 2630.png"
                      alt="">
                    <span @click="$router.push(item.path)"
                      ><img
                        class="w-44 h-44"
                        src="@/assets/image/otc/buy/Group 2630.png"
                        alt=""
                      />
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </template>
        <template v-if="list.length === 0 && loading === false && isLoading === false">
        <template
          v-if="list.length === 0 && loading === false && isLoading === false"
        >
          <div class="mt-160">
            <van-empty class="custom-image" :image="require('@/assets/image/otc/nodatas.png')" :description="$t('暂无广告')">
              <van-button @click="showPopup" round type="danger" square
            <van-empty
              class="custom-image"
              :image="require('@/assets/image/otc/nodatas.png')"
              :description="$t('暂无广告')"
            >
              <van-button
                @click="showPopup"
                round
                type="danger"
                square
                class="bottom-button rounded-xl h-80 w-220 font-500 font-32"
                color="linear-gradient(275.44deg, #1D92FF 2.13%, #B1DAFF 98.94%)"></van-button>
                color="linear-gradient(275.44deg, #1D92FF 2.13%, #B1DAFF 98.94%)"
              ></van-button>
            </van-empty>
            <van-popup v-model="show">
              <div class="h-360 w-600 text-center">
                <img src="@/assets/image/otc/buy/advice_icon.png" class="w-76 h-76 mt-46 " alt="">
                <div class="font-28 font-400 mt-36">{{ $t('請先申請成為認證廣告方') }}</div>
                <img
                  src="@/assets/image/otc/buy/advice_icon.png"
                  class="w-76 h-76 mt-46"
                  alt=""
                />
                <div class="font-28 font-400 mt-36">
                  {{ $t("請先申請成為認證廣告方") }}
                </div>
                <div class="mt-42 mb-48 flex px-50 box-border">
                  <div class="h-80 bg-grey flex-1 rounded-lg lh-80 text-center font-28 mr-22" @click="show = false">
                    {{ $t('取消') }}</div>
                  <div class="h-80 bg-blue flex-1 rounded-lg lh-80 text-center font-28 text-white"
                    @click="$router.push('/CertifiedAdvertiser')">{{ $t('去申请') }}</div>
                  <div
                    class="h-80 bg-grey flex-1 rounded-lg lh-80 text-center font-28 mr-22"
                    @click="show = false"
                  >
                    {{ $t("取消") }}
                  </div>
                  <div
                    class="h-80 bg-blue flex-1 rounded-lg lh-80 text-center font-28 text-white"
                    @click="$router.push('/CertifiedAdvertiser')"
                  >
                    {{ $t("去申请") }}
                  </div>
                </div>
              </div>
            </van-popup>
          </div>

        </template>
      </van-pull-refresh>
    </div>
@@ -101,10 +196,21 @@
</template>

<script>
import listLoadMixins from '@/utils/list-load-mixins'
import { Icon, DropdownMenu, Cell, DropdownItem, Switch, Empty, Popup, List, PullRefresh, Toast } from "vant";
import listLoadMixins from "@/utils/list-load-mixins";
import {
  Icon,
  DropdownMenu,
  Cell,
  DropdownItem,
  Switch,
  Empty,
  Popup,
  List,
  PullRefresh,
  Toast,
} from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import { getMyadvertList, c2cGetCurrencyList } from '@/API/otc'
import { getMyadvertList, c2cGetCurrencyList } from "@/API/otc";
export default {
  name: "my_ad",
  mixins: [listLoadMixins],
@@ -124,28 +230,26 @@
  data() {
    return {
      show: false,
      value2: 'a',
      value3: 'A',
      value2: "a",
      value3: "A",
      checked: false,
      form: {
        direction: '',
        direction: "",
        currency: this.$store.state.home.currency.currency,
        symbol: '', // 默认全部
        on_sale: '',
        language: this.$i18n.locale
        symbol: "", // 默认全部
        on_sale: "",
        language: this.$i18n.locale,
      },
      option1: [
        { text: this.$t('所有币种'), value: '' },
      ],
      option1: [{ text: this.$t("所有币种"), value: "" }],
      option2: [
        { text: this.$t('所有类型'), value: '' },
        { text: this.$t('购买'), value: 'buy' },
        { text: this.$t('出售'), value: 'sell' },
        { text: this.$t("所有类型"), value: "" },
        { text: this.$t("购买"), value: "buy" },
        { text: this.$t("出售"), value: "sell" },
      ],
      option3: [
        { text: this.$t('所有状态'), value: '' },
        { text: this.$t('上架'), value: 1 },
        { text: this.$t('下架'), value: 0 },
        { text: this.$t("所有状态"), value: "" },
        { text: this.$t("上架"), value: 1 },
        { text: this.$t("下架"), value: 0 },
      ],
    };
  },
@@ -155,24 +259,25 @@
      Object.keys(res).forEach((key) => {
        this.option1.push({
          text: res[key],
          value: key
        })
      })
      this.get()
    })
          value: key,
        });
      });
      this.get();
    });
  },
  methods: {
    get() { // 获取数据的方法需要自定义
    get() {
      // 获取数据的方法需要自定义
      //console.log('正在加载数据')
      Toast.loading()
      getMyadvertList(this.form).then(res => {
        Toast.clear()
      Toast.loading();
      getMyadvertList(this.form).then((res) => {
        Toast.clear();
        //console.log('我的广告', res)
        res.forEach((item) => {
          item.on_sale === 1 ? item.on_sale = true : item.on_sale = false
        })
        this.handleData(res)
      })
          item.on_sale === 1 ? (item.on_sale = true) : (item.on_sale = false);
        });
        this.handleData(res);
      });
    },
    click() {
      this.checked = !this.checked;
@@ -182,19 +287,19 @@
    },
    clickAD() {
      this.$router.push({
        path: '/editAd',
        path: "/editAd",
        query: {
          type: 0
        }
      })
          type: 0,
        },
      });
    },
    AdHistory() {
      this.$router.push({
        path: '/advertiserHistory',
      })
    }
  }
}
        path: "/advertiserHistory",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@@ -215,15 +320,15 @@
}

.border_top {
  border-top: 1px solid #C8CAD2;
  border-top: 1px solid #c8cad2;
}

.grey {
  color: #2C78F8;
  color: #2c78f8;
}

.col {
  background: #E7BB41;
  background: #e7bb41;
}

.overflow-y {