Skip to content

C
center-register-show-h5
提交 5194cc70 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

迭代第二版

上级 abe4858d
隐藏空白字符变更
内嵌 并排
正在显示 包含 764 行增加 和 129 行删除
package-lock.json
浏览文件 @ 5194cc70
......@@ -8,6 +8,7 @@
"version": "0.0.0",
"dependencies": {
"axios": "^0.21.3",
"blueimp-md5": "^2.19.0",
"clipboard": "^2.0.8",
"element-ui": "^2.15.6",
"qrcode.vue": "^1.7.0",
......@@ -16,6 +17,7 @@
"vant": "^2.12.44",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
},
"devDependencies": {
......@@ -2111,6 +2113,11 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"node_modules/blueimp-md5": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
},
"node_modules/bowser": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
......@@ -5428,6 +5435,11 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"node_modules/sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
......@@ -6165,6 +6177,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"node_modules/vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"dependencies": {
"sortablejs": "1.10.2"
}
},
"node_modules/vuex": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
......@@ -8006,6 +8026,11 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"blueimp-md5": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
},
"bowser": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
......@@ -10540,6 +10565,11 @@
}
}
},
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
......@@ -11132,6 +11162,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"requires": {
"sortablejs": "1.10.2"
}
},
"vuex": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
......
package.json
浏览文件 @ 5194cc70
......@@ -11,6 +11,7 @@
},
"dependencies": {
"axios": "^0.21.3",
"blueimp-md5": "^2.19.0",
"clipboard": "^2.0.8",
"element-ui": "^2.15.6",
"qrcode.vue": "^1.7.0",
......@@ -19,6 +20,7 @@
"vant": "^2.12.44",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
},
"devDependencies": {
......
src/components/upload/Upload.vue 0 → 100644
浏览文件 @ 5194cc70
<template>
<div class="app-upload">
<!-- <draggable
v-model="fileList"
group="people"
class="file-list el-upload-list--picture-card"
@end="onEnd"
>
<div class="file-item" v-for="(file, index) in fileList" :key="index">
<img :src="file" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!$attrs.disabled" class="el-upload-list__item-delete" @click="handleRemove(index)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</draggable> -->
<!-- <van-uploader v-model="fileList" multiple /> -->
<el-upload
action="https://webapp-pub.oss-cn-beijing.aliyuncs.com"
type="drag"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-exceed="handleExceed"
list-type="picture-card"
:data="data"
v-bind="$attrs"
v-on="$listeners"
style="display: inline"
>
<slot>
<i class="el-icon-plus"></i>
</slot>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="previewFile.url" />
</el-dialog>
</div>
</template>
<script>
import { getSignature } from '@/api/base'
import md5 from 'blueimp-md5'
// import draggable from 'vuedraggable'
export default {
name: 'AppUpload',
// components: { draggable },
props: {
value: { type: [String, Array] },
prefix: { type: String, default: 'upload/shop-admin/' },
showFileList: { type: Boolean, default: true }
},
data() {
return {
data: {}, // 请求参数
fileList: [], // 文件列表
dialogVisible: false,
previewFile: {},
message: null
}
},
watch: {
value: {
immediate: true,
handler(value) {
if (!value) {
return
}
let fileList = []
if (this.isMultiple) {
fileList = value.map(item => {
return { name: item.name || item, url: item.url || item }
})
} else {
fileList.push({ name: '附件', url: value })
}
this.fileList = [...fileList]
}
}
},
computed: {
isMultiple() {
return Array.isArray(this.value)
}
},
methods: {
beforeUpload(file) {
const limit = this.$attrs.limit
if (limit && this.fileList.length >= limit) {
this.message && this.message.close()
this.message = this.$message({ type: 'error', message: '文件超出个数限制' })
return false
}
const fileName = file.name
const key = this.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
return new Promise((resolve, reject) => {
getSignature()
.then(response => {
const { accessid, policy, signature, host } = response
this.data = { key, OSSAccessKeyId: accessid, policy, signature, success_action_status: '200' }
file.url = `${host}/${key}`
resolve(true)
})
.catch(err => {
console.log(err)
reject(err)
})
})
},
handleSuccess(response, file) {
let value = null
if (this.isMultiple) {
const limit = this.$attrs.limit
if (limit && this.fileList.length >= limit) {
return
}
this.fileList.push({ name: file.name, url: file.raw.url })
value = this.fileList
} else {
this.fileList = [file.raw.url]
value = file.raw.url
}
this.$emit('input', this.fileList)
this.dispatch('ElFormItem', 'el.form.change', value)
},
// 删除
handleRemove(index) {
this.fileList.splice(index, 1)
this.$emit('input', this.fileList)
this.dispatch('ElFormItem', 'el.form.change', this.fileList)
},
// 预览
handlePreview(file) {
this.previewFile = file
this.dialogVisible = true
},
handleExceed() {
this.$message({ type: 'error', message: '文件超出个数限制' })
},
onEnd() {
this.$emit('input', this.fileList)
},
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root
let name = parent.$options.componentName
while (parent && (!name || name !== componentName)) {
parent = parent.$parent
if (parent) {
name = parent.$options.componentName
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params))
}
}
}
}
</script>
<style lang="scss">
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
object-fit: cover;
}
.el-upload-list__item {
transition: none !important;
}
.file-list {
margin: 0;
display: inline;
vertical-align: top;
}
.file-item {
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #c0ccda;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
margin: 0 8px 8px 0;
display: inline-block;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.el-upload{
width: 100% !important;
border:none !important;
height: 155px !important;
border-radius: .2rem !important;
}
.el-upload-list__item{
width: 100% !important;
}
</style>
src/components/upload/UploadImage.vue 0 → 100644
浏览文件 @ 5194cc70
<template>
<div>
<app-upload @input="input" class="avatar-uploader" accept="image/*" :show-file-list="false" ></app-upload>
</div>
</template>
<script>
import AppUpload from './Upload.vue'
export default {
name: 'AppUploadImage',
components: { AppUpload },
data() {
return {}
},
computed: {
imageUrl() {
return this.$attrs.value
}
},
methods: {
input(imgs) {
this.$emit('input', imgs)
}
}
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 148px;
height: 148px;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
line-height: 148px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
</style>
src/components/upload/UploadVideo.vue 0 → 100644
浏览文件 @ 5194cc70
<template>
<app-upload class="video-uploader" accept="video/*" :show-file-list="false" v-bind="$attrs" v-on="$listeners">
<img v-if="videoUrl" :src="`${videoUrl}?x-oss-process=video/snapshot,t_10,f_jpg,w_0,h_0,m_fast`" class="avatar" />
<i v-else class="el-icon-plus video-uploader-icon"></i>
</app-upload>
</template>
<script>
import AppUpload from './Upload.vue'
export default {
name: 'AppUploadVideo',
components: { AppUpload },
data() {
return {}
},
computed: {
videoUrl() {
return this.$attrs.value
}
}
}
</script>
<style lang="scss">
.video-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 148px;
height: 148px;
}
.video-uploader .el-upload:hover {
border-color: #409eff;
}
.video-uploader-icon {
font-size: 28px;
color: #8c939d;
line-height: 148px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
</style>
src/modules/home/api.js
浏览文件 @ 5194cc70
......@@ -28,3 +28,7 @@ export function getPayStatus(params) {
export function getOrderList(params) {
return httpRequest.get('/api/register/v1/activity/order', { params })
}
// 提交下线支付
export function uploadPay(data) {
return httpRequest.post('/api/register/v1/activity/upload-pay', data)
}
src/modules/home/components/OfflinePay.vue 0 → 100644
浏览文件 @ 5194cc70
<template>
<div class="offline-box">
<div class="call" v-if="data.offline_info">活动方联系方式：{{ data.offline_info }}</div>
<div class="remarks">
<div class="title">备注信息：</div>
<div class="textarea-content">
<textarea placeholder="请输入备注" v-model="form.comment"></textarea>
</div>
</div>
<div class="upload">
<div class="title">上传支付凭证：</div>
<!-- <van-uploader :after-read="afterRead" /> -->
<upload-image @input="input"></upload-image>
</div>
<div class="confim-btn" @click="uploadPay">确认</div>
</div>
</template>
<script>
import { uploadPay } from '../api.js'
import UploadImage from '@/components/upload/UploadImage.vue'
export default {
components: {
UploadImage
},
props: {
data: {
type: Object
},
stepList: {
type: Array
}
},
data() {
return {
form: {
voucher: [],
comment: ''
}
}
},
mounted() {
console.log(this.data, this.stepList, 'da ta')
},
methods: {
input(imgs) {
this.form.voucher = imgs
},
uploadPay() {
const params = {
voucher: this.form.voucher.join(','),
comment: this.form.comment
}
uploadPay(Object.assign(this.data.params, params)).then(res => {
if (this.stepList.length !== this.data.num) {
this.$router.go(0)
} else {
this.$router.push('/')
}
console.log(res)
})
}
}
}
</script>
<style lang="scss" scoped>
.offline-box{
padding: .3rem;
.call{
font-size: .3rem;
line-height: 100%;
font-weight: bold;
color: #333333;
margin-bottom: .4rem;
}
.remarks{
margin-bottom:.4rem;
.title{
font-size: .3rem;
font-weight: bold;
line-height: 100%;
color: #333333;
margin-bottom: .24rem;
}
.textarea-content{
background: rgba(255, 255, 255, 1);
border-radius: .2rem;
padding: .2rem;
height: 3.05rem;
box-sizing: border-box;
textarea{
width: 100%;
height: 100%;
border:none;
background: none;
font-size: .26rem;
resize: none;
}
}
}
.upload{
.title{
font-size: .3rem;
font-weight: bold;
line-height: 100%;
color: #333333;
margin-bottom: .24rem;
}
}
}
.confim-btn{
width: 6.42rem;
height: .88rem;
background: rgba(184, 1, 64, 1);
border-radius: .44rem;
text-align: center;
line-height: .88rem;
color: #fff;
font-size: .3rem;
margin: 2rem auto;
}
</style>
src/modules/home/components/SignForm.vue
浏览文件 @ 5194cc70
......@@ -5,100 +5,105 @@
<div class="main_content_banner" v-html="data.desc"></div>
<div class="main_content_form">
<van-form class="main_content_form_con">
<div v-for="(listIt, formIndex) in data.user_fields" :key="formIndex" class="main_content_form_list">
<img
src="https://webapp-pub.ezijing.com/highway/h5/form_minus.png"
class="btn_minus"
@click="handleMinus(formIndex)"
v-if="!isRemoveInfo(listIt)"
/>
<div class="formItemList_item" v-for="(item, index) in listIt" :key="index">
<!-- 输入框 -->
<div v-if="item.type === 'input'">
<van-field
:type="item.inputType"
ref="input"
v-model="item.value"
:name="item.key"
:label="item.name"
:placeholder="item.placeholder"
:rules="[
{ required: item.required, message: item.placeholder, trigger: item.trigger },
{ pattern: item.pattern, message: item.msg, trigger: item.trigger }
]"
clearable
:border="true"
:disabled="!item.enable_edit"
/>
<div class="line"></div>
</div>
<!-- 单选框 -->
<div v-if="item.type === 'radio'">
<van-field :name="item.key" :label="item.name" border>
<template #input>
<van-radio-group v-model="item.value" direction="horizontal">
<div v-for="(it, index) in item.optionList" :key="index">
<van-radio :name="it.id">{{ it.option }}</van-radio>
</div>
</van-radio-group>
</template>
</van-field>
<div class="line"></div>
</div>
<div v-for="(listIt, formIndex) in data.user_fields" :key="formIndex">
<div class="main_content_form_list">
<img
src="https://webapp-pub.ezijing.com/highway/h5/form_minus.png"
class="btn_minus"
@click="handleMinus(formIndex)"
v-if="!isRemoveInfo(listIt)"
/>
<div class="formItemList_item" v-for="(item, index) in listIt" :key="index">
<!-- 输入框 -->
<div v-if="item.type === 'input'">
<van-field
:type="item.inputType"
ref="input"
v-model="item.value"
:name="item.key"
:label="item.name"
:placeholder="item.placeholder"
:rules="[
{ required: item.required, message: item.placeholder, trigger: item.trigger },
{ pattern: item.pattern, message: item.msg, trigger: item.trigger }
]"
clearable
:border="true"
:disabled="!item.enable_edit"
/>
<div class="line"></div>
</div>
<!-- 单选框 -->
<div v-if="item.type === 'radio'">
<van-field :name="item.key" :label="item.name" border>
<template #input>
<van-radio-group v-model="item.value" direction="horizontal">
<div v-for="(it, index) in item.optionList" :key="index">
<van-radio :name="it.id">{{ it.option }}</van-radio>
</div>
</van-radio-group>
</template>
</van-field>
<div class="line"></div>
</div>
<!-- 选择器 -->
<div v-if="item.type === 'select'">
<van-field
border
clickable
:name="item.key"
v-model="item.value"
:label="item.name"
:placeholder="item.placeholder"
@click="showSelectPicker(formIndex, index)"
class="showSelectPicker"
/>
<!-- 选择弹框 -->
<van-popup v-model="item.showPicker" position="bottom">
<van-picker
show-toolbar
:columns="item.optionList"
@confirm="onConfirm"
@cancel="item.showPicker = false"
<!-- 选择器 -->
<div v-if="item.type === 'select'">
<van-field
border
clickable
:name="item.key"
v-model="item.value"
:label="item.name"
:placeholder="item.placeholder"
@click="showSelectPicker(formIndex, index)"
class="showSelectPicker"
/>
</van-popup>
<div class="line"></div>
</div>
<!-- 选择弹框 -->
<van-popup v-model="item.showPicker" position="bottom">
<van-picker
show-toolbar
:columns="item.optionList"
@confirm="onConfirm"
@cancel="item.showPicker = false"
/>
</van-popup>
<div class="line"></div>
</div>
<!-- 时间 -->
<div v-if="item.type === 'datetime'">
<van-field
border
clickable
:name="item.key"
v-model="item.value"
:label="item.name"
:placeholder="item.placeholder"
@click="showTime(formIndex, index)"
class="showTime"
/>
<!-- 时间弹框 -->
<van-popup v-model="item.showPicker" position="bottom">
<van-datetime-picker
:min-date="minDate"
type="datetime"
@confirm="onConfirmTime"
@cancel="item.showPicker = false"
<!-- 时间 -->
<div v-if="item.type === 'datetime'">
<van-field
border
clickable
:name="item.key"
v-model="item.value"
:label="item.name"
:placeholder="item.placeholder"
@click="showTime(formIndex, index)"
class="showTime"
/>
</van-popup>
<div class="line"></div>
<!-- 时间弹框 -->
<van-popup v-model="item.showPicker" position="bottom">
<van-datetime-picker
:min-date="minDate"
type="datetime"
@confirm="onConfirmTime"
@cancel="item.showPicker = false"
/>
</van-popup>
<div class="line"></div>
</div>
</div>
</div>
<div style="display:flex;" v-if="formIndex === 0">
<div class="btn_operate" style="margin-left:auto;">
<div class="batch-import">批量导入人员</div>
<img src="https://webapp-pub.ezijing.com/highway/h5/form_add.png" class="btn_add" @click="handleAdd" />
</div>
</div>
</div>
</van-form>
<div class="btn_operate">
<img src="https://webapp-pub.ezijing.com/highway/h5/form_add.png" class="btn_add" @click="handleAdd" />
</div>
</div>
</div>
<div class="main_footer">
......@@ -226,7 +231,7 @@ export default {
copyItem.enable_edit = true
return copyItem
})
this.data.user_fields.push(baseUserFields)
this.data.user_fields.splice(1, 0, baseUserFields)
},
// 点击确定选择时间
onConfirmTime(time) {
......@@ -304,7 +309,10 @@ export default {
}
}
.btn_operate {
float: right;
padding-top: .3rem;
// float: right;
display: flex;
align-items: center;
img {
width: 0.5072rem;
height: 0.5072rem;
......@@ -314,6 +322,16 @@ export default {
margin-left: 0.3rem;
margin-right: 0.31rem;
}
.batch-import{
padding: 0 .33rem;
height: .81rem;
background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);
border-radius: .44rem;
color: #333;
line-height: .81rem;
font-size: .28rem;
}
}
}
......
src/modules/home/views/MyOrder.vue
浏览文件 @ 5194cc70
......@@ -35,7 +35,7 @@
v-if="item.status === 0 || item.status === 1"
@click="handlePay(item)"
class="pay_btn"
>去支付</van-button
>查看</van-button
>
</div>
</div>
......@@ -57,14 +57,14 @@ export default {
title: '我的订单',
active: 0,
payStatus: {
0: '未支付',
0: '未完成',
1: '部分缴费',
2: '已完成'
},
orderTab: [
{ title: '全部', type: 'all' },
{ title: '未支付', type: 'hasNopay' },
{ title: '部分缴费', type: 'partPay' },
{ title: '未完成', type: 'hasNopay' },
// { title: '部分缴费', type: 'partPay' },
{ title: '已完成', type: 'isFinished' }
],
orderList: []
......@@ -117,6 +117,7 @@ export default {
delete item.activity.details
stepDetails.activityInfo = item.activity
stepDetails.join_rand = item.join_rand
stepDetails.pay_price = item.amount
window.localStorage.orderStepDetails = JSON.stringify([stepDetails])
this.$router.push({
path: '/SignMainPage'
......
src/modules/home/views/OrderConfirm.vue
浏览文件 @ 5194cc70
......@@ -5,13 +5,25 @@
<commonheader @back="handlePrev" :callBack="true" :title="title" />
<div class="main_content">
<div class="main_content_list">
<van-checkbox-group v-model="selctOrderData" ref="checkboxGroup" @change="checkItem">
<div class="main_content_list_card" v-for="(item, index) in stepOrderInfo" :key="index">
<van-checkbox-group v-model="selctOrderData" ref="checkboxGroup">
<div class="main_content_list_card" v-for="(item, index) in data.payData.list" :key="index">
<div class="card_header">
<van-checkbox :name="item" :disabled="item.pay_record.pay_status === '1'"></van-checkbox>
<van-checkbox
@click="checkItem"
:name="item"
v-if="['0', '3'].includes(item.pay_record.pay_status)"
></van-checkbox>
<div v-else class="van-checkbox van-checkbox--disabled">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
<i class="van-icon van-icon-success"><!----></i>
</div>
</div>
<div class="card_con">
<p>{{ item.name }} {{ item.mobile }}</p>
</div>
<div :class="item.pay_record.pay_status === '1' ? 'pay-stu yzf' : 'pay-stu'">
{{ getPayStatusValue(item.pay_record.pay_status) }}
</div>
</div>
<div class="card_fotter">
......@@ -27,8 +39,35 @@
</div>
</div>
</van-checkbox-group>
<div class="pay-mode">
<div class="title">选择支付方式</div>
<div class="pay-list">
<van-radio-group v-model="payMode">
<div v-for="(item, index) in data.pay_type" :key="index">
<div class="item" v-if="item == 1">
<img src="https://webapp-pub.ezijing.com/highway/h5/pay-wx.png" class="icon1" />
<div class="text">微信支付</div>
<van-radio name="1" class="checkbox"></van-radio>
</div>
<div class="item" v-if="item == 2">
<img src="https://webapp-pub.ezijing.com/highway/h5/pay-zfb.png" class="icon2" />
<div class="text">支付宝支付</div>
<van-radio name="2" class="checkbox"></van-radio>
</div>
<div class="item" v-if="item == 3">
<img src="https://webapp-pub.ezijing.com/highway/h5/pay-xx.png" class="icon3" />
<div class="text">线下支付</div>
<van-radio name="3" class="checkbox"></van-radio>
</div>
</div>
</van-radio-group>
</div>
</div>
</div>
</div>
<!-- <div class="pay-mode">
<div class="title">选择支付方式</div>
</div> -->
<div class="main_footer">
<van-checkbox v-model="isAll" @click="checkAll" class="checkAll">全选</van-checkbox>
<div class="main_footer_total">
......@@ -48,7 +87,10 @@
<van-button round :disabled="!selctOrderData.length" @click="onSubmit" class="pay_btn">去支付</van-button>
</div>
</div>
<pay-detail @next="$emit('next')" :stepList="stepList" v-else :data="payDetail"></pay-detail>
<div v-else>
<pay-detail v-if="payMode != 3" @next="$emit('next')" :stepList="stepList" :data="payDetail"></pay-detail>
<offline-pay v-else :stepList="stepList" :data="data"></offline-pay>
</div>
</div>
</template>
......@@ -56,8 +98,9 @@
import { getPayInfo } from '../api'
import PayDetail from './PayDetail.vue'
import Commonheader from '../components/Commonheader.vue'
import OfflinePay from '../components/OfflinePay.vue'
export default {
components: { Commonheader, PayDetail },
components: { Commonheader, PayDetail, OfflinePay },
props: {
stepList: {
type: Array
......@@ -68,13 +111,15 @@ export default {
},
data() {
return {
payMode: '3',
isQrPageShow: false,
title: '订单确认',
isAll: false,
numVsible: true,
payDetail: {},
selctOrderData: [], // 选中的数据
stepOrderInfo: []
stepOrderInfo: [],
payType: []
}
},
......@@ -99,10 +144,19 @@ export default {
}
},
mounted() {
this.stepOrderInfo = this.data.payData.list.filter(item => item.pay_record.pay_status !== '1')
console.log(this.stepOrderInfo)
console.log(this.data.pay_type[0], '000')
this.payMode = this.data.pay_type[0]
},
methods: {
getPayStatusValue(n) {
const value = {
0: '未支付',
1: '已支付',
2: '待审核',
3: '驳回'
}
return value[parseInt(n)]
},
// 共优惠价格样式
getTotalTotalCompanyPrice() {
const splitPrice = this.totalCompanyPrice.split('.')
......@@ -117,7 +171,7 @@ export default {
},
// 实付价样式
getPayPrice() {
const splitPrice = this.payPrice.split('.')
const splitPrice = this.payPrice.toString().split('.')
// //2.重新赋值
return `<span style="font-size:0.34rem;">${splitPrice[0]}</span>.<span style="font-size:0.2rem;">${splitPrice[1]}</span>`
},
......@@ -129,7 +183,9 @@ export default {
return `<span style="font-size:0.34rem;">${splitPrice[0]}</span>.<span style="font-size:0.2rem;">${splitPrice[1]}</span>`
},
checkItem() {
if (this.selctOrderData.length === this.stepOrderInfo.length) {
const x = this.data.payData.list.filter(item => ['0', '3'].includes(item.pay_record.pay_status))
console.log(x, 'x')
if (this.selctOrderData.length === x.length) {
this.isAll = true
} else {
this.isAll = false
......@@ -141,37 +197,64 @@ export default {
},
// 全选
checkAll() {
this.$refs.checkboxGroup.toggleAll(this.isAll)
if (!this.isAll) {
this.selctOrderData = []
} else {
this.data.payData.list.forEach(item => {
if (['0', '3'].includes(item.pay_record.pay_status)) {
const findD = this.selctOrderData.find(d => d.id === item.id)
if (!findD) {
this.selctOrderData.push(item)
}
}
})
}
// this.isAll = !this.isAll
// console.log(this.data.payData.list.find(n => ['1', '2'].includes(n.pay_record.pay_status)))
// const ids = []
// this.data.payData.list.find()
// this.$refs.checkboxGroup.toggleAll(this.isAll)
},
// 提交 去支付
onSubmit() {
this.getPayDetail()
},
getPayDetail() {
const params = {
pay_record_ids: this.selctOrderData.map(item => item.pay_record.id).toString(),
join_rand: this.data.payData.join_rand
}
// 获取支付二维码 订单id
getPayInfo(params).then(res => {
console.log(this.data, 'this.data')
if (res.code === 0) {
this.payDetail = Object.assign({ qrData: res.data }, this.data)
this.payDetail.order_id = res.data.order_id
this.isQrPageShow = true
// 选择微信和支付宝支付走这
if (this.payMode !== '3') {
const params = {
pay_record_ids: this.selctOrderData.map(item => item.pay_record.id).toString(),
join_rand: this.data.payData.join_rand,
pay_type: this.payMode === '1' ? '1' : '11'
}
if (res.code === 100) {
if (this.stepList.length === this.data.num) {
this.$router.push('/')
} else {
this.$emit('next')
// 获取支付二维码 订单id
getPayInfo(params).then(res => {
console.log(this.data, 'this.data')
if (res.code === 0) {
this.payDetail = Object.assign({ qrData: res.data }, this.data)
this.payDetail.order_id = res.data.order_id
this.isQrPageShow = true
}
if (res.code === 100) {
if (this.stepList.length === this.data.num) {
this.$router.push('/')
} else {
this.$emit('next')
}
}
// 订单为0元时，判断该步骤后面是否有步骤，若有就去下一步骤，否则返回首页
if (res.code === 999) {
this.stepList.length === this.data.num ? this.$router.push('/') : this.$emit('next')
}
})
} else {
// 线下支付
this.data.params = {
pay_record_ids: this.selctOrderData.map(item => item.pay_record.id).toString(),
join_rand: this.data.payData.join_rand
}
// 订单为0元时，判断该步骤后面是否有步骤，若有就去下一步骤，否则返回首页
if (res.code === 999) {
this.stepList.length === this.data.num ? this.$router.push('/') : this.$emit('next')
}
})
this.isQrPageShow = true
}
}
}
}
......@@ -189,11 +272,11 @@ export default {
height: 2.16rem;
background: #fff;
opacity: 1;
border-radius: 18px;
border-radius: 0.18rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0.3rem;
padding: 0 0.3rem;
margin-bottom: 0.3rem;
.card_header {
display: flex;
......@@ -208,6 +291,14 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.pay-stu {
font-size: 0.24rem;
color: #b80140;
margin-left: auto;
&.yzf {
color: #999999;
}
}
}
.card_con {
font-weight: 400;
......@@ -324,4 +415,48 @@ export default {
font-weight: 400;
color: #999999;
}
.pay-mode {
.title {
font-size: 0.28rem;
line-height: 100%;
color: #666666;
padding-bottom: 0.3rem;
}
.pay-list {
width: 6.9rem;
background: rgba(255, 255, 255);
border-radius: 0.18rem;
padding-bottom: 0.38rem;
.item {
display: flex;
align-items: center;
padding-top: 0.38rem;
// mar-borrom
.icon1 {
width: 0.48rem;
margin-left: 0.3rem;
display: block;
}
.icon2 {
width: 0.48rem;
margin-left: 0.3rem;
display: block;
}
.icon3 {
width: 0.46rem;
margin-left: 0.3rem;
display: block;
}
.text {
margin-left: 0.29rem;
font-size: 0.28rem;
color: #333333;
}
.checkbox {
margin-left: auto;
margin-right: 29px;
}
}
}
}
</style>
src/modules/home/views/PayDetail.vue
浏览文件 @ 5194cc70
......@@ -15,7 +15,6 @@
>
<van-button round class="main_btn_order" @click="$router.push('/MyOrder')">我的订单</van-button>
</div>
<div id="value">{{ payDetail.url }}</div>
</div>
</div>
......
src/modules/home/views/SignMainPage.vue
浏览文件 @ 5194cc70
......@@ -57,6 +57,7 @@ export default {
setpItem() {
// return this.stepList[2]
return this.stepList[this.stepIndex]
// return this.stepList[this.$route.query.id ? this.stepIndex : this.stepIndex + 1]
}
},
mounted() {
......@@ -193,7 +194,9 @@ export default {
user_fields: b.user_fields,
activity_detail_id: b.id,
id: b.activity_id,
num: b.num
num: b.num,
offline_info: b.offline_info,
pay_type: b.pay_type.split(',')
}
// 开启支付成功跳转的功能
if (b.can_jump) {
......@@ -206,9 +209,20 @@ export default {
}, [])
this.stepList.map((item, index) => {
item.num = index + 1
console.log(data, 'dddd')
if (!this.$route.query.id) {
if (item.type === 3) {
item.payData = {
list: this.stepList[index - 1].list,
join_rand: data[0].join_rand,
pay_price: data[0].pay_price
}
}
}
return item
})
// console.log(this.stepList, 'steplist')
!this.$route.query.id && this.stepIndex++
console.log(this.stepList, 'steplist')
},
handlePrev() {
if (this.stepIndex <= 0) {
......@@ -221,6 +235,7 @@ export default {
if (this.setpItem.num !== this.stepList[this.stepList.length - 1].num) {
this.stepIndex++
if (data) {
console.log(data, 'data')
this.setpItem.payData = data
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论