xinkeaboard/xinkeaboard-web/pages/member/index/home.vue

<template>
  <div class="sld_collect_index wd">
    <!-- 会员基本信息 -->
    <div class="user_info_top">
      <div class="infoCon clearfix">
        <div class="avatar">
          <img :src="memberInfoFromData.info.memberAvatar" class="head_img" />
        </div>
        <div class="info">
            <p>Name:  {{ memberInfoFromData.info.memberNickName }} ({{ memberInfoFromData.info.memberName }})</p>
            <p>Email:  {{memberInfoFromData.info.memberEmail}}</p>
        </div>
      </div>
    </div>
    <!-- 会员订单信息 -->
    <div class="user_order clearfix">

      <div class="my_follow ">
        <!-- 我的询盘item -->
        <div class="my_follow_item cartItem">
          <h4 class="user_title">
            <i class="iconfont"><img style="width:20px;position:relative;top:5px" src="/email.svg" /></i>{{ L["我的询盘"] }} ({{
              cartLen
            }})<router-link :to="'/member/enquiry/list'"
              >{{ L["查看更多"] }}></router-link
            >
          </h4>
          <ul class="clearfix">
            <template
              v-for="(item, storeIndex) in cartData.data"
              :key="storeIndex">
                <li class="list_item" @click="showDetail(item)">
                  <p>
                    {{storeIndex+1}}
                    <i class="devider"></i>
                    <span><b>{{L["发送时间"]}}:</b>{{item.createTime}}</span>
                    <i class="devider"></i>
                    <span class="message"><b>{{L["内容"]}}:</b>{{item.message.length > 80 ? item.message.slice(0,80) + '...' : item.message}}</span>
                  </p>
                </li>

            </template>
            <li  class="list_item" v-if="cartLen > 5">...</li>
            <div class="no_footprint" v-show="!cartLen">{{L["暂无询盘"]}}~</div>
          </ul>
        </div>


        <!-- 收藏商品item -->
        <div class="my_follow_item goods">
          <h4 class="user_title">
            <i class="iconfont">&#xe67d;</i>{{ L["我的收藏"] }} ({{
              memberInfoFromData.info.followProductNum
            }})
            <router-link :to="'/member/collect'" target="_blank"
              >{{ L["查看更多"] }}></router-link
            >
          </h4>
          <ul class="clearfix">
            <li
              class="list_item"
              v-for="({ productImage, productId,goodsName, state }, index) in collectGoods.goods"
              :key="index"
            >
              <router-link
                  target="_blank"
                  :to="'/goods/detail/'+ calcProductName(goodsName) +'_'+ productId"
              >
                <img :src="productImage" alt="" />
                <div class="mask" v-if="[5, 6].includes(state)">
                  <div class="circle">{{  L['已下架']  }}</div>
                </div>
              </router-link>
            </li>
            <div class="no_footprint" v-show="!collectGoods.goods.length">
              {{L["暂无收藏商品"]}}~
            </div>
          </ul>
        </div>


        <!-- 关注店铺item -->
        <div class="my_follow_item store">
          <h4 class="user_title">
            <i class="iconfont">&#xe679;</i>{{ L["店铺收藏"] }} ({{
              memberInfoFromData.info.followStoreNum
            }})
            <router-link :to="'/member/collect?type=store'" target="_blank"
              >{{ L["查看更多"] }}></router-link
            >
          </h4>
          <ul class="clearfix">
            <li
              class="list_item"
              v-for="({ storeLogo, storeId, storeName }, index) in collectStore.store"
              :key="index"
            >
              <router-link  :to="'/store/'+ calcProductName(storeName) +'_'+ storeId"  target="_blank">
                <img :src="storeLogo" :alt="storeName" />
              </router-link>
            </li>
            <div class="no_footprint" v-show="!collectStore.store.length">
              {{L["暂无关注店铺"]}}~
            </div>
          </ul>
        </div>

        <!-- 足迹item -->
        <div class="my_follow_item footprint">
          <h4 class="user_title">
            <i class="iconfont">&#xe67f;</i>{{ L["我的足迹"] }} ({{
              looklog.log.length
            }})
            <router-link :to="'/member/footprint'" target="_blank"
              >{{ L["查看更多"] }}></router-link
            >
          </h4>
          <ul class="clearfix">
            <li
              class="list_item"
              v-for="({ goodsImage, productId,goodsName, state }, index) in looklog.log"
              :key="index"
            >
              <router-link
                  target="_blank"
                  :to="'/goods/detail/'+ calcProductName(goodsName) +'_'+ productId"
              >
                <img :src="goodsImage" alt="" />
                 <div class="mask" v-if="[5, 6].includes(state)">
                  <div class="circle">{{  L['已下架']  }}</div>
                </div>
              </router-link>
            </li>
            <div class="no_footprint" v-show="!looklog.log.length">
              {{L["暂无足迹"]}}~
            </div>
          </ul>
        </div>
      </div>
    </div>
    <!-- 热销推荐 -->
    <div class="user_hot_goods clearfix">
      <h3>{{ L["热销推荐"] }}</h3>
      <ul class="clearfix">
        <li
          v-for="(
            { goodsImage, goodsName, goodsPrice, defaultProductId,goodsMoney }, index
          ) in hotRecom.goods"
          :key="index"
        >
            <router-link
                target="_blank"
                :to="'/goods/detail/'+ calcProductName(goodsName) +'_'+ defaultProductId"
            >

            <div class="img">
              <img class="lazy" :src="goodsImage" alt="" />
            </div>
            <p class="hot_goods_name">{{ goodsName }}</p>
            <p class="hot_goods_price">
              <em> {{goodsMoney}}</em>
            </p>
            </router-link>

        </li>
      </ul>
    </div>

    <el-dialog v-model="dialogVisible" title="Detail" width="30%" lock-sroll="false">
      <el-form label-position="left"  class="demo-table-expand">
                <el-form-item :label="L['姓名']+':'">
                  <span>{{ detailInfo.data.name}}</span>
                </el-form-item>
                <el-form-item :label="L['邮箱']+':'">
                  <span>{{ detailInfo.data.email}}</span>
                </el-form-item>
                <el-form-item :label="L['类型']+':'">
                    <template v-if="detailInfo.data.itemType == 'GOODS'">
                      <nuxt-link style="color:#00985e;text-decoration: underline;" :to="'/goods/detail/'+ calcProductName(detailInfo.data.itemName) +'_'+ detailInfo.data.itemId" target="_blank">{{detailInfo.data.itemName}}
                      </nuxt-link>
                    </template>
                    <template v-if="detailInfo.data.itemType == 'SHOP'">
                      <nuxt-link style="color:#00985e;text-decoration: underline;"  :to="'/store/'+ calcProductName(detailInfo.data.itemName) +'_'+ detailInfo.data.storeId" target="_blank">{{detailInfo.data.itemName}}
                      </nuxt-link>
                    </template>
                    <template v-if="detailInfo.data.itemType == 'MALL'">
                      <nuxt-link style="color:#00985e;text-decoration: underline;" :to="`/home/contact`" target="_blank">{{detailInfo.data.itemTypeStr}}
                      </nuxt-link>
                    </template>
                </el-form-item>
                <el-form-item :label="L['采购数量']+':'">
                  <template v-if="detailInfo.data.itemType == 'GOODS'">
                    {{detailInfo.data.quantity}}
                  </template>
                  <template v-if="detailInfo.data.itemType != 'GOODS'">
                    -
                  </template>
                </el-form-item>
                <el-form-item :label="L['电话']+':'">
                  <span>{{ detailInfo.data.phoneCode}}-{{detailInfo.data.phone}}</span>
                </el-form-item>
                <el-form-item :label="L['公司名称']+':'">
                  <span>{{ detailInfo.data.company }}</span>
                </el-form-item>
                <el-form-item :label="L['内容']+':'">
                  <span style="word-break: break-word;">{{ detailInfo.data.message }}</span>
                </el-form-item>
              </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance, ref } from "vue";
import { useRouter } from "vue-router";
import { ElDialog,ElForm,ElFormItem } from "element-plus";
import { getCurLanguage } from '@/composables/common.js';
definePageMeta({
  layout: "member",
  middleware: ["auth"],
});
// const L = lang_zn;
const L = getCurLanguage();
const router = useRouter();
const memberInfoFromData = reactive({ info: {} });
const looklog = reactive({ log: [] });
const looklogLen = ref(0);
const cartData = reactive({ data: [] });
const cartLen = ref(0);
const collectStore = reactive({ store: [] });
const collectGoods = reactive({ goods: [] });
const hotRecom = reactive({ goods: [] });
const order = reactive({ list: [] });
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false)
const detailInfo = reactive({data:{}})

//展示询盘详情
const showDetail = (item) => {
  dialogVisible.value = true
  detailInfo.data = item
}

const getInitInfo = () => {
  //获取会员信息数据
  get("v3/member/front/member/getInfo").then((res) => {
    if (res.state == 200) {
      memberInfoFromData.info = res.data;
    }
  });
};

const getLookLog = () => {
  //获取我的足迹数据
  get("v3/member/front/productLookLog/list").then((res) => {
    if (res.state == 200) {
      looklog.log = res.data.list[0]? res.data.list[0].productLookLogInfoList.slice(0, 12): [];
      looklogLen.value = res.data.list[0]
        ? res.data.list[0].productLookLogInfoList.length
        : 0;
    }
  });
};

const params = reactive({
  current: 1,
  pageSize: 5,
  type: "",
  keyword: "",
});

const getCartItem = () => {
  get("v3/member/front/enquiry/list",params).then((res) => {
    if (res.state == 200) {
      cartData.data = res.data.list ? res.data.list : [];
      cartLen.value = res.data.pagination.total ? res.data.pagination.total : 0;
    }
  });
};

const getCollectStore = () => {
  get("v3/member/front/followStore/list").then((res) => {
    if (res.state == 200) {
      collectStore.store = res.data.storeList;
    }
  });
};

const getCollectGoods = () => {
  get("v3/member/front/followProduct/list").then((res) => {
    if (res.state == 200) {
      collectGoods.goods = res.data.list;
    }
  });
};

const getHotReco = () => {
  //获取热门推荐数据
  let params = {
    queryType: "cart",
  };
  get("v3/goods/front/goods/recommendList", params).then((res) => {
    if (res.state == 200) {
      hotRecom.goods = res.data.list;
      hotRecom.goods.map(
        (item) => (item.goodsPrice = new Number(item.goodsPrice).toFixed(2))
      );
    }
  });
};

const getOrder = () => {
  //获取订单
  let params = {
    current: 1,
  };
  get("v3/business/front/orderInfo/list", params).then((res) => {
    if (res.state == 200) {
      order.list = res.data.list;
      order.list.forEach((item) => {
        item.totalMoney = new Number(item.totalMoney).toFixed(2);
        item.productList = [];
        item.orderProductListVOList.forEach((items) => {
          if (items.isGift != 1) {
            item.productList.push(items);
          }
        });
      });
    }
  });
};

const seeOrderDetail = (orderSn) => {
  //去往订单详情
  let newWin = router.resolve({
    path: "order/detail",
    query: {
      orderSn: orderSn,
    },
  });
  window.open(newWin.href, "_blank");
};



onMounted(() => {
  nextTick(() => {
    getInitInfo();
    getLookLog();
    getHotReco();
    getOrder();
    getCartItem();
    getCollectStore();
    getCollectGoods();
  });
});
</script>

<style lang="scss" scoped>
@import "@/assets/style/member/index.scss";
@import "@/assets/style/base.scss";

.user_order_empty {
  padding: 90px;
  font-size: 12px;
  /*font-family: Microsoft YaHei;*/
  font-weight: 400;

  p {
    margin-left: 12px;
    color: #666666;
  }
}

.no_footprint {
  height: 73px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  /*font-family: Microsoft YaHei;*/
  font-weight: 400;
  color: #666666;
}
</style>