go-dy/src/store/formData.ts

let firstLevelTemp = {
  id: 1,
  nickname: `测试昵称1`,
  isAuthor: true, //是否作者
  isLike: true, //是否点赞
  likeCount: 3, //点赞个数
  isDisLike: false, //是否不喜欢
  disLikeCount: 0, //不喜欢个数
  firstImgUrl: "",
  firstImgList: [],
  area: "广东", //省市
  content: "6666666666666",
  recoveryTime: "12-7", //回复时间
  avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  recoveryList: [],
  avatarList: [],
}; //一级评论模板

let secondLevelTemp = {
  id: 11,
  respondent: "测试二级", //回复人
  isRespondentAuthor: true, //回复人是不是作者
  recipient: "测试2", //被回复人
  isRecipientAuthor: false, //被回复人是不是作者
  isAuthor: true, //是否作者
  isLike: true, //是否点赞
  likeCount: 3, //点赞个数
  isDisLike: false, //是否不喜欢
  disLikeCount: 0, //不喜欢个
  area: "广东", //省市
  content: "77777777777",
  recoveryTime: "12-7", //回复时间
  avatarList: [],
  secondImgUrl: "",
  secondImgList: [],
  avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
}; //二级评论模板

const useFormDataStore = defineStore("formDataStore", {
  state: () => {
    return {
      firstLevelTemp,
      secondLevelTemp,
      firstLevelTempId: 1, //一级评论id
      secondLevelTempId: 1, //二级评论id
      headerType: 1, //1是显示地区 2是显示大家都在搜
      everyoneSearch: {
        title: "邓紫棋神仙现场",
      },
      regionalInfo: {
        currentArea: "测试地区",
        viewCount: 300, //多少人看过
        viewUnit: "万", //单位
      },
      total: 666, //多少条评论
      data: [],
    };
  },
  persist: {
    enabled: true,
    strategies: [{ key: "form_data_store", storage: localStorage }],
  },
  actions: {
    // 顶部信息更改
    changeHeaderType(params) {
      console.log(params);
      this.headerType = params;
    },
    // 添加一级评论模板
    addFirstLevelTemp() {
      this.data.push({ ...this.firstLevelTemp, id: this.firstLevelTempId });
      this.firstLevelTempId++;
    },
    // 添加二级评论模板
    addSecondLevel(params: any) {
      console.log("item", params);
      this.data = this.data.map((item: any) => {
        if (item.id === params.id) {
          console.log(item.recoveryList);
          let arr = [{ ...this.secondLevelTemp, id: this.secondLevelTempId }];
          item.recoveryList = item.recoveryList.concat(arr);

          this.secondLevelTempId++;
        }
        return item;
      });
    },
    // 移除一级评论模板
    removeFirstLevelTemp(params) {
      console.log("移除一级评论模板", params);
      this.data = this.data.filter((item) => item.id !== params.id);
    },
    // 移除二级评论模板
    removeSecondLevel(father, children) {
      this.data = this.data.map((item) => {
        let recoveryList = item.recoveryList.filter(
          (ctem) => ctem.id !== children.id
        );
        return {
          ...item,
          recoveryList,
        };
      });
    },
    // 改变一级是否点赞
    changeFirstLevelLike(params) {
      params.isLike = !params.isLike;
    },

    // 改变二级是否点赞
    changeSecondLevelLike(params) {
      params.isLike = !params.isLike;
    },
    // 改变一级头像
    changeFirstAvater(params, imgUrl) {
      this.data = this.data.map((item) => {
        console.log("item", item);
        return {
          ...item,
          avatar: item.id === params.id ? imgUrl : item.avatar,
        };
      });
    },
    // 改变二级头像
    changeSecondAvater(first, second, imgUrl) {
      this.data = this.data.map((item) => {
        let secondData = item.recoveryList.map((ctem) => {
          return {
            ...ctem,
            avatar: ctem.id === second.id ? imgUrl : ctem.avatar,
          };
        });
        return {
          ...item,
          recoveryList: secondData,
        };
      });
    },
    // 改变一级评论图片
    changeFirstImg(params, imgUrl) {
      this.data = this.data.map((item) => {
        console.log("item", item);
        return {
          ...item,
          firstImgUrl: item.id === params.id ? imgUrl : item.firstImgUrl,
        };
      });
    },
    // 改变二级评论图片
    changeSecondImg(first, second, imgUrl) {
      this.data = this.data.map((item) => {
        let secondData = item.recoveryList.map((ctem) => {
          return {
            ...ctem,
            secondImgUrl: ctem.id === second.id ? imgUrl : ctem.secondImgUrl,
          };
        });
        return {
          ...item,
          recoveryList: secondData,
        };
      });
    },
  },
});
export default useFormDataStore;