first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/placeAnOrder/page/wantBuy/index.vue

@@ -1,75 +1,168 @@
<template>
  <div id="wantBuy" class="c2cBackground fixed left-0 right-0 top-0 bottom-0 wantBuy">
  <div
    id="wantBuy"
    class="c2cBackground fixed left-0 right-0 top-0 bottom-0 wantBuy"
  >
    <div
        class="w-full h-122 pl-40 pr-31 box-border c2cBackground flex  text-white items-center"
      class="w-full h-122 pl-40 pr-31 box-border c2cBackground flex text-white items-center"
    >
      <van-icon  name="arrow-left" @click="goback"/>
      <van-icon name="arrow-left" @click="goback" />
      <div class="flex-1 text-right mr-100" @click="showPopup">
        <span class="font-35 mr-8">{{ $t('自选区') }}</span>
        <span class="font-35 mr-8">{{ $t("自选区") }}</span>
        <van-icon name="arrow-down" />
      </div>
      <van-popup round position="top" class="pt-30" v-model="show" :closeable="true">
      <van-popup
        round
        position="top"
        class="pt-30"
        v-model="show"
        :closeable="true"
      >
        <div class="flex justify-around c2cColor mt-40 pb-48">
          <div class="flex flex-col items-center" @click="$router.push({ path: '/wantBuy/quick' })">
            <img 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>
          <div
            class="flex flex-col items-center"
            @click="$router.push({ path: '/wantBuy/quick' })"
          >
            <img
              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>
          </div>
          <div class="flex flex-col items-center" @click="show=false">
            <img class="w-56 h-56" src="@/assets/image/otc/wantBuyHead/optional.png" alt="" />
            <span class="font-24 mt-10 font-500">{{ $t('自选区') }}</span>
          <div class="flex flex-col items-center" @click="show = false">
            <img
              class="w-56 h-56"
              src="@/assets/image/otc/wantBuyHead/optional.png"
              alt=""
            />
            <span class="font-24 mt-10 font-500">{{ $t("自选区") }}</span>
          </div>
        </div>
      </van-popup>
      <div class="w-232 h-64 px-23 box-border box-radius text-black flex justify-around items-center"
        style="background: #c2e1ff">
        <div class="flex items-center" @click="$router.push({ path: '/selectLegalCurrency' })">
      <div
        class="w-232 h-64 px-23 box-border box-radius text-black flex justify-around items-center"
        style="background: #c2e1ff"
      >
        <div
          class="flex items-center"
          @click="$router.push({ path: '/selectLegalCurrency' })"
        >
          <span class="mr-15 font-31 font-400">{{ exchangeCurrency }}</span>
          <img class="w-24 h-20" :src="require('@/assets/image/otc/wantBuyHead/Group.png')" alt="" />
          <img
            class="w-24 h-20"
            :src="require('@/assets/image/otc/wantBuyHead/Group.png')"
            alt=""
          />
        </div>
        <template >
        <template>
          <span class="mx-28 w-2 h-36">|</span>
          <van-popover get-container="#quick" v-model="showPopover" :actions="actions" @select="onSelect" placement="bottom-end"
            theme="dark" :offset="[20, 20]">
          <van-popover
            get-container="#quick"
            v-model="showPopover"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
            theme="dark"
            :offset="[20, 20]"
          >
            <template #reference>
              <img @click="showPopover = !showPopover" class="relative bottom-4 w-24 h-6 list-img"
                :src="require('@/assets/image/otc/wantBuyHead/Group2.png')" alt="" />
              <span @click="showPopover = !showPopover">
                <img
                  class="relative bottom-4 w-24 h-6 list-img"
                  :src="require('@/assets/image/otc/wantBuyHead/Group2.png')"
                  alt=""
                />
              </span>
            </template>
          </van-popover>
        </template>
      </div>
    </div>
<!--    <buy :loading="loading" :symbol="symbolList" @change="onChange" @change-direction="handleDirection"-->
    <buy :loading="loading" :symbol="['USDT']" @change="onChange" @change-direction="handleDirection"
      @confirm="selectConfirm">
      <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
        v-model="isLoading" @refresh="onRefresh">
    <!--    <buy :loading="loading" :symbol="symbolList" @change="onChange" @change-direction="handleDirection"-->
    <buy
      :loading="loading"
      :symbol="['USDT']"
      @change="onChange"
      @change-direction="handleDirection"
      @confirm="selectConfirm"
    >
      <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" :immediate-check="false" :finished="finished" :finished-text="$t('没有更多了')"
            @load="onLoad">
            <div class="flex flex-col ml-32  mr-32" v-for="(item, index) in list" :key="'buy' + index">
          <van-list
            v-model="loading"
            :immediate-check="false"
            :finished="finished"
            :finished-text="$t('没有更多了')"
            @load="onLoad"
          >
            <div
              class="flex flex-col ml-32 mr-32"
              v-for="(item, index) in list"
              :key="'buy' + index"
            >
              <div class="flex">
                <div class="flex-1 textColor">
                  <div class="flex items-center">
                    <img class="w-32 h-32 mr-10" @click="handleGoUserHome(item)" :src="item.head_img" alt="">
                    <div class="font-400 font-26 mr-10">{{ item.nick_name }}</div>
                    <img class="w-22 h-22" :src="require('@/assets/image/otc/buy/star.png')" alt="">
                    <span @click="handleGoUserHome(item)">
                      <img
                        class="w-32 h-32 mr-10"
                        :src="item.head_img"
                        alt=""
                      />
                    </span>

                    <div class="font-400 font-26 mr-10">
                      {{ item.nick_name }}
                    </div>
                    <img
                      class="w-22 h-22"
                      :src="require('@/assets/image/otc/buy/star.png')"
                      alt=""
                    />
                  </div>
                  <div class="font-22 text-grey mt-31">{{ $t('单价') }}</div>
                  <div class="font-22 text-grey mt-31">{{ $t("单价") }}</div>
                  <div class="mt-10">
                    <span class="font-22 mr-10">{{ item.currency }}</span>
                    <span class="font-40">{{ (item.symbol_value / 1).toFixed(2) }}</span>
                    <span class="font-40">{{
                      (item.symbol_value / 1).toFixed(2)
                    }}</span>
                  </div>
                  <div class="mt-26">
                    <span class="font-22 text-grey mr-10">{{ $t('数量') }}</span>
                    <span>{{ item.coin_amount && (item.coin_amount / 1).toFixed(item.symbol.toUpperCase() === 'USDT' ? 2 : 4) }}</span>
                    <span class="font-22 text-grey mr-10">{{
                      $t("数量")
                    }}</span>
                    <span>{{
                      item.coin_amount &&
                      (item.coin_amount / 1).toFixed(
                        item.symbol.toUpperCase() === "USDT" ? 2 : 4
                      )
                    }}</span>
                  </div>
                  <div class="mt-13">
                    <span class="font-22 text-grey mr-10">{{ $t('限额') }}</span>
                    <span class="font-22 ">{{ currencySymbol }} {{ (item.investment_min / 1).toFixed(2) }} - {{ currencySymbol }} {{ (item.investment_max / 1).toFixed(2) }}</span>
                    <span class="font-22 text-grey mr-10">{{
                      $t("限额")
                    }}</span>
                    <span class="font-22"
                      >{{ currencySymbol }}
                      {{ (item.investment_min / 1).toFixed(2) }} -
                      {{ currencySymbol }}
                      {{ (item.investment_max / 1).toFixed(2) }}</span
                    >
                  </div>
                  <div class="flex mt-36">
                    <section v-for="(_item, _index) in (item.pay_type_name.split(','))" :key="_index" class="flex">
                      <div class="w-5 h-20 col  mr-9">|</div>
                    <section
                      v-for="(_item, _index) in item.pay_type_name.split(',')"
                      :key="_index"
                      class="flex"
                    >
                      <div class="w-5 h-20 col mr-9">|</div>
                      <div class="mr-19">{{ _item }}</div>
                    </section>
                    <!-- <div class="w-5 h-20 cl mr-9">|</div>
@@ -77,20 +170,40 @@
                  </div>
                </div>
                <div class="flex flex-col justify-between items-end">
                  <div class="text-grey flex font-24 ">
                  <div class="text-grey flex font-24">
                    <div class="flex items-center">
                      <span>{{ $t('成交量') }} {{ item.thirty_days_order }}</span>
                      <span class="w-1 h-16 mx-8" style="background: #EAEBEE"></span>
                      <span
                        >{{ $t("成交量") }} {{ item.thirty_days_order }}</span
                      >
                      <span
                        class="w-1 h-16 mx-8"
                        style="background: #eaebee"
                      ></span>
                      <span>{{ item.thirty_days_order_ratio }}%</span>
                    </div>
                  </div>
                  <div class="w-250 h-54 font-24 greyBg lh-54 text-center textColor px-10"
                    v-if="item.direction === 'sell'&&!methodAvaiable(item.pay_type_name, payMethods)">{{ $t('不满足广告方要求') }}</div>
                  <div v-if="item.direction === 'sell'" @click="trade('sell', item)"
                    class="w-160 h-58 font-29 text-white rounded-lg bg-red text-center lh-58">{{ $t('出售') }}
                  <div
                    class="w-250 h-54 font-24 greyBg lh-54 text-center textColor px-10"
                    v-if="
                      item.direction === 'sell' &&
                      !methodAvaiable(item.pay_type_name, payMethods)
                    "
                  >
                    {{ $t("不满足广告方要求") }}
                  </div>
                  <div v-if="item.direction === 'buy'" @click="trade('buy', item)"
                    class="w-160 h-58 font-29 text-white rounded-lg bg-green text-center lh-58">{{ $t('购买') }}
                  <div
                    v-if="item.direction === 'sell'"
                    @click="trade('sell', item)"
                    class="w-160 h-58 font-29 text-white rounded-lg bg-red text-center lh-58"
                  >
                    {{ $t("出售") }}
                  </div>
                  <div
                    v-if="item.direction === 'buy'"
                    @click="trade('buy', item)"
                    class="w-160 h-58 font-29 text-white rounded-lg bg-green text-center lh-58"
                  >
                    {{ $t("购买") }}
                  </div>
                </div>
              </div>
@@ -100,24 +213,30 @@
            </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>
            <van-empty class="custom-image" :image="require('@/assets/image/otc/nodatas.png')"
              :description="$t('暂无广告')">
            <van-empty
              class="custom-image"
              :image="require('@/assets/image/otc/nodatas.png')"
              :description="$t('暂无广告')"
            >
            </van-empty>
          </div>

        </template>
      </van-pull-refresh>
    </buy>
    <van-dialog v-model="showJie" :showConfirmButton="false">
      <div class="dia-main">
        <p class="dia-change">{{$t('切换到接单模式')}}</p>
        <p class="dia-text">{{$t('接单模式适用于有发布广告交易需求的用户。')}}</p>
        <p class="dia-change">{{ $t("切换到接单模式") }}</p>
        <p class="dia-text">
          {{ $t("接单模式适用于有发布广告交易需求的用户。") }}
        </p>
        <div class="dia-btn">
          <div @click="showJie = false">{{$t('取消')}}</div>
          <div @click="showJie = false">{{ $t("取消") }}</div>
          <div style="background: #1d91ff; color: #ffffff" @click="linkToC2C">
            {{$t('确认')}}
            {{ $t("确认") }}
          </div>
        </div>
      </div>
@@ -126,15 +245,13 @@
</template>

<script>
import {
  SET_ORDER_MODE
} from "@/store/const.store";
import { Icon, Popup, Popover, Dialog, List, PullRefresh, Empty } from 'vant'
import listLoadMixins from '@/utils/list-load-mixins'
import Buy from '@/page/placeAnOrder/components/buy/buy'
import { SET_ORDER_MODE } from "@/store/const.store";
import { Icon, Popup, Popover, Dialog, List, PullRefresh, Empty } from "vant";
import listLoadMixins from "@/utils/list-load-mixins";
import Buy from "@/page/placeAnOrder/components/buy/buy";
import otcApi from "@/API/otc";
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { Toast, Notify } from 'vant'
import { mapActions, mapGetters, mapMutations } from "vuex";
import { Toast, Notify } from "vant";
// import payment from "@/store/modules/payment";

export default {
@@ -151,17 +268,17 @@
  // },
  beforeRouteLeave(to, from, next) {
    // 保存离开页面时的列表的位置
    const position = document.querySelector('.roll-section').scrollTop
    window.sessionStorage.setItem('position', JSON.stringify(position))
    next()
    const position = document.querySelector(".roll-section").scrollTop;
    window.sessionStorage.setItem("position", JSON.stringify(position));
    next();
  },
  props: {
    showDot: {
      type: Boolean,
      default: true
    }
      default: true,
    },
  },
  name: 'wantBuy',
  name: "wantBuy",
  mixins: [listLoadMixins],
  components: {
    [Icon.name]: Icon,
@@ -174,37 +291,42 @@
    Buy,
  },
  computed: {
    ...mapGetters('c2c', ['symbolList', 'exchangeCurrency', 'symbol','currencySymbol']),
    ...mapGetters('home', ['currency'])
    ...mapGetters("c2c", [
      "symbolList",
      "exchangeCurrency",
      "symbol",
      "currencySymbol",
    ]),
    ...mapGetters("home", ["currency"]),
  },
  async created() {
    console.log('created')
    await this.SET_SYMBOL_LIST()
    await this.SET_PAY_METHODS({ language: this.$i18n.locale })
    console.log("created");
    await this.SET_SYMBOL_LIST();
    await this.SET_PAY_METHODS({ language: this.$i18n.locale });
    if (!this.exchangeCurrency) {
      console.log(this.currency.currency);
      this.SET_CURRENCY(this.currency.currency)
      this.SET_CURRENCY(this.currency.currency);
    }

    if (!this.currencySymbol) {
      this.SET_CURRENCY_SYMBOL(this.currency.currency_symbol)
      this.SET_CURRENCY_SYMBOL(this.currency.currency_symbol);
    }

    otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then(res => {
      res.data.map(item => {
        this.payMethods.push(item.methodName)
      })
    })
    otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then((res) => {
      res.data.map((item) => {
        this.payMethods.push(item.methodName);
      });
    });
    this.params = {
      page_no: this.page_no, // 页码
      direction: this.$store.state.c2c.direction, // 买 or 卖
      currency: this.exchangeCurrency, // 法币
      symbol: this.symbol, // 配置的加密货币
      amount: '', // 兑换金额
      method_type: '', // 支付方式
      language: this.$i18n.locale
    }
    this.get()
      amount: "", // 兑换金额
      method_type: "", // 支付方式
      language: this.$i18n.locale,
    };
    this.get();
  },
  data() {
    return {
@@ -213,15 +335,15 @@
      showPopover: false,
      page_no: 1,
      list: [],
      direction: 'buy', //
      direction: "buy", //
      params: {},
      loading: false,
      payMethods: [],
      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帮助中心'),
@@ -238,113 +360,117 @@
        //   icon: require('@/assets/image/otc/buy/order_icon.png'),
        // },
      ],
    }
    };
  },
  methods: {
    ...mapActions('c2c', ['SET_SYMBOL_LIST', 'SET_PAY_METHODS']),
    ...mapMutations('c2c', ['SET_CURRENCY','SET_CURRENCY_SYMBOL']),
    onChange(params) { // 买卖变化
      this.params = Object.assign(this.params, params)
      this.list = []
      this.get()
    ...mapActions("c2c", ["SET_SYMBOL_LIST", "SET_PAY_METHODS"]),
    ...mapMutations("c2c", ["SET_CURRENCY", "SET_CURRENCY_SYMBOL"]),
    onChange(params) {
      // 买卖变化
      this.params = Object.assign(this.params, params);
      this.list = [];
      this.get();
    },
    methodAvaiable(payStr, arr) {
      console.log(payStr, arr)
      let exist = false
      console.log(payStr, arr);
      let exist = false;
      for (let i = 0; i < arr.length; i++) {
        if (payStr.indexOf(arr[i]) > -1) {
          exist = true
          break
          exist = true;
          break;
        }
      }
      return exist
      return exist;
    },
    get() {
      Toast.loading()
      otcApi.ctcAdvertList(this.params).then(res => {
        Toast.clear()
        this.handleData(res.data)
      })
      Toast.loading();
      otcApi.ctcAdvertList(this.params).then((res) => {
        Toast.clear();
        this.handleData(res.data);
      });
    },
    linkToC2C() {
      // if (this.$store.state.user.userInfo.c2c_user_type === 0) { // 普通用户
      //   Toast('你不是平台认证商家')
      //   return
      // }
      this.$router.push('/c2c/receivingBuy')
      this.$router.push("/c2c/receivingBuy");
      this.$store.commit(`c2c/${SET_ORDER_MODE}`, {
        state: true,
      })
      });
    },
    showPopup() {
      this.show = true
      this.show = true;
    },
    onSelect(action) {
      if (action.text === '接单模式') {
        this.showJie = true
        return
      if (action.text === "接单模式") {
        this.showJie = true;
        return;
      }
      this.$router.push({
        path: action.path,
      })
      });
    },
    handleDirection(direction) {
      console.log(direction);
      this.direction = direction;
      this.params.direction = this.direction;
      // 发送请求
      this.get()
      this.get();
    },
    handleGoUserHome(item) {
      console.log('去买卖用户首页', item)
      console.log("去买卖用户首页", item);
      this.$router.push({
        path: '/advertiserDetail',
        path: "/advertiserDetail",
        query: {
          uid: item.c2c_user_id
        }
      })
          uid: item.c2c_user_id,
        },
      });
    },
    trade(type, data) {
      // 支付方式是否满足
      if (type=='sell'&&!this.methodAvaiable(data.pay_type_name, this.payMethods)) {
        console.log(data.pay_type_name)
        console.log(this.payMethods)
          this.$toast(this.$t('请添加相应的收款方式'))
          setTimeout(() => {
            this.$router.push('/paymentMethod')
          }, 500);
         //Notify({ type: 'danger', message: '不满足广告方要求' })
        return
      if (
        type == "sell" &&
        !this.methodAvaiable(data.pay_type_name, this.payMethods)
      ) {
        console.log(data.pay_type_name);
        console.log(this.payMethods);
        this.$toast(this.$t("请添加相应的收款方式"));
        setTimeout(() => {
          this.$router.push("/paymentMethod");
        }, 500);
        //Notify({ type: 'danger', message: '不满足广告方要求' })
        return;
      }
      //
      if (data && data.isRemoved) {
        this.showRemoved = true;
        return;
      }
      this.$store.commit('c2c/SET_ADV_ID', data.id) // 保存广告id
      this.$store.commit("c2c/SET_ADV_ID", data.id); // 保存广告id
      this.$router.push({
        name: 'c2cTrade'
        name: "c2cTrade",
        // query: {
        //   type,
        //   id: data.id
        // }
      })
      });
    },
    selectConfirm(params) {
      this.params = Object.assign(this.params,params)
      this.list = []
      this.params = Object.assign(this.params, params);
      this.list = [];
      this.get();
    },
    goback(){
      let frompath = this.$route.query.frompath
      if (frompath){
        this.$router.push(frompath)
      }else{
        this.$router.push('/home')
    goback() {
      let frompath = this.$route.query.frompath;
      if (frompath) {
        this.$router.push(frompath);
      } else {
        this.$router.push("/home");
      }
    }
    },
  },
}
};
</script>

<style lang="scss" scoped>