From 850046f72347c3762fd564582724170b944c8173 Mon Sep 17 00:00:00 2001 From: cheng.xu Date: Sun, 29 Sep 2019 13:43:08 +0800 Subject: [PATCH] 订单优惠券及物流列表排版 --- pages/cart/cart2/cart2.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- pages/cart/cart2/cart2.wxml | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------- pages/cart/cart2/cart2.wxss | 356 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------- 3 files changed, 547 insertions(+), 73 deletions(-) diff --git a/pages/cart/cart2/cart2.js b/pages/cart/cart2/cart2.js index 8e75ff3..115d86e 100644 --- a/pages/cart/cart2/cart2.js +++ b/pages/cart/cart2/cart2.js @@ -4,7 +4,7 @@ var oo=t.globalData.setting; var regeneratorRuntime = require('../../../utils/runtime.js'); var util_pay = require("../../../utils/pay.js"); -Page({ +Page({ data: { url: t.globalData.setting.url, resourceUrl: t.globalData.setting.resourceUrl, @@ -75,7 +75,15 @@ Page({ selected_quan_pick:null, is_close_quan:0, disabled:0, + open_express:0,//控制选择物流名列表 的属性 + + is_express:0,//选中物流的属性 + + express_name:"商家自配", + expres_name:"",//点击选定 + isopen:0,//券的说明 + is_coupon:0,//选择券的控制属性 }, onLoad: function(t) { @@ -143,6 +151,7 @@ Page({ //-------------------获取物流--------------- get_wuliu(func) { + var th = this; to.getwuliu(function (e) { console.log("ws"); @@ -400,6 +409,7 @@ Page({ }).then(res=>{ if(res.data.code==0) quanlist=res.data.data.pageData; + }) } @@ -417,7 +427,7 @@ Page({ t.data.data.prom_id = 0; t.data.data.prom_type = 0; - + console.log("44444444444444券的列表", quanlist); th.setData({ bn_goods: t.data.data, bn_pickname: gg.pick_name, bn_exp_type: et, bn_pick: gg.pick_id, bn_t_exp_t: distr_t,selected_quan_list:quanlist @@ -463,6 +473,7 @@ Page({ } } } + console.log("3333333333券的列表", quanlist); th.setData({ bn_goods: t.data.data, bn_pickname: gg.pick_name, bn_exp_type: et, bn_pick: gg.pick_id, bn_t_exp_t: distr_t,selected_quan_list:quanlist @@ -1198,6 +1209,7 @@ Page({ var is_using= th.check_in_sele(quanlist[i].CashRepNo,pickid); if(is_using) quanlist[i].is_using=1; } + console.log("2222222券的列表", quanlist); th.setData({open_quan:1,selected_quan_pick:pickid,selected_quan_list:quanlist,disabled:1}); } }, @@ -1229,6 +1241,7 @@ Page({ for(var ind in quanlist){ quanlist[ind].show_red=0; } + this.setData({selected_quan_list:quanlist}); var using_quan=this.data.using_quan; var th=this; @@ -1335,7 +1348,50 @@ Page({ } return arr; - } + }, + // 开启物流的弹窗 + express_name:function(){ + this.setData({ open_express: 1}); + }, + // 关闭物流的弹窗 + close_express:function(){ + this.setData({ open_express:0 }); + }, + // 选择物流 + click_express_name:function(e){ + var express_name=e.currentTarget.dataset.name; + var index=e.currentTarget.dataset.idxe; + this.setData({ expres_name: express_name, is_express:index}); + }, + //点击确定物流 + determine_expres:function(){ + + var name=this.data.expres_name + this.setData({ express_name: name, open_express: 0}); + }, + //设置默认物流 + set_default:function(){ + + }, + //点击打开优惠券使用说明 + clik_coupons:function(e){ + + var ind = e.currentTarget.dataset.idx; + var is_open = this.data.selected_quan_list[ind].is_open; + console.log(is_open,"是什么东西"); + if (is_open == 1) is_open = 0; + else is_open = 1; + + var txt = "selected_quan_list[" + ind + "].is_open" + var obj = {}; obj[txt] = is_open; + this.setData(obj); + }, + //选择券 + sele_coupon:function(e){ + var ind = e.currentTarget.dataset.ind; + console.log("下标", ind); + this.setData({ is_coupon: ind}); + } }); diff --git a/pages/cart/cart2/cart2.wxml b/pages/cart/cart2/cart2.wxml index 334ba4e..840a580 100644 --- a/pages/cart/cart2/cart2.wxml +++ b/pages/cart/cart2/cart2.wxml @@ -1,6 +1,9 @@ + + +
- + - @@ -153,9 +157,10 @@ - - - {{item.Sum}}元 - 订单满{{item.BuySum?item.BuySum:0}}元使用 - 使用期限 - - {{filters.replace_time(item.BeginDate)}}至{{filters.replace_time(item.ValidDate)}} - - : 无限制 - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ￥ + {{item.Sum}} - + + + 无使用门槛 + + + {{UseObjectName}} + + + + + + + + + + + + + {{filter.get_type_card(item.UseObjectType)}} + + {{item.PrivilegeName}} + + + + {{filters.replace_time2(item.BeginDate)}}至{{filters.replace_time2(item.BillDate)}} + + + + + + Γ + + + + + + + + + + + 优惠券使用说明 + + く + + + + + + + + {{util.format(item.Remark)}} + + + + + + + + + + - 确定 + 确定 + + + + + + + + + + + + + + + + + 选择物流名字 + + + + × + + + + + + Γ + + + + + {{express_list.name}} + + + + + + + 确定 + + + 设为默认 + + + + + \ No newline at end of file diff --git a/pages/cart/cart2/cart2.wxss b/pages/cart/cart2/cart2.wxss index f1710ad..9fc9ff7 100644 --- a/pages/cart/cart2/cart2.wxss +++ b/pages/cart/cart2/cart2.wxss @@ -7,7 +7,7 @@ .user-contact { padding: 24rpx 80rpx; } - + .location { position: relative; padding: 0 80rpx 24rpx; @@ -276,7 +276,7 @@ .xc-coupon-frame{ width: 100%; height: 92rpx; - border-bottom:1px solid #ddd; + } .xc-coupon-frame .work-frame{ width: 94%; @@ -299,27 +299,32 @@ /* 自定义弹出窗口 */ .cx-popup{ width:100%; - height: 775rpx; + height:920rpx; background: #fff; z-index: 35; - border-top-left-radius: 10rpx; - border-top-right-radius: 10rpx; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; position:fixed; bottom:0; + padding-bottom: 25rpx; + } .cx-popup .top{ - width:100%; + width:95%; height:100rpx; border-bottom:3rpx solid #ddd; - + margin: auto; + margin-top: 30rpx; } .xc-top-content{ - width: 88%; + width: 93%; height:85rpx; - padding-top: 20rpx; - font-size: 36rpx; + padding-top: 30rpx; + font-size: 34rpx; + font-weight: 600; + } @@ -331,35 +336,31 @@ } .xc-frame{ width: 100%; - height: 465rpx; + height:68.9%; margin-top:20rpx; } .xc-frame .list-frame{ - width: 90%; + width: 95%; height: 100%; overflow-y:scroll; } .xc-close-frame{ - margin-top:10rpx; - width:1%; + margin-top:-10rpx; + } .xc-close{ - width: 46rpx; -height: 46rpx; + width: 37rpx; +height: 37rpx; border-radius: 50%; -border: 5rpx solid #a5a5a7; +border: 3rpx solid #333; text-align: center; -line-height: 46rpx; -font-size: 34rpx; -font-weight: bolder; -color: #a5a5a7; -margin-top: 5rpx; - - +line-height: 34rpx; +font-size: 29rpx; +color: #333; } .xc-money{ @@ -422,16 +423,14 @@ margin-top: 5rpx; } .xc-confirm { - width: 90%; - height: 75rpx; + width: 48%; + border-radius: 50rpx; + height: 50rpx; margin:0 auto; - background:#c41830; + background:#d60021; color:#fff; - border-radius:10rpx; - font-size:30rpx; - margin-top: 50rpx; - - + font-size:28rpx; + margin-top: 28rpx; } .up{ animation: up .7s; } @@ -446,3 +445,296 @@ height: 40rpx; } +.xc-close-express{ + width: 40rpx; +height: 40rpx; +border-radius: 50%; +border: 3rpx solid #333; +text-align: center; +font-size:32rpx; +line-height: 38rpx; +color: #333; +margin-top: 5rpx; +} +.cx-popup .tops{ + width: 100%; +height: 145rpx; +border-bottom: 3rpx solid #eee; + +} +.top-content { + width: 82%; +padding-top: 33px; +height: 100%; +padding-left: 40rpx; +} +.close-frame{ + margin-top: 30rpx; + +} +.cx-popup.radius{ + +height: 650rpx; + +} +.xc-hook { +width: 33rpx; +height: 33rpx; +transform: rotate(-135deg); +line-height: 35rpx; +text-align: center; +margin-right: 20rpx + + +} +.xc-hooks { +width: 30rpx; +height: 30rpx; +border: 1rpx solid #999; +margin-right: 20rpx; +} +.express_list_frame{ + display: flex; +height: 80rpx; +align-items: center; +padding-left: 40rpx; +border-bottom: 1rpx solid #eee; + +} +.express_list{ + width: 100%; + height: 65%; + overflow-y: scroll; + overflow: hidden; +} +.xc-confirms { + width: 40%; + border-radius: 50rpx; + height: 55rpx; + margin:0 auto; + font-size:28rpx; + background: #fff; + color: #333; + border: 2rpx solid #333; + +} + + +/* 优惠券的改版样式 */ +.xc-coupon-frame{ + width: 710rpx; + height:auto; + margin: 0 auto; + +} +.xc-coupon-frame .coupon-frame{ + width: 99%; + height: 200rpx; + margin-top:10rpx; + border-bottom: 1rpx solid #eee; + +} +.xc-coupon-frame .coupon-frame .coupon-left{ + width: 215rpx; + height:100%; + overflow: hidden; +} +.xc-money-frames{ + width:96%; + margin-top: -10px; +} + +.xc-rmb-symbol{ + font-size:48rpx; + font-weight: bold +} + +.xc-rmb-val{ + font-size:78rpx; + font-weight: bolder +} +.coupon-explain{ + font-size:25rpx; +width:100%; + + +} +.xc-valuer{ + margin-top:39rpx; + margin-left:28rpx; + font-size:25rpx; +} +.coupon-frame .oval{ + width:155rpx; + height:83rpx; + border-radius: 50%; + right:-78rpx; + top:-37rpx; +} +.coupon-right{ + width:490rpx; + height: 99%; + border-top: 1rpx solid #eaeaea; + /* //border-bottom: 1rpx solid #eaeaea; */ + border-right: 1rpx solid #eaeaea; + +} +.coupon-annotation{ + width: 95%; + height: 100%; + +} +.xc-brand{ + width:100rpx; + height:35rpx; + line-height: 35rpx; + font-size:21rpx; + border-radius:10rpx; position: relative; top:-1px; +} +.top-frame{ + width:82%; + height: 75rpx; + margin-top:10rpx; + +} +.top-frame .coupon-wode{ + font-size: 25rpx; + margin-left:10rpx; + width:340rpx; + height:88rpx; +} +.coupon-code{ + width:60rpx; + height:60rpx; + margin-top:5rpx; + +} +.frame{ + width: 100% +} +.coupon-time{ + font-size: 23rpx; + line-height:33rpx; + color: #333; +} + +.clik-get{ + width:125rpx; + height:45rpx; + border-radius: 25rpx; + line-height: 45rpx; + font-size:25rpx; + bottom:67rpx; + right:6px; +} + +.code-img{ + margin-left:20rpx; +} +.bottmo-explain{ +top:145rpx; +width:94%; +border-top:1rpx dashed #eee; +padding-top:8rpx; +height:38rpx; +line-height: 51rpx; + +} +.font-word{ + font-size: 22rpx; +} +.circle-size{ + background: #a0a0a0; + width: 27rpx; + height: 27rpx; + margin-top:13rpx; +margin-left:8rpx; +display: flex; + +align-items: center; +} +.xc-jiantou{ + /* width: 9rpx; + height: 9rpx; */ + /* border-top: 2rpx solid #fff; + border-right: 2rpx solid #fff; */ + transform: rotate(-90deg); + color: #fff; + font-size: 15rpx; + /* display:inline-block; + margin-top: 6.5rpx; */ + text-align: center; +width: 24rpx; +} +.xc-buttom{ + width:99%; +min-height:76rpx; +height:auto; +line-height:40rpx; +border-left:1rpx solid #eee; +border-right:1rpx solid #eee; +border-bottom:1rpx solid #eee; +} +.explain-coupon{ + + font-size:25rpx; + +} +.circle-frame{ + width: 20rpx; + height: auto; + z-index:1; + left:210rpx; + +} +.circle-sawtooth{ + width: 11rpx; + height: 11rpx; + background: #fff; +} + +.red{background-color: #fe7496;} +.green{ background-color: #22c7c1;} +.blue{background-color:#5e82e3;} +.g_gray{background-color: #aaaaaa} + +.f_text{text-align: center; height:96rpx; } +.xc-hook.sn { + margin-top:12%; +width:45rpx; +height:45rpx; +font-size:28rpx; +line-height:44rpx; + + +} +.xc-hooks.on{ + margin-top:12%; +width:42rpx; +height:42rpx; +} +.may_use_coupon{ + width: 95%; + height: 40rpx; + line-height:68rpx; + margin: auto; +} +.determine-frame{ + width: 100%; + height: 130rpx; + +} +.xc-determine{ + height: 55rpx; + width: 40%; + border-radius: 50rpx; +background: #d60021; +color: #fff; +font-size: 28rpx; +margin: 0 auto; + +} +.click-buttem{ +width: 90%; +margin: auto; +} \ No newline at end of file -- libgit2 0.21.4