cashier_weapp/pages/order_detail/indexs.vue

813 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' && listinfo.status != 'paying'&& listinfo.status != 'cancelled'">
<text class="t">取餐号</text>
<text class="number">{{listinfo.outNumber || '空'}}</text>
</view>
</view>
<view class="card" v-if="listinfoid && listinfo">
<view class="head border">
<text class="title">
<text>点单详情</text>
</text>
</view>
<view class="shop-info">
<view class="item" v-for="(item,index) in listinfo.details" :key="index">
<view class="cover">
<c-image width="120" height="120" radius="16" :src='item.productImg'></c-image>
</view>
<view class="info">
<text>{{item.productName}}</text>
<text class="n" v-if="item.productSkuName">{{item.productSkuName}}</text>
<text class="n">x{{item.num}}</text>
</view>
<view class="price">
<text class="i">¥</text>
<text class="num">{{item.price}}</text>
</view>
</view>
</view>
<view class="total-wrap">
<view class="price">
<text>合计:</text>
<text class="i">¥</text>
<text class="num">{{listinfo.payAmount}}</text>
</view>
</view>
</view>
<view class="card" v-else>
<view class="shop-info">
<view class="item" v-for="(item,index) in cartLists.data" :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">{{item.skuName}}</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>
<!-- <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 style="padding: 0 20rpx;">
<u--textarea v-model="remark" placeholder="备注"></u--textarea>
</view>
<!-- 支付方式 -->
<view class="payType">
<view class="">
支付方式
</view>
<view class="">
<u-radio-group v-model="radiovalue" 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?amountVIP.amount:0}} <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" v-if="listinfoid && listinfo">
<text>¥</text>{{listinfo.payAmount}}
</view>
<view class="fixedview_onetow" v-else>
<text>¥</text>{{cartLists.amount}}
</view>
<!-- <view class="fixedview_onethere" v-if="emitorderfoodform.couponsPrice">
以优惠¥{{emitorderfoodform.couponsPrice}}
</view> -->
</view>
<view class="fixedview_tow" @tap="$u.debounce(showpopupclickdd, 500)" v-if="listinfoid && listinfo">
立即付款
</view>
<view class="fixedview_tow" @tap="$u.debounce(orderdetail, 500)" v-else>
立即付款
</view>
</view>
</view>
<!-- 支付密码 -->
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
<!-- 弹幕 -->
<l-barrage ref="lBarrage" @end="onEnd" :minTop='0' :maxTop='16'></l-barrage>
</view>
</template>
<script>
// import {object} from 'prop-types';
import webSocketUtils from '@/common/js/websocket.js'
import payPassword from '@/components/payPassword.vue'
import lBarrage from '@/components/l-barrage/l-barrage.vue'
export default {
components: {
payPassword,
lBarrage
},
data() {
return {
userInfo: uni.cache.get('userInfo'), //个人信息
cartLists: {},
height: '',
pay_type: 1,
remark: '',
listinfo: {
detailList: [],
amount: '',
amounts: ''
},
emitorderfoodform: {
clickiconone: ''
},
orderInfo: '',
// 可用优惠券数据
couponAmount: 0,
// 输入支付密码 123
ispws: false,
listinfoid: null,
radiovalue: '1',
amountVIP: null
};
},
onUnload() {
this.socketTicket.Close()
uni.$off('getMessage')
this.ispws = false
},
onHide() {
this.socketTicket.Close()
uni.$off('getMessage')
},
onShow() {
uni.$on('message', this.getMessage)
if (this.listinfoid) {
this.orderorderInfo()
} else {
this.handlemessage()
}
// 获取余额
this.getAount()
},
methods: {
getMessage(msg) {
if (msg == 1) { // 网络在连接
return false
}
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
return false
}
if (msg.status != 'success') {
uni.showToast({
title: msg.msg,
icon: "none",
})
return false;
} else {
switch (msg.type) {
case 'createOrder':
console.log(msg.data)
this.listinfoid = msg.data.id
uni.$off('getMessage')
this.orderorderInfo(1)
break;
case 'addCart':
this.cartLists = msg
break;
case 'order':
uni.navigateBack()
setTimeout(() => {
uni.showToast({
title: '您的小伙伴已下单了哦~~'
})
}, 1000)
break;
case 'addcart':
/*插入一条弹幕*/
this.$refs.lBarrage.add(
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
);
break;
}
this.$set(this, 'cartLists', msg)
}
},
handlemessage() {
this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
tableId: uni.cache.get('tableCode'),
shopId: uni.cache.get('shopUser'),
userId: uni.cache.get('userInfo').id,
"type": "connect",
})
},
// 数据处理
socketSendMsg(data) {
if (this.socketTicket) {
this.socketTicket.send(data);
}
},
onEnd() { //回调弹幕
console.log('一波结束')
},
// 查询订单信息
async orderorderInfo(i) {
let res = await this.api.orderorderInfo({
orderId: this.listinfoid
})
if (res.code == 0) {
this.listinfo = res.data
if (i == 1) { //请求完了详情在去调支付
this.showpopupclickdd()
}
}
},
groupChange(n) {
this.radiovalue = n
},
async getAount() {
let res = await this.api.shopUserInfo({
"shopId": uni.cache.get('shopUser'),
"userId": uni.cache.get('userInfo').id,
})
if (res.code == 0) {
this.amountVIP = res.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,
})
},
goRecharge() { // 去充值
// 判断是否绑定手机,只有下单时候有,会员列表肯定有
// console.log(this.amountVIP.isVip, '调试1')
if (this.amountVIP.isVip == 0) {
// 跳转到开通页面
uni.navigateTo({
url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
})
} else {
uni.pro.navigateTo('/pages/member/index', {
shopId: uni.cache.get('shopUser')
})
}
},
orderdetail() { // 直接生成订单
let data = {
"skuId": '',
"num": '', //数量
"type": "createOrder", //“addcart:添加购物车create0rder:生成订单clearCart:庆康购物车”,
"remark": this.remark,
"couponsId": '', //优惠券ID,
"isYhq": 0, // 是否使用优惠券( 1 使用, 0 不使用),
"isBuyYhq": 0, // 是否购买优惠券( 1 购买, 0 不够买)
"productId": '', //商品id
"shopId": uni.cache.get('shopUser'),
"userId": uni.cache.get('userInfo').id,
}
uni.$u.debounce(this.socketSendMsg(data), 500)
},
showpopupclickdd() {
uni.showLoading({
title: '加载中',
mask: true
})
// radiovalue为1是微信支付
if (this.radiovalue == 1) {
this.showpopupclickdds() //微信支付
} else {
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
// console.log(isPwd,'是否设置了支付密码')
if (uni.cache.get('userInfo').isPwd == 0) {
uni.pro.navigateTo('/pages/user/repairpassword', {
shopId_id: uni.cache.get('shopUser')
})
} else {
uni.hideLoading()
this.ispws = true
this.$nextTick(() => {
this.$refs.payPwd.onPayUp();
})
}
}
},
// 微信支付
async showpopupclickdds() {
let res = await this.api.payorderPay({
orderId: this.listinfoid
}) //判断是否支付成功
if (res.code == 0) {
// #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) => {
let _this = this
uni.requestSubscribeMessage({
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
complete() {
uni.showToast({
title: "支付成功"
})
// uni.cache.set('shopUser', '') //删除shopUser
_this.paymodfiyOrderInfo()
uni.redirectTo({
url: '/pages/order/order_detail?orderId=' + _this
.listinfoid
});
},
})
},
fail: () => {
uni.hideLoading()
}
});
// #endif
uni.hideLoading()
}
},
// 余额支付
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) {
// data ->1 支付成功
// ->2 余额不足
// ->3 未设置支付密码,
// ->4 不是会员,
if (res.data == 1) {
this.showToastUppop('支付成功')
let _this = this
uni.requestSubscribeMessage({
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
complete() {
uni.redirectTo({
url: '/pages/order/order_detail?orderId=' + _this
.listinfoid
});
},
})
} else if (res.data == 2) {
this.showToastUppop('余额不足')
setTimeout(() => {
// 去充值
this.goRecharge()
}, 1500)
} else if (res.data == 3) {
this.showToastUppop('未设置支付密码')
setTimeout(() => {
uni.pro.navigateTo('/pages/user/repairpassword', {
shopId_id: uni.cache.get('shopUser')
})
}, 1500)
} else if (res.data == 4) {
this.showToastUppop('非会员请充值')
setTimeout(() => {
// 去充值
this.goRecharge()
}, 1500)
}
}
},
showToastUppop(title) {
uni.showToast({
icon: 'none',
title,
success: () => {
}
})
},
},
async mounted() {
let rectInfo = await this.$u.getRect('.fixedview');
console.log(rectInfo);
this.height = rectInfo.height + "px"
},
};
</script>
<style scoped lang="scss">
.container {
padding: 0 28upx 28upx 28upx 28upx;
overflow: auto;
}
.card {
background-color: #fff;
border-radius: 20upx;
padding: 28upx;
margin-bottom: 48rpx;
.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;
background: #FFFFFF;
.flex-between {
width: 100%;
padding: 24rpx 28rpx;
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>