|
|
@@ -1,225 +1,257 @@
|
|
|
<template>
|
|
|
-<div>
|
|
|
- <common @asynCallBack="asynCallBack"></common>
|
|
|
- <top-header :pageTitle="pageTitle" ></top-header>
|
|
|
-
|
|
|
- <div class="mui-content vongi-qingjiadt margin60" >
|
|
|
- <div class="vongi-cashier flew-sp">
|
|
|
- <div class="vongi-zd flew-items">
|
|
|
- <div class="mui-media-object">
|
|
|
- <img :src="goodsTpey.iconPic">
|
|
|
- </div>
|
|
|
- <h3>
|
|
|
- {{goodsTpey.goodsName}}
|
|
|
- </h3>
|
|
|
- </div>
|
|
|
- <div class="vongi-cd-pay">
|
|
|
- <span class="iconfont icon-baobiao color4fc5f7" @click="goRecord()"></span>
|
|
|
- <h5>历史账单</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <form class="mui-input-group vongi-cd-payli">
|
|
|
- <div class="mui-input-row flew-sp">
|
|
|
- <h3>{{detail.body}}</h3>
|
|
|
- <h3>￥{{detail.totalFee}}</h3>
|
|
|
- </div>
|
|
|
- <div class="mui-input-row" v-for="(value,key,index) in list">
|
|
|
- <label>{{key}}</label>
|
|
|
- <span>{{value}}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="mui-input-row">
|
|
|
- <label>创建时间</label>
|
|
|
- <span>{{detail.createTime}}</span>
|
|
|
- </div>
|
|
|
- <div class="mui-input-row">
|
|
|
- <label style="width:25%">订单号</label>
|
|
|
- <span style="width:75%" class="mui-ellipsis">{{detail.outOrderNo}}</span>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- <div class="mui-content-padded">
|
|
|
- <h5>支付方式</h5></div>
|
|
|
- <form class="mui-input-group margin10">
|
|
|
- <div class="mui-input-row mui-radio">
|
|
|
- <label>微信支付</label>
|
|
|
- <input name="radio1" value="1" v-model="paytypeindex" type="radio">
|
|
|
- </div>
|
|
|
- <div class="mui-input-row mui-radio">
|
|
|
- <label>支付宝支付</label>
|
|
|
- <input name="radio1" value="2" v-model="paytypeindex" type="radio" checked>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- <div class="vongi-cashier-btn-row">
|
|
|
- <div class="vongi-cashier-btn-white">
|
|
|
- <span>合计：<b class="colorfe616c">￥{{detail.totalFee}}</b></span>
|
|
|
- <div class="vongi-cashier-btn" v-if="detail.payStatus=='10'" @click="submit">支付</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <img id="qrcode">
|
|
|
- <loading :visible="isLoading"></loading>
|
|
|
-
|
|
|
-</div>
|
|
|
+ <div>
|
|
|
+ <common @asynCallBack="asynCallBack"></common>
|
|
|
+ <top-header :pageTitle="pageTitle" :leftShow="leftShow" ></top-header>
|
|
|
+
|
|
|
+ <div class="mui-content vongi-qingjiadt margin60" >
|
|
|
+ <div class="vongi-zd vongi-zdto flew-items">
|
|
|
+ <img :src="detail.goodsPic" width="24">
|
|
|
+ <h3>{{detail.billName}}</h3>
|
|
|
+ </div>
|
|
|
+ <form class="mui-input-group">
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>缴费单位</label>
|
|
|
+ <span>{{detail.companyName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>推送用户</label>
|
|
|
+ <span>{{detail.personName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>本期账单总金额</label>
|
|
|
+ <span class="mui-h1 colorfe616c">￥{{detail.totalFee}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>账单备注</label>
|
|
|
+ <span>{{detail.remark}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </form>
|
|
|
+ <div class="mui-content-padded">
|
|
|
+ <h5 class="flew-sp">账单明细<span class="colorfe616c">请在收到账单5日内交纳如下费用</span></h5>
|
|
|
+ </div>
|
|
|
+ <ul class="mui-table-view vongi-pay-list openfyy-list">
|
|
|
+ <li class="mui-table-view-cell" v-for="mod in list">
|
|
|
+ <div class=" mui-card-content-inner flew-sp">
|
|
|
+ <div class="mui-media-body">
|
|
|
+ <div class='mui-ellipsis flew-sp flew-items'><span class="color4fc5f7">{{mod.goodsName}}</span>（{{mod.numStr}}）</div>
|
|
|
+ <p>{{mod.standard}}</p>
|
|
|
+ </div>
|
|
|
+ <span class="mui-h2">{{mod.details}}元</span>
|
|
|
+ </div>
|
|
|
+ <p class="mui-card-footer">起止日期:{{beginEndTime(mod.beginEndTime)}}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div class="mui-content-padded" >
|
|
|
+ <h5>支付方式</h5>
|
|
|
+ </div>
|
|
|
+ <form class="mui-input-group margin10" v-if="detail.payStatus=='10'" >
|
|
|
+ <div class="mui-input-row mui-radio">
|
|
|
+ <label>微信支付</label>
|
|
|
+ <input name="radio1" value="1" v-model="paytypeindex" type="radio">
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row mui-radio">
|
|
|
+ <label>支付宝支付</label>
|
|
|
+ <input name="radio1" value="2" v-model="paytypeindex" type="radio" checked>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <form class="mui-input-group margin10" v-if="detail.payStatus=='20'" >
|
|
|
+ <div class="mui-input-row mui-radio">
|
|
|
+ <label>{{detail.orderInfo.payNameStr}}</label>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <div class="vongi-cashier-btn-row">
|
|
|
+ <div class="vongi-cashier-btn-white">
|
|
|
+ <span>合计：<b class="colorfe616c">￥{{detail.totalFee}}</b></span>
|
|
|
+ <div class="vongi-cashier-btn" v-if="detail.payStatus=='10'" @click="submit">支付</div>
|
|
|
+ <div class="vongi-cashier-btn" v-if="detail.payStatus!='10'">{{detail.orderInfo.payStatusStr}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img id="qrcode">
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
- import * as API_Pay from '$project/apis/payment'
|
|
|
- import Common from '$project/components/Common.vue'
|
|
|
- import Loading from '$project/components/Loading.vue'
|
|
|
- import TopHeader from '$project/components/TopHeader.vue'
|
|
|
- require('$project/assets/js/mui.picker.min.js');
|
|
|
- import QRCode from 'qrcodejs2'
|
|
|
-
|
|
|
- import {
|
|
|
- mapGetters,
|
|
|
- mapMutations
|
|
|
- } from 'vuex'
|
|
|
- import {
|
|
|
- wxPayJs
|
|
|
- } from '$project/utils/wxpay'
|
|
|
- import {
|
|
|
-
|
|
|
- convertCanvasToImage,
|
|
|
- currentTimeStamp,
|
|
|
- parseUnixTime
|
|
|
- } from '$project/utils'
|
|
|
- export default {
|
|
|
- name: 'MasterMineBillPay',
|
|
|
- components: {
|
|
|
- Common,
|
|
|
- Loading,
|
|
|
- TopHeader
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pageTitle: '收银台',
|
|
|
- paytypeindex:"1",
|
|
|
- paycode:'',
|
|
|
- paytype:"微信支付",
|
|
|
- qrCodeImg:"",
|
|
|
- isLoading: false,
|
|
|
- detail:{},
|
|
|
-
|
|
|
- list:[],
|
|
|
- goodsTpey:{},
|
|
|
-
|
|
|
- id:''
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.id=this.$route.query.id;
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getDetail(){
|
|
|
- API_Pay.orderDetail({id:this.id}).then(res=>{
|
|
|
- this.detail=res.orderInfo;
|
|
|
- this.info=res.goodsTpey;
|
|
|
- this.goodsTpey=res.goodsTpey;
|
|
|
-
|
|
|
- this.list=JSON.parse(res.orderInfo.detail);
|
|
|
- }).catch(error => {
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- selectPay() {
|
|
|
- var picker = new mui.PopPicker();
|
|
|
-
|
|
|
- picker.setData([{
|
|
|
- text: "微信支付",
|
|
|
- value: '1'
|
|
|
- }
|
|
|
- ,
|
|
|
- {
|
|
|
- text: "支付宝扫码",
|
|
|
- value: '2'
|
|
|
- }
|
|
|
- // ,
|
|
|
- // {
|
|
|
- // text: "现场支付",
|
|
|
- // value: '0'
|
|
|
- // }
|
|
|
- ]);
|
|
|
-
|
|
|
- picker.show((selectItems) => {
|
|
|
- this.paytypeindex=selectItems[0].value;
|
|
|
- this.paytype=selectItems[0].text;
|
|
|
- });
|
|
|
- },
|
|
|
- //info
|
|
|
- goRecord() {
|
|
|
-
|
|
|
- this.$router.push({
|
|
|
- name: 'MasterMineBillRecord',
|
|
|
- query: {
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //提交表单
|
|
|
- submit() {
|
|
|
- this.isLoading=true;
|
|
|
- if(this.paytypeindex=="1"){
|
|
|
- API_Pay.wxJsapiPay(this.detail.id,'').then(data=>{
|
|
|
-
|
|
|
- this.isLoading=false;
|
|
|
- wxPayJs(data)
|
|
|
- }).catch(error => {
|
|
|
- this.isLoading = false;
|
|
|
- mui.toast(error);
|
|
|
- })
|
|
|
-
|
|
|
- }else if(this.paytypeindex=="2"){
|
|
|
- API_Pay.tradePrecreatePay(this.detail.id,'').then(url=>{
|
|
|
- this.isLoading = false;
|
|
|
- let qrcode = new QRCode('qrcode', {
|
|
|
- width: 200,
|
|
|
- height: 200,
|
|
|
- text: url,
|
|
|
- correctLevel: QRCode.CorrectLevel.M,
|
|
|
-
|
|
|
- })
|
|
|
- var canvas = document.getElementsByTagName('canvas')[0];
|
|
|
- this.qrCodeImg = convertCanvasToImage(canvas);
|
|
|
-
|
|
|
- var btnArray = ['关闭',"支付成功?"];
|
|
|
- var _this=this
|
|
|
- mui.confirm('<img src="'+this.qrCodeImg+'" >',
|
|
|
-
|
|
|
- '请使用支付宝扫码', btnArray, function(e) {
|
|
|
- if (e.index == 1) {
|
|
|
- _this.$router.push({
|
|
|
- name: 'MasterMineBillList',
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- }).catch(error => {
|
|
|
- this.isLoading = false;
|
|
|
- mui.toast(error);
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },asynCallBack(){},
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getDetail();
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
-
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({
|
|
|
- openId: 'wx_openid',
|
|
|
- token: 'token',
|
|
|
- person_data: 'person_data',
|
|
|
- person_popedom: 'person_popedom',
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ import * as API_Pay from '$project/apis/payment'
|
|
|
+ import Common from '$project/components/Common.vue'
|
|
|
+ import Loading from '$project/components/Loading.vue'
|
|
|
+ import TopHeader from '$project/components/TopHeader.vue'
|
|
|
+ require('$project/assets/js/mui.picker.min.js');
|
|
|
+ import QRCode from 'qrcodejs2'
|
|
|
+
|
|
|
+ import {
|
|
|
+ mapGetters,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex'
|
|
|
+ import {
|
|
|
+ wxPayJs
|
|
|
+ } from '$project/utils/wxpay'
|
|
|
+ import {
|
|
|
+
|
|
|
+ convertCanvasToImage,
|
|
|
+ currentTimeStamp,
|
|
|
+ parseUnixTime
|
|
|
+ } from '$project/utils'
|
|
|
+ export default {
|
|
|
+ name: 'MasterMineBillPay',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '收银台',
|
|
|
+ paytypeindex:"1",
|
|
|
+ paycode:'',
|
|
|
+ paytype:"微信支付",
|
|
|
+ qrCodeImg:"",
|
|
|
+ isLoading: false,
|
|
|
+ detail:{
|
|
|
+ orderInfo:{}
|
|
|
+ },
|
|
|
+
|
|
|
+ list:[],
|
|
|
+ goodsTpey:{},
|
|
|
+ leftShow:true,
|
|
|
+ id:''
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.id=this.$route.query.id;
|
|
|
+
|
|
|
+ if(this.$route.query.exchange) {
|
|
|
+ this.leftShow=false
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beginEndTime(str){
|
|
|
+ return str.replace(',','至');
|
|
|
+ },
|
|
|
+ getDetail(){
|
|
|
+ this.isLoading = true;
|
|
|
+
|
|
|
+ API_Pay.orderDetail({id:this.id}).then(res=>{
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ this.detail=res;
|
|
|
+ this.list=res.list;
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectPay() {
|
|
|
+ var picker = new mui.PopPicker();
|
|
|
+
|
|
|
+ picker.setData([{
|
|
|
+ text: "微信支付",
|
|
|
+ value: '1'
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ {
|
|
|
+ text: "支付宝扫码",
|
|
|
+ value: '2'
|
|
|
+ }
|
|
|
+ // ,
|
|
|
+ // {
|
|
|
+ // text: "现场支付",
|
|
|
+ // value: '0'
|
|
|
+ // }
|
|
|
+ ]);
|
|
|
+
|
|
|
+ picker.show((selectItems) => {
|
|
|
+ this.paytypeindex=selectItems[0].value;
|
|
|
+ this.paytype=selectItems[0].text;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //info
|
|
|
+ goRecord() {
|
|
|
+
|
|
|
+ this.$router.push({
|
|
|
+ name: 'MasterMineBillRecord',
|
|
|
+ query: {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //提交表单
|
|
|
+ submit() {
|
|
|
+ this.isLoading=true;
|
|
|
+ if(this.paytypeindex=="1"){
|
|
|
+ API_Pay.wxJsapiPay(this.detail.orderInfo.id,'').then(data=>{
|
|
|
+
|
|
|
+ data.url=window.location.href.split("#")[0]+"/#/master/mine/bill/info?id="+this.id+"&exc=1";
|
|
|
+
|
|
|
+ this.isLoading=false;
|
|
|
+ wxPayJs(data)
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+
|
|
|
+ }else if(this.paytypeindex=="2"){
|
|
|
+ API_Pay.tradePrecreatePay(this.detail.orderInfo.id,'').then(url=>{
|
|
|
+ this.isLoading = false;
|
|
|
+ let qrcode = new QRCode('qrcode', {
|
|
|
+ width: 200,
|
|
|
+ height: 200,
|
|
|
+ text: url,
|
|
|
+ correctLevel: QRCode.CorrectLevel.M,
|
|
|
+
|
|
|
+ })
|
|
|
+ var canvas = document.getElementsByTagName('canvas')[0];
|
|
|
+ this.qrCodeImg = convertCanvasToImage(canvas);
|
|
|
+
|
|
|
+ var btnArray = ['关闭',"支付成功?"];
|
|
|
+ var _this=this
|
|
|
+ mui.confirm('<img src="'+this.qrCodeImg+'" >',
|
|
|
+
|
|
|
+ '请使用支付宝扫码', btnArray, function(e) {
|
|
|
+ if (e.index == 1) {
|
|
|
+ _this.$router.push({
|
|
|
+ name: 'MasterMineBillList',
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },asynCallBack(){
|
|
|
+ if(this.$route.query.exchange){
|
|
|
+ this.getDetail();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if(!this.$route.query.exchange){
|
|
|
+ this.getDetail();
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ openId: 'wx_openid',
|
|
|
+ token: 'token',
|
|
|
+ person_data: 'person_data',
|
|
|
+ person_popedom: 'person_popedom',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
