金额计算

src/views/components/index/payContain.vue

@@ -19,7 +19,9 @@
                 {{ item._integral }}
                 积分</span
               >
-              <span class="text-line c99">￥{{ item.standPrice | formatPrice}}</span>
+              <span class="text-line c99"
+                >￥{{ item.standPrice | formatPrice }}</span
+              >
             </div>
           </div>
           <div class="good-btn fl_c" @click="del(i)">
@@ -33,9 +35,9 @@
       <div class="input-ward fl">
         ￥
         <input
-          @focus="$emit('changeFocusType', 'money')"
+          @focus="$emit('changeFocusType', 'payPrice')"
           placeholder="请输入金额"
-          v-model="from.money"
+          v-model="from.payPrice"
           v-int
         />
       </div>
@@ -48,12 +50,24 @@
           v-model="from.discount"
           @focus="$emit('changeFocusType', 'discount')"
         />
-        <span class="text-21f">（2000积分）</span>
+        <span class="text-21f">（{{ from.discount * getRules }}积分）</span>
       </div>
       <div class="integral-box c48">
-        <div>可用积分：100积分（200.00元）</div>
-        <div>抵扣积分：100积分（200.00元）</div>
-        <div>积分补差：100积分（200.00元）</div>
+        <div>
+          可用积分：{{ userInfo.pointsValue }}积分（{{
+            (userInfo.pointsValue / getRules) | formatPrice
+          }}元）
+        </div>
+        <div>
+          抵扣积分：100积分（{{
+            (userInfo.pointsValue / getRules) | formatPrice
+          }}元）
+        </div>
+        <div>
+          积分补差：100积分（{{
+            (userInfo.pointsValue / getRules) | formatPrice
+          }}元）
+        </div>
         <div class="line"></div>
         <div class="c48">
           优惠金额：<span class="discount-money">￥100.00</span>
@@ -81,6 +95,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   name: "SaasMemberPayContain",
   props: {
@@ -99,6 +114,12 @@ export default {
     type: {
       type: [Number, String],
     },
+    userInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -112,7 +133,7 @@ export default {
         },
         {
           lebel: "现金支付",
-          value: 2,
+          value: 4,
           src: require("../../../assets/images/icon_cash.png"),
         },
       ],
@@ -139,6 +160,9 @@ export default {
       deep: true,
     },
   },
+  computed: {
+    ...mapGetters(["getRules"]),
+  },
 };
 </script>
 

src/views/index.vue

@@ -9,6 +9,7 @@
           @changeFocusType="changeFocusType"
           :list="selectedGoodList"
           :from="payForm"
+          :userInfo="userInfo"
         ></pay-contain>
       </el-col>
       <el-col :span="8">
@@ -37,20 +38,28 @@ export default {
     return {
       userInfo: {},
       selectedGoodList: [],
-      payForm: {
-        money: 0,
-        discount: 0,
-      },
+      payForm: {},
       inputFocusType: "",
       dialogVisible: false,
     };
   },
   created() {
-    this.resetUser();
+    this.reset();
+    setTimeout(() => {
+      this.userInfo.cardSn = '1000146902628081';
+    }, 500);
   },
   methods: {
     reset() {
       this.selectedGoodList = [];
+      this.payForm = {
+        discount: 0,
+        orderPrice: 0,
+        deductionIntegral: 20.0,
+        deductionMoney: 1,
+        compensationMoney: 0,
+        payPrice: 0,
+      };
       this.resetUser();
     },
     comfirm() {
@@ -80,6 +89,7 @@ export default {
         .then((res) => {
           res.data.code = res.data.cardSn;
           this.userInfo = res.data;
+          console.log(this.userInfo)
         })
         .catch((e) => {
           this.resetUser(this.userInfo.cardSn);
@@ -88,6 +98,24 @@ export default {
     resetUser(cardSn = "") {
       this.userInfo = { cardSn };
     },
+    pay() {
+      let form = {
+        payType: 3,
+        orderFrom: 7,
+        status: 1,
+        payStatus: 0,
+        orderPrice: "",
+        goodsList: [
+          {
+            goodsId: 113828,
+            goodsPrice: 10.0,
+            goodsReceived: 10.0,
+            specialPrice: 10.0,
+            payStatus: 1,
+          },
+        ],
+      };
+    },
   },
   watch: {
     "userInfo.cardSn": {
@@ -101,6 +129,22 @@ export default {
           this.getUserDetail();
         }
       },
+      mmediate: true,
+    },
+    selectedGoodList: {
+      handler(list) {
+        let orderPrice = 0;
+        let payPrice = 0;
+        list.forEach((item) => {
+          orderPrice += item.standPrice;
+          payPrice += item.specialPrice;
+        });
+        this.payForm.payPrice = payPrice;
+        this.payForm.orderPrice = orderPrice;
+        this.payForm.discount = parseInt(orderPrice - payPrice);
+      },
+      immediate: true,
+      deep: true,
     },
   },
   components: {