결제금액 제외한 주문서 초본이다.
진입 시 사용자의 가입정보가 기본으로 불려오고,
사용자 본인 외 다른 수령인정보 직접입력 선택 시 입력란이 비워지고,
다시는 본인 정보를 불러올 수도 있다.
가입정보 데이터는 users에 있고, 수령인정보 새로 작성 시 orders에 저정될 예정이다.
미래의 나를 위한 한마디: 계정 (사용자 & 관리자 포함) 통합식별 id를 동일 필드명으로 지정하고, 값은 hj63bzl7 식으로 불규칙적으로 변형해보자.
1, Vo
1.1,
public class UserVo { //login과는 무관하며 order 정보엔 참조 필요
private String uid;
private String username;
private String uname;
private String utel;
private String umail;
private String uadd;
private String detailAddress;
}1.2,
public class OrdVo {
private String oid;
private String uid; // 사용자 id
private String username; // 당시 로그인 id (관리자 포함)
private String cartid;
private String product_code;
//해당 테이블에 있는 값
private String omethod;
private String odate;
private String ostatus;
private String oname;
private String otel;
private String omail; //결제내역 송부용
private String oadd;
private String odetailAddress;
//users와 join
private String uname;
private String utel;
private String umail; //결제내역 송부용
private String uadd;
private String detailAddress;
//cart와 join
private int pquantity;
private String[] selectedCartItems;
//products와 join
private String pname;
private String pimgStr;
private int pprice;
private int pdelifee;
//테이블엔 없고 Vo에만 있는 값
private int totalPay;
private int totalPaySum;
}2, Mapper
@Mapper
public interface OrdMapper {
//test. user정보 불러오기
@Select ("select uname, utel, umail, uadd, detailAddress "
+ "from users "
+ "where uid=#{username}")
UserVo userInfo (UserVo vo); }3, Service
@Service
public class OrdSvc {
@Autowired
OrdMapper ordMapper;
//orderTest에서 user정보 불러오기
public UserVo userInfo(UserVo vo) {
return ordMapper.userInfo(vo);
} }4, Ctrl
@RequestMapping("/ord/")
@Controller
public class OrdCtrl {
@Autowired
OrdSvc ordSvc;
@Autowired
HttpSession session;
@GetMapping("orderTest")
public String orderTest(Model model, UserVo vo) {
System.out.println("orderTest 진입");
String username = (String) session.getAttribute("username");
vo.setUsername(username); //프론트에 username만 전달됨. uid=null
model.addAttribute("userinfo", ordSvc.userInfo(vo));
return "ord/orderTest";
} }5, html
<form action="" method="post" id="orderForm">
<div class="orderForm-container">
<h3>수령인 정보</h3>
<!-- 상단 -->
<div style="width: 100%; display: flex; justify-content: flex-end; margin-bottom: 10px; margin-right: 10px;">
<a href="javascript:void(0);" onclick="clearFields()">🎁 수령인정보 직접입력</a>
|
<a href="javascript:void(0);" onclick="resetForm()">내정보 불러오기</a>
</div>
<!-- 상단 끝 -->
<!-- 정보입력란 -->
<div class="form-group">
<label for="oname"><strong>oname</strong></label>
<input type="text" id="oname" name="oname" th:value="${userinfo.uname}" required>
</div>
<div class="form-group">
<label for="otel"><strong>otel</strong></label>
<input type="text" id="otel" name="otel" th:value="${userinfo.utel}" required>
</div>
<div class="form-group">
<label for="omail"><strong>omail</strong></label>
<input type="text" id="omail" name="omail" th:value="${userinfo.umail}" required>
</div>
<div class="form-group">
<label for="oadd"><strong>oadd</strong></label>
<input type="text" id="oadd" name="oadd" th:value="${userinfo.uadd}" required>
 
<button type="button" onclick="execDaumPostcode()" class="findAddr">주소 찾기</button>
</div>
<input type="hidden" id="postcode" name=postcode placeholder="우편번호">
<input type="hidden" id="extraAddress" name=extraAddress placeholder="참고항목">
<div class="form-group">
<label for="odetailAddress"><strong>odtlAddr</strong></label>
<input type="text" id="odetailAddress" name="odetailAddress" th:value="${userinfo.detailAddress}" required>
</div>
<br>
<!-- 정보입력란 끝 -->
<div class="separator-horizontal"></div> <!------------------------- 수평선 -------------------------->
<h3>주문정보</h3>
<div style="width: 100%; display: flex; justify-content: flex-start;">
<input type="hidden" name="totalPay"><!-- totalPay값 입력 받을 영역 -->
<span id="totalPayText">결제금액: </span><!-- totalPay값, 즉 예상결제액 표시할 영역 -->
<input type="hidden" name="cartid">
<input type="hidden" name="product_code">
pprice, pdelifee, 소계, 총계
</div>
<br><br>
<div align="center">
<button type="submit" class="button">결제하기</button>
</div>
</div>
</form>6, js
<script>
//수령인정보 직접입력 위해 값 비우기
function clearFields() {
document.getElementById('oname').value = '';
document.getElementById('otel').value = '';
document.getElementById('omail').value = '';
document.getElementById('oadd').value = '';
document.getElementById('odetailAddress').value = '';
}
//내정보 불러오기
function resetForm() {
document.getElementById('orderForm').reset();
}
</script>
<!-- 주소입력 위한 api -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("extraAddress").value = extraAddr;
} else {
document.getElementById("extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('postcode').value = data.zonecode;
document.getElementById("oadd").value = addr; //변수명 맞추기
// 커서를 상세주소 필드로 이동한다.
document.getElementById("odetailAddress").focus(); //변수명 맞추기
}
}).open();
}
</script>
<!-- 주소입력 위한 api 끝 -->
기기 좋아하는 여자