ys

src/assets/styles/ruoyi.scss

@@ -64,6 +64,14 @@
   font-weight: bold;
 }
 
+.text-line {
+  text-decoration: line-through;
+}
+.c99 {
+  color: #999999;
+  font-size: 14px;
+}
+
 .c48 {
   color: #4a4a4b;
   font-size: 14px;

src/components/common/container.vue

@@ -37,5 +37,6 @@ export default {
   background: #ffffff;
   padding: 16px;
   border-radius: 8px;
+  height: 100%;
 }
 </style>

src/views/components/index/goodsList.vue

@@ -1,18 +1,40 @@
 <template>
   <container title="商品列表">
-    <div class="input-box">
-      <el-input
-        prefix-icon="el-icon-search"
-        placeholder="输入产品名称"
-        v-model="input1"
-      >
-      </el-input>
-    </div>
-    <div class="good-main">
-      <div class="good-category">
-        <el-tree highlight-current :data="data" :props="defaultProps"></el-tree>
+    <div class="goods-ward">
+      <div class="input-box">
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="输入产品名称"
+          v-model="input1"
+        >
+        </el-input>
+      </div>
+      <div class="good-main">
+        <div class="good-category">
+          <el-tree
+            highlight-current
+            :data="data"
+            :props="defaultProps"
+            :render-content="renderContent"
+          ></el-tree>
+        </div>
+        <div class="good-list scrollbar">
+          <div
+            class="good-list-item"
+            :class="{ actived: activeIds.includes(item) }"
+            @click="select(item)"
+            v-for="item in 10"
+            :key="item"
+          >
+            <p class="item-title line2">
+              鲁花花生油鲁花花生油最多两行鲁花花生油鲁花花生油最多两行
+            </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>
-      <div class="good-list">123</div>
     </div>
   </container>
 </template>
@@ -20,19 +42,31 @@
 <script>
 export default {
   name: "SaasMemberGoodsList",
-
+  props: {
+    selectedList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
   data() {
     return {
       input1: 23,
       data: [
         {
-          label: "一级 1",
+          label: "一级 112333333333333",
           children: [
             {
               label: "二级 1-1",
               children: [
                 {
                   label: "三级 1-1-1",
+                  children: [
+                    {
+                      label: "三级 1-1-1",
+                    },
+                  ],
                 },
               ],
             },
@@ -88,12 +122,43 @@ export default {
         children: "children",
         label: "label",
       },
+      ids: [1],
     };
   },
 
   mounted() {},
 
-  methods: {},
+  methods: {
+    select(item) {
+      const index = this.selectedList.findIndex((e) => e.id == item);
+      if (index != -1) {
+        this.selectedList.splice(index, 1);
+      } else {
+        this.selectedList.push({ id: item });
+      }
+    },
+    aaa(node, data, store) {
+      console.log(node, data, store, 789);
+    },
+    renderContent(h, { node, data, store }) {
+      this.aaa(node, data, store);
+      let rgba = "rgba(0, 0, 0,  " + (node.level - 1) * 0.08 + ")";
+      return (
+        <span class="custom-tree-node fl_b" style={{ background: rgba }}>
+          <span class="custom-tree-text line1">{node.label}</span>
+          <span
+            class="el-icon-caret-right"
+            style={{ display: node.childNodes.length ? "block" : "none" }}
+          ></span>
+        </span>
+      );
+    },
+  },
+  computed: {
+    activeIds() {
+      return this.selectedList.map((e) => e.id);
+    },
+  },
 };
 </script>
 
@@ -101,23 +166,97 @@ export default {
 .input-box {
   margin: 18px 0 16px;
 }
+.goods-ward {
+  height: calc(100vh - 180px);
+}
 .good-main {
-  height: 500px;
+  height: 100%;
   display: flex;
   .good-category {
+    height: calc(100% - 50px);
     background: #f6f7f9;
+    border-radius: 8px;
+    width: 120px;
     /deep/ {
       .el-tree-node__expand-icon {
         display: none;
       }
       .el-tree {
         background: #f6f7f9;
+        border-radius: 8px;
+      }
+
+      .el-tree-node__label {
+        // padding-right: 16px;
+      }
+      .el-tree-node__content {
+        height: 48px;
+        color: #4a4a4b;
+        padding-left: 0 !important;
       }
       .el-tree--highlight-current
         .el-tree-node.is-current
         > .el-tree-node__content {
-        background: #ffffff;
-        color: #fa821f;
+        background: #fa821f;
+        color: #ffffff;
+      }
+      .custom-tree-node {
+        width: 100%;
+        display: flex;
+        height: 48px;
+        padding: 0 12px;
+        .custom-tree-text {
+          width: 86px;
+        }
+        .el-icon-caret-right {
+          cursor: pointer;
+          color: #c0c4cc !important;
+          font-size: 12px;
+          transform: rotate(90deg);
+        }
+      }
+
+      .is-expanded {
+        & .custom-tree-node > .el-icon-caret-right {
+          transform: rotate(0) !important;
+          transition: transform 0.3s ease-in-out !important,
+            -webkit-transform 0.3s ease-in-out !important;
+        }
+      }
+    }
+  }
+  .good-list {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    margin-left: 20px;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    height: calc(100% - 50px);
+    overflow-x: auto;
+    p {
+      padding: 0;
+      margin: 0;
+    }
+    .good-list-item {
+      cursor: pointer;
+      float: left;
+      width: 48%;
+      height: 182px;
+      background: #f6f7f9;
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 20px;
+      overflow: hidden;
+      border: 2px solid #ffffff;
+      .item-title {
+        color: #4a4a4b;
+        font-size: 18px;
+        margin-bottom: 8px;
+      }
+      .item-money {
+        font-size: 20px;
+        margin: 14px 0 6px;
       }
     }
   }

src/views/components/index/payContain.vue

@@ -1,54 +1,56 @@
 <template>
   <container title="支付">
-    <div class="pay-top">
-      <p class="pay-title">已选商品</p>
-      <div class="good-list scrollbar">
-        <div class="good-item fl_c" v-for="(item, i) in list" :key="i">
-          <img
-            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-            alt=""
-          />
-          <div class="good-info">
-            <div class="line1">
-              鲁花花生油鲁花花生油最多一行鲁花花生油鲁花花生油最多一行
+    <div class="pay-ward">
+      <div class="pay-top">
+        <p class="pay-title">已选商品</p>
+        <div class="good-list scrollbar">
+          <div class="good-item fl_c" v-for="(item, i) in list" :key="i">
+            <img
+              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+              alt=""
+            />
+            <div class="good-info">
+              <div class="line1">
+                鲁花花生油鲁花花生油最多一行鲁花花生油鲁花花生油最多一行
+              </div>
+              <div>
+                <span class="cb22">￥2243.00</span>
+                <span class="text-line c99">￥2243.00</span>
+                <span class="text-21f">￥2243.00</span>
+              </div>
             </div>
-            <div>
-              <span class="cb22">￥2243.00</span>
-              <span style="color: #999999; text-decoration: line-through"
-                >￥2243.00</span
-              >
-              <span class="text-21f">￥2243.00</span>
+            <div class="good-btn fl_c" @click="del(i)">
+              <i class="el-icon-delete"></i>
             </div>
           </div>
-          <div class="good-btn fl_c"><i class="el-icon-delete"></i></div>
         </div>
       </div>
-    </div>
-    <div class="pay-bom">
-      <p class="pay-title">商品价格</p>
-      <div class="input-ward fl">
-        ￥
-        <input placeholder="请输入金额" v-model="money" />
-      </div>
-      <div class="discount">
-        <el-checkbox v-model="checked">折扣商品</el-checkbox>
-        <span class="mr">该商品最多可抵扣</span>
-        <input type="text" />
-        <span>（2000积分）</span>
-      </div>
-      <div class="pay-bom-item c48">折扣金额：233元</div>
-      <div class="pay-bom-item c48">
-        实付金额：<span class="money">￥2243.00</span>
-      </div>
-      <div class="pay-bom-item fl c48">
-        支付方式：
-        <div
-          class="wechart fl_c"
-          :class="{ actived: active }"
-          @click="active = !active"
-        >
-          <img src="../../../assets//images//icon_wechat.png" alt="" />
-          <span>微信支付</span>
+      <div class="pay-bom">
+        <p class="pay-title">商品价格</p>
+        <div class="input-ward fl">
+          ￥
+          <input placeholder="请输入金额" v-model="money" />
+        </div>
+        <div class="discount">
+          <el-checkbox v-model="checked">折扣商品</el-checkbox>
+          <span class="mr">该商品最多可抵扣</span>
+          <input type="text" />
+          <span class="text-21f">（2000积分）</span>
+        </div>
+        <div class="pay-bom-item c48">折扣金额：233元</div>
+        <div class="pay-bom-item c48">
+          实付金额：<span class="money">￥2243.00</span>
+        </div>
+        <div class="pay-bom-item fl c48">
+          支付方式：
+          <div
+            class="wechart fl_c"
+            :class="{ actived: active }"
+            @click="active = !active"
+          >
+            <img src="../../../assets//images//icon_wechat.png" alt="" />
+            <span>微信支付</span>
+          </div>
         </div>
       </div>
     </div>
@@ -58,10 +60,16 @@
 <script>
 export default {
   name: "SaasMemberPayContain",
-
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
   data() {
     return {
-      list: [{}, {}, {}, {}, {}, {}],
       money: "",
       checked: true,
       active: true,
@@ -70,7 +78,20 @@ export default {
 
   mounted() {},
 
-  methods: {},
+  methods: {
+    del(index) {
+      this.list.splice(index, 1);
+    },
+  },
+  watch: {
+    list: {
+      handler(val) {
+        // console.log(val);
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
 };
 </script>
 
@@ -79,10 +100,13 @@ export default {
   font-size: 14px;
   color: #4a4a4b;
 }
+.pay-ward {
+  height: calc(100vh - 180px);
+}
 .pay-top {
   margin-bottom: 50px;
   .good-list {
-    max-height: 330px;
+    height: 330px;
     overflow-x: auto;
     .good-item {
       height: 60px;

src/views/components/index/scan.vue

@@ -1,38 +1,42 @@
 <template>
   <container title="扫描">
-    <div class="scan-top">
-      <div class="input-box">
-        <el-input placeholder="请扫描会员卡" v-model="input1">
-          <img src="../../../assets/images/icon_scan.png" slot="suffix" />
-        </el-input>
+    <div class="scan-ward">
+      <div class="scan-top">
+        <div class="input-box">
+          <el-input placeholder="请扫描会员卡" v-model="input1">
+            <img src="../../../assets/images/icon_scan.png" slot="suffix" />
+          </el-input>
+        </div>
+        <div class="code">
+          <vue-barcode
+            :value="value1"
+            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>
       </div>
-      <div class="code">
-        <vue-barcode
-          :value="value1"
-          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>剩余积分：<scan class="text-21f">4888</scan></p>
+      <div class="keyboard-box">
+        <div class="line"></div>
+        <key-board
+          @change="valChange"
+          @backspace="backspace"
+          @comfirm="comfirm"
+        ></key-board>
       </div>
     </div>
-    <div class="line"></div>
-    <key-board
-      @change="valChange"
-      @backspace="backspace"
-      @comfirm="comfirm"
-    ></key-board>
   </container>
 </template>
 
@@ -40,16 +44,12 @@
 import keyBoard from "./keyboard";
 import VueBarcode from "vue-barcode";
 export default {
-  name: "SaasMemberPayContain",
+  name: "SaasScan",
   data() {
     return {
-      actives: [1],
-      modeList: [
-        { label: "扫码支付", value: 1 },
-        { label: "现金收银", value: 2 },
-      ],
       value: "",
       value1: "1111111111111111",
+      input1: "",
     };
   },
 
@@ -85,9 +85,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.scan-ward {
+  height: calc(100vh - 180px);
+  position: relative;
+}
 .scan-top {
   width: 100%;
-  margin-bottom: 40px;
   .input-box {
     margin: 18px 0 16px;
     img {
@@ -129,9 +132,14 @@ export default {
     }
   }
 }
-.line {
-  height: 2px;
-  background: #f6f7f9;
-  margin-bottom: 24px;
+.keyboard-box {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  .line {
+    height: 2px;
+    background: #f6f7f9;
+    margin-bottom: 24px;
+  }
 }
 </style>

src/views/index.vue

@@ -2,14 +2,12 @@
   <div>
     <el-row :gutter="20">
       <el-col :span="8">
-        <goods-list></goods-list>
+        <goods-list :selectedList="selectedGoodList"></goods-list>
       </el-col>
       <el-col :span="8">
-        <!-- <scan></scan> -->
-        <pay-contain></pay-contain>
+        <pay-contain :list="selectedGoodList"></pay-contain>
       </el-col>
       <el-col :span="8">
-        <!-- <pay-contain></pay-contain> -->
         <scan></scan>
       </el-col>
     </el-row>
@@ -24,6 +22,7 @@ export default {
   data() {
     return {
       user: {},
+      selectedGoodList: [],
     };
   },
   computed: {},