新增轮播图页面

src/router/index.js

@@ -147,6 +147,7 @@ export const asyncRoutes = [
       }
     ],
   },
+
   {
     path: '/apply',
     name: 'apply',
@@ -196,6 +197,34 @@ export const asyncRoutes = [
       }
     ],
   },
+  {
+    path: '/addSwipe',
+    name: 'addSwipe',
+    component: Layout,
+    redirect: '/addSwipe/list',
+    meta: {
+      title: '轮播列表'
+    },
+    children: [{
+        path: 'list',
+        name: 'addSwipeList',
+        component: () => import('@/views/addSwipe/list'),
+        meta: {
+          title: '轮播列表',
+          remixIcon: 'camera-lens-line',
+        },
+      },
+      {
+        path: 'new',
+        name: 'addSwipeNew',
+        component: () => import('@/views/addSwipe/new'),
+        meta: {
+          title: '轮播新增'
+        },
+        hidden: true
+      },
+    ],
+  },
   {
     path: '/app',
     name: 'app',

src/server/api.js

@@ -170,6 +170,38 @@ export default {
       data
     });
   },
+  //轮播图列表
+  swipe_list(data) {
+    return request({
+      url: "/manage/getBannerList",
+      method: "post",
+      data
+    });
+  },
+  //修改上下架
+  update_status(data) {
+    return request({
+      url: "/manage/update",
+      method: "post",
+      data
+    });
+  },
+  //轮播图详情
+  swipe_detail(params) {
+    return request({
+      url: "/manage/load",
+      method: "get",
+      params
+    });
+  },
+  //添加轮播图
+  add_swipe(data){
+  return request({
+    url: "/manage/insertBanner",
+    method: "post",
+    data
+  });
+  },
   // 回现APP设置
   app_setting(params) {
     return request({
@@ -194,4 +226,4 @@ export default {
       params
     });
   }
-};
+};
\ No newline at end of file

src/views/addSwipe/index.scss

+.merchant-new{
+  box-sizing: border-box;
+  padding: 20px;
+}
+.form-item{
+  width:500px;
+  margin-bottom: 24px !important;
+}
+
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width:100%;
+  height: 120px;
+  line-height: 120px;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100%;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+.avatar {
+  width: 100%;
+  height: 120px;
+  display: block;
+}
+
+//.el-input{
+//  width:200px;
+//}

src/views/addSwipe/list.vue

+<template>
+  <div class="page-fence">
+    <!--操作菜单栏-->
+    <block-header title="轮播列表" />
+    <div
+      v-if="true"
+      class="action-bar"
+    >
+      <div class="action-bar-left">
+        <router-link to="/addSwipe/new">
+          <el-button
+            icon="el-icon-plus"
+            type="primary"
+            size="mini"
+          >
+            新增轮播
+          </el-button>
+        </router-link>
+      </div>
+    </div>
+
+    <!--表格-->
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      border
+      :data="list"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :sortable="item.sortable"
+        :width="item.width"
+        :fixed="!!item.fixed"
+        :show-overflow-tooltip="!!item.overflow"
+      >
+        <template #default="{ row }">
+          <div v-if="item.label==='跳转地址'">
+            <el-link
+              type="primary"
+              :href="row[item.prop]"
+              target="_blank"
+            >
+              {{ row[item.prop] }}
+            </el-link>
+          </div>
+          <div v-else-if="item.label==='轮播图'">
+            <el-image
+              style="width: 220px; height: 35px"
+              :src="row[item.prop]"
+              fit="fit"
+            />
+          </div>
+          <div v-else-if="item.label==='上架状态'">
+            <el-tag
+              v-if="row[item.prop]==0"
+              type="success"
+            >
+              已上架
+            </el-tag>
+            <el-tag
+              v-else
+              type="info"
+            >
+              已下架
+            </el-tag>
+          </div>
+          <div v-else-if="item.label==='是否跳转'">
+            <el-tag
+              v-if="row[item.prop]==0"
+              type="info"
+            >
+              否
+            </el-tag>
+            <el-tag
+              v-else
+              type="success"
+            >
+              是
+            </el-tag>
+          </div>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        width="150"
+        fixed="right"
+        align="center"
+        label="操作"
+      >
+        <template #default="{ row }">
+          <el-button
+            v-if="row.status==0"
+            size="mini"
+            type="danger"
+            @click="handleChangeStatus(row)"
+          >
+            下架
+          </el-button>
+          <el-button
+            v-else
+            size="mini"
+            type="success"
+            @click="handleChangeStatus(row)"
+          >
+            上架
+          </el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleView(row)"
+          >
+            <span>详情</span>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :current-page="queryForm.current"
+      :layout="layout"
+      :page-size="queryForm.size"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import { doDelete, getList } from "@/api/table";
+import API from "@/server/api";
+
+export default {
+  name: "addSwipeList",
+  data() {
+    return {
+      checkList: ["轮播标题", "轮播图","轮播顺序", "是否跳转", "跳转地址",'上架状态', "创建时间"],
+      columns: [
+        {
+          order: 1,
+          label: "轮播标题",
+          prop: "name"
+        },
+        {
+          order: 2,
+          label: "轮播图",
+          prop: "content"
+        },
+          {
+          order: 3,
+          label: "轮播顺序",
+          prop: "sort"
+        },
+        {
+          order: 4,
+          label: "是否跳转",
+          overflow: true,
+          prop: "skipway"
+        },
+        {
+          order: 5,
+          label: "跳转地址",
+          prop: "skipweb"
+        },
+        {
+          order: 6,
+          label: "上架状态",
+          prop: "status"
+        },
+        {
+          order: 7,
+          label: "创建时间",
+          prop: "updateTime"
+        }
+      ],
+      list: [],
+      listLoading: true,
+      layout: "total, sizes, prev, pager, next, jumper",
+      total: 0,
+      queryForm: {
+        current: 1,
+        size: 10
+      }
+    };
+  },
+  computed: {
+    finallyColumns() {
+      let finallyArray = [];
+      this.checkList.forEach((checkItem) => {
+        finallyArray.push(
+          this.columns.filter((item) => item.label === checkItem)[0]
+        );
+      });
+      //return _.sortBy(finallyArray, (item) => item.order);
+      return finallyArray;
+    }
+  },
+  created() {
+    //防止三级以上路由时多次走created
+    if (this.$route.name === this.$options.name) this.fetchData();
+  },
+  // mounted() {
+  //   this.fetchData();
+  // },
+  methods: {
+    onSubmit() {
+      this.fetchData();
+    },
+    handleView(row){
+      const {id} = row;
+      this.$router.push({
+        path: '/addSwipe/new',
+        query: { id }
+      })
+    },
+    async handleChangeStatus(row) {
+      const { id, status } = row;
+      console.log(row, "是");
+      const result = await API.update_status({
+        id,
+        status: status=="0" ? 1 :0
+      });
+      if (result.success) {
+        this.$baseMessage("修改成功", "success");
+        setTimeout(() => {
+          this.fetchData();
+        }, 1500);
+      }
+
+    },
+    handleSizeChange(val) {
+      this.queryForm.size = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.queryForm.current = val;
+      this.fetchData();
+    },
+    handleQuery() {
+      this.queryForm.current = 1;
+      this.fetchData();
+    },
+    async fetchData() {
+      this.listLoading = true;
+      const result = await API.swipe_list(this.queryForm);
+      console.log(result,'结果结果');
+      const { total,data } = result.result;
+      this.list = data;
+      this.total = total;
+      this.listLoading = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.page-fence {
+  ::v-deep {
+    i {
+      cursor: pointer;
+    }
+  }
+
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>
+<style lang="scss">
+.custom-table-checkbox {
+  .el-checkbox {
+    display: block !important;
+    margin: 0 0 $base-padding/4 0;
+  }
+}
+
+.action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+
+  .action-bar-left, .action-bar-right {
+    flex: 1;
+  }
+
+  .action-bar-right {
+    text-align: right;
+  }
+}
+</style>

src/views/addSwipe/new.vue

+<template>
+  <div class="merchant-new">
+    <el-form
+      ref="h5form"
+      label-suffix=":"
+      :rules="rules"
+      :model="form"
+      label-width="120px"
+    >
+      <block-header title="新建" />
+      <el-form-item
+        prop="content"
+        class="form-item"
+        label="轮播图"
+      >
+        <el-upload
+          class="avatar-uploader"
+          :action="uploadUrl"
+          :with-credentials="true"
+          list-type="picture-card"
+          :show-file-list="false"
+          :on-success="handleSuccessLogo"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img
+            v-if="form.content"
+            :src="form.content"
+            class="avatar"
+          >
+          <i
+            v-else
+            class="el-icon-plus avatar-uploader-icon"
+          />
+        </el-upload>
+      </el-form-item>
+           <el-form-item
+        prop="name"
+        class="form-item"
+        label="轮播标题"
+      >
+        <el-input
+          v-model="form.name"
+          type="textarea"
+          :rows="3"
+        />
+      </el-form-item>
+      <el-form-item
+        prop="skipway"
+        class="form-item"
+        label="是否跳转"
+      >
+        <el-select
+          v-model="form.skipway"
+          style="width: 100%"
+          size="mini"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in select"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="form.skipway"
+        prop="skipweb"
+        class="form-item"
+        label="跳转链接"
+      >
+        <el-input v-model="form.skipweb">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item
+        prop="sort"
+        class="form-item"
+        label="轮播顺序"
+      >
+        <el-input
+        @blur="swipeSort"
+          v-model="form.sort"
+          type="text"
+          :rows="3"
+        />
+          </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          @click="onSubmit('h5form')"
+        >
+          保存
+        </el-button>
+        <el-button @click="onReset('h5form')">
+          重置
+        </el-button>
+        <el-button @click="$router.go(-1)">
+          取消
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import BlockHeader from "@/components/blockHeader";
+import API from "@/server/api";
+
+const $API = process.env.VUE_APP_API_PATH;
+
+export default {
+  name: "addSwipeNew",
+  components: {
+    "block-header": BlockHeader
+  },
+  data() {
+    return {
+      select:[{value:0,label:'否'},{value:1,label:'是'}],
+      uploadUrl: `${$API}/sysUser/upload`,
+      form: {
+        name: "",
+        skipway: "",
+        content: "",
+        skipweb:"",
+        sort: ""
+      },
+      rules: {
+        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        content: [{ required: true, message: "请上传轮播图", trigger: "change" }],
+        skipway: [{ required: true, message: "请选择是否跳转", trigger: "blur" }],
+        skipweb: [{ required: false, message: "请输入跳转链接", trigger: "blur" }],
+        sort: [{ required: true, message: "请选择轮播顺序", trigger: "blur" }]
+      }
+    };
+  },
+  async created() {
+    const { query } = this.$route;
+    if (query && query.id) {
+      this.id = query.id;
+      await this.init();
+    }
+  },
+  methods: {
+    async init() {
+      const id = this.id;
+      const { result, success } = await API.swipe_detail({ id });
+      if (success) {
+       result.skipway=result.skipway=="1"?'是':'否';
+        this.form = result;
+      }
+    },
+    //轮播顺序失焦
+    swipeSort(){
+  if (!(/(^[1-9]\d*$)/.test(this.form.sort))) { 
+      this.$message.error('请输入正整数！');
+      this.form.sort='';
+      return false;
+    }
+    },
+    handleSuccessLogo(res) {
+      this.form.content = res.result;
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isPNG = file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG && !isPNG) {
+        this.$message.error("上传图片只能是 JPG 或者 PNG 格式!");
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2MB!");
+        return false;
+      }
+      return true;
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          const form = Object.assign({}, this.form);
+            console.log(form.skipway,'0000000');
+            form.skipway=form.skipway?'1':'0';
+          let result;
+          if (this.id) {
+            console.log(form.skipway,'888888');
+            result = await API.update_status({ ...form });
+          } else {
+            result = await API.add_swipe({ ...form });
+          }
+          if (result.success) {
+            this.$baseMessage("保存成功", "success");
+            setTimeout(() => {
+              this.$router.back();
+            }, 1500);
+          }
+        }
+      });
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+};
+</script>
+
+<style lang="scss" src="./index.scss"></style>

src/views/prod/components/comAPI.vue

@@ -164,7 +164,7 @@
         label="期限"
       >
         <el-input
-          v-model="form. loanLimit"
+          v-model="form.loanLimit"
           class="el-input"
         >
         </el-input>

更新日志.md

 ## 贷超管理后台更新日志
+- 2022-11-11 产品列表增加了年利率和期限关键信息展示
+- 2022=-11-16 增加  新增/编辑轮播图页面
\ No newline at end of file