|
|
<template>
|
|
|
<view class="container">
|
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
|
<view class="wrap">
|
|
|
<view>{{courseInfo.name}}</view>
|
|
|
|
|
|
<view v-if="info.fee_status==1">
|
|
|
您已缴费成功。
|
|
|
</view>
|
|
|
<view v-else-if="info.fee_status==2" style="color:red">
|
|
|
您上传的缴费图片有误，请重新上传。
|
|
|
</view>
|
|
|
<view v-else-if="info.fee_status==3">
|
|
|
您已上传成功，请等待确认。
|
|
|
</view>
|
|
|
|
|
|
<view v-if="info.fee_status!=1">
|
|
|
上传缴费图片：
|
|
|
<u-button type="primary" size="mini" @click="uploadFile()">上传</u-button>
|
|
|
<!-- <u-upload :header='header'
|
|
|
@on-success="uploadSuccess"
|
|
|
:action="action" :file-list="fileList" max-count="1"></u-upload> -->
|
|
|
</view>
|
|
|
<view v-if="hasFeeFiles" style="width:100%;">
|
|
|
<image mode="widthFix" style="width:80%;margin:0 auto;display: block;" :src="info.fee_files[0].url">
|
|
|
</image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal">
|
|
|
<u-popup v-model="showPark" mode="bottom">
|
|
|
<view class="modal-tip">绑定车牌号</view>
|
|
|
<view class="modal-content" style="height:400rpx">
|
|
|
<view style="margin-botttom:20rpx;font-size: 28rpx;">绑定车牌号是为了方便您进出校园，方便您的停车</view>
|
|
|
<view style="margin-botttom:20rpx;font-size: 28rpx;">
|
|
|
每人可最多绑定两个车牌号<u-button style="margin-left:30rpx" size="mini" type="primary" v-if="plateList.length<2" @click="addPlate">新增</u-button>
|
|
|
</view>
|
|
|
|
|
|
<view v-for="(item,index) in plateList" style="margin-botttom:20rpx;font-size: 28rpx;">
|
|
|
车牌{{index+1}}：{{item}}
|
|
|
<u-icon color="red" style="margin-left:20rpx" @click="delPlate(index)"
|
|
|
name="close"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal-btn">
|
|
|
<view @click="updatePlate">绑定</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
<view class="modal">
|
|
|
<u-popup v-model="showParkNumber" mode="bottom">
|
|
|
<view class="modal-tip">车牌号</view>
|
|
|
<view class="modal-content" style="height:450rpx">
|
|
|
<view>
|
|
|
<plate ref="plates" @listenPlateChange="plateChange" :defaultPlate="plateNumber" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal-btn">
|
|
|
<view @click="confirmPlate" type="primary">确定</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
ROOTPATH as baseUrl
|
|
|
} from "@/common/config.js"
|
|
|
import {
|
|
|
plate
|
|
|
} from '@/components/plate/index.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
plate
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
hasFeeFiles: false,
|
|
|
plateNumber: ['苏', 'E', '', '', '', '', ''],
|
|
|
course_id: '',
|
|
|
info: {},
|
|
|
userInfo: {},
|
|
|
courseInfo: {},
|
|
|
header: {},
|
|
|
action: `${baseUrl}/api/mobile/upload-file`,
|
|
|
fileList: {},
|
|
|
showPark: false,
|
|
|
showParkNumber:false,
|
|
|
plateList:[],
|
|
|
plate1: '',
|
|
|
plate2: ''
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.course_id = options.id
|
|
|
let token = uni.getStorageSync('stbc1_lifeData') ? uni.getStorageSync('stbc1_lifeData').vuex_token : ''
|
|
|
this.header.Authorization = `Bearer ${token}`
|
|
|
|
|
|
this.getCourseDetail(options.id)
|
|
|
},
|
|
|
methods: {
|
|
|
async getCourseDetail(id) {
|
|
|
|
|
|
const res = await this.$u.api.courseGetSign({
|
|
|
course_id: id
|
|
|
})
|
|
|
this.info = res.detail
|
|
|
this.userInfo = res.detail.user
|
|
|
this.courseInfo = res.detail.course
|
|
|
if (res.detail.fee_files.length > 0) {
|
|
|
this.hasFeeFiles = true
|
|
|
} else {
|
|
|
this.hasFeeFiles = false
|
|
|
}
|
|
|
},
|
|
|
uploadFile() {
|
|
|
uni.chooseImage({
|
|
|
success: (chooseImageRes) => {
|
|
|
console.log("chooseImageRes", chooseImageRes)
|
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
|
|
if (chooseImageRes.tempFilePaths && chooseImageRes.tempFilePaths.length > 1) {
|
|
|
this.base.toast("缴费图片只能上传1张")
|
|
|
return
|
|
|
}
|
|
|
uni.uploadFile({
|
|
|
url: this.action,
|
|
|
filePath: tempFilePaths[0],
|
|
|
fileType: 'image',
|
|
|
name: 'file',
|
|
|
header: this.header,
|
|
|
success: (uploadFileRes) => {
|
|
|
this.fileList = {}
|
|
|
this.fileList = JSON.parse(uploadFileRes.data)
|
|
|
this.updateSign()
|
|
|
},
|
|
|
fail(err) {
|
|
|
console.log("err", err)
|
|
|
this.base.toast("上传失败")
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
updateSign() {
|
|
|
let files_id = [this.fileList.id]
|
|
|
let that = this
|
|
|
this.$u.api.courseUpdateSign({
|
|
|
id: this.info.id,
|
|
|
fee_file_ids: files_id,
|
|
|
fee_status: 3
|
|
|
}).then(res => {
|
|
|
that.base.toast("上传成功", 1500, function() {
|
|
|
setTimeout(function() {
|
|
|
that.newsSubscription()
|
|
|
}, 1500)
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
plateChange(val) {
|
|
|
this.plate1 = val.join('')
|
|
|
|
|
|
},
|
|
|
addPlate() {
|
|
|
if (this.plateList.length == 2) {
|
|
|
this.base.toast("每人最多只能添加两个车牌")
|
|
|
return
|
|
|
}
|
|
|
// this.plateList.push('')
|
|
|
this.showParkNumber = true
|
|
|
},
|
|
|
delPlate(index) {
|
|
|
this.plateList.splice(index, 1)
|
|
|
},
|
|
|
confirmPlate(val){
|
|
|
if (this.base.isNull(this.plate1) || this.plate1.length < 7) {
|
|
|
this.base.toast("车牌号不正确")
|
|
|
return
|
|
|
}
|
|
|
if (this.plateList.indexOf(this.plate1) !== -1) {
|
|
|
this.base.toast("车牌号不能重复")
|
|
|
return
|
|
|
}
|
|
|
this.plateList.push(this.plate1)
|
|
|
this.showParkNumber = false
|
|
|
this.$refs.plates.panelReset()
|
|
|
},
|
|
|
updatePlate() {
|
|
|
let _plate = ''
|
|
|
_plate = this.plateList.join(",")
|
|
|
console.log("plate", this.plateList,_plate)
|
|
|
if(this.base.isNull(_plate)){
|
|
|
this.base.toast("未填写车牌")
|
|
|
return
|
|
|
}
|
|
|
// return
|
|
|
this.$u.api.saveUser({
|
|
|
...this.userInfo,
|
|
|
plate: _plate
|
|
|
}).then(res => {
|
|
|
this.base.toast("绑定车牌成功")
|
|
|
this.$u.api.user().then(res => {
|
|
|
this.$u.vuex('vuex_user', res.user)
|
|
|
this.showPark = false
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 订阅缴费
|
|
|
newsSubscription() {
|
|
|
let that = this
|
|
|
uni.getSetting({
|
|
|
withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
|
|
|
success(res) {
|
|
|
console.log("resdfg", res)
|
|
|
if (res.subscriptionsSetting.mainSwitch) {
|
|
|
if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[
|
|
|
'CCEUrg9t8aW40NEDoqEk7NY7pyllW_0GEHfjwg_DF6A'] === 'accept') {
|
|
|
// 用户已经订阅该消息模板，执行相应操作
|
|
|
if (!that.hasFeeFiles) {
|
|
|
// 第一次 且 没有车牌号 弹出
|
|
|
if (that.base.isNull(that.userInfo.plate)) {
|
|
|
that.showPark = true
|
|
|
}
|
|
|
}
|
|
|
that.getCourseDetail(that.course_id)
|
|
|
} else {
|
|
|
// 用户没有订阅该消息模板，显示订阅弹窗
|
|
|
uni.showModal({
|
|
|
title: '订阅消息',
|
|
|
content: '是否需要订阅缴费结果消息',
|
|
|
success(res1) {
|
|
|
if (res1.confirm) {
|
|
|
uni.requestSubscribeMessage({
|
|
|
tmplIds: [
|
|
|
'CCEUrg9t8aW40NEDoqEk7NY7pyllW_0GEHfjwg_DF6A',
|
|
|
],
|
|
|
success(res) {
|
|
|
that.base.toast("订阅成功", 1500, function() {
|
|
|
// 有缴费图片，证明不是第一次上传，不弹出车位绑定
|
|
|
if (!that.hasFeeFiles) {
|
|
|
// 第一次 且 没有车牌号 弹出
|
|
|
if (that.base.isNull(that
|
|
|
.userInfo.plate)) {
|
|
|
that.showPark = true
|
|
|
}
|
|
|
}
|
|
|
|
|
|
that.getCourseDetail(that
|
|
|
.course_id)
|
|
|
})
|
|
|
},
|
|
|
fail(err) {
|
|
|
// 有缴费图片，证明不是第一次上传，不弹出车位绑定
|
|
|
if (!that.hasFeeFiles) {
|
|
|
// 第一次 且 没有车牌号 弹出
|
|
|
if (that.base.isNull(that.userInfo
|
|
|
.plate)) {
|
|
|
that.showPark = true
|
|
|
}
|
|
|
}
|
|
|
that.getCourseDetail(that.course_id)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
if (!that.hasFeeFiles) {
|
|
|
// 第一次 且 没有车牌号 弹出
|
|
|
if (that.base.isNull(that.userInfo.plate)) {
|
|
|
that.showPark = true
|
|
|
}
|
|
|
}
|
|
|
that.getCourseDetail(that.course_id)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
} else {
|
|
|
if (!that.hasFeeFiles) {
|
|
|
// 第一次 且 没有车牌号 弹出
|
|
|
if (that.base.isNull(that.userInfo.plate)) {
|
|
|
that.showPark = true
|
|
|
}
|
|
|
}
|
|
|
that.getCourseDetail(that.course_id)
|
|
|
// 用户尚未开启订阅消息总开关，建议提醒用户开启
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.container {
|
|
|
padding: 30rpx;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
overflow: scroll;
|
|
|
|
|
|
.cbg {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.wrap {
|
|
|
position: relative;
|
|
|
|
|
|
&>view {
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
}
|
|
|
.modal {
|
|
|
::v-deep .u-drawer-bottom {
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
&-tip {
|
|
|
text-align: center;
|
|
|
padding: 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
// height: 400rpx;
|
|
|
padding: 0 30rpx;
|
|
|
}
|
|
|
&-btn {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
padding: 60rpx 0;
|
|
|
|
|
|
&>view {
|
|
|
width: 70%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// .modal {
|
|
|
// &-tip {
|
|
|
// text-align: center;
|
|
|
// padding: 30rpx;
|
|
|
// font-size: 28rpx;
|
|
|
// }
|
|
|
|
|
|
// &-content {
|
|
|
// height: 300rpx;
|
|
|
// padding: 0 30rpx;
|
|
|
// }
|
|
|
|
|
|
// &-btn {
|
|
|
// display: flex;
|
|
|
// justify-content: center;
|
|
|
// padding: 30rpx;
|
|
|
|
|
|
// u-button {
|
|
|
// width: 45%;
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
}
|
|
|
</style> |
