新增页面

src/components/commonPage/payMall.vue

+<template>
+  <div class="templatePayURL" style="display: inline-block; float: right; margin-right: 10px;">
+    <el-popover width="320" trigger="manual" v-model="visible">
+      <div>
+        <p style="margin:0 0 15px 0;">二维码收款
+          <i class="el-icon-circle-close-outline fr" style="cursor: pointer; margin: 3px 0 0 0;"
+            @click="closePic()"></i>
+        </p>
+        <div style="margin: 15px 0;"  >
+          <el-input placeholder="请输入金额" v-model="payMoney"
+            @input="payMoney=/^\d+\.?\d{0,2}$/.test(payMoney)||payMoney == '' ? payMoney : payMoney=''">
+            <el-select class='fz12 w120' v-model="payType" slot="prepend" placeholder="请选择费用类型" filterable
+              :readonly="false">
+              <el-option v-for='item in fylxList' :label="item.Name" :value="item.ID" :key='item.ID'>
+              </el-option>
+            </el-select>
+          </el-input>
+          <p style="margin: 15px 0; text-indent:5px;">
+            <el-radio v-model="payWay" label="3">支付宝</el-radio>
+            <el-radio v-model="payWay" label="1">微信</el-radio>
+          </p>
+          <p>
+            <input type="button" @click="getPayPic(item)" class="normalBtn w280" value="生成收款码" />
+          </p>
+        </div>
+        <div  >
+          <img :src="payPic"
+            style="float: left; margin-right: 15px; width: 150px; height: 150px; border: 1px solid #ccc;" />
+          <p style="padding-right: 10px; font-size: 12px; line-height: 20px; margin-bottom: 10px;">
+            <span style="color: #E95252;">{{payWay=="1"?'微信':'支付宝'}}</span>二维码有效时间为5分钟，为了不影响客户支付，请及时转发，以免失效
+          </p>
+          <p class="fz12 color333">倒计时</p>
+          <p style="color: #E95252; font-weight: bold; font-size: 12px; margin: 8px 0;">{{descMin}}分{{descSecond}}秒</p>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ["item", "showID"],
+    data() {
+      return {
+        value: '',
+        visible: false,
+        payObj: {},
+        payWay: '3',
+        minpay: '0',
+        payMoney: '0',
+        payType: '',
+        lastTime: '',
+        isShowPic: true,
+        payPic: '',
+        isDesc: false,
+        descMin: 0,
+        descSecond: 0,
+        descHour: 0,
+        fylxList: [],
+        isShowId: -1,
+        checkValue: '',
+        begin: 0,
+        nowDate: new Date(),
+        timer: null,
+        chaTime: 0
+      };
+    },
+    watch: {
+      showID: {
+        handler: function (val, oldVal) {
+          this.isShowId = val;
+          if (val != this.item.orderId) {
+            this.visible = false;
+            this.value = '';
+            if (this.timer) {
+              clearInterval(this.timer)
+
+            }
+
+          }
+        },
+        deep: true
+      }
+    },
+    mounted() {
+      this.getFylx()
+    },
+    methods: {
+      closePic() {
+        this.visible = false
+        this.value = ''
+        if (this.timer) {
+
+          clearInterval(this.timer)
+
+        }
+      },
+      chanceType(obj) {
+        let TCIDARR = []
+        TCIDARR.push(obj.tcid)
+        if (this.value === '1') {
+          this.visible = true
+          this.getPayDetail(obj, 2)
+          this.$emit("childByValue", obj.orderId)
+        } else if (this.value === '2') {
+          this.visible = false
+          let orderObj = {
+            OrderID: obj.orderId,
+            OrderSource: 8,
+            Obj: {},
+            SourceID: obj.ID,
+            TCIDList: TCIDARR
+          }
+          this.$router.push({
+            name: 'ChoiceAddFinancialDocuments',
+            query: {
+              "Type": 1,
+              "companyID": obj.outBranchId,
+              "path": "",
+              'blank': 'y',
+              'orderObj': JSON.stringify(orderObj),
+              'tradeWay': obj.tradeWay,
+              'platformAccount': obj.platformAccount
+            }
+          });
+        } else if (this.value === '3') {
+          if (this.item.oP_Remarks && this.item.oP_Remarks != "") {
+            this.visible = false
+            let orderObj = {
+              OrderID: obj.orderId, //订单号
+              OrderSource: 8, //12
+              Obj: {},
+              SourceID: obj.ID, //机票id
+              TCIDList: TCIDARR
+            }
+            this.$router.push({
+              name: 'ChoiceAddFinancialDocuments',
+              query: {
+                "Type": 2,
+                "companyID": obj.outBranchId, //公司id
+                "path": "",
+                'blank': 'y',
+                'orderObj': JSON.stringify(orderObj)
+              }
+            });
+          } else {
+            this.Error("请让OP先填写OP备注，说明退款情况");
+          }
+        } else if (this.value === '4') {
+          this.visible = false
+          let orderObj = {
+            OrderID: obj.orderId,
+            OrderSource: 8,
+            CallType: 1,
+            Obj: {},
+            SourceID: obj.ID,
+            TCIDList: TCIDARR
+          }
+          this.$router.push({
+            name: 'ChoiceAddFinancialDocuments',
+            query: {
+              "Type": 1,
+              "companyID": obj.outBranchId,
+              "path": "",
+              'blank': 'y',
+              'orderObj': JSON.stringify(orderObj)
+            }
+          });
+        } else if (this.value === '5') {
+          this.visible = false
+          let orderObj = {
+            OrderID: obj.orderId,
+            OrderSource: 8,
+            CallType: 2,
+            Obj: {},
+            TCIDList: []
+          }
+          this.$router.push({
+            name: 'ChoiceAddFinancialDocuments',
+            query: {
+              "Type": 1,
+              "companyID": 49,
+              "templateID": JSON.stringify([79]),
+              "path": "",
+              'blank': 'y',
+              'orderObj': JSON.stringify(orderObj)
+            }
+          });
+        }
+        this.value = ''
+      },
+      getPayDetail(obj, Type) {
+        let nowTime = new Date()
+        let ExpireDate = ''
+        this.apipost('OnlinePay_post_GetURL', {
+          OrderID: obj.orderId,
+          OrderSource: 8
+        }, res => {
+          if (res.data.resultCode == 1) {
+            if (Object.keys(res.data.data).length == 0) {
+              if (Type == 2) {
+                this.getCodeUrl(obj)
+              } else {
+                this.$message.warning('未生成二维码')
+              }
+            } else {
+              this.lastTime = new Date(res.data.data.ExpireDate)
+              this.nowDate = new Date(res.data.data.NowDate)
+              this.chaTime = this.lastTime - this.nowDate
+              ExpireDate = new Date(res.data.data.ExpireDate)
+              this.timer = setInterval(() => {
+                this.descTime(this.chaTime)
+              }, 1000);
+              this.payPic = res.data.data.CodeURL
+              this.isShowPic = true
+            }
+          } 
+        }, err => {})
+      },
+
+      getCodeUrl(obj) {
+        this.apipost('Financial_post_GetLowPrice', {
+          OrderID: obj.orderId,
+          OrderResource: 8
+        }, res => {
+          if (res.data.resultCode == 1) {
+            if (res.data.data.LowDeposit != -1) {
+              this.minpay = res.data.data.LowDeposit
+              this.payMoney = res.data.data.LowDeposit > this.item.preferPrice ? this.item.preferPrice : res.data
+                .data.LowDeposit
+
+            }
+          }
+        }, err => {})
+      },
+      getPayPic(obj) {
+        let msg = {}
+        msg.OrderSource = 8
+        msg.body = obj.description
+        msg.attach = this.payType + '|' + obj.contactName + '|' + obj.orderId + '|' + obj.customerId + '|' + obj
+          .outBranchId
+        msg.total_fee = this.payMoney
+        msg.payway = this.payWay
+        if (this.payType == '') {
+          this.$message.warning('请选择费用类型！')
+          return;
+        }
+        this.apipost('OnlinePay_post_GetCodeUrl', msg, res => {
+          if (res.data.resultCode == 1) {
+            this.payPic = res.data.data.CodeURL
+            this.lastTime = new Date(res.data.data.ExpireDate)
+            this.nowDate = new Date(res.data.data.NowDate)
+            this.chaTime = this.lastTime - this.nowDate
+            this.begin = this.nowDate.getSeconds()
+            this.timer = setInterval(() => {
+              this.descTime(this.chaTime)
+            }, 1000);
+            this.isShowPic = true
+          } else {
+            this.$message.error(res.data.message)
+          }
+        }, err => {})
+      },
+      descTime() {
+        let day = parseInt(this.chaTime / 1000 / 60 / 60 / 24)
+        let hr = parseInt(this.chaTime / 1000 / 60 / 60 % 24)
+        let min = parseInt(this.chaTime / 1000 / 60 % 60)
+        let sec = parseInt(this.chaTime / 1000 % 60)
+        // 个位数前补零
+        hr = hr > 9 ? hr : '0' + hr
+        min = min > 9 ? min : '0' + min
+        sec = sec > 9 ? sec : '0' + sec
+        // 控制台打印
+        if (this.chaTime > 0) {
+          if (hr > 0) {
+            this.descHour = hr;
+          }
+          this.descMin = min + this.descHour * 60;
+          this.descSecond = sec;
+        } else {
+          this.isShowPic = false
+          this.descMin = 0
+          this.descSecond = 0
+          this.descHour = 0
+          clearInterval(this.timer)
+        }
+        this.chaTime -= 1000
+        // 一秒后递归
+      },
+      getFylx() {
+        this.apipost('Financial_post_GetByOrderCostTypeList', {
+          Type: 1
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.fylxList = res.data.data
+          } else {}
+        }, err => {})
+      },
+    },
+  };
+</script>
+
+<style>
+  .templatePayURL .el-input--suffix .el-input__inner {
+    padding: 0 10px 0 8px !important;
+    font-size: 12px;
+  }
+
+  .templatePayURL .el-input__suffix {
+    right: 0 !important;
+  }
+
+</style>

src/components/mall/goodlist.vue

@@ -196,7 +196,7 @@
       </span>
     </el-dialog>
     <el-dialog title="立即支付" :visible.sync="payVisible" width="400px">
-      <payurlItem1></payurlItem1>
+      <payMall :item="payObj"></payMall>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="payVisible = false">取 消</el-button>
       </span>
@@ -204,10 +204,15 @@
   </div>
 </template>
 <script>
-  import payURL1 from "../commonPage/payURL1.vue";
+  import payMall from "../commonPage/payMall.vue";
   export default {
     data() {
       return {
+        payObj: {
+          orderId: 1,
+          OrderSource: 16,
+          TotalPrice:0,
+        },
         statusValue: 0, //请选择
         //数据列表
         DataList: [],
@@ -289,13 +294,13 @@
             trigger: 'change'
           }],
         },
-        orderDialog:false,
+        orderDialog: false,
         goodVisible: false,
-        payVisible:true,
+        payVisible: true,
       };
     },
     components: {
-      payurlItem1: payURL1,
+      payMall: payMall,
     },
 
     methods: {
@@ -426,7 +431,7 @@
           res => {
             this.loading = false;
             if (res.data.resultCode == 1) {
-              console.log(res,'数据');
+              console.log(res, '数据');
               var tempArray = res.data.data.pageData;
               if (tempArray && tempArray.length > 0) {
                 tempArray.forEach(item => {
@@ -526,7 +531,7 @@
             this.Success("下单成功!");
             this.clreaMsg();
             this.getGoodList();
-            this.orderDialog=false;
+            this.orderDialog = false;
           } else {
             this.Error(res.data.message);
           }