commit

src/main/java/io/v/nutz/zhgh/memberCost/controller/MemberPaymentMineController.java

@@ -1,12 +1,22 @@
 package io.v.nutz.zhgh.memberCost.controller;
 
+import cn.hutool.core.util.ObjectUtil;
+import cn.hutool.core.util.StrUtil;
+import cn.wizzer.framework.base.Result;
 import com.ijpay.wxpay.model.v3.Amount;
 import io.v.nutz.base.annontation.RepeatSubmit;
+import io.v.nutz.base.annontation.ViReturn;
 import io.v.nutz.base.payment.wxpay.service.WxPayCommonService;
 import io.v.nutz.base.payment.wxpay.vo.WxPayNeedParamVo;
+import io.v.nutz.base.query.PageForm;
+import io.v.nutz.web.commons.utils.ShiroUtil;
+import io.v.nutz.zhgh.memberCost.model.MemberPaymentInfo;
 import io.v.nutz.zhgh.memberCost.service.MemberPaymentService;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
+import org.nutz.dao.Cnd;
+import org.nutz.dao.Sqls;
+import org.nutz.dao.sql.Sql;
 import org.nutz.ioc.loader.annotation.Inject;
 import org.nutz.ioc.loader.annotation.IocBean;
 import org.nutz.mvc.annotation.At;
@@ -38,18 +48,60 @@ public class MemberPaymentMineController {
 
 
     @At
-    public Object pageData(){
-        return null;
+    @ViReturn
+    @RequiresPermissions("member.payment.mine")
+    public Object pageData(PageForm pageForm, Integer year, Integer isPay) {
+        Sql sql = Sqls.create("""
+                SELECT
+                	
+                	mpp.`year`,
+                	mpp.projectName,
+                	mpp.startTime,
+                	mpp.endTime,
+                	mpi.id,
+                	mpi.payId,
+                	mpi.isPayment,
+                	mpi.payPersonnel,
+                	mpi.personType,
+                	mpi.paymentMonth,
+                	mpc.paymentStartMonth,
+                	mpc.paymentEndMonth,
+                	mpc.payStandards
+                FROM
+                	`member_payment_info` mpi
+                	LEFT JOIN member_payment_project mpp ON mpi.paymentProjectId = mpp.id
+                	LEFT JOIN member_payment_config mpc ON mpc.id = mpp.configId
+                $condition
+                """);
+        Cnd cnd = Cnd.NEW();
+        cnd.andEX("YEAR(mpp.createTime)", "=", year);
+        cnd.andEX("mpi.userId", "=", ShiroUtil.getUserId());
+        cnd.andEX("mpp.isDisabled", "=", 0);
+        if (ObjectUtil.isNotNull(isPay)) {
+            cnd.and("mpi.isPayment", "=", isPay);
+        }
+        sql.setCondition(cnd);
+        return memberPaymentService.listPageMap(pageForm.getPageNumber(), pageForm.getPageSize(), sql);
     }
 
 
     @At
     @RepeatSubmit
-    public Object pcOrderPay(){
+    @RequiresPermissions("member.payment.mine")
+    public Object pcOrderPay(Integer paymentMoney) {
         WxPayNeedParamVo paramVo = new WxPayNeedParamVo();
         paramVo.setDescription("会费缴纳支付");
         paramVo.setAttach("");
-        paramVo.setAmount(new Amount().setTotal(1));
+        paramVo.setAmount(new Amount().setTotal(paymentMoney));
         return wxPayCommonService.nativePay(paramVo);
     }
+
+
+    @At
+    @RequiresPermissions("member.payment.mine")
+    public Object getIsPay(String paymentInfoId) {
+        MemberPaymentInfo info = memberPaymentService.dao().fetch(MemberPaymentInfo.class,
+                Cnd.where("id", "=", paymentInfoId).and("isPayment", "=", 1));
+        return Result.success(info);
+    }
 }

src/main/resources/static/assets/mobile/svg/memberPay/pcPaySuccess.svg

@@ -0,0 +1 @@
+<svg t="1741604634908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5087" width="32" height="32"><path d="M501.009067 0C224.50176 0 0.395947 229.198507 0.395947 512s224.105813 512 500.626773 512c276.514133 0 500.619947-229.198507 500.619947-512S777.434453 0 501.015893 0z m-39.103147 732.99968L257.938773 514.300587l52.210347-44.305067L428.168533 567.405227c48.011947-60.299947 155.56608-180.599467 303.506774-276.39808l12.417706 30.399146c-135.816533 131.50208-247.186773 316.798293-282.187093 411.600214z" fill="#06B464" p-id="5088"></path></svg>

src/main/resources/views/platform/membercost/mine/index.html

@@ -1,15 +1,310 @@
 <!--#
 layout("/layouts/platform.html"){
 #-->
-<div id="app" v-cloak></div>
+<style>
+    .payForm .el-form-item__label {
+        font-weight: bold;
+    }
+</style>
+<div id="app" v-cloak>
+    <guava ref="guava">
+        <template>
+            <el-card shadow="never">
+                <div class="search">
+                    <div class="search-item">
+                        <div class="search-item-label">年度：</div>
+                        <div class="search-item-option">
+                            <el-date-picker
+                                :clearable="false"
+                                @change="doSearch();getProjectList()"
+                                placeholder="选择年度"
+                                type="year"
+                                style="width: 100%"
+                                v-model="pageForm.year"
+                                value-format="yyyy"
+                            ></el-date-picker>
+                        </div>
+                    </div>
+                </div>
+            </el-card>
+            <el-card shadow="never">
+                <table-tool label="缴费列表" :app="this">
+                    <template #func>
+                        <el-radio-group @change="doSearch" class="mr10" size="small"
+                                        v-model="pageForm.isPay">
+                            <el-radio-button :label="null">全部</el-radio-button>
+                            <el-radio-button :label="true">已缴</el-radio-button>
+                            <el-radio-button :label="false">未缴</el-radio-button>
+                        </el-radio-group>
+                    </template>
+                </table-tool>
+                <el-table
+                    :data="tableData"
+                    :size="tableSize"
+                    @sort-change="pageOrder"
+                    class="vi-table"
+                    ref="table"
+                    row-key="id"
+                    style="width: 100%"
+                    v-loading="tableLoading"
+                >
+                    <el-table-column
+                        :index="indexMethod"
+                        align="center"
+                        header-align="center"
+                        label="序号"
+                        type="index"
+                        width="80px"
+                    ></el-table-column>
+                    <el-table-column
+                        :label="column.label"
+                        :prop="column.prop"
+                        :sortable="column.sortable"
+                        align="center"
+                        header-align="center"
+                        show-overflow-tooltip
+                        v-for="column in tableColumns"
+                    >
+                        <template scope="{row}" v-if="column.prop==='isPayment'">
+                            <span style="color: #00aa3a" v-if="row.isPayment">已缴</span>
+                            <span style="color: red" v-else>未缴</span>
+                        </template>
+                        <template scope="{row}" v-else-if="column.prop==='paymentStartMonth'">
+                            {{row.paymentStartMonth}}至{{row.paymentEndMonth}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column align="center" header-align="center" label="操作"
+                                     prop="userOnline" width="200px">
+                        <template scope="{row}">
+                            <el-button :disabled="row.isPayment" @click="openPay(row)"
+                                       size="mini" type="primary">缴费
+                            </el-button>
+                            <el-button @click="openPay(row)"
+                                       size="mini" type="primary">缴费
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <!--#include("/layouts/pagination.html"){}#-->
+            </el-card>
+        </template>
+    </guava>
+
+    <el-diaLog :close-on-click-modal="false" :visible.sync="payVisible" title="缴费" width="50%"
+               :before-close="clickClose">
+        <el-form ref="form" :model="formData" :rules="formRules" label-width="170px"
+                 label-suffix="：" class="payForm">
+
+            <el-steps :active="payActive" finish-status="success">
+                <el-step title="计算缴费金额"></el-step>
+                <el-step title="生成缴费二维码"></el-step>
+                <el-step title="完成"></el-step>
+            </el-steps>
+            <div v-if="payActive===0" class="mt25">
+                <el-form-item label="缴费所属时间">
+                    <div>{{formData.paymentStartMonth}}至{{formData.paymentEndMonth}}</div>
+                </el-form-item>
+                <el-form-item label="缴费标准">
+                    <div style="color: red"
+                         v-if="formData.payModeValueList&&formData.payModeValueList.length>0">
+                        (
+                        <template v-for="(o,i) in formData.payModeValueList">
+                            {{o.name}}
+                            <template v-if="i !=formData.payModeValueList.length-1">+</template>
+                        </template>
+                        ) * 0.5% * {{formData.paymentMonth}}个月
+                    </div>
+                    <div v-else>固定金额缴费</div>
+                </el-form-item>
+                <!--如果是根据比例算的-->
+                <div v-if="formData.payModeValueList&&formData.payModeValueList.length>0">
+
+                    <template v-for="(o,i) in formData.payModeValueList" :key="i">
+                        <el-form-item :label="o.name">
+                            <el-input-number v-model="o.value" :min="0" :max="1000000"
+                                             :precision="2"
+                                             placeholder="请输入缴费金额"
+                                             @change="changePayModeValue(o)"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </div>
+                <el-form-item label="支付金额">
+                    <div style="color: #2cd000;font-size: 25px">¥ {{formData.paymentMoney}}</div>
+                </el-form-item>
+            </div>
+
+            <div v-if="payActive===1" class="mt25">
+                <el-form-item label="商品订单">
+                    {{formData.tradingOrderNo}}
+                </el-form-item>
+                <el-form-item label="支付金额">
+                    <div style="color: #2cd000;font-size: 25px">¥ {{formData.paymentMoney}}</div>
+                </el-form-item>
+                <div style="width: 100%;">
+                    <el-row :gutter="20">
+                        <el-col :span="12" v-loading="qrcodeLoading">
+                            <div id="qrcode" style="width: 60%;left: 0;right: 0;margin: auto"></div>
+                            <div style="display: flex;justify-content: center">
+                                <span
+                                    style="font-weight: bold;
+                                    font-size: 15px;
+                                    color: #fbfbfb;
+                                    background-color: rgb(44, 208, 0);
+                                    height: 30px;
+                                    width: 60%;
+                                    display: flex;
+                                    justify-content: center;
+                                    align-items: center;">
+                                    请打开手机微信，扫一扫完成支付</span>
+                            </div>
+                        </el-col>
+                        <el-col :span="12">
+                            <div>
+                                <el-image src="/assets/mobile/svg/memberPay/wx_img.png"></el-image>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+            <div v-if="payActive===3">
+
+                <div
+                    style="margin-top: 35px;background-color: RGB(245, 254, 243);height: 100px;display: flex;align-items: center;justify-content: center">
+                    <div>
+                        <el-image
+                            src="/assets/mobile/svg/memberPay/pcPaySuccess.svg"></el-image>
+                    </div>
+                    <div style="font-weight: bold;font-size: 25px">支付成功!</div>
+                </div>
+                <el-form-item label="商品订单">
+                    {{viewInfo.tradingOrderNo}}
+                </el-form-item>
+                <el-form-item label="支付金额">
+                    <div style="color: #2cd000;font-size: 25px">¥ {{viewInfo.paymentMoney}}</div>
+                </el-form-item>
+
+            </div>
+        </el-form>
+        <div style="text-align: right">
+            <span>
+                <el-button @click="clickClose">关 闭</el-button>
+                <el-button @click="next" v-if="payActive===0"
+                           type="primary">下一步</el-button>
+            </span>
+        </div>
+    </el-diaLog>
+
+</div>
 <script>
-    new Vue({
+    const vue = new Vue({
         el: "#app",
+        mixins: [initTableMixins],
         data() {
-            return {}
+            return {
+                tableColumns: [
+                    { prop: "year", label: "年度", sortable: true },
+                    { prop: "projectName", label: "项目名称", sortable: true },
+                    { prop: "startTime", label: "缴费开始时间", sortable: true },
+                    { prop: "endTime", label: "缴费截止时间", sortable: true },
+                    { prop: "paymentStartMonth", label: "缴费所属时间", sortable: true },
+                    { prop: "isPayment", label: "是否缴费", sortable: true }
+                ],
+                pageForm: {
+                    isPay: false,
+                    year: moment().format("YYYY")
+                },
+                payVisible: false,
+                payActive: 0,
+                intervalTimer: null,
+                qrcodeLoading: false,
+                payInfo: {}
+            }
         },
-        methods: {},
-        created() {}
+        methods: {
+            clickClose() {
+                if (this.payActive === 3) {
+                    this.payVisible = false
+                } else {
+                    this.$confirm("您确定要关闭当前缴费吗?关闭后将不会保存当前数据", "提示", {
+                        confirmButtonText: "确定",
+                        cancelButtonText: "取消",
+                        type: "warning"
+                    }).then(() => {
+                        this.payVisible = false
+                    })
+                }
+                clearInterval(this.intervalTimer)
+            },
+            next() {
+                this.$confirm("您确定要生成缴费二维码吗?当前需缴费【" + this.formData.paymentMoney + "】元", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(async () => {
+                    this.qrcodeLoading = true
+                    const paymentMoney = Math.floor(this.formData.paymentMoney * 100)
+                    this.payActive = this.payActive + 1
+                    const resp = await $.post("/platform/member/payment/mine/pcOrderPay", { paymentMoney })
+                    if (resp.code === 0) {
+                        const data = JSON.parse(resp.data)
+                        this.$nextTick(() => {
+                            $("#qrcode").html("")
+                            $("#qrcode").qrcode({ //设置css
+                                render: "canvas", //二维码的生成方式
+                                width: $("#qrcode").width(), //生成二维码的宽度
+                                height: $("#qrcode").width(), //生成二维码的高度
+                                text: data.code_url,
+                                correctLevel: 3 //容错级别，默认为2，最高为3，为了让用户扫码最快，容错级别应当设为最低
+                            })
+                        })
+                        await this.getIsPay()
+                    }
+                    this.qrcodeLoading = false
+                })
+            },
+            async getIsPay() {
+                this.intervalTimer = setInterval(async () => {
+                    const resp = await $.get(loc() + "/getIsPay", { paymentInfoId: this.formData.paymentInfoId })
+                    if (resp.code === 0) {
+                        if (resp.data) {
+                            this.payInfo = resp.data
+                            this.payActive = 3
+                            clearInterval(this.intervalTimer)
+                        }
+                    }
+
+                }, 4000)
+            },
+            changePayModeValue() {
+                let paymentMoney = this.formData.payModeValueList.reduce((a, b) => {
+                    return a + b.value
+                }, 0)
+                this.$set(this.formData, "paymentMoney", parseFloat((paymentMoney * 0.005 * this.formData.paymentMonth).toFixed(2)))
+            },
+            openPay(row) {
+                const payStandards = JSON.parse(row.payStandards)
+                const payStandard = payStandards.find(p => p.payPersonnel === row.payPersonnel && p.personType === row.personType)
+                this.$set(this.formData, "paymentMonth", row.paymentMonth)
+                this.$set(this.formData, "paymentStartMonth", row.paymentStartMonth)
+                this.$set(this.formData, "paymentEndMonth", row.paymentEndMonth)
+                this.$set(this.formData, "paymentInfoId", row.id)
+                if (payStandard.payModeValue) {
+                    this.$set(this.formData, "payModeValueList", [])
+                    this.$set(this.formData, "paymentMoney", payStandard.payModeValue)
+                } else {
+                    this.$set(this.formData, "payModeValueList", payStandard.payModeValueList)
+                    this.$set(this.formData, "paymentMoney", 0)
+                }
+
+
+                this.payVisible = true
+            },
+            doSubmit() {
+            }
+        },
+        created() {
+            this.pageData()
+        }
     })
 </script>
 <!--#