123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/page/c2cUser/index.vue

@@ -1,68 +1,128 @@
<template>
  <div id="c2c_user" class="absolute left-0 top-0 bottom-160 w-full c2c_user">
    <div class="w-full h-full top">
      <order-nav  style="background: var(--theme-color)"/>
      <order-nav style="background: var(--theme-color)" />
      <div class="flex pl-32 pr-32 mt-20 overflow-auto">
        <div
            class="avatar w-70 h-70 flex items-center font-700 font-34 justify-center"
            @click="handleGoUserHome"
          class="avatar w-70 h-70 flex items-center font-700 font-34 justify-center"
          @click="handleGoUserHome"
        >
          <img class="w-full h-full rounded-full" :src="ctc_user.headImg" alt="">
          <img
            class="w-full h-full rounded-full"
            :src="ctc_user.headImg"
            alt=""
          />
        </div>
        <div class="ml-25 text-white">
          <div class="font-34">{{ ctc_user.nickName }}</div>
          <div class="mt-17 font-24">{{ctc_user.c2cUserType ? $t('认证用户') : $t('未认证用户')}}</div>
          <div class="mt-17 font-24">
            {{ ctc_user.c2cUserType ? $t("认证用户") : $t("未认证用户") }}
          </div>
          <div class="flex items-center mt-28 font-26">
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('邮箱')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.email_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
              <span class="mr-12">{{ $t("邮箱") }}</span>
              <img
                class="w-20 h-20 relative top-4"
                v-if="party.email_authority"
                src="~@/assets/image/c2c/gou.png"
                alt=""
              />
              <img
                class="w-20 h-20 relative top-4"
                v-else
                src="~@/assets/image/c2c/no.png"
                alt=""
              />
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('手机')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.phone_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
              <span class="mr-12">{{ $t("手机") }}</span>
              <img
                class="w-20 h-20 relative top-4"
                v-if="party.phone_authority"
                src="~@/assets/image/c2c/gou.png"
                alt=""
              />
              <img
                class="w-20 h-20 relative top-4"
                v-else
                src="~@/assets/image/c2c/no.png"
                alt=""
              />
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('身份')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.kyc_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
              <span class="mr-12">{{ $t("身份") }}</span>
              <img
                class="w-20 h-20 relative top-4"
                v-if="party.kyc_authority"
                src="~@/assets/image/c2c/gou.png"
                alt=""
              />
              <img
                class="w-20 h-20 relative top-4"
                v-else
                src="~@/assets/image/c2c/no.png"
                alt=""
              />
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('高级认证')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.kyc_highlevel_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
              <span class="mr-12">{{ $t("高级认证") }}</span>
              <img
                class="w-20 h-20 relative top-4"
                v-if="party.kyc_highlevel_authority"
                src="~@/assets/image/c2c/gou.png"
                alt=""
              />
              <img
                class="w-20 h-20 relative top-4"
                v-else
                src="~@/assets/image/c2c/no.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
        ref="content"
        class="content absolute left-0 bottom-0 w-full bg-white pt-40 box-border overflow-auto"
      ref="content"
      class="content absolute left-0 bottom-0 w-full bg-white pt-40 box-border overflow-auto"
    >
      <div class="pr-50 pl-50">
        <div class="flex" style="color: #868D9A">
        <div class="flex" style="color: #868d9a">
          <div class="flex-1">
            <h2 class="mb-18 font-700 font-40 text-black">{{ctc_user.thirtyDaysOrder}}</h2>
            <div class="font-28">{{$t('30日成单数')}}</div>
            <h2 class="mb-18 font-700 font-40 text-black">
              {{ ctc_user.thirtyDaysOrder }}
            </h2>
            <div class="font-28">{{ $t("30日成单数") }}</div>
          </div>
          <div class="flex-1">
            <h2 class="mb-18 font-700 font-40 text-black">{{ctc_user.thirtyDaysOrderRatio}}%</h2>
            <div class="font-28">{{$t('30日成单率')}}</div>
            <h2 class="mb-18 font-700 font-40 text-black">
              {{ ctc_user.thirtyDaysOrderRatio }}%
            </h2>
            <div class="font-28">{{ $t("30日成单率") }}</div>
          </div>
        </div>
        <div class="w-full mt-54">
          <van-cell-group class="w-full font-24 box-border">
            <van-cell class="mb-28" title="平均放行" :value="ctc_user.thirtyDaysPassAverageTime"/>
            <van-cell title="平均付款" :value="ctc_user.thirtyDaysPayAverageTime"/>
            <van-cell
              class="mb-28"
              title="平均放行"
              :value="ctc_user.thirtyDaysPassAverageTime"
            />
            <van-cell
              title="平均付款"
              :value="ctc_user.thirtyDaysPayAverageTime"
            />
          </van-cell-group>
        </div>
      </div>

      <div class="flex items-center justify-center mt-30 more pb-32 mb-48" @click="enterMore">
        <span class="font-25 mr-12">{{$t('更多数据')}}</span>
        <span><van-icon name="arrow" color="#868D9A"/></span>
      <div
        class="flex items-center justify-center mt-30 more pb-32 mb-48"
        @click="enterMore"
      >
        <span class="font-25 mr-12">{{ $t("更多数据") }}</span>
        <span><van-icon name="arrow" color="#868D9A" /></span>
      </div>

      <div class="font-28">
@@ -71,58 +131,68 @@
            :left-img="require('@/assets/image/c2c/group287.png')"
            title="收款方式"
            :value="payMethodNum || '--'"
            @cell-click="$router.push({
              path: '/paymentMethod',
              query: {
                ctc_user: JSON.stringify(ctc_user)
              }
            })"
            @cell-click="
              $router.push({
                path: '/paymentMethod',
                query: {
                  ctc_user: JSON.stringify(ctc_user),
                },
              })
            "
          />
          <user-cell
              class="mt-100"
              :left-img="require('@/assets/image/c2c/Subtract.png')"
              title="C2C帮助中心"
              @cell-click="$router.push({
                path: '/c2cHelpCenter'
              })"
            class="mt-100"
            :left-img="require('@/assets/image/c2c/Subtract.png')"
            title="C2C帮助中心"
            @cell-click="
              $router.push({
                path: '/c2cHelpCenter',
              })
            "
          />
          <user-cell
              class="mt-100"
              :left-img="require('@/assets/image/c2c/group288.png')"
              title="C2C通知设置"
              @cell-click="enterSettings"
            class="mt-100"
            :left-img="require('@/assets/image/c2c/group288.png')"
            title="C2C通知设置"
            @cell-click="enterSettings"
          />
          <!--是接单模式的情况下-->
          <template v-if="orderMode">
            <user-cell
                class="mt-100"
                :left-img="require('@/assets/image/c2c/Subtract-2.png')"
                title="成为认证广告方"
                @cell-click="$router.push({
                path: '/CertifiedAdvertiser'
              })"
              class="mt-100"
              :left-img="require('@/assets/image/c2c/Subtract-2.png')"
              title="成为认证广告方"
              @cell-click="
                $router.push({
                  path: '/CertifiedAdvertiser',
                })
              "
            />
            <user-cell
                class="mt-100"
                :left-img="require('@/assets/image/c2c/Subtract-3.png')"
                title="添加C2C到桌面"
              class="mt-100"
              :left-img="require('@/assets/image/c2c/Subtract-3.png')"
              title="添加C2C到桌面"
            />
          </template>
        </van-cell-group>
      </div>
      <div class="mt-40 px-34 mb-74" v-if="orderMode">
        <van-button class="w-full rounded-lg" @click="switchPlaceAnOrder" type="info" color="#1D91FF">切换到“下单模式”</van-button>
        <van-button
          class="w-full rounded-lg"
          @click="switchPlaceAnOrder"
          type="info"
          color="#1D91FF"
          >切换到“下单模式”</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from "vuex";
import {SET_ORDER_MODE} from "@/store/const.store";
import {Cell, CellGroup, Icon,Button} from 'vant';
import { mapState } from "vuex";
import { SET_ORDER_MODE } from "@/store/const.store";
import { Cell, CellGroup, Icon, Button } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import UserCell from "@/page/c2cUser/components/UserCell";
import otcApi from "@/API/otc.js";
@@ -132,90 +202,97 @@
  data() {
    return {
      email: "cn*****.com",
      ctc_user:{},
      party:{},
      payMethodNum: '',
    }
      ctc_user: {},
      party: {},
      payMethodNum: "",
    };
  },
  created() {
    this.ctcUserGetUserCenter()
    this.ctcUserGetUserCenter();
  },
  methods: {
    ctcUserGetUserCenter(){ // 获取页面信息
      otcApi.ctcUserGetUserCenter({ language: this.$i18n.locale }).then(res=>{
        const  {c2c_user, party } = res.data || {}
        this.ctc_user = c2c_user // 用户信息
        this.party = party // 验证信息
        otcApi.ctcPaymentMethodType({ party_id: this.ctc_user.c2cUserPartyId, language: this.$i18n.locale }).then(res => {
          console.log(res)
          this.payMethodNum = Object.keys(res.data).length
        })
      })
    ctcUserGetUserCenter() {
      // 获取页面信息
      otcApi
        .ctcUserGetUserCenter({ language: this.$i18n.locale })
        .then((res) => {
          const { c2c_user, party } = res.data || {};
          this.ctc_user = c2c_user; // 用户信息
          this.party = party; // 验证信息
          otcApi
            .ctcPaymentMethodType({
              party_id: this.ctc_user.c2cUserPartyId,
              language: this.$i18n.locale,
            })
            .then((res) => {
              console.log(res);
              this.payMethodNum = Object.keys(res.data).length;
            });
        });
    },
    enterMore() {
      let ctc_user = JSON.stringify(this.ctc_user)
      this.$router.push({ path: '/c2cUser/c2cUserMore', query: { ctc_user }})
      let ctc_user = JSON.stringify(this.ctc_user);
      this.$router.push({ path: "/c2cUser/c2cUserMore", query: { ctc_user } });
    },
    // 进入通知设置
    enterSettings() {
      let ctc_user = JSON.stringify(this.ctc_user)
      this.$router.push({ path: '/c2cNoticeSettings', query: { ctc_user } })
      let ctc_user = JSON.stringify(this.ctc_user);
      this.$router.push({ path: "/c2cNoticeSettings", query: { ctc_user } });
    },
    switchPlaceAnOrder() {
      this.$router.replace({
        path:'/wantBuy'
      })
        path: "/wantBuy",
      });

      this.$store.commit(`c2c/${SET_ORDER_MODE}`, {
        state: false,
      })
      });
    },
    handleGoUserHome() {
      console.log(this.ctc_user.id)
      console.log(this.ctc_user.id);
      this.$router.push({
        path: '/advertiserDetail',
        path: "/advertiserDetail",
        query: {
          uid: this.ctc_user.id
        }
      })
          uid: this.ctc_user.id,
        },
      });
    },
  },
  computed: {
    ...mapState('c2c', ['orderMode'])
    ...mapState("c2c", ["orderMode"]),
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Button.name]:Button,
    [Button.name]: Button,
    OrderNav,
    UserCell,
  }
}
  },
};
</script>

<style lang="scss" scoped>
.c2c_user{
.c2c_user {
  width: 100%;
  box-sizing: border-box;
  ::v-deep .van-nav-bar {
      background: #1D91FF;
    background: #1d91ff;
    ::after {
      content: none;
    }
    .van-icon {
        color: #fff;
      }
      color: #fff;
    }
  }
}
.top {
  height: 370px;
  background: #1D91FF;

  background: #1d91ff;

  .avatar {
    border-radius: 50%;
    background: #21262F;
    background: #21262f;
    color: #fff;
  }
}
@@ -227,7 +304,7 @@
  .more {
    position: relative;
    border-bottom: 1px solid #484756;
    color: #868D9A;
    color: #868d9a;

    .van-icon {
      font-size: 20px;