first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/placeAnOrder/page/wantBuy/WantBuyHeader.vue

@@ -1,68 +1,76 @@
<template>
  <div
      class="w-full h-122 pl-40 pr-31 box-border bg-blue flex justify-between text-white items-center"
    class="w-full h-122 pl-40 pr-31 box-border bg-blue flex justify-between text-white items-center"
  >
    <van-icon class="flex-1" name="arrow-left"/>
    <van-icon class="flex-1" name="arrow-left" />
    <div class="flex-1" @click="showPopup">
      <span class="font-35 mr-8">{{ $t('自选区') }}</span>
      <van-icon name="arrow-down"/>
      <span class="font-35 mr-8">{{ $t("自选区") }}</span>
      <van-icon name="arrow-down" />
    </div>
    <van-popup round position="top" v-model="show" :closeable="true">
        <span class="font-28 c2cColor font-500 ml-32 block mt-20">{{
            $t('选择交易区')
          }}</span>
      <span class="font-28 c2cColor font-500 ml-32 block mt-20">{{
        $t("选择交易区")
      }}</span>
      <div class="flex justify-around c2cColor mt-40 pb-48">
        <div class="flex flex-col items-center"  @click="handleHeadRoute('/wantBuy/quick')">
        <div
          class="flex flex-col items-center"
          @click="handleHeadRoute('/wantBuy/quick')"
        >
          <img
              class="w-56 h-56"
              src="@/assets/image/otc/wantBuyHead/fast.png"
              alt=""
            class="w-56 h-56"
            src="@/assets/image/otc/wantBuyHead/fast.png"
            alt=""
          />
          <span class="font-24 mt-10 h-32 font-500">{{ $t('快捷区') }}</span>
          <span class="font-24 mt-10 h-32 font-500">{{ $t("快捷区") }}</span>
        </div>
        <div class="flex flex-col items-center"  @click="handleHeadRoute('/wantBuy')">
        <div
          class="flex flex-col items-center"
          @click="handleHeadRoute('/wantBuy')"
        >
          <img
              class="w-56 h-56"
              src="@/assets/image/otc/wantBuyHead/optional.png"
              alt=""
            class="w-56 h-56"
            src="@/assets/image/otc/wantBuyHead/optional.png"
            alt=""
          />
          <span class="font-24 mt-10 font-500">{{ $t('自选区') }}</span>
          <span class="font-24 mt-10 font-500">{{ $t("自选区") }}</span>
        </div>
      </div>
    </van-popup>
    <div
        class="w-252 h-64 px-23 box-border box-radius text-black flex flex-1 justify-around items-center"
        style="background: #c2e1ff"
      class="w-252 h-64 px-23 box-border box-radius text-black flex flex-1 justify-around items-center"
      style="background: #c2e1ff"
    >
      <div
          class="flex items-center"
          @click="$router.push({
              path: '/selectLegalCurrency'
            })"
        class="flex items-center"
        @click="
          $router.push({
            path: '/selectLegalCurrency',
          })
        "
      >
        <span class="mr-15 font-31 font-400">USD</span>
        <img
            class="w-24 h-20"
            :src="require('@/assets/image/otc/wantBuyHead/Group.png')"
            alt=""
          class="w-24 h-20"
          :src="require('@/assets/image/otc/wantBuyHead/Group.png')"
          alt=""
        />
      </div>
      <span class="w-2 h-36">|</span>
      <van-popover
          get-container="#wantBuy"
          v-model="isShowPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
          theme="dark"
          :offset="[20, 20]"
        get-container="#wantBuy"
        v-model="isShowPopover"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        placement="bottom-end"
        theme="dark"
        :offset="[20, 20]"
      >
        <template #reference>
          <img
              class="relative w-24 h-6 list-img"
              :src="require('@/assets/image/otc/wantBuyHead/Group2.png')"
              alt=""
            class="relative w-24 h-6 list-img"
            :src="require('@/assets/image/otc/wantBuyHead/Group2.png')"
            alt=""
          />
        </template>
      </van-popover>
@@ -71,11 +79,7 @@
</template>

<script>
import {
  Icon,
  Popup,
  Popover,
} from "vant";
import { Icon, Popup, Popover } from "vant";

export default {
  name: "WantBuyHeader",
@@ -85,55 +89,53 @@

      actions: [
        {
          text: this.$t('收款方式'),
          icon: require('@/assets/image/otc/buy/collection_icon.png'),
          path: '/paymentMethod',
          text: this.$t("收款方式"),
          icon: require("@/assets/image/otc/buy/collection_icon.png"),
          path: "/paymentMethod",
        },
        {
          text: this.$t('c2c帮助中心'),
          icon: require('@/assets/image/otc/buy/help_icon.png'),
          path: '/c2cHelpCenter',
          text: this.$t("c2c帮助中心"),
          icon: require("@/assets/image/otc/buy/help_icon.png"),
          path: "/c2cHelpCenter",
        },
        {
          text: this.$t('c2c用户中心'),
          icon: require('@/assets/image/otc/buy/user_icon.png'),
          path: '/c2c/c2cUser',
          text: this.$t("c2c用户中心"),
          icon: require("@/assets/image/otc/buy/user_icon.png"),
          path: "/c2c/c2cUser",
        },
        {
          text: this.$t('接单模式'),
          icon: require('@/assets/image/otc/buy/order_icon.png'),
          text: this.$t("接单模式"),
          icon: require("@/assets/image/otc/buy/order_icon.png"),
        },
      ],
    }
    };
  },
  methods: {
    handleHeadRoute(path) {
      console.log('path', path)
      this.$router.push(path)
      console.log("path", path);
      this.$router.push(path);
    },
    showPopup() {
      this.show = true
      this.show = true;
    },
    onSelect(action) {

      if (action.text == this.$t('接单模式')) {
        this.showJie = true
        return
      if (action.text == this.$t("接单模式")) {
        this.showJie = true;
        return;
      }

      this.$router.push({
        path: action.path,
      })
      });
    },
  },
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Popover.name]: Popover,
  }
}
  },
};
</script>

<style scoped>

</style>