Authored by yyq

order ensure

... ... @@ -15,5 +15,6 @@
clear: both;
}
@import "./iconfont.wxss";
@import "./vendors/toast/wetoast.wxss";
@import "./vendors/zanui/index.wxss";
\ No newline at end of file
@import "./vendors/zanui/index.wxss";
... ...
@font-face {
font-family: 'iconfont';
src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.iconfont {
font-family:"iconfont" !important;
font-size: 28rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-round-checked:before { content: "\e60a"; }
.icon-wechat:before { content: "\ec7d"; }
.icon-round:before { content: "\e647"; }
.icon-location:before { content: "\e67c"; }
.icon-bottom:before { content: "\e612"; }
.icon-right:before { content: "\e621"; }
.icon-top:before { content: "\e622"; }
.icon-left:before { content: "\e623"; }
... ...
Page({
data: {
// choosedAddress: true,
deliveryWayText: '普通快递:运费¥0',
deliveryWayEditStatus: false,
deliveryWayList: [
{
delivery_way_name: '普通快递',
delivery_way_cost: '0',
ckecked: true
},
{
delivery_way_name: '顺丰快递',
delivery_way_cost: '15'
}
],
deliveryTimeText: '送货时间不限',
deliveryTimeEditStatus: false,
deliveryTimeList: [
{
delivery_time_string: '送货时间不限',
ckecked: true
},
{ delivery_time_string: '仅工作日送货' },
{ delivery_time_string: '仅双休日送货' }
],
invoiceNeedStatus: false,
promotionList: [
{
promotion: '商品金额',
promotion_amount: '¥999.00'
},
{
promotion: '运费',
promotion_amount: '+¥0.00'
},
{
promotion: '活动金额',
promotion_amount: '-¥299.00'
}
],
paymentAmount: '¥999.00'
},
chooseAddress() {
// body...
},
enterAddress() {
},
chooseWechatAddress() {
wx.chooseAddress({
success(res) {
console.log(res);
// TODO
},
fail() {
wx.showModal({
content: '获取微信地址失败或未授权',
showCancel: false,
confirmText: '好的'
});
}
})
},
toggleDeliveryWayList() {
this.setData({deliveryWayEditStatus: !this.data.deliveryWayEditStatus});
},
changeDeliveryWay(e) {
let selectIndex = e.currentTarget.dataset.key;
let list = this.data.deliveryWayList,
name = this.data.deliveryWayText;
if (list.length && list.length > selectIndex) {
list.map((item, index) => {
if (selectIndex === index) {
name = `${item.delivery_way_name}:运费¥${item.delivery_way_cost}`;
}
item.ckecked = selectIndex === index;
});
this.setData({
deliveryWayText: name,
deliveryWayEditStatus: false,
deliveryWayList: list
});
}
},
toggleDeliveryTimeList() {
this.setData({deliveryTimeEditStatus: !this.data.deliveryTimeEditStatus});
},
changeDeliveryTime(e) {
let selectIndex = e.currentTarget.dataset.key;
let list = this.data.deliveryTimeList,
name = this.data.deliveryTimeText;
if (list.length && list.length > selectIndex) {
list.map((item, index) => {
if (selectIndex === index) {
name = item.delivery_time_string;
}
item.ckecked = selectIndex === index;
});
this.setData({
deliveryTimeText: name,
deliveryTimeEditStatus: false,
deliveryTimeList: list
});
}
},
toggleInvoiceWrap(e) {
this.setData({invoiceNeedStatus: e.detail.value});
}
});
... ...
{
"navigationBarTitleText": "确认订单"
}
... ...
<view class="container">
<view wx:if="{{choosedAddress}}" class="address" bindtap="chooseAddress">
<text class="iconfont icon-location"></text>
<view class="consignee">
<text class="name">*蛋蛋</text>
<text class="phone">183****8888</text>
<text class="direction">江苏省 南京市 建邺区 江陵江东街 国家广告产业园5栋17楼有货传媒</text>
</view>
<text class="iconfont icon-right"></text>
</view>
<view wx:else class="address address-empty">
<view class="add-address" bindtap="enterAddress">
<text class="left-icon">+</text>
<text class="text">手动新增收获地址</text>
<text class="iconfont icon-right"></text>
</view>
<view class="add-address add-wechat-address" bindtap="chooseWechatAddress">
<text class="iconfont icon-wechat left-icon"></text>
<text class="text">一键获取微信地址</text>
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="split-line"></view>
<view class="goods-list">
<view class="goods-item">
<image class="thumb" src="http://img11.static.yhbimg.com/goodsimg/2017/07/26/14/011b6a77d9e4105c50811faba17ed72466.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/80"></image>
</view>
</view>
<view class="split-line"></view>
<view class="choose-wrap">
<view class="choose-item delivery-way">
配送方式
<view class="change-btn" bindtap="toggleDeliveryWayList">
<text>{{deliveryWayText}}</text>
<text class="iconfont {{deliveryWayEditStatus ? 'icon-top' : 'icon-bottom'}}"></text>
</view>
</view>
<view wx:if="{{deliveryWayEditStatus}}" class="edit-wrap delivery-way-wrap">
<view wx:for="{{deliveryWayList}}" wx:key="{{index}}" class="edit-item delivery-way-item" data-key="{{index}}" bindtap="changeDeliveryWay">
<text class="left-name">{{item.delivery_way_name}}: 运费¥{{item.delivery_way_cost}}</text>
<text class="iconfont {{item.ckecked ? 'icon-round-checked' : 'icon-round'}}"></text>
</view>
</view>
<view class="choose-item delivery-time">
送货时间
<view class="change-btn" bindtap="toggleDeliveryTimeList">
<text>{{deliveryTimeText}}</text>
<text class="iconfont {{deliveryTimeEditStatus ? 'icon-top' : 'icon-bottom'}}"></text>
</view>
</view>
<view wx:if="{{deliveryTimeEditStatus}}" class="edit-wrap delivery-way-wrap">
<view wx:for="{{deliveryTimeList}}" wx:key="unique" class="edit-item delivery-way-item" data-key="{{index}}" bindtap="changeDeliveryTime">
<text class="left-name">{{item.delivery_time_string}}</text>
<text class="iconfont {{item.ckecked ? 'icon-round-checked' : 'icon-round'}}"></text>
</view>
</view>
<view class="choose-item invoice">
发票
<switch checked="{{invoiceNeedStatus}}" class="switch" bindchange="toggleInvoiceWrap"/>
</view>
<view wx:if="{{invoiceNeedStatus}}" class="choose-item invoice">
发票信息
<view class="change-btn">
<text>{{invoiceName}}</text>
<text class="iconfont icon-right"></text>
</view>
</view>
</view>
<view class="split-line"></view>
<view class="payment-wrap">
<view wx:for="{{promotionList}}" wx:key="unique" class="payment-cell">
<text class="name">{{item.promotion}}</text>
<text class="price">{{item.promotion_amount}}</text>
</view>
<view class="payment-cell">
<text class="name">实付金额</text>
<text class="price red">{{paymentAmount}}</text>
</view>
</view>
<view class="submit-wrap">
<button bindtap="submitOrder" class="submit-btn">使用微信安全支付</button>
</view>
</view>
... ...
.container {
color: #444;
padding-top: 210rpx;
}
.address {
width: 100%;
height: 210rpx;
line-height: 200rpx;
padding: 0 66rpx 10rpx 104rpx;
font-size: 28rpx;
background-color: #fff;
border-top: 1rpx solid #e0e0e0;
box-sizing: border-box;
position: fixed;
top: 0;
z-index: 10;
}
.address:after {
content: '';
width: 100%;
height: 10rpx;
background: url('https://cdn.yoho.cn/yoho-brand-shop/assets/img/cart/address-bottom-line-min.jpg');
position: absolute;
left: 0;
bottom: 0;
}
.address .icon-location {
font-size: 54rpx;
color: #707070;
position: absolute;
left: 30rpx;
}
.address .icon-right {
font-size: 48rpx;
color: #e0e0e0;
position: absolute;
right: 18rpx;
}
.address .consignee {
display: inline-block;
vertical-align: middle;
line-height: 1.5;
}
.address .direction {
display: block;
margin-top: 20rpx;
word-break:break-all;
}
.address-empty {
padding: 0;
}
.address-empty .add-address {
line-height: 100rpx;
}
.address-empty .add-wechat-address {
border-top: 1rpx solid #f0f0f0;
}
.address-empty .add-address .left-icon {
display: inline-block;
width: 46rpx;
height: 46rpx;
line-height: 44rpx;
vertical-align: middle;
text-align: center;
border: 1rpx solid #e0e0e0;
border-radius: 50%;
margin-left: 30rpx;
margin-right: 20rpx;
}
.address-empty .add-address .text {
vertical-align: middle;
}
.address.address-empty:after {
height: 1rpx;
background: #e0e0e0;
}
.split-line {
width: 100%;
height: 20rpx;
background-color: #f0f0f0;
}
.goods-list {
padding-left: 30rpx;
}
.goods-list .goods-item {
height: 200rpx;
padding: 20rpx;
padding-left: 180rpx;
border-bottom: 1rpx solid #e0e0e0;
position: relative;
}
.goods-list .goods-item:last-child {
border-bottom: 0;
}
.goods-item .thumb {
width: 150rpx;
height: 200rpx;
position: absolute;
left: 0;
}
.choose-wrap .choose-item {
height: 88rpx;
line-height: 88rpx;
font-size: 32rpx;
margin-left: 30rpx;
border-bottom: 1rpx solid #e0e0e0;
padding-right: 30rpx;
overflow: hidden;
}
.choose-wrap .choose-item:last-child {
border-bottom: 0;
}
.choose-wrap .switch {
float: right;
}
.choose-wrap .change-btn {
float: right;
display: inline-block;
font-size: 28rpx;
}
.choose-wrap .change-btn .iconfont {
font-size: 40rpx;
color: #e0e0e0;
margin-left: 10rpx;
vertical-align: middle;
}
.choose-wrap .edit-wrap {
background-color: #f0f0f0;
font-size: 28rpx;
margin-top: -1rpx;
}
.choose-wrap .edit-wrap .edit-item {
width: 100%;
line-height: 80rpx;
padding: 0 30rpx;
border-bottom: 1rpx solid #fff;
box-sizing: border-box;
}
.choose-wrap .edit-wrap .edit-item:last-child {
border-bottom: 0;
}
.choose-wrap .edit-wrap .left-name {
max-width: 80%;
word-break: break-all;
display: inline-block;
}
.choose-wrap .edit-wrap .iconfont {
float: right;
}
.payment-wrap {
padding: 10rpx 30rpx;
}
.payment-wrap .payment-cell {
line-height: 54rpx;
font-size: 24rpx;
}
.payment-wrap .payment-cell .price {
float: right;
}
.payment-wrap .payment-cell .red {
color: #d0021b;
}
.submit-wrap {
padding: 60rpx 30rpx;
background-color: #f0f0f0;
}
.submit-wrap .submit-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
font-size: 32rpx;
color: #fff;
background-color: #444;
border-radius: 8rpx;
box-sizing: border-box;
}
... ...