Merge remote-tracking branch 'origin/master'

src/apis/payment.js

@@ -32,7 +32,7 @@ export function wxJsapiPay(params,code) {
         method: 'get',
     })
 }
-//支付宝支付
+//支付宝支付(url)
 export function tradePrecreatePay(params,code) {
     var   url="";
     if(code){
@@ -42,4 +42,15 @@ export function tradePrecreatePay(params,code) {
         url: '/aliPay/tradePrecreatePay?orderId='+params+url,
         method: 'get',
     })
+}
+//微信支付(url)
+export function wxNativePay(params,code) {
+    var   url="";
+    if(code){
+        url='&popularizePersonId='+code;
+    }
+    return request({
+        url: '/wxPay/wxNativePay?orderId='+params+url,
+        method: 'get',
+    })
 }

src/projects/business/views/Master/Mine/Bill/Info.vue

@@ -43,7 +43,7 @@
 										</div>
 										<span class="mui-h2">{{mod.details}}元</span>
 									</div>
-                                    <p class="mui-card-footer">起止日期:{{mod.beginAndTime}}</p>
+                                    <p class="mui-card-footer">起止日期:{{beginEndTime(mod.beginEndTime)}}</p>
 								</li>
 							</ul>
 						</div>
@@ -121,6 +121,9 @@ export default {
       }
   },
   methods: {
+      beginEndTime(str){
+          return str.replace(',','至');
+      },
     getDetail() {
         this.isLoading = true;
 

src/projects/business/views/Master/Property/Cost/List.vue

@@ -1,51 +1,213 @@
 <template>
 <div>
-    <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">物业账单</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+    <common @asynCallBack="asynCallBack"></common>
+    <top-header :pageTitle="pageTitle"    ></top-header>
+
 		<div class="mui-content vongi-hdsq  vongi-admin-kqtj">
 			<div class="fyy-temper-date">
-				<a href="" class="mui-col-xs-6">缴费状态<span class="mui-icon iconfont icon-xiajiantou"></span></a>
-				<a href="" class="mui-col-xs-6">2020-12<span class="mui-icon iconfont icon-xiajiantou"></span></a>
+				<a href="" class="mui-col-xs-6" @click="selectStatus" >{{listForm.statusN}}<span class="mui-icon iconfont icon-xiajiantou"></span></a>
+				<a href="" class="mui-col-xs-6" @click="selectData">{{listForm.date}}<span class="mui-icon iconfont icon-xiajiantou"></span></a>
 			</div>
-			<div class="mui-slider-group">
+            <NullList :remark="'暂无账单记录'" v-if="!recordList.length"></NullList>
+
+            <div class="mui-slider-group">
 				<ul class="mui-table-view">
-					<li class="mui-table-view-cell">
-						<a href="">
+					<li class="mui-table-view-cell" v-for="mod in recordList">
+						<a  @click="goto(mod.orderId)">
 							<div class="mui-media-body mui-ellipsis">
-								缴费单位：荆州万乘企业管理咨询有限公司
+								缴费单位：{{mod.companyName}}
 							</div>
-							<div class='mui-ellipsis'>账单总额：<b class="colorfe616c">￥121907.50</b></div>
+							<div class='mui-ellipsis'>账单总额：<b class="colorfe616c">￥{{mod.totalFee}}</b></div>
 							<p class='flew-sp flew-items'>
-								推送时间：2020-10-10 10:00
-								<button type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">未支付</button>
-							</p>
-						</a>
-					</li>
-					<li class="mui-table-view-cell">
-						<a href="">
-							<div class="mui-media-body mui-ellipsis">
-								缴费单位：荆州万乘企业管理咨询有限公司
-							</div>
-							<div class='mui-ellipsis'>账单总额：<b class="colorfe616c">￥121907.50</b></div>
-							<p class='flew-sp flew-items'>
-								推送时间：2020-10-10 10:00
-								<button type="button" class="mui-btn mui-btn-green mui-btn-outlined">已支付</button>
+								推送时间：{{mod.pushTime}}
+								<button type="button" class="mui-btn  mui-btn-outlined" :class="mod.payStatus=='10'?'mui-btn-yellow':'mui-btn-green'">{{mod.payStatus=='10'?'未支付':'已支付'}}</button>
 							</p>
 						</a>
 					</li>
+
 				</ul>
 			</div>
-		</div>		
+		</div>
+    <loading :visible="isLoading"></loading>
+
 </div>
 </template>
 
+
 <script>
+    require('$project/assets/js/mui.picker.min.js');
+
+    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'
+    import isReachBottom from '$project/utils/isReachBottom'
+    import NullList from '$project/components/NullList.vue'
+    import {
+        hourDistance,
+        currentTimeStamp,
+        parseUnixTime
+    } from '$project/utils'
+    import {
+        mapGetters,
+        mapMutations
+    } from 'vuex'
+    export default {
+        name: 'MasterPropertyCostList',
+        components: {
+            Common,
+            Loading,
+            TopHeader,NullList
+        },
+        data() {
+            return {
+                pageTitle: '账单管理',
+
+                isLoading: false,
+                listForm: {
+                    pageIndex: 1,
+                    pageSize: 20,
+                    type:'public',
+                    date:'',
+                    totalPage: 1,
+                    status:'',
+                    statusN:'全部账单',
+
+                },
+                recordList: [],
+
+            }
+        },
+        created() {
+            this.listForm.date = parseUnixTime(currentTimeStamp(), '{y}-{m}');
+        },
+        methods: {
+            selectStatus(){
+                var picker = new mui.PopPicker();
+
+                picker.setData([
+                    {
+                        text:'全部账单',value:''
+                    },{
+                        text:'未支付',value:'10'
+                    },{
+                        text:'已支付',value:'20'
+                    }
+                ]);
+                var i=0;
+                if(this.listForm.status==''){
+                    i=0;
+                }else if(this.listForm.status=='10'){
+                    i=1;
+                }else{
+                    i=2;
+                }
+                picker.pickers[0].setSelectedIndex(i);
+
+                picker.show((selectItems) => {
+                    this.listForm.statusN = selectItems[0].text;
+                    this.listForm.status = selectItems[0].value;
+                    this.listForm.pageIndex = 1;
+                    this.getList();
+                });
+            },
+            //选择日期
+            selectData() {
+                var _this = this;
+                var picker = new mui.DtPicker({
+                    "type": "month",
+                    "beginYear": 2020,
+                    "endYear": 2040,
+                    "endDate": new Date(),
+                    "value": _this.listForm.date
+                });
+                picker.show(function(rs) {
+                    _this.listForm.date = rs.text;
+                    _this.listForm.pageIndex = 1;
+                    _this.getList();
+                    picker.dispose();
+                });
+            },
+
+
+            //info
+            goto(id) {
+
+                this.$router.push({
+                    name: 'MasterPropertyCostPay',
+                    query: {
+                        id: id
+                    }
+                })
+            },
+
+            //获取列表
+            getList() {
+                this.isLoading = true;
+                API_Pay.orderList(this.listForm).then(res => {
+                    var response=res;
+                    if (response) {
+                        if (this.listForm.pageIndex == 1) {
+                            this.recordList = response.data;
+                            this.listForm.pageIndex = response.pageNumber;
+                            this.listForm.totalPage = response.totalPage;
+                        } else {
+                            this.recordList = [
+                                ...this.recordList,
+                                ...response.data
+                            ];
+                        }
+                    }
+                    this.listForm.pageIndex++;
+                    this.isLoading = false;
+                }).catch(error => {
+                    this.isLoading = false;
+                    mui.toast(error);
+                })
+            },
+            //下拉事件
+            handleScrool() {
+                if (isReachBottom()) {
+                    console.log('到达底部')
+                    if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+                        this.getList();
+                    } else {
+                        return;
+                    }
+                }
+            },
+
+            asynCallBack() {
+
+            },
+        },
+        mounted() {
+            this.getList();
+            //监控下拉加载事件
+            var _this = this;
+            window.addEventListener('scroll', _this.handleScrool);
+        },
+        destroyed() {
+            //销毁监听事件
+            var _this = this;
+            window.removeEventListener('scroll', _this.handleScrool);
+        },
+        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>
 <style scoped src="$project/assets/css/sczpfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
+<style src="$project/assets/css/mui.picker.min.css"></style>
+
 <style>
 </style>

src/projects/business/views/Master/Property/Cost/Pay.vue

@@ -1,94 +1,205 @@
 <template>
 <div>
-    <header class="mui-bar mui-bar-nav">
-				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-				<h1 class="mui-title">账单详情</h1>
-			</header>
-			<div class="mui-content vongi-pay vongi-qingjiadt">
+    <common @asynCallBack="asynCallBack"></common>
+    <top-header :pageTitle="pageTitle"  ></top-header>
+
+    <div class="mui-content vongi-pay vongi-qingjiadt">
 				<div class="vongi-center mui-content-padded margin30">
-					<div class="vongi-zd vongi-zdto flew-items">
-						<img src="~$project/assets/img/payli.png" width="24">
-						<h3>11月半年度账单</h3>
-					</div>
-					<h1 class="margin10">121907.50</h1>
-					<h4 class="color55f868">已支付</h4>
+                    <div class="vongi-zd vongi-zdto flew-items">
+                        <img :src="detail.goodsPic" width="24">
+                        <h3>{{detail.billName}}</h3>
+                    </div>
+                    <h1 class="margin10">{{detail.totalFee}}</h1>
+					<h4 class="color55f868">{{detail.orderInfo.payStatusStr}}</h4>
 				</div>
 				<form class="mui-input-group">
-					
-					<div class="mui-input-row">
-						<label>缴费单位</label>
-						<span>荆州万乘企业管理咨询有限公司</span>
-					</div>
+
+                    <div class="mui-input-row">
+                        <label>缴费单位</label>
+                        <span>{{detail.companyName}}</span>
+                    </div>
                     <div class="mui-input-row">
 						<label>推送用户</label>
-						<span>陈冲</span>
+						<span>{{detail.personName}}</span>
 					</div>
-                    <div class="mui-input-row">
+                    <div class="mui-input-row" v-if="detail.orderInfo.payName">
 						<label>付款方式</label>
-						<span class="color55f868">微信支付</span>
-					</div>
-					<div class="mui-input-row">
-						<label>订单号</label>
-						<span>00000000</span>
-					</div>
-					<div class="mui-input-row">
-						<label>创建时间</label>
-						<span>2020-11-28 14:13</span>
+						<span class="color55f868">{{detail.orderInfo.payNameStr}}</span>
 					</div>
                     <div class="mui-input-row">
+                        <label>订单号</label>
+                        <span>{{detail.outOrderNo}}</span>
+                    </div>
+                    <div class="mui-input-row">
+                        <label>创建时间</label>
+                        <span>{{detail.createTime}}</span>
+                    </div>
+                    <div class="mui-input-row" v-if="detail.orderInfo.payName">
 						<label>缴费时间</label>
-						<span>2020-11-28 14:13</span>
+						<span>{{detail.orderInfo.payTime}}</span>
 					</div>			
 				</form>
 				<ul class="mui-table-view openfyy-list margin60">
 					<li class="mui-table-view-cell mui-collapse">
-						<a class="mui-navigate-right" href="#">账单明细</a>
+						<a class="mui-navigate-right"  >账单明细</a>
 						<div class="mui-collapse-content">
 							<ul class="mui-table-view vongi-pay-list openfyy-list">
-								<li class="mui-table-view-cell">
-									<div class=" mui-card-content-inner flew-sp">
-										<div class="mui-media-body">
-											<div class='mui-ellipsis flew-sp flew-items'><span class="color4fc5f7">电费</span>(22733-22678=55度)</div>
-											<p>生活缴费</p>
-										</div>
-										<span class="mui-h2">56.06元</span>
-									</div>
-									<p class="mui-card-footer">起止日期:2020-11-20至2021-05-19</p>
-								</li>
-								<li class="mui-table-view-cell">
-									<div class=" mui-card-content-inner flew-sp">
-										<div class="mui-media-body">
-											<div class='mui-ellipsis flew-sp flew-items'><span class="color4fc5f7">电费</span>(22733-22678=55度)</div>
-											<p>生活缴费</p>
-										</div>
-										<span class="mui-h2">56.06元</span>
-									</div>
-									<p class="mui-card-footer">起止日期:2020-11-20至2021-05-19</p>
-								</li>
+                                <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>
 					</li>					
 				</ul>
 				
 			</div>
-			<div class="fyy-footer vongi-footer">
+			<div class="fyy-footer vongi-footer" v-if="detail.payStatus==10">
 				<div class="vongi-yjbtn mui-right">
-					<button type="submit" class="mui-btn mui-btn-primary mui-btn-outlined marginl5">支付宝</button>
-					<button type="submit" class="mui-btn mui-btn-green mui-btn-outlined marginl5">微信支付</button>
+					<button type="submit" class="mui-btn mui-btn-primary mui-btn-outlined marginl5" @click="submit(2)">支付宝</button>
+					<button type="submit" class="mui-btn mui-btn-green mui-btn-outlined marginl5" @click="submit(1)">微信支付</button>
 				</div>
 			</div>
 			<!--弹窗-->
-			<div class="mui-popup mui-popup-in vongi-mui-pop">
+			<div class="mui-popup mui-popup-in vongi-mui-pop" v-show="qrcodeBool">
 				<div class="mui-popup-inner vongi-pop-inner">
-					<img src="~$project/assets/img/huodoma.png" width="100%"/>
-					<img src="~$project/assets/img/paywx.png" width="100"/>
-				</div>
+					<img id="qrcode" :src="qrCodeImg" width="100%"/>
+					<img src="~$project/assets/img/paywx.png" width="100" v-if="paytypeindex=='1'" />
+                    <img src="~$project/assets/img/payzfb.png" width="100"  v-if="paytypeindex=='2'" />
+
+                </div>
 			</div>
-			<div class="mui-popup-backdrop mui-active"></div>
+			<div class="mui-popup-backdrop mui-active" @click="qrcodeBool=false" v-if="qrcodeBool"></div>
+    <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";
+    import QRCode from 'qrcodejs2'
+
+    import { mapGetters, mapMutations } from "vuex";
+
+    import {
+        convertCanvasToImage,
+
+    } from "$project/utils";
+    export default {
+        name: "MasterMineBillInfo",
+        components: {
+            Common,
+            Loading,
+            TopHeader,
+        },
+        data() {
+            return {
+                pageTitle: "账单详情",
+
+                qrCodeImg: "",
+                isLoading: true,
+                detail: {
+                    orderInfo:{}
+                },
+                leftShow:true,
+
+                list: [],
+                goodsTpey: {},
+                id: "",
+                qrCodeImg:'',
+                qrcodeBool:false,
+                paytypeindex:'',
+            };
+        },
+        created() {
+            this.id = this.$route.query.id;
+
+        },
+        methods: {
+            beginEndTime(str){
+                return str.replace(',','至');
+            },
+            qrcode(url){
+
+                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);
+                this.qrcodeBool=true;
+
+            },
+            submit(paytypeindex) {
+                this.isLoading=true;
+                this.paytypeindex=paytypeindex;
+                if(paytypeindex=="1"){
+                    API_Pay.wxNativePay(this.id ,'').then(url=>{
+                        this.isLoading = false;
+
+                        this.qrcode(url);
+                    }).catch(error => {
+                        this.isLoading = false;
+                        mui.toast(error);
+                    })
+
+                }else if(paytypeindex=="2"){
+                    API_Pay.tradePrecreatePay(this.id ,'').then(url=>{
+                        this.isLoading = false;
+                        this.qrcode(url);
+                    }).catch(error => {
+                        this.isLoading = false;
+                        mui.toast(error);
+                    })
+                }
+
+
+            },
+            getDetail() {
+                this.isLoading = true;
+
+                API_Pay.orderDetail({ id: this.id })
+                    .then((res) => {
+
+                        this.detail=res;
+                        this.list=res.list;
+                        this.isLoading = false;
+
+                    })
+                    .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",
+            }),
+        },
+    };
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>