-
48src/pages.json
-
74src/subpackage/mall/components/submit_bar.vue
-
29src/subpackage/mall/js/api.js
-
1623src/subpackage/mall/js/wxqrcode.js
-
1src/subpackage/mall/pages/goods_info.vue
-
182src/subpackage/mall/pages/modules/order/details_goods.vue
-
369src/subpackage/mall/pages/modules/order/order_list_item.vue
-
158src/subpackage/mall/pages/modules/order/product_info.vue
-
159src/subpackage/mall/pages/modules/order/upload_image.vue
-
101src/subpackage/mall/pages/modules/pay/product_item.vue
-
180src/subpackage/mall/pages/modules/pay/self_pickup_addr.vue
-
214src/subpackage/mall/pages/order/comment_edit.vue
-
128src/subpackage/mall/pages/order/comment_list.vue
-
938src/subpackage/mall/pages/order/order_details.vue
-
352src/subpackage/mall/pages/order/order_list.vue
-
423src/subpackage/mall/pages/order/request_write.vue
-
423src/subpackage/mall/pages/pay/order_pay.vue
-
841src/subpackage/mall/pages/pay/pay_confirm.vue
-
57src/subpackage/mall/pages/pay/pay_product.vue
-
BINsrc/subpackage/mall/static/images/close_333.png
-
BINsrc/subpackage/mall/static/images/line.png
-
BINsrc/subpackage/mall/static/images/no_venue_order.png
-
BINsrc/subpackage/mall/static/images/order/invalid.png
-
BINsrc/subpackage/mall/static/images/order/status_0.png
-
BINsrc/subpackage/mall/static/images/order/status_1.png
-
BINsrc/subpackage/mall/static/images/order/status_2.png
-
BINsrc/subpackage/mall/static/images/order/status_3.png
-
BINsrc/subpackage/mall/static/images/order/status_4.png
-
BINsrc/subpackage/mall/static/images/order/status_5.png
-
BINsrc/subpackage/mall/static/images/position.png
-
BINsrc/subpackage/mall/static/images/road_sign.png
-
BINsrc/subpackage/mall/static/images/star_empty.png
-
BINsrc/subpackage/mall/static/images/star_fill.png
-
BINsrc/subpackage/mall/static/images/vip_pay.png
-
BINsrc/subpackage/mall/static/images/wx_pay.png
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<view class="submit-bar"> |
|||
<view class="sb-bar"> |
|||
<view class="sb-view"><text class="sv-text">¥</text>{{price || 0}}</view> |
|||
<view class="sb-view" hover-class="hover-active" @click="btnClick">{{btn_txt}}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
price: { |
|||
default: 0, |
|||
}, |
|||
btn_txt: { |
|||
default: '立即支付', |
|||
type: String |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
} |
|||
}, |
|||
methods: { |
|||
btnClick(){ |
|||
this.$emit('btn_evemt'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/*总高度为208upx*/ |
|||
.submit-bar{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
z-index: 2; |
|||
.sb-bar{ |
|||
@include isPd(10upx); |
|||
padding-top: 10upx; |
|||
padding-left: 32upx; |
|||
padding-right: 24upx; |
|||
background-color: #fff; |
|||
@include ctf(space-between); |
|||
.sb-view{ |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
font-size: 48upx; |
|||
line-height: 52upx; |
|||
color: #ff873d; |
|||
@include tHide(1); |
|||
.sv-text{ |
|||
font-size: 38upx; |
|||
} |
|||
} |
|||
&+.sb-view{ |
|||
flex-shrink: 0; |
|||
margin-left: 20upx; |
|||
width: 290upx; |
|||
height: 88upx; |
|||
line-height: 88upx; |
|||
text-align: center; |
|||
border-radius: 44upx; |
|||
font-size: 32upx; |
|||
color: #fff; |
|||
background-color: #FF873D; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
1623
src/subpackage/mall/js/wxqrcode.js
File diff suppressed because it is too large
View File
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<!-- 订单详情的商品部分 --> |
|||
<view class="details-goods"> |
|||
<image mode="aspectFill" :src="goodsInfo.product_imgs || ''"></image> |
|||
<view class="dg-section"> |
|||
<view class="ds-name"> |
|||
<view>{{goodsInfo.product_name || '-'}}</view> |
|||
<view> |
|||
<text>¥</text> |
|||
<!--20220225 因为拼团的单价和对应的物品价格对不上,所以现在直接用总价除以数量 --> |
|||
<text>{{ (goodsInfo.product_price/goodsInfo.product_nums).toFixed(2) || 0}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="ds-line"> |
|||
<view>{{specText}}</view> |
|||
<view>×{{goodsInfo.product_nums || 0}}</view> |
|||
</view> |
|||
<view class="ds-price"> |
|||
<text>实付:¥</text> |
|||
<!--20220225 实付金额=总价-优惠券金额-积分抵扣金额-会员卡抵扣金额(拼团时包含团长折扣金额) --> |
|||
<text>{{(goodsInfo.product_price-goodsInfo.product_price_pay-goodsInfo.product_integral_price_pay-goodsInfo.product_discount_price_pay).toFixed(2) || 0}}</text> |
|||
</view> |
|||
<view class="ds-btn" v-if="isRefund"> |
|||
<view hover-class="hover-active" @click="refundChange">申请退款</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props:{ |
|||
goodsInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
orderData: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
computed: { |
|||
specText(){ |
|||
let { goodsInfo } = this |
|||
if(goodsInfo.product_spec_multi == 1){ |
|||
let specStr = (goodsInfo.product_spec_multi_info.spec_info).join(";") |
|||
return specStr; |
|||
} |
|||
return ''; |
|||
}, |
|||
|
|||
isRefund(){ |
|||
let status = this.orderData.order_info.status |
|||
if(status == 2 || status == 3 || status == 4) return true; |
|||
else return false; |
|||
}, |
|||
}, |
|||
methods: { |
|||
refundChange(){ |
|||
let { orderData, goodsInfo } = this |
|||
if(orderData.order_info.status == 4 && orderData.refund_btn_show == 0){ |
|||
this.$emit('refundChange',{refund_btn_show: false,refund_day: orderData.refund_day }); |
|||
return; |
|||
} |
|||
if(orderData.order_info.status == 2 || orderData.order_info.status == 3 || (orderData.order_info.status == 4 && orderData.refund_btn_show == 1)){ |
|||
let _arr = [] |
|||
_arr.push({ |
|||
product_cart_id: goodsInfo.product_cart_id, |
|||
product_id: goodsInfo.product_id, |
|||
number: goodsInfo.product_nums, |
|||
}) |
|||
let _list = [] |
|||
_list.push(this.goodsInfo) |
|||
let _query = { |
|||
feedbackDetail: _arr, |
|||
order_no: orderData.order_info.order_no, |
|||
goods_list: _list, |
|||
isBatch: false, |
|||
} |
|||
this.$emit('refundChange',{refund_btn_show: true, query: _query}); |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.details-goods{ |
|||
width: 100%; |
|||
margin-top: 30rpx; |
|||
padding-bottom: 30rpx; |
|||
border-bottom: 2rpx solid #F2F2F7; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 20rpx; |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.dg-section{ |
|||
flex-grow: 1; |
|||
.ds-name{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
>view{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
@include tHide(2); |
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
margin-left: 62rpx; |
|||
line-height: 34rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 24rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ds-line{ |
|||
margin: 12rpx 0 14rpx; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
color: #9A9A9D; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
font-size: 24rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
font-size: 28rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.ds-price{ |
|||
>text{ |
|||
color: #F6843E; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
.ds-btn{ |
|||
margin-top: 14rpx; |
|||
@include ctf(flex-end); |
|||
>view{ |
|||
padding: 16rpx 0; |
|||
width: 192rpx; |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 36rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
@ -0,0 +1,369 @@ |
|||
<template> |
|||
<view class="ol-list" @click="toDetailChange"> |
|||
<view class="ol-line"> |
|||
<view class="ol-address"> |
|||
<image mode="aspectFit" :src="orderInfo.image || ''"></image> |
|||
<view class="oa-view"> |
|||
<view>{{orderInfo.name || '-'}}</view> |
|||
<view> |
|||
<text>{{orderInfo.create_at || '-'}}</text> |
|||
<text>下单</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ol-status">{{orderInfo.status_text || '-'}}</view> |
|||
</view> |
|||
<product-info :goodsInfo="orderInfo.goods" :goodsNums="orderInfo.goods_nums"></product-info> |
|||
<view class="ol-price"> |
|||
<text>合计支付:</text> |
|||
<text>¥</text> |
|||
<text>{{orderInfo.pay_amount || 0}}</text> |
|||
</view> |
|||
<view class="ol-tips" v-if="orderInfo.status == 0"> |
|||
<text>订单将于</text> |
|||
<text>{{orderInfo.close_time ||'分钟'}}</text> |
|||
<text>后自动关闭</text> |
|||
</view> |
|||
<view class="ol-btn"> |
|||
<view |
|||
class="ob1" |
|||
hover-class="hover-active" |
|||
@click.stop="btnChange(1, orderInfo.status)" |
|||
>{{setbtnText(1,orderInfo.status)}}</view> |
|||
<view |
|||
class="ob2" |
|||
hover-class="hover-active" |
|||
@click.stop="btnChange(2, orderInfo.status)" |
|||
v-if="isBtnStyle2" |
|||
>再来一单</view> |
|||
<view |
|||
class="ob3" |
|||
hover-class="hover-active" |
|||
@click.stop="btnChange(3, orderInfo.status)" |
|||
v-if="isBtnStyle3" |
|||
>{{setbtnText(3,orderInfo.status)}}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import productInfo from './product_info.vue'; |
|||
import { MALL_API } from "../../../js/api"; |
|||
import server from "../../../js/server"; |
|||
export default { |
|||
props:{ |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
brandId: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
components: { |
|||
'product-info': productInfo, |
|||
}, |
|||
computed: { |
|||
// status 0待付款 1待发货 2待收货 3待评价 4交易完成 5订单关闭 6退款中 7退款完成 8退款失败 |
|||
isBtnStyle2(){ |
|||
let { orderInfo } = this |
|||
if(orderInfo.status != 0 )return true; |
|||
else return false; |
|||
}, |
|||
isBtnStyle3(){ |
|||
let { orderInfo } = this |
|||
if(orderInfo.status == 0 || orderInfo.status == 2 ||orderInfo.status == 3)return true; |
|||
else return false; |
|||
}, |
|||
// 获取全部商品id |
|||
setProIds(){ |
|||
let data = this.orderInfo.goods |
|||
let arr = [] |
|||
for(var i in data){ |
|||
arr.push(data[i].product_id) |
|||
} |
|||
return arr; |
|||
}, |
|||
}, |
|||
methods: { |
|||
setbtnText(type, status){ |
|||
// status 0待付款 1待发货 2待收货 3待评价 4交易完成 5订单关闭 6退款中 7退款完成 8退款失败 |
|||
if(type == 1){ |
|||
let arr = ['取消订单','晒单分享','晒单分享','晒单分享','删除订单','删除订单','退款详情','删除订单','删除订单'] |
|||
return arr[status] || '-'; |
|||
} |
|||
if(type == 3){ |
|||
let arr = ['继续支付','','确认收货','评价','','','','',''] |
|||
return arr[status] || '-'; |
|||
} |
|||
|
|||
}, |
|||
btnChange(type, status){ |
|||
let { orderInfo, brandId } = this; |
|||
if(type == 1){ |
|||
// 0取消订单 1,2,3晒单分享 4,5,7,8删除订单 6退款详情 |
|||
if(status == 0) return this.determineOperate(0); |
|||
if(status == 1 || status == 2 || status == 3){ |
|||
let _query = {} |
|||
_query['goodsList'] = this.orderInfo.goods || [] |
|||
return util.routeTo(`/subpackage/mall/pages/order/order_share/order_share?query=${util.jsonStr(_query)}`,'nT'); |
|||
} |
|||
if(status == 4 || status == 5 || status == 7 || status == 8) return this.determineOperate(1); |
|||
if(status == 6 ) return console.log("退款详情"); |
|||
} |
|||
// 再来一单 |
|||
if(type == 2) return this.getOrderAgain({ |
|||
brand_id: brandId ?? '', |
|||
order_no: orderInfo?.order_no ?? '' |
|||
}); |
|||
if(type == 3){ |
|||
// 0继续支付 2确认收货 3评价 |
|||
if(status == 0) return this.continuePay(); |
|||
if(status == 2) return this.determineOperate(2); |
|||
if(status == 3){ |
|||
let _query = {} |
|||
_query['goodsList'] = this.orderInfo.goods || [] |
|||
_query['order_no'] = this.orderInfo.order_no |
|||
return util.routeTo(`/subpackage/mall/pages/order/comment_list/comment_list?query=${util.jsonStr(_query)}`,'nT'); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
toDetailChange(){ |
|||
let { orderInfo, brandId } = this; |
|||
let _qryStr = `order_no=${ orderInfo.order_no }&brand_id=${ brandId }` |
|||
util.routeTo(`/subpackage/mall/pages/order/order_details?${_qryStr}`,'nT') |
|||
}, |
|||
|
|||
determineOperate: util.debounce(function(type){ |
|||
let { orderInfo, brandId } = this; |
|||
// type 0取消订单 1删除订单 2确认收货 |
|||
util.showModal({ |
|||
title: '提示', |
|||
content: type == 0?'确定取消该订单吗?':type == 1?'确定删除该订单吗?':'确认收货吗', |
|||
showCancel: true, |
|||
success: modalRes=>{ |
|||
if(modalRes.confirm){ |
|||
if(type == 0) this.getOrderCancel({ |
|||
brand_id: brandId ?? '', |
|||
order_no: orderInfo?.order_no ?? '' |
|||
}); |
|||
if(type == 1) this.getOrderDel({ |
|||
brand_id: brandId ?? '', |
|||
order_no: orderInfo?.order_no ?? '' |
|||
}); |
|||
if(type == 2) this.getOrderUserTake({ |
|||
brand_id: brandId ?? '', |
|||
order_no: orderInfo?.order_no ?? '' |
|||
}); |
|||
this.$nextTick(_ => { |
|||
this.$emit('defineChange', true) |
|||
}); |
|||
} |
|||
} |
|||
}) |
|||
}, 300, 300), |
|||
// 继续支付 |
|||
continuePay(){ |
|||
let { orderInfo } = this |
|||
// let _query = {} |
|||
// _query['goodsList'] = this.orderInfo.goods |
|||
// _query['pay_amount'] = this.orderInfo.pay_amount |
|||
// _query['order_no'] = this.orderInfo.order_no |
|||
// util.routeTo(`../../pay/pay_order/pay_order?query=${util.jsonStr(_query)}`,'nT') |
|||
|
|||
let _query = {} |
|||
_query['price'] = orderInfo.pay_amount |
|||
_query['order_no'] = orderInfo.order_no |
|||
_query['pay_type'] = 4 //商城支付类型 |
|||
util.routeTo(`/subpackage/mall/pages/pay/order_pay?query=${util.jsonStr(_query)}`,'rT') |
|||
}, |
|||
|
|||
// 订单-删除 |
|||
getOrderDel({ brand_id, order_no }){ |
|||
// util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderDel, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
// util.hideLoad(); |
|||
console.log('订单删除: ', res); |
|||
util.showNone("操作成功") |
|||
}); |
|||
}, |
|||
// 订单-取消 |
|||
getOrderCancel({ brand_id, order_no }){ |
|||
// util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderCancel, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
// util.hideLoad(); |
|||
console.log('订单取消: ', res); |
|||
util.showNone("操作成功") |
|||
}); |
|||
}, |
|||
|
|||
// 再来一单 |
|||
getOrderAgain({ brand_id, order_no }){ |
|||
server.get({ |
|||
url: MALL_API.goodsOrderAgain, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
console.log('再来一单: ', res); |
|||
let { orderInfo } = this; |
|||
let _goods = orderInfo?.goods ?? []; |
|||
let _query = {} |
|||
_query['goodsList'] = _goods; |
|||
_query['price_amount'] = orderInfo.amount |
|||
_query['product_ids'] = _goods.map(item=>item.id); |
|||
_query['go_buy'] = 1 |
|||
util.routeTo(`/subpackage/mall/pages/pay/pay_confirm?query=${util.jsonStr(_query)}&brand_id=${brand_id}`,'nT') |
|||
|
|||
}); |
|||
}, |
|||
// 确认收货 |
|||
getOrderUserTake({ brand_id, order_no }){ |
|||
// util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderUserTake, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
// util.hideLoad(); |
|||
console.log('确认收货: ', res); |
|||
util.showNone("操作成功") |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.ol-list{ |
|||
margin: 0 24rpx 24rpx; |
|||
padding: 22rpx 20rpx 30rpx; |
|||
background-color: #fff; |
|||
border-radius: 10rpx; |
|||
.ol-line{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
padding-bottom: 24rpx; |
|||
margin-bottom: 32rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
.ol-address{ |
|||
flex-grow: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 14rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.oa-view{ |
|||
flex-grow: 1; |
|||
>view{ |
|||
&:first-child{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
@include tHide(1); |
|||
} |
|||
&:nth-child(2){ |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
margin-top: 12rpx; |
|||
>text{ |
|||
&:first-child{ |
|||
} |
|||
&:nth-child(2){ |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ol-status{ |
|||
flex-shrink: 0; |
|||
color: #009874; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.ol-price{ |
|||
margin: 36rpx 0 10rpx; |
|||
flex-grow: 1; |
|||
text-align: right; |
|||
>text{ |
|||
line-height: 40rpx; |
|||
color: #333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 24rpx; |
|||
} |
|||
&:nth-child(3){ |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
.ol-tips{ |
|||
flex-grow: 1; |
|||
padding-bottom: 4rpx; |
|||
@include ctf(flex-end); |
|||
>text{ |
|||
font-size: 24rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #E60213; |
|||
} |
|||
&:nth-child(3){ |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
} |
|||
.ol-btn{ |
|||
flex-grow: 1; |
|||
margin-top: 26rpx; |
|||
@include ctf(flex-end); |
|||
>view{ |
|||
width: 192rpx; |
|||
padding: 16rpx 0; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
border-radius: 36rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
.ob1{ |
|||
color: #9A9A9D; |
|||
border: 2rpx solid #D8D8D8; |
|||
} |
|||
.ob2{ |
|||
color: #009874; |
|||
border: 2rpx solid #009874; |
|||
} |
|||
.ob3{ |
|||
color: #fff; |
|||
padding: 18rpx 0; |
|||
background: linear-gradient(90deg, #44D7B6 0%, #009874 100%); |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,158 @@ |
|||
<template> |
|||
<!-- 订单列表和售后列表的商品部分 --> |
|||
<view class="product-info"> |
|||
<view > |
|||
<!-- 2件商品以上 --> |
|||
<block v-if="goodsInfo.length > 1"> |
|||
<view class="pi-list" v-for="(e, i) in goodsInfo" :key="i" v-if="i < 3"> |
|||
<view class="pl-box"> |
|||
<image mode="aspectFill" :src="e.product_imgs || '-'"></image> |
|||
<view v-if="e.product_refund != 0 && !isRefund">{{setStatus(e.product_refund)}}</view> |
|||
</view> |
|||
<view class="pl-txt">{{e.product_name || '-'}}</view> |
|||
</view> |
|||
</block> |
|||
<!-- 1件商品 --> |
|||
<view class="pi-item" v-for="(e, i) in goodsInfo" :key="i" v-if="goodsInfo.length == 1"> |
|||
<view class="pi-box"> |
|||
<image mode="aspectFill" :src="e.product_imgs || '-'"></image> |
|||
<view v-if="e.product_refund != 0 && !isRefund">{{setStatus(e.product_refund)}}</view> |
|||
</view> |
|||
<view class="pi-txt">{{e.product_name || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<text>共{{goodsNums || 0}}件</text> |
|||
<image src="/subpackage/mall/static/images/arrow_9ad.png"></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props:{ |
|||
goodsInfo: { //商品信息 |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
goodsNums: { // 商品数量 |
|||
type: Number, |
|||
default: 0, |
|||
}, |
|||
isRefund: { |
|||
type: Boolean, |
|||
default: false, |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
setStatus(status){ |
|||
// status 0未退款 1退款中 2已退款 3退款失败 |
|||
let arr = ['','退款中','已退款','退款关闭'] |
|||
return arr[status] || '-'; |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.product-info{ |
|||
@include ctf(space-between); |
|||
>view{ |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
@include ctf(flex-start); |
|||
.pi-list{ |
|||
margin-right: 20rpx; |
|||
.pl-box{ |
|||
position: relative; |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
border-radius: 10rpx; |
|||
>image{ |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
>view{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 0rpx 0rpx 10rpx 10rpx; |
|||
color: #FFF; |
|||
font-size: 20rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
.pl-txt{ |
|||
margin-top: 6rpx; |
|||
color: #333; |
|||
font-size: 24rpx; |
|||
max-width: 152rpx; |
|||
@include tHide(1); |
|||
} |
|||
} |
|||
.pi-item{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
.pi-box{ |
|||
flex-shrink: 0; |
|||
position: relative; |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
border-radius: 10rpx; |
|||
>image{ |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
>view{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 0rpx 0rpx 10rpx 10rpx; |
|||
color: #FFF; |
|||
font-size: 20rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
.pi-txt{ |
|||
flex-grow: 1; |
|||
margin: 0 34rpx 0 22rpx; |
|||
color: #333; |
|||
font-size: 24rpx; |
|||
@include tHide(2); |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
margin-top: -40rpx; |
|||
@include ctf(flex-start); |
|||
>text{ |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
} |
|||
>image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-left: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,159 @@ |
|||
<template> |
|||
<!-- 上传图片 --> |
|||
<view class="upload-image"> |
|||
<view class="ui-tit"> |
|||
<text>上传图片(选填)</text> |
|||
<text>最多3张</text> |
|||
</view> |
|||
<view class="ui-list"> |
|||
<view class="ul-box" v-for="(img,i) in imageList" :key="i"> |
|||
<image class="ub-img" mode="aspectFill" :src="img" :data-src="img" @tap="previewImage"></image> |
|||
<image class="ub-icon" src="/subpackage/mall/static/images/close_333.png" @tap="clearImage(i)"></image> |
|||
</view> |
|||
<view class="ul-add" v-if="imageList.length < 3" @tap="chooseImage"> |
|||
<view></view> |
|||
<view>上传照片</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import { MALL_API } from "../../../js/api"; |
|||
import server from "../../../js/server"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
imageList: [], |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 查看大图片 |
|||
previewImage: function(e) { |
|||
var current = e.target.dataset.src |
|||
uni.previewImage({ |
|||
current: current, |
|||
urls: this.imageList |
|||
}) |
|||
}, |
|||
|
|||
// 删除图片 |
|||
clearImage: function(e){ |
|||
this.imageList.splice(e,1) |
|||
this.$nextTick(this.$forceUpdate()); |
|||
this.$emit('uploadImageChange', this.imageList) |
|||
}, |
|||
|
|||
// 从相册选择图片 |
|||
chooseImage: async function() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: [ 'compressed ' ], |
|||
success: (res) => { |
|||
util.showLoad(); |
|||
server.uploadFile({ |
|||
url: MALL_API.uploadFeedbackImg, //上传图片接口 |
|||
filePath: res.tempFilePaths[0], |
|||
}) |
|||
.then(e=>{ |
|||
util.hideLoad(); |
|||
let _res = util.jsonPar(e.data); |
|||
if(_res.code == 0){ |
|||
this.imageList.push(_res.data.url); |
|||
this.$nextTick(this.$forceUpdate()); |
|||
this.$emit('uploadImageChange', this.imageList) |
|||
}else{ |
|||
console.error('上传图片失败--->',_res); |
|||
util.showNone(_res.message || '上传图片失败,请重试!') |
|||
} |
|||
}) |
|||
.catch(err=>{ |
|||
console.error('上传图片失败--->',err); |
|||
util.showNone('上传图片失败,稍后重试!') |
|||
}) |
|||
}, |
|||
}) |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.upload-image{ |
|||
width: 100%; |
|||
.ui-tit{ |
|||
margin-bottom: 30rpx; |
|||
>text{ |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #333; |
|||
font-size: 24rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
.ui-list{ |
|||
@include ctf(flex-start); |
|||
.ul-box{ |
|||
position: relative; |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 20rpx; |
|||
.ub-img{ |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.ub-icon{ |
|||
position: absolute; |
|||
top: 6rpx; |
|||
right: 6rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
.ul-add{ |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 2rpx solid #D8D8D8; |
|||
>view{ |
|||
&:first-child{ |
|||
position: relative; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
&::before,&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
width: 60rpx; |
|||
height: 6rpx; |
|||
background-color: #D8D8D8; |
|||
border-radius: 2rpx; |
|||
} |
|||
&::after{ |
|||
transform: translate(-50%,-50%) rotateZ(90deg); |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-top: 25rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<view class="product-item"> |
|||
<image mode="aspectFill" :src="goodsInfo.product_imgs || ''"></image> |
|||
<view class="pi-section"> |
|||
<view>{{goodsInfo.product_name || '-'}}</view> |
|||
<view> |
|||
<view>{{ specText }}</view> |
|||
<view>×{{goodsInfo.product_nums || 0}}</view> |
|||
</view> |
|||
<view> |
|||
<text>¥</text> |
|||
<text>{{ priceText }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props:{ |
|||
goodsInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
computed: { |
|||
specText(){ |
|||
let { goodsInfo } = this |
|||
if(goodsInfo.product_spec_multi == 0) return ''; |
|||
if(goodsInfo.product_spec_multi == 1) return this.setSpec() || '-'; |
|||
}, |
|||
priceText(){ |
|||
let { goodsInfo } = this |
|||
if(goodsInfo.product_spec_multi == 0) return goodsInfo.product_spec_single_info.price || 0; |
|||
if(goodsInfo.product_spec_multi == 1) return goodsInfo.product_spec_multi_info.price || 0; |
|||
return 0; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
methods:{ |
|||
setSpec(){ |
|||
let { goodsInfo } = this |
|||
if(goodsInfo.product_spec_multi_info.spec_info == null) return ''; |
|||
return goodsInfo.product_spec_multi_info.spec_info.join(';'); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.product-item{ |
|||
@include ctf(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.pi-section{ |
|||
flex-grow: 1; |
|||
margin-left: 20rpx; |
|||
>view{ |
|||
&:first-child{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
@include tHide(2); |
|||
} |
|||
&:nth-child(2){ |
|||
margin-top: 12rpx; |
|||
width: 100%; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
color: #9A9A9D; |
|||
&:first-child{ |
|||
font-size: 24rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(3){ |
|||
margin-top: 14rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class="fixed-mask m-zidx" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="pc-address-modal"> |
|||
<view class="pam-close"> |
|||
<image src="/subpackage/mall/static/images/close_c97.png" @click="selfAddrCloseChange"></image> |
|||
</view> |
|||
<view class="pam-title">选择自提地点</view> |
|||
<scroll-view class="pam-list" scroll-y="true"> |
|||
<block v-for="(e, i) in selfAddressList" :key="i"> |
|||
<view class="pl-item" @click="itemChange(e)"> |
|||
<image src="/subpackage/mall/static/images/position.png"></image> |
|||
<view class="pi-section"> |
|||
<view class="ps-store"> |
|||
<view class="ps-name"> |
|||
<view>{{e.venue_name || '-'}}</view> |
|||
<!-- <view>3.0k</view> --> |
|||
</view> |
|||
<view class="ps-address">{{e.venue_addr || '-'}}</view> |
|||
</view> |
|||
<image |
|||
class="ps-icon" |
|||
:class="{iconChange: getId(e.id)}" |
|||
:src="getId(e.id)?'/subpackage/mall/static/images/selected2.png':''" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="pl-line" > |
|||
<view v-for="j in 99" :key="j"> |
|||
<view class="pl-sign" ></view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props:{ |
|||
selfAddressList: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
selfSelectAddr: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
computed:{ |
|||
|
|||
}, |
|||
data() { |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
moveHandle(){}, |
|||
selfAddrCloseChange(){ |
|||
this.$emit('selfAddrCloseChange') |
|||
}, |
|||
itemChange(e){ |
|||
let selfPickup = {} |
|||
selfPickup["lat"] = e.lat |
|||
selfPickup["lng"] = e.lng |
|||
selfPickup["store_id"] = e.id |
|||
selfPickup["store_name"] = e.venue_name |
|||
selfPickup["store_addr"] = e.venue_addr |
|||
this.$emit('selfSelectAddrChange', selfPickup); |
|||
}, |
|||
|
|||
getId(id){ |
|||
let { selfSelectAddr } = this |
|||
if(selfSelectAddr.store_id == id) return true; |
|||
else return false; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.m-zidx{ |
|||
z-index: 9; |
|||
} |
|||
.pc-address-modal{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
background-color: #fff; |
|||
width: 750rpx; |
|||
padding: 28rpx 24rpx; |
|||
.pam-close{ |
|||
width: 100%; |
|||
@include ctf(flex-end); |
|||
>image{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
.pam-title{ |
|||
width: 100%; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
.pam-list{ |
|||
margin: 56rpx 46rpx 0 4rpx; |
|||
height: 750rpx; |
|||
.pl-item{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
// flex-grow: 0; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
.pi-section{ |
|||
margin-left: 12rpx; |
|||
width: 612rpx; |
|||
// margin-top: -18rpx; |
|||
@include ctf(space-between); |
|||
.ps-store{ |
|||
max-width: 486rpx; |
|||
.ps-name{ |
|||
>view{ |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #333; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #9A9A9D; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.ps-address{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
.ps-icon{ |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid #D8D8D8; |
|||
} |
|||
.iconChange{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border: 0rpx solid #fff; |
|||
} |
|||
} |
|||
} |
|||
.pl-line{ |
|||
margin: 30rpx 0 30rpx 34rpx; |
|||
width: 618rpx; |
|||
flex-wrap: nowrap; |
|||
overflow:hidden; |
|||
@include ctf(flex-start); |
|||
.pl-sign{ |
|||
// display: inline-block; |
|||
width: 8rpx; |
|||
height: 2rpx; |
|||
margin-left: 6rpx; |
|||
background-color: #D8D8D8; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
@ -0,0 +1,214 @@ |
|||
<template> |
|||
<view class="comment-edit"> |
|||
<!-- 商品 --> |
|||
<view class="ce-goods"> |
|||
<image mode="aspectFill" :src="optionsQuery.product_imgs"></image> |
|||
<view class="cg-name">{{optionsQuery.product_name}}</view> |
|||
<view class="cg-price">¥{{optionsQuery.unit_price}}</view> |
|||
</view> |
|||
<!-- 评分 --> |
|||
<view class="ce-score"> |
|||
<view> |
|||
<text>评分</text> |
|||
<text>*</text> |
|||
<text>{{submit.level}}.0</text> |
|||
</view> |
|||
<view> |
|||
<image v-for="(e,i) in 5" :key="i" :src="i<submit.level?'/subpackage/mall/static/images/star_fill.png':'/subpackage/mall/static/images/star_empty.png'" @click="starChange(i)"></image> |
|||
</view> |
|||
</view> |
|||
<!-- 评价 --> |
|||
<view class="ce-appraise"> |
|||
<textarea class="ca-textarea" @blur="bindTextAreaBlur" placeholder="在此输入您的评价" v-model="submit.description"></textarea> |
|||
</view> |
|||
<!-- 上传图片 --> |
|||
<view class="ce-pic"> |
|||
<upload-image @uploadImageChange="uploadImageChange"></upload-image> |
|||
</view> |
|||
<view class="ce-btn"> |
|||
<view hover-class="hover-active" @click="onSubmit">发布</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import util from '@/utils/util'; |
|||
import { MALL_API } from "../../js/api"; |
|||
import server from "../../js/server"; |
|||
import uploadImage from '../modules/order/upload_image.vue'; |
|||
export default { |
|||
components: { |
|||
'upload-image': uploadImage, |
|||
}, |
|||
data() { |
|||
return { |
|||
isCheck: false, |
|||
optionsQuery: {}, |
|||
submit: { |
|||
description: '', //评价描述 |
|||
level: 0, //评价星级 |
|||
images: [], |
|||
}, |
|||
brand_id: '', |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
let _bid = options?.brand_id ?? ''; |
|||
this.brand_id = _bid; |
|||
let _query = util.jsonPar(options.query); |
|||
this.optionsQuery = _query |
|||
}, |
|||
methods: { |
|||
starChange(index){ |
|||
// this.isCheck = true |
|||
this.submit.level = (index + 1) |
|||
}, |
|||
// 文本域 |
|||
bindTextAreaBlur: function(e) { |
|||
this.submit.description = e.detail.value |
|||
}, |
|||
// 上传图片 |
|||
uploadImageChange: function(e){ |
|||
console.log("选择的图片: " + e) |
|||
let images = e.join(","); |
|||
console.log("需要上传的图片: ",images) |
|||
this.submit.images = e |
|||
}, |
|||
|
|||
onSubmit(){ |
|||
let { optionsQuery, submit, brand_id } = this |
|||
if(submit.level < 1) return util.showNone("请选择评价星级"); |
|||
if(submit.description == '') return util.showNone("请输入您的评价"); |
|||
util.showLoad(); |
|||
server.post({ |
|||
url: MALL_API.goodsCommentPublish, |
|||
data: { |
|||
brand_id, |
|||
product_id: optionsQuery.product_id, //商品ID |
|||
product_order_no: optionsQuery.order_no, //订单ID |
|||
product_comment_level: submit.level, //星级 |
|||
product_comment_text: submit.description, //评价 |
|||
product_comment_imgs: submit.images, //图片 [] |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('评价: ', res); |
|||
util.showNone("评价成功") |
|||
setTimeout(_=>uni.navigateBack({delta: 2}),1200) |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.comment-edit{ |
|||
position: relative; |
|||
width: 100%; |
|||
@include isPd(150upx); |
|||
.ce-goods{ |
|||
margin: 24rpx; |
|||
padding: 40rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
.cg-name{ |
|||
flex-grow: 1; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin-right: 28rpx; |
|||
} |
|||
.cg-price{ |
|||
flex-shrink: 0; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
.ce-score{ |
|||
margin: 0rpx 24rpx; |
|||
padding: 16rpx 20rpx 40rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
>view{ |
|||
&:first-child{ |
|||
>text{ |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #FF873D; |
|||
} |
|||
&:nth-child(3){ |
|||
color: #FF873D; |
|||
// font-size: 36rpx; |
|||
font-weight: bold; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
margin-top: 40rpx; |
|||
flex-grow: 1; |
|||
@include ctf(center); |
|||
>image{ |
|||
display: inline-block; |
|||
flex-shrink: 0; |
|||
width: 84rpx; |
|||
height: 84rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ce-appraise{ |
|||
flex-grow: 1; |
|||
margin: 24rpx; |
|||
padding: 30rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
.ca-textarea{ |
|||
width: 100%; |
|||
height: 210rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.ce-pic{ |
|||
margin: 0rpx 24rpx; |
|||
padding: 30rpx 20rpx 38rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
} |
|||
.ce-btn{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 20rpx 0rpx; |
|||
@include isPd(20rpx); |
|||
width: 100%; |
|||
background-color: #fff; |
|||
>view{ |
|||
flex-grow: 1; |
|||
margin: 0rpx 24rpx; |
|||
padding: 22rpx 0rpx; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
border-radius: 44rpx; |
|||
background: linear-gradient(90deg, #44D7B6 0%, $mColor 100%); |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,128 @@ |
|||
<template> |
|||
<view class="comment-list"> |
|||
<view class="cl-item" v-for="(e,i) in goodsList" :key="i" @click="toCommentEdit(e)"> |
|||
<view class="ci-line"> |
|||
<image mode="aspectFill" :src="e.product_imgs || ''"></image> |
|||
<view class="cl-section"> |
|||
<view>{{e.product_name || '-'}}</view> |
|||
<view> |
|||
<image src="/subpackage/mall/static/images/star_empty.png" v-for="i in 5" :key="i"></image> |
|||
<view> |
|||
<text>¥</text> |
|||
<text>{{setPrice(e)}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ci-btn"> |
|||
<view hover-class="hover-active">评价</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
goodsList: [], |
|||
optionsQuery: {}, |
|||
brand_id: '', |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.brand_id = options?.brand_id ?? ''; |
|||
let _query = util.jsonPar(options.query); |
|||
this.goodsList = _query.goodsList |
|||
this.optionsQuery = _query |
|||
}, |
|||
methods: { |
|||
toCommentEdit(item){ |
|||
let { optionsQuery, brand_id } = this |
|||
let unitPrice = (item.product_price / item.product_nums).toFixed(2) |
|||
let _query = {} |
|||
_query['order_no'] = optionsQuery.order_no |
|||
_query['product_id'] = item.product_id |
|||
_query['product_name'] = item.product_name |
|||
_query['product_imgs'] = item.product_imgs |
|||
_query['unit_price'] = unitPrice |
|||
util.routeTo(`/subpackage/mall/pages/order/comment_edit?query=${util.jsonStr(_query)}&brand_id=${brand_id}`,'nT') |
|||
}, |
|||
|
|||
setPrice(item){ |
|||
let unitPrice = 0.00 |
|||
unitPrice = (item.product_price / item.product_nums).toFixed(2) |
|||
return unitPrice; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.comment-list{ |
|||
width: 100%; |
|||
padding-bottom: 24rpx; |
|||
.cl-item{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #FFF; |
|||
.ci-line{ |
|||
@include ctf(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
margin-right: 20rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.cl-section{ |
|||
flex-grow: 1; |
|||
>view{ |
|||
&:first-child{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
@include tHide(2); |
|||
} |
|||
&:nth-child(2){ |
|||
margin-top: 58rpx; |
|||
@include ctf(space-between); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
display: inline-block; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
text-align: right; |
|||
>text{ |
|||
color: #333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ci-btn{ |
|||
flex-grow: 1; |
|||
margin-top: 30rpx; |
|||
@include ctf(flex-end); |
|||
>view{ |
|||
padding: 16rpx 68rpx; |
|||
color: #FFF; |
|||
font-size: 28rpx; |
|||
border-radius: 36rpx; |
|||
background: linear-gradient(90deg, #44D7B6 0%, $mColor 100%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,938 @@ |
|||
<template> |
|||
<view class="order-details"> |
|||
<view class="od-head"> |
|||
<view class="oh-view"> |
|||
<view>{{ setStatus }}</view> |
|||
<view>{{ setStatusText }}</view> |
|||
</view> |
|||
<image :src="setStatusImg"></image> |
|||
</view> |
|||
<!-- 自提 订单关闭、待付款、待发货 --> |
|||
<view class="od-self" v-if="orderInfo.product_order_self_pickup == 1"> |
|||
<view class="os-tit">到店自提</view> |
|||
<view class="os-line"> |
|||
<view> |
|||
<text>{{ orderInfo.product_order_self_pickup_info.name || '-' }}</text> |
|||
<text>{{ orderInfo.product_order_self_pickup_info.phone || '-' }}</text> |
|||
</view> |
|||
<!-- 待付款 --> |
|||
<view v-if="orderInfo.status == 0" @click="isSelfAddressModel = !isSelfAddressModel">修改</view> |
|||
</view> |
|||
<view class="os-store">{{ orderInfo.product_order_self_pickup_info.store_name || '-' }}</view> |
|||
<view class="os-addr">{{ orderInfo.product_order_self_pickup_info.store_addr || '-' }}</view> |
|||
<!-- 待发货、交易完成、退款完成, 其中交易完成和退款完成需要置灰 --> |
|||
<view class="os-code" v-if="isCode"> |
|||
<view class="oc-box"> |
|||
<image class="oi-qrcode" :class="{ qrcodeChange: isGrayCode }" :src="codeImg || ''"></image> |
|||
<!-- 交易完成、退款完成 --> |
|||
<image v-if="isGrayCode" class="oi-icon" src="/subpackage/mall/static/images/order/invalid.png"></image> |
|||
</view> |
|||
<view class="oc-tips">到店请出示此二维码给工作人员核销,拿取商品</view> |
|||
<view class="oc-num" :class="{ numChange: isGrayCode }"> |
|||
<view>取货码:</view> |
|||
<view>{{ orderInfo.product_order_self_pickup_info.gcode }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 快递 订单关闭、待付款 --> |
|||
<view class="od-sd" v-if="orderInfo.product_order_self_pickup == 0"> |
|||
<!-- 待发货 --> |
|||
<view class="os-tit" v-if="orderInfo.status == 1">快递收货</view> |
|||
<!-- 待收货、交易完成、退款完成 --> |
|||
<view class="os-section" @click="toLogistics" v-if="orderInfo.status == 2 || orderInfo.status == 3"> |
|||
<view class="os-info"> |
|||
<view class="oi-line"> |
|||
<text>快递公司:</text> |
|||
<text>{{ orderInfo.product_order_goods[0].product_logistics.logistics_name || '-' }}</text> |
|||
</view> |
|||
<view class="oi-line"> |
|||
<text>快递单号:</text> |
|||
<text>{{ orderInfo.product_order_goods[0].product_logistics.logistics_no || '-' }}</text> |
|||
<text @click.stop="copyOrder(orderInfo.product_order_goods[0].product_logistics.logistics_no)">复制</text> |
|||
</view> |
|||
</view> |
|||
<image src="/subpackage/mall/static/images/arrow_9ad.png"></image> |
|||
</view> |
|||
<view class="os-line"> |
|||
<view> |
|||
<text>{{ orderInfo.product_order_custom.name || '-' }}</text> |
|||
<text>{{ orderInfo.product_order_custom.phone || '-' }}</text> |
|||
</view> |
|||
<view v-if="orderInfo.status == 0" @click="toAddressList">修改</view> |
|||
</view> |
|||
<view class="os-addr">{{ orderInfo.product_order_custom.address || '-' }}</view> |
|||
</view> |
|||
<!-- 商品详情 --> |
|||
<view class="od-info"> |
|||
<view class="oi-store"> |
|||
<view> |
|||
<image mode="aspectFit" :src="orderInfo.brand_image || ''"></image> |
|||
<text>{{ orderInfo.brand_name || '-' }}</text> |
|||
</view> |
|||
<view @click="phoneCall">联系商家</view> |
|||
</view> |
|||
<view class="oi-goods" v-for="(e, i) in orderInfo.product_order_goods" :key="i"> |
|||
<details-goods :goodsInfo="e" :orderData="orderData" @refundChange="refundChange"></details-goods> |
|||
</view> |
|||
<view class="oi-line"> |
|||
<view>金额小计</view> |
|||
<view>¥{{ orderInfo.product_order_price || 0 }}</view> |
|||
</view> |
|||
<view class="oi-line" v-if="orderInfo.collage_product_order_leader==true"> |
|||
<view>团长折扣</view> |
|||
<view>-¥{{ orderInfo.collage_leader_discount_amount || 0 }}</view> |
|||
</view> |
|||
<view class="oi-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥{{ orderInfo.deduction_amount || 0 }}</view> |
|||
</view> |
|||
<view class="oi-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥{{ orderInfo.discount_amount || 0 }}</view> |
|||
</view> |
|||
<view class="oi-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥{{ orderInfo.coupons_amount || 0 }}</view> |
|||
</view> |
|||
<view class="oi-line"> |
|||
<view>运费</view> |
|||
<view>¥{{ orderInfo.product_logistics_price || 0 }}</view> |
|||
</view> |
|||
<view class="oi-price"> |
|||
<text>合计支付:</text> |
|||
<text>¥</text> |
|||
<text>{{ orderInfo.pay_amount || 0 }}</text> |
|||
</view> |
|||
</view> |
|||
<!-- 支付信息 --> |
|||
<view class="od-pay"> |
|||
<view class="op-line"> |
|||
<view>下单时间</view> |
|||
<view>{{ orderInfo.created_at || '-' }}</view> |
|||
</view> |
|||
<view class="op-line"> |
|||
<view>订单编号</view> |
|||
<view>{{ orderInfo.order_no || '-' }}</view> |
|||
<view @click="copyOrder(orderInfo.order_no)">复制</view> |
|||
</view> |
|||
<view class="op-line" v-if="orderInfo.status != 0 && orderInfo.status != 5"> |
|||
<view>支付方式</view> |
|||
<view>{{ orderInfo.pay_type == 0 ? '微信支付' : orderInfo.pay_type == 1 ? '支付宝支付' : orderInfo.pay_type == 2 ? '储值卡支付' : '-' }}</view> |
|||
</view> |
|||
<view class="op-line" v-if="orderInfo.status != 0 && orderInfo.status != 5"> |
|||
<view>交易流水号</view> |
|||
<view>{{ orderInfo.trade_no || '' }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 底部按钮 ob-btn1 --> |
|||
<view class="od-btn"> |
|||
<view class="ob-btn1" hover-class="hover-active" @click="btnChange(1, orderInfo.status)" v-if="isBtnStyle1">{{ setbtnText(1, orderInfo.status) }}</view> |
|||
<view class="ob-btn2" hover-class="hover-active" @click="btnChange(2, orderInfo.status)" v-if="isBtnStyle2">再来一单</view> |
|||
<view class="ob-btn3" hover-class="hover-active" @click="btnChange(3, orderInfo.status)" v-if="isBtnStyle3">{{ setbtnText(3, orderInfo.status) }}</view> |
|||
</view> |
|||
<!-- 弹框 无法申请退款 --> |
|||
<view class="fixed-mask zindex" v-if="isShowRefund" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="od-refund-modal"> |
|||
<view class="orm-tit">无法申请退款</view> |
|||
<view class="orm-tips">您已错过了申请退款的时间段(交易成功后{{refundDay || 0}}天内),如果您有退货需求,建议您联系客服。</view> |
|||
<view class="orm-btn" @click="isShowRefund = !isShowRefund">我知道了</view> |
|||
</view> |
|||
</view> |
|||
<!-- 弹框 选择自提地点 --> |
|||
<self-pickup-addr |
|||
v-if="isSelfAddressModel" |
|||
:selfAddressList="selfAddrList" |
|||
:selfSelectAddr="selfPickup" |
|||
@selfSelectAddrChange="selfSelectAddrChange" |
|||
@selfAddrCloseChange="isSelfAddressModel = !isSelfAddressModel" |
|||
></self-pickup-addr> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import qrcode from '../../js/wxqrcode'; |
|||
import { MALL_API } from "../../js/api"; |
|||
import server from "../../js/server"; |
|||
import selfPickupAddr from '../modules/pay/self_pickup_addr.vue'; |
|||
import detailsGoods from '../modules/order/details_goods.vue'; |
|||
export default { |
|||
components: { |
|||
'details-goods': detailsGoods, |
|||
'self-pickup-addr': selfPickupAddr |
|||
}, |
|||
computed: { |
|||
setStatus() { |
|||
// 0待付款 1待发货 2待收货 3待评价 4交易完成 5订单关闭 6退款中 7退款完成 8退款失败 |
|||
let statusArr = ['待付款', '待发货', '待收货', '交易完成', '交易完成', '订单关闭', '退款中', '退款完成', '退款关闭']; |
|||
return statusArr[this.orderInfo.status] || '-'; |
|||
}, |
|||
setStatusText() { |
|||
let statusArr = [ |
|||
this.orderInfo.product_order_pay_end_time + '后订单关闭。请及时付款哦~', |
|||
'商家正在处理中,请耐心等待商家发货', |
|||
'商品已打包完成发货,请耐心等待收货,祝您生活愉快', |
|||
'收到货后,如有意见,请联系我们客服哦!', |
|||
'收到货后,如有意见,请联系我们客服哦!', |
|||
'订单未支付,超时自动关闭', |
|||
'请等待商家处理', |
|||
'订单已退款完成', |
|||
'退款失败,如问题仍未解决,您可重新发起申请' |
|||
]; |
|||
return statusArr[this.orderInfo.status] || '-'; |
|||
}, |
|||
setStatusImg() { |
|||
let { orderInfo } = this; |
|||
let statusArr = [ |
|||
'/subpackage/mall/static/images/order/status_1.png', |
|||
'/subpackage/mall/static/images/order/status_3.png', |
|||
'/subpackage/mall/static/images/order/status_3.png', |
|||
'/subpackage/mall/static/images/order/status_4.png', |
|||
'/subpackage/mall/static/images/order/status_4.png', |
|||
'/subpackage/mall/static/images/order/status_0.png', |
|||
'/subpackage/mall/static/images/order/status_5.png', |
|||
'/subpackage/mall/static/images/order/status_5.png', |
|||
'/subpackage/mall/static/images/order/status_5.png' |
|||
]; |
|||
|
|||
if (orderInfo.product_order_self_pickup == 1 && orderInfo.status == 1) return '/subpackage/mall/static/images/order/status_2.png'; |
|||
else return statusArr[this.orderInfo.status] || ''; |
|||
}, |
|||
// 第一种按钮样式 |
|||
isBtnStyle1() { |
|||
let { orderInfo } = this; |
|||
if (orderInfo.status == 0 || orderInfo.status == 1 || orderInfo.status == 2 || orderInfo.status == 3 || orderInfo.status == 4 || orderInfo.status == 5 || orderInfo.status == 7 || orderInfo.status == 8) return true; |
|||
else return false; |
|||
}, |
|||
// 第二种按钮样式 除了0待付款状态 都可出现 |
|||
isBtnStyle2() { |
|||
let { orderInfo } = this; |
|||
if (orderInfo.status != 0) return true; |
|||
else return false; |
|||
}, |
|||
// 第三种按钮样式 0 2 3 |
|||
isBtnStyle3() { |
|||
let { orderInfo } = this; |
|||
if (orderInfo.status == 0 || orderInfo.status == 2 || orderInfo.status == 3) return true; |
|||
else return false; |
|||
}, |
|||
// 是否显示自提二维码 |
|||
isCode() { |
|||
let { orderInfo } = this; |
|||
if (orderInfo.status == 1 || orderInfo.status == 3 || orderInfo.status == 4 || orderInfo.status == 6 || orderInfo.status == 7 || orderInfo.status == 8) return true; |
|||
else return false; |
|||
}, |
|||
// 是否置灰自提二维码 |
|||
isGrayCode() { |
|||
let { orderInfo } = this; |
|||
if (orderInfo.status == 3 || orderInfo.status == 4 || orderInfo.status == 6 || orderInfo.status == 7 || orderInfo.status == 8) return true; |
|||
else return false; |
|||
}, |
|||
// 生成二维码 |
|||
codeImg() { |
|||
let { orderInfo } = this; |
|||
if(orderInfo.product_order_self_pickup_code) return qrcode.createQrCodeImg(orderInfo.product_order_self_pickup_code); |
|||
}, |
|||
// 申请退款所需参数 feedbackDetail |
|||
getFeedbackDetail(){ |
|||
let { orderInfo } = this |
|||
let _list = orderInfo.product_order_goods |
|||
let _arr = [] |
|||
for(var i in _list){ |
|||
_arr.push({ |
|||
product_cart_id: _list[i].product_cart_id, |
|||
product_id: _list[i].product_id, |
|||
number: _list[i].product_nums, |
|||
}) |
|||
} |
|||
return _arr; |
|||
}, |
|||
// 批量申请列表 |
|||
getBatchList(){ |
|||
let { orderInfo } = this |
|||
let _list = orderInfo.product_order_goods |
|||
let arr = [] |
|||
for(var i in _list){ |
|||
if(_list[i].product_nums - _list[i].refund_nums > 0){ |
|||
_list[i].product_nums = _list[i].product_nums - _list[i].refund_nums |
|||
_list[i].goods_nums = _list[i].product_nums |
|||
arr.push(_list[i]) |
|||
} |
|||
} |
|||
return arr; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
isShowRefund: false, |
|||
isSelfAddressModel: false, |
|||
orderInfo: {}, |
|||
orderData: {}, |
|||
selfAddrList: [{}, {}], |
|||
selfPickup: {} ,//选中的自提地址 |
|||
queryOrderNo: "", |
|||
refundDay: 0, |
|||
brand_id: '', |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
let _bid = options?.brand_id ?? ''; |
|||
this.queryOrderNo = options.order_no; |
|||
this.brand_id = _bid; |
|||
}, |
|||
onShow() { |
|||
let { brand_id, queryOrderNo } = this; |
|||
this.getOrderDetail({ order_no: queryOrderNo, brand_id }); |
|||
}, |
|||
methods: { |
|||
moveHandle() {}, |
|||
toLogistics() { |
|||
let { orderInfo } = this; |
|||
let logisticsList = []; |
|||
for (var i in orderInfo.product_order_goods) { |
|||
logisticsList.push(orderInfo.product_order_goods[i].product_logistics); |
|||
} |
|||
|
|||
let _query = {}; |
|||
_query['logistics_list'] = logisticsList; |
|||
util.routeTo(`../logistics_info/logistics_info?query=${util.jsonStr(logisticsList)}`, 'nT'); |
|||
}, |
|||
setbtnText(type, status) { |
|||
// status 0待付款 1待发货 2待收货 3待评价 4交易完成 5订单关闭 6退款中 7退款完成 8退款失败 |
|||
if (type == 1) { |
|||
let arr = ['取消订单', '申请退款', '批量退款', '批量退款', '删除订单', '删除订单', '删除订单', '删除订单', '删除订单']; |
|||
return arr[status] || '-'; |
|||
} |
|||
if (type == 3) { |
|||
let arr = ['继续支付', '', '确认收货', '评价', '', '', '', '', '']; |
|||
return arr[status] || '-'; |
|||
} |
|||
}, |
|||
|
|||
btnChange(type, status) { |
|||
let { orderInfo, brand_id } = this; |
|||
if (type == 1) { |
|||
// 0取消订单 1申请退款 2,3批量退款 else删除订单 |
|||
if (status == 0) return this.determineOperate(0); |
|||
if (status == 1){ |
|||
let _query = { |
|||
feedbackDetail: this.getFeedbackDetail, |
|||
order_no: orderInfo.order_no, |
|||
goods_list: orderInfo.product_order_goods, |
|||
feedback_type: 0, |
|||
} |
|||
return util.routeTo(`/subpackage/mall/pages/order/request_write?query=${util.jsonStr(_query)}&brand_id=${brand_id}`, 'nT'); |
|||
} |
|||
if (status == 2 || status == 3) { |
|||
let _query = { |
|||
order_no: orderInfo.order_no, |
|||
goods_list: this.getBatchList, |
|||
isBatch: true, |
|||
} |
|||
return util.routeTo(`../request_service/request_service?query=${util.jsonStr(_query)}`, 'nT'); |
|||
// util.routeTo(`../request_batch/request_batch?query=${util.jsonStr(_query)}`, 'nT'); |
|||
} else return this.determineOperate(1); |
|||
} |
|||
// 再来一单 |
|||
if (type == 2) return this.getOrderAgain({ brand_id, order_no: orderInfo?.order_no ?? '' }); |
|||
if (type == 3) { |
|||
// 0继续支付 2确认收货 3评价 |
|||
if (status == 0) return this.continuePay(); |
|||
if (status == 2) return this.determineOperate(2); |
|||
if (status == 3) { |
|||
let _query = {}; |
|||
_query['goodsList'] = orderInfo.product_order_goods || []; |
|||
_query['order_no'] = orderInfo.order_no; |
|||
util.routeTo(`/subpackage/mall/pages/order/comment_list?query=${util.jsonStr(_query)}&brand_id=${brand_id}`, 'nT'); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
determineOperate: util.debounce(function(type) { |
|||
// type 0取消订单 1删除订单 2确认收货 |
|||
let { brand_id, orderInfo } = this; |
|||
util.showModal({ |
|||
title: '提示', |
|||
content: type == 0 ? '确定取消该订单吗?' : type == 1 ? '确定删除该订单吗?' : '确认收货吗', |
|||
showCancel: true, |
|||
success: modalRes => { |
|||
if (modalRes.confirm) { |
|||
let _commonQry = { order_no: orderInfo?.order_no ?? '', brand_id }; |
|||
if (type == 0) this.getOrderCancel(_commonQry); |
|||
if (type == 1) return this.getOrderDel(_commonQry); |
|||
if (type == 2) this.getOrderUserTake(_commonQry); |
|||
this.$nextTick(_ => { |
|||
this.getOrderDetail(_commonQry); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
},300,300), |
|||
// 继续支付 |
|||
continuePay() { |
|||
let { orderInfo } = this |
|||
let _query = {} |
|||
_query['price'] = orderInfo.pay_amount |
|||
_query['order_no'] = orderInfo.order_no |
|||
_query['pay_type'] = 4 //商城支付类型 |
|||
util.routeTo(`/pages/order_pay/order_pay?query=${util.jsonStr(_query)}`,'rT') |
|||
}, |
|||
// 订单-详情 |
|||
getOrderDetail({ order_no, brand_id }) { |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderInfo, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('订单详情: ', res); |
|||
this.orderInfo = res.order_info; |
|||
this.orderData = res |
|||
this.getOrderUsingStores({ order_no, brand_id }); |
|||
let _selfPickup = {}; |
|||
_selfPickup['store_id'] = res.order_info.product_order_self_pickup_info.store_id; |
|||
_selfPickup['store_name'] = res.order_info.product_order_self_pickup_info.store_name; |
|||
_selfPickup['store_addr'] = res.order_info.product_order_self_pickup_info.store_addr; |
|||
this.selfPickup = _selfPickup; |
|||
}); |
|||
}, |
|||
// 订单-删除 |
|||
getOrderDel({ brand_id, order_no }) { |
|||
// util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderDel, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
// util.hideLoad(); |
|||
console.log('订单删除: ', res); |
|||
util.showNone("操作成功") |
|||
setTimeout(_=>uni.navigateBack(), 1200); |
|||
}); |
|||
}, |
|||
// 订单-取消 |
|||
getOrderCancel({ brand_id, order_no }){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderCancel, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('订单删除: ', res); |
|||
}); |
|||
}, |
|||
// 再来一单 |
|||
getOrderAgain({ brand_id, order_no }) { |
|||
server.get({ |
|||
url: MALL_API.goodsOrderAgain, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
console.log('再来一单: ', res); |
|||
let { orderInfo } = this; |
|||
let _goods = orderInfo?.product_order_goods ?? []; |
|||
let _query = {}; |
|||
_query['goodsList'] = _goods; |
|||
_query['price_amount'] = orderInfo.amount; |
|||
_query['product_ids'] = _goods.map(item=>item.id); |
|||
_query['go_buy'] = 1 |
|||
util.routeTo(`/subpackage/mall/pages/pay/pay_confirm?query=${util.jsonStr(_query)}&brand_id=${brand_id}`,'nT') |
|||
}); |
|||
}, |
|||
// 确认收货 |
|||
getOrderUserTake({ brand_id, order_no }) { |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderUserTake, |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('确认收货: ', res); |
|||
}); |
|||
}, |
|||
phoneCall() { |
|||
let { orderInfo } = this; |
|||
let _phoneStr = orderInfo.contact_mobile || ''; |
|||
let _phoneArr = _phoneStr.split(',') || []; |
|||
uni.showActionSheet({ |
|||
itemList: _phoneArr, |
|||
success: res => { |
|||
uni.makePhoneCall({ |
|||
phoneNumber: _phoneArr[res.tapIndex] |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
copyOrder(data) { |
|||
uni.setClipboardData({ data }); |
|||
}, |
|||
toAddressList() { |
|||
util.routeTo(`/pages/mine/address_list/address_list?back_func=setAddrInfo`, 'nT'); |
|||
}, |
|||
setAddrInfo(info) { |
|||
this.addressInfo = info; |
|||
this.getOrdeChangeAddr(0, info); |
|||
}, |
|||
// 自提修改地址 |
|||
selfSelectAddrChange(e) { |
|||
this.selfPickup = e; |
|||
this.isSelfAddressModel = false; |
|||
console.log('选中的自提门店:', this.selfPickup); |
|||
this.getOrdeChangeAddr(1, e); |
|||
}, |
|||
// 修改地址 |
|||
getOrdeChangeAddr(type, info) { |
|||
// type 0快递 1自提 |
|||
let { orderInfo, brand_id } = this; |
|||
let _query = {}; |
|||
_query['brand_id'] = brand_id; |
|||
_query['order_no'] = orderInfo.order_no; |
|||
_query['self_pickup'] = orderInfo.product_order_self_pickup; |
|||
if (type == 0) { |
|||
_query['custom_name'] = info.username; |
|||
_query['custom_phone'] = info.mobile; |
|||
_query['custom_addr'] = info.province + info.city + info.area + info.addr; |
|||
} |
|||
if (type == 1) { |
|||
_query['store_id'] = info.store_id; |
|||
_query['store_name'] = info.store_name; |
|||
_query['store_addr'] = info.store_addr; |
|||
_query['user_name'] = orderInfo.product_order_self_pickup_info.name; |
|||
_query['user_phone'] = orderInfo.product_order_self_pickup_info.phone; |
|||
_query['user_gtime'] = orderInfo.product_order_self_pickup_info.gtime; |
|||
} |
|||
server.post({ |
|||
url: MALL_API.goodsOrdeChangeAddr, |
|||
data: _query, |
|||
failMsg: '请求失败!' |
|||
}) |
|||
.then(res => { |
|||
console.log('修改地址: ', res); |
|||
this.getOrderDetail({ order_no: orderInfo?.order_no ?? '', brand_id }); |
|||
}); |
|||
}, |
|||
//确认订单-获取自提门店信息 |
|||
getOrderUsingStores({ brand_id, order_no }) { |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderUsingStores, |
|||
data: { brand_id, order_no, gobuy: 1 }, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('确认订单获取自提门店信息: ', res); |
|||
if (res != null) { |
|||
this.selfAddrList = res; |
|||
} |
|||
}); |
|||
}, |
|||
refundChange(e){ |
|||
console.log("hi: ",e) |
|||
if(!e.refund_btn_show){ |
|||
this.refundDay = e.refund_day |
|||
this.isShowRefund = true |
|||
return; |
|||
} |
|||
if(e.refund_btn_show){ |
|||
return util.routeTo(`/subpackage/mall/pages/order/request_service/request_service?query=${util.jsonStr(e.query)}`, 'nT'); |
|||
} |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-details { |
|||
position: relative; |
|||
width: 100%; |
|||
@include isPd(130upx); |
|||
.od-head { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 160rpx; |
|||
background-color: $mColor; |
|||
@include ctf(flex-end); |
|||
> image { |
|||
width: 266rpx; |
|||
height: 160rpx; |
|||
} |
|||
.oh-view { |
|||
position: absolute; |
|||
left: 44rpx; |
|||
top: 22rpx; |
|||
margin-right: 44rpx; |
|||
> view { |
|||
&:first-child { |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
} |
|||
&:nth-child(2) { |
|||
font-size: 24rpx; |
|||
color: rgba($color: #fff, $alpha: 0.6); |
|||
margin-top: 2rpx; |
|||
@include tHide(2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.od-sd { |
|||
margin: 24rpx; |
|||
padding: 30rpx 20rpx; |
|||
flex-grow: 1; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
.os-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
.os-section { |
|||
margin-bottom: 30rpx; |
|||
padding-bottom: 28rpx; |
|||
border-bottom: 2rpx solid #f2f2f7; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
.os-info { |
|||
flex-grow: 1; |
|||
.oi-line { |
|||
> text { |
|||
font-size: 28rpx; |
|||
&:first-child { |
|||
color: #9a9a9d; |
|||
} |
|||
&:nth-child(2) { |
|||
color: #333; |
|||
} |
|||
&:nth-child(3) { |
|||
color: $mColor; |
|||
margin-left: 54rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
> image { |
|||
flex-shrink: 0; |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
} |
|||
.os-line { |
|||
@include ctf(space-between); |
|||
> view { |
|||
&:first-child { |
|||
> text { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
&:first-child { |
|||
} |
|||
&:nth-child(2) { |
|||
margin-left: 52rpx; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2) { |
|||
color: $mColor; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
.os-addr { |
|||
color: #9a9a9d; |
|||
font-size: 28rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
.od-self { |
|||
margin: 24rpx; |
|||
padding: 30rpx 20rpx; |
|||
flex-grow: 1; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
.os-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
} |
|||
.os-line { |
|||
padding: 16rpx 0 30rpx; |
|||
border-bottom: 2rpx solid #f2f2f7; |
|||
@include ctf(space-between); |
|||
> view { |
|||
&:first-child { |
|||
> text { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
&:first-child { |
|||
} |
|||
&:nth-child(2) { |
|||
margin-left: 50rpx; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2) { |
|||
color: $mColor; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
.os-store { |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin: 30rpx 0 10rpx; |
|||
} |
|||
.os-addr { |
|||
color: #9a9a9d; |
|||
font-size: 28rpx; |
|||
} |
|||
.os-code { |
|||
flex-grow: 1; |
|||
border-top: 2rpx solid #f2f2f7; |
|||
padding-top: 38rpx; |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.oc-box { |
|||
position: relative; |
|||
width: 300rpx; |
|||
height: 300rpx; |
|||
margin: 20rpx 0; |
|||
.oi-qrcode { |
|||
width: 300rpx; |
|||
height: 300rpx; |
|||
background-color: skyblue; |
|||
} |
|||
.oi-icon { |
|||
position: absolute; |
|||
top: -36rpx; |
|||
right: -82rpx; |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
} |
|||
.qrcodeChange { |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
.oc-tips { |
|||
color: #9c9c9f; |
|||
font-size: 24rpx; |
|||
} |
|||
.oc-num { |
|||
margin: 50rpx 0; |
|||
padding: 12rpx 14rpx; |
|||
border-radius: 10rpx; |
|||
background: rgba($color: $mColor, $alpha: 0.09); |
|||
@include ctf(flex-start); |
|||
> view { |
|||
color: $mColor; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
&:first-child { |
|||
} |
|||
&:nth-child(2) { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
.numChange { |
|||
margin: 50rpx 0; |
|||
padding: 12rpx 14rpx; |
|||
border-radius: 10rpx; |
|||
background: #f8f8f8; |
|||
@include ctf(flex-start); |
|||
> view { |
|||
color: #9c9c9f; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
&:first-child { |
|||
} |
|||
&:nth-child(2) { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.od-info { |
|||
margin: 0 24rpx; |
|||
padding: 0 20rpx; |
|||
flex-grow: 1; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
.oi-store { |
|||
padding: 24rpx 0; |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
@include ctf(space-between); |
|||
> view { |
|||
&:first-child { |
|||
flex-grow: 1; |
|||
@include ctf(flex-start); |
|||
> image { |
|||
flex-shrink: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-right: 14rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
> text { |
|||
flex-grow: 1; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
@include tHide(2); |
|||
} |
|||
} |
|||
&:nth-child(2) { |
|||
flex-shrink: 0; |
|||
color: #9a9a9d; |
|||
font-size: 28rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
.oi-goods { |
|||
// margin-top: 30rpx; |
|||
} |
|||
.oi-line { |
|||
margin-top: 30rpx; |
|||
@include ctf(space-between); |
|||
> view { |
|||
color: #333; |
|||
&:first-child { |
|||
flex-grow: 1; |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2) { |
|||
flex-shrink: 0; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
.oi-price { |
|||
padding: 20rpx 0 30rpx; |
|||
flex-grow: 1; |
|||
text-align: right; |
|||
> text { |
|||
color: #ff873d; |
|||
&:first-child { |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2) { |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
} |
|||
&:nth-child(3) { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.od-pay { |
|||
margin: 24rpx; |
|||
padding: 30rpx 28rpx; |
|||
flex-grow: 1; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
.op-line { |
|||
@include ctf(flex-start); |
|||
> view { |
|||
font-size: 28rpx; |
|||
line-height: 60rpx; |
|||
&:first-child { |
|||
color: #9a9a9d; |
|||
width: 140rpx; |
|||
} |
|||
&:nth-child(2) { |
|||
color: #333; |
|||
margin-left: 32rpx; |
|||
} |
|||
&:nth-child(3) { |
|||
color: $mColor; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.od-btn { |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 20rpx 18rpx 20rpx 0rpx; |
|||
padding-bottom: calc(20rpx ); |
|||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
@include isPd(20upx); |
|||
background-color: #fff; |
|||
border-top: 2rpx solid #f2f2f7; |
|||
@include ctf(flex-end); |
|||
> view { |
|||
width: 192rpx; |
|||
padding: 24rpx 0; |
|||
margin-right: 20rpx; |
|||
border-radius: 44rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
} |
|||
.ob-btn1 { |
|||
color: #9a9a9d; |
|||
border: 2rpx solid #d8d8d8; |
|||
} |
|||
.ob-btn2 { |
|||
color: $mColor; |
|||
border: 2rpx solid $mColor; |
|||
} |
|||
.ob-btn3 { |
|||
color: #fff; |
|||
background: linear-gradient(90deg, #44d7b6 0%, $mColor 100%); |
|||
} |
|||
} |
|||
.od-refund-modal { |
|||
position: absolute; |
|||
left: 56rpx; |
|||
top: 26%; |
|||
background-color: #fff; |
|||
width: 640rpx; |
|||
padding: 64rpx 48rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.orm-tit { |
|||
color: #333; |
|||
font-size: 34rpx; |
|||
font-weight: 700; |
|||
} |
|||
.orm-tips { |
|||
color: #9a9a9d; |
|||
font-size: 28rpx; |
|||
padding: 68rpx 0; |
|||
} |
|||
.orm-btn { |
|||
padding: 16rpx 52rpx; |
|||
border-radius: 10rpx; |
|||
background-color: $mColor; |
|||
color: #fff; |
|||
font-size: 34rpx; |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
.zindex{ |
|||
z-index: 9; |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,352 @@ |
|||
<template> |
|||
<view class="order-list"> |
|||
<view class="ol-head"> |
|||
<view class="oh-line"> |
|||
<view class="ol-ipt" @click="toOrderSearch"> |
|||
<image mode="aspectFit" src="/subpackage/mall/static/images/search.png"></image> |
|||
<input placeholder="搜索我的订单" disabled/> |
|||
</view> |
|||
<view class="ol-refund" @click="toRefundList">退款/售后</view> |
|||
</view> |
|||
<view class="tab-list"> |
|||
<block v-for="(e,i) in tabList" :key="i"> |
|||
<view :class="['tab_no', curTabID == e.id ? 'tab_yes':'']" @click="tabChange(e)"> |
|||
<view class="tab-txt">{{e.name}}</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
<block v-for="(e, i) in orderList" :key="i" v-if="orderList.length > 0"> |
|||
<order-list-item |
|||
:brand-id="brand_id" |
|||
:orderInfo="e" |
|||
@defineChange="defineChange" |
|||
></order-list-item> |
|||
</block> |
|||
<view class="ol-no-list" v-if="orderList.length == 0"> |
|||
<image src="/subpackage/mall/static/images/no_venue_order.png"></image> |
|||
<view>还没订单~去下一单!</view> |
|||
</view> |
|||
|
|||
<view class="ol-like" v-if="curTabID != -1 && orderList.length == 0"> |
|||
<view><view></view></view> |
|||
<view>❤️猜你喜欢</view> |
|||
<view><view></view></view> |
|||
</view> |
|||
<view class="ol-goods-list" v-if="curTabID != -1 && orderList.length == 0"> |
|||
<view class="ogl-item" v-for="(e, i) in likeGoodsList" :key="i"> |
|||
<goods-item |
|||
:poster="(e.product_imgs&&e.product_imgs[0]) || ''" |
|||
:name="e.product_name" |
|||
:price="e.product_price" |
|||
:product-id="e.id" |
|||
:brand-id="brand_id" |
|||
:is-del-price="e.product_spec_multi === 0&&e.product_price_show != 0" |
|||
:del-price="e.product_price_show || 0" |
|||
@click:add="addCartChange(e)" |
|||
></goods-item> |
|||
</view> |
|||
</view> |
|||
|
|||
<specification-modal ref="specificationModal" ></specification-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
|
|||
import orderListItem from '../modules/order/order_list_item.vue'; |
|||
import goodsItem from "../../components/goods_item.vue"; |
|||
import specificationModal from "../../components/specification_modal.vue"; |
|||
import { MALL_API } from "../../js/api"; |
|||
import server from "../../js/server"; |
|||
const tabList=[ |
|||
{name: '全部', id: -1}, {name: '待付款', id: 0}, {name: '待发货', id: 1}, {name: '待收货', id: 2}, {name: '待评价', id: 3} |
|||
]; |
|||
export default { |
|||
components: { |
|||
orderListItem, |
|||
goodsItem, |
|||
specificationModal, |
|||
}, |
|||
data() { |
|||
return { |
|||
tabList, |
|||
curTabID: -1, |
|||
page: 1, |
|||
orderList: [], |
|||
likeGoodsList: [], |
|||
brand_id: '', |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
let _bid = options?.brand_id ?? ''; |
|||
this.brand_id = _bid; |
|||
this.getLikeList({ brand_id: _bid }); |
|||
}, |
|||
onShow() { |
|||
let { brand_id } = this; |
|||
this.getOrderList({ brand_id }); |
|||
}, |
|||
onReachBottom(){ |
|||
let { page, brand_id } = this; |
|||
this.getOrderList({ page: ++page, brand_id }); |
|||
}, |
|||
methods: { |
|||
toOrderSearch(){ |
|||
util.routeTo(`../order_search/order_search`,'nT') |
|||
}, |
|||
toRefundList(){ |
|||
util.routeTo(`../refund_list/refund_list`,'nT') |
|||
}, |
|||
defineChange(e){ |
|||
let { brand_id } = this; |
|||
if(e == true) this.getOrderList({ brand_id }); |
|||
}, |
|||
// 订单-列表 |
|||
getOrderList({ brand_id, page = 1, page_size = 20,}){ |
|||
let { curTabID } = this; |
|||
let _query = { |
|||
brand_id, |
|||
page, |
|||
page_size, |
|||
} |
|||
if(curTabID == -1)_query['status'] = ''; |
|||
if(curTabID != -1)_query['status'] = curTabID; |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsOrderList, |
|||
data: _query, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('订单列表: ', res); |
|||
|
|||
let _list = res.list || []; |
|||
if(page == 1){ |
|||
this.orderList = _list; |
|||
return |
|||
} |
|||
if(_list.length<=0)return util.showNone('没有更多!'); |
|||
this.page = page; |
|||
this.orderList = [...this.orderList, ...res.list]; |
|||
console.log("列表长度: ",this.orderList.length) |
|||
console.log(res); |
|||
}); |
|||
}, |
|||
|
|||
tabChange: util.debounce(function(e){ |
|||
this.curTabID = e.id; |
|||
this.refreshList(); |
|||
}, 300, 300), |
|||
refreshList(){ |
|||
let { brand_id } = this; |
|||
this.page = 1; |
|||
this.orderList = []; |
|||
this.getOrderList({ brand_id }); |
|||
}, |
|||
|
|||
// 猜你喜欢 商品列表 pm:猜你喜欢分类,recommend固定为1,分类ID传空 |
|||
getLikeList({ brand_id, page = 1, page_size = 20}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.goodsList, |
|||
data: { |
|||
brand_id, |
|||
cateid: '', |
|||
show_sort: '', |
|||
recommend: 1, |
|||
page, |
|||
page_size, |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
this.likeGoodsList = res.list || [] |
|||
}); |
|||
}, |
|||
// 加入购物车 |
|||
addCartChange(e){ |
|||
let { brand_id } = this; |
|||
// 如果商品是多个规格属性的,则出现弹窗给用户选择规格加入购物车,如果是单规格的则直接加入购物车 |
|||
// 根据product_spec_multi字段做判断 等于1则是多规格 |
|||
if(e.product_spec_multi == 1){ |
|||
this.$refs.specificationModal.alert({ |
|||
id: e?.id ?? '', |
|||
brand_id: brand_id, |
|||
poster: e?.product_imgs?.[0] ?? '', |
|||
name: e?.product_name ?? '', |
|||
price: e?.product_price ?? '', |
|||
specArr: e?.product_spec ?? [], |
|||
}); |
|||
return |
|||
} |
|||
|
|||
this.$refs?.specificationModal?.goodsCartAdd({ brand_id, id: e?.id, }); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-list{ |
|||
position: relative; |
|||
padding-top: 216rpx; |
|||
@include isPd(20upx); |
|||
.ol-head{ |
|||
position: fixed; |
|||
top: 0; |
|||
z-index: 6; |
|||
width: 100%; |
|||
padding-top: 4rpx; |
|||
background-color: #fff; |
|||
border-bottom: 4rpx solid #F2F2F7; |
|||
.oh-line{ |
|||
padding: 28rpx 24rpx 0 24rpx; |
|||
@include ctf(space-between); |
|||
.ol-ipt{ |
|||
flex-grow: 1; |
|||
padding: 0 28rpx; |
|||
height: 72rpx; |
|||
border-radius: 36rpx; |
|||
border: 2rpx solid #009874; |
|||
@include ctf(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 24rpx; |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
& input{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
.ol-refund{ |
|||
flex-shrink: 0; |
|||
margin-left: 26rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.tab-list{ |
|||
width: 750rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
.tab_no{ |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
flex-grow: 1; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
.tab-txt{ |
|||
position: relative; |
|||
display: inline-block; |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
color: #9A9A9D; |
|||
&::after{ |
|||
content: ''; |
|||
transition: all .2s; |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 6rpx; |
|||
transform: translateX(-50%) translateY(50%); |
|||
display: block; |
|||
width: 70%; |
|||
height: 10rpx; |
|||
border-radius: 5rpx; |
|||
background-color: #009874; |
|||
opacity: 0; |
|||
} |
|||
} |
|||
&.tab_yes{ |
|||
.tab-txt{ |
|||
color: #009874; |
|||
&::after{ |
|||
opacity: 1; |
|||
transform: translateX(-50%) translateY(0); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ol-no-list{ |
|||
padding: 78rpx 0 96rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
>image{ |
|||
width: 346rpx; |
|||
height: 346rpx; |
|||
} |
|||
>view{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.ol-like{ |
|||
margin: 40rpx 0; |
|||
@include ctf(center); |
|||
>view{ |
|||
&:first-child{ |
|||
position: relative; |
|||
width: 60rpx; |
|||
height: 2rpx; |
|||
background-color: #D8D8D8; |
|||
>view{ |
|||
position: absolute; |
|||
top: -3rpx; |
|||
right: 0; |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
border-radius: 8rpx; |
|||
background-color: #D8D8D8; |
|||
} |
|||
|
|||
} |
|||
&:nth-child(2){ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin: 0 26rpx; |
|||
font-weight: 700; |
|||
} |
|||
&:nth-child(3){ |
|||
position: relative; |
|||
width: 60rpx; |
|||
height: 2rpx; |
|||
background-color: #D8D8D8; |
|||
>view{ |
|||
position: absolute; |
|||
top: -3rpx; |
|||
left: 0; |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
border-radius: 8rpx; |
|||
background-color: #D8D8D8; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ol-goods-list{ |
|||
padding: 0 24rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
.ogl-item{ |
|||
flex-shrink: 0; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,423 @@ |
|||
<template> |
|||
<!-- 退款申请 退款填写 --> |
|||
<view class="request-write"> |
|||
<view class="rw-goods"> |
|||
<!-- 2件商品以上 --> |
|||
<view class="rg-more" v-if="optionsQuery.goods_list.length > 1" @click="goBackChange"> |
|||
<view > |
|||
<view v-for="(e, i) in optionsQuery.goods_list" :key="i"> |
|||
<image class="rm-img" mode="aspectFill" :src="e.product_imgs || ''"></image> |
|||
<view class="rm-txt">{{e.product_name || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<text>共{{optionsQuery.goods_list.length || 0}}件</text> |
|||
<image src="/subpackage/mall/static/images/arrow_9ad.png"></image> |
|||
</view> |
|||
</view> |
|||
<!-- 1件商品 --> |
|||
<view class="rg-one" v-if="optionsQuery.goods_list.length == 1"> |
|||
<block v-for="(e, i) in optionsQuery.goods_list" :key="i"> |
|||
<image mode="aspectFill" :src="e.product_imgs || ''"></image> |
|||
<view>{{e.product_name || '-'}}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
<view class="rw-line"> |
|||
<view>售后方式</view> |
|||
<view>{{ setFeedbackType }}</view> |
|||
</view> |
|||
<!-- 退款原因 --> |
|||
<picker class="rw-picker" :range="pageInfo.question_type" @change="questionPickerChange"> |
|||
<view class="rp-cause"> |
|||
<view> |
|||
<view>请选择退款原因</view> |
|||
<view>*</view> |
|||
<view>{{ submitInfo.questionType }}</view> |
|||
</view> |
|||
<image src="/subpackage/mall/static/images/arrow_9ad.png" style="transform: rotateZ(90deg)"></image> |
|||
</view> |
|||
</picker> |
|||
<!-- 退款金额 --> |
|||
<view class="rw-price"> |
|||
<view> |
|||
<text>退款金额:</text> |
|||
<text>¥</text> |
|||
<text>{{pageInfo.refundable_amount || 0}}</text> |
|||
<text>(退还抵扣积分:{{pageInfo.refundable_deduction_integral || 0}}积分)</text> |
|||
</view> |
|||
<view>最大可退 ¥{{pageInfo.refundable_amount || 0}}(含运费¥0),退款将返回实际支付金额</view> |
|||
</view> |
|||
<!-- 退款描述 --> |
|||
<view class="rw-desc"> |
|||
<view class="rd-tit">退款说明</view> |
|||
<textarea class="rd-textarea" @blur="bindTextAreaBlur" placeholder="请输入内容" v-model="submitInfo.questionDesc"></textarea> |
|||
</view> |
|||
<!-- 上传图片 --> |
|||
<view class="rw-pic"> |
|||
<upload-image @uploadImageChange="uploadImageChange"></upload-image> |
|||
</view> |
|||
<view class="rw-btn"> |
|||
<view hover-class="hover-active" :class="[isQuestionType?'':'opa-gray']" @click="isQuestionType?submitBtn():''">提交</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import util from '@/utils/util'; |
|||
import server from "../../js/server"; |
|||
import { MALL_API } from "../../js/api"; |
|||
import uploadImage from '../modules/order/upload_image.vue' |
|||
export default { |
|||
components: { |
|||
'upload-image': uploadImage, |
|||
}, |
|||
computed: { |
|||
setFeedbackType(){ |
|||
let type = this.optionsQuery.feedback_type |
|||
if(type == 0) return "仅退款"; |
|||
if(type == 1) return "退货退款"; |
|||
else return ""; |
|||
}, |
|||
isQuestionType(){ |
|||
if(this.submitInfo.questionType != '')return true; |
|||
else return false; |
|||
}, |
|||
productCartIds(){ |
|||
let _list = this.optionsQuery.goods_list |
|||
let _arr = [] |
|||
for(var i in _list){ |
|||
_arr.push(_list[i].product_cart_id) |
|||
} |
|||
return _arr; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
brand_id: '', |
|||
optionsQuery: { |
|||
order_no: '', |
|||
feedbackDetail: [], |
|||
goods_list: [], |
|||
feedback_type: -1, |
|||
}, |
|||
submitInfo: { |
|||
questionType: '', |
|||
questionDesc: '', |
|||
questionImg: '', |
|||
}, |
|||
pageInfo: { |
|||
question_type: [], |
|||
}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
let _bid = options?.brand_id ?? ''; |
|||
this.brand_id = _bid; |
|||
let _query = util.jsonPar(options.query); |
|||
this.optionsQuery = _query |
|||
this.getFeedbackInfo({ |
|||
brand_id: _bid, |
|||
order_no: _query.order_no, |
|||
feedback_detail: _query.feedbackDetail, |
|||
}) |
|||
}, |
|||
methods: { |
|||
goBackChange(){ |
|||
uni.navigateBack({delta: 1}) |
|||
}, |
|||
// 文本域 |
|||
bindTextAreaBlur: function(e) { |
|||
this.submitInfo.questionDesc = e.detail.value |
|||
}, |
|||
// 上传图片 |
|||
uploadImageChange: function(e){ |
|||
console.log("选择的图片: " + e) |
|||
let images = e.join(","); |
|||
console.log("需要上传的图片: ",images) |
|||
this.submitInfo.questionImg = e.join(","); |
|||
}, |
|||
questionPickerChange(e){ |
|||
console.log(e); |
|||
let _questionList = this.pageInfo.question_type || []; |
|||
this.submitInfo.questionType = _questionList[e.detail.value] || '' |
|||
}, |
|||
|
|||
getFeedbackInfo({ brand_id, order_no, feedback_detail }){ |
|||
util.showLoad(); |
|||
server.post({ |
|||
url: MALL_API.feedbackInfo, |
|||
data: { |
|||
brand_id, |
|||
order_no, |
|||
feedback_detail, |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('feedbackInfo: ', res); |
|||
this.pageInfo = res |
|||
}); |
|||
}, |
|||
|
|||
getOrdeRefund(brand_id){ |
|||
server.post({ |
|||
url: MALL_API.goodsOrdeRefund, |
|||
data: { |
|||
brand_id, |
|||
order_no: this.optionsQuery.order_no, |
|||
product_cart_ids: this.productCartIds, |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
console.log('getOrdeRefund: ', res); |
|||
}); |
|||
}, |
|||
|
|||
getFeedbackSubmit({brand_id, order_no, question_type, question_desc, question_img, feedback_detail, feedback_type}){ |
|||
util.showLoad(); |
|||
server.post({ |
|||
url: MALL_API.feedbackSubmit, |
|||
data: { |
|||
brand_id, |
|||
order_no, |
|||
question_type, |
|||
question_desc, |
|||
question_img, |
|||
feedback_detail, |
|||
feedback_type, |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('feedbackSubmit: ', res); |
|||
this.getOrdeRefund(brand_id) |
|||
util.showNone('操作成功!'); |
|||
setTimeout(_=>uni.navigateBack({delta: 2}),1200) |
|||
}); |
|||
}, |
|||
submitBtn(){ |
|||
let { optionsQuery, submitInfo, brand_id } = this |
|||
this.getFeedbackSubmit({ |
|||
brand_id, |
|||
order_no: optionsQuery.order_no, |
|||
question_type: submitInfo.questionType, |
|||
question_desc: submitInfo.questionDesc, |
|||
question_img: submitInfo.questionImg, |
|||
feedback_detail: optionsQuery.feedbackDetail, |
|||
feedback_type: optionsQuery.feedback_type, |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.request-write{ |
|||
position: relative; |
|||
width: 100%; |
|||
@include isPd(150upx); |
|||
.rw-goods{ |
|||
margin: 24rpx; |
|||
padding: 30rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
.rg-more{ |
|||
flex-grow: 1; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
@include ctf(flex-start); |
|||
>view{ |
|||
.rm-img{ |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
.rm-txt{ |
|||
color: #333; |
|||
font-size: 24rpx; |
|||
margin-top: 6rpx; |
|||
max-width: 152rpx; |
|||
@include tHide(1); |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
margin-top: -40rpx; |
|||
@include ctf(flex-start); |
|||
>text{ |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
} |
|||
>image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-left: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rg-one{ |
|||
flex-grow: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
@include tHide(2); |
|||
} |
|||
} |
|||
} |
|||
.rw-line{ |
|||
margin: 0rpx 24rpx; |
|||
padding: 24rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
.rw-picker{ |
|||
width: 100%; |
|||
.rp-cause{ |
|||
margin:24rpx; |
|||
padding: 24rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
flex-grow: 1; |
|||
@include ctf(flex-start); |
|||
>view{ |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
color: #9A9A9D; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
color: #FF873D; |
|||
} |
|||
&:nth-child(3){ |
|||
flex-grow: 1; |
|||
color: #333; |
|||
margin-left: 30rpx; |
|||
@include tHide(1); |
|||
} |
|||
} |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.rw-price{ |
|||
margin: 0rpx 24rpx; |
|||
padding: 26rpx 20rpx 30rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
>view{ |
|||
&:first-child{ |
|||
>text{ |
|||
color: #FF873D; |
|||
margin-bottom: 10rpx; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
color: #9A9A9D; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(3){ |
|||
font-size: 32rpx; |
|||
} |
|||
&:nth-child(4){ |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
.rw-desc{ |
|||
flex-grow: 1; |
|||
margin: 24rpx; |
|||
padding: 30rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
.rd-tit{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.rd-textarea{ |
|||
width: 100%; |
|||
height: 150rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.rw-pic{ |
|||
margin: 0rpx 24rpx; |
|||
padding: 30rpx 20rpx 38rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
} |
|||
.rw-btn{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 20rpx 0rpx; |
|||
padding-bottom: calc(20rpx ); |
|||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
width: 100%; |
|||
background-color: #fff; |
|||
>view{ |
|||
flex-grow: 1; |
|||
margin: 0rpx 24rpx; |
|||
padding: 22rpx 0rpx; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
border-radius: 44rpx; |
|||
background: linear-gradient(90deg, #44D7B6 0%, $mColor 100%); |
|||
opacity: 1; |
|||
} |
|||
.opa-gray{ |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,423 @@ |
|||
<template> |
|||
<view class="order-pay"> |
|||
<view class="op-header"> |
|||
<view class="oh-stadium"> |
|||
<image mode='aspectFit' :src="storeInfo.logo || ''"></image> |
|||
<text>{{ storeInfo.name || '-' }}</text> |
|||
</view> |
|||
<view class="oh-type-tip">{{ get_zh_tip(option_query.pay_type) || '-' }}</view> |
|||
<view class="oh-price"><text>¥</text>{{ payAmount || '0.00' }}</view> |
|||
<!-- <view class="oh-discount">原价:¥{{option_query.price || '0.00'}},<text>折扣金额¥{{ discountAmount || '0.00' }}</text></view> --> |
|||
</view> |
|||
|
|||
<view class="op-pay-method"> |
|||
<!-- <view class="opm-value-card" v-if="vipCardList&&vipCardList.length"> |
|||
<view class="ovc-tit"> |
|||
<image mode="aspectFit" src="/static/image/icon/vip_pay.png"></image> |
|||
储值卡支付 |
|||
</view> |
|||
<view class="ovc-list"> |
|||
<view class="ol-item" v-for="(e, i) in vipCardList" :key="i" @click="cardSelect(e)"> |
|||
<view class="oi-left"> |
|||
<view class="ol-name">{{ e.card_name || '-' }}</view> |
|||
<view class="ol-balance">当前余额:{{ e.card_balance || '0.00' }}元</view> |
|||
</view> |
|||
<view class="oi-right"> |
|||
<view class="or-tag">{{ e.discount != 10 ? '折扣:' : '' }}{{ e.discount == 10 ? '不打' : e.discount || '-' }}折</view> |
|||
<view class="or-icon" :class="{ 's-active': payType == 1&&payCardInfo.card_no == e.card_no }"> |
|||
<image mode="aspectFit" src="/static/image/icon/selected.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
<view class="opm-weixin" @click="wxPaySelect"> |
|||
<view class="ow-left"> |
|||
<image mode="aspectFit" src="/subpackage/mall/static/images/wx_pay.png"></image> |
|||
微信支付 |
|||
</view> |
|||
<view class="ow-icon" :class="{ 's-active': payType == 0 }"> |
|||
<image mode="aspectFit" src="/subpackage/mall/static/images/selected2.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="op-fixed"> |
|||
<view hover-class="hover-active" @click="confirmPay">立即支付</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import util from '@/utils/util' |
|||
import { mapState } from 'vuex' |
|||
|
|||
import { MALL_API } from "../../js/api"; |
|||
import server from "../../js/server"; |
|||
/** |
|||
* option_query @Object |
|||
* pay_type 4->商城 |
|||
* price 支付金额 |
|||
* order_no 订单号 |
|||
* |
|||
* 选传--------- |
|||
* stadium_id 场馆id (调试) |
|||
*/ |
|||
export default { |
|||
computed: { |
|||
...mapState([ 'APPID','storeInfo', 'brandInfo' ]), |
|||
// 支付金额 |
|||
payAmount(){ |
|||
let { payCardInfo, option_query } = this; |
|||
if(payCardInfo){ |
|||
return payCardInfo.pay_amount |
|||
} |
|||
return (option_query?.price || 0); |
|||
}, |
|||
// 折扣金额 |
|||
discountAmount(){ |
|||
// pay_amount |
|||
let { payCardInfo, option_query } = this; |
|||
if(payCardInfo){ |
|||
let discount_price = option_query.price-payCardInfo.pay_amount |
|||
return discount_price.toFixed(2) |
|||
} |
|||
return '0.00'; |
|||
}, |
|||
}, |
|||
|
|||
data(){ |
|||
return { |
|||
option_query: { // 操作参数 |
|||
pay_type: -1, |
|||
// 支付类型 |
|||
// 0-> 预约场馆支付金额, 1 -> 人/时订场支付 2 -> 次卡, |
|||
// 3 -> 课程, 4->商城, 5->咖啡机, 6->租售柜, 7->储物柜, 8->售货柜, |
|||
price: 0, // 支付金额 |
|||
order_no: '', // 订单号 |
|||
order_id: '', // 订单id // 展示没用上 |
|||
}, |
|||
vipCardList: [], |
|||
get_zh_tip, |
|||
payType: 0, // 0-> 微信,1-> 会员卡 |
|||
payCardInfo: null, // 支付会员卡信息 |
|||
// 限制支付点击 |
|||
isWxPaying: false, // 微信支付中 |
|||
isToDoing: false // 支付成功跳转中 |
|||
} |
|||
}, |
|||
async onLoad(options){ |
|||
// util.showLoad(); |
|||
// if(options.stadium_id)await this.$store.dispatch('initStoreInfo', options.stadium_id || ''); |
|||
// util.hideLoad(); |
|||
this.option_query = util.jsonPar(options.query); |
|||
// this.getMyVipCard(this.option_query); |
|||
}, |
|||
onHide(){ |
|||
this.isWxPaying = false; |
|||
this.isToDoing = false; |
|||
}, |
|||
methods: { |
|||
cardSelect(e){ |
|||
this.payType = 1; |
|||
this.payCardInfo = e; |
|||
}, |
|||
wxPaySelect(){ |
|||
this.payType = 0; |
|||
this.payCardInfo = null; |
|||
}, |
|||
confirmPay: util.debounce(function(){ |
|||
let { payType } = this; |
|||
if(this.isWxPaying || this.isToDoing)return; |
|||
if(payType === 0)this.wxPay(); |
|||
if(payType === 1)this.vipPay(); |
|||
}, 500, true), |
|||
|
|||
// vipPay(){ |
|||
// let { storeInfo, APPID, option_query, payCardInfo, getPayApi } = this; |
|||
// // return console.log(option_query.order_no) |
|||
// if(!getPayApi().vip)return util.showNone('没有会员支付'); |
|||
// util.showLoad(); |
|||
// servers.get({ |
|||
// url: getPayApi().vip, |
|||
// data: { |
|||
// card_no: payCardInfo.card_no, |
|||
// order_no: option_query.order_no, |
|||
// stadium_id: storeInfo.id, |
|||
// type: "v2.0", //新版储值卡支付需传这个字段 |
|||
// }, |
|||
// isDefaultGet: false, |
|||
// }) |
|||
// .then(res=>{ |
|||
// util.hideLoad(); |
|||
// if(res.data.code == 0){ |
|||
// let _data = res.data.data || {}; |
|||
// util.showNone(res.data.message || '支付成功!'); |
|||
// // 会员卡支付没有积分 |
|||
// this.successToDo({ order_no: _data.order_no || option_query.order_no || '' }); |
|||
// }else{ |
|||
// util.showNone(res.data.message || '会员卡支付失败!') |
|||
// } |
|||
// }) |
|||
// .catch(err=>{ |
|||
// util.hideLoad(); |
|||
// console.error('会员卡支付失败--->', err); |
|||
// }) |
|||
// }, |
|||
getPayApi(){ |
|||
let _type = this.option_query.pay_type; |
|||
if(_type == -1)return {}; |
|||
return { |
|||
wx: MALL_API.orderPay, |
|||
vip: MALL_API.orderPayVip, |
|||
} |
|||
}, |
|||
wxPay(){ |
|||
let { storeInfo, APPID, option_query, getPayApi } = this; |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: getPayApi().wx, |
|||
data: { |
|||
appid: APPID, |
|||
mch_id: storeInfo.pay_wechat_mch_id, |
|||
order_no: option_query.order_no, |
|||
stadium_id: storeInfo.id |
|||
}, |
|||
failMsg: '生成支付信息失败!' |
|||
}).then(res=>{ |
|||
util.hideLoad(); |
|||
if(res.pay_amount == 0)return this.successToDo({ integral: res.integral || 0, order_no: res.order_no || option_query.order_no || '' }); |
|||
this.isWxPaying = true; |
|||
uni.requestPayment({ |
|||
...res, |
|||
success: sucRes => { |
|||
util.showNone('支付成功!'); |
|||
this.successToDo({ integral: res.integral || 0, order_no: res.order_no || option_query.order_no || '' }); |
|||
}, |
|||
fail(errRes){ |
|||
console.error('支付失败--->',errRes); |
|||
if(errRes.errMsg.indexOf('cancel') != -1){ |
|||
setTimeout(_=>util.routeTo(),1200); |
|||
return util.showNone('取消支付') |
|||
}; |
|||
util.showNone(errRes.errMsg || '支付失败稍后重试!'); |
|||
}, |
|||
complete: payRes=>{ |
|||
this.isWxPaying = false; |
|||
console.log(payRes,'payRes'); |
|||
} |
|||
}) |
|||
}) |
|||
.catch(err=>{ |
|||
util.hideLoad(); |
|||
console.error('生成支付信息失败--->',err); |
|||
}) |
|||
}, |
|||
successToDo({ |
|||
// 支付成功跳转 |
|||
integral = 0, |
|||
order_no = '' |
|||
}){ |
|||
this.isToDoing = true; |
|||
let { option_query, storeInfo } = this; |
|||
let _type = this.option_query.pay_type; |
|||
setTimeout(()=>{ |
|||
if(_type == 4){ |
|||
return util.routeTo(`/subpackage/mall/pages/pay/pay_success/pay_success?order_no=${option_query.order_no}&integral=${integral}`,'rT'); |
|||
} |
|||
},2000); |
|||
}, |
|||
|
|||
// type=1/2就是不打折的 type=0就是打折的 |
|||
getMyVipCard(query){ |
|||
let { storeInfo, brandInfo } = this; |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: MALL_API.canPayCard, |
|||
data: { |
|||
stadium_id: storeInfo.id, |
|||
brand_id: brandInfo.id, |
|||
price: query.price, |
|||
order_no: query.order_no, |
|||
}, |
|||
failMsg: '加载会员卡失败!', |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.vipCardList = res || []; |
|||
if(!Array.isArray(res) || res.length <= 0)return; |
|||
this.payType = 1; |
|||
this.payCardInfo = res[0]; |
|||
}) |
|||
.catch(err=>{ |
|||
util.hideLoad(); |
|||
console.error('获取会员卡失败--->',err); |
|||
}) |
|||
} |
|||
} |
|||
|
|||
} |
|||
function get_zh_tip(type) { |
|||
let _obj = { |
|||
'4': '商城支付金额', |
|||
} |
|||
return _obj[ type + '' ] |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
page{ |
|||
background: #EDEDF5; |
|||
} |
|||
.order-pay{ |
|||
@include isPd(152upx); |
|||
} |
|||
.op-header{ |
|||
.oh-stadium{ |
|||
padding: 0 30upx; |
|||
@include flcw($height: 100upx, $weight: 500); |
|||
@include tHide; |
|||
>image{ |
|||
margin-right: 10upx; |
|||
vertical-align: middle; |
|||
width: 30upx; |
|||
height: 30upx; |
|||
} |
|||
} |
|||
.oh-type-tip{ |
|||
padding: 0 30upx; |
|||
margin-top: 8upx; |
|||
text-align: center; |
|||
@include flcw(24upx, 50upx, #9A9A9D); |
|||
@include tHide; |
|||
} |
|||
.oh-price{ |
|||
padding: 0 30upx; |
|||
text-align: center; |
|||
letter-spacing: 2upx; |
|||
@include flcw(80upx, 112upx, #333, 500); |
|||
@include tHide; |
|||
>text{ |
|||
font-size: 60upx; |
|||
} |
|||
} |
|||
.oh-discount{ |
|||
padding: 0 30upx; |
|||
text-align: center; |
|||
@include flcw; |
|||
@include tHide; |
|||
>text{ |
|||
color: #FF873D; |
|||
} |
|||
} |
|||
|
|||
} |
|||
/* 支付方式选中 icon */ |
|||
@mixin sIcon{ |
|||
flex-shrink: 0; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
font-size: 0; |
|||
border: 2upx solid #9F9FAA; |
|||
border-radius: 50%; |
|||
>image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 0; |
|||
} |
|||
&.s-active{ |
|||
border-color: transparent; |
|||
border-width: 0upx; |
|||
>image{ |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
.op-pay-method{ |
|||
margin-top: 60upx; |
|||
padding: 0 24upx; |
|||
.opm-value-card{ |
|||
padding: 40upx 20upx 20upx; |
|||
border-radius: 10upx; |
|||
background: #F0FDFA; |
|||
.ovc-tit{ |
|||
@include flcw(32upx, 44upx, #333, 500); |
|||
>image{ |
|||
vertical-align: middle; |
|||
margin-right: 20upx; |
|||
width: 44upx; |
|||
height: 44upx; |
|||
} |
|||
} |
|||
.ovc-list{ |
|||
margin-top: 20upx; |
|||
padding-left: 40upx; |
|||
background: #fff; |
|||
border-radius: 6upx; |
|||
.ol-item{ |
|||
padding: 20upx 20upx 30upx 0upx; |
|||
@include ctf(space-between); |
|||
&:nth-child(n+2){ |
|||
border-top: 1px solid #EDEDF5; |
|||
} |
|||
.oi-left{ |
|||
.ol-name{ |
|||
@include flcw($height: 44upx); |
|||
@include tHide; |
|||
} |
|||
.ol-balance{ |
|||
@include flcw(20upx, 28upx, $mColor, 500); |
|||
@include tHide; |
|||
} |
|||
} |
|||
.oi-right{ |
|||
flex-shrink: 0; |
|||
@include ctf(flex-end); |
|||
.or-tag{ |
|||
padding: 0 4upx; |
|||
border: 1px solid #FF873D; |
|||
border-radius: 4upx; |
|||
@include flcw(18upx, 26upx, #FF873D); |
|||
} |
|||
} |
|||
.or-icon{ |
|||
margin-left: 20upx; |
|||
@include sIcon; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.opm-weixin{ |
|||
margin-top: 24upx; |
|||
padding-left: 20upx; |
|||
padding-right: 40upx; |
|||
height: 124upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
@include ctf(space-between); |
|||
.ow-left{ |
|||
@include flcw(32upx, 44upx, #333); |
|||
>image{ |
|||
margin-right: 20upx; |
|||
vertical-align: middle; |
|||
width: 44upx; |
|||
height: 44upx; |
|||
} |
|||
} |
|||
.ow-icon{ |
|||
@include sIcon; |
|||
} |
|||
} |
|||
} |
|||
.op-fixed{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 10upx 20upx; |
|||
@include isPd(10upx); |
|||
>view{ |
|||
border-radius: 10upx; |
|||
text-align: center; |
|||
background: $mColor; |
|||
@include flcw(32upx, 92upx, #fff, 500); |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,841 @@ |
|||
<template> |
|||
<view class="pay-confirm"> |
|||
<view class="pc-head"> |
|||
<view class="ph-tab"> |
|||
<!-- |
|||
<block v-for="(e,i) in ['快递配送','门店自提']" :key="i"> |
|||
<view :class="['tab_no', tabIdx == i ? 'tab_yes':'']" @click="tabChange(i)">{{e}}</view> |
|||
</block> |
|||
--> |
|||
|
|||
<!-- 20240119 隐藏快递 --> |
|||
<block v-for="(e,i) in ['门店自提']" :key="i"> |
|||
<view :class="['tab_no', tabIdx == 1 ? 'tab_yes':'']" @click="tabChange(1)">{{e}}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
<!-- 选择快递 --> |
|||
<view class="pc-address" v-if="tabIdx == 0" @click="toAddressList"> |
|||
<image class="pa-icon" src="/subpackage/mall/static/images/position.png"></image> |
|||
<!-- 未填写快递地址 --> |
|||
<view class="pa-line" v-if="!addressInfo"> |
|||
<view>您暂没填写快递地址,请选填写快递地址</view> |
|||
<image src="/subpackage/mall/static/images/arrow_9ad.png"></image> |
|||
</view> |
|||
<!-- 已填写快递地址 --> |
|||
<view class="pa-detail" v-else> |
|||
<view> |
|||
<text>{{addressInfo.username || '-'}}</text> |
|||
<text>{{addressInfo.mobile || '-'}}</text> |
|||
</view> |
|||
<view> |
|||
<text>{{addressInfo.province || ''}}{{addressInfo.city || ''}}{{addressInfo.area || ''}}{{addressInfo.addr || ''}}</text> |
|||
<image src="/subpackage/mall/static/images/arrow_9ad.png"></image> |
|||
</view> |
|||
</view> |
|||
<image class="pa-end" src="/subpackage/mall/static/images/line.png"></image> |
|||
</view> |
|||
<!-- 选择自提 --> |
|||
<view class="pc-self" v-if="tabIdx == 1"> |
|||
<!-- 支持自提 --> |
|||
<block v-if="selfAddrList.length > 0"> |
|||
<view class="ps-address" @click="isAddressModel = !isAddressModel"> |
|||
<view class="pa-store"> |
|||
<view> |
|||
<text>{{selfPickup.store_name || '-'}}</text> |
|||
<text>最近自提点</text> |
|||
</view> |
|||
<view>{{selfPickup.store_addr || '-'}}</view> |
|||
</view> |
|||
<view class="pa-route" @click.stop="toWxMap"> |
|||
<image src="/subpackage/mall/static/images/road_sign.png"></image> |
|||
<view>路线</view> |
|||
</view> |
|||
</view> |
|||
<view class="ps-info" > |
|||
<block v-for="(e, i) in selfList" :key="i"> |
|||
<view class="pi-box"> |
|||
<view class="pb-tit">{{e.tit}}</view> |
|||
<picker |
|||
v-if="i == 0" |
|||
mode="multiSelector" |
|||
@change="bindDateChange" |
|||
:value="dateSelected" |
|||
:range="dateArray" |
|||
:range-key="'en'" |
|||
> |
|||
<input class="pb-txt" type="text" placeholder="选择时间" v-model="e.txt" disabled /> |
|||
</picker> |
|||
<input |
|||
v-if="i != 0" |
|||
class="pb-txt" |
|||
type="text" |
|||
:placeholder="i == 1?'输入电话':'输入姓名'" |
|||
v-model="e.txt" |
|||
disabled |
|||
@click="onSelfChange(i)" |
|||
/> |
|||
</view> |
|||
<view class="pi-line" v-if="i != 2"> |
|||
<view class="pl-sign" v-for="j in 10" :key="j"></view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
<!-- 不支持自提 --> |
|||
<!-- <view class="ps-desc" v-else> |
|||
<view>很抱歉!暂不支持自提,请选择快递配送~</view> |
|||
<view>订单中有不可自提的商品或门店不支持商品自提</view> |
|||
</view> --> |
|||
<!-- 20240119 隐藏快递 --> |
|||
<view class="ps-desc" v-else> |
|||
<view>很抱歉!暂不支持自提</view> |
|||
</view> |
|||
<image class="ps-end" src="/subpackage/mall/static/images/line.png"></image> |
|||
</view> |
|||
<!-- 商品信息 --> |
|||
<view class="pc-info"> |
|||
<view class="pi-tit">商品信息</view> |
|||
<view class="pi-line" @click="toProductInfo"> |
|||
<view > |
|||
<view v-for="(e, i) in optionsQuery.goodsList" :key="i" v-if="i < 3"> |
|||
<image class="pi-img" mode="aspectFill" :src="e.product_imgs || ''"></image> |
|||
<view class="pi-txt">{{e.product_name || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<text>共{{optionsQuery.goodsList.length || 0}}件</text> |
|||
<image src="/subpackage/mall/static/images/arrow_9ad.png"></image> |
|||
</view> |
|||
</view> |
|||
<view class="pi-price"> |
|||
<text>商品金额合计:</text> |
|||
<text>¥{{optionsQuery.price_amount || 0}}</text> |
|||
</view> |
|||
</view> |
|||
<!-- 使用优惠 积分 优惠券 --> |
|||
<view class="pc-discount"> |
|||
<view class="pd-line"> |
|||
<view>运费</view> |
|||
<view>¥{{ shippingAmount || 0}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 订单备注 --> |
|||
<view class="pc-desc"> |
|||
<view>订单备注</view> |
|||
<input :class="{changeSize: orderRemark!=''}" type="text" v-model="orderRemark" placeholder="选填" @change="descChange" /> |
|||
</view> |
|||
|
|||
<!-- 应付金额 --> |
|||
<!-- <view class="pc-end"> |
|||
<view> |
|||
<text>应付金额:</text> |
|||
<text>¥{{payInfo.pay_amount || 0}}</text> |
|||
</view> |
|||
<view @click="toPay" hover-class="hover-active">提交订单</view> |
|||
</view> --> |
|||
<submit-bar @btn_evemt="toPay" :price="payInfo.pay_amount || 0"></submit-bar> |
|||
|
|||
<!-- 弹框 选择自提地点 --> |
|||
<self-pickup-addr |
|||
v-if="isAddressModel" |
|||
:selfAddressList="selfAddrList" |
|||
:selfSelectAddr="selfPickup" |
|||
@selfSelectAddrChange="selfSelectAddrChange" |
|||
@selfAddrCloseChange="isAddressModel = !isAddressModel" |
|||
></self-pickup-addr> |
|||
<!-- 弹框 输入电话号码 --> |
|||
<view class="fixed-mask m-zidx" v-if="isPhoneModel" @touchmove.stop.prevent="moveHandle" @click="isPhoneModel = !isPhoneModel"> |
|||
<view class="pc-input-modal" @click.stop> |
|||
<view class="pim-close"> |
|||
<image src="/subpackage/mall/static/images/close_c97.png" @click.stop="isPhoneModel = !isPhoneModel"></image> |
|||
</view> |
|||
<view class="pim-title">输入电话号码</view> |
|||
<input type="number" maxlength="11" v-model="selfList[1].txt" @change="phoneChange" placeholder="请输入电话号码"/> |
|||
</view> |
|||
</view> |
|||
<!-- 弹框 输入姓名 --> |
|||
<view class="fixed-mask m-zidx" v-if="isUsernameModel" @touchmove.stop.prevent="moveHandle" @click="isUsernameModel = !isUsernameModel"> |
|||
<view class="pc-input-modal" @click.stop> |
|||
<view class="pim-close"> |
|||
<image src="/subpackage/mall/static/images/close_c97.png" @click.stop="isUsernameModel = !isUsernameModel"></image> |
|||
</view> |
|||
<view class="pim-title">输入姓名</view> |
|||
<input type="text" v-model="selfList[2].txt" @change="usernameChange" placeholder="请输入姓名"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import selfPickupAddr from '../modules/pay/self_pickup_addr.vue'; |
|||
import submitBar from '../../components/submit_bar.vue'; |
|||
import { mapState } from 'vuex'; |
|||
import { MALL_API } from "../../js/api"; |
|||
import server from "../../js/server"; |
|||
//今天(周四)14:00 |
|||
const selfList = [{tit: '自提时间', txt: '',}, {tit: '电话', txt: '',}, {tit: '姓名', txt: '',}]; |
|||
export default { |
|||
components: { |
|||
'self-pickup-addr': selfPickupAddr, |
|||
'submit-bar': submitBar, |
|||
}, |
|||
computed: { |
|||
...mapState(['storeInfo']), |
|||
dateArray(){ |
|||
let dateArr = [{en:'今天'},{en:'明天'},{en:'后天'}]; |
|||
let timeArr = [] |
|||
if(this.selfDate.times) timeArr = this.selfDate.times.map(item => ({en:item})); |
|||
return [dateArr, timeArr]; |
|||
}, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
selfList, |
|||
// 20240119 隐藏快递 |
|||
tabIdx: 1, |
|||
addressInfo: null, |
|||
isAddressModel: false, //自提选择地址弹框 |
|||
isPhoneModel: false, //自提输入手机号弹框 |
|||
isUsernameModel: false, //自提输入取货人弹框 |
|||
dateSelected: [0, 0], //自提选中的日期 |
|||
orderRemark: "", //订单备注 |
|||
optionsQuery: {}, |
|||
payInfo: {}, |
|||
selfPickup: {}, //选中的自提地址 |
|||
selfAddrList: [], //可自提门店列表 |
|||
selfDate: {}, //获取自提时间 |
|||
selfgTiem: "", // 选中需要传的自提时间 |
|||
totalPrice: 0, //总价 商品总价+运费 |
|||
shippingAmount: 0, //运费 |
|||
brand_id: '', |
|||
} |
|||
}, |
|||
async onLoad(options) { |
|||
let _bid = options?.brand_id || ''; |
|||
this.brand_id = _bid; |
|||
let _query = util.jsonPar(options.query); |
|||
this.optionsQuery = _query |
|||
// 20240119 隐藏快递 |
|||
// this.getLogisticsAmount() |
|||
this.getOrderUsingStores({ |
|||
gobuy: _query.go_buy, |
|||
brand_id: _bid, |
|||
}) |
|||
this.getLogisticsTime(_bid); |
|||
// 20240119 隐藏快递 |
|||
this.tabChange(1); |
|||
for(var i in this.selfList){ |
|||
this.selfList[i].txt = "" |
|||
} |
|||
}, |
|||
onShow() { |
|||
let { brand_id } = this; |
|||
this.getAddrList(brand_id); |
|||
}, |
|||
methods: { |
|||
moveHandle(){}, |
|||
get_zh_day(date){ |
|||
// if(isSameDay(new Date().getTime(),new Date(date).getTime()))return '今天' |
|||
const Arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; |
|||
return Arr[new Date(date).getDay()] || ''; |
|||
}, |
|||
//确认订单-获取自提门店信息 |
|||
getOrderUsingStores({ gobuy, brand_id }) { |
|||
util.showLoad(); |
|||
server |
|||
.get({ |
|||
url: MALL_API.goodsOrderUsingStores, |
|||
data: { |
|||
brand_id, |
|||
order_no: '', //订单编号,传空则为[确认订单获取] |
|||
gobuy, |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('确认订单获取自提门店信息: ', res); |
|||
if(res != null){ |
|||
this.selfAddrList = res; |
|||
let _selfPickup = {} |
|||
_selfPickup["lat"] = res[0].lat |
|||
_selfPickup["lng"] = res[0].lng |
|||
_selfPickup["store_id"] = res[0].id |
|||
_selfPickup["store_name"] = res[0].venue_name |
|||
_selfPickup["store_addr"] = res[0].venue_addr |
|||
this.selfPickup = _selfPickup |
|||
} |
|||
|
|||
}); |
|||
}, |
|||
// 门店自提时间 |
|||
getLogisticsTime(brand_id) { |
|||
server |
|||
.get({ |
|||
url: MALL_API.getLogisticsTime, |
|||
data: { brand_id }, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
console.log('获取门店自提时间: ', res); |
|||
this.selfDate = res |
|||
}); |
|||
}, |
|||
// 获取运费 |
|||
getLogisticsAmount(brand_id) { |
|||
server |
|||
.get({ |
|||
url: MALL_API.getLogisticsAmount, |
|||
data: { |
|||
brand_id, |
|||
amount: this.optionsQuery.price_amount, |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
console.log('获取运费: ', res); |
|||
this.shippingAmount = res.shipping_amount || 0 |
|||
this.totalPrice = parseFloat(this.shippingAmount) + parseFloat(this.optionsQuery.price_amount); |
|||
this.getPayInfo({ brand_id }); |
|||
}); |
|||
}, |
|||
// 确认订单-提交订单 |
|||
getOrderConfirm() { |
|||
let { addressInfo, selfPickup, selfList, optionsQuery, brand_id } = this |
|||
let _query = {} |
|||
_query["brand_id"] = brand_id; |
|||
_query["gobuy"] = optionsQuery.go_buy; |
|||
_query["self_pickup"] = this.tabIdx; //是否自提 0-否 1-是 |
|||
_query["remark"] = this.orderRemark; //订单备注 |
|||
_query["integral"] = this.payInfo.use_integral; //积分 |
|||
if(this.tabIdx == 0){ |
|||
_query["custom_name"] = addressInfo.username; //快递时传,收货人姓名 |
|||
_query["custom_phone"] = addressInfo.mobile; //快递时传,收货人联系电话 |
|||
_query["custom_addr"] = addressInfo.province + addressInfo.city + addressInfo.area + addressInfo.addr; //快递时传,收货人地址 |
|||
} |
|||
if(this.tabIdx == 1){ |
|||
_query["store_id"] = selfPickup.store_id; //自提时传,店铺ID |
|||
_query["store_name"] = selfPickup.store_name; //自提时传,店铺名称 |
|||
_query["store_addr"] = selfPickup.store_addr; //自提时传,店铺地址 |
|||
_query["user_name"] = selfList[2].txt; //自提时传,预留姓名 |
|||
_query["user_phone"] = selfList[1].txt; //自提时传,预留电话 |
|||
_query["user_gtime"] = this.selfgTiem; //自提时传,自提时间 |
|||
} |
|||
util.showLoad(); |
|||
server |
|||
.post({ |
|||
url: MALL_API.goodsOrderConfirm, |
|||
data: _query, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('确认订单提交订单: ', res); |
|||
// let _query = this.optionsQuery |
|||
// _query['pay_amount'] = this.payInfo.pay_amount |
|||
// _query['order_no'] = res.order.order_no |
|||
// util.routeTo(`../pay_order/pay_order?query=${util.jsonStr(_query)}`,'rT') |
|||
this.$nextTick(_=>{ |
|||
let _query = {} |
|||
_query['price'] = res?.pay_amount ?? 0; |
|||
_query['order_no'] = res?.order.order_no ?? ''; |
|||
_query['pay_type'] = 4 //商城支付类型 |
|||
util.routeTo(`/subpackage/mall/pages/pay/order_pay?query=${util.jsonStr(_query)}`,'rT') |
|||
}) |
|||
|
|||
}); |
|||
}, |
|||
toPay(){ |
|||
let { tabIdx, selfAddrList, selfgTiem, selfList } = this |
|||
if(tabIdx==1 && selfAddrList.length == 0)return util.showNone("请选择快递方式"); |
|||
if(tabIdx==1 && selfgTiem=='')return util.showNone("请选择自提时间"); |
|||
if(tabIdx==1 && selfList[1].txt=='')return util.showNone("请填写预留电话"); |
|||
if(tabIdx==1 && selfList[2].txt=='')return util.showNone("请填写预留姓名"); |
|||
|
|||
|
|||
this.getOrderConfirm() |
|||
}, |
|||
tabChange(index){ |
|||
let { brand_id } = this; |
|||
this.tabIdx = index; |
|||
if(this.tabIdx == 0){ |
|||
this.getLogisticsAmount(brand_id) |
|||
} |
|||
if(this.tabIdx == 1){ |
|||
this.totalPrice = this.optionsQuery.price_amount; |
|||
this.shippingAmount = 0; |
|||
this.getPayInfo({ brand_id }); |
|||
} |
|||
}, |
|||
toAddressList(){ |
|||
util.routeTo(`/pages/mine/address_list/address_list?back_func=setAddrInfo`,'nT'); |
|||
}, |
|||
getAddrList(brand_id){ |
|||
server.get({ |
|||
url: MALL_API.addrList, |
|||
data: { brand_id }, |
|||
failMsg: '获取地址信息失败 ' |
|||
}) |
|||
.then(res=>{ |
|||
if(Array.isArray(res)&&res.length>0){ |
|||
this.addressInfo = res.filter(e=>e.is_default)[0] || res[0]; |
|||
} |
|||
}) |
|||
}, |
|||
setAddrInfo(info){ |
|||
this.addressInfo = info |
|||
}, |
|||
selfSelectAddrChange(e){ |
|||
this.selfPickup = e |
|||
this.isAddressModel = false |
|||
console.log("选中的自提门店:",this.selfPickup ) |
|||
}, |
|||
toWxMap(){ |
|||
let { selfPickup } = this |
|||
wx.openLocation({ |
|||
latitude: +selfPickup.lat, |
|||
longitude: +selfPickup.lng, |
|||
name: selfPickup.store_name, |
|||
address: selfPickup.store_addr |
|||
}) |
|||
}, |
|||
// 备注 |
|||
descChange: util.debounce(function(e) { |
|||
this.orderRemark = e.detail.value || ''; |
|||
},300,300), |
|||
phoneChange: util.debounce(function(e) { |
|||
this.selfList[1].txt = e.detail.value || ''; |
|||
},300,300), |
|||
usernameChange: util.debounce(function(e) { |
|||
this.selfList[2].txt = e.detail.value || ''; |
|||
},300,300), |
|||
|
|||
onSelfChange(index){ |
|||
// if(index == 0) return; |
|||
if(index == 1) return this.isPhoneModel = true; |
|||
if(index == 2) return this.isUsernameModel = true; |
|||
}, |
|||
|
|||
toProductInfo(){ |
|||
let _query = this.optionsQuery.goodsList |
|||
util.routeTo(`/subpackage/mall/pages/pay/pay_product?query=${util.jsonStr(_query)}`,'nT') |
|||
}, |
|||
|
|||
|
|||
// 日期选择器确定按钮 |
|||
bindDateChange: function(e){ |
|||
console.log("dateArray: ", this.dateArray) |
|||
let { value } = e.detail; |
|||
this.dateSelected = value; |
|||
let _day = this.get_zh_day(this.selfDate.days[this.dateSelected[0]]) |
|||
console.log("dateSelected: ",this.dateSelected) |
|||
this.selfList[0].txt = this.dateArray[0][value[0]]['en'] + '('+ _day +')' + this.dateArray[1][value[1]]['en'].substring(0,5); |
|||
console.log("this.selfList[0].txt : ", this.selfList[0].txt) |
|||
this.selfgTiem = this.selfDate.days[this.dateSelected[0]] + " " + this.dateArray[1][value[1]]['en'] |
|||
}, |
|||
getPayInfo({ integral=0, coupon_ids='', brand_id}) { |
|||
util.showLoad(); |
|||
server |
|||
.get({ |
|||
url: MALL_API.payInfo, |
|||
data: { |
|||
brand_id: brand_id, |
|||
amount: this.totalPrice, |
|||
scenes: 'mall', |
|||
integral, |
|||
coupon_ids, |
|||
mks: this.optionsQuery.product_ids.join(','), //商品id,传字符串,逗号隔开 |
|||
}, |
|||
failMsg: '加载数据失败!' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
console.log('积分优惠券计算: ', res); |
|||
this.payInfo = res |
|||
}); |
|||
|
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.pay-confirm{ |
|||
position: relative; |
|||
padding: 136rpx 0 208upx; |
|||
@include isPd(208upx); |
|||
.pc-head{ |
|||
z-index: 6; |
|||
position: fixed; |
|||
top: 0; |
|||
padding: 30rpx 0; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
border-bottom: 24rpx solid #F2F2F7; |
|||
@include ctf(center); |
|||
.ph-tab{ |
|||
padding: 4rpx; |
|||
border-radius: 54rpx; |
|||
// border: 4rpx solid $mColor; |
|||
background-color: $mColor; |
|||
@include ctf(flex-start); |
|||
.tab_no{ |
|||
width: 172rpx; |
|||
padding: 8rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
} |
|||
.tab_yes{ |
|||
border-radius: 54rpx; |
|||
background-color: #fff; |
|||
color: $mColor; |
|||
} |
|||
} |
|||
} |
|||
.pc-address{ |
|||
position: relative; |
|||
padding: 0rpx 24rpx 8rpx; |
|||
height: 168rpx; |
|||
background-color: #fff; |
|||
@include ctf(flex-start); |
|||
.pa-icon{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
// flex-grow: 1; |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
} |
|||
.pa-line{ |
|||
margin-left: 20rpx; |
|||
flex-grow: 1; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
>image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
} |
|||
.pa-detail{ |
|||
margin-left: 20rpx; |
|||
flex-grow: 1; |
|||
>view{ |
|||
&:first-child{ |
|||
>text{ |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
&:first-child{ |
|||
} |
|||
&:nth-child(2){ |
|||
margin-left: 52rpx; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
margin-top: 10rpx; |
|||
@include ctf(space-between); |
|||
>text{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
>image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.pa-end{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 8rpx; |
|||
} |
|||
} |
|||
|
|||
.pc-self{ |
|||
position: relative; |
|||
padding: 40rpx 30rpx 48rpx; |
|||
background-color: #fff; |
|||
.ps-address{ |
|||
padding-bottom: 30rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
@include ctf(space-between); |
|||
.pa-store{ |
|||
>view{ |
|||
&:first-child{ |
|||
>text{ |
|||
&:first-child{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
max-width: 400rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
color: $mColor; |
|||
font-size: 20rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-top: 10rpx; |
|||
max-width: 486rpx; |
|||
} |
|||
} |
|||
} |
|||
.pa-route{ |
|||
margin-right: 22rpx; |
|||
>image{ |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
} |
|||
>view{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
.ps-info{ |
|||
padding: 30rpx 2rpx 0; |
|||
@include ctf(space-around); |
|||
.pi-box{ |
|||
min-width: 200rpx; |
|||
font-size: 28rpx; |
|||
.pb-tit{ |
|||
color: #9A9A9D; |
|||
} |
|||
.pb-txt{ |
|||
color: #333; |
|||
margin-top: 20rpx; |
|||
width: 100%; |
|||
} |
|||
} |
|||
.pi-line{ |
|||
margin: 0 30rpx 0 10rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
.pl-sign{ |
|||
width: 2rpx; |
|||
height: 8rpx; |
|||
background-color: #D8D8D8; |
|||
margin-top: 6rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.ps-desc{ |
|||
>view{ |
|||
flex-grow: 1; |
|||
text-align: center; |
|||
&:first-child{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
margin-top: 14rpx; |
|||
|
|||
} |
|||
} |
|||
} |
|||
.ps-end{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 8rpx; |
|||
} |
|||
} |
|||
|
|||
.pc-info{ |
|||
padding: 30rpx 36rpx 30rpx 32rpx; |
|||
margin-top: 24rpx; |
|||
background-color: #fff; |
|||
.pi-tit{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
.pi-line{ |
|||
margin: 20rpx 0 30rpx; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
&:first-child{ |
|||
@include ctf(flex-start); |
|||
>view{ |
|||
margin-right: 20rpx; |
|||
.pi-img{ |
|||
width: 152rpx; |
|||
height: 152rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.pi-txt{ |
|||
margin-top: 6rpx; |
|||
color: #333; |
|||
font-size: 24rpx; |
|||
max-width: 152rpx; |
|||
@include tHide(1); |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
margin-top: -40rpx; |
|||
@include ctf(flex-start); |
|||
>text{ |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
} |
|||
>image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-left: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.pi-price{ |
|||
flex-shrink: 1; |
|||
@include ctf(flex-end); |
|||
>text{ |
|||
font-size: 24rpx; |
|||
&:first-child{ |
|||
color: #333; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #FF873D; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.pc-discount{ |
|||
margin-top: 24rpx; |
|||
padding: 0 20rpx; |
|||
background-color: #fff; |
|||
.pd-line{ |
|||
padding: 30rpx 0; |
|||
border-top: 2rpx solid #EDEDF5; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin: 0rpx 6rpx 0rpx 4rpx; |
|||
} |
|||
} |
|||
} |
|||
.pc-desc{ |
|||
margin: 24rpx 0; |
|||
padding: 30rpx 32rpx; |
|||
background-color: #fff; |
|||
@include ctf(flex-start); |
|||
>view{ |
|||
flex-shrink: 0; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
& input { |
|||
flex-grow: 1; |
|||
padding: 0 20rpx; |
|||
color: #333; |
|||
font-size: 24rpx; |
|||
} |
|||
.changeSize{ |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
.pc-end{ |
|||
z-index: 2; |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 20rpx 24rpx; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
border-top: 2rpx solid #f2f2f7; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
margin-left: 4rpx; |
|||
&:first-child{ |
|||
>text{ |
|||
&:first-child{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #FF873D; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
padding: 22rpx 56rpx; |
|||
border-radius: 44rpx; |
|||
background: linear-gradient(90deg, #44D7B6 0%, $mColor 100%); |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.fixed-mask{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
background: rgba($color: #000000, $alpha: .5); |
|||
} |
|||
.m-zidx{ |
|||
z-index: 99; |
|||
} |
|||
.pc-input-modal{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
background-color: #fff; |
|||
width: 750rpx; |
|||
padding: 28rpx 24rpx; |
|||
.pim-close{ |
|||
width: 100%; |
|||
@include ctf(flex-end); |
|||
>image{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
.pim-title{ |
|||
width: 100%; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
& input{ |
|||
width: 670rpx; |
|||
height: 96rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid #d8d8d8; |
|||
padding: 0 20rpx; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
margin-top: 56rpx; |
|||
margin: 56rpx 0 100rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<view class="product-info"> |
|||
<view class="pi-title">商品({{productNum}}件)</view> |
|||
<view class="pi-list" v-for="(e,i) in goodsList" :key="i"> |
|||
<product-item :goodsInfo="e"></product-item> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { jsonPar } from '@/utils/util'; |
|||
import productItem from '../modules/pay/product_item.vue'; |
|||
export default { |
|||
components: { |
|||
'product-item': productItem, |
|||
}, |
|||
computed: { |
|||
productNum(){ |
|||
let { goodsList } = this; |
|||
let nums = 0 |
|||
for(var i in goodsList){ |
|||
nums = goodsList[i].product_nums + nums |
|||
} |
|||
return nums || 0; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
goodsList: [], |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
let _query = jsonPar(options.query); |
|||
this.goodsList = _query |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.product-info{ |
|||
padding: 40rpx 24rpx; |
|||
.pi-title{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.pi-list{ |
|||
padding: 40rpx 20rpx; |
|||
margin-bottom: 24rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
</style> |
After Width: 40 | Height: 40 | Size: 353 B |
After Width: 758 | Height: 8 | Size: 331 B |
After Width: 346 | Height: 346 | Size: 1.9 KiB |
After Width: 152 | Height: 152 | Size: 3.2 KiB |
After Width: 268 | Height: 160 | Size: 4.0 KiB |
After Width: 266 | Height: 160 | Size: 3.5 KiB |
After Width: 266 | Height: 160 | Size: 3.6 KiB |
After Width: 268 | Height: 160 | Size: 3.2 KiB |
After Width: 266 | Height: 160 | Size: 3.2 KiB |
After Width: 266 | Height: 160 | Size: 3.6 KiB |
After Width: 46 | Height: 46 | Size: 1.9 KiB |
After Width: 52 | Height: 52 | Size: 470 B |
After Width: 84 | Height: 84 | Size: 979 B |
After Width: 84 | Height: 84 | Size: 1.1 KiB |
After Width: 54 | Height: 54 | Size: 627 B |
After Width: 54 | Height: 54 | Size: 583 B |