<view class="addr tab"> <view class="tit">收货人信息</view> <view class="con arrow" bindtap="myaddrChange"> <view class="addr_sel_m">{{oinfo.Consignee}} {{oinfo.Cellphone}}</view> <view class="addr_sel_a"> {{addr?addr:'选择收货人信息'}}</view> </view> </view> <view class="date tab"> <view class="tit">配送日期/时间</view> <view class="dt"> <picker mode="date" value="{{deliveryDate}}" class="dt-item pos" start="{{dateStart}}" end="{{dateEnd}}" bindchange="bindDateChange"> {{oinfo.DeliveryDate?oinfo.DeliveryDate:'选择配送日期'}} </picker> <picker mode="selector" value="{{arrTimeIndex}}" range="{{arrTime}}" class="dt-item pos" bindchange="bindTimeChange"> {{arrTime[arrTimeIndex]}} </picker> </view> </view> <view class="date tab"> <view class="tit">商品详情</view> <view class="pro" wx:for="{{plist}}" wx:for-item="p" wx:key="name"> <image src="{{p.img}}" class="pimg"></image> <text class="pname">{{p.name}}</text> <text class="pprice">{{p.price}} x {{p.num}}</text> <text class="ptprice">{{p.price*p.num}}</text> </view> </view> <view class="date tab"> <view class="tit">配件</view> </view> <view class="date tab"> <view class="tit">优惠方式</view> <view class="yh"> <view class="item arrow"> <view class="lable">代金卡</view> <view class="content"></view> </view> <view class="item arrow"> <view class="lable">优惠券</view> <view class="content"></view> </view> </view> </view> <view class="date tab" style="height:100px;"> <view class="tit">备注</view> <textarea bindblur="bindTextAreaBlur" auto-height placeholder="" value="{{oinfo.Remarks}}" /> </view> <view class="tool"> <view class="sub" bindtap="submit">提交订单</view> </view> <!--我的地址--> <view class="addr_box" wx:if="{{addrShow}}"> <view class="addr_head"> <view class="addr_head_cancel" bindtap="myaddrCancel">取消</view> <view class="addr_head_title">我的地址</view> </view> <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" style="height: 250px;"> <view class="addr_body" data-aid="{{a.id}}" wx:for="{{addresslist}}" wx:key="id" wx:for-index="i" wx:for-item="a"> <view class="addr_body_edit"> <navigator url="{{'../user/editaddress/editaddress?mod=edit&id='+a.id}}" open-type="navigate" hover-class="navigator-hover">修改</navigator></view> <view class="addr_body_my"> <view> {{a.name}} {{a.phone}}</view> <view class="addr_body_my_det">{{a.city}} {{a.area}} {{a.address}}</view> </view> <view class="addr_body_sel" data-aid="{{a.id}}" bindtap="toSelect"> <icon type="success" size="25" data-aid="{{a.id}}" color="{{a.id==selectedID?'green':'#EEE'}}" /> </view> </view> </scroll-view> <view class="addr_box_add"><navigator url="../user/editaddress/editaddress?mod=add" open-type="navigate" hover-class="navigator-hover"><label class="addr_lbl_add">+</label>新增收货地址</navigator></view> </view> <!--遮罩层--> <view class="hiddenbox" wx:if="{{addrShow}}" bindtap="closeaddr"></view> |
.body{z-index: 0;} page{background-color: #f0f0f0;} .tab{border-bottom: 1rpx solid #ddd;background-color: #fff;margin-bottom: 20rpx;} .tab .tit{border-bottom: 1rpx solid #eee;padding: 10rpx 25rpx;font-size:11pt; color: #999;} .tab .con{padding:20rpx 25rpx;font-size: 13pt;} .dt{display:flex;} .dt-item{flex: 1;padding:20rpx 60rpx;} .pos{position: relative;} .pos:after{content: " "; display:block;position: absolute; width: 0;height: 0;border-top:15rpx solid #576b95;border-left:10rpx solid transparent;border-right:10rpx solid transparent; left: 25rpx;top: 35rpx;} .arrow{position: relative;} .arrow:after{content: ""; display:block;position: absolute;width: 20rpx;height: 20rpx;border-top:5rpx solid #ddd;border-right:5rpx solid #ddd;transform:rotateZ(45deg); top: 27rpx; right:30rpx;} .item{display:flex;padding:20rpx 20rpx;} .item .label{width: 200rpx;font-size: 12pt;} .item .content{flex: 1;} .pro{display:flex;justify-content: center;align-items: center; height: 160rpx; padding: 0 25rpx; border-bottom: 1rpx dotted #eee} .pro .pimg{width: 150rpx;height: 120rpx;} .pro .pname{flex: 1;padding:0 20rpx;} .pro .pprice{flex: 1;color: #666;} .pro .ptprice{width:100rpx;} .tool{position: fixed;left: 0;bottom: 0; padding: 20rpx 0; display: flex; width: 750rpx;border-top: 1rpx solid #ddd;box-shadow: 0 -1px 5px 0 #eee;background-color: #fff; } .tool .sub{background-color: #576b95;border: 1rpx solid #576b95; color: #fff;flex:1;margin: 0 20rpx;height: 40px;line-height: 40px; text-align: center;border-radius: 3px;} /*我的地址css*/ .addr_box{height:350px;width:100%;background:#fff;position:fixed;bottom:0; z-index:10; } .addr_box_add{position:absolute;bottom:0;border-top:1px solid #eee;width:100%;padding-left:35%;padding-top:10px;background:#fff;font-size: 18px;height: 40px;} .addr_head{display: flex;border-bottom:1px solid #eee;height: 40px;background:#fff;} .addr_head_cancel{font-size: 14px;margin:15px 1px;} .addr_head_title{font-size: 18px;margin:15px 30%;} .addr_body{display: flex;border-bottom:1px dashed #000;margin:10px;opacity: 0.9} .addr_body_edit{width:9%;padding:10px;font-size:14px;} .addr_body_my{width:75%;font-size:14px;color:#666;} .addr_body_my_det{font-size:14px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;color:#000;} .addr_body_sel{padding-top:15px;} .addr_lbl_add{margin:5px;color:green;font-size:18px;font-weight: bold;} .hiddenbox{height:100%;width:100%;position: fixed;background:#666;opacity: 0.5;z-index: 1;top:0;} .addr_sel_m{font-size:16px;color:#666;width:80%;} .addr_sel_a{font-size:16px;color:#000;width:80%;} |
var base = getApp(); var common=require('../../utils/common.js'); Page({ data: { arrTime: ['选择配送时间', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00', '17:00-18:00'], objectArrTime: [ { id: 0, name: '选择配送时间' }, { id: 1, name: '10:00-11:00' }, { id: 2, name: '11:00-12:00' }, { id: 3, name: '12:00-13:00' }, { id: 4, name: '13:00-14:00' }, { id: 5, name: '14:00-15:00' }, { id: 6, name: '15:00-16:00' }, { id: 7, name: '16:00-17:00' }, { id: 8, name: '17:00-18:00' }], arrTimeIndex: 0, addr: "", addresslist: [], addrShow: false, scrollTop: 100, selectedID: -1, oinfo: { OrderSource: "all|web", Consignee: "", Cellphone: "", City: "", District: "", Address: "", DeliveryDate: "", DeliveryTime: "", Payment: "", Remarks: "", TotalPrice: 0 }, dateStart: "2017-01-01", dateEnd: "2017-01-01" }, bindTimeChange: function (e) { var _this = this; if (e.detail.value > 0) { _this.setData({ arrTimeIndex: e.detail.value, "oinfo.DeliveryTime": _this.data.arrTime[e.detail.value] }); } }, bindDateChange: function (e) { this.setData({ "oinfo.DeliveryDate": e.detail.value }) }, myaddrChange: function () {//触摸选择地址 this.setData({ addrShow: true }); }, myaddrCancel: function () {//点击地址簿中取消按钮 this.setData({ addrShow: false }); }, closeaddr:function(){//触摸遮罩层关闭地址选项 this.setData({ addrShow: false }); }, toSelect: function (e) {//选中地址 var _this = this; var id = e.currentTarget.dataset.aid; _this.setData({ selectedID: id }); for (var i = 0; i < _this.data.addresslist.length; i++) { if (_this.data.addresslist[i].id == id) { _this.setData({ "oinfo.City": _this.data.addresslist[i].city, "oinfo.District": _this.data.addresslist[i].area, "oinfo.Consignee": _this.data.addresslist[i].name, "oinfo.Cellphone": _this.data.addresslist[i].phone, "oinfo.Address": _this.data.addresslist[i].address, addr: _this.data.addresslist[i].city + ' ' + _this.data.addresslist[i].area + ' ' + _this.data.addresslist[i].address, addrShow: false }); break; } } }, onLoad: function (e) { var _this = this; var now=new Date(); if (base.user.islogin()) { if (e.from && e.from == "cart") { var l = base.cart.getList(); for (var i = 0; i < l.length; i++) { l[i].img = base.path.res + 'images/ksk/item/w_127/' + l[i].name + '.jpg' } _this.setData({ plist: l, dateStart: common.addDate(now,1), dateEnd: common.addDate(now,90) }); } } this.getAddressList(); console.log(this.data.plist); }, getAddressList: function () { var _this = this; base.get({ c: "UserCenter", m: "GetAllAddress" }, function (d) { var dt = d.data; if (dt.Status == "ok") { var arr = []; for (var i = 0; i < dt.Tag.length; i++) { var obj = dt.Tag[i]; if (i == 0) { obj.isDefault = true; } arr.push(obj); } _this.setData({ addresslist: arr }) } }) }, onShow: function (e) { }, getTotalPrice: function () {//应付金额 var _this = this; var pl = _this.data.plist;//name: p.name, price: p.price, size: p.size, num: p.num, brand: p.brand,supplyno var alltotal = 0; for (var i = 0; i < pl.length; i++) { if (!isNaN(pl[i].price)) { alltotal += parseFloat(pl[i].price); } } this.setData({ "oinfo.TotalPrice": alltotal }); }, getProductList: function () { var _this = this; var arr_pro = []; var pl = _this.data.plist;//name: p.name, price: p.price, size: p.size, num: p.num, brand: p.brand,supplyno for (var i = 0; i < pl.length; i++) { arr_pro.push({ ProductName: pl[i].name, Price: pl[i].price, Size: pl[i].size, Num: pl[i].num, CakeNo: 0, OType: 0, IType: 0, SupplyNo: pl[i].supplyno, //生日内容 IsCutting: 0, CutNum: 0, BrandCandleType: 0, Remarks: '', Premark: null,//生产备注 }); } return arr_pro; }, valid: function () { var _this = this; var err = ""; if (!_this.data.oinfo.Consignee) { err = "请选择收货人信息!"; wx.showModal({ showCancel: false, title: '', content: err }) return false; } if (!_this.data.oinfo.DeliveryDate) { err = "请选择配送日期!"; wx.showModal({ showCancel: false, title: '', content: err }) return false; } if (!_this.data.oinfo.DeliveryTime) { err = "请选择配送时间段!"; wx.showModal({ showCancel: false, title: '', content: err }) return false; } return true; }, submit: function () { var _this = this; if (_this.valid()) { _this.getTotalPrice(); var obj = {}; obj.UserName = base.user.phone; obj.UserPhone = base.user.phone; obj.OrderSource = _this.data.oinfo.OrderSource; obj.Consignee = _this.data.oinfo.Consignee; obj.Cellphone = _this.data.oinfo.Cellphone; obj.City = _this.data.oinfo.City; obj.District = _this.data.oinfo.District; obj.Address = _this.data.oinfo.Address; obj.DeliveryDate = _this.data.oinfo.DeliveryDate; obj.DeliveryTime = _this.data.oinfo.DeliveryTime; obj.Payment = _this.data.oinfo.Payment; obj.Uid = base.user.userid; obj.Remarks = _this.data.oinfo.Remarks; obj.TotalPrice = _this.data.oinfo.TotalPrice; obj.TotalPrice = obj.TotalPrice < 0 ? 0 : obj.TotalPrice; var oplArr = _this.getProductList(); var oal = []; base.post({ c: "OrderCenter", m: "AddOrder", p: JSON.stringify(obj), proInfo: JSON.stringify(oplArr), oalInfo: JSON.stringify(oal) }, function (d) { console.log(d) var dt = d.data; if (dt.Status == "ok") { base.cart.clear(); wx.redirectTo({ url: "../payment/payment?oid=" + dt.Tag }) } }) } } }) |
模板简介:该模板名称为【微信小程序贝思客蓝色订单详情提交样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。