
<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
})
}
})
}
}
})
|
模板简介:该模板名称为【微信小程序贝思客蓝色订单详情提交样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。