对接工作台

src/App.vue

@@ -7,17 +7,5 @@
 <script>
 export default {
   name: "App",
-  metaInfo() {
-    return {
-      title:
-        this.$store.state.settings.dynamicTitle &&
-        this.$store.state.settings.title,
-      titleTemplate: (title) => {
-        return title
-          ? `${title} - ${process.env.VUE_APP_TITLE}`
-          : process.env.VUE_APP_TITLE;
-      },
-    };
-  },
 };
 </script>

src/api/index/index.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getUserDetail(cardSn) {
+    return request({
+      url: '/store/user/detail/' + cardSn,
+      method: "get",
+    });
+  }

src/assets/styles/btn.scss

@@ -99,7 +99,7 @@
 }
 
 .actived {
-  border: 2px solid #333333 !important;
+  border: 2px solid #FA821F !important;
   box-sizing: border-box;
   background: #ffffff !important;
   background: url("../images/icon_seleced.png") no-repeat bottom right !important;

src/directive/filter/index.js

@@ -0,0 +1,7 @@
+// 金额格式化
+export function formatPrice(price) {
+  return price?.toLocaleString(
+    "zh-CN",
+    (undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+  );
+}

src/directive/index.js

@@ -5,6 +5,7 @@ import dialogDragWidth from './dialog/dragWidth'
 import dialogDragHeight from './dialog/dragHeight'
 import throttle from "./common/throttle"
 import int from "./common/int";
+import { formatPrice } from "./filter/index";
 
 const install = function (Vue) {
   Vue.directive('hasRole', hasRole)
@@ -14,6 +15,7 @@ const install = function (Vue) {
   Vue.directive('dialogDragHeight', dialogDragHeight)
   Vue.directive('throttle', throttle)
   Vue.directive("int", int);
+  Vue.filter("formatPrice", formatPrice);
 }
 
 if (window.Vue) {

src/store/getters.js

@@ -35,21 +35,27 @@ const getters = {
   },
   roleList(state) {
     if (!state.dict.roleList) {
-      store.commit("EDICROLELIST")
+      store.commit("EDICROLELIST");
     }
     return state.dict.roleList;
   },
   storeList(state) {
     if (!state.dict.storeList.length) {
-      store.commit("EDICSTORELIST")
+      store.commit("EDICSTORELIST");
     }
     return state.dict.storeList;
   },
   categoryList(state) {
     if (!state.dict.categoryList.length) {
-      store.commit("EDICSCATEGORY")
+      store.commit("EDICSCATEGORY");
     }
     return state.dict.categoryList;
   },
+  getRules(state) {
+    if (!state.dict.getRules) {
+      store.commit("GETRULES");
+    }
+    return state.dict.getRules;
+  },
 };
 export default getters;

src/store/modules/dict.js

@@ -1,6 +1,6 @@
 import api from "@/api/api";
 import { getAllStoreList } from "../../api/store/index";
-import { goodscategorytree } from "../../api/goods/index";
+import { goodscategorytree, getPointsRule } from "../../api/goods/index";
 
 function setLevel(data, index = 1) {
   data.forEach((ele) => {
@@ -19,6 +19,7 @@ const state = {
   roleList: null, //角色列表
   storeList: [],
   categoryList: [],
+  getRules: 0,
 };
 const mutations = {
   //更新角色列表
@@ -37,6 +38,11 @@ const mutations = {
       state.categoryList = setLevel(res.data);
     });
   },
+  GETRULES(state) {
+    getPointsRule().then((res) => {
+      state.getRules = res.data.oneExchangeValue;
+    });
+  },
 };
 
 const actions = {};

src/views/components/index/goodsList.vue

@@ -4,7 +4,9 @@
       <el-input
         prefix-icon="el-icon-search"
         placeholder="输入产品名称"
-        v-model="input1"
+        v-model="formData.goodsName"
+        @keyup.enter.native="getGoodsList"
+        @blur="getGoodsList"
       >
       </el-input>
     </div>
@@ -14,22 +16,33 @@
           :treeList="categoryList"
           :defaultId="0"
           @more="handelShowMore"
+          @nodeClick="handelCategory"
         ></category-tree>
       </div>
-      <div class="good-list scrollbar">
+      <div class="good-list scrollbar" v-loading="loading">
         <div
           class="good-list-item"
-          :class="{ actived: activeIds.includes(item) }"
+          :class="{ actived: activeIds.includes(item.goodsId) }"
           @click="select(item)"
-          v-for="item in 10"
-          :key="item"
+          v-for="item in goodsList"
+          :key="item.id"
         >
-          <p class="item-title line2">
-            鲁花花生油鲁花花生油最多两行鲁花花生油鲁花花生油最多两行
+          <p class="item-title line1">
+            {{ item.goodsName }}
+          </p>
+
+          <div class="cb22 item-money">
+            ￥{{ item.specialPrice | formatPrice }}
+            +
+            {{ backIntegral(item) }}
+            <span> 积分 </span>
+          </div>
+          <p class="c99">
+            原价：<span class="text-line">{{
+              item.standPrice | formatPrice
+            }}</span
+            >元
           </p>
-          <span class="text-21f">2000积分</span>
-          <div class="cb22 item-money">￥2243.00</div>
-          <p class="c99">原价：<span class="text-line">3223.00</span>元</p>
         </div>
       </div>
     </div>
@@ -37,7 +50,8 @@
       title="筛选分类"
       :isShow.sync="isShow"
       @open="open"
-      @submit="submitForm"
+      @submit="handelCategory(dislogCategoryId)"
+      confirmName="确 认"
       width="850px"
     >
       <div class="treeBox">
@@ -48,6 +62,7 @@
           :defaultId="item.pId"
           :treeList="item.list"
           @more="handelShowMore"
+          @nodeClick="dialogHandelCategory"
           width="185px"
         ></category-tree>
       </div>
@@ -58,6 +73,7 @@
 <script>
 import { mapGetters } from "vuex";
 import CategoryTree from "./tree.vue";
+import { goodslistPoints } from "../../../api/goods/index";
 export default {
   name: "SaasMemberGoodsList",
   props: {
@@ -143,20 +159,33 @@ export default {
       ids: [1],
       isShow: false,
       treeArr: [],
+      formData: {
+        pageSize: 10,
+        pageNum: 1,
+        categoryId: 0,
+        goodsName: undefined,
+      },
+      goodsList: [],
+      loading: false,
+      dislogCategoryId: "",
     };
   },
 
-  mounted() {},
+  mounted() {
+    this.getGoodsList();
+  },
 
   methods: {
     open() {},
     submitForm() {},
     select(item) {
-      const index = this.selectedList.findIndex((e) => e.id == item);
+      const index = this.selectedList.findIndex(
+        (e) => e.goodsId == item.goodsId
+      );
       if (index != -1) {
         this.selectedList.splice(index, 1);
       } else {
-        this.selectedList.push({ id: item });
+        this.selectedList.push(item);
       }
     },
     handelShowMore(data, index) {
@@ -175,12 +204,38 @@ export default {
       }
       this.isShow = true;
     },
+    getGoodsList() {
+      this.loading = true;
+      goodslistPoints(this.formData)
+        .then((res) => {
+          this.goodsList = res.rows;
+          this.total = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    dialogHandelCategory(categoryId) {
+      this.dislogCategoryId = categoryId;
+    },
+    handelCategory(categoryId) {
+      if (this.formData.categoryId == categoryId) {
+        return;
+      }
+      this.formData.categoryId = categoryId;
+      this.getGoodsList();
+    },
+    backIntegral(item) {
+      return (item._integral = parseInt(
+        (item.standPrice - item.specialPrice) * this.getRules
+      ));
+    },
   },
   computed: {
     activeIds() {
-      return this.selectedList.map((e) => e.id);
+      return this.selectedList.map((e) => e.goodsId);
     },
-    ...mapGetters(["categoryList"]),
+    ...mapGetters(["categoryList", "getRules"]),
   },
   components: {
     CategoryTree,
@@ -194,12 +249,8 @@ export default {
   margin-top: 16px;
   height: 100%;
   .good-list {
-    display: flex;
-    justify-content: space-between;
     flex: 1;
     margin-left: 20px;
-    flex-wrap: wrap;
-    align-content: flex-start;
     height: calc(100vh - 230px);
     overflow-x: auto;
     p {
@@ -208,9 +259,7 @@ export default {
     }
     .good-list-item {
       cursor: pointer;
-      float: left;
-      width: 48%;
-      height: 182px;
+      height: 118px;
       background: #f6f7f9;
       border-radius: 12px;
       padding: 16px;
@@ -220,11 +269,16 @@ export default {
       .item-title {
         color: #4a4a4b;
         font-size: 18px;
-        margin-bottom: 8px;
       }
       .item-money {
         font-size: 20px;
-        margin: 14px 0 6px;
+        margin: 10px 0 4px -3px;
+        color: #eb5757;
+        font-weight: bold;
+        span {
+          font-weight: 400;
+          font-size: 14px;
+        }
       }
     }
   }

src/views/components/index/payContain.vue

@@ -10,12 +10,16 @@
           />
           <div class="good-info">
             <div class="line1">
-              鲁花花生油鲁花花生油最多一行鲁花花生油鲁花花生油最多一行
+              {{ item.goodsName }}
             </div>
             <div>
-              <span class="cb22">￥2243.00</span>
-              <span class="text-line c99">￥2243.00</span>
-              <span class="text-21f">￥2243.00</span>
+              <span class="cb22">￥{{ item.specialPrice | formatPrice }}</span>
+              <span class="text-21f"
+                >+
+                {{ item._integral }}
+                积分</span
+              >
+              <span class="text-line c99">￥{{ item.standPrice | formatPrice}}</span>
             </div>
           </div>
           <div class="good-btn fl_c" @click="del(i)">
@@ -32,6 +36,7 @@
           @focus="$emit('changeFocusType', 'money')"
           placeholder="请输入金额"
           v-model="from.money"
+          v-int
         />
       </div>
       <div class="discount fl">
@@ -169,7 +174,10 @@ export default {
           margin-top: 14px;
           span {
             font-size: 14px;
-            margin-right: 12px;
+            margin-right: 4px;
+            &:last-child {
+              margin-left: 20px;
+            }
           }
         }
       }
@@ -270,9 +278,9 @@ export default {
       background: #fffaf7;
       color: #00908c;
     }
-    .line{
+    .line {
       height: 2px;
-      background: #F1F1F1;
+      background: #f1f1f1;
       margin: 16px 0;
     }
   }

src/views/components/index/scan.vue

@@ -4,33 +4,39 @@
       <div class="scan-top">
         <div class="input-box">
           <el-input
-            @focus="$emit('changeFocusType', 'cardNum')"
+            @focus="$emit('changeFocusType', 'cardSn')"
             placeholder="请扫描会员卡"
-            v-model="user.cardNum"
+            v-model="userInfo.cardSn"
+            :max="8"
+            v-int="{ set: 0 }"
           >
             <img src="../../../assets/images/icon_scan.png" slot="suffix" />
           </el-input>
         </div>
-        <div class="code">
-          <vue-barcode
-            :value="user.code"
-            line-color="#222222"
-            width="2"
-            marginBottom="1"
-            text=" "
-            height="70"
-          >
-            不支持vue-barcode
-          </vue-barcode>
-        </div>
-        <button class="cancel">取消</button>
-        <h1 class="contain-title">会员信息</h1>
-        <div class="info">
-          <p>姓名：欧阳娜娜</p>
-          <p>会员码：24878389892</p>
-          <p>手机号码：15902021122</p>
-          <p>剩余积分：<span class="text-21f">4888</span></p>
-        </div>
+        <template v-if="userInfo.userId">
+          <div class="code">
+            <vue-barcode
+              :value="userInfo.code"
+              line-color="#222222"
+              width="2"
+              marginBottom="1"
+              text=" "
+              height="70"
+            >
+              不支持vue-barcode
+            </vue-barcode>
+          </div>
+          <button class="cancel" @click="$emit('cancel')">取消</button>
+          <h1 class="contain-title">会员信息</h1>
+          <div class="info">
+            <p>姓名：{{ userInfo.userName }}</p>
+            <p>会员卡号：{{ userInfo.code }}</p>
+            <p>手机号码：{{ userInfo.telphone }}</p>
+            <p>
+              剩余积分：<span class="text-21f">{{ userInfo.pointsValue }}</span>
+            </p>
+          </div>
+        </template>
       </div>
       <div class="keyboard-box">
         <div class="line"></div>
@@ -50,7 +56,7 @@ import VueBarcode from "vue-barcode";
 export default {
   name: "SaasScan",
   props: {
-    user: {
+    userInfo: {
       type: Object,
       default: () => {
         return {};

src/views/components/index/tree.vue

@@ -36,7 +36,7 @@ export default {
   props: {
     width: {
       type: String,
-      default: "120px",
+      default: "150px",
     },
     treeList: {
       type: Array,
@@ -62,24 +62,18 @@ export default {
     };
   },
   methods: {
-    nodeExpand(data) {
+    nodeExpand(data, node) {
       if (data.isHasChildren) {
         this.$emit("more", data, this.index + 1);
+        node.expanded = false
       }
     },
     nodeClick(data) {
-      console.log(data, 789);
+      this.$emit("nodeClick", data.categoryId, data);
     },
     filterNode(value, data, node) {
       return node.level <= value;
     },
-    renderContent(h, { node, data, store }) {
-      return (
-        <span class="custom-tree-node fl_b">
-          <span class="custom-tree-text line1">{node.label}</span>
-        </span>
-      );
-    },
     allExpandNodes(node) {
       for (let i = 0; i < node.childNodes.length; i++) {
         const _n = node.childNodes[i];
@@ -118,7 +112,7 @@ export default {
 
 <style lang="scss" scoped>
 .good-category {
-  // height: calc(100% - 50px);
+  height: 100%;
   background: #f6f7f9;
   border-radius: 8px;
   /deep/ {
@@ -143,12 +137,6 @@ export default {
       background: #f6f7f9;
       color: #fa821f;
     }
-    .custom-tree-node {
-      height: 48px;
-      .custom-tree-text {
-        width: 90px;
-      }
-    }
     .el-tree-node__expand-icon {
       font-size: 16px;
     }

src/views/goodsMag/index.vue

@@ -71,11 +71,11 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import GoodSetDlg from "./components/GoodSetDlg";
 import {
   goodslistPoints,
   editgoodspoints,
-  getPointsRule,
 } from "../../api/goods/index";
 export default {
   name: "SaasMemberRecord",
@@ -144,7 +144,6 @@ export default {
         },
       ],
       dialogVisible: false,
-      getRules: 0,
       goodsId: "",
     };
   },
@@ -177,7 +176,6 @@ export default {
     },
     init() {
       this.search(2);
-      this.getPointsRule();
     },
     del(row) {
       this.$confirm("确定删除该商品吗?", "提示", {
@@ -204,11 +202,6 @@ export default {
         this.search();
       });
     },
-    getPointsRule() {
-      getPointsRule().then((res) => {
-        this.getRules = res.data.oneExchangeValue;
-      });
-    },
     batchDel() {
       let len = this.$refs.tableList.allCheckData.length;
       if (!len) {
@@ -250,6 +243,7 @@ export default {
         return str?.split(",") || [];
       };
     },
+    ...mapGetters(["getRules"]),
   },
   components: { GoodSetDlg },
 };

src/views/index.vue

@@ -13,11 +13,12 @@
       </el-col>
       <el-col :span="8">
         <scan
-          :user="user"
+          :userInfo="userInfo"
           @comfirm="comfirm"
           @change="inputBoard"
           @backspace="backspace"
           @changeFocusType="changeFocusType"
+          @cancel="reset"
         ></scan>
       </el-col>
     </el-row>
@@ -29,12 +30,13 @@ import scan from "./components/index/scan.vue";
 import goodsList from "./components/index/goodsList.vue";
 import payContain from "./components/index/payContain.vue";
 import MenbetDlg from "./components/index/menbetDlg.vue";
+import { getUserDetail } from "@/api/index/index";
 export default {
   name: "Index",
   data() {
     return {
-      user: { code: 123, cardNum: 123 },
-      selectedGoodList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
+      userInfo: {},
+      selectedGoodList: [],
       payForm: {
         money: 0,
         discount: 0,
@@ -43,9 +45,14 @@ export default {
       dialogVisible: false,
     };
   },
-  computed: {},
-  created() {},
+  created() {
+    this.resetUser();
+  },
   methods: {
+    reset() {
+      this.selectedGoodList = [];
+      this.resetUser();
+    },
     comfirm() {
       console.log("确认");
     },
@@ -54,7 +61,7 @@ export default {
       if (!_t) {
         return;
       }
-      const key = _t == "cardNum" ? "user" : "payForm";
+      const key = _t == "cardSn" ? "userInfo" : "payForm";
       this[key][_t] = this[key][_t].substr(0, this[key][_t].length - 1);
     },
     inputBoard(val) {
@@ -63,11 +70,38 @@ export default {
         return;
       }
       val = val.toString();
-      this[_t == "cardNum" ? "user" : "payForm"][_t] += val;
+      this[_t == "cardSn" ? "userInfo" : "payForm"][_t] += val;
     },
     changeFocusType(type) {
       this.inputFocusType = type;
     },
+    getUserDetail() {
+      getUserDetail(this.userInfo.cardSn)
+        .then((res) => {
+          res.data.code = res.data.cardSn;
+          this.userInfo = res.data;
+        })
+        .catch((e) => {
+          this.resetUser(this.userInfo.cardSn);
+        });
+    },
+    resetUser(cardSn = "") {
+      this.userInfo = { cardSn };
+    },
+  },
+  watch: {
+    "userInfo.cardSn": {
+      handler(val) {
+        if (val.length >= 16) {
+          let cardSn = val.slice(0, 16);
+          if (this.userInfo.code === cardSn) {
+            return;
+          }
+          this.userInfo.cardSn = cardSn;
+          this.getUserDetail();
+        }
+      },
+    },
   },
   components: {
     scan,