w-front-end / select_good · Commits

Commit 5895d103d2564767f3403134436f1e3b19ec6f6a

Authored by zhiyangdu
1 parent 62a215af

填写地址兑换

Inline Side-by-side
Showing 5 changed files with 628 additions and 4 deletions
src/components/addressToast/addressToast.less 0 → 100644
  View file @5895d10
  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 + 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 +
  51 + .user_info {
  52 + display: flex;
  53 +
  54 + div:nth-child(2) {
  55 + margin-left: 30px;
  56 + }
  57 + }
  58 +
  59 + .btn {
  60 + color: #F5A623;
  61 + font-size: 28px;
  62 + }
  63 +
  64 + }
  65 +
  66 + .info {
  67 + height: 80px;
  68 + max-height: 80px;
  69 + margin-top: 10px;
  70 + font-size: 28px;
  71 + color: #999999;
  72 + text-overflow: ellipsis;
  73 + overflow: hidden;
  74 + display: -webkit-box;
  75 + /*! autoprefixer: off */
  76 + -webkit-box-orient: vertical;
  77 + /*! autoprefixer: on */
  78 + -webkit-line-clamp: 2;
  79 + -ms-word-wrap: break-word;
  80 + word-wrap: break-word;
  81 + }
  82 +
  83 + .tooltips {
  84 + height: 130px;
  85 + line-height: 130px;
  86 + font-size: 28px;
  87 + font-weight: 500;
  88 + color: rgba(153, 153, 153, 1);
  89 + text-align: center;
  90 + }
  91 +
  92 + }
  93 +
  94 + .cards {
  95 + width: 442px;
  96 + background: rgba(249, 249, 249, 1);
  97 + border-radius: 16px;
  98 + margin: 0 30px 10px 30px;
  99 + padding: 24px;
  100 + border: none;
  101 + color: #666666;
  102 + text-align: left;
  103 + height: 42px;
  104 + line-height: 42px;
  105 + }
  106 +
  107 + .cards::-webkit-input-placeholder {
  108 + color: #c8c8c8;
  109 + font-size: 30px;
  110 + }
  111 +
  112 + .goods_box {
  113 + margin: 30px;
  114 + width: 500px;
  115 + display: flex;
  116 +
  117 + img {
  118 + width: 140px;
  119 + height: 140px;
  120 + border-radius: 24px;
  121 + }
  122 +
  123 + .goods_info {
  124 + flex: 1;
  125 + margin-left: 30px;
  126 +
  127 + .goods_title {
  128 + height: 80px;
  129 + font-size: 28px;
  130 + font-weight: 500;
  131 + color: rgba(51, 51, 51, 1);
  132 + overflow: hidden;
  133 + display: -webkit-box;
  134 + -webkit-box-orient: vertical;
  135 + -webkit-line-clamp: 3;
  136 + -ms-word-wrap: break-word;
  137 + word-wrap: break-word;
  138 +
  139 + }
  140 +
  141 + .exchange {
  142 + height: 50px;
  143 + margin-top: 10px;
  144 + line-height: 50px;
  145 + font-size: 20px;
  146 + font-weight: 400;
  147 + color: rgba(153, 153, 153, 1);
  148 +
  149 + .num {
  150 + font-size: 36px;
  151 + font-weight: 600;
  152 + color: #FF3B39;
  153 + }
  154 + }
  155 + }
  156 +
  157 + }
  158 +
  159 + //数量加减
  160 + .goods_num_box {
  161 + display: flex;
  162 + justify-content: space-between;
  163 + margin: 0 30px;
  164 +
  165 + .text {
  166 + color: #999;
  167 + }
  168 +
  169 + .num {
  170 + display: flex;
  171 +
  172 + img {
  173 + width: 46px;
  174 + height: 46px;
  175 + }
  176 +
  177 + div {
  178 + width: 60px;
  179 + text-align: center;
  180 + font-size: 28px;
  181 + font-weight: 400;
  182 + color: rgba(86, 86, 86, 1);
  183 + line-height: 46px;
  184 + }
  185 +
  186 + }
  187 + }
  188 +
  189 + //页脚
  190 + .footer {
  191 + margin: 30px;
  192 + border-top: solid 1px #E6E6E6;
  193 + display: flex;
  194 + justify-content: space-between;
  195 +
  196 + div {
  197 + width: 236px;
  198 + height: 78px;
  199 + border-radius: 16px;
  200 + text-align: center;
  201 + line-height: 78px;
  202 + margin: 30px 0;
  203 + }
  204 +
  205 + .cancel {
  206 + background: rgba(249, 249, 249, 1);
  207 + color: #B4B4B4;
  208 + }
  209 +
  210 + .confirm {
  211 + background: linear-gradient(90deg, rgba(254, 116, 3, 1) 0%, rgba(246, 65, 4, 1) 100%);
  212 + color: #fff;
  213 + border-radius: 16px;
  214 + }
  215 +
  216 + }
  217 + }
  218 +}
... ...
src/components/addressToast/addressToast.vue 0 → 100644
  View file @5895d10
  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: null, // 兑换商品ID
  55 + // drawRecordItemInfo: null // 中奖记录单条信息
  56 + };
  57 + },
  58 + props: ["isBuyLimit"],
  59 + created () {
  60 + // 判断 安卓还是ios获取回选的地址url地址
  61 + let addressId;
  62 + if (this.isiPhone.value) {
  63 + addressId = this.$route.query.addressId;
  64 + // 因为iOS地址回选两次后goodsId丢失，所以页面加载时判断是否有商品goodsId
  65 + if (this.$route.query.goodsId) {
  66 + this.goodsId = this.$route.query.goodsId;
  67 + }
  68 + } else {
  69 + addressId = window.localStorage.getItem("addressId") || this.$route.query.addressId;
  70 + }
  71 +
  72 + if (addressId) {
  73 + this.getaddressInfo(addressId);
  74 + } else {
  75 + // 获取我的首选地址
  76 + // this.myFirstAddress();
  77 + }
  78 + //地址之后的回选
  79 + var id = this.$route.query.id;
  80 + if (id) {
  81 + this.luckDrawGift(id);
  82 + }
  83 + // 兑换商品
  84 + // console.log(this.itemInfo)
  85 + },
  86 + methods: {
  87 + // 父组件点击兑换调用子组件传值商品商品信息
  88 + getItemInfo (content) {
  89 + this.itemInfo = content;
  90 + this.goodsId = content.id; // 获取需要兑换商品的ID
  91 + // 获取商品信息接口
  92 + this.luckDrawGift(content.id);
  93 + // 获取首选地址接口
  94 + this.myFirstAddress();
  95 + // 存取抽奖记录选中的列表数据
  96 + // this.$set(this, "drawRecordItemInfo", content.drawRecordItemInfo);
  97 + },
  98 + // 我的首选地址
  99 + /**
  100 + * 我的首选地址
  101 + * * @param {string} uid [用户id]
  102 + */
  103 + myFirstAddress () {
  104 + // 加载中提示
  105 + // Indicator.open('加载中...');
  106 +
  107 + // 请求接口
  108 + this.http(
  109 + "/Api/" + this.getApiVersion().index + "/myFirstAddress",
  110 + {
  111 + uid: this.getStore("uid")
  112 + },
  113 + this.myFirstAddressCallback,
  114 + {
  115 + method: "POST"
  116 + }
  117 + );
  118 + },
  119 +
  120 + /**
  121 + * 我的首选地址信息
  122 + * @param {object} res [服务器返回数据]
  123 + * @param {object} ext [扩展参数]
  124 + */
  125 + myFirstAddressCallback (res, ext) {
  126 + // 加载完成
  127 + // Indicator.close();
  128 +
  129 + // 返回处理
  130 + if (res.code == 200) {
  131 + // 解构数据
  132 + let { data: datas } = res;
  133 + this.addressInfo = datas;
  134 + /* 我的首选地址信息 开始 */
  135 + } else if (res.code == 400) {
  136 + // 获取积分商场首页信息失败
  137 + Toast(res.message);
  138 + } else {
  139 + // 获取积分商场首页信息失败
  140 + Toast("获取我的首选地址失败");
  141 + }
  142 + },
  143 + /**
  144 + * 选中的地址
  145 + * * @param {string} uid [用户id]
  146 + */
  147 + getaddressInfo (addressId) {
  148 + // 加载中提示
  149 + // Indicator.open('加载中...');
  150 +
  151 + // 请求接口
  152 + this.http(
  153 + "/Api/" + this.getApiVersion().index + "/addressInfo",
  154 + {
  155 + id: addressId
  156 + },
  157 + this.getaddressInfoCallback,
  158 + {
  159 + method: "POST"
  160 + }
  161 + );
  162 + },
  163 +
  164 + /**
  165 + * 选中的地址
  166 + * @param {object} res [服务器返回数据]
  167 + * @param {object} ext [扩展参数]
  168 + */
  169 + getaddressInfoCallback (res, ext) {
  170 + // 加载完成
  171 + // Indicator.close();
  172 +
  173 + // 返回处理
  174 + if (res.code == 200) {
  175 + // 解构数据
  176 + let { data: datas } = res;
  177 + this.addressInfo = datas;
  178 + /* 获取选中的地址失败 开始 */
  179 + } else if (res.code == 400) {
  180 + // 获取选中的地址失败
  181 + Toast(res.message);
  182 + } else {
  183 + // 获取选中的地址失败
  184 + Toast("获取选中的地址失败");
  185 + }
  186 + },
  187 + /**
  188 + * 选中的商品信息
  189 + * * @param {string} uid [用户id]
  190 + */
  191 + luckDrawGift (id) {
  192 + // 加载中提示
  193 + // Indicator.open('加载中...');
  194 +
  195 + // 请求接口
  196 + this.http(
  197 + "/Api/" + this.getApiVersion().LuckDraw + "/luckDrawGift",
  198 + {
  199 + uid: this.getStore("uid"),
  200 + id: id
  201 + },
  202 + this.luckDrawGiftCallback,
  203 + {
  204 + method: "POST"
  205 + }
  206 + );
  207 + },
  208 +
  209 + /**
  210 + * 选中的兑换商品信息
  211 + * @param {object} res [服务器返回数据]
  212 + * @param {object} ext [扩展参数]
  213 + */
  214 + luckDrawGiftCallback (res, ext) {
  215 + // 加载完成
  216 + // Indicator.close();
  217 +
  218 + // 返回处理
  219 + if (res.code == 200) {
  220 + // 解构数据
  221 + let { data: datas } = res;
  222 + this.itemInfo = datas;
  223 + // console.log(this.itemInfo)
  224 + /* 获取选中的地址失败 开始 */
  225 + } else if (res.code == 400) {
  226 + // 获取选中的兑换商品信息失败
  227 + Toast(res.message);
  228 + } else {
  229 + // 获取选中的兑换商品信息失败
  230 + Toast("获取选中的兑换商品信息失败");
  231 + }
  232 + },
  233 + /**
  234 + * 取消
  235 + */
  236 + cancel () {
  237 + // 隐藏弹框
  238 + this.$parent.pointsToast_control = false;
  239 + // 安卓手机下特殊处理
  240 + if (this.isAndroid.value) {
  241 + // 安卓下清除locaStroe的ext数据
  242 + window.localStorage.removeItem("ext");
  243 + } else {
  244 + window.location.href =
  245 + window.location.href.split("?")[0] +
  246 + "?uid=" +
  247 + this.getStore("uid")
  248 + }
  249 + },
  250 + /**
  251 + * 确定
  252 + */
  253 + confirm () {
  254 + let orderInfo = {
  255 + addressId: this.$route.query.addressId || this.addressInfo.id,
  256 + id: this.$route.query.goodsId || this.goodsId, // 兑换商品ID
  257 + };
  258 + // 隐藏弹框
  259 + this.$parent.pointsToast_control = false;
  260 + // 安卓手机下特殊处理
  261 + if (this.isAndroid.value) {
  262 + orderInfo.id = this.getParameterByName("goodsId") || this.goodsId
  263 + orderInfo.addressId = window.localStorage.getItem("addressId") || this.addressInfo.id
  264 + orderInfo.pointsToast_control = this.getParameterByName("pointsToast_control")
  265 + // 安卓下清除locaStroe的ext数据
  266 + window.localStorage.removeItem("ext");
  267 + } else {
  268 + window.location.href =
  269 + window.location.href.split("?")[0] +
  270 + "?uid=" +
  271 + this.getStore("uid")
  272 + }
  273 + // 最新地址信息回传给父组件
  274 + this.$parent.addressInfo = this.addressInfo;
  275 + this.addLuckDrawAddress(orderInfo);
  276 + },
  277 + // 更改地址
  278 + changeAddress () {
  279 + // 安卓手机两次更改地址goodsId没拿到从咯擦S
  280 + if (this.isAndroid.value && !this.goodsId) {
  281 + let ext = "&" + window.localStorage.getItem("ext")
  282 + this.goodsId = this.getParameterByName(
  283 + "goodsId",
  284 + ext
  285 + );
  286 + }
  287 + var giftId = this.$route.query.giftId || 0;
  288 + // 测试环境
  289 + window.location.href =
  290 + this.getApiVersion().addAddresss +
  291 + "html/mall/1/#/pages/users/addressList/addressList" +
  292 + "?uid=" +
  293 + this.getStore("uid") +
  294 + "&ext=" +
  295 + encodeURIComponent(
  296 + "goodsId=" +
  297 + this.goodsId +
  298 + "&pointsToast_control=" +
  299 + this.$parent.pointsToast_control
  300 + ) +
  301 + "&from=redirect&redirect=" +
  302 + encodeURIComponent(window.location.href.split("?")[0]);
  303 + },
  304 + // 提交中奖的商品信息
  305 + /**
  306 + * 提交中奖的商品信息
  307 + * * @param {string} addressId [地址id]
  308 + * *@param {string} id [商品id]
  309 + * *@param {string} id_card [身份证id]
  310 + */
  311 + addLuckDrawAddress (orderInfo) {
  312 + // 加载中提示
  313 + Indicator.open("加载中...");
  314 +
  315 + // 请求接口
  316 + this.http(
  317 + "/Api/" + this.getApiVersion().LuckDraw + "/addLuckIntegralAddress",
  318 + {
  319 + uid: this.getStore("uid"),
  320 + addressId: orderInfo.addressId,
  321 + id: orderInfo.id // 商品ID
  322 + },
  323 + this.addLuckDrawAddressCallback,
  324 + {
  325 + method: "POST",
  326 + ext: orderInfo
  327 + }
  328 + );
  329 + },
  330 +
  331 + /**
  332 + * 提交中奖的商品信息
  333 + * @param {object} res [服务器返回数据]
  334 + * @param {object} ext [扩展参数]
  335 + */
  336 + addLuckDrawAddressCallback (res, ext) {
  337 + // 加载完成
  338 + Indicator.close();
  339 + // 返回处理
  340 + if (res.code == 200) {
  341 + Toast("提交成功等待发货");
  342 + this.$emit("toUpdate");
  343 + } else {
  344 + // 兑换礼品失败
  345 + Toast(res.message);
  346 + }
  347 + }
  348 + }
  349 +};
  350 +</script>
  351 +
  352 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  353 +<style rel="stylesheet/less" lang="less">
  354 +@import './addressToast';
  355 +</style>
... ...
src/main.js
  View file @5895d10
... ... @@ -63,7 +63,7 @@ import &quot;url-search-params-polyfill&quot;;
63 63 Vue.config.productionTip = false;
64 64  
65 65 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
66   -Vue.prototype.mode = "prod";
  66 +Vue.prototype.mode = "test";
67 67  
68 68 // 微信JS-SDK对象
69 69 Vue.prototype.jweixin = {
... ...
src/pages/goodDetails/goodDetails.vue
  View file @5895d10
... ... @@ -79,10 +79,12 @@
79 79 </div>
80 80 <!-- 页脚 -->
81 81 <div class="footer">
82   - <div class="btn">
  82 + <div class="btn" @click="exchange">
83 83 立即兑换
84 84 </div>
85 85 </div>
  86 + <!-- 地址信息组件 -->
  87 + <address-toast ref="itemsInfo" @toUpdate="fansShopMessageList" v-show="pointsToast_control"></address-toast>
86 88 </div>
87 89 </template>
88 90  
... ... @@ -92,6 +94,7 @@ import callAppBox from &quot;@/components/callAppBox/callAppBox&quot;;
92 94 import swiper from "@/components/swiper/swiper";
93 95 import backBox from "@/components/backBox/backBox";
94 96 import columnListBox from "@/components/columnListBox/columnListBox";
  97 +import addressToast from "@/components/addressToast/addressToast";
95 98 export default {
96 99 data () {
97 100 return {
... ... @@ -108,7 +111,8 @@ export default {
108 111 to: "0",
109 112 type: "0", }],
110 113 backs: null, // 后退按钮组
111   - similarGoods: null // 相似商品
  114 + similarGoods: null, // 相似商品
  115 + pointsToast_control: this.$route.query.pointsToast_control,
112 116 }
113 117 },
114 118 //部件
... ... @@ -116,7 +120,8 @@ export default {
116 120 callAppBox,
117 121 swiper,
118 122 backBox,
119   - columnListBox
  123 + columnListBox,
  124 + addressToast
120 125 },
121 126 //静态
122 127 props: [
... ... @@ -130,6 +135,41 @@ export default {
130 135 //方法表示一个具体的操作，主要书写业务逻辑；
131 136 methods: {
132 137 /**
  138 + * 跳转商品详情
  139 + * @param {Object} item [数据对象]
  140 + */
  141 + toDetail (item) {
  142 + // 判断通用跳转函数是否存在
  143 + this.$router.push({
  144 + path: '/goodDetails',
  145 + query: {
  146 + goodsId: item.id,
  147 + }
  148 + })
  149 + },
  150 + // 兑换
  151 + exchange (item) {
  152 + // 1月3号到1月31号才能领取
  153 + // if (this.time < 1612108800) {
  154 + this.pointsToast_control = true;
  155 + // 礼品兑换弹框派发
  156 + this.$refs.itemsInfo.getItemInfo(item)
  157 + // } else {
  158 + // // 显示查看地址弹框
  159 + // let options = {
  160 + // title: "奖励已过领取时间",
  161 + // message: "领取时间: 2021-01-03至01-31",
  162 + // messageAlign: "center",
  163 + // confirmButtonText: "知道了"
  164 + // };
  165 + // // 调用showModal层参数
  166 + // this.$set(this.$parent, "showOptions", options);
  167 + // // 显示通用浮层
  168 + // this.$parent.$refs.showModal.showLayer();
  169 +
  170 + // }
  171 + },
  172 + /**
133 173 * 积分商品详情页页面接口
134 174 */
135 175 fansShopMessageList () {
... ... @@ -189,6 +229,17 @@ export default {
189 229 // 设置标题
190 230 this.$set(this, "title", "积分商品详情页");
191 231  
  232 + // ios从url获取安卓localStorage
  233 + if (this.isiPhone.value) {
  234 + this.pointsToast_control = this.$route.query.pointsToast_control;
  235 + } else {
  236 + let ext = window.localStorage.getItem("ext");
  237 + this.pointsToast_control = this.getParameterByName(
  238 + "pointsToast_control",
  239 + ext
  240 + );
  241 + }
  242 +
192 243 // 判断是否在App内
193 244 if (this.isCNLive.value) {
194 245  
... ...
static/img/addressClose.png 0 → 100644
View file @5895d10

1.58 KB