购物车地址可选

app/index/service/order/Checkout.php

@@ -14,6 +14,7 @@ namespace app\index\service\order;
 
 use app\index\model\Order as OrderModel;
 
+use app\index\model\User;
 use app\index\model\User as UserModel;
 use app\index\model\Goods as GoodsModel;
 use app\index\model\Setting as SettingModel;
@@ -307,9 +308,10 @@ class Checkout extends BaseService
     {
         // 系统支持的配送方式 (后台设置)
         $deliveryType = SettingModel::getItem(SettingEnum::DELIVERY)['delivery_type'];
-        if (!empty($this->param['address_id'])){
+        if (!empty($this->param['address_id'])) {
             $addr = UserAddress::detail(intval($this->param['address_id']));
-        }else{
+            User::update(['address_id' => intval($this->param['address_id'])], ['user_id' => $this->user['user_id']]);
+        } else {
             $addr = $this->user['address_default'];
         }
 
@@ -624,22 +626,25 @@ class Checkout extends BaseService
     private function setOrderExpress(): void
     {
         // 设置默认数据：配送费用
-        helper::setDataAttribute($this->goodsList, [
-            'expressPrice' => 0,
-        ], true);
-        // 当前用户收货城市id
-        $cityId = $this->user['address_default'] ? (int)$this->user['address_default']['city_id'] : 0;
-        // 初始化配送服务类
-        $ExpressService = new ExpressService($cityId, $this->goodsList);
-        // 验证商品是否在配送范围
-        $isIntraRegion = $ExpressService->isIntraRegion();
-        if ($cityId > 0 && $isIntraRegion == false) {
-            $notInRuleGoodsName = $ExpressService->getNotInRuleGoodsName();
-            $this->setError("很抱歉，您的收货地址不在商品 [{$notInRuleGoodsName}] 的配送范围内");
-        }
-        // 订单总运费金额
-        $this->orderData['isIntraRegion'] = $isIntraRegion;
-        $this->orderData['expressPrice'] = $ExpressService->getDeliveryFee();
+        /*        helper::setDataAttribute($this->goodsList, [
+                    'expressPrice' => 0,
+                ], true);
+                // 当前用户收货城市id
+                $cityId = $this->user['address_default'] ? (int)$this->user['address_default']['city_id'] : 0;
+                // 初始化配送服务类
+                $ExpressService = new ExpressService($cityId, $this->goodsList);
+                // 验证商品是否在配送范围
+                $isIntraRegion = $ExpressService->isIntraRegion();
+                if ($cityId > 0 && $isIntraRegion == false) {
+                    $notInRuleGoodsName = $ExpressService->getNotInRuleGoodsName();
+                    $this->setError("很抱歉，您的收货地址不在商品 [{$notInRuleGoodsName}] 的配送范围内");
+                }
+                // 订单总运费金额
+                $this->orderData['isIntraRegion'] = $isIntraRegion;
+                $this->orderData['expressPrice'] = $ExpressService->getDeliveryFee();*/
+
+        $this->orderData['isIntraRegion'] = true;
+        $this->orderData['expressPrice'] = "0.00";
     }
 
     /**

app/index/view/cart/shoppingCart.html

@@ -69,35 +69,26 @@
                         <p class="keyItem" id="addressText">{$full}</p>
                     </div>
                 </div>
-                <div class="windInfoBox">
-                    <p class="key" id="changeAddress">Change address</p> Or
+                <!-- 选择地址 -->
+                <div class="windInfoBox" id="selectABox">
                     <p class="key" id="selectAddress">Select address</p>
                 </div>
-            </div>
+                <!-- 地址列表模块 -->
+                <div id="addressListBox">
+                    <div id="addressList">
 
-            <!-- 选择地址模块 -->
-<!--            <div id="addressChooseContainer">
-                <div class="container">
-                    <h4>请选择一个选项：</h4>
-                    <div class="radio-item">
-                        <input type="radio" id="option1" name="options" value="选项1" class="selectOption">
-                        <label for="option1">选项1</label>
-                        <span class="delete-button" onclick="deleteOption('option1')">Delete</span>
-                        <span class="delete-button" onclick="deleteOption('option1')">设置默认地址</span>
                     </div>
-                    <div class="radio-item">
-                        <input type="radio" id="option2" name="options" value="选项2" class="selectOption">
-                        <label for="option2">选项2</label>
-                        <span class="delete-button" onclick="deleteOption('option2')">删除</span>
+                    <div class="selAddressButtonBox">
+                        <div id="selCancel">Cancel</div>
+                        <div id="selSave">Confirm</div>
                     </div>
-                    <div class="radio-item">
-                        <input type="radio" id="option3" name="options" value="选项3" class="selectOption">
-                        <label for="option3">选项3</label>
-                        <span class="delete-button" onclick="deleteOption('option3')">删除</span>
-                    </div>
-                    <input type="hidden" id="selectedOption" name="selectedOption" value="">
                 </div>
-            </div>-->
+                <div class="windInfoBox">
+                    <p class="key" id="changeAddress">Add address</p>
+                </div>
+            </div>
+
+            <!-- 选择地址模块 -->
 
             <!-- 填写地址模块 -->
             <div id="addressContainer">
@@ -190,6 +181,18 @@
         <img src="/assets/index/asstes/icon/loading.gif" alt="Jumping to paypal.">
     </div>
 </div>
+
+<!-- 删除地址弹窗 -->
+<div id="deleteAddressModal">
+    <div class="deleteAddressBox">
+        <p class="deteTips">Do you want to delete the address <span id="daleteAddInfo"></span></p>
+        <input type="hidden" id="deleteAddInfoId" value="0">
+        <div class="deteButtonBox">
+            <div id="cancelDelete">Cancel</div>
+            <div id="confirmDelete">Confirm</div>
+        </div>
+    </div>
+</div>
 {/block}
 
 {block name="scriptSrc"}
@@ -250,39 +253,39 @@
         //更改地址，需显示填写地址表单、取消保存按钮
         $("#changeAddress").on(tap, async function () {
             //获取地址列表
-/*            $.ajax({
-                url: "/index/address/list",
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'storeId': '10001',
-                    'platform': 'H5',
-                },
-                dataType: 'json',
-                success: function (obj) {
-                    if (obj.status === 200 || obj.status === '200') {
-                        console.log(obj.data)
-                        return false;
-                        showToast("Successful")
-                        window.location.href = '../cart/shoppingCart';
-                    } else if (obj.status === 401 || obj.status === '401') {
-                        window.location.replace('../passport/logIn.html')
-                    } else {
-                        showToast(obj.message)
-                    }
-                },
-                error: function (xhr, status, error) {
-                    reject(error);
-                }
-            });*/
-
-            $("#addressContainer").show(0)
+            /*            $.ajax({
+                            url: "/index/address/list",
+                            method: 'GET',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'storeId': '10001',
+                                'platform': 'H5',
+                            },
+                            dataType: 'json',
+                            success: function (obj) {
+                                if (obj.status === 200 || obj.status === '200') {
+                                    console.log(obj.data)
+                                    return false;
+                                    showToast("Successful")
+                                    window.location.href = '../cart/shoppingCart';
+                                } else if (obj.status === 401 || obj.status === '401') {
+                                    window.location.replace('../passport/logIn.html')
+                                } else {
+                                    showToast(obj.message)
+                                }
+                            },
+                            error: function (xhr, status, error) {
+                                reject(error);
+                            }
+                        });*/
+
+            $("#addressContainer").slideDown(200)
             $("#addressButModel").show(0)
         });
 
         //取消更改
         $("#addCancel").on(tap, async function () {
-            $("#addressContainer").hide(0)
+            $("#addressContainer").slideUp(200)
         });
 
         // 添加地址
@@ -371,7 +374,7 @@
                     $("#fullNameText").text(data.name + " " + data.last_name)
                     $("#contactNumberText").text(data.phone)
                     $("#emailText").text(data.email)
-                    $("#addressContainer").hide(0)
+                    $("#addressContainer").slideUp(200)
                 }, 2000)
 
             } else {
@@ -445,7 +448,7 @@
             const goodsSkuId = _this.closest(".productItem").attr("goods-sku-id");
             let goodsNum = parseInt(_this.closest(".productItem").attr("data-goods-num"));
             //console.log(productId, goodsId, goodsSkuId)
-            //商品增加
+            //商品增加          ,商品减少
             if (type === "add" || type === "reduce") {
                 if (type === "add") {
                     goodsNum += 1
@@ -483,7 +486,6 @@
 
                 return
             }
-            //商品减少
 
             //商品删除
             if (type === "delete") {
@@ -616,21 +618,129 @@
             window.location.href = "./shoppingCart.html"
         });
 
-/*        $(".selectOption").on(tap, function () {
-            console.log('so!!!')
-            var selectedOptionInput = document.getElementById('selectedOption');
-            selectedOptionInput.value = optionValue;
+        //当前选中的地址id
+        let currentAddressId = 1
+        //删除地址记录id
+        let deleteAddressId
+
+        //展开选择地址
+        $("#selectAddress").on(tap, function () {
+            $("#addressListBox").slideDown(200)
+        })
+        //收起地址
+        $("#selCancel").on(tap, function () {
+            $("#addressListBox").slideUp(200)
+        })
+
+        //收起地址
+        $("#selSave").on(tap, function () {
+            console.log(currentAddressId)
+
+            addressId = currentAddressId.address_id
+            $("#addressText").text(currentAddressId.detail + "," + currentAddressId.region.region + "(" + currentAddressId.zip_code + ")" + ",US")
+            $("#fullNameText").text(currentAddressId.name + " " + currentAddressId.last_name)
+            $("#contactNumberText").text(currentAddressId.phone)
+            $("#emailText").text(currentAddressId.email)
+
+            $("#addressListBox").slideUp(200)
+        })
 
-            // 如果你希望在选择后执行其他操作，可以在这里添加代码
-            // 例如提交表单、显示消息等
+        //获取地址列表
+        function getAddressList() {
+            let data = [];
+            $.get('/index/address/list', function (res) {
+                console.log(res.data.list);
+                data = res.data.list;
+                if (data && data.length > 0) {
+                    $("#selectABox").show(0)
+                    const addressListEle = $('#addressList');
+                    addressListEle.html("");
+                    data.forEach(function (item) {
+                        const isActive = item === currentAddressId;
+                        const activeClass = isActive ? "active" : "";
+
+                        const addressItem = $(`
+                    <div class="addressItem ${activeClass}" data-id="${item.address_id}">
+                        <div class="iconBox">
+                        <img class="noSel" src="/assets/index/asstes/icon/noSel.png" alt="">
+                        <img class="sel" src="/assets/index/asstes/icon/sel.png" alt="">
+                        </div>
+                        <p class="itAddInfo">
+                        ${item.name} ${item.last_name},To:${item.detail}, ${item.region.region} (US)
+                        </p>
+                        <div class="addressDelete">
+                        <p>Delete</p>
+                        </div>
+                    </div>
+                    `);
+
+                        // 添加点击事件处理程序到 addressItem
+                        addressItem.on("click", function () {
+                            // 更新 currentAddressId
+                            currentAddressId = item;
+                            $(this).addClass("active").siblings().removeClass("active")
+                        });
+
+                        // 添加点击事件处理程序到 addressDelete
+                        const addressDelete = addressItem.find(".addressDelete");
+                        addressDelete.on("click", function (event) {
+                            event.stopPropagation();
+                            deleteAddressId = item
+                            $("#deleteAddressModal").show(0)
+                            //显示删除信息
+                            $("#daleteAddInfo").text(item.address_id)
+                            $("#deleteAddInfoId").val(item.address_id)
+
+                        });
+                        addressListEle.append(addressItem);
+                    });
+                } else {
+                    $("#selectABox").hide(0)
+                }
+            })
+
+        }
+
+        //确认删除地址
+        $("#confirmDelete").on(tap, function () {
+            const deleteAddressId = $("#deleteAddInfoId").val()
+            $.get('/index/address/remove?addressId=' + deleteAddressId, function (res) {
+                if (res.status === 200 || res.status === "200") {
+                    showToast('Success')
+                    getAddressList()
+                } else {
+                    showToast('Something wrong')
+                }
+                $("#deleteAddressModal").hide(0)
+            })
+
+        })
+
+        //取消删除地址
+        $("#cancelDelete").on(tap, function () {
+            deleteAddressId = null
+            $("#deleteAddressModal").hide(0)
         })
 
-        function deleteOption(optionId) {
-            var optionElement = document.getElementById(optionId);
-            optionElement.parentNode.remove();
 
-            // 如果需要在删除选项后执行其他操作，可以在这里添加代码
-        }*/
+        getAddressList()
+
+
+        /*        $(".selectOption").on(tap, function () {
+                    console.log('so!!!')
+                    var selectedOptionInput = document.getElementById('selectedOption');
+                    selectedOptionInput.value = optionValue;
+
+                    // 如果你希望在选择后执行其他操作，可以在这里添加代码
+                    // 例如提交表单、显示消息等
+                })
+
+                function deleteOption(optionId) {
+                    var optionElement = document.getElementById(optionId);
+                    optionElement.parentNode.remove();
+
+                    // 如果需要在删除选项后执行其他操作，可以在这里添加代码
+                }*/
     })
 </script>
 

public/assets/index/css/shoppingCart.css

@@ -172,16 +172,171 @@ body{
 .windInfoBox.freeshipping .key{
     color: rgba(79, 73, 222, 1);
 }
-#changeAddress{
+
+/* ------------------------ */
+#selectABox{
+    display: none;
+}
+#selectAddress{
     cursor: pointer;
     color: rgba(79, 73, 222, 1);
+    padding: .04rem 0;
+    margin-bottom: .08rem;
+}
+#addressListBox{
+    padding-bottom: .24rem;   
+    display: none;
+}
+#addressList{
+    border: .02rem solid rgba(0, 0, 0, .05);
+    padding: .08rem;
+    border-radius: .08rem;
+    max-height: 3rem;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
 }
 
-#chooseAddress{
+#addressList::-webkit-scrollbar {
+    display: none;
+}
+.addressItem{
+    display: flex;
+    align-items: center;
     cursor: pointer;
+    padding: .06rem 0;
+}
+.addressItem .iconBox{
+    font-size: 0;
+    font-size: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: .24rem;
+    height: .24rem;
+    position: relative;
+}
+.addressItem .iconBox img{
+    width: .2rem;
+    height: .2rem;
+    position: absolute;
+    display: block;
+}
+.addressItem .iconBox img.sel{
+    width: .22rem;
+    height: .22rem;
+    display: none;
+}
+.addressItem.active .iconBox img.noSel{
+    display: none;
+}
+.addressItem.active .iconBox img.sel{
+    display: block;
+}
+.itAddInfo{
+    flex: 1;
+    padding: 0 .12rem;
+    font-size: .15rem;
+    color: #999999;
+    word-break: break-all;
+    line-height: 1.4;
+}
+.addressDelete{
+    color: rgba(79, 73, 222, 1);
+    font-size: .14rem;
+}
+
+.selAddressButtonBox{
+    display: flex;
+    align-items: center;
+    gap: .16rem;
+    justify-content: flex-end;
+    padding-top: .24rem;
+}
+#selCancel,#selSave{
+    background-color: rgba(79, 73, 222, 1);
+    color: #FFF;
+    font-size: .15rem;
+    border-radius: .04rem;
+    height: .4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2rem;
+    cursor: pointer;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box; 
+    box-sizing: border-box;
+}
+#selCancel{
+    border: .02rem solid rgba(0, 0, 0, .2);
+    background: transparent;
+    color: #434343;
+}
+#deleteAddressModal{
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, .5);
+    display: none;
+}
+#deleteAddressModal .deleteAddressBox{
+    border-radius: .06rem;
+    overflow: hidden;
+    margin: 25% auto 0 auto;
+    width: 4rem;
+    padding: .24rem;
+    background-color: #fff;
+    border-radius: .12rem;
+}
+.deteTips{
+    font-size: .24rem;
+    font-weight: bold;
+    word-break: break-all;
+    text-align: center;
+    padding: .12rem 0;
+    line-height: 1.5;
+} 
+.deteTips #daleteAddInfo{
     color: rgba(79, 73, 222, 1);
+}  
+.deteButtonBox{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: .24rem;
+}
+#cancelDelete,#confirmDelete{
+    background-color: rgba(79, 73, 222, 1);
+    color: #FFF;
+    font-size: .2rem;
+    border-radius: .04rem;
+    margin: 0 .24rem;
+    height: .5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.3rem;
+    cursor: pointer;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box; 
+    box-sizing: border-box;
+}
+#cancelDelete{
+    border: .02rem solid rgba(0, 0, 0, .2);
+    background: transparent;
+    color: #434343;
 }
+/* ------------------------ */
 
+
+#changeAddress{
+    cursor: pointer;
+    color: rgba(79, 73, 222, 1);
+}
 .totalBox{
     display: flex;
     align-items: center;
@@ -239,32 +394,6 @@ body{
     margin-bottom: .24rem;
     display: none;
 }
-.addressOptions{
-    display: flex;
-    align-items: center;
-    padding: .06rem 0;
-}
-
-.container {
-    max-width: 4.4rem;
-    //margin: 0 auto;
-    padding:.06rem 0;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: .26rem;
-}
-
-.radio-item {
-    margin-bottom: .04rem;
-    margin-left: .04rem;
-}
-
-.delete-button {
-    margin-right: .04rem;
-    cursor: pointer;
-    color: red;
-}
-
 .addressItem{
     display: flex;
     align-items: center;
@@ -434,6 +563,60 @@ body{
         font-size: .2rem;
         height: .5rem;
     }
+
+
+    /* ------------------------ */
+    .windContainer{
+        width: auto;
+        padding-left: .52rem;
+        padding-right: .52rem;
+    }
+    #addressList{
+        padding: .12rem;
+        max-height: 4rem;
+    }
+    .addressItem{
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: .12rem 0;
+    }
+    .addressItem .iconBox{
+        width: .26rem;
+        height: .26rem;
+    }
+    .addressItem .iconBox img{
+        width: .24rem;
+        height: .24rem;
+    }
+    .addressItem .iconBox img.sel{
+        width: .26rem;
+        height: .26rem;
+    }
+    .itAddInfo{
+        font-size: .22rem;
+    }
+    .addressDelete{
+        color: rgba(79, 73, 222, 1);
+        font-size: .22rem;
+    }
+    #selCancel,#selSave{
+        font-size: .2rem;
+        height: .5rem;
+    }
+    #deleteAddressModal .deleteAddressBox{
+        width: 5rem;
+        padding: .36rem .24rem;
+    }
+    .deteTips{
+        font-size: .28rem;
+        line-height: 1.5;
+    }   
+    #cancelDelete,#confirmDelete{
+        font-size: .22rem;
+        height: .56rem;
+    }
+/* ------------------------ */
 }
 @media (max-width: 750px) {
     .pageDataBox{