Teng's blog Teng's blog
首页
Java
H5前端
GitHub (opens new window)
首页
Java
H5前端
GitHub (opens new window)
  • 01.项目介绍
  • 02.后台系统-搭建项目
  • 03.后台系统-医院设置模块
  • 04.后台系统-统一异常处理
  • 05.后台系统-统一日志处理
  • 06.后台系统-搭建管理后台前端
  • 07.后台系统-医院设置前端
  • 08.后台系统-数据字典
  • 09.SpringCache+Redis缓存数据
  • 10.集成与配置Nginx
  • 11.启动医院接口模拟系统
  • 12.后台系统-上传医院信息
  • 13.后台系统-上传科室信息
  • 14.后台系统-上传排班信息
  • 15.搭建服务注册中心Nacos
  • 16.后台系统-医院管理
  • 17.后台系统-排班管理
  • 18.搭建服务网关Gateway
  • 19.前台系统-搭建前端环境
  • 20.前台系统-首页
  • 21.前台系统-医院详情页
  • 22.前台系统-用户登录
  • 23.后台系统-短信服务
  • 24.用户认证与网关整合
  • 25.前台系统-微信登录
  • 26.前台系统-实名认证
  • 27.前台系统-就诊人管理
  • 28.后台系统-平台用户管理
  • 29.前台系统-预约挂号详情
  • 30.前台系统-预约确认
  • 31.前台系统-预约下单
  • 32.前台系统-订单管理
  • 33.后台系统-订单管理
  • 34.前台系统-微信支付
  • 35.前台系统-取消预约
    • 需求分析
    • 后端实现 service-order
      • 配置证书 service-order
      • 添加获取支付记录
      • 添加退款记录实体 model
      • 添加退款记录mapper
      • 添加退款记录service接口与实现
      • 添加微信退款接口
      • 添加取消预约 service 接口与实现
      • 调整mq监听 service-hosp
      • 添加取消预约controller接口
    • 前端实现 yygh-site
      • 封装api
      • 修改页面组件
      • 关于测试
  • 36.前台系统-就医提醒
  • 37.后台系统-预约统计
  • 38.小结
  • 附录:医院接口模拟系统说明
  • 附录:在线预约挂号API接口文档
  • Project-尚医通
Shetengteng
2022-01-07

35.前台系统-取消预约

# 需求分析

取消订单分两种情况

  • 未支付取消订单,直接通知医院更新取消预约状态
  • 已支付取消订单,先退款给用户,然后通知医院更新取消预约状态

实现逻辑

  • 依据订单id得到订单信息
  • 判断订单的时间
  • 调用医院模拟系统取消预约
    • 参考【附录:医院接口模拟系统说明】 业务接口 -- 取消预约
  • 依据医院接口返回数据进行如下操作
    • 更新订单状态
    • 调用微信退款方法

# 后端实现 service-order

开发微信退款接口

参考文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_4

该接口需要使用证书,可以从本项目示例代码中获取

# 配置证书 service-order

请下载的证书放在自定义文件夹下,如D:/demo-file/yygh/cert

在application.properties文件配置证书路径

#证书
weixin.pay.cert=D:/demo-file/yygh/cert/apiclient_cert.p12
1
2

# 添加获取支付记录

通过订单号获取支付记录

在PaymentService类添加接口

package com.stt.yygh.order.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.stt.yygh.model.order.OrderInfo;
import com.stt.yygh.model.order.PaymentInfo;

import java.util.Map;

public interface PaymentService extends IService<PaymentInfo> {
...
    /**
     * 获取支付记录
     * @param orderId
     * @param paymentType
     * @return
     */
    PaymentInfo getPaymentInfo(Long orderId, Integer paymentType);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

对应实现

package com.stt.yygh.order.service.impl;
...
@Service
public class PaymentServiceImpl extends ServiceImpl<PaymentInfoMapper, PaymentInfo> implements PaymentService {
...
    @Override
    public PaymentInfo getPaymentInfo(Long orderId, Integer paymentType) {
        QueryWrapper<PaymentInfo> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("order_id", orderId);
        queryWrapper.eq("payment_type", paymentType);
        return baseMapper.selectOne(queryWrapper);
    }
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 添加退款记录实体 model

在model中添加 RefundInfo 类

package com.stt.yygh.model.order;

import com.stt.yygh.model.base.BaseEntity;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.math.BigDecimal;
import java.util.Date;

@Data
@ApiModel(description = "RefundInfo")
@TableName("refund_info")
public class RefundInfo extends BaseEntity {
	
	private static final long serialVersionUID = 1L;
	
	@ApiModelProperty(value = "对外业务编号")
	@TableField("out_trade_no")
	private String outTradeNo;

	@ApiModelProperty(value = "订单编号")
	@TableField("order_id")
	private Long orderId;

	@ApiModelProperty(value = "支付类型(微信 支付宝)")
	@TableField("payment_type")
	private Integer paymentType;

	@ApiModelProperty(value = "交易编号")
	@TableField("trade_no")
	private String tradeNo;

	@ApiModelProperty(value = "退款金额")
	@TableField("total_amount")
	private BigDecimal totalAmount;

	@ApiModelProperty(value = "交易内容")
	@TableField("subject")
	private String subject;

	@ApiModelProperty(value = "退款状态")
	@TableField("refund_status")
	private Integer refundStatus;

	@ApiModelProperty(value = "回调时间")
	@TableField("callback_time")
	private Date callbackTime;

	@ApiModelProperty(value = "回调信息")
	@TableField("callback_content")
	private String callbackContent;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

在model中添加退款记录状态枚举类

package com.stt.yygh.enums;

public enum RefundStatusEnum {
    UNREFUND(1,"退款中"),
    REFUND(2,"已退款");

    private Integer status ;

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    private String name ;

    RefundStatusEnum(Integer status, String name) {
        this.status = status;
        this.name=name;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 添加退款记录mapper

在serivce-order中添加 mapper类

package com.stt.yygh.order.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.stt.yygh.model.order.RefundInfo;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface RefundInfoMapper extends BaseMapper<RefundInfo> {
}
1
2
3
4
5
6
7
8
9

# 添加退款记录service接口与实现

在service-order中创建 RefundInfoService 类并,添加保存退款记录接口

package com.stt.yygh.order.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.stt.yygh.model.order.PaymentInfo;
import com.stt.yygh.model.order.RefundInfo;

public interface RefundInfoService extends IService<RefundInfo> {
    /**
     * 保存退款记录
     * @param paymentInfo
     */
    RefundInfo saveRefundInfo(PaymentInfo paymentInfo);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

对应实现

package com.stt.yygh.order.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.stt.yygh.enums.RefundStatusEnum;
import com.stt.yygh.model.order.PaymentInfo;
import com.stt.yygh.model.order.RefundInfo;
import com.stt.yygh.order.mapper.RefundInfoMapper;
import com.stt.yygh.order.service.RefundInfoService;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.Objects;

@Service
public class RefundInfoServiceImpl extends ServiceImpl<RefundInfoMapper, RefundInfo> implements RefundInfoService {
    
    @Override
    public RefundInfo saveRefundInfo(PaymentInfo paymentInfo) {
        RefundInfo re = this.getRefundInfo(paymentInfo);
        if(!Objects.isNull(re)){
            return re;
        }
        
        // 保存交易记录
        re = new RefundInfo();
        re.setCreateTime(new Date());
        re.setOrderId(paymentInfo.getOrderId());
        re.setPaymentType(paymentInfo.getPaymentType());
        re.setOutTradeNo(paymentInfo.getOutTradeNo());
        re.setRefundStatus(RefundStatusEnum.UNREFUND.getStatus());
        re.setSubject(paymentInfo.getSubject());
        re.setTotalAmount(paymentInfo.getTotalAmount());
        baseMapper.insert(re);
        return re;
    }
    
    private RefundInfo getRefundInfo(PaymentInfo paymentInfo){
        QueryWrapper<RefundInfo> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("order_id", paymentInfo.getOrderId());
        queryWrapper.eq("payment_type", paymentInfo.getPaymentType());
        return baseMapper.selectOne(queryWrapper);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 添加微信退款接口

在 WeixinService 中添加退款接口

package com.stt.yygh.order.service;

import java.util.Map;

public interface WeixinService {
...
    /***
     * 退款
     * @param orderId
     * @return
     */
    Boolean refund(Long orderId);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

对应实现

package com.stt.yygh.order.service.impl;

import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.github.wxpay.sdk.WXPayConstants;
import com.github.wxpay.sdk.WXPayUtil;
import com.stt.yygh.common.exception.YyghException;
import com.stt.yygh.common.result.ResultCodeEnum;
import com.stt.yygh.enums.OrderStatusEnum;
import com.stt.yygh.enums.PaymentStatusEnum;
import com.stt.yygh.enums.PaymentTypeEnum;
import com.stt.yygh.enums.RefundStatusEnum;
import com.stt.yygh.model.order.OrderInfo;
import com.stt.yygh.model.order.PaymentInfo;
import com.stt.yygh.model.order.RefundInfo;
import com.stt.yygh.order.service.OrderService;
import com.stt.yygh.order.service.PaymentService;
import com.stt.yygh.order.service.RefundInfoService;
import com.stt.yygh.order.service.WeixinService;
import com.stt.yygh.order.util.ConstantPropertiesUtils;
import com.stt.yygh.order.util.HttpClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.TimeUnit;

@Service
public class WeixinServiceImpl implements WeixinService {

    @Autowired
    private OrderService orderService;
    @Autowired
    private PaymentService paymentService;
    @Autowired
    private RedisTemplate redisTemplate;
    @Autowired
    private RefundInfoService refundInfoService;
...

    @Override
    public Boolean refund(Long orderId) {
        try {
            PaymentInfo payment = paymentService.getPaymentInfo(orderId, PaymentTypeEnum.WEIXIN.getStatus());
            // 创建退款记录
            RefundInfo refund = refundInfoService.saveRefundInfo(payment);
            // 已退款则返回成功
            if (Objects.equals(refund.getRefundStatus(), RefundStatusEnum.REFUND.getStatus())) {
                return true;
            }
            Map<String, String> param = createRefundParamForWeixin(payment);
            Map<String, String> result = refundByWeixin(param);
            if(Objects.isNull(result)) {
                return false;
            }
            // 更新 退款记录
            if (WXPayConstants.SUCCESS.equalsIgnoreCase(result.get("result_code"))) {
                refund.setCallbackTime(new Date());
                refund.setTradeNo(result.get("refund_id"));
                refund.setRefundStatus(RefundStatusEnum.REFUND.getStatus());
                refund.setCallbackContent(JSONObject.toJSONString(result));
                refundInfoService.updateById(refund);
                return true;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return false;
    }

    private Map<String, String> createRefundParamForWeixin(PaymentInfo payment) {
        Map<String, String> re = new HashMap<>(8);
        re.put("appid", ConstantPropertiesUtils.APPID);       //公众账号ID
        re.put("mch_id", ConstantPropertiesUtils.PARTNER);    //商户编号
        re.put("nonce_str", WXPayUtil.generateNonceStr());
        re.put("transaction_id", payment.getTradeNo());   //微信订单号
        re.put("out_trade_no", payment.getOutTradeNo());  //商户订单编号
        re.put("out_refund_no", "tk" + payment.getOutTradeNo()); //商户退款单号

//      paramMap.put("total_fee",paymentInfoQuery.getTotalAmount().multiply(new BigDecimal("100")).longValue()+"");
//      paramMap.put("refund_fee",paymentInfoQuery.getTotalAmount().multiply(new BigDecimal("100")).longValue()+"");

        // 用于测试
        re.put("total_fee", "1");
        re.put("refund_fee", "1");
        return re;
    }

    private Map<String, String> refundByWeixin(Map<String, String> param) throws Exception {
        String xmlParam = WXPayUtil.generateSignedXml(param, ConstantPropertiesUtils.PARTNERKEY);
        HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/secapi/pay/refund");
        client.setXmlParam(xmlParam);
        client.setHttps(true);
        // 注意:退款需要使用证书
        client.setCert(true);
        client.setCertPassword(ConstantPropertiesUtils.PARTNER);
        client.post();
        // 返回第三方的数据
        return WXPayUtil.xmlToMap(client.getContent());
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

# 添加取消预约 service 接口与实现

在 OrderService 中添加取消订单接口

package com.stt.yygh.order.service;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.stt.yygh.model.order.OrderInfo;
import com.stt.yygh.vo.order.OrderQueryVo;

import java.util.Map;

public interface OrderService extends IService<OrderInfo> {
...
   // 取消订单
    Boolean cancelOrder(Long orderId);

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

对应实现

package com.stt.yygh.order.service.impl;

import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.stt.yygh.common.exception.YyghException;
import com.stt.yygh.common.helper.HttpRequestHelper;
import com.stt.yygh.common.result.ResultCodeEnum;
import com.stt.yygh.enums.OrderStatusEnum;
import com.stt.yygh.hosp.client.HospitalFeignClient;
import com.stt.yygh.model.order.OrderInfo;
import com.stt.yygh.model.user.Patient;
import com.stt.yygh.order.mapper.OrderInfoMapper;
import com.stt.yygh.order.service.OrderService;
import com.stt.yygh.order.service.WeixinService;
import com.stt.yygh.rabbitmq.MqConst;
import com.stt.yygh.rabbitmq.RabbitService;
import com.stt.yygh.user.client.PatientFeignClient;
import com.stt.yygh.vo.order.OrderMqVo;
import com.stt.yygh.vo.hosp.ScheduleOrderVo;
import com.stt.yygh.vo.hosp.SignInfoVo;
import com.stt.yygh.vo.msm.MsmVo;
import com.stt.yygh.vo.order.OrderQueryVo;
import org.joda.time.DateTime;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;

import java.util.HashMap;
import java.util.Map;
import java.util.Objects;
import java.util.Random;

@Service
public class OrderServiceImpl extends ServiceImpl<OrderInfoMapper, OrderInfo> implements OrderService {

    @Autowired
    private PatientFeignClient patientFeignClient;

    @Autowired
    private HospitalFeignClient hospitalFeignClient;

    @Autowired
    private RabbitService rabbitService;

    @Autowired
    private WeixinService weixinService;
...
    @Override
    public Boolean cancelOrder(Long orderId) {
        OrderInfo order = this.getById(orderId);
        //当前时间大约退号时间,不能取消预约
        DateTime quitTime = new DateTime(order.getQuitTime());
        if (quitTime.isBeforeNow()) {
            throw new YyghException(ResultCodeEnum.CANCEL_ORDER_NO);
        }
        // 访问模拟系统取消订单
        remoteHospSystemForCancelOrder(order);

        if (Objects.equals(order.getOrderStatus(), OrderStatusEnum.PAID.getStatus())) {
            //已支付 调用微信服务进行退款操作,退款失败抛出异常
            if (!weixinService.refund(orderId)) {
                throw new YyghException(ResultCodeEnum.CANCEL_ORDER_FAIL);
            }
        }
        //更改订单状态
        order.setOrderStatus(OrderStatusEnum.CANCLE.getStatus());
        this.updateById(order);

        // 更新预约个数,以及发送短信通知
        updateScheduleInfoAndSendSMS(order);

        return true;
    }

    // 访问医院模拟系统,进行取消订单操作
    private void remoteHospSystemForCancelOrder(OrderInfo order) {
        SignInfoVo signInfoVo = hospitalFeignClient.getSignInfoVo(order.getHoscode());
        if (Objects.isNull(signInfoVo)) {
            throw new YyghException(ResultCodeEnum.PARAM_ERROR);
        }
        Map<String, Object> param = new HashMap<>();
        param.put("hoscode", order.getHoscode());
        param.put("hosRecordId", order.getHosRecordId());
        param.put("timestamp", HttpRequestHelper.getTimestamp());
        param.put("sign", HttpRequestHelper.getSign(param, signInfoVo.getSignKey()));

        JSONObject re = HttpRequestHelper.sendRequest(param, signInfoVo.getApiUrl() + "/order/updateCancelStatus");

        if (!Objects.equals(re.getInteger("code"), 200)) {
            throw new YyghException(re.getString("message"), ResultCodeEnum.FAIL.getCode());
        }
    }

    private void updateScheduleInfoAndSendSMS(OrderInfo order){
        //短信提示
        MsmVo msm = new MsmVo();
        msm.setPhone(order.getPatientPhone());
        msm.setTemplateCode("SMS_194640722");
        String reserveDate = new DateTime(order.getReserveDate()).toString("yyyy-MM-dd") + (order.getReserveTime() == 0 ? "上午" : "下午");
        Map<String, Object> param = new HashMap<String, Object>() {{
            put("title", order.getHosname() + "|" + order.getDepname() + "|" + order.getTitle());
            put("reserveDate", reserveDate);
            put("name", order.getPatientName());
            // 由于测试环境只能使用固定测试模板,同时模板只能接受code字段,设置固定值,用于区分
            put("code", "22222");
        }};
        msm.setParam(param);
        
        //发送mq信息更新预约数 与下单成功更新预约数使用相同的mq信息,不设置可预约数与剩余预约数,接收端可预约数减1即可
        OrderMqVo orderMq = new OrderMqVo();
     	orderMq.setScheduleId(order.getScheduleId().split("@")[1]);
        orderMq.setMsmVo(msm);
        rabbitService.sendMessage(MqConst.EXCHANGE_DIRECT_ORDER, MqConst.ROUTING_ORDER, orderMq);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

# 调整mq监听 service-hosp

修改HospitalReceiver 类,增加 取消预约并更新预约数逻辑

package com.stt.yygh.hosp.receiver;

import com.rabbitmq.client.Channel;
import com.stt.yygh.hosp.service.ScheduleService;
import com.stt.yygh.model.hosp.Schedule;
import com.stt.yygh.rabbitmq.MqConst;
import com.stt.yygh.rabbitmq.RabbitService;
import com.stt.yygh.vo.o.OrderMqVo;
import com.stt.yygh.vo.msm.MsmVo;
import org.springframework.amqp.core.Message;
import org.springframework.amqp.rabbit.annotation.Exchange;
import org.springframework.amqp.rabbit.annotation.Queue;
import org.springframework.amqp.rabbit.annotation.QueueBinding;
import org.springframework.amqp.rabbit.annotation.RabbitListener;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.Objects;

@Component
public class HospitalReceiver {

    @Autowired
    private ScheduleService scheduleService;

    @Autowired
    private RabbitService rabbitService;

    @RabbitListener(bindings = @QueueBinding(
            value = @Queue(value = MqConst.QUEUE_ORDER, durable = "true"),
            exchange = @Exchange(value = MqConst.EXCHANGE_DIRECT_ORDER),
            key = {MqConst.ROUTING_ORDER}))
    public void receiver(OrderMqVo orderMqVo, Message message, Channel channel) throws IOException {
        Schedule schedule = scheduleService.getById(orderMqVo.getScheduleId());
        if (Objects.isNull(orderMqVo.getAvailableNumber())) {
            //取消预约 更新预约数
            schedule.setAvailableNumber(schedule.getAvailableNumber() + 1);
        } else {
            //下单成功更新预约数
            schedule.setReservedNumber(orderMqVo.getReservedNumber());
            schedule.setAvailableNumber(orderMqVo.getAvailableNumber());
        }
        scheduleService.update(schedule);
        //订单更新成功后发送短信mq
        MsmVo msmVo = orderMqVo.getMsmVo();
        if (!Objects.isNull(msmVo)) {
            rabbitService.sendMessage(MqConst.EXCHANGE_DIRECT_MSM, MqConst.ROUTING_MSM_ITEM, msmVo);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 添加取消预约controller接口

在OrderApiController添加方法

package com.stt.yygh.order.controller;
...
@Api(tags = "订单接口")
@RestController
@RequestMapping("/api/order/orderInfo")
public class OrderApiController {

    @Autowired
    private OrderService service;
...
    @ApiOperation(value = "取消预约")
    @GetMapping("auth/cancelOrder/{orderId}")
    public Result cancelOrder(@ApiParam(name = "orderId", value = "订单id", required = true)
                              @PathVariable("orderId") Long orderId) {
        return Result.ok(service.cancelOrder(orderId));
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 前端实现 yygh-site

# 封装api

在 /api/order/weixin.js 文件中添加如下接口

import request from '@/utils/request'
...
export function cancelOrder(orderId) {
  return request({
    url: `/api/order/orderInfo/auth/cancelOrder/${orderId}`,
    method: 'get'
  })
}
1
2
3
4
5
6
7
8

# 修改页面组件

修改/pages/order/show.vue组件




























 





 
 
 
 
 
 
 
 
 
 
 
 
 
 





<template>
  <!-- header -->
  <div class="nav-container page-component">
...
    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="order-detail">
...
        <div class="bottom-wrapper mt60" v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
          <div class="button-wrapper">
            <div class="v-button white" @click="cancelOrder()">取消预约</div>
          </div>
          <div class="button-wrapper ml20" v-if="orderInfo.orderStatus == 0">
            <div class="v-button" @click="pay()">支付</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
...
  </div>
  <!-- footer -->
</template>
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import { getOrders } from '@/api/order/orderInfo'
import { cancelOrder, createNative, queryPayStatus } from '@/api/order/weixin'

export default {
...
  methods: {
...
    cancelOrder() {
      this.$confirm('确定取消预约吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // promise
        return cancelOrder(this.orderId)
      }).then((res) => {
        this.$message.success('取消成功')
        this.init()
      }).catch(() => {
        this.$message.info('已取消取消预约')
      })
    }
  }
}
</script>
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 关于测试

由于本项目中的订单的日期比较旧,因此在测试的时候需要注释掉订单日期的判断

Last Updated: 2022/01/16, 11:29:51
34.前台系统-微信支付
36.前台系统-就医提醒

← 34.前台系统-微信支付 36.前台系统-就医提醒→

Theme by Vdoing | Copyright © 2021-2022 Shetengteng | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式