更改首页

This commit is contained in:
魏啾
2024-07-05 18:26:46 +08:00
parent a40cfd9c5f
commit 380a6312f8
19 changed files with 3841 additions and 1179 deletions

View File

@@ -1,59 +1,14 @@
<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="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">
@@ -62,119 +17,6 @@
</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>
@@ -182,6 +24,7 @@
</template>
<script>
// import {object} from 'prop-types';
import webSocketUtils from '@/common/js/websocket.js'
import payPassword from '@/components/payPassword.vue'
export default {
@@ -192,7 +35,7 @@
return {
height: '',
pay_type: 1,
listinfoid: '',
remark: '',
listinfo: {
detailList: [],
amount: '',
@@ -201,115 +44,54 @@
emitorderfoodform: {
clickiconone: ''
},
amountVIP: null,
radiovalue1: '1',
vipId: null,
orderInfo: '',
// 可用优惠券数据
couponAmount: 0,
// 输入支付密码 123
passwordArr: [],
ispws: false,
listinfoid: ''
};
},
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)
props: {
cartLists: {
type: Object,
default () {
return {
amount: '0.00',
data: []
}
}
this.emitorderfoodform = num
// this.num += num
})
},
radiovalue: {
type: String,
default: '1'
},
amountVIP: {
type: Object,
default () {
return {
}
}
}
},
onUnload() {
this.ispws = false
},
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
}
this.radiovalue = n
},
async getAount() {
let res = await this.api.shopUserInfo({
// shopId:店铺ID
"shopId": this.$store.state.shopId,
"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() {
orderfoodindex() { //优惠劵
uni.pro.navigateTo('index/coupons/index', {
orderfood: 0,
orderId: this.listinfoid,
@@ -327,82 +109,33 @@
}
});
},
async paymodfiyOrderInfo() {
async paymodfiyOrderInfo() { //支付完成后请求
let res = await this.api.paymodfiyOrderInfo({
orderId: this.listinfoid
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": this.$store.state.shopId,
"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": this.$store.state.shopId,
"userId": uni.cache.get('userInfo').id,
// tableId:uni.cache.get('tableCode')
}
this.socketSendMsg(data)
},
// 去充值
goRecharge() {
goRecharge() { // 去充值
uni.pro.navigateTo('/pages/member/index', {
shopId: this.amountVIP.shopId
shopId: uni.cache.get('shopUser')
})
},
showpopupclickdd() {
console.log(this.radiovalue1, 'radiovalue1的值')
if (this.radiovalue1 == 1) {
// this.showpopupclick() //生成订单
this.creactorder()
showpopupclickddes(ID) {
// radiovalue为1是微信支付
this.listinfoid = ID
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 {
if (this.amountVIP.amount > this.listinfo.amount) {
this.ispws = true
// this.showpopupclick() //生成订单
this.creactorder()
this.$nextTick(() => {
this.$refs.payPwd.onPayUp();
})
} else {
uni.showToast({
title: "余额不足"
})
}
this.ispws = true
this.$nextTick(() => {
this.$refs.payPwd.onPayUp();
})
}
}
},
@@ -412,10 +145,10 @@
orderId: this.listinfoid
}) //判断是否支付成功
if (res.code == 0) {
// uni.showLoading({
// title: '加载中',
// mask: true
// })
uni.showLoading({
title: '加载中',
mask: true
})
// #ifdef MP-WEIXIN
// 微信支付还是余额支付
uni.requestPayment({
@@ -427,51 +160,28 @@
signType: res.data.signType, //固定值
paySign: res.data.paySign, //签名
success: (res) => {
uni.showToast({
title: "支付成功"
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
});
},
})
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, '成功与否')
fail: () => {
uni.hideLoading()
}
});
// #endif
uni.hideLoading()
}
},
// 余额支付
@@ -480,80 +190,103 @@
let res = await this.api.accountPay({
orderId: this.listinfoid,
memberId: this.amountVIP.id,
pwd: pwd
// remark: this.remark,
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
// });
// 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
url: '/pages/order/order_detail?orderId=' + _this
.listinfoid
});
}, 500)
},
})
} 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)
}
}
})
} else if (res.data == 1) {
setTimeout(() => {
// 去充值
this.goRecharge()
}, 2000)
}
},
showToastUppop(title) {
uni.showToast({
icon: 'none',
title,
success: () => {
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;
async mounted() {
uni.getSystemInfo({
success: (data) => {
this.height = (data.windowHeight / 2) + "px";
console.log(this.height, 1111);
}
})
//#endif
// //#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;
// }).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;
padding: 0 28upx 28upx 28upx 28upx;
max-height: 600px;
overflow: auto;
}
.card {
background-color: #fff;
border-radius: 20upx;
padding: 28upx;
margin-bottom: 28upx;
margin-bottom: 48rpx;
.head {
display: flex;

View File

@@ -0,0 +1,803 @@
<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> -->
<!-- <u--textarea v-model="remark" placeholder="订单备注" ></u--textarea> -->
<!-- 支付方式 -->
<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('message')
},
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
this.productqueryProduct() //list 数据
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() { // 去充值
uni.pro.navigateTo('/pages/member/index', {
shopId: uni.cache.get('shopUser')
})
},
orderdetail() { // 直接生成订单
let data = {
"skuId": '',
"num": '', //数量
"type": "createOrder", //“addcart:添加购物车create0rder:生成订单clearCart:庆康购物车”,
"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,
// remark: this.remark,
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>

View File

@@ -3,7 +3,7 @@
<view class="card" v-if="listinfo.tableName">
<view class="head">
<text class="title">
<text>{{listinfo.tableName || '空'}}</text>
桌号<text>{{listinfo.tableName || '空'}}</text>
</text>
<text class="status" v-if="listinfo.status == 'unpaid'">
<text>待支付</text>
@@ -36,9 +36,10 @@
<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'">
<view class="number-wrap"
v-if="listinfo.status != 'unpaid' && listinfo.status != 'paying'&& listinfo.status != 'cancelled'">
<text class="t">取餐号</text>
<text class="number">{{listinfo.tableName || '空'}}</text>
<text class="number">{{listinfo.outNumber || '空'}}</text>
</view>
</view>
<view class="card">
@@ -195,7 +196,7 @@
return {
height: '',
pay_type: 1,
remark:'',
remark: '',
listinfoid: '',
listinfo: {
detailList: [],
@@ -266,7 +267,7 @@
}
},
orderfoodindex() {//优惠劵
orderfoodindex() { //优惠劵
uni.pro.navigateTo('index/coupons/index', {
orderfood: 0,
orderId: this.listinfo.id,
@@ -284,12 +285,12 @@
}
});
},
async paymodfiyOrderInfo() {//支付完成后请求
async paymodfiyOrderInfo() { //支付完成后请求
let res = await this.api.paymodfiyOrderInfo({
orderId: this.listinfo.id,
})
},
goRecharge() {// 去充值
goRecharge() { // 去充值
uni.pro.navigateTo('/pages/member/index', {
shopId: uni.cache.get('shopUser')
})