新增交易保障

package-lock.json

@@ -4572,6 +4572,11 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.18.5",
+      "resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.5.tgz",
+      "integrity": "sha1-0Yo1mGfzeME41oGe38KorNXymCU="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -10617,6 +10622,15 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "vcolorpicker": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npm.taobao.org/vcolorpicker/download/vcolorpicker-1.0.3.tgz",
+      "integrity": "sha1-7qbNU7tZnOY8KEZSLW2D1rFdZJI=",
+      "requires": {
+        "highlight.js": "^9.12.0",
+        "vue": "^2.5.17"
+      }
+    },
     "vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",

package.json

@@ -39,6 +39,7 @@
     "sortablejs": "1.5.1",
     "v-charts": "^1.19.0",
     "v-viewer": "^1.4.2",
+    "vcolorpicker": "^1.0.3",
     "vue": "2.6.10",
     "vue-baidu-map": "^0.21.22",
     "vue-count-to": "1.0.5",

src/api/website/aboutUs/index.js

+import fetch from 'utils/fetch';
+
+// 获取详情
+export function getCompanyInfo(params) {
+    return fetch({
+        url: "/api/website/companyInfo",
+        method: 'get',
+        params: params
+    })
+}
+
+//编辑详情
+export function setCompanyInfo(params){
+    return fetch({
+        url: "/api/website/companyInfo/addUpdate/",
+        method: 'post',
+        data: params
+    })
+}
\ No newline at end of file

src/api/website/industryApplication/index.js

 /*
  * @Author: Jenkins
  * @Date: 2020-12-02 09:20:18
- * @LastEditTime: 2020-12-08 17:59:51
+ * @LastEditTime: 2020-12-18 10:34:09
  * @LastEditors: Please set LastEditors
  * @Description: 行业应用页请求接口
  * @FilePath: \rs-cloud-platform-ui\src\api\wsmanagement\industryApplication\index.js
@@ -68,3 +68,27 @@ export function addUpdateApplicationInfo(obj){
         data: obj
     });
 }
+
+/**
+ * 新增或更新交易保障
+ * @param {Object} obj 
+ */
+export function addUpdateProtection(obj){
+    return fetch({
+        url: "/api/website/commonInfo/addUpdate",
+        method: "post",
+        data: obj
+    })
+}
+
+/**
+ * 获取分页的交易保障
+ * @param {Object} obj 
+ */
+export function getListProtections(obj){
+    return fetch({
+        url: "/api/website/commonInfo/getAll",
+        method: "get",
+        param: obj
+    })
+}
\ No newline at end of file

src/main.js

@@ -66,11 +66,17 @@ import '../static/utf8-jsp/lang/zh-cn/zh-cn.js'
 import '../static/utf8-jsp/ueditor.parse.min.js'
 import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
+
 Vue.use(Viewer, {
   defaultOptions: {
     zIndex: 9999
   }
 })
+
+// 颜色选择器
+import vcolorpicker from 'vcolorpicker'
+Vue.use(vcolorpicker)
+
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 // register globally

src/router/index.js

@@ -121,6 +121,11 @@ export const asyncRouterMap = [{
     component: _import('webSiteManagement/industryApplication/applicationCate/index'),
     name: '类别管理',
     authority: 'applicationCate'
+  },{
+    path: 'transactionProtection',
+    component: _import('webSiteManagement/industryApplication/transactionProtection/index'),
+    name: '交易保障',
+    authority: 'transactionProtection'
   }],
 },
 {

src/views/webSiteManagement/aboutUs/index.vue

@@ -65,6 +65,10 @@
 </template>
 
 <script>
+import {
+  getCompanyInfo,
+  setCompanyInfo,
+} from "@/api/website/aboutUs/index";
 import KindEditor from "@/components/Kindeditor";
 import loadBMap from '@/utils/loadBMap.js'
 export default {

src/views/webSiteManagement/industryApplication/transactionProtection/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2020-12-17 16:06:03
+ * @LastEditTime: 2020-12-18 13:15:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\transactionProtection\index.vue
+-->
+<template>
+  <div id="TransactionProtection">
+    <!-- 操作表格栏 -->
+    <div class="operators">
+      <div class="searchList">
+        <div class="theme">
+          <span>保障标题</span>
+          <el-col :span="16">
+            <el-input
+              v-model="currentTheme"
+              placeholder="请输入保障标题"
+              size="100px"
+            ></el-input>
+          </el-col>
+        </div>
+
+        <div class="controls">
+          <div
+            class="item"
+            v-for="(item, index) in operatorControls"
+            :key="index"
+            @click.stop="clickOperator(index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+
+      <div class="addCate">
+        <div class="add" @click.stop="addProtect">新增保障</div>
+      </div>
+    </div>
+    <!-- 添加与修改弹框 -->
+    <el-dialog
+      :title="managerTitle"
+      :visible.sync="managerVisible"
+      append-to-body
+    >
+      <div id="manager">
+        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
+          <el-form-item label="排序" prop="rank">
+            <el-col :span="12">
+              <el-input
+                type="number"
+                v-model="form.rank"
+                placeholder="请输入排序号"
+              ></el-input>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="标题" prop="title">
+            <el-col :span="12">
+              <el-input
+                v-model="form.title"
+                placeholder="请输入标题"
+              ></el-input>
+            </el-col>
+            <el-col :span="6">
+              <div class="colorPicker">
+                <colorPicker
+                  v-model="form.color"
+                  @change="handleChangeColor"
+                ></colorPicker>
+              </div>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="内容" prop="content">
+            <el-col :span="24">
+              <div
+                class="content"
+                v-for="(item, index) in form.detail"
+                :key="index"
+              >
+                <el-input
+                  v-model="item.content"
+                  placeholder="请输入内容"
+                ></el-input>
+                <div class="operators">
+                  <i
+                    class="el-icon-delete"
+                    v-show="form.detail.length > 1"
+                    @click.stop="removeContent(index)"
+                  ></i>
+                  <div
+                    class="addContent"
+                    v-show="index == form.detail.length - 1"
+                    @click.stop="addContent"
+                  >
+                    <i class="el-icon-plus"></i>添加内容
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="closeManager">取消</el-button>
+            <el-button type="primary" @click="onSubmit">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+    <!-- 表格数据 -->
+    <div class="table">
+      <el-table
+        :data="tableData"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+      >
+        <el-table-column
+          label="序号"
+          prop="index"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="保障标题"
+          prop="title"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="保障内容" align="center">
+            <template slot-scope="scope">
+                <div  v-html="scope.row.content">
+                    {{scope.row.content}}
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column
+          label="发布时间"
+          prop="updTime"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="排序"
+          prop="rank"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="状态" width="100" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.status == 1 ? "上架" : "下架" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" align="center">
+          <template slot-scope="scope">
+            <span>
+              <div class="operators">
+                <div class="edit" @click.stop="editProtection(scope.row)">编辑</div>
+                <div
+                  class="offshelf"
+                  v-if="scope.row.status == 1"
+                  @click.stop="changeStatus(scope.row)"
+                >
+                  下架
+                </div>
+                <div class="upshelf" v-else @click.stop="changeStatus(scope.row)">上架</div>
+                <div class="delete" @click.stop="delInfo(scope.row)">删除</div>
+              </div>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        @size-change="changeHandleSize"
+        @current-change="changeHandleCurrent"
+        :current-page.sync="pagination.currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  addUpdateProtection,
+  getListProtections,
+} from "api/website/industryApplication/index";
+import elementVue from '../../../admin/menu/components/element.vue';
+export default {
+  name: "TransactionProtection",
+  components: {},
+  data() {
+    return {
+      currentTheme: "",
+      // 功能按钮
+      operatorControls: [
+        {
+          name: "搜索",
+        },
+        {
+          name: "清空搜索",
+        },
+      ],
+      managerTitle: "交易保障", // 修改交易保障
+      managerVisible: false,
+      rules: {
+        rank: [{ required: true, message: "请输入排序号", trigger: "blur" }],
+        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+      },
+      currentEidtInfo: "",
+      form: {
+        rank: "",
+        title: "",
+        detail: [
+          {
+            content: "",
+          },
+        ],
+        color: "#000000",
+      },
+      tableDataCache: [],
+      tableData: [
+        // {
+        //   index: 1,
+        //   title: "保障标题",
+        //   detail: "保障内容",
+        //   updTime: "发布时间",
+        //   rank: 100,
+        //   status: 1,
+        // },
+      ],
+      pagination: {
+          total: 0,
+          pageSize: 10,
+          currentPage: 0
+      },
+    };
+  },
+  watch: {
+      managerVisible(newVal){
+          if(!newVal){
+            this.form.rank = ""
+            this.form.title = ""
+            this.form.detail = [{content:""}]
+            this.form.color = ""
+          }
+      },
+  },
+  mounted() {
+      this.pullListProtections()
+  },
+  methods: {
+    pullListProtections(){
+        getListProtections({
+            page: this.pagination.currentPage,
+            limit: this.pagination.pageSize
+        }).then(res => {
+            if(res.status == 200){
+                console.log("获取的保障分页数据为=>",res)
+                this.tableDataCache = []
+                this.pagination.total = res.data.totalCount
+                res.data.data.forEach(element => {
+                    this.tableDataCache.push(element)
+                })
+                this.screenListProtections()
+            }
+        })
+    },
+    screenListProtections(){
+        this.tableData = []
+        let index = 0
+        this.tableDataCache.forEach(element => {
+            this.tableData.push({
+                content: this.transDetailToContent(element.detail),
+                index: ((this.pagination.currentPage-1)*this.pagination.pageSize)+(++index),
+                id: element.id,
+                title: element.title,
+                crtTime: element.crtTime,
+                updTime: element.updTime,
+                detail: element.detail,
+                isDel: element.isDel,
+                rank: element.rank,
+                status: element.status,
+                type: element.type,
+                color: !!element.color ? element.color : "#000000"
+            })
+        })
+        if(this.currentTheme!=""){
+            this.tableData = this.tableData.filter(element => {
+                //正则表达式
+                let reg = new RegExp(this.currentTheme);
+                return element.title.match(reg)
+            })
+        }
+    },
+    changeStatus(info){
+        let message = ""
+        if(info.status == 1){
+            info.status = 2
+            message = "下架成功!!!"
+        }else{
+            info.status = 1
+            message = "上架成功!!!"
+        }
+        addUpdateProtection({
+          type: info.type,
+          title: info.title,
+          detail: info.detail,
+          status: info.status,
+          isDel: info.isDel,
+          color: info.color,
+          rank: info.rank,
+          id: info.id,
+        }).then((res) => {
+          if (res.status == 200) {
+            this.$message({
+              message: message,
+              type: "success",
+            });
+            this.pullListProtections()
+          }else{
+              this.$message.error('操作失败,请稍后重试!!!');
+          }
+        });
+    },
+    delInfo(info){
+      this.$confirm('确定继续执行该操作吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+      }).then(() => {
+        addUpdateProtection({
+          type: info.type,
+          title: info.title,
+          detail: info.detail,
+          status: info.status,
+          isDel: 1,
+          color: info.color,
+          rank: info.rank,
+          id: info.id,
+        }).then((res) => {
+          if (res.status == 200) {
+            this.$message({
+              message: "删除成功!!!",
+              type: "success",
+            });
+            this.pullListProtections()
+          }else{
+              this.$message.error('操作失败,请稍后重试!!!');
+          }
+        });
+      })
+    },
+    changeHandleSize(val) {
+        // console.log(`每页 ${val} 条`);
+        this.pagination.pageSize = val
+        this.pullListApplicationType()
+    },
+    changeHandleCurrent(val) {
+        // console.log(`当前页: ${val}`);
+        this.pagination.currentPage = val
+        this.pullListProtections()
+    },
+    clickOperator(index) {
+      console.log("index=>", index);
+      if (index == 1) {
+          this.currentTheme = ""
+      }
+      this.screenListProtections()
+    },
+    addProtect() {
+      this.managerTitle = "交易保障"
+      this.managerVisible = true;
+    },
+    editProtection(info){
+      this.managerTitle = "修改交易保障"
+      let detail = JSON.parse(info.detail)
+      this.managerVisible = true;
+      this.form.rank = info.rank
+      this.form.title = info.title
+      this.form.detail = Array.isArray(detail) ? detail : [{content:""}]
+      this.form.color = !!info.color ? info.color : ""
+      this.currentEidtInfo = info
+    },
+    closeManager() {
+      this.managerVisible = false;
+    },
+    onSubmit() {
+      if (this.form.rank == "") {
+        this.$message.error("请输入序号!!!");
+      } else if (this.form.title == "") {
+        this.$message.error("请输入保障标题!!!");
+      } else if (this.detailHasNull()) {
+        this.$message.error("保障内容有缺值,请输入!!!");
+      } else {
+        let data,message
+        if(this.managerTitle=="交易保障"){
+            data = {
+                rank: this.form.rank,
+                type: 1, // 类型，1、交易保障，暂时默认值为1
+                title: this.form.title,
+                detail: JSON.stringify(this.form.detail),
+                status: 1, // 默认为启用
+                color: this.form.color,
+            }
+            message = "添加成功!!!"
+        }else{
+            data = {
+                type: this.currentEidtInfo.type,
+                title: this.form.title,
+                detail: JSON.stringify(this.form.detail),
+                status: this.currentEidtInfo.status,
+                isDel: this.currentEidtInfo.isDel,
+                color: this.form.color,
+                rank: this.form.rank,
+                id: this.currentEidtInfo.id,
+            }
+            message = "修改成功!!!"
+        }
+        addUpdateProtection(data).then((res) => {
+            if (res.status == 200) {
+                this.$message({
+                    message: message,
+                    type: "success",
+                });
+                this.pullListProtections()
+                this.managerVisible = false;
+            }
+        });
+      }
+    },
+    detailHasNull() {
+      let bool = false;
+      this.form.detail.forEach((element) => {
+        if (element.content == "") {
+          bool = true;
+        }
+      });
+      return bool;
+    },
+    transDetailToContent(detail){
+        let contents = JSON.parse(detail)
+        let content = ""
+        if(contents.constructor==Array){
+            if(contents.length>1){
+                contents.forEach((element,index) => {
+                    content += (index+1) + "." + element.content + "<br/>"
+                })
+            }else{
+                contents.forEach((element,index) => {
+                    content += element.content
+                })
+            }
+        }else{
+            content = detail
+        }
+        return content
+    },
+    handleChangeColor(val) {
+      console.log("输出颜色值", val); // 颜色 #6c8198
+    },
+    addContent() {
+      this.form.detail.push({
+        content: "",
+      });
+    },
+    removeContent(index) {
+      this.form.detail.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+#manager {
+  padding: 0 5%;
+  width: 90%;
+  height: auto;
+  .content {
+    padding: 2px 0;
+    width: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    .operators {
+      padding: 0 5px;
+      width: 130px;
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      .el-icon-delete {
+        cursor: pointer;
+      }
+      .addContent {
+        padding-left: 5px;
+        width: auto;
+        height: auto;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+  .colorPicker {
+    width: 100%;
+    height: auto;
+    padding: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    /deep/.m-colorPicker {
+      text-align: center;
+      /deep/.colorBtn {
+        width: 80px;
+        height: 30px;
+        padding: 0 10px;
+      }
+    }
+  }
+}
+#TransactionProtection {
+  margin: 0 1% 0 1%;
+  width: 98%;
+  height: auto;
+  .operators {
+    // margin: 0 1% 0 1%;
+    width: 100%;
+    height: 68px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    .searchList {
+      width: auto;
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      .theme {
+        width: auto;
+        height: 46px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        span {
+          margin: 0 10px 0 20px;
+        }
+      }
+      .controls {
+        margin-left: 40px;
+        width: 260px;
+        height: 46px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        .item {
+          width: 120px;
+          height: 36px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          font-weight: 400;
+          color: #5178f2;
+          border: 1px solid #5178f2;
+          border-radius: 5px;
+          cursor: pointer;
+        }
+      }
+    }
+    .addCate {
+      width: 240px;
+      height: 46px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      overflow: hidden;
+      .add {
+        width: 50%;
+        height: 36px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+        background-color: #5178f2;
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+  }
+  .table {
+    margin: 1% 1% 0 1%;
+    width: 98%;
+    height: auto;
+    span {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .icon {
+        width: 50px;
+        height: 50px;
+        object-fit: cover;
+        cursor: pointer;
+      }
+      .operators {
+        width: 300px;
+        height: 46px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        .edit,
+        .upshelf,
+        .offshelf,
+        .delete {
+          width: auto;
+          height: 36px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+        .edit,
+        .upshelf {
+          color: #1890ff;
+        }
+        .offshelf {
+          color: #a6a9ad;
+        }
+        .delete {
+          color: #fe4066;
+        }
+      }
+    }
+  }
+  .pagination{
+    margin: 1% 1% 0 1%;
+    width: 98%;
+    height: auto;
+  }
+}
+</style>
\ No newline at end of file