✅P273_商城业务-订单服务-订单确认页模拟运费效果

gong_yz大约 3 分钟谷粒商城

远程查询用户地址

cfmall-order/src/main/java/com/gyz/cfmall/order/feign/MemberFeignService.java

@FeignClient("cfmall-member")
public interface MemberFeignService {
    @GetMapping(value = "/member/memberreceiveaddress/info/{id}")
    R info(@PathVariable("id") Long id);
}

cfmall-member/src/main/java/com/gyz/cfmall/member/controller/MemberReceiveAddressController.java

/**
 * 信息
 */
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
    MemberReceiveAddressEntity memberReceiveAddress = memberReceiveAddressService.getById(id);

    return R.ok().put("memberReceiveAddress", memberReceiveAddress);
}

获取邮费

cfmall-ware/src/main/java/com/gyz/cfmall/ware/controller/WareInfoController.java

package com.gyz.cfmall.ware.controller;

import java.util.Arrays;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import com.gyz.cfmall.ware.entity.WareInfoEntity;
import com.gyz.cfmall.ware.service.WareInfoService;
import com.gyz.common.utils.PageUtils;
import com.gyz.common.utils.R;


/**
 * 仓库信息
 *
 * @author gong_yz
 */
@RestController
@RequestMapping("ware/wareinfo")
public class WareInfoController {
    @Autowired
    private WareInfoService wareInfoService;

    /**
     * 获取运费信息
     *
     * @return
     */
    @GetMapping(value = "/fare")
    public R getFare(@RequestParam("addrId") Long addrId) {
        String fare = wareInfoService.getFare(addrId);
        return R.ok().put("data", fare);
    }
}

cfmall-ware/src/main/java/com/gyz/cfmall/ware/service/impl/WareInfoServiceImpl.java

package com.gyz.cfmall.ware.service.impl;

import com.alibaba.fastjson.TypeReference;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.gyz.cfmall.ware.dao.WareInfoDao;
import com.gyz.cfmall.ware.entity.WareInfoEntity;
import com.gyz.cfmall.ware.feign.MemberFeignService;
import com.gyz.cfmall.ware.service.WareInfoService;
import com.gyz.cfmall.ware.vo.MemberAddressVo;
import com.gyz.common.utils.PageUtils;
import com.gyz.common.utils.Query;
import com.gyz.common.utils.R;
import org.apache.commons.lang.StringUtils;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.Map;


@Service("wareInfoService")
public class WareInfoServiceImpl extends ServiceImpl<WareInfoDao, WareInfoEntity> implements WareInfoService {

    @Resource
    private MemberFeignService memberFeignService;

    @Override
    public String getFare(Long addrId) {
        //收获地址的详细信息
        R addrInfo = memberFeignService.info(addrId);
        MemberAddressVo memberAddressVo = addrInfo.getData("memberReceiveAddress", new TypeReference<MemberAddressVo>() {
        });

        if (memberAddressVo != null) {
            String phone = memberAddressVo.getPhone();
            //模拟邮费计算
            String fare = phone.substring(phone.length() - 1);
            return fare;
        }
        return null;
    }
}

cfmall-ware/src/main/java/com/gyz/cfmall/ware/feign/MemberFeignService.java

package com.gyz.cfmall.ware.feign;

import com.gyz.common.utils.R;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 仓库信息
 *
 * @author gong_yz
 */
@FeignClient("cfmall-member")
public interface MemberFeignService {

    /**
     * 根据id获取用户地址信息
     * @param id
     * @return
     */
    @RequestMapping("/member/memberreceiveaddress/info/{id}")
    R info(@PathVariable("id") Long id);
}

cfmall-member/src/main/java/com/gyz/cfmall/member/controller/MemberReceiveAddressController.java

/**
 * 信息
 */
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
    MemberReceiveAddressEntity memberReceiveAddress = memberReceiveAddressService.getById(id);

    return R.ok().put("memberReceiveAddress", memberReceiveAddress);
}

地址高亮显示

cfmall-order/src/main/resources/templates/confirm.html

为div绑定class方便找到,自定义def属性存储默认地址值,默认地址为1,否则为0

高亮函数

function highligthtAddress() {
	//空格代表子元素
	$(".attr-item p").css({"border": "2px solid gray"});
	$(".addr-item p[def='1']").css({"border": "2px solid red"});
};

函数调用

自定义属性存储地址Id

为运费定义一个id,用于运费的回显

为应付总额定义一个id,用于计算应付总额的回显

为p标签绑定单击事件

function highligthtAddress() {
	//空格代表子元素
	$(".attr-item p").css({"border": "2px solid gray"});
	$(".addr-item p[def='1']").css({"border": "2px solid red"});
};

$(".addr-item p").click(function () {
	$(".addr-item p").attr("def", "0");
	$(this).attr("def", "1");
	highlightAddress();
	//获取到当前地址id
	var addrId = $(this).attr("addrId");
	//发送ajax请求获取运费信息
	getFare(addrId);
});

//查运费
function getFare(addrId) {
	$.get("http://cfmall.com/api/ware/wareinfo/fare?addrId=" + addrId, function (resp) {
		console.log(resp);
		$("#fareEle").text(resp.data);
		var total = [[${confirmOrderData.getTotal()}]];
		//设置运费
		$("#payPriceEle").text(total * 1 + resp.data * 1);
	})
};

默认地址的邮费查询