邓平艺
4 years ago
11 changed files with 677 additions and 40 deletions
-
4components/lf-waterfall-pointgoods/lf-waterfall.vue
-
1components/uni-countdown/uni-countdown.vue
-
4components/uni-steps/uni-steps.vue
-
7pages.json
-
2pages/discover/discover.vue
-
1pages/order/cashier/cashier.vue
-
51pages/order/newdetail/logistics.vue
-
39pages/order/newdetail/newdetail.vue
-
550pages/order/pointconfirm/confirm.vue
-
2pages/point/exchangeRecord/exchangeRecord.vue
-
56pages/shop/goodsdetail.vue
@ -0,0 +1,550 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="确认订单" :showIcon="true"></lf-nav> |
|||
<block v-if="$isRight(order_detail)"> |
|||
<view class="card head"> |
|||
<view class="lf-font-32 lf-color-222">选择收货方式</view> |
|||
<view class="capsule"> |
|||
<view class="item" :class="{'capsule-active': mode == 0}" @click="mode = 0">邮寄</view> |
|||
<view class="item" :class="{'capsule-active': mode == 1}" @click="mode = 1">自提</view> |
|||
</view> |
|||
</view> |
|||
<view class="card address" v-if="mode == 0"> |
|||
<view @click="$url('/pages/address/list/list?is_select=1')"> |
|||
<text class="lf-font-28 lf-color-primary lf-m-r-10">更换收获地址</text> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-color-777"></text> |
|||
</view> |
|||
<view v-if="address"> |
|||
<view class="lf-m-t-20"> |
|||
<text class="lf-font-28 lf-color-222 lf-font-bold">{{ address.accept_name }}</text> |
|||
<text class="lf-font-28 lf-color-777 lf-m-l-20">{{ address.mobile }}</text> |
|||
</view> |
|||
<view class="lf-font-28 lf-color-333 lf-m-t-10"> |
|||
<text>{{ address.address_name }}{{ address.address }}</text> |
|||
</view> |
|||
</view> |
|||
<view v-else class="lf-font-28 lf-color-777"> |
|||
暂无收货地址,请前往添加 |
|||
</view> |
|||
</view> |
|||
<view class="card address" v-else> |
|||
<view @click="$url('/pages/address/list/list?is_select=1')"> |
|||
<text class="lf-font-28 lf-color-primary lf-m-r-10">店铺地址</text> |
|||
</view> |
|||
<view v-if="address"> |
|||
<view class="lf-m-t-20"> |
|||
<text class="lf-font-28 lf-color-222 lf-font-bold">{{ order_detail.brand.name }}</text> |
|||
<text class="lf-font-28 lf-color-777 lf-m-l-20">{{ order_detail.brand.tel }}</text> |
|||
</view> |
|||
<view class="lf-font-28 lf-color-333 lf-m-t-10"> |
|||
<text>{{ order_detail.brand.floor }}</text> |
|||
</view> |
|||
</view> |
|||
<view v-else class="lf-font-28 lf-color-777"> |
|||
暂无收货地址,请前往添加 |
|||
</view> |
|||
</view> |
|||
<view class="card goods"> |
|||
<view @click="$url('/pages/shop/shopdetail?id='+ order_detail.brand.id)"> |
|||
<text class="lf-iconfont icon-Group- lf-font-30"></text> |
|||
<text class="shop-name">{{ order_detail.brand.name }}</text> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24"></text> |
|||
</view> |
|||
<view class="lf-flex lf-m-t-20" v-for="(item, index) in order_detail.order.items" :key="index"> |
|||
<image class="goods-img" :src="item.item_meta.image"></image> |
|||
<view class="info"> |
|||
<view class="lf-font-26 lf-color-333 lf-line-1">{{ item.item_name }}</view> |
|||
<view class="lf-font-24 lf-color-777">{{ item.item_meta.specs_text }}</view> |
|||
<view class="lf-row-between" style="line-height: 1;"> |
|||
<text class="price"><text v-if="goods_type==1">¥</text>{{ item.redeem_point }}<text class="lf-font-24" v-if="goods_type==0">积分</text></text> |
|||
<text class="lf-font-28 lf-color-777">x {{ item.quantity }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="tips">支付成功后15天内柜台提货</view> --> |
|||
<view class="lf-flex lf-m-t-20"> |
|||
<view class="lf-font-28 lf-color-777">留言</view> |
|||
<input v-model="value" class="input" placeholder="有什么要求，请备注留言" /> |
|||
</view> |
|||
</view> |
|||
<view class="card lf-m-t-20"> |
|||
<view class="lf-row-between lf-m-t-20"> |
|||
<view class="lf-font-28 lf-color-777">商品金额</view> |
|||
<view class="lf-font-26 lf-color-222"><text v-if="goods_type==1">¥</text>{{ order_detail.order.redeem_point }}<text v-if="goods_type==0">积分</text></view> |
|||
</view> |
|||
<view class="lf-row-between lf-m-t-20" v-if="mode == 0"> |
|||
<view class="lf-font-28 lf-color-777">运费</view> |
|||
<view class="lf-font-26" style="color: #F63434;">+¥{{ order_detail.order.payable_freight_yuan }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="spread-out"></view> |
|||
<view class="fixed-bottom" v-if="$isRight(order_detail.order)"> |
|||
<view class="fixed-content"> |
|||
<view class="lf-font-24 lf-color-777">共{{ order_detail.order.count }}件</view> |
|||
<view class="lf-flex"> |
|||
<!-- <view class="lf-font-32 lf-color-primary" style="max-width: 400rpx;">合计 ¥{{ order_detail.order.total_yuan }}</view> --> |
|||
<view class="lf-font-32 lf-color-primary" style="max-width: 400rpx;"> |
|||
<text class="lf-m-r-10">运费: ￥{{order_detail.order.payable_freight_yuan}}</text> |
|||
<text>积分: {{order_detail.order.redeem_point}}积分</text> |
|||
</view> |
|||
<view class="confirm-btn" hover-class="lf-opacity" @click="confirm">立即兑换</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 选择优惠券弹出层 --> |
|||
<u-popup v-model="show_coupon" mode="bottom" :round="true" borderRadius="20"> |
|||
<view class="popup-content"> |
|||
<view class="lf-row-between" v-for="(item, index) in order_detail.coupons" :key="index"> |
|||
<radio-group @change="couponChange"> |
|||
<radio :value="index" :checked="coupon_index == index"></radio> |
|||
</radio-group> |
|||
<view class="coupon-card lf-m-b-30" :class="{'invalid-bg': item.ifpast == true}"> |
|||
<view class="coupon-circle-top"> |
|||
<view class="coupon-circle1"></view> |
|||
</view> |
|||
<view class="coupon-circle-bottom"> |
|||
<view class="coupon-circle1"></view> |
|||
</view> |
|||
<view class="coupon-radius"> |
|||
<view class="coupon-left"> |
|||
<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'cash'"> |
|||
<text v-if="goods_type==1">￥</text> |
|||
<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text> |
|||
<text v-if="goods_type==0">积分</text> |
|||
</view> |
|||
<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'discount'"> |
|||
<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text> |
|||
<text>%</text> |
|||
</view> |
|||
<view class="coupon-tag" v-if="item.used_at != ''"> |
|||
已使用 |
|||
</view> |
|||
<view class="coupon-tag" v-if="item.ifpast"> |
|||
已过期 |
|||
</view> |
|||
<view class="coupon-tag" v-if="!item.ifpast && item.used_at == ''"> |
|||
待使用 |
|||
</view> |
|||
</view> |
|||
<view class="coupon-right"> |
|||
<view class="lf-font-32 lf-font-bold lf-color-white">{{item.discount.title}}</view> |
|||
<view class="lf-font-24 lf-color-white">有效期{{item.discount.starts_at}}~{{item.discount.ends_at}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 不使用优惠券 --> |
|||
<view class="lf-flex"> |
|||
<radio-group @change="couponChange"> |
|||
<radio value="null" :checked="coupon_index == null"></radio> |
|||
</radio-group> |
|||
<view>不使用优惠券</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Bigc from '@/common/js/bigc.js'; |
|||
export default { |
|||
data(){ |
|||
return { |
|||
mode: 0, // 0邮寄，1自提 |
|||
value: '', // 备注 |
|||
token: '', |
|||
address: {}, |
|||
address_id: null, |
|||
order_detail: {coupons: []}, |
|||
show_coupon: false, |
|||
coupon_index: null, |
|||
goods_type: 0, |
|||
params: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
showCouponTitle(){ |
|||
if(this.coupon_index != null){ |
|||
return this.order_detail.coupons[this.coupon_index].discount.title; |
|||
}else{ |
|||
if(this.order_detail.coupons.length){ |
|||
return '不使用优惠券'; |
|||
}else{ |
|||
return '暂无可用优惠券'; |
|||
} |
|||
} |
|||
}, |
|||
totalPrice(){ |
|||
let order = this.order_detail.order; |
|||
if(!this.$isRight(order)){ |
|||
return 0; |
|||
} |
|||
if(this.mode){ |
|||
return order.total_yuan; |
|||
}else{ |
|||
return new Bigc(order.total_yuan).plus(order.payable_freight_yuan); |
|||
} |
|||
} |
|||
}, |
|||
onLoad(e){ |
|||
this.token = this.$cookieStorage.get('user_token'); |
|||
this.goods_type = e.goods_type; |
|||
if(e.product_id) { |
|||
this.params = { |
|||
quantity: e.quantity, |
|||
product_id: e.product_id |
|||
} |
|||
}else { |
|||
this.params = { |
|||
quantity: e.quantity, |
|||
goods_id: e.goods_id |
|||
} |
|||
} |
|||
this.getPointDetails(); |
|||
}, |
|||
onUnload(){ |
|||
this.$cookieStorage.clear('order_confirm'); |
|||
}, |
|||
onShow(){ |
|||
if(this.address_id){ |
|||
this.getSelectAddress(); |
|||
} |
|||
}, |
|||
methods: { |
|||
getPointDetails() { |
|||
uni.showLoading({ |
|||
title: '正在生成订单' |
|||
}) |
|||
this.$http.post({ |
|||
api: 'api/shopping/order/checkout/point', |
|||
data: this.params, |
|||
header: { |
|||
Authorization: this.token |
|||
} |
|||
}).then(res => { |
|||
if(res.data.code == true){ |
|||
let detail = res.data.data; |
|||
this.order_detail = detail; |
|||
this.address = res.data.data.address; |
|||
uni.hideLoading() |
|||
}else{ |
|||
this.$msg('订单提交失败!', {icon: 'error'}) |
|||
} |
|||
}).catch(err => uni.hideLoading()) |
|||
}, |
|||
// 获取默认地址 |
|||
getDefaultAddress(){ |
|||
this.$http.get({ |
|||
api: 'api/address/default', |
|||
header: { |
|||
Authorization: this.token |
|||
} |
|||
}).then(res => { |
|||
this.address = res.data.data || {}; |
|||
}) |
|||
}, |
|||
// 获取用户自己选择的地址 |
|||
getSelectAddress(){ |
|||
this.$http.get({ |
|||
api: 'api/address/'+ this.address_id, |
|||
header: { |
|||
Authorization: this.token |
|||
} |
|||
}).then(res => { |
|||
this.address = res.data.data || {}; |
|||
}) |
|||
}, |
|||
// 打开选择优惠券 |
|||
openCheckCoupon(){ |
|||
if(this.order_detail.coupons.length){ |
|||
this.show_coupon = true; |
|||
}else{ |
|||
this.$msg('您没有可用的优惠券哦'); |
|||
} |
|||
}, |
|||
// 提交订单 |
|||
confirm(){ |
|||
console.log(this.address) |
|||
if(this.address == null) { |
|||
this.$msg('请先添加收货地址!'); |
|||
return |
|||
} |
|||
this.$http.post({ |
|||
api: 'api/shopping/order/confirm/point', |
|||
data: { |
|||
order_no: this.order_detail.order.order_no, |
|||
// discount_id: 0, // 优惠券id? TODO |
|||
pick_self: this.mode, // 0 配送，1自提 |
|||
address_id: this.address.id, |
|||
note: this.value |
|||
}, |
|||
header: { |
|||
Authorization: this.token |
|||
} |
|||
}).then(res => { |
|||
if(res.data.code == 200 || res.data.code == true){ |
|||
console.log(res.data.data) |
|||
if(res.data.data.order.payable_freight_yuan > 0) { |
|||
let order = res.data.data.order; |
|||
let url = '/pages/order/cashier/cashier'; |
|||
url += '?amount='+ order.payable_freight_yuan; |
|||
url += '&order_no='+ order.order_no; |
|||
this.$url(url, {type: 'redirect'}); |
|||
}else { |
|||
this.$msg('兑换成功') |
|||
setTimeout(() => { |
|||
this.$toBack() |
|||
},1000) |
|||
} |
|||
}else{ |
|||
this.$msg(res.data.message); |
|||
} |
|||
}) |
|||
}, |
|||
// 选择优惠券 |
|||
couponChange(event){ |
|||
if(event.detail.value == 'null'){ |
|||
this.coupon_index = null; |
|||
}else{ |
|||
this.coupon_index = Number(event.detail.value); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
background-color: #F8F8F8; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped="scoped"> |
|||
.card{ |
|||
height: max-content; |
|||
width: 750rpx; |
|||
padding: 30rpx 32rpx; |
|||
background-color: #FFFFFF; |
|||
} |
|||
.head{ |
|||
.capsule{ |
|||
width: 614rpx; |
|||
height: 100rpx; |
|||
margin: 30rpx auto 0; |
|||
border-radius: 100px; |
|||
border: 2rpx solid #15716E; |
|||
display: flex; |
|||
overflow: hidden; |
|||
.item{ |
|||
width: 50%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #15716E; |
|||
} |
|||
.capsule-active{ |
|||
background-color: #15716E; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
.address{ |
|||
margin-top: 20rpx; |
|||
} |
|||
.goods{ |
|||
margin-top: 20rpx; |
|||
.shop-name{ |
|||
font-size: 28rpx; |
|||
color: #222222; |
|||
font-weight: bold; |
|||
margin: 0 15rpx; |
|||
} |
|||
.goods-img{ |
|||
width: 130rpx; |
|||
height: 130rpx; |
|||
border-radius: 4rpx; |
|||
margin-right: 15rpx; |
|||
background-color: #EEEEEE; |
|||
} |
|||
.info{ |
|||
width: 540rpx; |
|||
height: 130rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
.price{ |
|||
font-size: 32rpx; |
|||
color: #F63434; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.tips{ |
|||
font-size: 22rpx; |
|||
margin-top: 30rpx; |
|||
color: #15716E; |
|||
} |
|||
.input{ |
|||
margin-left: 30rpx; |
|||
font-size: 28rpx; |
|||
width: 596rpx; |
|||
} |
|||
} |
|||
|
|||
.spread-out{ |
|||
height: 138rpx; |
|||
padding-bottom: constant(safe-area-inset-bottom); |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
box-sizing: content-box; |
|||
} |
|||
.fixed-bottom{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: max-content; |
|||
background-color: #FFFFFF; |
|||
border-top: 1rpx solid #e5e5e5; |
|||
padding-bottom: constant(safe-area-inset-bottom); |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
.fixed-content{ |
|||
width: 100%; |
|||
height: 118rpx; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.confirm-btn{ |
|||
width: 167rpx; |
|||
height: 80rpx; |
|||
background: #15716E; |
|||
border-radius: 40rpx; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-left: 30rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup-content{ |
|||
width: 750rpx; |
|||
height: max-content; |
|||
max-height: 70vh; |
|||
overflow-y: scroll; |
|||
padding: 40rpx 32rpx; |
|||
background: #FFFFFF; |
|||
} |
|||
.coupon-circle1 { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-color: white; |
|||
border-radius: 50%; |
|||
} |
|||
.coupon-circle-top { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 50%; |
|||
// background-color: red; |
|||
position: absolute; |
|||
border: 1px dashed #ccc; |
|||
left: 190rpx; |
|||
top: -20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: center; |
|||
justify-content: center; |
|||
} |
|||
.coupon-circle-bottom { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 50%; |
|||
// background-color: red; |
|||
position: absolute; |
|||
border: 1px dashed #ccc; |
|||
left: 190rpx; |
|||
bottom: -20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: center; |
|||
justify-content: center; |
|||
} |
|||
.coupon-right { |
|||
text-align: left; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-left: 90rpx; |
|||
} |
|||
.coupon-left { |
|||
margin-left: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.coupon-tag { |
|||
width: max-content; |
|||
margin-top: 10rpx; |
|||
padding: 0 24rpx; |
|||
height: 43rpx; |
|||
border-radius: 22rpx; |
|||
border: 2rpx solid #FFFFFF; |
|||
font-size: 24rpx; |
|||
color: white; |
|||
} |
|||
.coupon-wrap { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 30rpx; |
|||
flex-direction: column; |
|||
align-content: center; |
|||
align-items: center; |
|||
} |
|||
.coupon-card { |
|||
overflow: hidden; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
// width: 674rpx; |
|||
width: 626rpx; |
|||
height: 171rpx; |
|||
background: #15716E; |
|||
border-radius: 20rpx; |
|||
} |
|||
.invalid-bg{ |
|||
background-color: #999999; |
|||
} |
|||
.coupon-radius { |
|||
// width: 664rpx; |
|||
width: 616rpx; |
|||
display: flex; |
|||
height: 161rpx; |
|||
border: 1rpx dashed #ccc; |
|||
// background: #15716E; |
|||
border-radius: 20rpx; |
|||
} |
|||
/deep/.u-scroll-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
|||
background-color: #15716E!important; |
|||
width: 80rpx!important; |
|||
position: absolute; |
|||
height: 10rpx; |
|||
left: 0; |
|||
border-radius: 8rpx 8rpx 0px 0px!important; |
|||
bottom: -12rpx; |
|||
} |
|||
/deep/ .u-tab-item { |
|||
font-size: 28rpx!important; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue