首页 > 小程序教程 > 微信小程序贝思客蓝色订单详情提交样式模板制作设计下载

微信小程序贝思客蓝色订单详情提交样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
.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%;}
三、js页面代码如下:
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
                    })
                }

            })

        }
    }
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 16,544次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-14
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 微信图片 微信模板 响应式 微信公众平台 企业网站 自适应 微信文章 微信素材 单页式简历模板
您可能会喜欢的其他模板