w-front-end / select_good · Commits

Commit 147d99b84d7534df755cc715712849ebfe734222

Authored by zhiyangdu
1 parent aca3f309

健康商城商品详情页

Inline Side-by-side
Showing 2 changed files with 115 additions and 52 deletions
src/pages/healthGoodDetails/healthGoodDetails.less
  View file @147d99b
@@ -44,6 +44,7 @@ @@ -44,6 +44,7 @@
44 overflow: hidden; 44 overflow: hidden;
45 } 45 }
46 .title-t{ 46 .title-t{
  47 + color: #3EB781;
47 margin:20px 60px 10px 60px ; 48 margin:20px 60px 10px 60px ;
48 display: flex; 49 display: flex;
49 align-items: center; 50 align-items: center;
@@ -59,16 +60,16 @@ @@ -59,16 +60,16 @@
59 } 60 }
60 .integral{ 61 .integral{
61 height: 92px; 62 height: 92px;
62 - font-size: 66px; 63 + font-size: 42px;
63 font-weight: 500; 64 font-weight: 500;
64 - color: #FC1541; 65 + color: #3EB781;
65 line-height: 92px; 66 line-height: 92px;
66 } 67 }
67 .integral-in{ 68 .integral-in{
68 height: 45px; 69 height: 45px;
69 - font-size: 32px; 70 + font-size: 42px;
70 font-weight: 400; 71 font-weight: 400;
71 - color: #333333; 72 + color: #3EB781;
72 line-height: 45px; 73 line-height: 45px;
73 margin-left: 14px; 74 margin-left: 14px;
74 } 75 }
@@ -104,6 +105,22 @@ @@ -104,6 +105,22 @@
104 background-color: #B4B4B4; 105 background-color: #B4B4B4;
105 } 106 }
106 } 107 }
  108 + /*健康商城规则说明*/
  109 + .health_desc{
  110 + font-size: 28px;
  111 + margin-left: 20px;
  112 + .health_title{
  113 + text-align: left;
  114 + font-size: 28px;
  115 + font-weight: 500;
  116 + margin-top:40px;
  117 + }
  118 + .desc{
  119 + text-align: left;
  120 + color: #666666;
  121 + margin-top: 10px;
  122 + }
  123 + }
107 .good-desc{ 124 .good-desc{
108 margin:40px 40px 10px 40px; 125 margin:40px 40px 10px 40px;
109 font-size: 26px; 126 font-size: 26px;
src/pages/healthGoodDetails/healthGoodDetails.vue
  View file @147d99b
@@ -42,11 +42,11 @@ @@ -42,11 +42,11 @@
42 <div v-if="goodsInfo && goodsInfo.title" class="title"> 42 <div v-if="goodsInfo && goodsInfo.title" class="title">
43 {{goodsInfo.title}} 43 {{goodsInfo.title}}
44 </div> 44 </div>
45 - <!-- 积分 --> 45 + <!-- 健康值 -->
46 <div class="title-t"> 46 <div class="title-t">
47 <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span> 47 <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span>
48 <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span> 48 <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span>
49 - <span class="integral-in">积分</span> 49 + <span class="integral-in">健康值</span>
50 </div> 50 </div>
51 <!-- 商品信息 --> 51 <!-- 商品信息 -->
52 <div class="goods-info"> 52 <div class="goods-info">
@@ -55,34 +55,80 @@ @@ -55,34 +55,80 @@
55 </div> 55 </div>
56 <div v-if="goodsInfo && goodsInfo.content" v-html="goodsInfo.content" class="good-desc html_box"> 56 <div v-if="goodsInfo && goodsInfo.content" v-html="goodsInfo.content" class="good-desc html_box">
57 </div> 57 </div>
58 - <div class="good-title"> 58 + <!-- 健康商品信息 -->
  59 + <div class="good-title">
59 <span class="left"></span>兑换规则<span class="right"></span> 60 <span class="left"></span>兑换规则<span class="right"></span>
60 </div> 61 </div>
61 - <div class="good-desc">  
62 - <div v-if="goodsInfo && goodsInfo.shop_type && (goodsInfo.shop_type == 1 || goodsInfo.shop_type == 2)">  
63 - <div class="text-left">  
64 - 兑换此积分即可0元购买该商品；<br>  
65 - 仅限此商品使用，兑换后7天内有效；  
66 - </div>  
67 - <div class="text-left">  
68 - <span>· 正版授权</span>  
69 - 所售商品均已官方授权，请放心购买；  
70 - </div>  
71 - <div class="text-left">  
72 - <span>· 正品保障</span>  
73 - 独家正品保障。  
74 - </div> 62 + <!-- 商品来源 -->
  63 + <div class="health_desc">
  64 + <div class="health_title">
  65 + 商品来源
  66 + </div>
  67 + <div class="desc">
  68 + 健康商城的商品均由网家家审核的第三方合作商家提供，请放心兑换。
  69 + </div>
  70 + </div>
  71 + <!-- 商品差异 -->
  72 + <div class="health_desc">
  73 + <div class="health_title">
  74 + 商品差异
  75 + </div>
  76 + <div class="desc">
  77 + 商品图片仅供参考，具体请以实物准。
  78 + </div>
  79 + </div>
  80 + <!-- 发货时间 -->
  81 + <div class="health_desc">
  82 + <div class="health_title">
  83 + 发货时间
  84 + </div>
  85 + <div class="desc">
  86 + 商品兑换成功后，预计3-5个工作日发货，如遇节假日及特殊情况（如疫情严重），发货可能相应延迟，您可以在活动页面中的“兑换记录”查看物流信息。
  87 + </div>
  88 + </div>
  89 + <!-- 配送方式 -->
  90 + <div class="health_desc">
  91 + <div class="health_title">
  92 + 配送方式
  93 + </div>
  94 + <div class="desc">
  95 + 商品由合作商家通过快递进行配送，配送范围覆盖全国大部分地区（港澳台地区除外）
  96 + </div>
  97 + </div>
  98 + <!-- 修改信息 -->
  99 + <div class="health_desc">
  100 + <div class="health_title">
  101 + 修改信息
  102 + </div>
  103 + <div class="desc">
  104 + 商品兑换成功后无法更改配送信息，无法退还已使用的健康值，不支持申请退换货。
  105 + </div>
  106 + </div>
  107 + <!-- 商品损坏 -->
  108 + <div class="health_desc">
  109 + <div class="health_title">
  110 + 商品损坏
  111 + </div>
  112 + <div class="desc">
  113 + 签收时请您先确认商品外包装完整，如有问题请当场拒收，拒收后可以到官方客服群申请客服协助处理。
  114 + </div>
  115 + </div>
  116 + <!-- 问题咨询 -->
  117 + <div class="health_desc">
  118 + <div class="health_title">
  119 + 问题咨询
  120 + </div>
  121 + <div class="desc">
  122 + 您在使用过程中有任何问题，请加入官方客服群咨询。
  123 + </div>
  124 + </div>
  125 + <!-- 其他 -->
  126 + <div class="health_desc">
  127 + <div class="health_title">
  128 + 其他
75 </div> 129 </div>
76 - <div v-if="goodsInfo && goodsInfo.shop_type && goodsInfo.shop_type == 2" class="text-left">  
77 - 1､ 您兑换的音频内容，音频上线期间可长期收听；<br>  
78 - 2､ 兑换后暂不支持退款，感谢您的支持；<br>  
79 - 3､ 兑换完成后若显示异常，请10分钟之后尝试；<br>  
80 - 4､您兑换的音频内容为网家家版权内容，请勿恶意转载；<br>  
81 - 5､客服电话：010-65832485;<br>  
82 - 6､ 具体注意事项详情可见  
83 - <span @click="toLink" class="to-link">  
84 - 《网家家APP购买音频内容服务协议》  
85 - </span> 130 + <div class="desc">
  131 + 收货后恶意损坏商品、恶意投诉等影响正常运营，网家家有权拒绝售后服务并追究相关责任。
86 </div> 132 </div>
87 </div> 133 </div>
88 <div class="good-title"> 134 <div class="good-title">
@@ -96,23 +142,23 @@ @@ -96,23 +142,23 @@
96 </column-list-box> 142 </column-list-box>
97 </div> 143 </div>
98 </div> 144 </div>
99 - <!-- 有积分页脚显示 --> 145 + <!-- 有健康值页脚显示 -->
100 <div v-if="goodsInfo && goodsInfo.stock != 0"> 146 <div v-if="goodsInfo && goodsInfo.stock != 0">
101 - <!-- 积分充足 --> 147 + <!-- 健康值充足 -->
102 <div v-if="goodsInfo.grade>goodsInfo.num || goodsInfo.grade == goodsInfo.num" class="footer"> 148 <div v-if="goodsInfo.grade>goodsInfo.num || goodsInfo.grade == goodsInfo.num" class="footer">
103 <div class="btn" @click="exchange"> 149 <div class="btn" @click="exchange">
104 立即兑换 150 立即兑换
105 </div> 151 </div>
106 </div> 152 </div>
107 - <!-- 积分不足页脚显示 --> 153 + <!-- 健康值不足页脚显示 -->
108 <div v-if="goodsInfo.grade<goodsInfo.num" class="footer"> 154 <div v-if="goodsInfo.grade<goodsInfo.num" class="footer">
109 - <div class="desc">还差{{goodsInfo.num-goodsInfo.grade}}积分</div> 155 + <div class="desc">还差{{goodsInfo.num-goodsInfo.grade}}健康值</div>
110 <div class="btn" @click="jumpClientIntegralList"> 156 <div class="btn" @click="jumpClientIntegralList">
111 - 获取积分 157 + 获取健康值
112 </div> 158 </div>
113 </div> 159 </div>
114 </div> 160 </div>
115 - <!-- 有积分商品售罄 --> 161 + <!-- 有健康值商品售罄 -->
116 <div v-else-if="goodsInfo && goodsInfo.stock == 0" class="footer"> 162 <div v-else-if="goodsInfo && goodsInfo.stock == 0" class="footer">
117 <div class="btn grey" @click="exchange"> 163 <div class="btn grey" @click="exchange">
118 补货中 164 补货中
@@ -247,10 +293,10 @@ export default { @@ -247,10 +293,10 @@ export default {
247 if (this.isCNLive.value) { 293 if (this.isCNLive.value) {
248 // 校验登录 294 // 校验登录
249 if (this.$parent.checkLogin()) { 295 if (this.$parent.checkLogin()) {
250 - // 提示用积分兑换兑换 296 + // 提示用健康值兑换兑换
251 let options = { 297 let options = {
252 title: "", 298 title: "",
253 - message: "确定使用" + this.goodsInfo.num + "积分兑换?", 299 + message: "确定使用" + this.goodsInfo.num + "健康值兑换?",
254 confirmButtonText: "确定", 300 confirmButtonText: "确定",
255 confirmButtonCallback: this.addIntegralOrderconfirm, 301 confirmButtonCallback: this.addIntegralOrderconfirm,
256 showCancelButton: true, 302 showCancelButton: true,
@@ -291,7 +337,7 @@ export default { @@ -291,7 +337,7 @@ export default {
291 } 337 }
292 }, 338 },
293 /** 339 /**
294 - * 积分兑换接口 340 + * 健康值兑换接口
295 */ 341 */
296 addIntegralOrder () { 342 addIntegralOrder () {
297 // 加载中提示 343 // 加载中提示
@@ -307,7 +353,7 @@ export default { @@ -307,7 +353,7 @@ export default {
307 }, 353 },
308 354
309 /** 355 /**
310 - * 积分兑换接口回调 356 + * 健康值兑换接口回调
311 * @param {Object} res [服务器返回数据] 357 * @param {Object} res [服务器返回数据]
312 * @param {Object} ext [扩展参数] 358 * @param {Object} ext [扩展参数]
313 */ 359 */
@@ -347,12 +393,12 @@ export default { @@ -347,12 +393,12 @@ export default {
347 // 显示通用浮层 393 // 显示通用浮层
348 this.$parent.$refs.showModal.showLayer(); 394 this.$parent.$refs.showModal.showLayer();
349 } else if (res.code == 401) { 395 } else if (res.code == 401) {
350 - // 获取积分商品详情页失败 396 + // 获取健康值商品详情页失败
351 // 397 //
352 // 显示查看地址弹框 398 // 显示查看地址弹框
353 let options = { 399 let options = {
354 title: "", 400 title: "",
355 - message: "你的积分不足" + "<br>" + "赚取更多积分，请至任务列表", 401 + message: "你的健康值不足" + "<br>" + "赚取更多健康值，请至任务列表",
356 messageAlign: "center", 402 messageAlign: "center",
357 confirmButtonText: "确定", 403 confirmButtonText: "确定",
358 confirmButtonCallback: this.jumpClientIntegralList, 404 confirmButtonCallback: this.jumpClientIntegralList,
@@ -373,7 +419,7 @@ export default { @@ -373,7 +419,7 @@ export default {
373 this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id) 419 this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id)
374 }, 420 },
375 /** 421 /**
376 - * 跳转赚取积分页面 422 + * 跳转赚取健康值页面
377 * @param {Object} item [数据对象] 423 * @param {Object} item [数据对象]
378 */ 424 */
379 jumpClientIntegralList () { 425 jumpClientIntegralList () {
@@ -402,7 +448,7 @@ export default { @@ -402,7 +448,7 @@ export default {
402 } 448 }
403 }, 449 },
404 /** 450 /**
405 - * 积分商品详情页页面接口 451 + * 健康值商品详情页页面接口
406 */ 452 */
407 getGoodsInfo (goodsId) { 453 getGoodsInfo (goodsId) {
408 // 加载中提示 454 // 加载中提示
@@ -417,7 +463,7 @@ export default { @@ -417,7 +463,7 @@ export default {
417 }, 463 },
418 464
419 /** 465 /**
420 - * 积分商品详情页页面接口回调 466 + * 健康值商品详情页页面接口回调
421 * @param {Object} res [服务器返回数据] 467 * @param {Object} res [服务器返回数据]
422 * @param {Object} ext [扩展参数] 468 * @param {Object} ext [扩展参数]
423 */ 469 */
@@ -436,12 +482,12 @@ export default { @@ -436,12 +482,12 @@ export default {
436 /* 相似商品 */ 482 /* 相似商品 */
437 } else if (res.code == 400) { 483 } else if (res.code == 400) {
438 484
439 - // 获取积分商品详情页失败 485 + // 获取健康值商品详情页失败
440 Toast(res.message); 486 Toast(res.message);
441 } else { 487 } else {
442 488
443 - // 获取积分商品详情页失败  
444 - Toast("获取积分商品详情页失败"); 489 + // 获取健康值商品详情页失败
  490 + Toast("获取健康值商品详情页失败");
445 } 491 }
446 }, 492 },
447 /** 493 /**
@@ -463,7 +509,7 @@ export default { @@ -463,7 +509,7 @@ export default {
463 //请求数据 509 //请求数据
464 created () { 510 created () {
465 // 设置标题 511 // 设置标题
466 - this.$set(this, "title", "积分商品详情页"); 512 + this.$set(this, "title", "健康值商品详情页");
467 // 获取商品ID 513 // 获取商品ID
468 let goodsId = this.$route.query.goodsId; 514 let goodsId = this.$route.query.goodsId;
469 if (goodsId) { 515 if (goodsId) {
@@ -500,7 +546,7 @@ export default { @@ -500,7 +546,7 @@ export default {
500 }); 546 });
501 547
502 // 设置标题 548 // 设置标题
503 - this.$set(this.backs, 'title', '积分商品详情页'); 549 + this.$set(this.backs, 'title', '健康值商品详情页');
504 } 550 }
505 551
506 }, 552 },
@@ -511,7 +557,7 @@ export default { @@ -511,7 +557,7 @@ export default {
511 }; 557 };
512 // 如果是App外，设置唤起App和微信内分享参数 558 // 如果是App外，设置唤起App和微信内分享参数
513 // if (!this.isCNLive.value) { 559 // if (!this.isCNLive.value) {
514 - // // 设置积分首页唤起app参数 560 + // // 设置健康值首页唤起app参数
515 // if (typeof this.$parent.getOpenApp === "function") { 561 // if (typeof this.$parent.getOpenApp === "function") {
516 // this.$parent.getOpenApp({ 562 // this.$parent.getOpenApp({
517 // type: 46, 563 // type: 46,