fe / yoho-brand-shop · Commits

Go to a project

Authored by yyq
Commit ae1b40f9357d777f803f71cb7ba5a8b134a608c3 1 parent 7198c068

order ensure

Inline Side-by-side
Showing 6 changed files with 455 additions and 1 deletions
@@ -15,5 +15,6 @@ @@ -15,5 +15,6 @@
15 clear: both; 15 clear: both;
16 } 16 }
17 17
  18 +@import "./iconfont.wxss";
18 @import "./vendors/toast/wetoast.wxss"; 19 @import "./vendors/toast/wetoast.wxss";
19 -@import "./vendors/zanui/index.wxss";  
  20 +@import "./vendors/zanui/index.wxss";
  1 +@font-face {
  2 + font-family: 'iconfont';
  3 + src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
  4 + font-weight: normal;
  5 + font-style: normal;
  6 +}
  7 +
  8 +.iconfont {
  9 + font-family:"iconfont" !important;
  10 + font-size: 28rpx;
  11 + font-style: normal;
  12 + -webkit-font-smoothing: antialiased;
  13 + -moz-osx-font-smoothing: grayscale;
  14 +}
  15 +
  16 +.icon-round-checked:before { content: "\e60a"; }
  17 +
  18 +.icon-wechat:before { content: "\ec7d"; }
  19 +
  20 +.icon-round:before { content: "\e647"; }
  21 +
  22 +.icon-location:before { content: "\e67c"; }
  23 +
  24 +.icon-bottom:before { content: "\e612"; }
  25 +
  26 +.icon-right:before { content: "\e621"; }
  27 +
  28 +.icon-top:before { content: "\e622"; }
  29 +
  30 +.icon-left:before { content: "\e623"; }
  1 +Page({
  2 + data: {
  3 + // choosedAddress: true,
  4 +
  5 + deliveryWayText: '普通快递：运费¥0',
  6 + deliveryWayEditStatus: false,
  7 + deliveryWayList: [
  8 + {
  9 + delivery_way_name: '普通快递',
  10 + delivery_way_cost: '0',
  11 + ckecked: true
  12 + },
  13 + {
  14 + delivery_way_name: '顺丰快递',
  15 + delivery_way_cost: '15'
  16 + }
  17 + ],
  18 +
  19 + deliveryTimeText: '送货时间不限',
  20 + deliveryTimeEditStatus: false,
  21 + deliveryTimeList: [
  22 + {
  23 + delivery_time_string: '送货时间不限',
  24 + ckecked: true
  25 + },
  26 + { delivery_time_string: '仅工作日送货' },
  27 + { delivery_time_string: '仅双休日送货' }
  28 + ],
  29 +
  30 + invoiceNeedStatus: false,
  31 +
  32 + promotionList: [
  33 + {
  34 + promotion: '商品金额',
  35 + promotion_amount: '¥999.00'
  36 + },
  37 + {
  38 + promotion: '运费',
  39 + promotion_amount: '+¥0.00'
  40 + },
  41 + {
  42 + promotion: '活动金额',
  43 + promotion_amount: '-¥299.00'
  44 + }
  45 + ],
  46 + paymentAmount: '¥999.00'
  47 + },
  48 + chooseAddress() {
  49 + // body...
  50 + },
  51 + enterAddress() {
  52 +
  53 + },
  54 + chooseWechatAddress() {
  55 + wx.chooseAddress({
  56 + success(res) {
  57 + console.log(res);
  58 + // TODO
  59 + },
  60 + fail() {
  61 + wx.showModal({
  62 + content: '获取微信地址失败或未授权',
  63 + showCancel: false,
  64 + confirmText: '好的'
  65 + });
  66 + }
  67 + })
  68 + },
  69 + toggleDeliveryWayList() {
  70 + this.setData({deliveryWayEditStatus: !this.data.deliveryWayEditStatus});
  71 + },
  72 + changeDeliveryWay(e) {
  73 + let selectIndex = e.currentTarget.dataset.key;
  74 + let list = this.data.deliveryWayList,
  75 + name = this.data.deliveryWayText;
  76 +
  77 +
  78 + if (list.length && list.length > selectIndex) {
  79 + list.map((item, index) => {
  80 + if (selectIndex === index) {
  81 + name = `${item.delivery_way_name}：运费¥${item.delivery_way_cost}`;
  82 + }
  83 +
  84 + item.ckecked = selectIndex === index;
  85 + });
  86 +
  87 + this.setData({
  88 + deliveryWayText: name,
  89 + deliveryWayEditStatus: false,
  90 + deliveryWayList: list
  91 + });
  92 + }
  93 + },
  94 + toggleDeliveryTimeList() {
  95 + this.setData({deliveryTimeEditStatus: !this.data.deliveryTimeEditStatus});
  96 + },
  97 + changeDeliveryTime(e) {
  98 + let selectIndex = e.currentTarget.dataset.key;
  99 + let list = this.data.deliveryTimeList,
  100 + name = this.data.deliveryTimeText;
  101 +
  102 +
  103 + if (list.length && list.length > selectIndex) {
  104 + list.map((item, index) => {
  105 + if (selectIndex === index) {
  106 + name = item.delivery_time_string;
  107 + }
  108 +
  109 + item.ckecked = selectIndex === index;
  110 + });
  111 +
  112 + this.setData({
  113 + deliveryTimeText: name,
  114 + deliveryTimeEditStatus: false,
  115 + deliveryTimeList: list
  116 + });
  117 + }
  118 + },
  119 + toggleInvoiceWrap(e) {
  120 + this.setData({invoiceNeedStatus: e.detail.value});
  121 + }
  122 +});
  1 +{
  2 + "navigationBarTitleText": "确认订单"
  3 +}
  1 +<view class="container">
  2 + <view wx:if="{{choosedAddress}}" class="address" bindtap="chooseAddress">
  3 + <text class="iconfont icon-location"></text>
  4 + <view class="consignee">
  5 + <text class="name">*蛋蛋</text>
  6 + <text class="phone">183****8888</text>
  7 + <text class="direction">江苏省 南京市 建邺区 江陵江东街 国家广告产业园5栋17楼有货传媒</text>
  8 + </view>
  9 + <text class="iconfont icon-right"></text>
  10 + </view>
  11 + <view wx:else class="address address-empty">
  12 + <view class="add-address" bindtap="enterAddress">
  13 + <text class="left-icon">+</text>
  14 + <text class="text">手动新增收获地址</text>
  15 + <text class="iconfont icon-right"></text>
  16 + </view>
  17 + <view class="add-address add-wechat-address" bindtap="chooseWechatAddress">
  18 + <text class="iconfont icon-wechat left-icon"></text>
  19 + <text class="text">一键获取微信地址</text>
  20 + <text class="iconfont icon-right"></text>
  21 + </view>
  22 + </view>
  23 +
  24 + <view class="split-line"></view>
  25 + <view class="goods-list">
  26 + <view class="goods-item">
  27 + <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>
  28 + </view>
  29 + </view>
  30 + <view class="split-line"></view>
  31 + <view class="choose-wrap">
  32 + <view class="choose-item delivery-way">
  33 + 配送方式
  34 + <view class="change-btn" bindtap="toggleDeliveryWayList">
  35 + <text>{{deliveryWayText}}</text>
  36 + <text class="iconfont {{deliveryWayEditStatus ? 'icon-top' : 'icon-bottom'}}"></text>
  37 + </view>
  38 + </view>
  39 + <view wx:if="{{deliveryWayEditStatus}}" class="edit-wrap delivery-way-wrap">
  40 + <view wx:for="{{deliveryWayList}}" wx:key="{{index}}" class="edit-item delivery-way-item" data-key="{{index}}" bindtap="changeDeliveryWay">
  41 + <text class="left-name">{{item.delivery_way_name}}: 运费¥{{item.delivery_way_cost}}</text>
  42 + <text class="iconfont {{item.ckecked ? 'icon-round-checked' : 'icon-round'}}"></text>
  43 + </view>
  44 + </view>
  45 + <view class="choose-item delivery-time">
  46 + 送货时间
  47 + <view class="change-btn" bindtap="toggleDeliveryTimeList">
  48 + <text>{{deliveryTimeText}}</text>
  49 + <text class="iconfont {{deliveryTimeEditStatus ? 'icon-top' : 'icon-bottom'}}"></text>
  50 + </view>
  51 + </view>
  52 + <view wx:if="{{deliveryTimeEditStatus}}" class="edit-wrap delivery-way-wrap">
  53 + <view wx:for="{{deliveryTimeList}}" wx:key="unique" class="edit-item delivery-way-item" data-key="{{index}}" bindtap="changeDeliveryTime">
  54 + <text class="left-name">{{item.delivery_time_string}}</text>
  55 + <text class="iconfont {{item.ckecked ? 'icon-round-checked' : 'icon-round'}}"></text>
  56 + </view>
  57 + </view>
  58 + <view class="choose-item invoice">
  59 + 发票
  60 + <switch checked="{{invoiceNeedStatus}}" class="switch" bindchange="toggleInvoiceWrap"/>
  61 + </view>
  62 + <view wx:if="{{invoiceNeedStatus}}" class="choose-item invoice">
  63 + 发票信息
  64 + <view class="change-btn">
  65 + <text>{{invoiceName}}</text>
  66 + <text class="iconfont icon-right"></text>
  67 + </view>
  68 + </view>
  69 + </view>
  70 + <view class="split-line"></view>
  71 + <view class="payment-wrap">
  72 + <view wx:for="{{promotionList}}" wx:key="unique" class="payment-cell">
  73 + <text class="name">{{item.promotion}}</text>
  74 + <text class="price">{{item.promotion_amount}}</text>
  75 + </view>
  76 +
  77 + <view class="payment-cell">
  78 + <text class="name">实付金额</text>
  79 + <text class="price red">{{paymentAmount}}</text>
  80 + </view>
  81 + </view>
  82 + <view class="submit-wrap">
  83 + <button bindtap="submitOrder" class="submit-btn">使用微信安全支付</button>
  84 + </view>
  85 +</view>
  1 +.container {
  2 + color: #444;
  3 + padding-top: 210rpx;
  4 +}
  5 +
  6 +.address {
  7 + width: 100%;
  8 + height: 210rpx;
  9 + line-height: 200rpx;
  10 + padding: 0 66rpx 10rpx 104rpx;
  11 + font-size: 28rpx;
  12 + background-color: #fff;
  13 + border-top: 1rpx solid #e0e0e0;
  14 + box-sizing: border-box;
  15 + position: fixed;
  16 + top: 0;
  17 + z-index: 10;
  18 +}
  19 +
  20 +.address:after {
  21 + content: '';
  22 + width: 100%;
  23 + height: 10rpx;
  24 + background: url('https://cdn.yoho.cn/yoho-brand-shop/assets/img/cart/address-bottom-line-min.jpg');
  25 + position: absolute;
  26 + left: 0;
  27 + bottom: 0;
  28 +}
  29 +
  30 +.address .icon-location {
  31 + font-size: 54rpx;
  32 + color: #707070;
  33 + position: absolute;
  34 + left: 30rpx;
  35 +}
  36 +
  37 +.address .icon-right {
  38 + font-size: 48rpx;
  39 + color: #e0e0e0;
  40 + position: absolute;
  41 + right: 18rpx;
  42 +}
  43 +
  44 +.address .consignee {
  45 + display: inline-block;
  46 + vertical-align: middle;
  47 + line-height: 1.5;
  48 +}
  49 +
  50 +.address .direction {
  51 + display: block;
  52 + margin-top: 20rpx;
  53 + word-break:break-all;
  54 +}
  55 +
  56 +.address-empty {
  57 + padding: 0;
  58 +}
  59 +
  60 +.address-empty .add-address {
  61 + line-height: 100rpx;
  62 +}
  63 +
  64 +.address-empty .add-wechat-address {
  65 + border-top: 1rpx solid #f0f0f0;
  66 +}
  67 +
  68 +.address-empty .add-address .left-icon {
  69 + display: inline-block;
  70 + width: 46rpx;
  71 + height: 46rpx;
  72 + line-height: 44rpx;
  73 + vertical-align: middle;
  74 + text-align: center;
  75 + border: 1rpx solid #e0e0e0;
  76 + border-radius: 50%;
  77 + margin-left: 30rpx;
  78 + margin-right: 20rpx;
  79 +}
  80 +
  81 +.address-empty .add-address .text {
  82 + vertical-align: middle;
  83 +}
  84 +
  85 +.address.address-empty:after {
  86 + height: 1rpx;
  87 + background: #e0e0e0;
  88 +}
  89 +
  90 +.split-line {
  91 + width: 100%;
  92 + height: 20rpx;
  93 + background-color: #f0f0f0;
  94 +}
  95 +
  96 +.goods-list {
  97 + padding-left: 30rpx;
  98 +}
  99 +
  100 +.goods-list .goods-item {
  101 + height: 200rpx;
  102 + padding: 20rpx;
  103 + padding-left: 180rpx;
  104 + border-bottom: 1rpx solid #e0e0e0;
  105 + position: relative;
  106 +}
  107 +
  108 +.goods-list .goods-item:last-child {
  109 + border-bottom: 0;
  110 +}
  111 +
  112 +.goods-item .thumb {
  113 + width: 150rpx;
  114 + height: 200rpx;
  115 + position: absolute;
  116 + left: 0;
  117 +}
  118 +
  119 +.choose-wrap .choose-item {
  120 + height: 88rpx;
  121 + line-height: 88rpx;
  122 + font-size: 32rpx;
  123 + margin-left: 30rpx;
  124 + border-bottom: 1rpx solid #e0e0e0;
  125 + padding-right: 30rpx;
  126 + overflow: hidden;
  127 +}
  128 +
  129 +.choose-wrap .choose-item:last-child {
  130 + border-bottom: 0;
  131 +}
  132 +
  133 +.choose-wrap .switch {
  134 + float: right;
  135 +}
  136 +
  137 +.choose-wrap .change-btn {
  138 + float: right;
  139 + display: inline-block;
  140 + font-size: 28rpx;
  141 +}
  142 +
  143 +.choose-wrap .change-btn .iconfont {
  144 + font-size: 40rpx;
  145 + color: #e0e0e0;
  146 + margin-left: 10rpx;
  147 + vertical-align: middle;
  148 +}
  149 +
  150 +.choose-wrap .edit-wrap {
  151 + background-color: #f0f0f0;
  152 + font-size: 28rpx;
  153 + margin-top: -1rpx;
  154 +}
  155 +
  156 +.choose-wrap .edit-wrap .edit-item {
  157 + width: 100%;
  158 + line-height: 80rpx;
  159 + padding: 0 30rpx;
  160 + border-bottom: 1rpx solid #fff;
  161 + box-sizing: border-box;
  162 +}
  163 +
  164 +.choose-wrap .edit-wrap .edit-item:last-child {
  165 + border-bottom: 0;
  166 +}
  167 +
  168 +.choose-wrap .edit-wrap .left-name {
  169 + max-width: 80%;
  170 + word-break: break-all;
  171 + display: inline-block;
  172 +}
  173 +
  174 +.choose-wrap .edit-wrap .iconfont {
  175 + float: right;
  176 +}
  177 +
  178 +.payment-wrap {
  179 + padding: 10rpx 30rpx;
  180 +}
  181 +
  182 +.payment-wrap .payment-cell {
  183 + line-height: 54rpx;
  184 + font-size: 24rpx;
  185 +}
  186 +
  187 +.payment-wrap .payment-cell .price {
  188 + float: right;
  189 +}
  190 +
  191 +.payment-wrap .payment-cell .red {
  192 + color: #d0021b;
  193 +}
  194 +
  195 +.submit-wrap {
  196 + padding: 60rpx 30rpx;
  197 + background-color: #f0f0f0;
  198 +}
  199 +
  200 +.submit-wrap .submit-btn {
  201 + width: 100%;
  202 + height: 88rpx;
  203 + line-height: 88rpx;
  204 + font-size: 32rpx;
  205 + color: #fff;
  206 + background-color: #444;
  207 + border-radius: 8rpx;
  208 + box-sizing: border-box;
  209 +}
  210 +
  211 +
  212 +
  213 +