购物车地址

app/index/controller/Address.php

@@ -0,0 +1,125 @@
+<?php
+// +----------------------------------------------------------------------
+// | 萤火商城系统 [ 致力于通过产品和服务，帮助商家高效化开拓市场 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2017~2021 https://www.yiovo.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed 这不是一个自由软件，不允许对程序代码以任何形式任何目的的再发行
+// +----------------------------------------------------------------------
+// | Author: 萤火科技 <admin@yiovo.com>
+// +----------------------------------------------------------------------
+declare (strict_types = 1);
+
+namespace app\index\controller;
+
+use app\index\service\User as UserService;
+use app\index\model\UserAddress as UserAddressModel;
+use app\common\exception\BaseException;
+
+/**
+ * 收货地址管理
+ * Class Address
+ * @package app\api\controller
+ */
+class Address extends Controller
+{
+    /**
+     * 收货地址列表
+     * @return array|\think\response\Json
+     * @throws BaseException
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    public function list()
+    {
+        // 获取收货地址列表
+        $model = new UserAddressModel;
+        $list = $model->getList();
+        return $this->renderSuccess(compact('list'));
+    }
+
+    /**
+     * 获取当前用户默认收货地址
+     * @return array|\think\response\Json
+     * @throws BaseException
+     */
+    public function defaultId()
+    {
+        $useInfo = UserService::getCurrentLoginUser(true);
+        return $this->renderSuccess(['defaultId' => $useInfo['address_id']]);
+    }
+
+    /**
+     * 收货地址详情
+     * @param int $addressId 地址ID
+     * @return array|\think\response\Json
+     * @throws BaseException
+     */
+    public function detail(int $addressId)
+    {
+        $detail = UserAddressModel::detail($addressId);
+        return $this->renderSuccess(compact('detail'));
+    }
+
+    /**
+     * 添加收货地址
+     * @return array|\think\response\Json
+     * @throws BaseException
+     */
+    public function add()
+    {
+        $model = new UserAddressModel;
+        $res = $model->add($this->postForm());
+        if ($res['address_id']) {
+            return $this->renderSuccess($res, '添加成功');
+        }
+        return $this->renderError($model->getError() ?: '添加失败');
+    }
+
+    /**
+     * 编辑收货地址
+     * @param int $addressId 地址ID
+     * @return array|\think\response\Json
+     * @throws BaseException
+     */
+    public function edit(int $addressId)
+    {
+        $model = UserAddressModel::detail($addressId);
+        if ($model->edit($this->postForm())) {
+            return $this->renderSuccess([], '更新成功');
+        }
+        return $this->renderError($model->getError() ?: '更新失败');
+    }
+
+    /**
+     * 设为默认地址
+     * @param int $addressId 地址ID
+     * @return array|\think\response\Json
+     * @throws BaseException
+     */
+    public function setDefault(int $addressId)
+    {
+        $model = UserAddressModel::detail($addressId);
+        if ($model->setDefault((int)$model['address_id'])) {
+            return $this->renderSuccess([], '设置成功');
+        }
+        return $this->renderError($model->getError() ?: '设置失败');
+    }
+
+    /**
+     * 删除收货地址
+     * @param int $addressId 地址ID
+     * @return array|\think\response\Json
+     * @throws BaseException
+     */
+    public function remove(int $addressId)
+    {
+        $model = UserAddressModel::detail($addressId);
+        if ($model->remove()) {
+            return $this->renderSuccess([], '删除成功');
+        }
+        return $this->renderError($model->getError() ?: '删除失败');
+    }
+
+}

app/index/controller/Cart.php

@@ -12,7 +12,9 @@ declare (strict_types=1);
 
 namespace app\index\controller;
 
-use app\api\model\Cart as CartModel;
+use app\index\model\Cart as CartModel;
+use app\index\model\Region as RegionModel;
+use app\index\model\UserAddress;
 use app\index\service\Cart as CartService;
 use app\common\exception\BaseException;
 use think\facade\Cache;
@@ -50,8 +52,34 @@ class Cart extends Controller
             $temp = bcmul(strval($item['goods_num']), $item['goods']['goods_price_min'], 2);
             $cartMoney = bcadd($cartMoney, $temp, 2);
         }
+        $res = ['list' => $list, 'cartTotal' => $cartTotal, 'cartMoney' => $cartMoney, 'points' => $user['points']];
+        $res['address_id'] = 0;
+        $res['full'] = '';
+        $res['zip_code'] = '';
+        $res['name'] = '';
+        $res['last_name'] = '';
+        $res['phone'] = '';
+        $res['email'] = '';
+
+        $regList = RegionModel::getCacheAll();
+        $states50 = array_slice($regList,2);
+        $res['states50'] = $states50;
+
+        if (!empty($user['address_id'])) {
+            $addr = UserAddress::detail($user['address_id']);
+            if ($addr){
+                $res['addressId'] = $addr['address_id'];
+                $res['full'] = $addr['detail'] . ',' . $addr['region']['region'] . '(' . $addr['zip_code'] . '),US';
+                $res['zipCode'] = $addr['zip_code'];
+                $res['name'] = $addr['name'];
+                $res['lastName'] = $addr['last_name'];
+                $res['fullName'] = $addr['name'].' '.$addr['last_name'];
+                $res['phone'] = $addr['phone'];
+                $res['email'] = $addr['email'];
+            }
+        }
 
-        return view('shoppingCart', ['list' => $list, 'cartTotal' => $cartTotal, 'cartMoney' => $cartMoney, 'points' => $user['points']]);
+        return view('shoppingCart', $res);
     }
 
     /**
@@ -103,9 +131,9 @@ class Cart extends Controller
             return $this->renderJson(config('status.not_logged'), 'Log in please!');
         }
 
-        $key = $this->request->param('key',null);
-        if (!empty($key)){
-            Cache::set(\app\index\model\User::SHARE_PREFIX . $userId, $key,3600*24*30);
+        $key = $this->request->param('key', null);
+        if (!empty($key)) {
+            Cache::set(\app\index\model\User::SHARE_PREFIX . $userId, $key, 3600 * 24 * 30);
         }
 
         $model = new CartModel;

app/index/model/Region.php

@@ -0,0 +1,25 @@
+<?php
+// +----------------------------------------------------------------------
+// | 萤火商城系统 [ 致力于通过产品和服务，帮助商家高效化开拓市场 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2017~2021 https://www.yiovo.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed 这不是一个自由软件，不允许对程序代码以任何形式任何目的的再发行
+// +----------------------------------------------------------------------
+// | Author: 萤火科技 <admin@yiovo.com>
+// +----------------------------------------------------------------------
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\Region as RegionModel;
+
+/**
+ * 地区模型
+ * Class Region
+ * @package app\api\model
+ */
+class Region extends RegionModel
+{
+
+}

app/index/model/UserAddress.php

@@ -8,7 +8,7 @@
 // +----------------------------------------------------------------------
 // | Author: 萤火科技 <admin@yiovo.com>
 // +----------------------------------------------------------------------
-declare (strict_types = 1);
+declare (strict_types=1);
 
 namespace app\index\model;
 
@@ -78,17 +78,30 @@ class UserAddress extends UserAddressModel
         return $this->transaction(function () use ($user, $data) {
             $this->save([
                 'name' => $data['name'],
+                'last_name' => $data['last_name'],
                 'phone' => $data['phone'],
                 'province_id' => $data['province_id'],
                 'city_id' => $data['city_id'],
                 'region_id' => $data['region_id'],
                 'detail' => $data['detail'],
                 'user_id' => $user['user_id'],
+                'zip_code' => $data['zip_code'],
+                'email' => $data['email'],
                 'store_id' => self::$storeId
             ]);
             // 设为默认收货地址
             !$user['address_id'] && $this->setDefault((int)$this['address_id']);
-            return true;
+            //return true;
+            $regionValue = $data['region'][2]['label'] ?? '';
+            return [
+                'address_id' => $this['address_id'],
+                'full' => $data['detail'] . ',' . $regionValue . '(' . $data['zip_code'] . '),US',
+                'zip_code' => $data['zip_code'],
+                'name' => $data['name'],
+                'last_name' => $data['last_name'],
+                'phone' => $data['phone'],
+                'email' => $data['email'],
+            ];
         });
     }
 

app/index/view/cart/shoppingCart.html

@@ -52,9 +52,9 @@
                 </div>
             </a>
             <!-- 收藏 -->
-<!--            <div class="headIconItem collectIcon">-->
-<!--                <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
-<!--            </div>-->
+            <!--            <div class="headIconItem collectIcon">-->
+            <!--                <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
+            <!--            </div>-->
             <!-- 个人中心 -->
             <a href="/index/user/personal.html">
                 <div class="headIconItem userIcon">
@@ -99,9 +99,9 @@
                     <h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
                 </a>
             </div>
-<!--            <div class="mobileMenuItem">
-                <h2 class="menuItemTitle collectIcon">Collect</h2>
-            </div>-->
+            <!--            <div class="mobileMenuItem">
+                            <h2 class="menuItemTitle collectIcon">Collect</h2>
+                        </div>-->
             <div class="mobileMenuItem">
                 <a href="/index/user/personal.html">
                     <h2 class="menuItemTitle userIcon">Personal</h2>
@@ -148,8 +148,8 @@
             <!-- 结算模块 -->
             <section class="windContainer">
                 <div class="windTBox">
-                    <p class="lt">Add a coupon</p>
-                    <p class="cartTotals">CART TOTALS</p>
+                    <p class="lt">CART TOTALS</p>
+                    <p class="cartTotals"></p>
                 </div>
                 <div class="linkItem">
                     <div class="windInfoBox">
@@ -159,21 +159,82 @@
                 </div>
                 <div class="mbItem">
                     <div class="windInfoBox">
-                        <p class="key">Shipping</p>
+                        <p class="key">Free Shipping</p>
                         <p class="val">$0.00</p>
                     </div>
-                    <div class="windInfoBox">
-                        <p class="key">Free shipping</p>
-                    </div>
+                    <!--                    <div class="windInfoBox">-->
+                    <!--                        <p class="key">Free Shipping</p>-->
+                    <!--                    </div>-->
                 </div>
-                <div class="mbItem">
+                <div class="mbItem" id="addressInfo">
                     <div class="windInfoBox">
-                        <p class="key">Shipping to California, United States (us)</p>
+                        <div class="key">
+                            <p class="keyItem" id="fullNameText">{$fullName}</p>
+                            <p class="keyItem" id="contactNumberText">{$phone}</p>
+                            <p class="keyItem" id="emailText">{$email}</p>
+                            <p class="keyItem" id="addressText">{$full}</p>
+                        </div>
                     </div>
                     <div class="windInfoBox">
-                        <p class="key changeAddress">Change address</p>
+                        <p class="key" id="changeAddress">Change address</p>
+                    </div>
+                </div>
+                <!-- 填写地址模块 -->
+                <div id="addressContainer">
+                    <!-- 名字 -->
+                    <div class="addressItem">
+                        <p class="addItmeTitle">First Name:</p>
+                        <input class="addInput" id="userName" type="text" placeholder="First Name">
+                    </div>
+                    <div class="addressItem">
+                        <p class="addItmeTitle">Last Name:</p>
+                        <input class="addInput" id="lastName" type="text" placeholder="Last Name">
+                    </div>
+                    <!-- 手机号码 -->
+                    <div class="addressItem">
+                        <p class="addItmeTitle">Contact Number:</p>
+                        <input class="addInput" id="phoneNumber" type="text" placeholder="Contact Number">
+                    </div>
+                    <!-- 地区 -->
+                    <div class="addressItem">
+                        <p class="addItmeTitle">State:</p>
+                        <select id="areaSelect">
+                            <option value="0" selected>--Choose A state--</option>
+                            {foreach $states50 as $state}
+                            <option value="{$state['id']}">{$state['name']}</option>
+                            {/foreach}
+                        </select>
+                    </div>
+                    <!-- 详情地址 -->
+                    <div class="addressItem">
+                        <p class="addItmeTitle">Address:</p>
+                        <input class="addInput" id="address" type="text" placeholder="Address">
+                    </div>
+                    <!-- 邮箱 -->
+                    <div class="addressItem">
+                        <p class="addItmeTitle">Mailbox:</p>
+                        <input type="text" id="mailbox" class="addInput" placeholder="Mailbox">
+                    </div>
+                    <!-- 邮政编码 -->
+                    <div class="addressItem">
+                        <p class="addItmeTitle">Zip Code:</p>
+                        <input class="addInput" id="postalCode" type="text" placeholder="Zip Code">
+                    </div>
+                    <div id="addressButModel">
+                        <div class="addressButtonBox">
+                            <div id="addCancel">Cancel</div>
+                            <div id="addSave">Save</div>
+                        </div>
                     </div>
                 </div>
+                <!--                <div class="mbItem">
+                                    <div class="windInfoBox freeshipping">
+                                        <p class="key">Free shipping</p>
+                                    </div>
+                                    <div class="windInfoBox">
+                                        <p class="key">$199.99</p>
+                                    </div>
+                                </div>-->
                 <div class="totalBox">
                     <p class="totalT">Total</p>
                     <p class="totalVal">${$cartMoney}</p>
@@ -259,7 +320,7 @@
              src="https://img1.baidu.com/it/u=3449617615,1431463931&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709485200&t=489bafcac7c5bebed91cf50c14356269"
              alt="">
         <div class="ageReminderInfo">
-            <h3>ARE YOU OF LEAAL SMOKIND AGE?</h3>
+            <h3>ARE YOU OF LEAAL SMOKING AGE?</h3>
             <div class="ageReminderButBox">
                 <div class="ageRBut ageReminderNo"><span>NO</span></div>
                 <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
@@ -267,6 +328,28 @@
         </div>
     </div>
 </section>
+
+<!-- 年龄提示层 -->
+<section class="maskContainer">
+    <div class="ageReminderBox">
+        <img class="ageReminderBack"
+             src="https://img1.baidu.com/it/u=3449617615,1431463931&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709485200&t=489bafcac7c5bebed91cf50c14356269"
+             alt="">
+        <div class="ageReminderInfo">
+            <h3>ARE YOU OF LEAAL SMOKING AGE?</h3>
+            <div class="ageReminderButBox">
+                <div class="ageRBut ageReminderNo"><span>NO</span></div>
+                <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
+            </div>
+        </div>
+    </div>
+</section>
+<div id="loadingModel">
+    <div class="loadingBox">
+        <img src="/assets/index/asstes/icon/loading.gif" alt="Jumping to paypal.">
+    </div>
+</div>
+
 <div id="toastContainer"></div>
 </body>
 <script src="/assets/index/js/jquery-1.12.0.js"></script>
@@ -277,6 +360,152 @@
 <script>
     $(document).ready(function () {
 
+        //默认地址
+        const defaultAddressInfo = {
+            userName: "userName",
+            phoneNumber: "123456789",
+            areaSelect: "0",
+            address: "addressaddress",
+            mailbox: "123456789@qq.com",
+            postalCode: "123456"
+        }
+        // 是否已填写过地址
+        let isAddress = true
+
+        //初始化地址模块标签显示隐藏
+        function initAddressLabel() {
+            //是否已填写过地址、显示默认地址，隐藏填写地址表单
+            if (isAddress) {
+                $("#addressInfo").show(0)
+                $("#addressContainer").hide(0)
+            } else {
+                $("#addressInfo").hide(0)
+                $("#addressContainer").show(0)
+            }
+        }
+
+        //初始化表单
+        function initAddressForm() {
+            const {userName, phoneNumber, areaSelect, address, mailbox, postalCode} = defaultAddressInfo || {}
+            userName && $("#userName").val(userName)
+            phoneNumber && $("#phoneNumber").val(phoneNumber)
+            areaSelect && $("#areaSelect").val(areaSelect)
+            address && $("#address").val(address)
+            // mailbox && $("#mailbox").val(mailbox)
+            postalCode && $("#postalCode").val(postalCode)
+        }
+
+        initAddressLabel()
+        initAddressForm()
+
+        //更改地址，需显示填写地址表单、取消保存按钮
+        $("#changeAddress").on(tap, async function () {
+            $("#addressContainer").show(0)
+            $("#addressButModel").show(0)
+        });
+
+        //取消更改
+        $("#addCancel").on(tap, async function () {
+            $("#addressContainer").hide(0)
+        });
+
+        // 添加地址
+        function addAddress() {
+            const userNameEle = $("#userName")
+            const lastNameEle = $("#lastName")
+            const phoneNumberEle = $("#phoneNumber")
+            const areaSelectEle = $("#areaSelect")
+            const addressEle = $("#address")
+            const mailboxEle = $("#mailbox")
+            const postalCodeEle = $("#postalCode")
+
+            // 名字
+            const userName = userNameEle.val()
+            const lastName = lastNameEle.val()
+            // 手机号码
+            const phoneNumber = phoneNumberEle.val()
+            // 地区
+            const areaSelect = areaSelectEle.val()
+            // 详情地址
+            const address = addressEle.val()
+            // 邮箱
+            const mailbox = mailboxEle.val()
+            // 邮政编码
+            const postalCode = postalCodeEle.val()
+
+            if (!userName || userName === "") {
+                userNameEle.focus()
+                return
+            }
+            if (!phoneNumber || phoneNumber === "") {
+                phoneNumberEle.focus()
+                return
+            }
+            if (!areaSelect || areaSelect === "") {
+                areaSelectEle.focus()
+                return
+            }
+            if (!address || address === "") {
+                addressEle.focus()
+                return
+            }
+            const params = {
+                form: {
+                    name: userName,
+                    last_name: lastName,
+                    phone: phoneNumber,
+                    email: mailbox,
+                    region: [{label: '', value: 1}, {label: '', value: 2}, {label: areaSelect, value: 4}],
+                    //mailbox,
+                    detail: address,
+                    zip_code: postalCode
+                }
+            }
+
+            return new Promise(function (resolve, reject) {
+                // setTimeout(() => {
+                //     $("#addressText").text("新地址")
+                //     resolve(1001);
+                //     $("#addressContainer").hide(0)
+                // })
+                $.ajax({
+                    url: "/index/address/add",
+                    method: 'POST',
+                    data: JSON.stringify(params),
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'storeId': '10001',
+                        'platform': 'H5',
+                    },
+                    dataType: 'json',
+                    success: function (response) {
+                        resolve(response);
+                    },
+                    error: function (xhr, status, error) {
+                        reject(error);
+                    }
+                });
+            });
+        }
+
+        //保存更改
+        $("#addSave").on(tap, async function () {
+            const {data, status} = await addAddress()
+            if (status === 200 || status === "200") {
+                showToast('Success')
+                setTimeout(function () {
+                    $("#addressText").text(data.full)
+                    $("#fullNameText").text(data.name + " " + data.last_name)
+                    $("#contactNumberText").text(data.phone)
+                    $("#emailText").text(data.email)
+                    $("#addressContainer").hide(0)
+                }, 2000)
+
+            } else {
+                showToast('Something wrong.Try again later.')
+            }
+        });
+
         function showToast(message) {
             var toastElement = $('#toastContainer');
             toastElement.text(message);
@@ -427,6 +656,16 @@
         //支付
         $(".payPalButton").on(tap, async function () {
             console.log("paypaing")
+            let addressId
+            $("#loadingModel").show(0)
+            // 支付之前先判断是否有默认地址
+            if (!isAddress) {
+                // 先添加地址
+                const res = await addAddress()
+                addressId = res
+            }
+
+
             const params = {
                 //"cartIds": "10002",
                 "delivery": 10,
@@ -452,14 +691,21 @@
                 "delivery": 10,
                 "address_id": 2
             }
-            console.log(params)
+            $("#loadingModel").show(0)
             const res = await orderPaymentPoints(params)
-            console.log(res)
             const {status, message, data} = res || {}
             if (status === 200 || status === "200") {
-                window.location.replace('/index/user/order.html')
+                $("#loadingModel").hide(0)
+                showToast(message)
+                setTimeout(function () {
+                    window.location.replace('/index/user/order.html')
+                }, 3000)
             } else if (status === 401 || status === "401") {
-                window.location.replace('../passport/logIn.html')
+                showToast('Login first!')
+                setTimeout(function () {
+                    window.location.replace('../passport/logIn.html')
+                }, 3000)
+                //window.location.replace('../passport/logIn.html')
             } else {
                 showToast(message)
             }

app/index/view/index/productDetails.html

@@ -362,12 +362,10 @@
                 type: "POST",
                 contentType: 'application/json',
                 success: function (obj) {
-                    console.log(obj);
-                    //return false;
                     //注册成功后进入
                     if (obj.status === 200 || obj.status === '200') {
                         showToast("Successful")
-                        window.location.href = '../cart/shoppingCart';
+                        window.location.href = '/index/cart/shoppingCart.html';
                         return
                     }else if (obj.status === 401 || obj.status === '401'){
                         window.location.replace('../passport/logIn.html')
@@ -441,39 +439,6 @@
             }
         });
         initRichText()
-
-        //前往购物车
-/*
-        $(".shoppingCartIcon").on(tap, function () {
-            const state = isLogin()
-            if (state) {
-                //window.location.href = "/api/cart/myCart.html"
-                var dp = {};
-
-                $.ajax({
-                    url: "/index/cart/add",
-                    headers: {platform: 'H5', "Access-Token": vapesToken},
-                    dataType: 'json',
-                    data: JSON.stringify(dp),
-                    type: "POST",
-                    contentType: 'application/json',
-                    success: function (obj) {
-                        console.log(obj);
-                        //return false;
-                        //注册成功后进入
-                        if (obj.status === 200 || obj.status === '200') {
-                            showToast("Successful")
-                            window.location.href = '../cart/shoppingCart';
-                            return
-
-                        }
-
-                    }
-
-                })
-            }
-        });
-*/
     });
 </script>
 

public/assets/index/css/shoppingCart.css

@@ -161,6 +161,9 @@ body{
     flex: 1;
     word-break: break-all;
 }
+.keyItem{
+    margin-bottom: .1rem;
+}
 .windInfoBox .val{
     padding-left: .12rem;
     word-break: break-all;
@@ -169,8 +172,9 @@ body{
 .windInfoBox.freeshipping .key{
     color: rgba(79, 73, 222, 1);
 }
-.changeAddress{
+#changeAddress{
     cursor: pointer;
+    color: rgba(79, 73, 222, 1);
 }
 .totalBox{
     display: flex;
@@ -225,6 +229,89 @@ body{
     font-weight: bold;
     color: #999999;
 }
+#addressContainer{
+    margin-bottom: .24rem;
+    display: none;
+}
+.addressItem{
+    display: flex;
+    align-items: center;
+    padding: .06rem 0;
+}
+.addItmeTitle{
+    width: 1.4rem;
+    text-align: right;
+    font-size: .16rem;
+    color: #999999;
+    padding-right: .08rem;
+}
+#areaSelect{
+    height: .4rem;
+    font-size: .16rem;
+    border: .02rem solid rgba(0, 0, 0, .05);
+    border-radius: .08rem;
+    color: #434343;
+    padding: 0 .12rem;
+}
+.addInput{
+    flex: 1;
+    height: .45rem;
+    font-size: .15rem;
+    border: .02rem solid rgba(0, 0, 0, .05);
+    border-radius: .08rem;
+    padding: 0 .12rem;
+    color: #434343;
+}
+#addressButModel{
+    display: none;
+}
+.addressButtonBox{
+    display: flex;
+    align-items: center;
+    gap: .16rem;
+    justify-content: flex-end;
+    padding-top: .24rem;
+}
+#addCancel,#addSave{
+    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;
+}
+#addCancel{
+    border: .02rem solid rgba(0, 0, 0, .2);
+    background: transparent;
+    color: #434343;
+}
+#loadingModel{
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, .5);
+    display: none;
+}
+#loadingModel .loadingBox{
+    border-radius: .06rem;
+    overflow: hidden;
+    font-size: 0; 
+    margin: 25% auto 0 auto;
+    width: 1rem;
+}
+#loadingModel .loadingBox img{
+    width: 1rem;
+}
 @media (max-width: 1680px) {
     .productPrice{
         width: 2rem;
@@ -300,6 +387,21 @@ body{
         right: 0;
         padding: 0 .12rem .12rem .12rem;
     }
+    .addItmeTitle{
+        font-size: .2rem;
+    }
+    #areaSelect{
+        font-size: .2rem;
+        height: .5rem;
+    }
+    .addInput{
+        font-size: .2rem;
+        height: .55rem;
+    }
+    #addCancel,#addSave{
+        font-size: .2rem;
+        height: .5rem;
+    }
 }
 @media (max-width: 750px) {
     .pageDataBox{
@@ -365,4 +467,11 @@ body{
     .windInfoBox .val{
         max-width: 2rem;
     }
+    #loadingModel .loadingBox{
+        margin: 50% auto 0 auto;
+        width: 1.5rem;
+    }
+    #loadingModel .loadingBox img{
+        width:  1.5rem;
+    }
 }