7 changed files with 315 additions and 140 deletions
-
2App.vue
-
6pages.json
-
91pages/order/confirm_atonce.vue
-
209pages/order/confirm_fromorder.vue
-
78pages/order/confirm_order.vue
-
4pages/order/order.vue
-
27pages/order/order_details.vue
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<view v-if="$isRight(goods_details)"> |
|||
<view class="lf-bg-white lf-p-t-30 lf-p-b-30 lf-p-l-32 lf-p-r-32"> |
|||
<view class="lf-row-between"> |
|||
<image :src="goods_details.picture" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 20rpx;"></image> |
|||
<view class="flex-sub padding-left-sm"> |
|||
<view class="bref-box lf-font-32 lf-color-333 lf-line-2" style="height: 88rpx;line-height: 44rpx;"> |
|||
{{goods_details.title}} |
|||
</view> |
|||
<view class="flex lf-m-t-25 align-center text-center"> |
|||
<text class="block lf-color-gray lf-font-24" style="line-height: 40rpx;">数量</text> |
|||
<text class="lf-m-l-10 lf-color-gray lf-font-24">x {{goods_details.num}}</text> |
|||
</view> |
|||
|
|||
<view class="flex align-center text-center lf-m-t-25"> |
|||
<lf-price :price="goods_details.price" /> |
|||
<view class="lf-m-l-20 lf-line-through lf-color-gray"> |
|||
{{goods_details.original_price}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <self-line/> |
|||
<view class="bg-white"> |
|||
<view class="cu-bar padding-lr"> |
|||
<text class="lf-color-555 lf-font-28">优惠</text> |
|||
<view v-if="goods_details.coupon != ''"> |
|||
<text class="lf-color-price lf-font-28 lf-m-l-10" v-for="(item,index) of goods_details.coupon">{{item.tag}}</text> |
|||
</view> |
|||
<view v-else> |
|||
<text class="lf-color-price lf-font-28 lf-m-l-10">暂无优惠</text> |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
<self-line/> |
|||
<view class="bg-white" v-if="enter_type!=1"> |
|||
<view class="cu-bar padding-lr solid-bottom"> |
|||
<text class="lf-color-555 lf-font-28">联系人</text> |
|||
<input type="text" v-model="contact" class="lf-color-999 lf-font-28 lf-text-right" placeholder="请输入联系人" /> |
|||
</view> |
|||
<view class="cu-bar padding-lr"> |
|||
<text class="lf-color-555 lf-font-28">联系方式</text> |
|||
<input type="text" v-model="phone" class="lf-color-999 lf-font-28 lf-text-right" placeholder="请输入联系电话" maxlength="11" /> |
|||
</view> |
|||
</view> |
|||
<self-line/> |
|||
<view class="bg-white" v-if="enter_type!=1"> |
|||
<view class="lf-p-t-30 lf-p-l-32 lf-p-b-36"> |
|||
<view class="lf-font-28 lf-color-555">支付方式</view> |
|||
</view> |
|||
|
|||
<view class="lf-p-r-32 lf-p-l-32"> |
|||
<button class="cu-btn bg-white margin-self" :class="pay_type==0?'border-green':'border'" @tap="payStatus(0)"> |
|||
<text class="lf-iconfont lf-icon-weixin text-green lf-font-44 lf-m-r-23"></text> |
|||
<text class="lf-font-32" :class="pay_type==0?'text-green':'lf-color-333'">微信支付</text> |
|||
<text class="lf-iconfont lf-icon-dui lf-font-44 lf-color-primary" v-if="pay_type==0" style="position: absolute;right: 22rpx;"></text> |
|||
</button> |
|||
</view> |
|||
|
|||
<view class="lf-p-r-32 lf-p-l-32 lf-m-t-30"> |
|||
<button class="cu-btn bg-white margin-self" :class="pay_type==1?'border-green':'border'" @tap="payStatus(1)"> |
|||
<text class="lf-font-32" :class="pay_type==1?'text-green':'lf-color-333'">线下支付</text> |
|||
<text class="lf-iconfont lf-icon-dui lf-font-44 lf-color-primary" v-if="pay_type==1" style="position: absolute;right: 22rpx;"></text> |
|||
</button> |
|||
</view> |
|||
|
|||
<view class="lf-p-r-32 lf-p-l-32 lf-m-t-30" v-if="goods_details.deposit != '0.00'"> |
|||
<button class="cu-btn bg-white margin-self" :class="pay_type==2?'border-green':'border'" @tap="payStatus(2)"> |
|||
<text class="lf-font-32" :class="pay_type==2?'text-green':'lf-color-333'">订金支付</text> |
|||
<text class="lf-iconfont lf-icon-dui lf-font-44 lf-color-primary" v-if="pay_type==2" style="position: absolute;right: 22rpx;"></text> |
|||
</button> |
|||
</view> |
|||
|
|||
<view class="lf-p-r-32 lf-p-l-32 lf-m-t-30"> |
|||
<button class="cu-btn bg-white margin-self" v-if="goods_details.earnest != '0.00'" :class="pay_type==3?'border-green':'border'" @tap="payStatus(3)"> |
|||
<text class="lf-font-32" :class="pay_type==3?'text-green':'lf-color-333'">定金支付</text> |
|||
<text class="lf-iconfont lf-icon-dui lf-font-44 lf-color-primary" v-if="pay_type==3" style="position: absolute;right: 22rpx;"></text> |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- <view class="lf-p-r-32 lf-p-l-32 lf-m-t-30"> |
|||
<button class="cu-btn bg-white margin-self" :class="pay_type==4?'border-green':'border'" @tap="payStatus(4)"> |
|||
<text class="lf-font-32" :class="pay_type==4?'text-green':'lf-color-333'">首款支付</text> |
|||
<text class="lf-iconfont lf-icon-dui lf-font-44 lf-color-primary" v-if="pay_type==4" style="position: absolute;right: 22rpx;"></text> |
|||
</button> |
|||
</view> --> |
|||
|
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="btn-bottom solid-top1"> |
|||
<view class="padding-lr lf-p-t-10 lf-p-b-10 bg-white flex justify-between align-center shadow"> |
|||
<view class="flex align-center"> |
|||
<text class="lf-font-24 lf-font-555">应付款：</text> |
|||
<lf-price :price="goods_details.final_price" /> |
|||
</view> |
|||
|
|||
<button class="btn" @tap="payOnce()"> |
|||
<text class="lf-font-32 text-white" v-if="btn_type == 1">下单付款</text> |
|||
<text class="lf-font-32 text-white" v-else>支付尾款</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
goods_id: 0, |
|||
goods_details: {}, |
|||
contact: '', |
|||
phone: '', |
|||
pay_type: 0, |
|||
btn_type: 1, |
|||
ifPay: true, |
|||
order_id: 0, |
|||
enter_type: 0, |
|||
payState: true, |
|||
pay_order_id: 0 |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
this.goods_id = e.goods_id; |
|||
this.btn_type = e.btn_type; |
|||
this.order_id = e.order_id; |
|||
this.enter_type = e.enter_type; |
|||
if(this.goods_id) { |
|||
this.getGoodsData(this.pay_type); |
|||
} |
|||
if(this.order_id && this.enter_type == 1) { |
|||
this.payOnce() |
|||
}else { |
|||
this.$msg('订单号获取失败!') |
|||
} |
|||
}, |
|||
methods: { |
|||
payStatus(type) { |
|||
if(type == this.pay_type) { |
|||
this.pay_type = type; |
|||
return |
|||
}else { |
|||
this.pay_type = type; |
|||
this.getGoodsData(type); |
|||
} |
|||
}, |
|||
getGoodsData(type){ |
|||
this.$http(this.API.API_CONFIRMDETAILS,{id: this.goods_id,num: 1,pay_type: type}).then(res => { |
|||
this.goods_details = res.data; |
|||
console.log('数据',res) |
|||
}) |
|||
}, |
|||
submit() { |
|||
if(this.order_id && this.enter_type == 1) { |
|||
this.payOnce() |
|||
return |
|||
} |
|||
}, |
|||
payOnce() { |
|||
this.$http(this.API.API_ORDERPAY,{id: this.order_id}).then(res => { |
|||
if(res.data.jump) { |
|||
console.log('立即付款') |
|||
wx.navigateToMiniProgram({ |
|||
appId: res.data.jump_appid, |
|||
path: '/pages/order/confirm_atonce', |
|||
envVersion: 'release', |
|||
extraData: { |
|||
order_id: res.data.id |
|||
}, |
|||
success(res) { |
|||
console.log('---res---') |
|||
console.log(res) |
|||
}, |
|||
fail(err) { |
|||
console.log('---err---') |
|||
console.log(err) |
|||
} |
|||
}) |
|||
} |
|||
}).catch(err => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.btn{ |
|||
margin: 0; |
|||
padding: 0; |
|||
width: 212rpx; |
|||
height: 82rpx; |
|||
background-color: #1998FE; |
|||
color: #FFFFFF; |
|||
line-height: 80rpx; |
|||
font-size: 32rpx; |
|||
border-radius: 41rpx; |
|||
} |
|||
.bref-box { |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue