7 changed files with 315 additions and 140 deletions
-
2App.vue
-
6pages.json
-
117pages/order/confirm_atonce.vue
-
209pages/order/confirm_fromorder.vue
-
84pages/order/confirm_order.vue
-
4pages/order/order.vue
-
33pages/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