w-front-end / select_good · Commits

Commit 5264da193e6cf15ceb59c2e4016fabefa4e3ddb6

Authored by zhiyangdu
1 parent cb934fd8

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

Inline Side-by-side
Showing 6 changed files with 557 additions and 7 deletions
src/components/addressToast/addressToast.less renamed to src/components/appAddressToast/appAddressToast.less
  View file @5264da1
src/components/appAddressToast/appAddressToast.vue 0 → 100644
  View file @5264da1
  1 +<template>
  2 + <div class="toast_mask" @touchmove.stop.prevent>
  3 + <div class="pointsToast_box">
  4 + <div class="title">填写配送地址</div>
  5 + <!--地址-->
  6 + <div class="address">
  7 + <div v-if="addressInfo">
  8 + <div class="userinfo_box">
  9 + <div class="user_info">
  10 + <div v-if="addressInfo.name">
  11 + {{ addressInfo.name }}
  12 + </div>
  13 + <div v-if="addressInfo.phone">
  14 + {{ addressInfo.phone }}
  15 + </div>
  16 + </div>
  17 + <div @click="changeAddress()" class="btn">更换</div>
  18 + </div>
  19 + <div v-if="addressInfo.address" class="info">
  20 + {{ addressInfo.address }}
  21 + </div>
  22 + </div>
  23 + <div class="tooltips" v-else @click="changeAddress()">
  24 + 您未填写地址，去填写
  25 + </div>
  26 + </div>
  27 + <!--商品-->
  28 + <!-- <div v-if="itemInfo" class="goods_box">
  29 + <img v-if="itemInfo && itemInfo.img" v-lazy="itemInfo.img" />
  30 + <div class="goods_info">
  31 + <div v-if="itemInfo && itemInfo.title" class="goods_title">
  32 + {{ itemInfo.title }}
  33 + </div>
  34 + </div>
  35 + </div> -->
  36 + <!--底部按钮-->
  37 + <div class="footer">
  38 + <div @click="cancel" class="cancel">取消</div>
  39 + <div @click="confirm" class="confirm">确认</div>
  40 + </div>
  41 + </div>
  42 + <img @click="$parent.pointsToast_control=false" class="pointsMall_close" src="static/img/addressClose.png" alt=""/>
  43 + </div>
  44 +</template>
  45 +
  46 +<script>
  47 +import { Toast, Indicator } from "mint-ui";
  48 +export default {
  49 + name: "pointsToast",
  50 + data () {
  51 + return {
  52 + itemInfo: null,
  53 + addressInfo: null,
  54 + goodsId: this.$route.query.goodsId || null, // 兑换商品ID
  55 + orderId: this.$route.query.orderId || null, // 订单ID 先兑换后填地址使用
  56 + // drawRecordItemInfo: null // 中奖记录单条信息
  57 + };
  58 + },
  59 + props: ["isBuyLimit"],
  60 + created () {
  61 +
  62 + },
  63 + methods: {
  64 + // 父组件点击兑换调用子组件传值商品商品信息
  65 + getItemInfo (content, orderId) {
  66 + this.itemInfo = content;
  67 + if (orderId) {
  68 + this.orderId = orderId
  69 + } else {
  70 + this.goodsId = content.id; // 获取需要兑换商品的ID
  71 + }
  72 + // 获取商品信息接口
  73 + this.luckDrawGift(content.id);
  74 + // 获取首选地址接口
  75 + this.myFirstAddress();
  76 + // 存取抽奖记录选中的列表数据
  77 + // this.$set(this, "drawRecordItemInfo", content.drawRecordItemInfo);
  78 + },
  79 + // 我的首选地址
  80 + /**
  81 + * 我的首选地址
  82 + * * @param {string} uid [用户id]
  83 + */
  84 + myFirstAddress () {
  85 + // 加载中提示
  86 + // Indicator.open('加载中...');
  87 +
  88 + // 请求接口
  89 + this.http(
  90 + "/Api/" + this.getApiVersion().index + "/myFirstAddress",
  91 + {
  92 + uid: this.getStore("uid")
  93 + },
  94 + this.myFirstAddressCallback,
  95 + {
  96 + method: "POST"
  97 + }
  98 + );
  99 + },
  100 +
  101 + /**
  102 + * 我的首选地址信息
  103 + * @param {object} res [服务器返回数据]
  104 + * @param {object} ext [扩展参数]
  105 + */
  106 + myFirstAddressCallback (res, ext) {
  107 + // 加载完成
  108 + // Indicator.close();
  109 +
  110 + // 返回处理
  111 + if (res.code == 200) {
  112 + // 解构数据
  113 + let { data: datas } = res;
  114 + this.addressInfo = datas;
  115 + /* 我的首选地址信息 开始 */
  116 + } else if (res.code == 400) {
  117 + // 获取积分商场首页信息失败
  118 + // Toast(res.message);
  119 + } else {
  120 + // 获取积分商场首页信息失败
  121 + // Toast("获取我的首选地址失败");
  122 + }
  123 + },
  124 + /**
  125 + * 选中的地址
  126 + * * @param {string} uid [用户id]
  127 + */
  128 + getaddressInfo (addressId) {
  129 + // 加载中提示
  130 + // Indicator.open('加载中...');
  131 +
  132 + // 请求接口
  133 + this.http(
  134 + "/Api/" + this.getApiVersion().index + "/addressInfo",
  135 + {
  136 + id: addressId
  137 + },
  138 + this.getaddressInfoCallback,
  139 + {
  140 + method: "POST"
  141 + }
  142 + );
  143 + },
  144 +
  145 + /**
  146 + * 选中的地址
  147 + * @param {object} res [服务器返回数据]
  148 + * @param {object} ext [扩展参数]
  149 + */
  150 + getaddressInfoCallback (res, ext) {
  151 + // 加载完成
  152 + // Indicator.close();
  153 +
  154 + // 返回处理
  155 + if (res.code == 200) {
  156 + // 解构数据
  157 + let { data: datas } = res;
  158 + this.addressInfo = datas;
  159 + /* 获取选中的地址失败 开始 */
  160 + } else if (res.code == 400) {
  161 + // 获取选中的地址失败
  162 + Toast(res.message);
  163 + } else {
  164 + // 获取选中的地址失败
  165 + Toast("获取选中的地址失败");
  166 + }
  167 + },
  168 + /**
  169 + * 选中的商品信息
  170 + * * @param {string} uid [用户id]
  171 + */
  172 + luckDrawGift (id) {
  173 + // 加载中提示
  174 + // Indicator.open('加载中...');
  175 +
  176 + // 请求接口
  177 + this.http(
  178 + "/Api/" + this.getApiVersion().LuckDraw + "/luckDrawGift",
  179 + {
  180 + uid: this.getStore("uid"),
  181 + id: id
  182 + },
  183 + this.luckDrawGiftCallback,
  184 + {
  185 + method: "POST"
  186 + }
  187 + );
  188 + },
  189 +
  190 + /**
  191 + * 选中的兑换商品信息
  192 + * @param {object} res [服务器返回数据]
  193 + * @param {object} ext [扩展参数]
  194 + */
  195 + luckDrawGiftCallback (res, ext) {
  196 + // 加载完成
  197 + // Indicator.close();
  198 +
  199 + // 返回处理
  200 + if (res.code == 200) {
  201 + // 解构数据
  202 + let { data: datas } = res;
  203 + this.itemInfo = datas;
  204 + // console.log(this.itemInfo)
  205 + /* 获取选中的地址失败 开始 */
  206 + } else if (res.code == 400) {
  207 + // 获取选中的兑换商品信息失败
  208 + Toast(res.message);
  209 + } else {
  210 + // 获取选中的兑换商品信息失败
  211 + Toast("获取选中的兑换商品信息失败");
  212 + }
  213 + },
  214 + /**
  215 + * 取消
  216 + */
  217 + cancel () {
  218 + // 隐藏弹框
  219 + this.$parent.pointsToast_control = false;
  220 + },
  221 + /**
  222 + * 确定
  223 + */
  224 + confirm () {
  225 + // 兑换商品的ID分两种一种是订单ID填写地址；一种是有商品地址填写地址
  226 + let orderInfo = {
  227 + addressId: null,
  228 + id: null, // 兑换商品ID
  229 + };
  230 + // 最新地址信息回传给父组件
  231 + this.$parent.addressInfo = this.addressInfo;
  232 + this.addLuckDrawAddress(orderInfo);
  233 + // 隐藏弹框
  234 + this.$parent.pointsToast_control = false;
  235 + },
  236 + // 更改地址
  237 + changeAddress () {
  238 + // 安卓手机两次更改地址goodsId没拿到从
  239 + if (this.isAndroid.value) {
  240 + // 处理商品ID问题
  241 + if (!this.goodsId) {
  242 + let ext = "&" + window.localStorage.getItem("ext")
  243 + this.goodsId = this.getParameterByName(
  244 + "goodsId",
  245 + ext
  246 + );
  247 + }
  248 + // 处理商品ID问题
  249 + if (!this.orderId) {
  250 + let ext = "&" + window.localStorage.getItem("ext")
  251 + this.orderId = this.getParameterByName(
  252 + "orderId",
  253 + ext
  254 + );
  255 + }
  256 + // 处理填写地址弹框显示记录
  257 + // let storageExt = "&pointsToast_control=true"
  258 + // window.localStorage.setItem("ext", storageExt)
  259 + }
  260 + // 测试环境
  261 + window.location.href =
  262 + this.getApiVersion().addAddresss +
  263 + "html/mall/1/#/pages/users/addressList/addressList" +
  264 + "?uid=" +
  265 + this.getStore("uid") +
  266 + "&ext=" +
  267 + encodeURIComponent(
  268 + "goodsId=" +
  269 + this.goodsId +
  270 + "&orderId=" +
  271 + this.orderId +
  272 + "&pointsToast_control=" +
  273 + this.$parent.pointsToast_control
  274 + ) +
  275 + "&from=redirect&redirect=" +
  276 + encodeURIComponent(window.location.href.split("?")[0]);
  277 + },
  278 + // 提交中奖的商品信息
  279 + /**
  280 + * 提交中奖的商品信息
  281 + * * @param {string} addressId [地址id]
  282 + * *@param {string} id [商品id]
  283 + * *@param {string} id_card [身份证id]
  284 + */
  285 + addLuckDrawAddress (orderInfo) {
  286 + // 加载中提示
  287 + Indicator.open("加载中...");
  288 +
  289 + // 请求接口
  290 + this.http(
  291 + "/Api/" + this.getApiVersion().LuckDraw + "/addLuckIntegralAddress",
  292 + {
  293 + uid: this.getStore("uid"),
  294 + addressId: orderInfo.addressId,
  295 + id: orderInfo.id // 商品ID
  296 + },
  297 + this.addLuckDrawAddressCallback,
  298 + {
  299 + method: "POST",
  300 + ext: orderInfo
  301 + }
  302 + );
  303 + },
  304 +
  305 + /**
  306 + * 提交中奖的商品信息
  307 + * @param {object} res [服务器返回数据]
  308 + * @param {object} ext [扩展参数]
  309 + */
  310 + addLuckDrawAddressCallback (res, ext) {
  311 + // 加载完成
  312 + Indicator.close();
  313 + // 返回处理
  314 + if (res.code == 200) {
  315 + Toast("提交成功等待发货");
  316 + this.$emit("toUpdate", ext.ext, this.addressInfo);
  317 + } else {
  318 + // 兑换礼品失败
  319 + Toast(res.message);
  320 + }
  321 + }
  322 + }
  323 +};
  324 +</script>
  325 +
  326 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  327 +<style rel="stylesheet/less" lang="less">
  328 +@import './addressToast';
  329 +</style>
... ...
src/components/h5AddressToast/h5AddressToast.less 0 → 100644
  View file @5264da1
  1 +.toast_mask {
  2 + position: fixed;
  3 + top: 0;
  4 + left: 0;
  5 + background: rgba(0, 0, 0, 0.6);
  6 + z-index: 10000;
  7 + width: 100%;
  8 + height: 100%;
  9 + display: flex;
  10 + flex-direction: column;
  11 + justify-content: center;
  12 + align-items: center;
  13 + .pointsMall_close{
  14 + width: 60px;
  15 + height: 60px;
  16 + position: fixed;
  17 + left: 345px;
  18 + bottom: 10vh;
  19 + }
  20 + .pointsToast_box {
  21 + width: 560px;
  22 + //height:698px;
  23 + background: rgba(255, 255, 255, 1);
  24 + border-radius: 24px;
  25 + z-index: 3000;
  26 +
  27 + .title {
  28 + height: 45px;
  29 + font-size: 32px;
  30 + font-weight: 500;
  31 + color: rgba(51, 51, 51, 1);
  32 + line-height: 45px;
  33 + text-align: center;
  34 + margin-top: 30px;
  35 + }
  36 +
  37 + .address {
  38 + width: 442px;
  39 + min-height: 130px;
  40 + background: rgba(249, 249, 249, 1);
  41 + border-radius: 16px;
  42 + margin: 30px;
  43 + padding: 24px;
  44 +
  45 + .userinfo_box {
  46 + display: flex;
  47 + justify-content: space-between;
  48 + font-size: 28px;
  49 + color: #999999;
  50 + word-break: break-all;
  51 + .user_info {
  52 + display: flex;
  53 +
  54 + div:nth-child(2) {
  55 + margin-left: 30px;
  56 + }
  57 + }
  58 +
  59 + .btn {
  60 + text-align: right;
  61 + color: #F5A623;
  62 + font-size: 28px;
  63 + width: 100px;
  64 + margin-left: 10px;
  65 + }
  66 +
  67 + }
  68 +
  69 + .info {
  70 + height: 80px;
  71 + max-height: 80px;
  72 + margin-top: 10px;
  73 + font-size: 28px;
  74 + color: #999999;
  75 + text-overflow: ellipsis;
  76 + overflow: hidden;
  77 + display: -webkit-box;
  78 + /*! autoprefixer: off */
  79 + -webkit-box-orient: vertical;
  80 + /*! autoprefixer: on */
  81 + -webkit-line-clamp: 2;
  82 + -ms-word-wrap: break-word;
  83 + word-wrap: break-word;
  84 + }
  85 +
  86 + .tooltips {
  87 + height: 130px;
  88 + line-height: 130px;
  89 + font-size: 28px;
  90 + font-weight: 500;
  91 + color: rgba(153, 153, 153, 1);
  92 + text-align: center;
  93 + }
  94 +
  95 + }
  96 +
  97 + .cards {
  98 + width: 442px;
  99 + background: rgba(249, 249, 249, 1);
  100 + border-radius: 16px;
  101 + margin: 0 30px 10px 30px;
  102 + padding: 24px;
  103 + border: none;
  104 + color: #666666;
  105 + text-align: left;
  106 + height: 42px;
  107 + line-height: 42px;
  108 + }
  109 +
  110 + .cards::-webkit-input-placeholder {
  111 + color: #c8c8c8;
  112 + font-size: 30px;
  113 + }
  114 +
  115 + .goods_box {
  116 + margin: 30px;
  117 + width: 500px;
  118 + display: flex;
  119 +
  120 + img {
  121 + width: 140px;
  122 + height: 140px;
  123 + border-radius: 24px;
  124 + }
  125 +
  126 + .goods_info {
  127 + flex: 1;
  128 + margin-left: 30px;
  129 +
  130 + .goods_title {
  131 + height: 80px;
  132 + font-size: 28px;
  133 + font-weight: 500;
  134 + color: rgba(51, 51, 51, 1);
  135 + overflow: hidden;
  136 + display: -webkit-box;
  137 + -webkit-box-orient: vertical;
  138 + -webkit-line-clamp: 3;
  139 + -ms-word-wrap: break-word;
  140 + word-wrap: break-word;
  141 +
  142 + }
  143 +
  144 + .exchange {
  145 + height: 50px;
  146 + margin-top: 10px;
  147 + line-height: 50px;
  148 + font-size: 20px;
  149 + font-weight: 400;
  150 + color: rgba(153, 153, 153, 1);
  151 +
  152 + .num {
  153 + font-size: 36px;
  154 + font-weight: 600;
  155 + color: #FF3B39;
  156 + }
  157 + }
  158 + }
  159 +
  160 + }
  161 +
  162 + //数量加减
  163 + .goods_num_box {
  164 + display: flex;
  165 + justify-content: space-between;
  166 + margin: 0 30px;
  167 +
  168 + .text {
  169 + color: #999;
  170 + }
  171 +
  172 + .num {
  173 + display: flex;
  174 +
  175 + img {
  176 + width: 46px;
  177 + height: 46px;
  178 + }
  179 +
  180 + div {
  181 + width: 60px;
  182 + text-align: center;
  183 + font-size: 28px;
  184 + font-weight: 400;
  185 + color: rgba(86, 86, 86, 1);
  186 + line-height: 46px;
  187 + }
  188 +
  189 + }
  190 + }
  191 +
  192 + //页脚
  193 + .footer {
  194 + margin: 30px;
  195 + border-top: solid 1px #E6E6E6;
  196 + display: flex;
  197 + justify-content: space-between;
  198 +
  199 + div {
  200 + width: 236px;
  201 + height: 78px;
  202 + border-radius: 16px;
  203 + text-align: center;
  204 + line-height: 78px;
  205 + margin: 30px 0;
  206 + }
  207 +
  208 + .cancel {
  209 + background: rgba(249, 249, 249, 1);
  210 + color: #B4B4B4;
  211 + }
  212 +
  213 + .confirm {
  214 + background: linear-gradient(90deg, rgba(254, 116, 3, 1) 0%, rgba(246, 65, 4, 1) 100%);
  215 + color: #fff;
  216 + border-radius: 16px;
  217 + }
  218 +
  219 + }
  220 + }
  221 +}
... ...
src/components/addressToast/addressToast.vue renamed to src/components/h5AddressToast/h5AddressToast.vue
  View file @5264da1
... ... @@ -388,5 +388,5 @@ export default {
388 388  
389 389 <!-- Add "scoped" attribute to limit CSS to this component only -->
390 390 <style rel="stylesheet/less" lang="less">
391   -@import './addressToast';
  391 +@import './h5AddressToast';
392 392 </style>
... ...
src/pages/goodDetails/goodDetails.vue
  View file @5264da1
... ... @@ -103,7 +103,7 @@
103 103 </div>
104 104 </div>
105 105 <!-- 地址信息组件 -->
106   - <address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></address-toast>
  106 + <h5-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></h5-address-toast>
107 107 </div>
108 108 </template>
109 109  
... ... @@ -113,7 +113,7 @@ import callAppBox from &quot;@/components/callAppBox/callAppBox&quot;;
113 113 import swiper from "@/components/swiper/swiper";
114 114 import backBox from "@/components/backBox/backBox";
115 115 import columnListBox from "@/components/columnListBox/columnListBox";
116   -import addressToast from "@/components/addressToast/addressToast";
  116 +import h5AddressToast from "@/components/h5AddressToast/h5AddressToast";
117 117 import { Toast, Indicator } from "mint-ui";
118 118 export default {
119 119 name: 'goodDetails',
... ... @@ -132,7 +132,7 @@ export default {
132 132 swiper,
133 133 backBox,
134 134 columnListBox,
135   - addressToast
  135 + h5AddressToast
136 136 },
137 137 //静态
138 138 props: [
... ...
src/pages/pointsExchangeRecords/pointsExchangeRecords.vue
  View file @5264da1
... ... @@ -46,14 +46,14 @@
46 46 没有更多了
47 47 </div>
48 48 <!-- 地址信息组件 -->
49   - <address-toast ref="itemsInfo" @toUpdate="updateAddressInfo" v-show="pointsToast_control"></address-toast>
  49 + <h5-address-toast ref="itemsInfo" @toUpdate="updateAddressInfo" v-show="pointsToast_control"></h5-address-toast>
50 50 </div>
51 51 </template>
52 52  
53 53 <script>
54 54 // 引入组件
55 55 import { Toast, Indicator } from "mint-ui";
56   -import addressToast from "@/components/addressToast/addressToast";
  56 +import h5AddressToast from "@/components/h5AddressToast/h5AddressToast";
57 57 export default {
58 58 data () {
59 59 return {
... ... @@ -67,7 +67,7 @@ export default {
67 67 },
68 68 //部件
69 69 components: {
70   - addressToast
  70 + h5AddressToast
71 71 },
72 72 //静态
73 73 props: [
... ...