641 lines
18 KiB
Vue
641 lines
18 KiB
Vue
<template>
|
||
<div class="order" v-if="isorder">
|
||
|
||
<div class="order-status">
|
||
<div class="order-success">
|
||
{{orderInfo.SALEBILL_STATE==1010 ? '待商家接单': orderInfo.SALEBILL_STATE_TEXT}}
|
||
</div>
|
||
<div class="status-btn-box">
|
||
<block v-if="orderInfo.SALEBILL_STATE === 1005">
|
||
<div class="back-btn" @click="orderCancle">取消订单</div>
|
||
<div class="continu-btn" @click="goPayment">去付款 <span>{{minutes}}</span></div>
|
||
</block>
|
||
<block v-if="orderInfo.SALEBILL_STATE !== 1005 && orderInfo.SALEBILL_STATE!==1010 && orderInfo.SALEBILL_STATE!==9000 && orderInfo.COMMENT_STATE===0">
|
||
<!-- <div class="back-btn" @click="goShop" v-if="orderInfo.SALEBILL_STATE!=1010">再来一单</div> -->
|
||
<div class="continu-btn" @click="goEvaluate">评价得积分</div>
|
||
</block>
|
||
</div>
|
||
</div>
|
||
<div class="hx-block"></div>
|
||
<div class="order-info">
|
||
<p class="order-info-type order-info-h" >
|
||
<span :class="{'appoint':orderInfo.TAKE_TYPE===2000}">订单信息</span>
|
||
<span class="order-info-status">{{orderInfo.SALEBILL_STATE_TEXT}}</span>
|
||
</p>
|
||
<p class="order-info-type"><span class="order-info-t">订单编号</span><span>{{orderNumber}}</span></p>
|
||
|
||
<p class="order-info-type"><span class="order-info-t">下单时间</span><span>{{orderInfo.ORDER_DATE}}</span></p>
|
||
<block v-if="orderInfo.TAKE_TYPE === 2000">
|
||
|
||
<p class="order-info-type"><span class="order-info-t">下单人员</span><span>{{orderInfo.ORDER_PERSON}}</span></p>
|
||
<p class="order-info-type"><span class="order-info-t">预约时间</span><span>{{orderInfo.RESERVATION_DATE}}</span></p>
|
||
<p class="order-info-type"><span class="order-info-t">预约电话</span><span>{{orderInfo.ORDER_PERSONTEL}}</span></p>
|
||
</block>
|
||
</div>
|
||
|
||
<div class="order-box">
|
||
<div class="order-top" @click="goShop">
|
||
<div style="display:flex;align-items:center;">
|
||
<img src="https://eshangtech.com/ShopICO/shop_ico.png" style="width: 56rpx;height:36rpx;vertical-align:middle;margin-right: 10rpx;">
|
||
<span class="order-addr">{{ShopAddress}}</span>
|
||
</div>
|
||
<van-icon name="arrow" size="30rpx" v-if="pageMsg.type === 0"/>
|
||
</div>
|
||
|
||
<div class="order-list" v-for="(item,i) in shopOrder" :key=i>
|
||
<div class="order-name">{{item.COMMODITY_RULE ? item.COMMODITY_NAME+'('+item.COMMODITY_RULE+')' : item.COMMODITY_NAME}}</div>
|
||
<div class="order-num">x{{item.ORDER_COUNT}}</div>
|
||
<div class="order-price">￥{{item.AVERAGE_PRICE}}</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<div class="coupon" v-if="orderInfo.COUPON_AMOUNT">
|
||
|
||
<div>
|
||
|
||
<span>优惠券</span>
|
||
</div>
|
||
<div style="font-size:28rpx;color:#000000;font-weight:bolder;">
|
||
-￥{{orderInfo.COUPON_AMOUNT}}
|
||
</div>
|
||
</div>
|
||
<div class="price-sum">
|
||
<div class="link-store" @click="callPhone">
|
||
<van-icon name="phone-circle-o" size="40rpx" color="#CAA97F" custom-style="margin-right:16rpx;"></van-icon>
|
||
联系商家
|
||
</div>
|
||
<div class="">
|
||
|
||
<span>合计</span>
|
||
<span class="pay-price">￥{{tatalMoney}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="order-info">
|
||
<p class="order-info-type order-info-h" >
|
||
<span :class="{'appoint':orderInfo.SALEBILL_TYPE===6000}">订单信息</span>
|
||
<span class="order-info-status">{{orderInfo.SALEBILL_STATE_TEXT}}</span>
|
||
</p>
|
||
<p class="order-info-type"><span>订单编号：</span><span>{{orderNumber}}</span></p>
|
||
|
||
<p class="order-info-type"><span>下单时间：</span><span>{{orderInfo.ORDER_DATE}}</span></p>
|
||
<p class="order-info-type" v-if="orderInfo.TAKE_TYPE === 2000"><span>下 单 人 ：</span><span>{{orderInfo.ORDER_PERSON}}</span></p>
|
||
<p class="order-info-type" v-if="orderInfo.TAKE_TYPE === 2000"><span>预约时间：</span><span>{{orderInfo.RESERVATION_DATE}}</span></p>
|
||
<p class="order-info-type" v-if="orderInfo.TAKE_TYPE === 2000"><span>预约电话：</span><span>{{orderInfo.ORDER_PERSONTEL}}</span></p>
|
||
</div> -->
|
||
|
||
<van-popup :show="isShow"
|
||
position="bottom"
|
||
overlay="false"
|
||
@close="isShow = false">
|
||
<div class="bottom-box">
|
||
<div class="bottom-pop-title">确认支付方式</div>
|
||
<div class="bottom-content">
|
||
<van-radio-group :value="cardPay.payType" @change="changePayType">
|
||
|
||
<van-radio name="余额支付" checked-color="#CAA97F" class="bottom-radio" :disabled="!cardPay.canCardPay">
|
||
<span :class="{'disable': !cardPay.canCardPay}">余额支付<span style="font-size:24rpx;">{{' (剩余:￥'+cardPay.amount+') '+ (!cardPay.canCardPay ? cardPay.reason : '') }}</span></span>
|
||
</van-radio>
|
||
<van-radio name="微信支付" checked-color="#CAA97F" class="bottom-radio">
|
||
<span class="">微信支付</span>
|
||
</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
|
||
<div class="bottom-btn" @click="isGoPay">立即付款</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
data () {
|
||
return {
|
||
orderInfo: {},
|
||
isorder: false,
|
||
shopOrder: [],
|
||
|
||
orderAmount: 0,
|
||
orderNumber: '',
|
||
status: '',
|
||
statusName: '',
|
||
orderInternal: '',
|
||
payType: '余额支付',
|
||
orderTime: '',
|
||
RESERVATION_DATE: '',
|
||
ORDER_PERSONTEL: '',
|
||
TAKE_TYPE: 0,
|
||
SERVERPARTSHOP_ID: '',
|
||
couponAmount: '',
|
||
ShopAddress: '',
|
||
minutes: '',
|
||
isMinute: false,
|
||
timer: '',
|
||
isShow: false,
|
||
cardPay: {
|
||
payType: '余额支付', // 用户支付方式
|
||
reason: '',
|
||
canCardPay: true, // 是否可以余额支付
|
||
amount: ''// 实业饭卡余额
|
||
},
|
||
pageMsg: {
|
||
type: 0
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['user']),
|
||
tatalMoney () {
|
||
let total = this.orderAmount
|
||
total = Math.round((total - this.orderInfo.COUPON_AMOUNT || 0) * 100) / 100
|
||
|
||
return total
|
||
}
|
||
},
|
||
methods: {
|
||
// 倒计时
|
||
num (n) {
|
||
return n < 10 ? '0' + n : '' + n
|
||
},
|
||
showTime () {
|
||
let _this = this
|
||
_this.timer = setInterval(function () {
|
||
// debugger
|
||
let oldTime = (new Date(_this.orderTime).getTime()) / 1000 + 15 * 60
|
||
let nowTime = new Date().getTime() / 1000
|
||
let timediff = parseInt(oldTime - nowTime)
|
||
if (timediff > 0) {
|
||
_this.minutes = '(' + parseInt(timediff / 60) + '分' + timediff % 60 + '秒)'
|
||
_this.isMinute = true
|
||
} else if (timediff <= 0) {
|
||
_this.minutes = ''
|
||
_this.isMinute = false
|
||
clearInterval(_this.timer)
|
||
_this.getOrderType()
|
||
// console.log(1)
|
||
}
|
||
}, 1000)
|
||
},
|
||
changePayType (data) {
|
||
this.cardPay.payType = data.mp.detail
|
||
},
|
||
|
||
isGoPay () {
|
||
if (this.cardPay.payType === '余额支付') { // 如果该用户进行余额支付
|
||
this.payByCard()
|
||
} else {
|
||
this.isShow = false
|
||
this.getOrderInfo()
|
||
}
|
||
},
|
||
goPayment () { // 判断用户是否可余额支付
|
||
if (this.user.MEMBERSHIP_TYPE === 3000 && this.cardPay.payType === '余额支付') {
|
||
this.getCardAmount()
|
||
this.isShow = true
|
||
} else {
|
||
this.getOrderInfo()
|
||
}
|
||
},
|
||
// 获取订单状态
|
||
getOrderType () {
|
||
let _this = this
|
||
_this.$api.getCoop({
|
||
action_type: 'GetOrderDetail',
|
||
salebillId: _this.orderInternal
|
||
}).then(res => {
|
||
// console.log(res)
|
||
if (res.ResultCode === '100') {
|
||
let _data = res.Data
|
||
_this.orderInfo = _data
|
||
_this.getOrderAmount(_data.List)
|
||
_this.status = _data.SALEBILL_STATE // 订单状态
|
||
_this.statusName = _data.SALEBILL_STATENAME // 订单状态
|
||
_this.SERVERPARTSHOP_ID = _data.SERVERPARTSHOP_ID
|
||
_this.ShopAddress = _data.SERVERPART_NAME + _data.SHOPNAME
|
||
_this.orderTime = _data.ORDER_DATE
|
||
_this.RESERVATION_DATE = _data.RESERVATION_DATE
|
||
_this.ORDER_PERSONTEL = _data.ORDER_PERSONTEL
|
||
_this.TAKE_TYPE = _data.TAKE_TYPE
|
||
_this.isorder = true
|
||
if (_this.status === 1005) { // 待付款时添加倒计时
|
||
_this.showTime()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getCardAmount () { // 获取用户余额
|
||
let _this = this
|
||
_this.$api.getCoop({
|
||
action_type: 'GetIndustryMemberInfo',
|
||
serverpartShopId: _this.SERVERPARTSHOP_ID
|
||
|
||
}).then(rs => {
|
||
if (rs.ResultCode === '100') {
|
||
_this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE
|
||
|
||
if (_this.cardPay.amount < _this.orderAmount) {
|
||
_this.cardPay.payType = '微信支付'
|
||
_this.cardPay.canCardPay = false
|
||
_this.cardPay.reason = '余额不足'
|
||
} else {
|
||
_this.cardPay.payType = '余额支付'
|
||
_this.cardPay.canCardPay = true
|
||
_this.cardPay.reason = ''
|
||
}
|
||
} else {
|
||
_this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE
|
||
_this.cardPay.payType = '微信支付'
|
||
_this.cardPay.canCardPay = false
|
||
_this.cardPay.reason = rs.ResultDesc
|
||
}
|
||
_this.isShow = true
|
||
_this.$forceUpdate()
|
||
})
|
||
},
|
||
payByCard () { // 实业饭卡支付
|
||
let _this = this
|
||
_this.$api.postCoop({
|
||
action_type: 'ECodeConsume',
|
||
saleBill: _this.orderInternal
|
||
}).then(rs => {
|
||
if (rs.ResultCode === '100') {
|
||
// uni.showToast({
|
||
// title: '支付成功',
|
||
// icon: 'success',
|
||
// duration: 2000
|
||
// })
|
||
_this.isShow = false
|
||
// setTimeout(() => {
|
||
_this.$store.commit('couponPrice', '')
|
||
uni.redirectTo({url: '/pages/orders/orderdetail/index?orderNumber=' + _this.orderNumber + '&orderInternal=' + _this.orderInternal})
|
||
// }, 1000)
|
||
} else {
|
||
uni.showToast({
|
||
title: rs.ResultDesc,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 取消订单
|
||
orderCancle () {
|
||
let _this = this
|
||
// console.log(_this.orderInfo.SALEBILL_ID)
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '您是否确认取消订单。',
|
||
success (res) {
|
||
if (res.confirm) {
|
||
_this.$api.postCoop({
|
||
action_type: 'UpdateOrderState',
|
||
action_data: _this.orderInfo.SALEBILL_ID,
|
||
SALEBILL_STATE: 9000
|
||
}).then(res => {
|
||
if (res.error === 1) {
|
||
uni.showToast({
|
||
title: '取消订单成功',
|
||
icon: 'none',
|
||
duration: 2000,
|
||
success: function () {
|
||
}
|
||
})
|
||
uni.navigateBack({delta: 1})
|
||
// uni.redirectTo({url: '/pages/orders/order/index'})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取后台信息调取微信支付
|
||
getOrderInfo () {
|
||
let _this = this
|
||
_this.$api.postCoop({
|
||
action_type: 'JsApiPay',
|
||
action_data: 1,
|
||
action_record: _this.user.WECHATAPP_OPENID,
|
||
// action_record: 'ortWV5OP2g9P81cxxJYIIhrAezS4',
|
||
TOTAL_FEE: _this.orderAmount,
|
||
OFFPRICE: 0,
|
||
payType: 2,
|
||
SALEBILL_ID: _this.orderInternal,
|
||
SALEBILL_CODE: _this.orderNumber
|
||
}).then(res => {
|
||
// console.log(res)
|
||
if (res) {
|
||
uni.requestPayment({
|
||
appId: res.appId, // 公众号名称，由商户传入
|
||
timeStamp: res.timeStamp + '', // 时间戳，自1970年以来的秒数
|
||
nonceStr: res.nonceStr, // 随机串
|
||
package: res.package,
|
||
signType: res.signType, // 微信签名方式
|
||
paySign: res.paySign, // 微信签名
|
||
success (res) {
|
||
if (res.errMsg === 'requestPayment:ok') {
|
||
_this.$api.postCoop({
|
||
action_type: 'EndPay',
|
||
action_data: _this.orderNumber,
|
||
action_record: 1
|
||
}).then(res => {
|
||
_this.$store.commit('couponPrice', '')
|
||
|
||
uni.redirectTo({url: '/pages/orders/orderdetail/index?orderNumber=' + _this.orderNumber + '&orderInternal=' + _this.orderInternal})
|
||
})
|
||
}
|
||
},
|
||
fail (res) {
|
||
if (res.errMsg === 'requestPayment:fail cancel') {
|
||
// uni.showToast({
|
||
// title: '支付取消',
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// })
|
||
}
|
||
},
|
||
complete (res) {}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '网络异常，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取订单列表
|
||
getOrderAmount (data) {
|
||
let _this = this
|
||
let total = 0
|
||
_this.shopOrder = data
|
||
data.map(v => {
|
||
total += v.ORDER_AMOUNT
|
||
})
|
||
|
||
_this.orderAmount = total
|
||
},
|
||
goEvaluate () {
|
||
uni.navigateTo({ url: '/pages/newEvaluate/index?merchantsId=' + this.orderInfo.MERCHANTS_ID + '&saleBillId=' + this.orderInfo.SALEBILL_ID })
|
||
},
|
||
goShop () {
|
||
if (this.pageMsg.type === 0) {
|
||
// let arr = {
|
||
// id: this.orderInfo.SERVERPARTSHOP_ID
|
||
// shopName: this.orderInfo.SHOPNAME,
|
||
// serverpartId: this.orderInfo.SERVERPART_ID
|
||
|
||
// }
|
||
// this.$store.commit('nowStore', arr)
|
||
this.$store.commit('setprovinceCode', this.orderInfo.PROVINCE_CODE)
|
||
uni.navigateTo({url: '/pages/shopPages/shop/index?id=' + this.orderInfo.SERVERPARTSHOP_ID + '&mid=' + this.orderInfo.MERCHANTS_ID})
|
||
}
|
||
},
|
||
callPhone () {
|
||
let _this = this
|
||
if (_this.orderInfo.SELLER_TELEPHONE) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: _this.orderInfo.SELLER_TELEPHONE
|
||
})
|
||
}
|
||
}
|
||
},
|
||
onUnload () {
|
||
this.orderInfo = {}
|
||
this.minutes = ''
|
||
this.isMinute = false
|
||
clearInterval(this.timer)
|
||
this.pageMsg.type = 0
|
||
},
|
||
// onShow () {
|
||
// this.getOrderType()
|
||
// },
|
||
onLoad (option) {
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor: '#C8B190',
|
||
animation: {
|
||
duration: 30,
|
||
timingFunc: 'linear'
|
||
}
|
||
})
|
||
if (option.type) {
|
||
this.pageMsg.type = 1
|
||
}
|
||
this.couponAmount = this.$store.getters.couponPrice ? '-￥' + this.$store.getters.couponPrice : ''
|
||
|
||
this.orderNumber = option.orderNumber
|
||
this.orderInternal = option.orderInternal
|
||
this.getOrderType()
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="stylus" scoped>
|
||
page
|
||
background-color #F3F2F7
|
||
bodyColor = #f5ba56
|
||
.disable
|
||
color #999
|
||
.order
|
||
background #F3F2F7
|
||
padding-bottom 30rpx
|
||
box-sizing border-box
|
||
height 100%
|
||
.order-status
|
||
padding 32rpx 32rpx 56rpx 32rpx
|
||
background linear-gradient(#C8B190,#A18153)
|
||
display flex
|
||
align-items center
|
||
justify-content space-between
|
||
.order-s-ico
|
||
width 89rpx
|
||
height 89rpx
|
||
|
||
.order-success
|
||
color #fff
|
||
font-size 36rpx
|
||
// margin-bottom 32rpx
|
||
.status-btn-box
|
||
justify-content flex-end
|
||
font-size 24rpx
|
||
display flex
|
||
align-items center
|
||
margin-top 12rpx
|
||
.back-btn
|
||
color #7E5314
|
||
border 1rpx solid #7E5314
|
||
width 120rpx
|
||
height 48rpx
|
||
text-align center
|
||
line-height 48rpx
|
||
border-radius 6rpx
|
||
.continu-btn
|
||
color #fff
|
||
border 1rpx solid #fff
|
||
min-width 160rpx
|
||
height 48rpx
|
||
text-align center
|
||
line-height 48rpx
|
||
border-radius 6rpx
|
||
margin-left 36rpx
|
||
padding 0 12rpx
|
||
.hx-block
|
||
top -26rpx
|
||
position relative
|
||
width 100%
|
||
height 30rpx
|
||
border-radius 30rpx 30rpx 0 0
|
||
background #F3F2F7
|
||
|
||
|
||
.order-box
|
||
background-color #fff
|
||
padding 0 24rpx
|
||
margin 20rpx 24rpx
|
||
border-radius 12rpx
|
||
box-sizing border-box
|
||
// box-shadow 0 2rpx 16rpx 0.4rpx #e2e2e2
|
||
.order-top
|
||
display flex
|
||
justify-content space-between
|
||
align-items center
|
||
font-size 30rpx
|
||
border-bottom 1rpx solid #F5F5F5
|
||
height 100rpx
|
||
box-sizing border-box
|
||
margin-bottom 24rpx
|
||
|
||
.order-list,.coupon
|
||
padding 20rpx 0
|
||
box-sizing border-box
|
||
background-color #fff
|
||
display flex
|
||
color #000000
|
||
.order-name
|
||
font-size 26rpx
|
||
flex 0.7
|
||
.order-num
|
||
font-size 26rpx
|
||
color #9A9A9A
|
||
flex 0.1
|
||
.order-price
|
||
font-size 26rpx
|
||
flex 0.2
|
||
color #333
|
||
text-align right
|
||
font-weight bolder
|
||
|
||
.coupon
|
||
justify-content space-between
|
||
font-size 26rpx
|
||
padding-top 36rpx
|
||
.coupon-h
|
||
display inline-block
|
||
background #ed4d3e
|
||
color #ffffff
|
||
padding 4rpx 6rpx
|
||
border-radius 6rpx
|
||
margin-right 10rpx
|
||
.price-sum
|
||
border-top 2rpx sold #f5f5f5
|
||
padding 20rpx 0
|
||
box-sizing border-box
|
||
background-color #fff
|
||
text-align right
|
||
font-size 24rpx
|
||
display flex
|
||
justify-content space-between
|
||
.pay-price
|
||
color #000
|
||
font-size 30rpx
|
||
margin-left 10rpx
|
||
.link-store
|
||
color #C6A376
|
||
display flex
|
||
align-items center
|
||
hr
|
||
background-color #f5f5f5
|
||
height 2rpx
|
||
margin-top 24rpx
|
||
//订单信息
|
||
.order-info
|
||
background-color #fff
|
||
padding 0 20rpx
|
||
border-radius 12rpx
|
||
margin 0 24rpx
|
||
.order-info-type
|
||
height 96rpx
|
||
line-height 96rpx
|
||
font-size 26rpx
|
||
|
||
display flex
|
||
align-items center
|
||
justify-content space-between
|
||
.order-info-type+.order-info-type
|
||
border-top 1px solid #F5F5F5
|
||
.order-info-t
|
||
color #a7a7a7
|
||
.appoint
|
||
display flex
|
||
align-items center
|
||
.appoint:after
|
||
content '预'
|
||
padding 0 4rpx
|
||
font-size 20rpx
|
||
height 24rpx
|
||
line-height 24rpx
|
||
margin-left 16rpx
|
||
font-weight normal
|
||
color #fff
|
||
border-radius 4rpx
|
||
background #F5BA4F
|
||
.order-info-h
|
||
font-size 28rpx
|
||
font-weight bold
|
||
color #000
|
||
display flex
|
||
justify-content space-between
|
||
.order-info-status
|
||
font-weight normal
|
||
font-size 24rpx
|
||
|
||
/* 支付方式选择*/
|
||
.bottom-box
|
||
height 450rpx
|
||
width 100%
|
||
box-sizing content-box
|
||
.bottom-pop-title
|
||
text-align center
|
||
font-size 32rpx
|
||
padding 20rpx 0
|
||
border-bottom 1rpx solid #f9f9f9
|
||
.bottom-content
|
||
box-sizing content-box
|
||
padding 0 80rpx
|
||
.bottom-radio
|
||
padding 0 24rpx
|
||
.bottom-btn
|
||
width 600rpx
|
||
margin 20rpx auto
|
||
border-radius 8rpx
|
||
background #444
|
||
color #caa97f
|
||
font-size 32rpx
|
||
text-align center
|
||
height 80rpx
|
||
line-height 80rpx
|
||
</style>
|
||
|