w-front-end / select_good · Commits

Commit 15343bab47c7e7b15fd52d955d41e31a5ce90a01

Authored by zhiyangdu
1 parent 55863e67

新增优惠券领取页面

Inline Side-by-side
Showing 3 changed files with 735 additions and 0 deletions
src/pages/couponCollectionDetails/couponCollectionDetails.less 0 → 100644
  View file @15343ba
  1 +.good-details-box{
  2 + padding-bottom: 130px;
  3 + .pl {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + &.is-open-app {
  7 + height: 122px;
  8 + }
  9 + &.is-cnlive {
  10 + height: 93px;
  11 + }
  12 + }
  13 + .hide{
  14 + display:none;
  15 + }
  16 + .call-app-box{
  17 + position: fixed;
  18 + z-index:1;
  19 + }
  20 + .back-box{
  21 + background-color: #FFF;
  22 + position:fixed;
  23 + z-index:1;
  24 + }
  25 + .goods-img{
  26 + display: block;
  27 + width: 100%;
  28 + height:750px
  29 + }
  30 + .main-box{
  31 + padding-bottom: 0;
  32 + padding-bottom: constant(safe-area-inset-bottom);
  33 + padding-bottom: env(safe-area-inset-bottom);
  34 + .title{
  35 + // width: 414px;
  36 + font-size: 34px;
  37 + font-weight: 500;
  38 + color: #333333;
  39 + line-height: 48px;
  40 + text-align: center;
  41 + margin:30px 20px 10px 20px;
  42 + display: -webkit-box;
  43 + -webkit-line-clamp: 2;
  44 + /*! autoprefixer: off */
  45 + -webkit-box-orient: vertical;
  46 + /*! autoprefixer: on */
  47 + text-overflow: ellipsis;
  48 + overflow: hidden;
  49 + }
  50 + .title-t{
  51 + margin:20px 60px 10px 60px ;
  52 + display: flex;
  53 + align-items: center;
  54 + justify-content: center;
  55 + // 积分 + 现金标示
  56 + .goods_tip{
  57 + padding: 3px 8px;
  58 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  59 + border-radius: 7px;
  60 + height: 30px;
  61 + font-size: 22px;
  62 + font-weight: 400;
  63 + color: #945A08;
  64 + line-height: 30px;
  65 + margin-right: 10px;
  66 + }
  67 + .price{
  68 + height: 40px;
  69 + font-size: 28px;
  70 + font-weight: 400;
  71 + color: #999999;
  72 + line-height: 40px;
  73 + margin-right: 24px;
  74 + text-decoration: line-through;
  75 + }
  76 + .integral{
  77 + height: 92px;
  78 + font-size: 42px;
  79 + font-weight: 500;
  80 + color: #FC1541;
  81 + line-height: 92px;
  82 + }
  83 + .integral-in{
  84 + height: 45px;
  85 + font-size: 32px;
  86 + font-weight: 400;
  87 + color: #333333;
  88 + line-height: 45px;
  89 + margin-left: 14px;
  90 + }
  91 + }
  92 + /*商品信息**/
  93 + .goods-info{
  94 + margin: 30px;
  95 + width: 690px;
  96 + background: #FFFFFF;
  97 + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.06);
  98 + border-radius: 24px;
  99 + overflow: hidden;
  100 + .good-title{
  101 + margin-top: 50px;
  102 + height: 42px;
  103 + font-size: 30px;
  104 + font-weight: 500;
  105 + color: #666666;
  106 + line-height: 42px;
  107 + text-align: center;
  108 + display: flex;
  109 + align-items: center;
  110 + justify-content: center;
  111 + .left{
  112 + margin-right: 28px;
  113 + }
  114 + .right{
  115 + margin-left: 28px;
  116 + }
  117 + span{
  118 + width: 46px;
  119 + height: 1.5px;
  120 + background-color: #B4B4B4;
  121 + }
  122 + }
  123 + .good-desc{
  124 + margin:40px 40px 10px 40px;
  125 + font-size: 26px;
  126 + font-weight: 300;
  127 + color: #999999;
  128 + line-height: 37px;
  129 + .text-left{
  130 + text-align: left;
  131 + margin-top: 20px;
  132 + .blue{
  133 + color: #0091FF;
  134 + }
  135 + .to-link{
  136 + color: #0091FF;
  137 + }
  138 + span{
  139 + font-size: 26px;
  140 + font-weight: 400;
  141 + color: #666666;
  142 + line-height: 37px;
  143 + }
  144 + }
  145 + .desc_title{
  146 + height: 37px;
  147 + font-size: 26px;
  148 + font-weight: 400;
  149 + color: #666666;
  150 + line-height: 37px;
  151 + }
  152 + .mar_top10{
  153 + margin-top:10px;
  154 + }
  155 + }
  156 + /**商品规格*/
  157 + .item_sku_box{
  158 + margin-top:30px;
  159 + .item_sku{
  160 + font-size: 26px;
  161 + font-weight: 300;
  162 + display: flex;
  163 + margin:0 30px;
  164 + div{
  165 + background: #FEF9F9;
  166 + }
  167 + .left{
  168 + color: #777777;
  169 + font-weight: 300;
  170 + margin-right:10px;
  171 + width: 204px;
  172 + height:72px;
  173 + line-height: 72px;
  174 + text-align: center;
  175 + display: -webkit-box;
  176 + -webkit-line-clamp: 1;
  177 + /*! autoprefixer: off */
  178 + -webkit-box-orient: vertical;
  179 + /*! autoprefixer: on */
  180 + text-overflow: ellipsis;
  181 + overflow: hidden;
  182 + }
  183 + .right{
  184 + width:435px;
  185 + height:72px;
  186 + line-height: 72px;
  187 + display: -webkit-box;
  188 + -webkit-line-clamp: 1;
  189 + /*! autoprefixer: off */
  190 + -webkit-box-orient: vertical;
  191 + /*! autoprefixer: on */
  192 + text-overflow: ellipsis;
  193 + overflow: hidden;
  194 + flex: 1;
  195 + color:#333333;
  196 + font-weight: 400;
  197 + span{
  198 + margin-left: 60px;
  199 + }
  200 + }
  201 + }
  202 + .item_sku:nth-child(odd) > div{
  203 + background: #FEF9F9;
  204 + }
  205 + .item_sku:nth-child(even) > div{
  206 + background: rgba(249, 249, 249, 0.3);
  207 + }
  208 + }
  209 + /**相似商品*/
  210 + .column-list-box{
  211 + margin-top:40px;
  212 + }
  213 + }
  214 + }
  215 + /**页脚*/
  216 + .footer{
  217 + width: 750px;
  218 + height: 130px;
  219 + background: #FFFFFF;
  220 + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  221 + position: fixed;
  222 + bottom:0px;
  223 + left:0px;
  224 + display:flex;
  225 + justify-content: center;
  226 + align-items: center;
  227 + padding-bottom: 0;
  228 + padding-bottom: constant(safe-area-inset-bottom);
  229 + padding-bottom: env(safe-area-inset-bottom);
  230 + .desc{
  231 + height: 130px;
  232 + font-size: 30px;
  233 + font-weight: 400;
  234 + color: #333333;
  235 + line-height: 130px;
  236 + margin: 0 30px;
  237 + }
  238 + .line{
  239 + width: 1px;
  240 + height: 40px;
  241 + background-color: #C8C8C8;
  242 + margin: 0 30px 0 10px
  243 + }
  244 + .collection_box{
  245 + &.mar_left20{
  246 + margin-left: 40px;
  247 + }
  248 + img{
  249 + display: block;
  250 + width: 40px;
  251 + height: 40px;
  252 + }
  253 + div{
  254 + font-size: 18px;
  255 + font-weight: 400;
  256 + color: #333333;
  257 + line-height: 25px;
  258 + text-align: center;
  259 + margin-top: 10px;
  260 + }
  261 + }
  262 + .btn{
  263 + flex: 1;
  264 + margin: 20px 30px;
  265 + height: 90px;
  266 + line-height: 90px;
  267 + background: #F5A623;
  268 + border-radius: 16px;
  269 + text-align: center;
  270 + color: #fff;
  271 + font-size: 34px;
  272 + font-weight: 500;
  273 + color: #FFFFFF;
  274 + }
  275 + .grey{
  276 + background: #E6E6E6;
  277 + color: #888888;
  278 + }
  279 + }
  280 + /*底部弹窗**/
  281 + .popup_box{
  282 + overflow-y: initial;
  283 + padding-bottom: 0;
  284 + padding-bottom: constant(safe-area-inset-bottom);
  285 + padding-bottom: env(safe-area-inset-bottom);
  286 + .popup_main{
  287 + height: 834px;
  288 + background: #FFFFFF;
  289 + padding: 30px 50px 37px 50px;
  290 + .goods_box{
  291 + // display: flex;
  292 + // justify-content: flex-end;
  293 + position: relative;
  294 + padding-bottom: 37px;
  295 + border-bottom: solid 1px #E4E4E4;
  296 + .item_pic_box{
  297 + position: absolute;
  298 + top: -70px;
  299 + left: 0;
  300 + width: 220px;
  301 + height: 220px;
  302 + background: #FFFFFF;
  303 + border-radius: 10px;
  304 + .item_pic{
  305 + display: block;
  306 + width: 190px;
  307 + height: 190px;
  308 + margin: 15px auto;
  309 + }
  310 + }
  311 + .right{
  312 + margin-left:260px;
  313 + .title{
  314 + height: 46px;
  315 + display: flex;
  316 + justify-content: space-between;
  317 + .title_t{
  318 + width: 354px;
  319 + font-size: 30px;
  320 + font-weight: 500;
  321 + color: #333333;
  322 + line-height: 42px;
  323 + display: -webkit-box;
  324 + -webkit-line-clamp: 1;
  325 + /*! autoprefixer: off */
  326 + -webkit-box-orient: vertical;
  327 + /*! autoprefixer: on */
  328 + text-overflow: ellipsis;
  329 + overflow: hidden;
  330 + }
  331 + .close{
  332 + display: block;
  333 + width:46px;
  334 + height:46px;
  335 + }
  336 + }
  337 + .pirce{
  338 + width: 304px;
  339 + // height: 50px;
  340 + font-size: 36px;
  341 + font-weight: 500;
  342 + color: #FC1541;
  343 + line-height: 50px;
  344 + text-align: left;
  345 + margin-top:42px;
  346 + }
  347 + }
  348 + }
  349 + .num_box{
  350 + display: flex;
  351 + justify-content: space-between;
  352 + align-items: center;
  353 + padding:70px 0;
  354 + border-bottom: solid 1px #E4E4E4;
  355 + .num_tip{
  356 + width: 350px;
  357 + height: 40px;
  358 + font-size: 28px;
  359 + font-weight: 500;
  360 + color: #707070;
  361 + line-height: 40px;
  362 + display: flex;
  363 + span{
  364 + color: #FC1541;
  365 + margin-left: 20px;
  366 + }
  367 + }
  368 + .right{
  369 + display: flex;
  370 + .num{
  371 + width: 30px;
  372 + height: 48px;
  373 + font-size: 34px;
  374 + font-weight: 400;
  375 + color: #565656;
  376 + line-height: 48px;
  377 + text-align: center;
  378 + margin: 0 16px;
  379 + }
  380 + img{
  381 + display: block;
  382 + width: 54px;
  383 + height: 54px;
  384 + }
  385 + }
  386 + }
  387 + .line_box{
  388 + display: flex;
  389 + justify-content: space-between;
  390 + align-items: center;
  391 + padding:30px 0;
  392 + border-bottom: solid 1px #E4E4E4;
  393 + height: 40px;
  394 + font-size: 28px;
  395 + line-height: 40px;
  396 + .left{
  397 + font-weight: 500;
  398 + color: #707070;
  399 + }
  400 + .right{
  401 + font-weight: 400;
  402 + color: #FC1541;
  403 + }
  404 + }
  405 + .btn{
  406 + width: 546px;
  407 + height: 86px;
  408 + line-height:86px;
  409 + background: #F5A623;
  410 + border-radius: 100px;
  411 + text-align: center;
  412 + font-size: 34px;
  413 + font-weight: 500;
  414 + color: #fff;
  415 + margin: 225px auto 0 auto;
  416 + letter-spacing: 20px;
  417 + }
  418 + }
  419 + }
  420 +}
0 421 \ No newline at end of file
... ...
src/pages/couponCollectionDetails/couponCollectionDetails.vue 0 → 100644
  View file @15343ba
  1 +<template>
  2 + <div class="good-details-box">
  3 + <!-- H5唤起App组件 -->
  4 + <call-app-box class="call-app-box"
  5 + :style="'padding-top: ' + $parent.top.value + 'px'"
  6 + ref="callApp"
  7 + v-if="!isCNLive.value"
  8 + :callApps="$parent.callApps">
  9 + </call-app-box>
  10 + <back-box v-if="isCNLive.value"
  11 + :class="{'hide': $route.query.hideBack == true}"
  12 + class="back-box"
  13 + :style="'padding-top: ' + $parent.top.value + 'px'"
  14 + @back="back"
  15 + :backs="backs">
  16 + </back-box>
  17 + <!-- pl -->
  18 + <div class="pl"
  19 + :style="'padding-top: ' + $parent.top.value + 'px'"
  20 + :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
  21 + <!--轮播-->
  22 + <!-- <swiper
  23 + :style="
  24 + 'margin-top:' +
  25 + ($parent.isBack && isCNLive.value ? 62 : 10) +
  26 + 'px'
  27 + "
  28 + v-if="simgList"
  29 + :swipers="goodsInfo.simg"
  30 + :isPointsMall= 'true'
  31 + :options="{
  32 + showIndicators: true
  33 + }"
  34 + >
  35 + </swiper> -->
  36 + <img v-if="goodsInfo && goodsInfo.simg"
  37 + class="goods-img"
  38 + v-lazy="goodsInfo.simg"
  39 + alt="" />
  40 + <!-- 内容 -->
  41 + <div class="main-box">
  42 + <!-- 标题 -->
  43 + <div v-if="goodsInfo && goodsInfo.title"
  44 + class="title">
  45 + {{goodsInfo.title}}
  46 + </div>
  47 + <!-- 商品信息 -->
  48 + <div class="goods-info">
  49 + <!-- 商品规格 -->
  50 + <div class="good-title">
  51 + <span class="left"></span>领取规则
  52 + <span class="right"></span>
  53 + </div>
  54 + <div class="good-desc">
  55 + <!-- 优惠券 -->
  56 + <div class="desc_title">兑换流程</div>
  57 + <div class="text-left">
  58 + 1､ 领取后需在优惠券有效期内使用<br> 2、请到【购物车】或购好物挑选商品下单使用。
  59 + </div>
  60 + <div class="desc_title mar_top10">注意事项</div>
  61 + <div class="text-left">
  62 + 1､ 使用说明：此优惠券每个手机号只能领取一次；<br> 2、优惠券有效期：优惠券使用有效期截止到2022年4月22日；
  63 + <!-- <a href="tel:010-65832485">010-65832485</a> -->
  64 + </div>
  65 + </div>
  66 + </div>
  67 + </div>
  68 + <!-- 有积分页脚显示 -->
  69 + <div v-if="goodsInfo && goodsInfo.stock != 0">
  70 + <!-- 积分充足 -->
  71 + <div class="footer">
  72 + <div class="btn"
  73 + @click="addIntegralOrder">
  74 + 立即领取
  75 + </div>
  76 + </div>
  77 + </div>
  78 + </div>
  79 +</template>
  80 +
  81 +<script>
  82 +import { Swipe, SwipeItem } from 'vant';
  83 +import callAppBox from "@/components/callAppBox/callAppBox";
  84 +import swiper from "@/components/swiper/swiper";
  85 +import backBox from "@/components/backBox/backBox";
  86 +import { Toast, Indicator } from "mint-ui";
  87 +export default {
  88 + data () {
  89 + return {
  90 + title: "", // 标题
  91 + banner: null,
  92 + goodsInfo: null,
  93 + backs: null, // 后退按钮组
  94 + }
  95 + },
  96 + //部件
  97 + components: { callAppBox, swiper, backBox },
  98 + //静态
  99 + props: [
  100 + ],
  101 + //对象内部的属性监听，也叫深度监听
  102 + watch: {
  103 + },
  104 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  105 + computed: {
  106 + },
  107 + //方法表示一个具体的操作，主要书写业务逻辑；
  108 + methods: {
  109 + /**
  110 + * 分享
  111 + */
  112 + toShare () {
  113 + // 判断分享
  114 + if (typeof this.$parent.toShare === 'function') {
  115 + this.$parent.toShare(71, "1", (this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : ""));
  116 + }
  117 + },
  118 + // type=2跳转原生优惠券列表3跳转原生购买内容列表
  119 + jumpType (type) {
  120 + // 跳转到优惠券列表
  121 + window.obj.jumpCoupon();
  122 + },
  123 + /**
  124 + * 领取优惠券接口
  125 + */
  126 + addIntegralOrder () {
  127 + // 加载中提示
  128 + Indicator.open("加载中...");
  129 + // 获取证书请求接口
  130 + this.http("/Api/" + this.getApiVersion().LuckDraw + "/addIntegralOrder", {
  131 + uid: this.getStore("uid"),
  132 + id: this.$route.query.goodsId, // 商品ID
  133 + num: 1
  134 + }, this.addIntegralOrderCallback, {
  135 + method: "POST"
  136 + });
  137 + },
  138 +
  139 + /**
  140 + * 积分兑换接口回调
  141 + * @param {Object} res [服务器返回数据]
  142 + * @param {Object} ext [扩展参数]
  143 + */
  144 + addIntegralOrderCallback (res, ext) {
  145 +
  146 + // 加载完成
  147 + Indicator.close();
  148 +
  149 + // 返回处理
  150 + if (res.code == 200) {
  151 + // 解构数据
  152 + let { data: datas } = res;
  153 + // 方式连续点击兑换
  154 + this.isExchange = true;
  155 + // 两秒后可继续兑换
  156 + let _this = this
  157 + setTimeout(function () {
  158 + _this.isExchange = false;
  159 + }, 1500);
  160 + // 提示语判断
  161 + let tipMessage = "优惠券已存入您的账户，前往“我的”—“我的卡券查看”"
  162 + // 显示查看地址弹框
  163 + let options = {
  164 + message: tipMessage,
  165 + messageAlign: "center",
  166 + confirmButtonText: "确定",
  167 + showCancelButton: true,
  168 + cancelButtonText: "取消",
  169 + confirmButtonCallback: this.jumpType,
  170 + };
  171 + this.$set(this.$parent, "showOptions", options);
  172 + // 显示通用浮层
  173 + this.$parent.$refs.showModal.showLayer();
  174 + } else {
  175 + Toast(res.message);
  176 + }
  177 + },
  178 + /**
  179 + * 积分商品详情页页面接口
  180 + */
  181 + getGoodsInfo (goodsId) {
  182 + // 加载中提示
  183 + Indicator.open("加载中...");
  184 + // 获取证书请求接口
  185 + this.http("/Api/" + this.getApiVersion().LuckDraw + "/integralGoodsInfo", {
  186 + id: goodsId, // 商品ID
  187 + uid: this.getStore("uid") // 用户ID
  188 + }, this.getGoodsInfoCallback, {
  189 + method: "POST"
  190 + });
  191 + },
  192 +
  193 + /**
  194 + * 积分商品详情页页面接口回调
  195 + * @param {Object} res [服务器返回数据]
  196 + * @param {Object} ext [扩展参数]
  197 + */
  198 + getGoodsInfoCallback (res, ext) {
  199 +
  200 + // 加载完成
  201 + Indicator.close();
  202 +
  203 + // 返回处理
  204 + if (res.code == 200) {
  205 +
  206 + // 解构数据
  207 + let { data: datas } = res;
  208 + /* 获取详细信息 */
  209 + this.goodsInfo = datas
  210 + /* 设置商品详情页 */
  211 + /* 相似商品 */
  212 + } else if (res.code == 400) {
  213 +
  214 + // 获取积分商品详情页失败
  215 + Toast(res.message);
  216 + } else {
  217 +
  218 + // 获取积分商品详情页失败
  219 + Toast("获取积分商品详情页失败");
  220 + }
  221 + },
  222 + /**
  223 + * 后退
  224 + */
  225 + back () {
  226 + // 返回先隐藏弹框
  227 +
  228 + // 判断是否有处理函数
  229 + if (typeof this.$parent.back === 'function') {
  230 + // 隐藏通用浮层
  231 + this.$parent.$refs.showModal.hideLayer();
  232 + // 后退
  233 + this.$parent.back();
  234 + } else {
  235 +
  236 + // 后退
  237 + window.history.go(-1);
  238 + }
  239 + },
  240 + },
  241 + //请求数据
  242 + created () {
  243 + // 设置标题
  244 + this.$set(this, "title", "优惠券");
  245 + // 获取商品ID
  246 + let goodsId = this.$route.query.goodsId;
  247 + if (goodsId) {
  248 + // 获取商品信息
  249 + this.getGoodsInfo(goodsId);
  250 + }
  251 + // 判断是否在App内
  252 + if (this.isCNLive.value) {
  253 +
  254 + // 添加后退按钮组“后退”和“分享”按钮
  255 + this.$set(this, 'backs', {
  256 + funcs: {
  257 + back: {
  258 + icon: "static/img/icon_back.png"
  259 + },
  260 + funcArray: [
  261 + {
  262 + icon: "static/img/icon_share.png",
  263 + func: this.toShare
  264 + }
  265 + ]
  266 + }
  267 + });
  268 +
  269 + // 设置标题
  270 + this.$set(this.backs, 'title', '优惠券');
  271 + }
  272 +
  273 + },
  274 + mounted () {
  275 + // 如果是App外，设置唤起App和微信内分享参数
  276 + if (!this.isCNLive.value) {
  277 + // 设置积分首页唤起app参数
  278 + if (typeof this.$parent.getOpenApp === "function") {
  279 + this.$parent.getOpenApp({
  280 + type: 71,
  281 + id: "1",
  282 + url: "",
  283 + ext: this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : ""
  284 + });
  285 + }
  286 + if (typeof this.$parent.getShareData === "function") {
  287 + this.$parent.getShareData({
  288 + type: 71,
  289 + id: 1,
  290 + url: "",
  291 + ext: this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : ""
  292 + });
  293 + }
  294 + }
  295 + }
  296 +}
  297 +</script>
  298 +
  299 +<style scoped lang="less" rel="stylesheet/less">
  300 +@import './couponCollectionDetails.less';
  301 +</style>
  302 +
... ...
src/router/index.js
  View file @15343ba
... ... @@ -344,6 +344,19 @@ const router = new Router({
344 344 }
345 345 },
346 346 {
  347 + // 免费领取优惠券详情
  348 + path: "/couponCollectionDetails",
  349 + name: "couponCollectionDetails",
  350 + component: resolve => {
  351 + require([
  352 + "@/pages/couponCollectionDetails/couponCollectionDetails"
  353 + ], resolve);
  354 + },
  355 + meta: {
  356 + requireAuth: false
  357 + }
  358 + },
  359 + {
347 360 // 查看兑换商品物流
348 361 path: "/logistics",
349 362 name: "logistics",
... ...