Skip to content

7
7-Eleven
Commit f1350a3d by 高淑倩
Options

立即购买样式

parent d16c5c54
Showing with 143 additions and 128 deletions
src/pages/confirmOrder/confirmOrder.js
...@@ -41,6 +41,10 @@ wxService.page({ ...@@ -41,6 +41,10 @@ wxService.page({
this.initCitys() this.initCitys()
}, },
// 提交
formSubmit(e){
console.log('提交', e)
},
initCitys() { initCitys() {
wxService.getC1().then((c1) => { wxService.getC1().then((c1) => {
return wxService.Promise.all([wxService.Promise.resolve(c1), wxService.getC2ByC1('北京'), wxService.getC3ByC2('北京北京市')]) return wxService.Promise.all([wxService.Promise.resolve(c1), wxService.getC2ByC1('北京'), wxService.getC3ByC2('北京北京市')])
...@@ -126,8 +130,9 @@ wxService.page({ ...@@ -126,8 +130,9 @@ wxService.page({
}) })
}, },
handelGobuy() { handelGobuy() {
this.formSubmit()
const { trolleySku2Buy } = this.data const { trolleySku2Buy } = this.data
this.getBill(trolleySku2Buy) // 下单 // this.getBill(trolleySku2Buy) // 下单
}, },
// 下单 // 下单
getBill(trolleySku2Buy) { getBill(trolleySku2Buy) {
......
src/pages/confirmOrder/confirmOrder.wxml
<!--pages/confirmOrder/confirmOrder.wxml--> <!--pages/confirmOrder/confirmOrder.wxml-->
<view class="page-confirm-order"> <view class="page-confirm-order">
<view class="address-wrap"> <form bindsubmit="formSubmit">
<block wx:if="{{goodsAddress}}"> <view class="address-wrap">
<view class="address-section"> <block wx:if="{{goodsAddress}}">
<input class="address-input" placeholder="请输入收货人姓名" /> <view class="address-section">
<input class="address-input" placeholder="请输入手机号码" /> <input class="address-input" name="name" placeholder="请输入收货人姓名" />
</view> <input class="address-input" name="phone" placeholder="请输入手机号码" />
<view class="address-section"> </view>
<picker <view class="address-section">
class="address-input address-picker" <picker
mode="multiSelector" class="address-input address-picker"
bindchange="bindMultiPickerChange" mode="multiSelector"
bindcolumnchange="bindMultiPickerColumnChange" bindchange="bindMultiPickerChange"
value="{{multiIndex}}" bindcolumnchange="bindMultiPickerColumnChange"
range="{{citys}}" value="{{multiIndex}}"
> range="{{citys}}"
<view class="form-picker" style="padding-top: 8rpx;" wx:if="{{cityView}}"> >
{{cityView}} <view class="form-picker" style="padding-top: 8rpx;" wx:if="{{cityView}}">
</view> {{cityView}}
<view wx:if="{{!cityView}}"> </view>
<input <view wx:if="{{!cityView}}">
class='form-input' <input
placeholder-class="placeholder-picker" class='form-input'
style="padding-top: 8rpx;" placeholder-class="placeholder-picker"
type="text" style="padding-top: 8rpx;"
disabled type="text"
placeholder="所在区域" disabled
/> placeholder="所在区域"
</view> />
</picker> </view>
</view> </picker>
<view class="address-section"> </view>
<input class="address-input address-detail" placeholder="请输入路名门牌号" /> <view class="address-section">
</view> <input class="address-input address-detail" name="address" placeholder="请输入路名门牌号" />
</block> </view>
<block wx:if="{{!goodsAddress}}"> </block>
<view class="address-list" bindtap="selectAddress">
<view class="address-info"> <block wx:if="{{!goodsAddress}}">
<view> <view class="address-list" bindtap="selectAddress">
<text class="user-name">{{addressInfo.userName}}</text> <view class="address-info">
<text class="phone-number">{{addressInfo.telNumber}}</text> <view>
</view> <text class="user-name">{{addressInfo.userName}}</text>
<view class="address-list-detail"> <text class="phone-number">{{addressInfo.telNumber}}</text>
{{addressInfo.provinceName}} {{addressInfo.cityName}} {{addressInfo.countyName}} {{addressInfo.detailInfo}} </view>
</view> <view class="address-list-detail">
<view class="arrow-right-wrap"> {{addressInfo.provinceName}} {{addressInfo.cityName}} {{addressInfo.countyName}} {{addressInfo.detailInfo}}
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png" /> </view>
<view class="arrow-right-wrap">
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png" />
</view>
</view> </view>
</view> </view>
</block>
<view class="wx-address" bindtap="chooseWxAddress">
+ 使用微信地址
</view> </view>
</block>
<view class="wx-address" bindtap="chooseWxAddress">
+ 使用微信地址
</view> </view>
</view> <view class="address-line">
<view class="address-line"> <image src="/assets/imgs/7_1_0/address-line.png" />
<image src="/assets/imgs/7_1_0/address-line.png" /> </view>
</view> <!-- 分割线 -->
<!-- 分割线 --> <view class="gray-line" />
<view class="gray-line" /> <!-- 商品列表 -->
<!-- 商品列表 --> <view class="pro-wrap">
<view class="pro-wrap"> <block wx:for="{{currentOrderList}}" wx:key="{{item}}">
<block wx:for="{{currentOrderList}}" wx:key="{{item}}"> <view class="pro-list">
<view class="pro-list"> <image class="pro-img" src="{{item.productImgUrl}}" />
<image class="pro-img" src="{{item.productImgUrl}}" /> <view class="pro-info">
<view class="pro-info"> <view class="pro-name">{{item.productName}}</view>
<view class="pro-name">{{item.productName}}</view> <view class="pro-desc">
<view class="pro-desc"> 规格 {{item.skuSpec}}
规格 {{item.skuSpec}} </view>
</view> <view class="pro-price">
<view class="pro-price"> <text class="price">￥{{item.price}}</text>
<text class="price">￥{{item.price}}</text> <text class="number">x {{item.count}}</text>
<text class="number">x {{item.count}}</text> </view>
</view> </view>
</view> </view>
</view> </block>
</block> </view>
</view> <!-- 分割线 -->
<!-- 分割线 --> <view class="gray-line" />
<view class="gray-line" />
<!-- 商品合计 --> <!-- 商品合计 -->
<view class="pro-sum"> <view class="pro-sum">
<view class="vip-info"> <view class="vip-info">
<view class="vip-left"> <view class="vip-left">
<view class="left-top"> <view class="left-top">
<image class="top-image" src="/assets/imgs/7_1_0/plus-icon.png" /> <image class="top-image" src="/assets/imgs/7_1_0/plus-icon.png" />
<text>现在勾选成为vip，立领200元礼包，文案文案 </text> <text>现在勾选成为vip，立领200元礼包，文案文案 </text>
</view> </view>
<view class="left-bottom"> <view class="left-bottom">
<text>vip可尊享N大权益</text> <text>vip可尊享N大权益</text>
<image class="bottom-image" src="/assets/imgs/7_1_0/explain.png" /> <image class="bottom-image" src="/assets/imgs/7_1_0/explain.png" />
</view> </view>
</view>
<view class="vip-right">
<view class="right-check-status" bindtap="handelChangeSelectVip">
<image class="check-status-img" src="{{isSelect ? '/assets/imgs/7_1_0/08_22/trade-success.png' : '/assets/imgs/7_1_0/08_22/trade-unsel.png'}}" />
</view> </view>
<view class="right-check-tips {{isSelect? 'tip-check' : 'tip-un-check'}}"> <view class="vip-right">
<image class="select-check-open {{isSelect? 'tip-check' : 'tip-un-check'}}" src="{{isSelect ? '/assets/imgs/7_1_0/08_22/sel.png' : '/assets/imgs/7_1_0/08_22/un-sel.png'}}" /> <view class="right-check-status" bindtap="handelChangeSelectVip">
<image class="check-status-img" src="{{isSelect ? '/assets/imgs/7_1_0/08_22/trade-success.png' : '/assets/imgs/7_1_0/08_22/trade-unsel.png'}}" />
</view>
<view class="right-check-tips {{isSelect? 'tip-check' : 'tip-un-check'}}">
<image class="select-check-open {{isSelect? 'tip-check' : 'tip-un-check'}}" src="{{isSelect ? '/assets/imgs/7_1_0/08_22/sel.png' : '/assets/imgs/7_1_0/08_22/un-sel.png'}}" />
</view>
</view> </view>
</view> </view>
</view> <view class="order-sum">
<view class="order-sum"> <view class="order-price">
<view class="order-price"> <view class="pro-total-price">
<view class="pro-total-price"> <text class="price-label">商品合计</text>
<text class="price-label">商品合计</text> <text class="total-price">￥306</text>
<text class="total-price">￥306</text> </view>
</view> <view class="plus-price" wx:if="{{isSelect}}">
<view class="plus-price" wx:if="{{isSelect}}"> <view class="plus-info">
<view class="plus-info"> <text class="price-label">plus会员价</text>
<text class="price-label">plus会员价</text> <text class="member-price">-￥20</text>
<text class="member-price">-￥20</text> </view>
<text class="plus-member-price">￥289</text>
</view> </view>
<text class="plus-member-price">￥289</text>
</view> </view>
</view> <view class="coupon">
<view class="coupon"> <view>
<view> <text class="price-label">优惠券</text>
<text class="price-label">优惠券</text> <view class="select-coupon" bindtap="selectCoupon">
<view class="select-coupon" bindtap="selectCoupon"> <text class="{{haveCoupon ? 'coupon-price' : 'no-coupon'}}">{{haveCoupon ? '-￥100' : '无可用优惠券'}}</text>
<text class="{{haveCoupon ? 'coupon-price' : 'no-coupon'}}">{{haveCoupon ? '-￥100' : '无可用优惠券'}}</text> <image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png" />
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png" /> </view>
</view> </view>
</view> </view>
</view> <view class="coupon" wx:if="{{isSelect}}">
<view class="coupon" wx:if="{{isSelect}}"> <view>
<view> <text class="price-label">VIP会员年费</text>
<text class="price-label">VIP会员年费</text> <text class="vip-desc"> （不可使用任何优惠或积分）</text>
<text class="vip-desc"> （不可使用任何优惠或积分）</text> <view class="select-coupon">
<view class="select-coupon"> <text class="coupon-price">+￥100</text>
<text class="coupon-price">+￥100</text> <image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png" />
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png" /> </view>
</view> </view>
</view> </view>
</view> <!-- <view class="total">
<!-- <view class="total">
<text class="total-label">小计：</text> <text class="total-label">小计：</text>
<text class="total-numer">￥186</text> <text class="total-numer">￥186</text>
</view> --> </view> -->
</view>
</view> </view>
</view>
<view class="pro-footer"> <view class="pro-footer">
<view class="cost"> <view class="cost">
<text class="cost-label">实付款：</text> <text class="cost-label">实付款：</text>
<text class="cost-price">￥306</text> <text class="cost-price">￥306</text>
</view>
<!-- <button form-type="submit" class="theme-color buy-btn">立即购买</button>-->
<!-- <view class="theme-color buy-btn" bindtap="handelGobuy">立即购买</view> -->
<view class="theme-color buy-btn">
<button form-type="submit" style="display: inline;" class="theme-color buy-btn">立即购买</button>
</view>
</view> </view>
<view class="theme-color buy-btn" bindtap="handelGobuy">立即购买</view> </form>
</view>
</view> </view>
<!--goHome--> <!--goHome-->
<go-home/> <go-home/>
......
src/pages/confirmOrder/confirmOrder.wxss
/* pages/confirmOrder/confirmOrder.wxss */ /* pages/confirmOrder/confirmOrder.wxss */
@import './../../base/base.wxss';
.address-wrap{ .address-wrap{
padding: 0 30rpx; padding: 0 30rpx;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment