提交落地页

prod.config.js

@@ -139,7 +139,7 @@ const plugins = isProd
   ? [
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       new webpack.HashedModuleIdsPlugin(),
-      new UglifyJsPlugin(codeUglifyConfig),
+      //new UglifyJsPlugin(codeUglifyConfig),
     ]
   : [];
 

src/api/index.ts

@@ -525,10 +525,25 @@ export const landingDelete = (data: {id: string | number}) => {
 };
 
 /**
+ * 落地页 创建落地页
+ * @returns
+ */
+ export const landingAdd = (data: any) => {
+  return axios.post("/landingPage/add", data);
+ }
+
+ /**
+ * 落地页 编辑
+ * @returns
+ */
+export const landingEdit = (data: any) => {
+  return axios.post("/landingPage/edit", data);
+ }
+/**
  * 落地页 提交审核
  * @returns
  */
- export const landingSubmit = (data: {id: string | number}) => {
+export const landingSubmit = (data: {id: string | number}) => {
   return axios("/landingPage/submit", {params: data});
  }
 
@@ -549,6 +564,14 @@ export const getLandingDomains = (): AxiosPromise<IList<IDomainItem>> => {
 };
 
 /**
+ * 获取落地页详情
+ * @returns
+ */
+export const getLandingInfo = (id:string): AxiosPromise<any> => {
+  return axios("/landingPage/info",{params: {id}});
+};
+
+/**
  * 获取落地页推广书籍列表
  * @param official_name
  * @param book_name

src/components/image-upload/index.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from "vue";
+import { defineComponent, reactive, toRefs,watch } from "vue";
 import { message } from "ant-design-vue";
 import { LoadingOutlined, PlusOutlined } from "@ant-design/icons-vue";
 
@@ -46,11 +46,17 @@ const ImageUpload = defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
+    console.log(props.value)
     const state = reactive({
       uploading: false,
       cover: props.value ?? ""
     });
-
+    watch(
+    () => props.value,
+    () => {
+     state.cover =  props.value
+    }
+  );
     const onFileChange = async (file: { file: File }) => {
       try {
         state.uploading = true;

src/views/put/landing/add.vue

@@ -12,6 +12,7 @@
           :is="stepComponent[stepCurrent]"
           :content="forms"
           @next="onTapNext"
+          @prev="onTapPrev"
         />
       </div>
     </div>
@@ -19,49 +20,90 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, createVNode, ref } from "vue";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  createVNode,
+  ref,
+  onMounted,
+} from "vue";
 import { onBeforeRouteLeave } from "vue-router";
 import { Modal } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-
+import { landingAdd, getLandingInfo, landingEdit } from "@/api";
 import StepOne from "./stepComp/step-one.vue";
 import StepTwo from "./stepComp/step-two.vue";
-
+import useApp from "@/hooks/useApp";
+import { message } from "ant-design-vue";
 const LandingAddPage = defineComponent({
   name: "LandingAddPage",
   components: {
     StepOne,
-    StepTwo
+    StepTwo,
   },
   setup() {
     const state = reactive({
-      stepCurrent: 1,
+      stepCurrent: 0,
       stepComponent: ["step-one", "step-two"],
-      forms: ref<Record<string, any>>({})
+      isOver: false,
+      forms: ref<Record<string, any>>({}),
     });
-
+    const { route, router } = useApp();
     onBeforeRouteLeave((_, __, next) => {
-      Modal.confirm({
-        title: "确认离开当前页面吗?",
-        content: "未保存的内容将会丢失",
-        icon: createVNode(ExclamationCircleOutlined),
-        onOk: () => {
-          next();
-        }
-      });
+      if (!state.isOver) {
+        Modal.confirm({
+          title: "确认离开当前页面吗?",
+          content: "未保存的内容将会丢失",
+          icon: createVNode(ExclamationCircleOutlined),
+          onOk: () => {
+            next();
+          },
+        });
+      } else {
+        next();
+      }
     });
 
+    if (route.query && route.query.id) {
+      getLandingInfo(route.query.id as string).then((res) => {
+        state.forms = res.data;
+      });
+    }
     const onTapNext = (content: Record<string, any>) => {
-      state.stepCurrent++;
-      state.forms = content;
-      console.log(state.forms);
+      //log(content);
+      state.forms = Object.assign(state.forms, content);
+      if (state.stepCurrent >= 1) {
+        if (route.query && route.query.id) {
+          landingEdit(Object.assign(state.forms, { id: route.query.id })).then(
+            (res) => {
+              state.isOver = true;
+              message.success("编辑成功");
+              router.replace("/put/landing");
+            }
+          );
+        } else {
+          landingAdd(state.forms).then((res) => {
+            state.isOver = true;
+            message.success("创建成功");
+            router.replace("/put/landing");
+          });
+        }
+      } else {
+        state.stepCurrent++;
+      }
     };
 
+    //上一步
+    const onTapPrev = (content: Record<string, any>) => {
+      state.stepCurrent--;
+    };
     return {
       ...toRefs(state),
-      onTapNext
+      onTapNext,
+      onTapPrev,
     };
-  }
+  },
 });
 
 export default LandingAddPage;

src/views/put/landing/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: pikachu
  * @Date: 2021-04-29 09:46:36
- * @LastEditors: pikachu
+ * @LastEditors: Please set LastEditors
 -->
 <template>
   <a-card class="landing-list">
@@ -20,7 +20,7 @@
       <a-button style="margin-left:20px" @click="getdataclean">重置</a-button>
     </a-card>
     <a-card class="search create-box">
-      <a-button type="primary" @click="" class="create">+新建</a-button>
+      <a-button type="primary" @click="create()" class="create">+新建</a-button>
     </a-card>
     <a-table
       rowKey="id"
@@ -40,7 +40,7 @@
           v-show="record.status==3"
           @click="copylink(record.cdn_link)"
         >复制落地页链接</div>
-        <div class="button_blue">编辑</div>
+        <div class="button_blue" @click="goEdit(record.id)">编辑</div>
         <div class="button_blue" v-show="record.status==1" @click="confirmData(record.id)">提交审核</div>
         <!-- <confirm-button
           v-show="record.status==1"
@@ -66,10 +66,11 @@ import { defineComponent, ref, reactive, toRefs } from "vue";
 import { landingCloumn } from "@/views/_pageOptions/table-put";
 import usePagination from "@/hooks/usePagination";
 import { getLandingPageList, landingDelete, landingSubmit } from "@/api";
-
+import useApp from "@/hooks/useApp";
 export default defineComponent({
   setup() {
     const { meta, loading, tablePageOptions } = usePagination();
+    const {  router } = useApp();
     const data = reactive({
       columns: landingCloumn,
       list: ref<any[]>([]),
@@ -93,6 +94,15 @@ export default defineComponent({
         meta.value = r.data.meta;
       });
     };
+    //编辑
+    const goEdit = (id:string) =>{
+      router.push(`/put/landing/add?id=${id}`)
+    }
+    const create = () =>{
+      
+      router.push(`/put/landing/add`)
+  
+    }
     const getdataclean = () => {
       data.status = undefined;
       data.title = undefined;
@@ -106,6 +116,8 @@ export default defineComponent({
       tablePageOptions,
       loading,
       getdataclean,
+      goEdit,
+      create
     };
   },
   methods: {
@@ -126,6 +138,10 @@ export default defineComponent({
         this.$message.success("复制成功");
       });
     },
+    close(){
+      console.log('关闭')
+    }
+   
   },
 });
 </script>

src/views/put/landing/stepComp/step-one.vue

@@ -95,7 +95,7 @@
         />
       </a-form-item>
       <a-form-item label="简介">
-        <a-textarea v-model="forms.name"></a-textarea>
+        <a-textarea v-model:value="forms.name"></a-textarea>
       </a-form-item>
       <a-form-item :wrapper-col="{ offset: 3 }">
         <a-button @click="onBack" style="margin-right: 10px">返回</a-button>
@@ -120,7 +120,12 @@ const StepOne = defineComponent({
   components: {
     ImageUpload,
   },
-  props: {},
+  props: {
+    content: Object,
+    default() {
+      return {};
+    },
+  },
   emits: ["next"],
   setup(props, { emit }) {
     const router = useRouter();
@@ -185,6 +190,7 @@ const StepOne = defineComponent({
     const { validate, validateInfos } = useForm(state.forms, formsRules);
 
     const initConfigData = async () => {
+      console.log(props);
       try {
         const [
           { data: official },
@@ -198,6 +204,9 @@ const StepOne = defineComponent({
         state.officials = official.list;
         state.domains = domains.list;
         state.books = books.list;
+        state.forms = Object.assign(state.forms, (props as any)?.content ?? {});
+        console.log(state.forms)
+
       } catch (error) {
         console.log("error happened in initLandingConfig:", error.message);
         router.back();
@@ -224,7 +233,7 @@ const StepOne = defineComponent({
       type: "sub_img" | "gzh_img";
     }) => {
       state.forms[result.type] = result.url;
-      console.log(state.forms);
+      //console.log(state.forms);
     };
 
     const onBack = () => {

src/views/put/landing/stepComp/step-two.vue

@@ -65,6 +65,10 @@
           ></div>
         </div>
       </div>
+      <div class="button-form">
+        <a-button style="margin-right:20px" @click="goPrev">上一步</a-button>
+        <a-button type="primary" @click="submitForm">保存</a-button>
+      </div>
     </div>
     <a-modal
       v-model:visible="modelShow"
@@ -130,14 +134,23 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
 import { getLandingPic, getLandingTempalte } from "@/api";
+import { message } from "ant-design-vue";
+import useApp from "@/hooks/useApp";
 const StepTwo = defineComponent({
   name: "StepTwo",
+  props: {
+    content: Object,
+    default() {
+      return {};
+    },
+  },
   setup(props, { emit }) {
+    const { route, router } = useApp();
     const state = reactive({
       charptList: ref<Array<{ content: string; title: string }>>([
         {
-          title: "大苏打萨达速度阿萨德阿萨德阿士大夫撒方式打发的撒范德萨飞",
-          content: "sadassssssssssssssssasdsaddasdas",
+          title: "",
+          content: "",
         },
       ]),
       modelShow: false,
@@ -175,18 +188,39 @@ const StepTwo = defineComponent({
       state.temItem = item;
       state.temChecked = idx;
     };
-    onMounted(() => {
-      getTemList();
-    });
+
     //模板列表
     const getTemList = () => {
       getLandingTempalte().then((res: any) => {
         state.templateList = res.data.list;
+        if (props && (props as any).content && route.query && route.query.id) {
+          const {
+            content,
+            body_template_id,
+            head_img,
+          } = (props as any).content;
+          try {
+            state.charptList = JSON.parse(content);
+            state.chooseImgUrl = head_img;
+            state.selectImg = true;
+
+            state.templateChecked = state.templateList.findIndex(
+              (item) => item.id == body_template_id
+            );
+            console.log(state.templateChecked)
+            state.templateItemChecked =
+              state.templateList[state.templateChecked];
+          } catch (e) {
+            console.log(e);
+          }
+        }
       });
     };
+
     //选择正文模板
     const chooseTemplate = (item: any, index: number) => {
       state.templateItemChecked = item;
+      console.log(state.templateItemChecked);
       state.templateChecked = index;
     };
     //加载更多
@@ -212,6 +246,48 @@ const StepTwo = defineComponent({
       state.selectImg = true;
       state.modelShow = false;
     };
+    //上一步
+    const goPrev = () => {
+      emit("prev");
+    };
+    //保存表单
+    const submitForm = () => {
+      let errors = 0;
+      let content: Array<any> = [];
+      state.charptList.map((r: any) => {
+        let item = {
+          title: r.title,
+          content: r.content,
+        };
+        if (!r.title || !r.content) {
+          message.error("标题或者内容不能为空");
+          errors++;
+        }
+        content.push(item);
+        return r;
+      });
+      if (!state.chooseImgUrl) {
+        message.error("头像不能为空");
+        errors++;
+      }
+      if (state.templateItemChecked && !state.templateItemChecked.id) {
+        message.error("模板不能为空");
+        errors++;
+      }
+      if (errors > 0) {
+        return false;
+      }
+      const data = {
+        head_img: state.chooseImgUrl,
+        body_template_id: state.templateItemChecked.id,
+        content: JSON.stringify(content).replace(/[\\]/g, ""),
+      };
+      emit("next", data);
+    };
+
+    onMounted(() => {
+      getTemList();
+    });
     return {
       ...toRefs(state),
       addNewCharpt,
@@ -221,6 +297,8 @@ const StepTwo = defineComponent({
       loadMore,
       chooseImg,
       chooseTemplate,
+      goPrev,
+      submitForm,
     };
   },
 });
@@ -228,6 +306,9 @@ const StepTwo = defineComponent({
 export default StepTwo;
 </script>
 <style lang="scss" scoped>
+.button-form {
+  margin-left: 120px;
+}
 .loadmore-list {
   margin-top: 30px;
   .img-item {
@@ -280,11 +361,11 @@ export default StepTwo;
         width: 20px;
         height: 20px;
         z-index: 10;
-        background-image: url('../../../../assets/checked.png');
+        background-image: url("../../../../assets/checked.png");
         background-repeat: no-repeat;
         background-size: cover;
       }
-    }    
+    }
   }
 }
 .choose-img {