|
|
<template>
|
|
|
<view class="content_box">
|
|
|
<view class="orderBoxList">
|
|
|
<view class="orderBox">
|
|
|
<view class="orderBoxTitle flex-row justify-between">
|
|
|
<text class="orderBoxTitleTxt">预约信息</text>
|
|
|
<!-- <text style='color:#32950b'>{{info.status_name}}</text> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBoxList p0">
|
|
|
<view class="orderBox m0">
|
|
|
<view class="orderBoxInfoRow flex-row" v-if="info.type==1">
|
|
|
<text class="orderBoxInfoRowTxt">领队人：{{info.leader||""}}丨{{info.mobile||""}}</text>
|
|
|
</view>
|
|
|
<view class="orderBoxInfoRow flex-row" v-if="info.type==2">
|
|
|
<text class="orderBoxInfoRowTxt">手机号：{{info.mobile||""}}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="orderBoxInfoRow flex-row">
|
|
|
<text class="orderBoxInfoRowTxt">入馆时间：{{info.date?info.date:''}} {{info.time?info.time:''}}</text>
|
|
|
</view>
|
|
|
<view v-if="info.type==1" class="orderBoxInfo flex-col ewmcode">
|
|
|
<view style='text-align: center;'>
|
|
|
<view class="imgs">
|
|
|
<view :class="info.status!=1?'isuse':''">
|
|
|
<cover-image v-if="info.status==2" src="../../static/img/used.png" alt=""></cover-image>
|
|
|
<canvas canvas-id='qrcode' style="width: 170px;height:170px;margin: 0 auto;">
|
|
|
<cover-view v-if="showview">
|
|
|
</cover-view>
|
|
|
</canvas>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 个人 -->
|
|
|
<block v-if="info.type==2">
|
|
|
<view class="orderBoxInfo flex-col ewmcode" :key='index' v-for="(item,index) in detailsinfo">
|
|
|
<view class="names">
|
|
|
<checkbox-group v-if="item.status==1" @change='choosePerson($event,item.id)'>
|
|
|
<view class='flex-row justify-between'>
|
|
|
<view>
|
|
|
<checkbox class='red' :value="item.id" />{{item.name}}
|
|
|
</view>
|
|
|
<text style='color:#32950b'>{{item.status_name}}</text>
|
|
|
</view>
|
|
|
|
|
|
</checkbox-group>
|
|
|
<view v-else class='flex-row justify-between'>
|
|
|
<text style='color:#828282'>{{item.name}}</text>
|
|
|
<text style='color:#828282'>{{item.status_name}}</text>
|
|
|
</view>
|
|
|
<!-- <checkbox color='#32950b' @change='choosePerson'/>{{item.name}} -->
|
|
|
</view>
|
|
|
<view style='text-align: center;'>
|
|
|
<view class="imgs">
|
|
|
<view :class="item.status!=1?'isuse':''">
|
|
|
<cover-image v-if="info.status==2" src="../../static/img/used.png" alt="">
|
|
|
</cover-image>
|
|
|
<canvas :canvas-id="'qrcode'+index"
|
|
|
style="width: 170px;height:170px;margin: 0 auto;">
|
|
|
<cover-view v-if="showview">
|
|
|
</cover-view>
|
|
|
</canvas>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="orderBoxList p0">
|
|
|
<view class='orderBox bm0'>
|
|
|
<view class="orderBoxInfoRow flex-row" style="margin-top: 20rpx">
|
|
|
<text class="orderBoxInfoRowTxt">下单时间：{{info.created_at||""}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class='cancelBtn' v-if='info.status==1&&info.type==2'>
|
|
|
<u-button type="primary" @click="tocancel(info.id)">取消订单</u-button>
|
|
|
</view>
|
|
|
<view class='cancelBtn' v-if='info.status==1&&info.type==1'>
|
|
|
<u-button type="primary" @click="tocancelteam(info.id)">取消订单</u-button>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import uQRCode from "@/utils/qrcode.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
info: {},
|
|
|
vinfo: {},
|
|
|
detailsinfo: [],
|
|
|
showview: false,
|
|
|
timer: null,
|
|
|
optionid: "",
|
|
|
timer: null,
|
|
|
cancelArr: []
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.loadIntroduce();
|
|
|
if (!this.util.isNull(options.id)) {
|
|
|
this.optionid = options.id
|
|
|
this.loadInfo(options.id);
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return this.util.shareInfo
|
|
|
},
|
|
|
|
|
|
onShareTimeline(){
|
|
|
return this.util.shareInfo
|
|
|
},
|
|
|
onShow() {
|
|
|
var that = this
|
|
|
this.timer = setInterval(function() {
|
|
|
that.loadInfo(that.optionid);
|
|
|
}, 4000)
|
|
|
},
|
|
|
|
|
|
onHide() {
|
|
|
clearInterval(this.timer)
|
|
|
},
|
|
|
|
|
|
onUnload() {
|
|
|
clearInterval(this.timer)
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
choosePerson(e, id) {
|
|
|
if (e.detail.value.length > 0) {
|
|
|
this.cancelArr.push(id)
|
|
|
} else {
|
|
|
this.cancelArr.map((item, index) => {
|
|
|
if (item == id) {
|
|
|
this.cancelArr.splice(index, 1)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
tocancelteam(id){
|
|
|
var that = this;
|
|
|
uni.showModal({
|
|
|
title: '确认要取消预约？',
|
|
|
success: function(res) {
|
|
|
if (res.confirm) {
|
|
|
that.util.request({
|
|
|
api: '/api/mobile/visit/cancel-order',
|
|
|
data: {
|
|
|
id: id
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
// that.loadOrder()
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: res.msg
|
|
|
})
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
that.util.toast(res);
|
|
|
}
|
|
|
})
|
|
|
} else if (res.cancel) {
|
|
|
console.log('用户点击取消');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
tocancel(id) {
|
|
|
var that = this;
|
|
|
if (this.cancelArr.length == 0) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请选择需要取消预约的人员"
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
let _arr = ''
|
|
|
this.cancelArr.map((item,index)=>{
|
|
|
_arr+=`&member_id[${index}]=${item}`
|
|
|
})
|
|
|
console.log("_arr",_arr)
|
|
|
uni.showModal({
|
|
|
title: '确认要取消预约？',
|
|
|
success: function(res) {
|
|
|
if (res.confirm) {
|
|
|
that.util.request({
|
|
|
api: '/api/mobile/visit/cancel-order-member?order_id='+id+_arr,
|
|
|
data: {
|
|
|
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: res.msg
|
|
|
})
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
that.util.toast(res);
|
|
|
}
|
|
|
})
|
|
|
} else if (res.cancel) {
|
|
|
console.log('用户点击取消');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
qrFun: function(text, qrcode) {
|
|
|
var id = "qrcode";
|
|
|
if (qrcode) {
|
|
|
id = qrcode
|
|
|
}
|
|
|
uQRCode.make({
|
|
|
canvasId: id,
|
|
|
componentInstance: this,
|
|
|
text: text,
|
|
|
size: 170,
|
|
|
// margin: 10,
|
|
|
backgroundColor: '#ffffff',
|
|
|
foregroundColor: '#000000',
|
|
|
fileType: 'jpg',
|
|
|
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
|
|
|
success: res => {
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
loadIntroduce() {
|
|
|
var that = this;
|
|
|
this.util.request({
|
|
|
api: '/api/mobile/visit/introduce',
|
|
|
utilSuccess: function(res) {
|
|
|
that.vinfo = res;
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
timeFormat(time, format) {
|
|
|
return this.$moment(time).format(format);
|
|
|
},
|
|
|
loadInfo(id) {
|
|
|
var that = this;
|
|
|
this.util.request({
|
|
|
api: '/api/mobile/user/my-visit-order-show',
|
|
|
data: {
|
|
|
id: id
|
|
|
},
|
|
|
customLoading: true,
|
|
|
utilSuccess: function(res) {
|
|
|
that.info = res;
|
|
|
that.detailsinfo = res.details;
|
|
|
if (res.status != 1) {
|
|
|
clearInterval(that.timer)
|
|
|
}
|
|
|
if (res.type == 1) {
|
|
|
that.qrFun(res.code + "-" + "0");
|
|
|
setTimeout(function() {
|
|
|
that.showview = true
|
|
|
}, 500)
|
|
|
|
|
|
}
|
|
|
if (res.type == 2) {
|
|
|
for (var i = 0; i < res.details.length; i++) {
|
|
|
that.qrFun(res.code + "-" + res.details[i].code, 'qrcode' + i);
|
|
|
}
|
|
|
setTimeout(function() {
|
|
|
that.showview = true
|
|
|
}, 500)
|
|
|
}
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: res
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
.orderBoxFooter {
|
|
|
padding: 20rpx 0 0 0;
|
|
|
}
|
|
|
|
|
|
.fbtn {
|
|
|
background: #cf995a;
|
|
|
border-radius: 8rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
|
padding: 7rpx 17rpx;
|
|
|
}
|
|
|
|
|
|
.cancel {
|
|
|
background: #F7F6F4;
|
|
|
color: #828282;
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
color: #6EAC97;
|
|
|
margin-right: 20rpx;
|
|
|
font-size: 35rpx;
|
|
|
}
|
|
|
|
|
|
.infotop {
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 2rpx 3rpx 10rpx 0px rgba(107, 94, 77, 0.3);
|
|
|
}
|
|
|
|
|
|
page {
|
|
|
background-color: #fbf3ea;
|
|
|
}
|
|
|
|
|
|
.orderBoxList {
|
|
|
/* padding: 26rpx; */
|
|
|
box-sizing: border-box;
|
|
|
background: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
position: relative;
|
|
|
/* border-bottom: 2rpx solid #F7F6F4; */
|
|
|
|
|
|
}
|
|
|
|
|
|
.orderBoxList::before {
|
|
|
content: '';
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
border-radius: 0 26rpx 0 0;
|
|
|
background-color: #fbf3ea;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0
|
|
|
}
|
|
|
|
|
|
.orderBoxList::after {
|
|
|
content: '';
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
border-radius: 26rpx 0 0 0;
|
|
|
background-color: #fbf3ea;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
right: 0
|
|
|
}
|
|
|
|
|
|
|
|
|
.orderBoxListTip {
|
|
|
background: none;
|
|
|
border-radius: 0rpx;
|
|
|
padding: 26rpx 10rpx;
|
|
|
}
|
|
|
|
|
|
.orderBoxListTip .orderBoxTitle {
|
|
|
padding-bottom: 10rpx
|
|
|
}
|
|
|
|
|
|
.content_box {
|
|
|
/* background: #FFFFFF; */
|
|
|
border-radius: 16rpx;
|
|
|
padding: 27rpx;
|
|
|
padding-top: 0;
|
|
|
}
|
|
|
|
|
|
.orderBox {
|
|
|
margin: 26rpx;
|
|
|
padding: 26rpx;
|
|
|
border-bottom: 2rpx dotted #dfdfdf;
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.orderBoxTitle {
|
|
|
/* padding: 0rpx 0rpx 25rpx 0rpx; */
|
|
|
/* border-bottom: 2rpx solid #F7F6F4; */
|
|
|
}
|
|
|
|
|
|
|
|
|
.orderBoxInfoRow {
|
|
|
align-items: center;
|
|
|
margin: 10rpx
|
|
|
}
|
|
|
|
|
|
.orderBoxTitleTxt {
|
|
|
font-size: 32rpx;
|
|
|
color: #351C1B;
|
|
|
}
|
|
|
|
|
|
.orderBoxStatus {
|
|
|
background: #cf995a;
|
|
|
border-top-right-radius: 16rpx;
|
|
|
border-bottom-left-radius: 16rpx;
|
|
|
font-size: 24rpx;
|
|
|
padding: 19rpx 23rpx 17rpx 23rpx;
|
|
|
color: #FFFFFF;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
.orderBoxInfo {
|
|
|
/* padding: 29rpx 0rpx; */
|
|
|
/* border-bottom: 2rpx solid #F7F6F4; */
|
|
|
}
|
|
|
|
|
|
|
|
|
.orderBoxInfoRowTxt {
|
|
|
font-size: 30rpx !important;
|
|
|
font-family: PingFang SC;
|
|
|
color: #828282;
|
|
|
}
|
|
|
|
|
|
.orderBoxTime {
|
|
|
color: #CFCFCF;
|
|
|
padding: 23rpx 0;
|
|
|
border-bottom: 2rpx solid #F7F6F4;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.p0 {
|
|
|
/* padding-top: 0;
|
|
|
border-left: 32rpx solid #cf995a */
|
|
|
}
|
|
|
|
|
|
.p0::before {
|
|
|
content: '';
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
border-radius: 0 0 26rpx 0;
|
|
|
background-color: #fbf3ea;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0
|
|
|
}
|
|
|
|
|
|
.p0::after {
|
|
|
content: '';
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
border-radius: 0 0 0 26rpx;
|
|
|
background-color: #fbf3ea;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0
|
|
|
}
|
|
|
|
|
|
.m0 {
|
|
|
margin-top: 0
|
|
|
}
|
|
|
|
|
|
.m0::before {
|
|
|
content: '';
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
border-radius: 0 26rpx 0 0;
|
|
|
background-color: #fbf3ea;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0
|
|
|
}
|
|
|
|
|
|
.m0::after {
|
|
|
content: '';
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
border-radius: 26rpx 0 0 0;
|
|
|
background-color: #fbf3ea;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
right: 0
|
|
|
}
|
|
|
|
|
|
.ewmcode {
|
|
|
text-align: center;
|
|
|
font-size: 28rpx;
|
|
|
text-align: left;
|
|
|
font-size: 28rpx;
|
|
|
margin-left: 18rpx;
|
|
|
padding-bottom: 0;
|
|
|
padding-top: 30rpx;
|
|
|
}
|
|
|
|
|
|
.imgs {
|
|
|
margin: 30rpx 0 0rpx 0;
|
|
|
font-size: 0;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.imgs view {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
margin-bottom: 20rpx;
|
|
|
box-shadow: 2px 2px 8rpx gray;
|
|
|
padding: 10rpx;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.imgs cover-image {
|
|
|
position: absolute;
|
|
|
width: 200rpx;
|
|
|
height: 200rpx;
|
|
|
z-index: 999;
|
|
|
opacity: 1;
|
|
|
right: 0rpx;
|
|
|
bottom: 0rpx;
|
|
|
}
|
|
|
|
|
|
.imgs canvas {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
.imgsname {
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
margin-left: 15rpx;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.names {
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
.imgs text {
|
|
|
display: block;
|
|
|
/* margin-left: 40rpx; */
|
|
|
}
|
|
|
|
|
|
.imgs .isuse cover-view {
|
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
|
width: 170px;
|
|
|
height: 170px;
|
|
|
}
|
|
|
|
|
|
.cancelBtn {
|
|
|
padding: 30rpx 0;
|
|
|
padding-top: 0
|
|
|
}
|
|
|
|
|
|
.cancelBtn .u-button {
|
|
|
width: 70% !important;
|
|
|
margin: 30rpx auto;
|
|
|
}
|
|
|
|
|
|
.bm0 {
|
|
|
border-bottom: none;
|
|
|
margin-top: 0
|
|
|
}
|
|
|
|
|
|
.ewminfo {
|
|
|
color: #828282;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.iconinfo {
|
|
|
font-size: 35rpx;
|
|
|
}
|
|
|
|
|
|
.usercard text {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.share {
|
|
|
background: url(../../static/img/share.png) no-repeat left center;
|
|
|
background-size: 21rpx;
|
|
|
background-color: #cf995a;
|
|
|
background-position: 18rpx;
|
|
|
padding: 7rpx 20rpx;
|
|
|
padding-left: 46rpx;
|
|
|
border-radius: 10px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.shareuse {
|
|
|
background: url(../../static/img/share_used.png) no-repeat left center;
|
|
|
background-color: #F7F6F4;
|
|
|
color: #828282;
|
|
|
background-position: 18rpx;
|
|
|
background-size: 21rpx;
|
|
|
}
|
|
|
|
|
|
.stars {
|
|
|
color: #cf995a;
|
|
|
margin-right: 12rpx
|
|
|
}
|
|
|
checkbox.red .wx-checkbox-input,
|
|
|
checkbox.red .uni-checkbox-input{
|
|
|
border-color: #32950b !important;
|
|
|
border-style: dotted !important;
|
|
|
margin-right:25rpx!important;
|
|
|
}
|
|
|
checkbox.red[checked] .wx-checkbox-input,
|
|
|
checkbox.red.checked .uni-checkbox-input{
|
|
|
background-color: #32950b !important;
|
|
|
border-color: ##32950b !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
</style> |
