|
|
|
@ -4,12 +4,12 @@ |
|
|
|
<view class="address_left"> |
|
|
|
<view class="address_title"> |
|
|
|
<image src="../../static/img/address.png" mode=""></image> |
|
|
|
<view class="address_title_name">Nathanael</view> |
|
|
|
<text>5838590290</text> |
|
|
|
<view class="address_title_name">{{address.consignee}}</view> |
|
|
|
<text>{{address.mobile}}</text> |
|
|
|
</view> |
|
|
|
<view class="address_content"> |
|
|
|
B Oakdale Mall |
|
|
|
Johnson City NEW YORKUnitedStates13790-1294 |
|
|
|
{{address.sign_building}} |
|
|
|
{{address.country_name}}{{address.province_name}}{{address.city_name}}{{address.address}}{{address.zipcode}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image src="../../static/img/right.png" class="address_more"></image> |
|
|
|
@ -20,27 +20,31 @@ |
|
|
|
<view class="info_title"> |
|
|
|
<text>Items in cart</text> |
|
|
|
<view class="info_title_right"> |
|
|
|
<text>4 ltems</text> |
|
|
|
<image src="../../static/img/right.png" mode="" class="address_more"></image> |
|
|
|
<text>{{goods_list.length}} ltems</text> |
|
|
|
<image src="../../static/img/right.png" class="address_more"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="info_image"> |
|
|
|
<view class="info_image_item" v-for="(item,index) in 4 " :key="index"></view> |
|
|
|
<image class="info_image_item" :src="item.goods_thumb" v-for="(item,index) in goods_list" :key="index"/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="method"> |
|
|
|
<view class="method_title">Shipping Method</view> |
|
|
|
<view class="method_item" v-for="(item,index) in 2 " :key="index"> |
|
|
|
<image src="../../static/img/select2.png" mode=""></image> |
|
|
|
<view class="method_item" v-for="(item,index) in shipping_list " :key="index"> |
|
|
|
<view class="method_item_image" @click="cartselectshipping(item.shipping_id)"> |
|
|
|
<image src="../../static/img/select1.png" style="width: 30rpx;height: 30rpx;" v-if="order.shipping_id==item.shipping_id"></image> |
|
|
|
<image src="../../static/img/select2.png" style="width: 30rpx;height: 30rpx;"v-else ></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="method_item_right"> |
|
|
|
<view class="item_price"> |
|
|
|
<text>STANDARD SHIPPING:</text> |
|
|
|
<text class="item_price_span">US$59</text> |
|
|
|
<text>{{item.shipping_name}}:</text> |
|
|
|
<text class="item_price_span">US${{item.shipping_fee}}</text> |
|
|
|
</view> |
|
|
|
<view class="item_time"> |
|
|
|
<text class="item_time_span">estimated to be deliverd on </text> |
|
|
|
<text> 15/05/2022-04/05/2022</text> |
|
|
|
<text class="item_time_span">{{item.shipping_desc}} </text> |
|
|
|
<!-- <text> 15/05/2022-04/05/2022</text> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -50,17 +54,17 @@ |
|
|
|
<view class="discount_item" @click="openMore(1)"> |
|
|
|
<text>Coupons</text> |
|
|
|
<view class="discount_item_right"> |
|
|
|
<text>-US$12.5</text> |
|
|
|
<text v-show="isCoupons">-US$12.5</text> |
|
|
|
<image src="../../static/img/right.png" mode="" class="address_more"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="discount_item" @click="openMore(3)"> |
|
|
|
<view class="discount_item_left"> |
|
|
|
<text>Points</text> |
|
|
|
<text class="discount_item_left_span">(2.5)</text> |
|
|
|
<text class="discount_item_left_span">({{orderDate.your_integral || 0}})</text> |
|
|
|
</view> |
|
|
|
<view class="discount_item_right"> |
|
|
|
<text>-US$2.5</text> |
|
|
|
<text v-show="isPoints">-US$2.5</text> |
|
|
|
<image src="../../static/img/right.png" mode="" class="address_more"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -69,20 +73,20 @@ |
|
|
|
<view class="settlement"> |
|
|
|
<view class="settlement_item"> |
|
|
|
<text>Subtotal:</text> |
|
|
|
<text class="settlement_item_right">US$12.5</text> |
|
|
|
<text class="settlement_item_right">US${{total.goods_price}}</text> |
|
|
|
</view> |
|
|
|
<view class="settlement_item"> |
|
|
|
<text>Shipping fee:</text> |
|
|
|
<text class="settlement_item_right">US$1.5</text> |
|
|
|
<text class="settlement_item_right">US${{total.shipping_fee}}</text> |
|
|
|
</view> |
|
|
|
<view class="settlement_item"> |
|
|
|
<text>Discount :</text> |
|
|
|
<text class="settlement_item_right1">-US$2.5</text> |
|
|
|
<text class="settlement_item_right1">-US${{total.discount || 0}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="total"> |
|
|
|
<text>Total: US$314.00</text> |
|
|
|
<text>Total: US${{total.amount}}</text> |
|
|
|
<button @click="openMore(2)">PLACE ORDER</button> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -90,26 +94,28 @@ |
|
|
|
<view class="order_popup" v-show="isShow"> |
|
|
|
<view class="order_popup_title"> |
|
|
|
<text> |
|
|
|
{{popup_index==0?'Commodity information':popup_index==1?'Coupons':popup_index==2?'Payment Method':'Points'}}<text v-show="popup_index==3">(total:<text class="order_popup_title_span" >2.5</text>)</text> |
|
|
|
{{popup_index==0?'Commodity information':popup_index==1?'Coupons':popup_index==2?'Payment Method':'Points'}}<text v-show="popup_index==3">(total:<text class="order_popup_title_span" >{{orderDate.your_integral || 0}}</text>)</text> |
|
|
|
</text> |
|
|
|
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="order_popup_commodity" v-show="popup_index==0"> |
|
|
|
|
|
|
|
<view class="good_info" v-for="(item,index) in 3 " :key="index"> |
|
|
|
<view class="good_info" v-for="(item,index) in goods_list " :key="index"> |
|
|
|
<view class="good_info_left "> |
|
|
|
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view> |
|
|
|
<view class="good_info_image" > |
|
|
|
<image :src="item.goods_thumb" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="left_info"> |
|
|
|
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view> |
|
|
|
<view class="info_name">{{item.goods_name}}</view> |
|
|
|
<view class="left_info_bottom"> |
|
|
|
<view class="info_lable"> |
|
|
|
<text>Multicolor;41</text> |
|
|
|
<text>{{item.goods_attr |goodsAttr}}</text> |
|
|
|
<image src="/static/img/bottom.png" mode=""></image> |
|
|
|
</view> |
|
|
|
<text>x1</text> |
|
|
|
<text>x{{item.goods_number}}</text> |
|
|
|
</view> |
|
|
|
<view class="info_price">US$314.00</view> |
|
|
|
<view class="info_price">US${{item.goods_price}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -164,9 +170,9 @@ |
|
|
|
<text>Apple pay</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<navigator url="/pages/order/paySuccess"> |
|
|
|
<button>PAY NOW</button> |
|
|
|
</navigator> |
|
|
|
<!-- <navigator url="/pages/order/paySuccess"> --> |
|
|
|
<button @click="submitorder">PAY NOW</button> |
|
|
|
<!-- </navigator> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="order_popup_points" v-show="popup_index==3"> |
|
|
|
@ -185,28 +191,123 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import {defaultRequest2,defaultRequest3} from '../../api/index.js' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isShow:false, |
|
|
|
popup_index:'' |
|
|
|
popup_index:'', |
|
|
|
isCoupons:false, |
|
|
|
isPoints:false, |
|
|
|
query:{ |
|
|
|
_action:'cartcheckout', |
|
|
|
is_new:0, |
|
|
|
direct_shopping:0, |
|
|
|
consignee:'' |
|
|
|
}, |
|
|
|
orderDate:{}, |
|
|
|
address:{}, |
|
|
|
goods_list:[], |
|
|
|
shipping_list:[], |
|
|
|
bonus_list:[], |
|
|
|
total:{}, |
|
|
|
order:{} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
// 提交订单 |
|
|
|
submitorder(){ |
|
|
|
let data={ |
|
|
|
_action:'submitorder', |
|
|
|
consignee:this.address, |
|
|
|
postscript:'', |
|
|
|
bonus:this.order.bonus, |
|
|
|
surplus:this.order.surplus, |
|
|
|
shipping_id:this.order.shipping_id, |
|
|
|
directshopping:0, |
|
|
|
} |
|
|
|
defaultRequest3(data).then(res=>{ |
|
|
|
console.info(res) |
|
|
|
if(res.error==0){ |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 变更配送方式 |
|
|
|
cartselectshipping(id){ |
|
|
|
let data={_action:'cartselectshipping',shipping_id:id,consignee:this.address} |
|
|
|
defaultRequest3(data).then(res=>{ |
|
|
|
console.info(res) |
|
|
|
if(res.error==0){ |
|
|
|
this.total=res.data.total |
|
|
|
this.order=res.data.order |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
getList(){ |
|
|
|
defaultRequest2(this.query).then(res=>{ |
|
|
|
console.info(res) |
|
|
|
if(res.error==0){ |
|
|
|
this.orderDate=res.data |
|
|
|
this.address=res.data.consignee |
|
|
|
this.goods_list=res.data.goods_list |
|
|
|
this.shipping_list=res.data.shipping_list |
|
|
|
if(res.data.bonus_list){ |
|
|
|
this.bonus_list=res.data.bonus_list |
|
|
|
} |
|
|
|
this.total=res.data.total |
|
|
|
this.order=res.data.order |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
openMore(i){ |
|
|
|
this.popup_index=i |
|
|
|
if(i==1){ |
|
|
|
if(this.bonus_list.length==0){ |
|
|
|
uni.showToast({ |
|
|
|
icon:'none', |
|
|
|
title:'No coupon available' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
if(this.orderDate.allow_use_bonus==0){ |
|
|
|
uni.showToast({ |
|
|
|
icon:'none', |
|
|
|
title:'Coupon cannot be used for this product' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
}else if(i==3){ |
|
|
|
if(this.orderDate.allow_use_integral==0){ |
|
|
|
uni.showToast({ |
|
|
|
icon:'none', |
|
|
|
title:'Points cannot be used for this product' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
this.isShow=true |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(e) { |
|
|
|
this.query=JSON.parse(e.query) |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
filters:{ |
|
|
|
goodsAttr(e){ |
|
|
|
return e.replace(/\s\n/g,';'); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "@/common/scss/order.scss"; |
|
|
|
<style> |
|
|
|
page{ |
|
|
|
border-top:14.67rpx #F6F5FA solid ; |
|
|
|
padding-bottom: 140rpx; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "@/common/scss/order.scss"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.order_info{ |
|
|
|
@ -264,15 +365,21 @@ |
|
|
|
&:last-child{ |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
image{ |
|
|
|
width: 29.33rpx; |
|
|
|
height: 29.33rpx; |
|
|
|
margin-right: 30.67rpx; |
|
|
|
.method_item_image{ |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
image{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.method_item_right{ |
|
|
|
margin-left: 30.67rpx; |
|
|
|
.item_price{ |
|
|
|
font-size: 28rpx; |
|
|
|
margin-bottom: 14rpx; |
|
|
|
|
|
|
|
.item_price_span{ |
|
|
|
color: #B22234; |
|
|
|
} |
|
|
|
|
