xinkeaboard/xinkeaboard-web/pages/member/footprint.vue

<template>
  <div class="sld_look_log clearfix">
    <!-- 路径导航 -->
    <div class="log_banner clearfix">
      <MemberTitle :memberTitle="L['我的足迹']"></MemberTitle>
      <button class="log_option" @click=" centerDialogVisible = true" v-show="looklog.log.length">
        {{L['清空']}}
      </button>
    </div>

    <!-- 足迹 -->
    <div class="sld_footprint">
      <div class="block">
        <el-timeline>
          <el-timeline-item
            :timestamp="time"
            placement="top"
            color="#00985e"
            v-for="({ productLookLogInfoList, time }, index) in looklog.log"
            :key="index"
          >
            <ul class="sld_foot_goods clearfix">
              <li
                v-for="(
                  { goodsImage, productId, goodsName, state },
                  index
                ) in productLookLogInfoList"
                :key="index"
              >
                <div class="img">
                  <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>
                </div>
                <p class="sld_foot_price">
                  <a style="cursor: pointer">
                    <div class="fr-wrap">
                      <div class="fr" @click="follow(productId, false)">{{
                        goodsName
                      }}</div>
                    </div>
                  </a>
                </p>
              </li>
            </ul>
          </el-timeline-item>
        </el-timeline>
      </div>
      <SldCommonEmpty
        v-show="!looklog.log.length"
        totalWidth="1000"
        :tip="L['暂无足迹']"
        totalHeight="680"
        paddingTop="250"
      />
      <!-- 分页 -->
      <div class="flex_row_center_center sld_pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="looklog.page.current"
          :page-size="looklog.page.pageSize"
          layout="prev, pager, next, jumper"
          :total="looklog.page.total"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div>

      <el-dialog v-model="centerDialogVisible"  width="30%" center>
        <p style="text-align: center;">  {{ L["确定要清空吗?"]}}</p>
        <template #footer>
          <span class="dialog-footer">
            <el-button  type="primary" @click="logClear">{{ L["确定"]}}</el-button>
            <el-button @click="centerDialogVisible = false">
              {{ L["取消"]}}
            </el-button>
          </span>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script setup>
import { ElTimeline, ElTimelineItem, ElMessage,ElMessageBox,ElPagination,ElDialog,ElButton } from "element-plus";
import { getCurrentInstance, onMounted, reactive } from "vue";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
// const L = lang_zn;
const L = getCurLanguage();
definePageMeta({
  layout: "member",
  middleware: ["auth"],
});
const centerDialogVisible = ref(false)

const { proxy } = getCurrentInstance();
const looklog = reactive({ log: [], page: {} });
const page = reactive({
    current: 1,
    pageSize: 5,
});
const getInitData = () => {
  get("v3/member/front/productLookLog/list", page).then((res) => {
    if (res.state == 200) {
      looklog.log = res.data.list;
      looklog.page = res.data.pagination;
    }
  });
};

const follow = (productId, logic) => {
  //关注商品
  let params = {
    isCollect: logic,
    productIds: productId,
  };
  post("v3/member/front/followProduct/edit", params)
    .then((res) => {
      if (res.state == 200) {
        getInitData();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};

const handlePrevCilickChange = (e) => {
  //分页前一页操作
  page.current = e;
  getInitData();
};
const handleNextCilickChange = (e) => {
  //分页前一页操作
  page.current = e;
  getInitData();
};
const handleCurrentChange = (e) => {
  //分页点击操作
  page.current = e;
  getInitData();
};

const logClear = () => {
  get("v3/member/front/productLookLog/empty").then((res) => {
      if (res.state == 200) {
        getInitData();
        ElMessage(res.msg);
      }
    });
};


onMounted(() => {
  getInitData();
});
</script>
<style lang="scss">
.confirm-button-class {
  color: #fff;
  background-color: #e2231a !important;
  border-color: #e2231a !important;
}

@import "@/assets/style/member/footprint.scss";
@import "@/assets/style/base.scss";
</style>