填写地址弹框新增h5地址填写组件和APP内填写地址组件

zhiyangdu
1 parent cb934fd8
Showing 6 changed files with 557 additions and 7 deletions
src/components/addressToast/addressToast.less → src/components/appAddressToast/appAddressToast.less
src/components/appAddressToast/appAddressToast.vue
src/components/h5AddressToast/h5AddressToast.less
src/components/addressToast/addressToast.vue → src/components/h5AddressToast/h5AddressToast.vue
src/pages/goodDetails/goodDetails.vue
src/pages/pointsExchangeRecords/pointsExchangeRecords.vue
+<template>
+    <div class="toast_mask" @touchmove.stop.prevent>
+        <div class="pointsToast_box">
+            <div class="title">填写配送地址</div>
+            <!--地址-->
+            <div class="address">
+                <div v-if="addressInfo">
+                    <div class="userinfo_box">
+                        <div class="user_info">
+                            <div v-if="addressInfo.name">
+                                {{ addressInfo.name }}
+                            </div>
+                            <div v-if="addressInfo.phone">
+                                {{ addressInfo.phone }}
+                            </div>
+                        </div>
+                        <div @click="changeAddress()" class="btn">更换</div>
+                    </div>
+                    <div v-if="addressInfo.address" class="info">
+                        {{ addressInfo.address }}
+                    </div>
+                </div>
+                <div class="tooltips" v-else @click="changeAddress()">
+                    您未填写地址，去填写
+                </div>
+            </div>
+            <!--商品-->
+            <!-- <div v-if="itemInfo" class="goods_box">
+                <img v-if="itemInfo && itemInfo.img" v-lazy="itemInfo.img" />
+                <div class="goods_info">
+                    <div v-if="itemInfo && itemInfo.title" class="goods_title">
+                        {{ itemInfo.title }}
+                    </div>
+                </div>
+            </div> -->
+            <!--底部按钮-->
+            <div class="footer">
+                <div @click="cancel" class="cancel">取消</div>
+                <div @click="confirm" class="confirm">确认</div>
+            </div>
+        </div>
+        <img @click="$parent.pointsToast_control=false"  class="pointsMall_close" src="static/img/addressClose.png" alt=""/>
+    </div>
+</template>
+
+<script>
+import { Toast, Indicator } from "mint-ui";
+export default {
+  name: "pointsToast",
+  data () {
+    return {
+      itemInfo: null,
+      addressInfo: null,
+      goodsId: this.$route.query.goodsId || null, // 兑换商品ID
+      orderId: this.$route.query.orderId || null, // 订单ID 先兑换后填地址使用
+      // drawRecordItemInfo: null // 中奖记录单条信息
+    };
+  },
+  props: ["isBuyLimit"],
+  created () {
+
+  },
+  methods: {
+    // 父组件点击兑换调用子组件传值商品商品信息
+    getItemInfo (content, orderId) {
+      this.itemInfo = content;
+      if (orderId) {
+        this.orderId = orderId
+      } else {
+        this.goodsId = content.id; // 获取需要兑换商品的ID
+      }
+      // 获取商品信息接口
+      this.luckDrawGift(content.id);
+      // 获取首选地址接口
+      this.myFirstAddress();
+      //  存取抽奖记录选中的列表数据
+      // this.$set(this, "drawRecordItemInfo", content.drawRecordItemInfo);
+    },
+    // 我的首选地址
+    /**
+     * 我的首选地址
+     * * @param {string} uid [用户id]
+     */
+    myFirstAddress () {
+      // 加载中提示
+      //            Indicator.open('加载中...');
+
+      // 请求接口
+      this.http(
+        "/Api/" + this.getApiVersion().index + "/myFirstAddress",
+        {
+          uid: this.getStore("uid")
+        },
+        this.myFirstAddressCallback,
+        {
+          method: "POST"
+        }
+      );
+    },
+
+    /**
+     * 我的首选地址信息
+     * @param {object} res [服务器返回数据]
+     * @param {object} ext [扩展参数]
+     */
+    myFirstAddressCallback (res, ext) {
+      // 加载完成
+      //            Indicator.close();
+
+      // 返回处理
+      if (res.code == 200) {
+        // 解构数据
+        let { data: datas } = res;
+        this.addressInfo = datas;
+        /* 我的首选地址信息 开始 */
+      } else if (res.code == 400) {
+        // 获取积分商场首页信息失败
+        // Toast(res.message);
+      } else {
+        // 获取积分商场首页信息失败
+        // Toast("获取我的首选地址失败");
+      }
+    },
+    /**
+     * 选中的地址
+     * * @param {string} uid [用户id]
+     */
+    getaddressInfo (addressId) {
+      // 加载中提示
+      //            Indicator.open('加载中...');
+
+      // 请求接口
+      this.http(
+        "/Api/" + this.getApiVersion().index + "/addressInfo",
+        {
+          id: addressId
+        },
+        this.getaddressInfoCallback,
+        {
+          method: "POST"
+        }
+      );
+    },
+
+    /**
+     * 选中的地址
+     * @param {object} res [服务器返回数据]
+     * @param {object} ext [扩展参数]
+     */
+    getaddressInfoCallback (res, ext) {
+      // 加载完成
+      //            Indicator.close();
+
+      // 返回处理
+      if (res.code == 200) {
+        // 解构数据
+        let { data: datas } = res;
+        this.addressInfo = datas;
+        /* 获取选中的地址失败 开始 */
+      } else if (res.code == 400) {
+        // 获取选中的地址失败
+        Toast(res.message);
+      } else {
+        // 获取选中的地址失败
+        Toast("获取选中的地址失败");
+      }
+    },
+    /**
+     * 选中的商品信息
+     * * @param {string} uid [用户id]
+     */
+    luckDrawGift (id) {
+      // 加载中提示
+      //            Indicator.open('加载中...');
+
+      // 请求接口
+      this.http(
+        "/Api/" + this.getApiVersion().LuckDraw + "/luckDrawGift",
+        {
+          uid: this.getStore("uid"),
+          id: id
+        },
+        this.luckDrawGiftCallback,
+        {
+          method: "POST"
+        }
+      );
+    },
+
+    /**
+     * 选中的兑换商品信息
+     * @param {object} res [服务器返回数据]
+     * @param {object} ext [扩展参数]
+     */
+    luckDrawGiftCallback (res, ext) {
+      // 加载完成
+      //            Indicator.close();
+
+      // 返回处理
+      if (res.code == 200) {
+        // 解构数据
+        let { data: datas } = res;
+        this.itemInfo = datas;
+        //                console.log(this.itemInfo)
+        /* 获取选中的地址失败 开始 */
+      } else if (res.code == 400) {
+        // 获取选中的兑换商品信息失败
+        Toast(res.message);
+      } else {
+        // 获取选中的兑换商品信息失败
+        Toast("获取选中的兑换商品信息失败");
+      }
+    },
+    /**
+     * 取消
+     */
+    cancel () {
+      // 隐藏弹框
+      this.$parent.pointsToast_control = false;
+    },
+    /**
+     * 确定
+     */
+    confirm () {
+      // 兑换商品的ID分两种一种是订单ID填写地址；一种是有商品地址填写地址
+      let orderInfo = {
+        addressId: null,
+        id: null, // 兑换商品ID
+      };
+      // 最新地址信息回传给父组件
+      this.$parent.addressInfo = this.addressInfo;
+      this.addLuckDrawAddress(orderInfo);
+      // 隐藏弹框
+      this.$parent.pointsToast_control = false;
+    },
+    //       更改地址
+    changeAddress () {
+      // 安卓手机两次更改地址goodsId没拿到从
+      if (this.isAndroid.value) {
+        // 处理商品ID问题
+        if (!this.goodsId) {
+          let ext = "&" + window.localStorage.getItem("ext")
+          this.goodsId = this.getParameterByName(
+            "goodsId",
+            ext
+          );
+        }
+        // 处理商品ID问题
+        if (!this.orderId) {
+          let ext = "&" + window.localStorage.getItem("ext")
+          this.orderId = this.getParameterByName(
+            "orderId",
+            ext
+          );
+        }
+        // 处理填写地址弹框显示记录
+        // let storageExt = "&pointsToast_control=true"
+        // window.localStorage.setItem("ext", storageExt)
+      }
+      // 测试环境
+      window.location.href =
+        this.getApiVersion().addAddresss +
+        "html/mall/1/#/pages/users/addressList/addressList" +
+        "?uid=" +
+        this.getStore("uid") +
+        "&ext=" +
+        encodeURIComponent(
+          "goodsId=" +
+          this.goodsId +
+          "&orderId=" +
+          this.orderId +
+          "&pointsToast_control=" +
+          this.$parent.pointsToast_control
+        ) +
+        "&from=redirect&redirect=" +
+        encodeURIComponent(window.location.href.split("?")[0]);
+    },
+    // 提交中奖的商品信息
+    /**
+     * 提交中奖的商品信息
+     * * @param {string} addressId [地址id]
+     * *@param {string} id [商品id]
+     * *@param {string} id_card [身份证id]
+     */
+    addLuckDrawAddress (orderInfo) {
+      // 加载中提示
+      Indicator.open("加载中...");
+
+      // 请求接口
+      this.http(
+        "/Api/" + this.getApiVersion().LuckDraw + "/addLuckIntegralAddress",
+        {
+          uid: this.getStore("uid"),
+          addressId: orderInfo.addressId,
+          id: orderInfo.id // 商品ID
+        },
+        this.addLuckDrawAddressCallback,
+        {
+          method: "POST",
+          ext: orderInfo
+        }
+      );
+    },
+
+    /**
+     * 提交中奖的商品信息
+     * @param {object} res [服务器返回数据]
+     * @param {object} ext [扩展参数]
+     */
+    addLuckDrawAddressCallback (res, ext) {
+      // 加载完成
+      Indicator.close();
+      // 返回处理
+      if (res.code == 200) {
+        Toast("提交成功等待发货");
+        this.$emit("toUpdate", ext.ext, this.addressInfo);
+      } else {
+        // 兑换礼品失败
+        Toast(res.message);
+      }
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+@import './addressToast';
+</style>
+.toast_mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 10000;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .pointsMall_close{
+      width: 60px;
+      height: 60px;
+      position: fixed;
+      left: 345px;
+      bottom: 10vh;
+  }
+    .pointsToast_box {
+        width: 560px;
+        //height:698px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 24px;
+        z-index: 3000;
+
+        .title {
+            height: 45px;
+            font-size: 32px;
+            font-weight: 500;
+            color: rgba(51, 51, 51, 1);
+            line-height: 45px;
+            text-align: center;
+            margin-top: 30px;
+        }
+
+        .address {
+            width: 442px;
+            min-height: 130px;
+            background: rgba(249, 249, 249, 1);
+            border-radius: 16px;
+            margin: 30px;
+            padding: 24px;
+
+            .userinfo_box {
+                display: flex;
+                justify-content: space-between;
+                font-size: 28px;
+                color: #999999;
+                word-break: break-all;
+                .user_info {
+                    display: flex;
+
+                    div:nth-child(2) {
+                        margin-left: 30px;
+                    }
+                }
+
+                .btn {
+                    text-align: right;
+                    color: #F5A623;
+                    font-size: 28px;
+                    width: 100px;
+                    margin-left: 10px;
+                }
+
+            }
+
+            .info {
+                height: 80px;
+                max-height: 80px;
+                margin-top: 10px;
+                font-size: 28px;
+                color: #999999;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                display: -webkit-box;
+                /*! autoprefixer: off */
+                -webkit-box-orient: vertical;
+                /*! autoprefixer: on */
+                -webkit-line-clamp: 2;
+                -ms-word-wrap: break-word;
+                word-wrap: break-word;
+            }
+
+            .tooltips {
+                height: 130px;
+                line-height: 130px;
+                font-size: 28px;
+                font-weight: 500;
+                color: rgba(153, 153, 153, 1);
+                text-align: center;
+            }
+
+        }
+
+        .cards {
+            width: 442px;
+            background: rgba(249, 249, 249, 1);
+            border-radius: 16px;
+            margin: 0 30px 10px 30px;
+            padding: 24px;
+            border: none;
+            color: #666666;
+            text-align: left;
+            height: 42px;
+            line-height: 42px;
+        }
+
+        .cards::-webkit-input-placeholder {
+            color: #c8c8c8;
+            font-size: 30px;
+        }
+
+        .goods_box {
+            margin: 30px;
+            width: 500px;
+            display: flex;
+
+            img {
+                width: 140px;
+                height: 140px;
+                border-radius: 24px;
+            }
+
+            .goods_info {
+                flex: 1;
+                margin-left: 30px;
+
+                .goods_title {
+                    height: 80px;
+                    font-size: 28px;
+                    font-weight: 500;
+                    color: rgba(51, 51, 51, 1);
+                    overflow: hidden;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 3;
+                    -ms-word-wrap: break-word;
+                    word-wrap: break-word;
+
+                }
+
+                .exchange {
+                    height: 50px;
+                    margin-top: 10px;
+                    line-height: 50px;
+                    font-size: 20px;
+                    font-weight: 400;
+                    color: rgba(153, 153, 153, 1);
+
+                    .num {
+                        font-size: 36px;
+                        font-weight: 600;
+                        color: #FF3B39;
+                    }
+                }
+            }
+
+        }
+
+        //数量加减
+        .goods_num_box {
+            display: flex;
+            justify-content: space-between;
+            margin: 0 30px;
+
+            .text {
+                color: #999;
+            }
+
+            .num {
+                display: flex;
+
+                img {
+                    width: 46px;
+                    height: 46px;
+                }
+
+                div {
+                    width: 60px;
+                    text-align: center;
+                    font-size: 28px;
+                    font-weight: 400;
+                    color: rgba(86, 86, 86, 1);
+                    line-height: 46px;
+                }
+
+            }
+        }
+
+        //页脚
+        .footer {
+            margin: 30px;
+            border-top: solid 1px #E6E6E6;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+                width: 236px;
+                height: 78px;
+                border-radius: 16px;
+                text-align: center;
+                line-height: 78px;
+                margin: 30px 0;
+            }
+
+            .cancel {
+                background: rgba(249, 249, 249, 1);
+                color: #B4B4B4;
+            }
+
+            .confirm {
+                background: linear-gradient(90deg, rgba(254, 116, 3, 1) 0%, rgba(246, 65, 4, 1) 100%);
+                color: #fff;
+                border-radius: 16px;
+            }
+
+        }
+    }
+}
@@ -388,5 +388,5 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less">
-@import './addressToast';
+@import './h5AddressToast';
 </style>
@@ -103,7 +103,7 @@
           </div>
         </div>
         <!-- 地址信息组件 -->
-        <address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></address-toast>
+        <h5-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></h5-address-toast>
 </div>
 </template>
@@ -113,7 +113,7 @@ import callAppBox from &quot;@/components/callAppBox/callAppBox&quot;;
 import swiper from "@/components/swiper/swiper";
 import backBox from "@/components/backBox/backBox";
 import columnListBox from "@/components/columnListBox/columnListBox";
-import addressToast from "@/components/addressToast/addressToast";
+import h5AddressToast from "@/components/h5AddressToast/h5AddressToast";
 import { Toast, Indicator } from "mint-ui";
 export default {
   name: 'goodDetails',
@@ -132,7 +132,7 @@ export default {
     swiper,
     backBox,
     columnListBox,
-    addressToast
+    h5AddressToast
   },
   //静态
   props: [
@@ -46,14 +46,14 @@
         没有更多了
     </div>
             <!-- 地址信息组件 -->
-    <address-toast ref="itemsInfo" @toUpdate="updateAddressInfo" v-show="pointsToast_control"></address-toast>
+    <h5-address-toast ref="itemsInfo" @toUpdate="updateAddressInfo" v-show="pointsToast_control"></h5-address-toast>
 </div>
 </template>
 <script>
 // 引入组件
 import { Toast, Indicator } from "mint-ui";
-import addressToast from "@/components/addressToast/addressToast";
+import h5AddressToast from "@/components/h5AddressToast/h5AddressToast";
 export default {
   data () {
     return {
@@ -67,7 +67,7 @@ export default {
   },
   //部件
   components: {
-    addressToast
+    h5AddressToast
   },
   //静态
   props: [