cashier_weapp/pages/order_detail/index.vue

811 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="card" v-if="listinfo.tableName">
<view class="head">
<text class="title">
<text>{{listinfo.tableName || '空'}}</text>
</text>
<text class="status" v-if="listinfo.status == 'unpaid'">
<text>待支付</text>
</text>
<text class="status" v-if="listinfo.status == 'unsend'">
<text>待发货</text>
</text>
<text class="status" v-if="listinfo.status == 'closed'">
<text>订单完成</text>
</text>
<text class="status" v-if="listinfo.status == 'send'">
<text>已发</text>
</text>
<text class="status" v-if="listinfo.status == 'refunding'">
<text>申请退单</text>
</text>
<text class="status" v-if="listinfo.status == 'refund'">
<text>退单</text>
</text>
<text class="status" v-if="listinfo.status == 'cancelled'">
<text>取消订单</text>
</text>
<text class="status" v-if="listinfo.status == 'merge'">
<text>合台</text>
</text>
</view>
<view class="tag-wrap">
<text class="tag" v-if="listinfo.sendType == 'post'">快递</text>
<text class="tag" v-if="listinfo.sendType == 'takeaway'">外卖</text>
<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
</view>
<view class="number-wrap" v-if="listinfo.status != 'unpaid'">
<text class="t">取餐号</text>
<text class="number">{{listinfo.tableName || '空'}}</text>
</view>
</view>
<view class="card">
<view class="head border">
<text class="title">
<text>点单详情</text>
</text>
</view>
<view class="shop-info">
<view class="item" v-for="(item,index) in listinfo.detailList" :key="index">
<view class="cover">
<c-image width="120" height="120" radius="16" :src='item.coverImg'></c-image>
</view>
<view class="info">
<text>{{item.name}}</text>
<text class="n">x{{item.number}}</text>
</view>
<view class="price">
<text class="i"></text>
<text class="num">{{item.salePrice}}</text>
</view>
</view>
</view>
<view class="total-wrap">
<view class="price">
<text>合计</text>
<text class="i"></text>
<text class="num">{{listinfo.amounts}}</text>
</view>
</view>
</view>
<!-- <view class="sixcontent">
<view class="sixcontentone flex-between" style="padding: 0 0;" @click="orderfoodindex">
<view class="sixcontent_one" style="padding: 0 0;">
优惠券
</view>
<text style="color: red;">{{emitorderfoodform.couponsPrice}}</text>
</view>
</view> -->
<!-- <view class="redMoney">
<view>
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/hongbao.png"
style="width: 30rpx;height: 30.24rpx;;" mode=""></image>
红包/抵用券
</view>
<view @click="orderfoodindex">
可用优惠券{{couponAmount}}
</view>
</view> -->
<!-- 支付方式 -->
<view class="payType">
<view class="">
支付方式
</view>
<view class="">
<u-radio-group v-model="radiovalue1" iconPlacement="right" @change="groupChange" :size="28"
placement="column">
<u-radio activeColor="#ffd158" name="1">
<view class="dfs">
<image style="width:44rpx;height:44rpx"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/balance.png" mode="">
</image>
<text style="font-size: 28rpx;margin-left: 16rpx;">
微信支付
</text>
</view>
</u-radio>
<view style="margin: 22rpx 0;width: 100%;height: 2rpx;background-color: #E5E5E5;">
</view>
<u-radio activeColor="#ffd158" name="2">
<view class="dfs">
<image style="width:44rpx;height:44rpx"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png" mode="">
</image>
<text style="font-size: 28rpx;margin-left: 16rpx;">
会员卡支付</text>
</view>
</u-radio>
</u-radio-group>
<view style="font-weight: 400;font-size: 24rpx;color: #333333;margin-left: 60rpx;">
会员卡余额{{ amountVIP.amount}} <text
style="font-weight: 500;font-size: 28rpx;margin-left: 16rpx;color: #FF4C11;"
@click="goRecharge">去充值</text>
</view>
</view>
</view>
<!-- <view class="sixcontent" >
<view class="sixcontentone flex-between">
<view class="sixcontent_one">
支付方式
</view>
</view>
<view class="sixcontenttow">
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
<view class="sixcontenttowitemone flex-start">
<u-icon name="weixin-fill" color="#999999" size="32"></u-icon>
<text class="sixcontenttowitemonetext">微信支付</text>
</view>
<view class="flex-start">
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="26"></u-icon>
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="26"></u-icon>
</view>
</view>
<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
<view class="sixcontenttowitemone flex-start">
<u-icon name="zhifubao" color="#999999" size="26"></u-icon>
<text class="sixcontenttowitemonetext">余额支付</text>
</view>
<view class="flex-start">
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="26"></u-icon>
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="26"></u-icon>
</view>
</view>
</view>
</view> -->
<view :style="{height:height}">
</view>
<view class="fixedview">
<view class="flex-between">
<view class="fixedview_one flex-start">
<view class="fixedview_oneone">
实付金额:
</view>
<view class="fixedview_onetow">
<text>¥</text>{{listinfo.amount}}
</view>
<view class="fixedview_onethere" v-if="emitorderfoodform.couponsPrice">
以优惠¥{{emitorderfoodform.couponsPrice}}
</view>
</view>
<view class="fixedview_tow" @tap="$u.debounce(showpopupclickdd, 500)">
立即付款
</view>
</view>
</view>
<!-- 支付密码 -->
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
</view>
</template>
<script>
import webSocketUtils from '@/common/js/websocket.js'
import payPassword from '@/components/payPassword.vue'
export default {
components: {
payPassword
},
data() {
return {
height: '',
pay_type: 1,
listinfoid: '',
listinfo: {
detailList: [],
amount: '',
amounts: ''
},
emitorderfoodform: {
clickiconone: ''
},
amountVIP: null,
radiovalue1: '1',
vipId: null,
orderInfo: '',
// 可用优惠券数据
couponAmount: 0,
// 输入支付密码 123
passwordArr: [],
ispws: false,
};
},
onUnload() {
uni.$off('getMessage')
this.ispws = false
},
onLoad(e) {
// console.log(e, 140)
let res = JSON.parse(e.tableId)
this.listinfo.detailList = res
this.listinfo.amount = e.amount // 算完了的价格
this.listinfo.amounts = e.amount //本来的价格
this.handlemessage()
uni.$on('message', this.getMessage)
// 获取余额
this.getAount()
// 获取可用优惠券数量
this.getcoupon()
this.vipId = uni.cache.get('userInfo').id
},
onShow() {
this.getAount()
},
created() {
uni.$on('emitclickorderfood', (num) => {
// 总金额 couponsAmount 优惠卷购买金额 couponsPrice优惠金额 等于1是团购/不等于1
if (num.clickiconone == 1) {
this.listinfo.amount = (Number(this.listinfo.amounts) + Number(num.couponsPrice) - Number(num
.couponsAmount)).toFixed(2)
} else {
this.listinfo.amount = (Number(this.listinfo.amounts) - Number(num.couponsAmount)).toFixed(2)
}
this.emitorderfoodform = num
// this.num += num
})
},
methods: {
groupChange(n) {
// console.log('groupChange', n);
this.radiovalue1 = n
uni.cache.set('radiovalue1', n)
},
async getcoupon() {
let res = await this.api.userCoupon({
"orderNum": this.listinfo.amount,
"userId": uni.cache.get('userInfo').id,
})
if (res.code == 0) {
this.couponAmount = res.data
}
},
async getAount() {
console.log(uni.cache.get('userInfo'), '余额中userId不显示打印')
let res = await this.api.shopUserInfo({
// shopId:店铺ID
"shopId": uni.cache.get('shopUser'),
"userId": uni.cache.get('userInfo').id,
})
if (res.code == 0) {
this.amountVIP = res.data
}
},
getMessage(msg) {
if (msg.status != 'success') {
uni.showToast({
title: msg.msg,
icon: "none",
})
this.socketTicket.Close()
uni.$off('getMessage')
console.log(msg, 'socke返回数据')
} else if (msg.type == 'createOrder') {
console.log(msg, 'createOrder执行')
this.listinfoid = msg.data.id //下单需要的id
this.orderInfo = msg.data
if (this.radiovalue1 == 1) {
this.showpopupclickdds() //微信支付
}
}
},
handlemessage() {
this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
this.socketTicket = new webSocketUtils(
`${uni.conf.baseUrlwws}/websocket/table/${uni.cache.get('tableCode')}/${uni.cache.get('shopUser')}/${uni.cache.get('userInfo').id}`,
5000)
},
// 数据处理
socketSendMsg(data) {
if (this.socketTicket) {
this.socketTicket.send(data);
}
},
orderfoodindex() {
uni.pro.navigateTo('index/coupons/index', {
orderfood: 0,
orderId: this.listinfoid,
amount: this.listinfo.amounts
})
},
copyHandle(e) {
uni.setClipboardData({
data: e,
success() {
uni.showToast({
title: '复制成功',
icon: 'none'
});
}
});
},
async paymodfiyOrderInfo() {
let res = await this.api.paymodfiyOrderInfo({
orderId: this.listinfoid
})
},
creactorder(){
let data = { //定义socket数据传参
"skuId": '',
"num": '', //数量
"type": "createOrder", //“addcart:添加购物车create0rder:生成订单clearCart:庆康购物车”,
"couponsId": this.emitorderfoodform.id ? this.emitorderfoodform.id : '', //优惠券ID,
"isYhq": this.emitorderfoodform.id ? 1 : 0, // 是否使用优惠券( 1 使用, 0 不使用),
"isBuyYhq": this.emitorderfoodform.clickiconone == 1 ? 1 : 0, // 是否购买优惠券( 1 购买, 0 不够买)
"productId": '', //商品id
"shopId": uni.cache.get('shopUser'),
"userId": uni.cache.get('userInfo').id,
// tableId:uni.cache.get('tableCode')
}
let res = 0
if(res.code==0){
this.listinfoid = msg.data.id //下单需要的id
this.orderInfo = msg.data
if (this.radiovalue1 == 1) {
this.showpopupclickdds() //微信支付
}
}
},
// 去结算
showpopupclick() {
let data = { //定义socket数据传参
"skuId": '',
"num": '', //数量
"type": "createOrder", //“addcart:添加购物车create0rder:生成订单clearCart:庆康购物车”,
"couponsId": this.emitorderfoodform.id ? this.emitorderfoodform.id : '', //优惠券ID,
"isYhq": this.emitorderfoodform.id ? 1 : 0, // 是否使用优惠券( 1 使用, 0 不使用),
"isBuyYhq": this.emitorderfoodform.clickiconone == 1 ? 1 : 0, // 是否购买优惠券( 1 购买, 0 不够买)
"productId": '', //商品id
"shopId": uni.cache.get('shopUser'),
"userId": uni.cache.get('userInfo').id,
// tableId:uni.cache.get('tableCode')
}
this.socketSendMsg(data)
},
// 去充值
goRecharge() {
uni.pro.navigateTo('/pages/member/index', {
shopId: this.amountVIP.shopId
})
},
showpopupclickdd() {
console.log(this.radiovalue1, 'radiovalue1的值')
if (this.radiovalue1 == 1) {
// this.showpopupclick() //生成订单
this.creactorder()
} else {
// 判断是否有绑定支付密码
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
if (uni.cache.get('userInfo').isPwd == 0) {
uni.pro.navigateTo('/pages/user/repairpassword', {
shopId_id: uni.cache.get('shopUser')
})
} else {
if (this.amountVIP.amount > this.listinfo.amount) {
this.ispws = true
// this.showpopupclick() //生成订单
this.creactorder()
this.$nextTick(() => {
this.$refs.payPwd.onPayUp();
})
} else {
uni.showToast({
title: "余额不足"
})
}
}
}
},
// 微信支付
async showpopupclickdds() {
let res = await this.api.payorderPay({
orderId: this.listinfoid
}) //判断是否支付成功
if (res.code == 0) {
// uni.showLoading({
// title: '加载中',
// mask: true
// })
// #ifdef MP-WEIXIN
// 微信支付还是余额支付
uni.requestPayment({
provider: 'wxpay', //支付类型-固定值
partnerid: res.data.appId, // 微信支付商户号
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
nonceStr: res.data.nonceStr, // 随机字符串
package: res.data.package, // 固定值
signType: res.data.signType, //固定值
paySign: res.data.paySign, //签名
success: (res) => {
uni.showToast({
title: "支付成功"
})
uni.cache.set('shopUser', '') //删除shopUser
this.paymodfiyOrderInfo()
setTimeout(res => {
// uni.redirectTo({
// url: '/pages/order/successful?orderId=' + this
// .listinfoid + '&orderInfo=' + JSON.stringify(
// this.orderInfo) + '&radiovalue1=' + this
// .radiovalue1
// });
uni.redirectTo({
url: '/pages/order/order_detail?orderId=' + this
.listinfoid
});
}, 500)
// uni.redirectTo({
// url: "/pages/mall/order/ordersuccess?id=" + datareslane.data
// .order_id,
// });
},
fail: (err) => {
uni.showToast({
icon: 'none',
title: '支付失败'
})
setTimeout(res => {
// uni.redirectTo({
// url: '/pages/order/successful?orderId=' + this
// .listinfoid + '&orderInfo=' + JSON.stringify(
// this.orderInfo) + '&radiovalue1=' + this
// .radiovalue1
// });
uni.redirectTo({
url: '/pages/order/order_detail?orderId=' + this
.listinfoid
});
}, 500)
},
complete: (data) => {
console.log(data, '成功与否')
}
});
// #endif
}
},
// 余额支付
async accountPayevent(pwd) {
this.ispws = false
let res = await this.api.accountPay({
orderId: this.listinfoid,
memberId: this.amountVIP.id,
pwd: pwd
})
if (res.code == 0) {
uni.showToast({
icon: 'none',
title: '支付成功',
success: () => {
setTimeout(res => {
// uni.redirectTo({
// url: '/pages/order/successful?orderId=' + this
// .listinfoid + '&orderInfo=' + JSON.stringify(
// this.orderInfo) + '&radiovalue1=' + this
// .radiovalue1
// });
uni.redirectTo({
url: '/pages/order/order_detail?orderId=' + this
.listinfoid
});
}, 500)
}
})
} else if (res.data == 1) {
setTimeout(() => {
// 去充值
this.goRecharge()
}, 2000)
}
},
clickselect(b) {
this.pay_type = b
},
},
mounted() {
//#ifdef MP-WEIXIN || H5
var query = uni.createSelectorQuery().in(this).select('.fixedview')
query.boundingClientRect(ele => {
var that = this;
that.height = (ele.height) + "px";
that = null;
// uni.getSystemInfo({
// success(res) {
// }
// })
}).exec();
//#endif
//#ifdef MP-ALIPAY
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
var nodeData = ele[0]
var that = this;
that.height = (nodeData.height) + "px";
that = null;
})
//#endif
},
};
</script>
<style scoped lang="scss">
.container {
padding: 28upx;
}
.card {
background-color: #fff;
border-radius: 20upx;
padding: 28upx;
margin-bottom: 28upx;
.head {
display: flex;
justify-content: space-between;
&.border {
padding-bottom: 28upx;
border-bottom: 1upx solid #fafafa;
}
.status {
color: #ff0000;
}
}
.tag-wrap {
padding: 28upx 0;
display: flex;
.tag {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10upx;
color: $color-priamry;
border: 1px solid $color-priamry;
font-size: 24upx;
}
}
.number-wrap {
background-color: #fafafa;
border-radius: 16upx;
padding: 28upx 0;
display: flex;
flex-direction: column;
align-items: center;
.number {
font-size: 42upx;
font-weight: bold;
}
}
.price {
.i {
font-size: 20upx;
}
.num {
font-size: 38upx;
}
}
.shop-info {
padding: 28upx 0;
.item:nth-child(1) {
margin-top: 0;
}
.item {
margin-top: 16rpx;
display: flex;
.info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 28upx;
.n {
font-size: 24upx;
color: #999;
}
}
}
}
.total-wrap {
display: flex;
justify-content: flex-end;
padding-top: 28upx;
border-top: 1upx solid #fafafa;
}
.order-info {
.row {
display: flex;
justify-content: space-between;
padding-top: 28upx;
.t {
font-size: 24upx;
color: #999;
}
.info {
font-size: 24upx;
}
}
}
}
.sixcontent {
width: 100%;
background: #FFFFFF;
padding: 32rpx;
margin-top: 32rpx;
border-radius: 12rpx;
.sixcontentone {
padding-bottom: 28rpx;
border-bottom: 1px solid #F7F7F7;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
.sixcontent_one {
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
}
}
.sixcontenttow {
.sixcontenttowitem {
margin-top: 16rpx;
.sixcontenttowitemone {
image {
margin-left: 24rpx;
width: 31.37rpx;
height: 27.34rpx;
}
.sixcontenttowitemonetext {
margin-left: 14rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
}
}
}
}
}
.redMoney {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
background-color: #fff;
padding: 18rpx 14rpx;
>view:first-child {
display: flex;
align-items: center;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
>view:last-child {
background: #FFE9E9;
border-radius: 16rpx 16rpx 16rpx 16rpx;
font-weight: 400;
font-size: 28rpx;
color: #FF3333;
text-align: center;
padding: 9rpx 13rpx;
}
}
.payType {
padding: 32rpx 34rpx;
margin-top: 48rpx;
background-color: #fff;
>view:first-child {
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
>view:last-child {
margin-top: 32rpx;
}
.dfs {
display: flex;
align-items: center;
}
}
.fixedview {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 180rpx;
padding: 16rpx 34rpx;
.flex-between {
width: 100%;
padding: 24rpx 28rpx;
background: #FFFFFF;
flex-wrap: nowrap;
.fixedview_one {
.fixedview_oneone {
font-size: 28rpx;
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
font-weight: normal;
color: #333333;
}
.fixedview_onetow {
font-size: 44rpx;
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
font-weight: normal;
color: #F45C4C;
font-weight: bold;
text {
font-size: 28rpx;
}
}
.fixedview_onethere {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
.fixedview_tow {
background: red;
border-radius: 34rpx;
padding: 10rpx 44rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
}
}
</style>