654 lines
18 KiB
Vue
654 lines
18 KiB
Vue
<template>
|
||
<div class="order" v-if="isorder">
|
||
|
||
<div class="order-status">
|
||
<div class="order-success">
|
||
{{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.COMMENT_STATE===0">
|
||
|
||
<div class="continu-btn" @click="goEvaluate">评价得积分</div>
|
||
</block> -->
|
||
</div>
|
||
</div>
|
||
<div class="hx-block"></div>
|
||
<div class="order-box">
|
||
|
||
<p class="order-info-h" >
|
||
{{orderInfo.SUPPLIER_NAME}}
|
||
</p>
|
||
<div class="order-list border-bottom" v-for="(item,i) in orderInfo.List" :key=i>
|
||
<div class="order-img">
|
||
<image mode="aspectFill" lazy-load="true" :src="item.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
|
||
</div>
|
||
<div>
|
||
<div class="order-name">{{item.COMMODITY_NAME}}</div>
|
||
<div class="order-num">数量：{{item.ORDER_COUNT}}</div>
|
||
<div class="order-price">{{item.AVERAGE_PRICE+ (orderInfo.SALEBILL_TYPE==3010 ? '积分' :'元')}}</div>
|
||
<div class="product-btn-box" v-if="orderInfo.SALEBILL_STATE > 1005 && item.COMMENT_STATE==0 && orderInfo.SALEBILL_CHILD_ID!=''">
|
||
<span class="advice-btn" @click="goEvaluate(item)">立即评价</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="order-info-type" v-if="item.VIDEOCARD_CDK"><span class="order-info-t">券码：</span><span>{{item.VIDEOCARD_CDK}}</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-info">
|
||
<p class="order-info-type"><span class="order-info-t">订单编号：</span><span>{{orderInfo.SALEBILL_CODE}}</span></p>
|
||
|
||
<p class="order-info-type"><span class="order-info-t">下单时间：</span><span>{{orderInfo.ORDER_DATE}}</span></p>
|
||
<p class="order-info-type" v-if="orderInfo.SALEBILL_STATE !== 1005"><span class="order-info-t">支付方式：</span><span>{{orderInfo.CHANNEL_TYPE}}</span></p>
|
||
<block v-if="orderInfo.ADDRESS">
|
||
<hr class="order-detail-hr" />
|
||
|
||
<div class="address-info">
|
||
<span class="order-info-t">收货地址：</span>
|
||
<div class="">
|
||
<p>{{orderInfo.ADDRESS + orderInfo.DOORPLATE}}</p>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="address-info">
|
||
<span class="order-info-t">收货信息：</span>
|
||
<div class="">
|
||
<p>{{orderInfo.USER_NAME+' '+orderInfo.MOBILEPHONE}}</p>
|
||
</div>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
|
||
<div class="order-info">
|
||
<!-- <p class="coupon"><span class="order-info-t">商品总额</span><span style="font-size:28rpx;color:#000000;">{{ orderInfo.SALEBILL_TYPE==3010 ? orderInfo.CONSUME_POINT+'积分' :orderInfo.ORDER_AMOUNT+'元'}}</span></p> -->
|
||
<!-- <div class="coupon" v-if="orderInfo.COUPON_AMOUNT">
|
||
|
||
<div>
|
||
|
||
<span>优惠</span>
|
||
</div>
|
||
<div style="font-size:28rpx;color:#000000;">
|
||
-￥{{orderInfo.COUPON_AMOUNT}}
|
||
</div>
|
||
</div> -->
|
||
<!-- <hr class="order-price-hr"> -->
|
||
<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;vertical-align:middle;"></van-icon>
|
||
联系商家
|
||
</div>
|
||
<div class="">
|
||
|
||
<span>合计：</span>
|
||
<span class="pay-price">{{ orderInfo.SALEBILL_TYPE==3010 ? orderInfo.CONSUME_POINT+'积分' : tatalMoney+ '元'}}</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<van-popup :show="isShow"
|
||
position="bottom"
|
||
overlay="false"
|
||
@close="onClose">
|
||
<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: [],
|
||
payType: '余额支付',
|
||
buyerAddress: {},
|
||
minutes: '',
|
||
isMinute: false,
|
||
timer: '',
|
||
isShow: false,
|
||
cardPay: {
|
||
payType: '余额支付', // 用户支付方式
|
||
reason: '',
|
||
canCardPay: true, // 是否可以余额支付
|
||
amount: ''// 实业饭卡余额
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['user']),
|
||
tatalMoney () {
|
||
return Math.round(this.orderInfo.PAY_AMOUNT * 100) / 100
|
||
},
|
||
orderAmount () {
|
||
return Math.round(this.orderInfo.ORDER_AMOUNT * 100) / 100
|
||
}
|
||
},
|
||
methods: {
|
||
// 倒计时
|
||
num (n) {
|
||
return n < 10 ? '0' + n : '' + n
|
||
},
|
||
showTime () {
|
||
let _this = this
|
||
_this.timer = setInterval(function () {
|
||
// debugger
|
||
let oldTime = (new Date(_this.orderInfo.ORDER_DATE).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.getMallOrderDetail({orderInternal: _this.orderInfo.SALEBILL_ID, sellchildid: _this.orderInfo.SALEBILL_CHILD_ID})
|
||
// console.log(1)
|
||
}
|
||
}, 1000)
|
||
},
|
||
changePayType (data) {
|
||
this.cardPay.payType = data.mp.detail
|
||
},
|
||
onClose () {
|
||
this.isShow = false
|
||
},
|
||
isGoPay () {
|
||
if (this.cardPay.payType === '余额支付') { // 如果该用户进行余额支付
|
||
this.payByCard()
|
||
} else {
|
||
this.isShow = false
|
||
this.getOrderInfo()
|
||
}
|
||
},
|
||
goPayment () { // 判断用户是否可余额支付
|
||
if (this.cardPay.payType === '余额支付') {
|
||
this.getCardAmount()
|
||
this.isShow = true
|
||
} else {
|
||
this.getOrderInfo()
|
||
}
|
||
},
|
||
// 获取订单状态
|
||
getMallOrderDetail (obj) {
|
||
let _this = this
|
||
_this.$api.getCoop({
|
||
action_type: 'GetMallOrderDetail',
|
||
salebillId: obj.orderInternal,
|
||
salebillChildId: obj.sellchildid || 0,
|
||
showAddress: 1
|
||
}).then(res => {
|
||
if (res.ResultCode === '100') {
|
||
let _data = res.Data
|
||
_this.orderInfo = _data
|
||
_this.buyerAddress = _data.AddressInfo || ''
|
||
|
||
_this.isorder = true
|
||
if (_data.SALEBILL_STATE === 1005 && _data.ORDER_DATE) {
|
||
_this.showTime()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getCardAmount () {
|
||
let _this = this
|
||
_this.$api.getCoop({
|
||
action_type: 'GetIndustryMemberInfo'
|
||
|
||
// serverpartShopId: _this.orderInfo.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',
|
||
|
||
industryMembershipId: _this.user.INDUSTRY_MEMBERSHIP_ID,
|
||
saleBill: _this.orderInfo.SALEBILL_ID
|
||
}).then(rs => {
|
||
if (rs.ResultCode === '100') {
|
||
mpvue.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
_this.isShow = false
|
||
setTimeout(() => {
|
||
// _this.$store.commit('couponPrice', '')
|
||
mpvue.redirectTo({url: '/pages/orders/buyOrder/main'})
|
||
}, 1000)
|
||
} else {
|
||
mpvue.showToast({
|
||
title: rs.ResultDesc,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 取消订单
|
||
orderCancle () {
|
||
let _this = this
|
||
mpvue.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) {
|
||
mpvue.showToast({
|
||
title: '取消订单成功',
|
||
icon: 'none',
|
||
duration: 2000,
|
||
success: function () {
|
||
}
|
||
})
|
||
mpvue.navigateBack({delta: 1})
|
||
// mpvue.redirectTo({url: '/pages/orders/buyOrder/main'})
|
||
} else {
|
||
mpvue.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.tatalMoney,
|
||
OFFPRICE: 0,
|
||
payType: 2,
|
||
SALEBILL_ID: _this.orderInfo.SALEBILL_ID,
|
||
SALEBILL_CODE: _this.orderInfo.SALEBILL_CODE
|
||
}).then(res => {
|
||
// console.log(res)
|
||
if (res) {
|
||
mpvue.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') {
|
||
mpvue.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
_this.$api.postCoop({
|
||
action_type: 'EndPay',
|
||
action_data: _this.orderInfo.SALEBILL_CODE,
|
||
action_record: 1
|
||
}).then(res => {
|
||
// _this.$store.commit('couponPrice', '')
|
||
mpvue.redirectTo({url: '/pages/orders/buyOrder/main'})
|
||
// mpvue.redirectTo({url: '/pages/orders/buydetail/main?orderNumber=' + _this.orderInfo.SALEBILL_CODE + '&orderInternal=' + _this.orderInfo.SALEBILL_ID})
|
||
})
|
||
}
|
||
},
|
||
fail (res) {
|
||
if (res.errMsg === 'requestPayment:fail cancel') {
|
||
mpvue.showToast({
|
||
title: '支付取消',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
complete (res) {}
|
||
})
|
||
} else {
|
||
mpvue.showToast({
|
||
title: '网络异常，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
goEvaluate (item) {
|
||
mpvue.navigateTo({ url: '/pages/newEvaluate/main?sellchildid=' + this.orderInfo.SALEBILL_CHILD_ID + '&orderInternal=' + item.SALEBILL_ID + '&proid=' + item.COMMODITY_ID })
|
||
},
|
||
callPhone () {
|
||
let _this = this
|
||
mpvue.makePhoneCall({
|
||
phoneNumber: _this.orderInfo.SELLER_TELEPHONE
|
||
})
|
||
// mpvue.showModal({
|
||
// title: '温馨提醒',
|
||
// content: '是否拨打电话，联系商家',
|
||
// success (res) {
|
||
// if (res.confirm) {
|
||
// }
|
||
// }
|
||
// })
|
||
}
|
||
},
|
||
onUnload () {
|
||
this.orderInfo = {}
|
||
this.minutes = ''
|
||
this.isorder = false
|
||
clearInterval(this.timer)
|
||
},
|
||
onShow () {
|
||
// this.getMallOrderDetail()
|
||
},
|
||
onLoad (option) {
|
||
mpvue.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor: '#C8B190',
|
||
animation: {
|
||
duration: 30,
|
||
timingFunc: 'linear'
|
||
}
|
||
})
|
||
// this.orderNumber = option.orderNumber
|
||
// this.orderInternal = option.orderInternal
|
||
this.getMallOrderDetail(option)
|
||
}
|
||
}
|
||
</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 0 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
|
||
.border-bottom
|
||
border-bottom 1rpx solid #F5F5F5
|
||
.order-img
|
||
width 160rpx
|
||
height 158rpx
|
||
margin-right 16rpx
|
||
background #f8f8f8
|
||
border-radius 8rpx
|
||
image
|
||
width 160rpx
|
||
height 158rpx
|
||
border-radius 8rpx
|
||
.order-name
|
||
font-size 26rpx
|
||
text-overflow ellipsis
|
||
overflow hidden
|
||
white-space nowrap
|
||
width 500rpx
|
||
.order-num
|
||
font-size 22rpx
|
||
color #9A9A9A
|
||
line-height 2
|
||
.order-price
|
||
font-size 30rpx
|
||
|
||
color #333
|
||
|
||
font-weight bolder
|
||
|
||
.coupon
|
||
justify-content space-between
|
||
font-size 26rpx
|
||
// border-top 1rpx solid #F5F5F5
|
||
// margin-top 24rpx
|
||
// 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 16rpx 0
|
||
box-sizing border-box
|
||
background-color #fff
|
||
text-align right
|
||
font-size 24rpx
|
||
display flex
|
||
justify-content space-between
|
||
.pay-price
|
||
color #CB5050
|
||
font-size 30rpx
|
||
margin-left 10rpx
|
||
.link-store
|
||
color #C6A376
|
||
display flex
|
||
align-items center
|
||
hr.order-detail-hr
|
||
background-color #f5f5f5
|
||
height 2rpx
|
||
margin-top 36rpx
|
||
width 500rpx
|
||
margin-left 148rpx
|
||
margin-bottom 24rpx
|
||
hr.order-price-hr
|
||
background-color #f5f5f5
|
||
height 2rpx
|
||
margin-top 16rpx
|
||
margin-bottom 16rpx
|
||
//订单信息
|
||
.order-info
|
||
background-color #fff
|
||
padding 16rpx 20rpx
|
||
border-radius 12rpx
|
||
margin 24rpx 24rpx
|
||
.order-info-type
|
||
height 64rpx
|
||
line-height 64rpx
|
||
font-size 26rpx
|
||
display flex
|
||
align-items center
|
||
|
||
.address-info
|
||
|
||
padding 20rpx 0
|
||
font-size 26rpx
|
||
display flex
|
||
align-items flex-start
|
||
|
||
.order-info-t
|
||
color #666
|
||
min-width 150rpx
|
||
.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
|
||
height 96rpx
|
||
line-height 96rpx
|
||
.order-info-status
|
||
font-weight normal
|
||
font-size 24rpx
|
||
|
||
.product-btn-box
|
||
display flex
|
||
align-items center
|
||
justify-content flex-end
|
||
padding-right 56rpx
|
||
.advice-btn
|
||
color #dc615a
|
||
border 2rpx solid #dc615a
|
||
text-align center
|
||
border-radius 40rpx
|
||
font-size 22rpx
|
||
width 120rpx
|
||
height 42rpx
|
||
line-height 40rpx
|
||
/* 支付方式选择*/
|
||
.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>
|
||
|