w-front-end / select_good · Commits

Commit 4d10466d307030af81410a85e90b70ffeb124aaa

Authored by zhiyangdu
1 parent fe444f8b

积分商城详情页改版

Inline Side-by-side
Showing 6 changed files with 307 additions and 46 deletions
src/main.js
  View file @4d10466
@@ -17,7 +17,8 @@ import { @@ -17,7 +17,8 @@ import {
17 ImagePreview, 17 ImagePreview,
18 Tab, 18 Tab,
19 Tabs, 19 Tabs,
20 - CountDown 20 + CountDown,
  21 + Stepper
21 } from "vant"; 22 } from "vant";
22 import App from "./App"; 23 import App from "./App";
23 import IdCard from "./common/IdCard"; 24 import IdCard from "./common/IdCard";
@@ -37,6 +38,7 @@ Vue.use(VueClipboard); @@ -37,6 +38,7 @@ Vue.use(VueClipboard);
37 Vue.use(Tab); 38 Vue.use(Tab);
38 Vue.use(Tabs); 39 Vue.use(Tabs);
39 Vue.use(CountDown); 40 Vue.use(CountDown);
  41 +Vue.use(Stepper);
40 Vue.use(Lazyload, { 42 Vue.use(Lazyload, {
41 preload: 90, 43 preload: 90,
42 loading: "static/img/x.jpg", 44 loading: "static/img/x.jpg",
@@ -377,7 +379,6 @@ Vue.prototype.http = function(path, data, callback, ext) { @@ -377,7 +379,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
377 } 379 }
378 }, 380 },
379 err => { 381 err => {
380 -  
381 /* 加载错误处理 开始 */ 382 /* 加载错误处理 开始 */
382 383
383 Indicator.close(); 384 Indicator.close();
@@ -390,7 +391,6 @@ Vue.prototype.http = function(path, data, callback, ext) { @@ -390,7 +391,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
390 } 391 }
391 392
392 /* 加载错误处理 结束 */ 393 /* 加载错误处理 结束 */
393 -  
394 } 394 }
395 ); 395 );
396 } 396 }
@@ -434,7 +434,6 @@ Vue.prototype.http = function(path, data, callback, ext) { @@ -434,7 +434,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
434 } 434 }
435 }, 435 },
436 err => { 436 err => {
437 -  
438 /* 加载错误处理 开始 */ 437 /* 加载错误处理 开始 */
439 438
440 Indicator.close(); 439 Indicator.close();
@@ -447,7 +446,6 @@ Vue.prototype.http = function(path, data, callback, ext) { @@ -447,7 +446,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
447 } 446 }
448 447
449 /* 加载错误处理 结束 */ 448 /* 加载错误处理 结束 */
450 -  
451 } 449 }
452 ); 450 );
453 } 451 }
src/pages/goodDetails/goodDetails.less
  View file @4d10466
@@ -29,6 +29,7 @@ @@ -29,6 +29,7 @@
29 } 29 }
30 .main-box{ 30 .main-box{
31 .title{ 31 .title{
  32 + width: 414px;
32 font-size: 34px; 33 font-size: 34px;
33 font-weight: 500; 34 font-weight: 500;
34 color: #333333; 35 color: #333333;
@@ -48,6 +49,18 @@ @@ -48,6 +49,18 @@
48 display: flex; 49 display: flex;
49 align-items: center; 50 align-items: center;
50 justify-content: center; 51 justify-content: center;
  52 + // 积分 + 现金标示
  53 + .goods_tip{
  54 + padding: 3px 8px;
  55 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  56 + border-radius: 7px;
  57 + height: 30px;
  58 + font-size: 22px;
  59 + font-weight: 400;
  60 + color: #945A08;
  61 + line-height: 30px;
  62 + margin-right: 10px;
  63 + }
51 .price{ 64 .price{
52 height: 40px; 65 height: 40px;
53 font-size: 28px; 66 font-size: 28px;
@@ -142,8 +155,17 @@ @@ -142,8 +155,17 @@
142 display:flex; 155 display:flex;
143 justify-content: center; 156 justify-content: center;
144 align-items: center; 157 align-items: center;
  158 + .desc{
  159 + height: 130px;
  160 + font-size: 30px;
  161 + font-weight: 400;
  162 + color: #333333;
  163 + line-height: 130px;
  164 + margin: 0 30px;
  165 + }
145 .btn{ 166 .btn{
146 - width: 690px; 167 + flex: 1;
  168 + margin: 20px 30px;
147 height: 90px; 169 height: 90px;
148 line-height: 90px; 170 line-height: 90px;
149 background: #F5A623; 171 background: #F5A623;
@@ -155,4 +177,136 @@ @@ -155,4 +177,136 @@
155 color: #FFFFFF; 177 color: #FFFFFF;
156 } 178 }
157 } 179 }
  180 + /*底部弹窗**/
  181 + .popup_box{
  182 + overflow-y: initial;
  183 + .popup_main{
  184 + height: 834px;
  185 + background: #FFFFFF;
  186 + padding: 30px 50px 37px 50px;
  187 + .goods_box{
  188 + // display: flex;
  189 + // justify-content: flex-end;
  190 + position: relative;
  191 + padding-bottom: 37px;
  192 + border-bottom: solid 1px #E4E4E4;
  193 + .item_pic_box{
  194 + position: absolute;
  195 + top: -70px;
  196 + left: 0;
  197 + width: 220px;
  198 + height: 220px;
  199 + background: #FFFFFF;
  200 + border-radius: 10px;
  201 + .item_pic{
  202 + display: block;
  203 + width: 190px;
  204 + height: 190px;
  205 + margin: 15px auto;
  206 + }
  207 + }
  208 + .right{
  209 + margin-left:260px;
  210 + .title{
  211 + height: 46px;
  212 + display: flex;
  213 + justify-content: space-between;
  214 + .title_t{
  215 + width: 354px;
  216 + font-size: 30px;
  217 + font-weight: 500;
  218 + color: #333333;
  219 + line-height: 42px;
  220 + display: -webkit-box;
  221 + -webkit-line-clamp: 1;
  222 + /*! autoprefixer: off */
  223 + -webkit-box-orient: vertical;
  224 + /*! autoprefixer: on */
  225 + text-overflow: ellipsis;
  226 + overflow: hidden;
  227 + }
  228 + .close{
  229 + display: block;
  230 + width:46px;
  231 + height:46px;
  232 + }
  233 + }
  234 + .pirce{
  235 + width: 304px;
  236 + height: 50px;
  237 + font-size: 36px;
  238 + font-weight: 500;
  239 + color: #FC1541;
  240 + line-height: 50px;
  241 + text-align: left;
  242 + margin-top:42px;
  243 + }
  244 + }
  245 + }
  246 + .num_box{
  247 + display: flex;
  248 + justify-content: space-between;
  249 + align-items: center;
  250 + padding:70px 0;
  251 + border-bottom: solid 1px #E4E4E4;
  252 + .num_tip{
  253 + width: 128px;
  254 + height: 40px;
  255 + font-size: 28px;
  256 + font-weight: 500;
  257 + color: #707070;
  258 + line-height: 40px;
  259 + }
  260 + .right{
  261 + display: flex;
  262 + .num{
  263 + width: 30px;
  264 + height: 48px;
  265 + font-size: 34px;
  266 + font-weight: 400;
  267 + color: #565656;
  268 + line-height: 48px;
  269 + text-align: center;
  270 + margin: 0 16px;
  271 + }
  272 + img{
  273 + display: block;
  274 + width: 54px;
  275 + height: 54px;
  276 + }
  277 + }
  278 + }
  279 + .line_box{
  280 + display: flex;
  281 + justify-content: space-between;
  282 + align-items: center;
  283 + padding:30px 0;
  284 + border-bottom: solid 1px #E4E4E4;
  285 + height: 40px;
  286 + font-size: 28px;
  287 + line-height: 40px;
  288 + .left{
  289 + font-weight: 500;
  290 + color: #707070;
  291 + }
  292 + .right{
  293 + font-weight: 400;
  294 + color: #FC1541;
  295 + }
  296 + }
  297 + .btn{
  298 + width: 546px;
  299 + height: 86px;
  300 + line-height:86px;
  301 + background: #F5A623;
  302 + border-radius: 100px;
  303 + text-align: center;
  304 + font-size: 34px;
  305 + font-weight: 500;
  306 + color: #fff;
  307 + margin: 275px auto 0 auto;
  308 + letter-spacing: 20px;
  309 + }
  310 + }
  311 + }
158 } 312 }
159 \ No newline at end of file 313 \ No newline at end of file
src/pages/goodDetails/goodDetails.vue
  View file @4d10466
@@ -41,12 +41,17 @@ @@ -41,12 +41,17 @@
41 <!-- 标题 --> 41 <!-- 标题 -->
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>  
48 - <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span>  
49 - <span class="integral-in">积分</span> 47 + <div class="goods_tip">
  48 + 积分+现金
  49 + </div>
  50 + <div>
  51 + <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span>
  52 + <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span>
  53 + <span class="integral-in">积分</span>
  54 + </div>
50 </div> 55 </div>
51 <!-- 商品信息 --> 56 <!-- 商品信息 -->
52 <div class="goods-info"> 57 <div class="goods-info">
@@ -92,18 +97,65 @@ @@ -92,18 +97,65 @@
92 <!-- 商品样式 7 列表 --> 97 <!-- 商品样式 7 列表 -->
93 <column-list-box class="column-list-box" v-if="goodsInfo && goodsInfo.list && goodsInfo.list.length" @jump="toDetail" 98 <column-list-box class="column-list-box" v-if="goodsInfo && goodsInfo.list && goodsInfo.list.length" @jump="toDetail"
94 :lists="goodsInfo" 99 :lists="goodsInfo"
95 - com="7"> 100 + com="7"
  101 + goodType="1">
96 </column-list-box> 102 </column-list-box>
97 </div> 103 </div>
98 </div> 104 </div>
99 - <!-- 页脚 --> 105 + <!-- 有积分页脚显示 -->
100 <div class="footer"> 106 <div class="footer">
101 <div class="btn" @click="exchange"> 107 <div class="btn" @click="exchange">
102 立即兑换 108 立即兑换
103 </div> 109 </div>
104 </div> 110 </div>
  111 + <!-- 积分不足页脚显示 -->
  112 + <!-- <div class="footer">
  113 + <div class="desc">还差1000积分</div>
  114 + <div class="btn" @click="jumpClientIntegralList">
  115 + 获取积分
  116 + </div>
  117 + </div> -->
105 <!-- 地址信息组件 --> 118 <!-- 地址信息组件 -->
106 - <app-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></app-address-toast> 119 + <!-- <app-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></app-address-toast> -->
  120 + <!-- 底部弹出层 -->
  121 + <van-popup class="popup_box" v-model="show" position="bottom">
  122 + <div class="popup_main">
  123 + <!-- 商品信息 -->
  124 + <div class="goods_box">
  125 + <div class="item_pic_box">
  126 + <img class="item_pic" src="static/img/1.png" alt="" />
  127 + </div>
  128 + <div class="right">
  129 + <!-- 标题 -->
  130 + <div class="title">
  131 + <div class="title_t">山东沂蒙 优质大蒜山东</div>
  132 + <img @click="show=false" class="close" src="static/img/close_grey.png" alt="" />
  133 + </div>
  134 + <!-- 价格 -->
  135 + <div class="pirce">
  136 + 500积分+9.9元
  137 + </div>
  138 + </div>
  139 + </div>
  140 + <!--购买数量-->
  141 + <div class="num_box">
  142 + <div class="num_tip">购买数量</div>
  143 + <div class="right">
  144 + <van-stepper theme="round" input-width="40px" input-size="32px" button-size="32px" v-model="stepperValue" min="1" max="8" integer />
  145 + <!-- <img src="static/img/reduce.png" alt="" />
  146 + <div class="num">1</div>
  147 + <img src="static/img/plus.png" alt="" /> -->
  148 + </div>
  149 + </div>
  150 + <!-- 支付方式 -->
  151 + <div class="line_box">
  152 + <div class="left">支付方式</div>
  153 + <div class="right">积分加现金</div>
  154 + </div>
  155 + <!-- 按钮 -->
  156 + <div @click="jumpOrderDes" class="btn">确定</div>
  157 + </div>
  158 + </van-popup>
107 </div> 159 </div>
108 </template> 160 </template>
109 161
@@ -122,8 +174,10 @@ export default { @@ -122,8 +174,10 @@ export default {
122 banner: null, 174 banner: null,
123 goodsInfo: null, 175 goodsInfo: null,
124 backs: null, // 后退按钮组 176 backs: null, // 后退按钮组
125 - pointsToast_control: false,  
126 - isExchange: false // 是否已经兑换 177 + // pointsToast_control: false,
  178 + isExchange: false, // 是否已经兑换
  179 + show: false, // 是否显示底部支付模块
  180 + stepperValue: 2 // 进步器
127 } 181 }
128 }, 182 },
129 //部件 183 //部件
@@ -145,6 +199,24 @@ export default { @@ -145,6 +199,24 @@ export default {
145 }, 199 },
146 //方法表示一个具体的操作，主要书写业务逻辑； 200 //方法表示一个具体的操作，主要书写业务逻辑；
147 methods: { 201 methods: {
  202 + // 显示底部模块
  203 + opintsPopup () {
  204 + this.show = true;
  205 + },
  206 + // 跳转到订单详情
  207 + jumpOrderDes (item) {
  208 + // 判断APP内
  209 + if (this.isCNLive.value) {
  210 + // （判断app内是否有该方法）
  211 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpOrderDes) {
  212 + // 跳转到原生的任务列表
  213 + window.webkit.messageHandlers.jumpOrderDes.postMessage({ body: { orderId: item.id, type: 1 } })
  214 + } else if (window.obj && window.obj.jumpOrderDes) {
  215 + // 跳转到原生的任务列表
  216 + window.obj.jumpOrderDes(JSON.stringify({ orderId: item.id, type: 1 }));
  217 + }
  218 + }
  219 + },
148 // 跳转网家家购买音频协议 220 // 跳转网家家购买音频协议
149 toLink () { 221 toLink () {
150 if (this.isCNLive.value) { 222 if (this.isCNLive.value) {
@@ -163,16 +235,28 @@ export default { @@ -163,16 +235,28 @@ export default {
163 this.$parent.callApp(); 235 this.$parent.callApp();
164 } 236 }
165 }, 237 },
166 - toLinkPointsMall () {  
167 - // 调用back返回上一页  
168 - // this.back();  
169 - // this.$router.push({  
170 - // path: '/pointsMall',  
171 - // query: {  
172 - // uid: this.getStore("uid")  
173 - // }  
174 - // })  
175 - }, 238 + // toLinkPointsMall () {
  239 + // // 显示查看地址弹框
  240 + // let options = {
  241 + // message: "兑换成功",
  242 + // messageAlign: "center",
  243 + // confirmButtonText: "我知道了",
  244 + // confirmButtonCallback: ""
  245 + // // confirmButtonCallback: this.addAddressCallback,
  246 + // // params: { shopType: datas.shop_type, id: datas.id }
  247 + // };
  248 + // this.$set(this.$parent, "showOptions", options);
  249 + // // 显示通用浮层
  250 + // this.$parent.$refs.showModal.showLayer();
  251 + // // 调用back返回上一页
  252 + // // this.back();
  253 + // // this.$router.push({
  254 + // // path: '/pointsMall',
  255 + // // query: {
  256 + // // uid: this.getStore("uid")
  257 + // // }
  258 + // // })
  259 + // },
176 /** 260 /**
177 * 后退 261 * 后退
178 */ 262 */
@@ -217,8 +301,8 @@ export default { @@ -217,8 +301,8 @@ export default {
217 // 兑换 301 // 兑换
218 exchange () { 302 exchange () {
219 if (this.isCNLive.value) { 303 if (this.isCNLive.value) {
220 - // 校验登录  
221 - if (this.$parent.checkLogin()){ 304 + // 校验登录
  305 + if (this.$parent.checkLogin()) {
222 // 提示用积分兑换兑换 306 // 提示用积分兑换兑换
223 let options = { 307 let options = {
224 title: "", 308 title: "",
@@ -239,10 +323,19 @@ export default { @@ -239,10 +323,19 @@ export default {
239 }, 323 },
240 // 确定兑换回调 324 // 确定兑换回调
241 addIntegralOrderconfirm () { 325 addIntegralOrderconfirm () {
242 - // isExchange为false才可兑换防止连续点击  
243 - if (!this.isExchange) {  
244 - // 兑换  
245 - this.addIntegralOrder(); 326 + /**
  327 + * 判断shop_type是否等于1等于1为实物弹出底部商品数量选择,其他商品直接走兑换接口
  328 + */
  329 + if (this.goodsInfo.shop_type == 1) {
  330 + // 实物弹出底部数量填写弹窗
  331 + this.opintsPopup();
  332 + // this.addAddressCallback()
  333 + } else {
  334 + // isExchange为false才可兑换防止连续点击
  335 + if (!this.isExchange) {
  336 + // 兑换
  337 + this.addIntegralOrder();
  338 + }
246 } 339 }
247 }, 340 },
248 /** 341 /**
@@ -255,7 +348,7 @@ export default { @@ -255,7 +348,7 @@ export default {
255 } 348 }
256 }, 349 },
257 /** 350 /**
258 - * 积分商品详情页页面接口 351 + * 积分兑换接口
259 */ 352 */
260 addIntegralOrder () { 353 addIntegralOrder () {
261 // 加载中提示 354 // 加载中提示
@@ -271,7 +364,7 @@ export default { @@ -271,7 +364,7 @@ export default {
271 }, 364 },
272 365
273 /** 366 /**
274 - * 积分商品详情页页面接口回调 367 + * 积分兑换接口回调
275 * @param {Object} res [服务器返回数据] 368 * @param {Object} res [服务器返回数据]
276 * @param {Object} ext [扩展参数] 369 * @param {Object} ext [扩展参数]
277 */ 370 */
@@ -293,9 +386,7 @@ export default { @@ -293,9 +386,7 @@ export default {
293 }, 1500); 386 }, 1500);
294 // 提示语判断 387 // 提示语判断
295 let tipMessage; 388 let tipMessage;
296 - if (datas.shop_type == 1) {  
297 - tipMessage = "兑换成功"  
298 - } else if (datas.shop_type == 2) { 389 + if (datas.shop_type == 2) {
299 tipMessage = "红包已存入您的账户，可前往“我的”—“我的卡券查看”" 390 tipMessage = "红包已存入您的账户，可前往“我的”—“我的卡券查看”"
300 } else if (datas.shop_type == 3) { 391 } else if (datas.shop_type == 3) {
301 tipMessage = "付费音频已存入您的账户，可前往“我的”—“我的付费内容”—“已购内容收听”" 392 tipMessage = "付费音频已存入您的账户，可前往“我的”—“我的付费内容”—“已购内容收听”"
@@ -305,8 +396,9 @@ export default { @@ -305,8 +396,9 @@ export default {
305 message: tipMessage, 396 message: tipMessage,
306 messageAlign: "center", 397 messageAlign: "center",
307 confirmButtonText: "我知道了", 398 confirmButtonText: "我知道了",
308 - confirmButtonCallback: this.addAddressCallback,  
309 - params: { shopType: datas.shop_type, id: datas.id } 399 + confirmButtonCallback: ""
  400 + // confirmButtonCallback: this.addAddressCallback,
  401 + // params: { shopType: datas.shop_type, id: datas.id }
310 }; 402 };
311 this.$set(this.$parent, "showOptions", options); 403 this.$set(this.$parent, "showOptions", options);
312 // 显示通用浮层 404 // 显示通用浮层
@@ -332,14 +424,11 @@ export default { @@ -332,14 +424,11 @@ export default {
332 } 424 }
333 }, 425 },
334 // 填写地址 426 // 填写地址
335 - addAddressCallback (params) {  
336 - // 如果是实物弹起填写地址弹窗  
337 - if (params.shopType == 1) {  
338 - this.pointsToast_control = true;  
339 - // 礼品兑换弹框派发  
340 - this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id)  
341 - }  
342 - }, 427 + // addAddressCallback () {
  428 + // this.pointsToast_control = true;
  429 + // // 礼品兑换弹框派发
  430 + // this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id)
  431 + // },
343 /** 432 /**
344 * 跳转赚取积分页面 433 * 跳转赚取积分页面
345 * @param {Object} item [数据对象] 434 * @param {Object} item [数据对象]
@@ -461,9 +550,14 @@ export default { @@ -461,9 +550,14 @@ export default {
461 }, 550 },
462 mounted () { 551 mounted () {
463 var that = this; 552 var that = this;
  553 + // 原生选中地址回调
464 window["appSelectAddressCallback"] = function (result) { 554 window["appSelectAddressCallback"] = function (result) {
465 that.appSelectAddressCallback(result); 555 that.appSelectAddressCallback(result);
466 }; 556 };
  557 + // 原生支付完成回调隐藏底部弹窗
  558 + // window["appPaymentCallback"] = function (result) {
  559 + // that.show = false;
  560 + // };
467 // 如果是App外，设置唤起App和微信内分享参数 561 // 如果是App外，设置唤起App和微信内分享参数
468 // if (!this.isCNLive.value) { 562 // if (!this.isCNLive.value) {
469 // // 设置积分首页唤起app参数 563 // // 设置积分首页唤起app参数
@@ -509,5 +603,20 @@ export default { @@ -509,5 +603,20 @@ export default {
509 display: block; 603 display: block;
510 width: 100%; 604 width: 100%;
511 } 605 }
  606 +/* 更改有赞的样式 */
  607 +.van-stepper__input {
  608 + font-size: 34px;
  609 + color: #565656;
  610 +}
  611 +.van-stepper__minus,
  612 +.van-stepper__plus {
  613 + color: #fc1541;
  614 + background-color: #fff;
  615 + border: 1px solid #fc1541;
  616 + /* width: 54px;
  617 + height: 54px;
  618 + background: url('../../../static/img/reduce.png') no-repeat center top;
  619 + background-size: 100%; */
  620 +}
512 </style> 621 </style>
513 622
static/img/close_grey.png 0 → 100755
View file @4d10466

1.4 KB
static/img/plus.png 0 → 100755
View file @4d10466

1.58 KB
static/img/reduce.png 0 → 100755
View file @4d10466

2.06 KB