提交 8a65949a authored 作者: matian's avatar matian

feat:代码更新

上级 b26878db
......@@ -8,8 +8,11 @@
"version": "0.0.0",
"dependencies": {
"axios": "^0.21.3",
"clipboard": "^2.0.8",
"element-ui": "^2.15.6",
"qrcode.vue": "^1.7.0",
"query-string": "^7.0.1",
"vant": "^2.12.44",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuex": "^3.6.2"
......@@ -594,6 +597,22 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.17.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
"integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/runtime/node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"node_modules/@babel/template": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
......@@ -783,6 +802,15 @@
"integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
"dev": true
},
"node_modules/@popperjs/core": {
"version": "2.11.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/plugin-eslint": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-eslint/-/plugin-eslint-8.0.1.tgz",
......@@ -827,11 +855,23 @@
"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
"dev": true
},
"node_modules/@vant/icons": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.7.3.tgz",
"integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
},
"node_modules/@vant/popperjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
"integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
"dependencies": {
"@popperjs/core": "^2.9.2"
}
},
"node_modules/@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
"integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==",
"dev": true
"integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
},
"node_modules/@vue/babel-plugin-transform-vue-jsx": {
"version": "1.2.1",
......@@ -2214,6 +2254,16 @@
"fsevents": "~2.3.2"
}
},
"node_modules/clipboard": {
"version": "2.0.10",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.10.tgz",
"integrity": "sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==",
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
......@@ -2453,6 +2503,11 @@
"node": ">= 6"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"node_modules/depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
......@@ -3510,6 +3565,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"dependencies": {
"delegate": "^3.1.2"
}
},
"node_modules/graceful-fs": {
"version": "4.2.8",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
......@@ -4925,6 +4988,14 @@
"node": ">=6"
}
},
"node_modules/qrcode.vue": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-1.7.0.tgz",
"integrity": "sha512-R7t6Y3fDDtcU7L4rtqwGUDP9xD64gJhIwpfjhRCTKmBoYF6SS49PIJHRJ048cse6OI7iwTwgyy2C46N9Ygoc6g==",
"peerDependencies": {
"vue": "^2.0.0"
}
},
"node_modules/qs": {
"version": "6.10.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
......@@ -5216,6 +5287,11 @@
"get-ready": "~1.0.0"
}
},
"node_modules/select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"node_modules/semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
......@@ -5648,6 +5724,11 @@
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"node_modules/to-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
......@@ -5844,6 +5925,21 @@
"spdx-expression-parse": "^3.0.0"
}
},
"node_modules/vant": {
"version": "2.12.44",
"resolved": "https://registry.npmjs.org/vant/-/vant-2.12.44.tgz",
"integrity": "sha512-0ZRq0v+26Ny6Ezt3M1GEN5KLEh6vVp6rBmQENi6jd0HejgpwfCRUWTFCH9sQqB3LhfxJ7ywHmrLAn5oj1eHozA==",
"dependencies": {
"@babel/runtime": "7.x",
"@vant/icons": "^1.7.1",
"@vant/popperjs": "^1.1.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3"
},
"peerDependencies": {
"vue": ">= 2.6.0"
}
},
"node_modules/vite": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.5.3.tgz",
......@@ -6050,6 +6146,11 @@
"semver": "bin/semver.js"
}
},
"node_modules/vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"node_modules/vue-router": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
......@@ -6606,6 +6707,21 @@
"@babel/plugin-syntax-typescript": "^7.14.5"
}
},
"@babel/runtime": {
"version": "7.17.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
"integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
"requires": {
"regenerator-runtime": "^0.13.4"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
}
}
},
"@babel/template": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
......@@ -6755,6 +6871,11 @@
"integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
"dev": true
},
"@popperjs/core": {
"version": "2.11.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
},
"@rollup/plugin-eslint": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-eslint/-/plugin-eslint-8.0.1.tgz",
......@@ -6787,11 +6908,23 @@
"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
"dev": true
},
"@vant/icons": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.7.3.tgz",
"integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
},
"@vant/popperjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
"integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
"requires": {
"@popperjs/core": "^2.9.2"
}
},
"@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
"integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==",
"dev": true
"integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
},
"@vue/babel-plugin-transform-vue-jsx": {
"version": "1.2.1",
......@@ -7984,6 +8117,16 @@
"readdirp": "~3.6.0"
}
},
"clipboard": {
"version": "2.0.10",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.10.tgz",
"integrity": "sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
......@@ -8164,6 +8307,11 @@
"esprima": "^4.0.0"
}
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
......@@ -8973,6 +9121,14 @@
"type-fest": "^0.20.2"
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.8",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
......@@ -10060,6 +10216,12 @@
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"qrcode.vue": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-1.7.0.tgz",
"integrity": "sha512-R7t6Y3fDDtcU7L4rtqwGUDP9xD64gJhIwpfjhRCTKmBoYF6SS49PIJHRJ048cse6OI7iwTwgyy2C46N9Ygoc6g==",
"requires": {}
},
"qs": {
"version": "6.10.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
......@@ -10286,6 +10448,11 @@
"get-ready": "~1.0.0"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
......@@ -10624,6 +10791,11 @@
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"to-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
......@@ -10784,6 +10956,18 @@
"spdx-expression-parse": "^3.0.0"
}
},
"vant": {
"version": "2.12.44",
"resolved": "https://registry.npmjs.org/vant/-/vant-2.12.44.tgz",
"integrity": "sha512-0ZRq0v+26Ny6Ezt3M1GEN5KLEh6vVp6rBmQENi6jd0HejgpwfCRUWTFCH9sQqB3LhfxJ7ywHmrLAn5oj1eHozA==",
"requires": {
"@babel/runtime": "7.x",
"@vant/icons": "^1.7.1",
"@vant/popperjs": "^1.1.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3"
}
},
"vite": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.5.3.tgz",
......@@ -10937,6 +11121,11 @@
}
}
},
"vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"vue-router": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
......
......@@ -11,8 +11,11 @@
},
"dependencies": {
"axios": "^0.21.3",
"clipboard": "^2.0.8",
"element-ui": "^2.15.6",
"qrcode.vue": "^1.7.0",
"query-string": "^7.0.1",
"vant": "^2.12.44",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuex": "^3.6.2"
......
;(function (win, doc) {
const resize = 'orientationchange' in window ? 'orientationchange' : 'resize'
/* 使用rem 动态计算跟font-size值 */
function resizeRoot() {
const wWidth =
win.screen.width > 0
? win.innerWidth >= win.screen.width || win.innerWidth === 0
? win.screen.width
: win.innerWidth
: win.innerWidth
const wFsize = ((wWidth > 750 ? 750 : wWidth) / 750) * 100
doc.documentElement.style.fontSize = wFsize + 'px'
}
win.addEventListener(resize, resizeRoot, false)
doc.addEventListener('DOMContentLoaded', resizeRoot, false)
})(window, document)
......@@ -3,14 +3,21 @@ import App from './App.vue'
import router from './router'
import store from '@/store'
import modules from './modules'
import beforeEnter from '@/utils/beforeEnter'
// 公共css
import '@/assets/css/base.css'
import beforeEnter from '@/utils/beforeEnter'
import './assets/rem/rem.js'
// Element-UI
import ElementUI from 'element-ui'
import '@/assets/theme/index.css'
// vant
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(ElementUI)
Vue.use(Vant)
// 注册模块
modules({ router, store })
......
<template>
<div>
<van-nav-bar title="标题" left-text="返回" left-arrow fixed @click-left="onClickLeft">
<template #right>
<van-icon name="contact" size="28" @click="onClickRight" />
</template>
</van-nav-bar>
</div>
</template>
<script>
export default {
methods: {
// 首页返回按钮
onClickLeft() {
history.go(-1)
},
// 右侧按钮 个人中心
onClickRight() {
this.$router.push('/PersonalCenter')
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .van-icon-arrow-left {
color: #000;
}
::v-deep .van-nav-bar__text {
color: #000;
}
::v-deep .van-icon-contact {
color: #000;
}
</style>
<template>
<div class="main">
<!-- 展示页面 -->
<div class="show_content">
<!-- <div class="show_content_img"> -->
<img
class="show_content_img"
src="https://img1.baidu.com/it/u=2404515989,4194507540&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
alt=""
/>
<!-- </div> -->
<div class="show_content_btn">报名填写</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.main {
.show_content {
padding: 0.21rem 0.3rem 3.13rem 0.3rem;
.show_content_img {
margin-top: 0.84rem;
width: 6.9rem;
height: 6.81rem;
// background: rgba(255, 255, 255, 0.39);
border: 1px solid #707070;
}
.show_content_btn {
width: 6.42rem;
height: 0.88rem;
margin: 1.24rem auto;
background: #b80140;
border-radius: 0.44rem;
font-weight: 500;
color: #ffffff;
font-size: 0.3rem;
text-align: center;
line-height: 0.88rem;
}
}
}
</style>
<template>
<div class="main">
<div class="main_content">
<div class="main_content_banner"></div>
<div class="main_content_form">
<van-form @submit="onSubmit">
<div v-for="(listIt, index) in formList" :key="index" class="main_content_form_list">
<div class="formItemList_item" v-for="(item, index) in listIt" :key="index">
<!-- 输入框 -->
<van-field
ref="input"
v-model="item.value"
:name="item.name"
:label="item.label"
:placeholder="item.placeholder"
:rules="[{ required: item.isRequired, message: item.placeholder }]"
v-if="item.type === 'input'"
clearable
/>
<!-- 单选框 -->
<van-field :name="item.name" :label="item.label" v-if="item.type === 'radio'">
<template #input>
<van-radio-group v-model="item.value" direction="horizontal">
<div v-for="(it, index) in item.radioList" :key="index">
<van-radio :name="it.id">{{ it.option }}</van-radio>
</div>
</van-radio-group>
</template>
</van-field>
<!-- 选择器 -->
<van-field
clickable
:name="item.name"
:value="value"
:label="item.label"
:placeholder="item.placeholder"
@click="showPicker = true"
v-if="item.type === 'select'"
/>
<van-popup v-model="showPicker" position="bottom" v-if="item.type === 'select'">
<!-- <van-calendar v-model="showPicker" @confirm="onConfirm" /> -->
<van-picker show-toolbar :columns="item.radioList" @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</div>
<div class="btn_operate">
<img
src="https://webapp-pub.ezijing.com/highway/h5/form_minus.png"
alt=""
class="btn_minus"
@click="handleMinus"
v-if="formList.length > 1"
/>
<img
src="https://webapp-pub.ezijing.com/highway/h5/form_add.png"
alt=""
class="btn_add"
@click="handleAdd"
v-if="index === formList.length - 1"
/>
</div>
</div>
<div class="main_content_btns">
<van-button round block native-type="submit" class="main_content_btn">提交</van-button>
</div>
</van-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
showPicker: false,
formList: [],
formItemList: [
{
type: 'input',
label: '姓名',
placeholder: '请输入姓名',
isRequired: true,
name: 'name',
value: ''
},
{
type: 'input',
label: '电话',
placeholder: '请输入电话',
isRequired: true,
name: 'mobile',
value: ''
},
{
type: 'radio',
label: '性别',
name: 'sex',
isRequired: true,
radioList: [
{ id: '0', option: '女' },
{ id: '1', option: '男' }
]
},
{
type: 'select',
label: '房型',
name: 'hotelType',
placeholder: '请选择房型',
isRequired: true,
value: '',
radioList: ['单间', '标间']
}
]
}
},
mounted() {
this.handleAdd()
},
methods: {
onSubmit() {
const result = []
this.formList.forEach(item => {
const resultObj = {}
item.forEach(obj => {
resultObj[obj.name] = obj.value
})
result.push(resultObj)
})
// console.log(result)
this.$router.push({
path: '/OrderConfirm',
query: {
list: result
}
})
},
// 表单项减少
handleMinus(index) {
this.formList.splice(index, 1)
},
// 表单项增加
handleAdd() {
const arr = [
{
type: 'input',
label: '姓名',
placeholder: '请输入姓名',
isRequired: true,
name: 'name',
value: ''
},
{
type: 'input',
label: '电话',
placeholder: '请输入电话',
isRequired: true,
name: 'mobile',
value: ''
},
{
type: 'radio',
label: '性别',
name: 'sex',
isRequired: true,
radioList: [
{ id: '0', option: '女' },
{ id: '1', option: '男' }
]
},
{
type: 'select',
label: '房型',
name: 'hotelType',
placeholder: '请选择房型',
isRequired: true,
value: '',
radioList: ['单间', '标间'],
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date()
}
]
this.formList.push(arr)
// console.log(this.formList, '123')
// console.log('000', this.formList)
},
onConfirm(value) {
this.value = value
this.showPicker = false
}
}
}
</script>
<style lang="scss" scoped>
.main {
background-color: #f7f7f7;
.main_content {
padding: 0.21rem 0.3rem 3.13rem 0.3rem;
.main_content_banner {
margin-top: 0.84rem;
width: 6.9rem;
height: 2.97rem;
background: rgba(255, 255, 255, 0.39);
border: 1px solid #707070;
border-radius: 0.2rem;
}
.main_content_form {
width: 6.9rem;
opacity: 1;
border-radius: 0.2rem;
margin-top: 0.32rem;
}
.main_content_form_list {
margin-top: 0.43rem;
}
.btn_operate {
float: right;
img {
width: 0.5072rem;
height: 0.5072rem;
}
.btn_add {
margin-left: 0.3rem;
margin-right: 0.31rem;
}
}
.main_content_btns {
margin-top: 1.02rem;
.main_content_btn {
background: #b80140;
color: #ffffff;
}
}
}
}
</style>
const routes = [
// 首页
{
path: '/',
component: () => import('./views/Index.vue')
},
// 个人中心
{
path: '/PersonalCenter',
component: () => import('./views/PersonalCenter.vue')
},
// 我的订单
{
path: '/MyOrder',
component: () => import('./views/MyOrder.vue')
},
// 购物车
{
path: '/OrderConfirm',
component: () => import('./views/OrderConfirm.vue')
},
// 报名页面
{
path: '/SignMainPage',
component: () => import('./views/SignMainPage.vue')
},
// 订单支付
{
path: '/PayDetail',
component: () => import('./views/PayDetail.vue')
}
]
......
<template>
<div>Home</div>
<div class="main">
<!-- 头部标题 -->
<!-- <van-nav-bar title="标题" left-text="返回" left-arrow fixed>
<template #right>
<van-icon name="contact" size="28" @click="onClickRight" />
</template>
</van-nav-bar> -->
<commonheader />
<div class="main_content">
<!-- banner卡片 -->
<!-- <div class="main_content_banner"></div> -->
<img
class="main_content_banner"
src="https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799"
alt=""
/>
<!-- 动态 -->
<div class="main_content_dt">
<div class="main_content_dt_tit">中国公路建设行业协会</div>
<div class="main_content_dt_con">
<div class="dt_con_card dt_con_card1">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/dt_img.png"
alt=""
class="dt_con_card_img"
/>
<div class="dt_con_card_tit">培训动态</div>
</div>
<div class="dt_con_card dt_con_card2">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/dt_img1.png"
alt=""
class="dt_con_card_img"
/>
<div class="dt_con_card_tit">e学公路</div>
</div>
</div>
</div>
<!-- 会议 -->
<div class="main_content_activity">
<div class="main_content_activity_tit">会议</div>
<!-- 活动列表 -->
<div class="main_content_activity_list" v-for="(item, index) in activityList" :key="index" @click="handleSign">
<div class="activity_list_left">
<div class="activity_list_left_tit">{{ item.title }}</div>
<div class="activity_list_left_con">{{ item.desc }}</div>
</div>
<div class="activity_list_right">
<div class="activity_list_right_date">{{ item.date }}</div>
<van-icon name="arrow" size="14" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
import { Dialog } from 'vant'
import Commonheader from '../components/Commonheader.vue'
export default {
components: { Commonheader },
data() {
return {
isSign: false,
activityList: [
{
title: '和地方的房价高合金和服务范围',
desc: '的南非举办峰会上发表时间和部分称为举步维艰还不如风景还是不错看剧本看见办法',
date: '2022-12-02'
},
{
title: '和地方的房价高合金和服务范围',
desc: '的南非举办峰会上发表时间和部分称为举步维艰还不如风景还是不错看剧本看见办法',
date: '2022-12-02'
},
{
title: '和地方的房价高合金和服务范围',
desc: '的南非举办峰会上发表时间和部分称为举步维艰还不如风景还是不错看剧本看见办法',
date: '2022-12-02'
},
{
title: '和地方的房价高合金和服务范围',
desc: '的南非举办峰会上发表时间和部分称为举步维艰还不如风景还是不错看剧本看见办法',
date: '2022-12-02'
},
{
title: '和地方的房价高合金和服务范围',
desc: '的南非举办峰会上发表时间和部分称为举步维艰还不如风景还是不错看剧本看见办法',
date: '2022-12-02'
}
]
}
},
methods: {
// 首页返回按钮
onClickLeft() {},
// 右侧按钮 个人中心
onClickRight() {
this.$router.push('/PersonalCenter')
},
handleSign() {
if (this.isSign === true) {
Dialog.confirm({
title: '标题',
confirmButtonText: '继续报名',
cancelButtonText: '开始学习',
closeOnClickOverlay: true
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
})
} else {
this.$router.push({
path: '/SignMainPage'
})
}
}
},
mounted() {}
}
</script>
<style></style>
<style lang="scss" scoped>
.main {
background-color: #f7f7f7;
.main_content {
margin-top: 0.46rem;
height: 100%;
padding: 0.51rem 0.3rem 0.3rem 0.3rem;
.main_content_banner {
width: 6.9rem;
height: 2.97rem;
// background-color: rgb(192, 162, 162);
border-radius: 0.1rem;
// background: url('https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799') no-repeat;
// background-size: 100%;
}
.main_content_dt {
margin: 0.3rem 0 0.3rem 0;
.main_content_dt_tit {
font-size: 0.3rem;
font-weight: 500;
color: #333333;
}
.main_content_dt_con {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.3rem;
.dt_con_card2 {
background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/dt_bg.png') no-repeat center;
}
.dt_con_card1 {
background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/dt_bg1.png') no-repeat center;
}
.dt_con_card {
width: 3.3rem;
height: 2.01rem;
background-color: #c104;
border-radius: 0.15rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-size: contain;
.dt_con_card_img {
width: 0.8rem;
height: 0.8rem;
}
.dt_con_card_tit {
font-size: 0.28rem;
font-weight: 400;
color: #ffffff;
margin-top: 0.21rem;
}
}
}
}
.main_content_activity {
.main_content_activity_tit {
font-size: 0.3rem;
font-weight: 500;
color: #333333;
}
.main_content_activity_list {
box-sizing: border-box;
padding: 0.2rem 0.25rem 0.2rem 0.3rem;
// width: 6.9rem;
height: 1.12rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
border-radius: 0.2rem;
margin-top: 0.24rem;
.activity_list_left {
display: flex;
flex-direction: column;
.activity_list_left_tit {
font-size: 0.28rem;
font-weight: 400;
color: #333333;
}
.activity_list_left_con {
margin-top: 0.2rem;
width: 4.08rem;
font-size: 0.24rem;
font-weight: 400;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.activity_list_right {
display: flex;
flex-direction: column;
align-items: flex-end;
.activity_list_right_date {
font-size: 0.22rem;
font-weight: 400;
color: #999999;
}
.activity_list_right_icon {
margin-top: 0.2rem;
}
}
}
}
}
}
::v-deep .van-icon-arrow {
margin-top: 0.2rem;
}
</style>
<template>
<div class="main">
<!-- 头部标题 -->
<!-- <van-nav-bar title="标题" left-text="返回" left-arrow fixed>
<template #right>
<van-icon name="contact" size="28" />
</template>
</van-nav-bar> -->
<commonheader />
<div class="main_content">
<!-- 头部tab -->
<van-tabs v-model="active" animated sticky>
<van-tab v-for="(it, index) in orderTab" :key="index" :title="it.title">
<div class="main_content_ticket">
<van-button round icon="https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/ticket.png">
开发票
</van-button>
</div>
<!-- 订单列表 -->
<div class="orderList" v-for="(item, index) in getDataByType(it.type)" :key="index">
<div class="orderList_status">{{ payStatus[item.status] }}</div>
<div class="orderList_con">
<div class="orderList_con_left">
<div class="orderList_con_left_tit">{{ item.title }}</div>
<div class="orderList_con_left_num">人数:{{ item.num }}</div>
</div>
<div class="orderList_con_price">¥{{ item.price }}</div>
</div>
<div class="orderList_pay">
<div class="orderList_pay_tit">需付款:</div>
<div class="orderList_pay_price">{{ item.needPay }}</div>
</div>
<div class="orderList_btn">
<van-button round size="small" v-if="item.status === 'hasNopay' || item.status === 'partpay'"
>删除订单</van-button
>
<van-button
round
size="small"
style="margin-left: 0.42rem"
v-if="item.status === 'hasNopay' || item.status === 'partPay'"
@click="$router.push('PayDetail')"
>去支付</van-button
>
<!-- <van-button round size="small" style="margin-left: 0.42rem" v-if="item.status === 'isFinished'"
>开发票</van-button
> -->
<!-- <van-button round size="small" style="margin-left: 0.42rem" v-if="item.status === 'isTicket'"
>已开票</van-button
> -->
</div>
</div>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
import Commonheader from '../components/Commonheader.vue'
export default {
components: { Commonheader },
data() {
return {
active: 0,
payStatus: {
hasNopay: '未支付',
partPay: '部分缴费',
isFinished: '已完成'
// isTicket: '已开票'
},
orderTab: [
{ title: '全部', type: 'all' },
{ title: '未支付', type: 'hasNopay' },
{ title: '部分缴费', type: 'partPay' },
{ title: '已完成', type: 'isFinished' }
// { title: '已开票', type: 'isTicket' }
],
orderList: [
{
status: 'hasNopay',
title: '的年纪俄方和金额是否接受',
price: '25',
num: 10,
needPay: '25'
},
{
status: 'partPay',
title: '端午节前后瑞回去',
price: '25',
num: 10,
needPay: '25'
},
{
status: 'isFinished',
title: '是佛教文化服务',
price: '25',
num: 10,
needPay: '25'
},
{
status: 'isTicket',
title: '呢减肥和复合物',
price: '25',
num: 10,
needPay: '25'
}
]
}
},
computed: {},
methods: {
getDataByType(type) {
if (type === 'all') {
return this.orderList
} else if (type === 'hasNopay') {
return this.orderList.filter(item => item.status === 'hasNopay')
} else if (type === 'partPay') {
return this.orderList.filter(item => item.status === 'partPay')
} else if (type === 'isFinished') {
return this.orderList.filter(item => item.status === 'isFinished')
}
// else if (type === 'isTicket') {
// return this.orderList.filter(item => item.status === 'isTicket')
// }
}
}
}
</script>
<style lang="scss" scoped>
.main {
height: 100vh;
.main_content {
// background: #fff;
background-color: #f7f7f7;
margin-top: 0.9rem;
.main_content_ticket {
padding-right: 0.3rem;
float: right;
margin-bottom: 0.3rem;
margin-top: -0.2rem;
}
.orderList {
margin: 0.3rem;
padding: 0.3rem 0.2rem 0.3rem 0.34rem;
width: 6.9rem;
height: 3.62rem;
background: #fff;
opacity: 1;
border-radius: 0.18rem;
display: flex;
align-items: flex-end;
flex-direction: column;
box-sizing: border-box;
.orderList_status {
font-size: 0.26rem;
font-weight: 400;
line-height: 0.28rem;
color: #c01540;
}
.orderList_con {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 0.31rem;
.orderList_con_left {
font-size: 0.28rem;
font-weight: 500;
color: #333333;
.orderList_con_left_tit {
width: 2.52rem;
font-size: 0.28rem;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.orderList_con_left_num {
font-size: 0.24rem;
font-weight: 400;
color: #9b9b9b;
opacity: 1;
}
}
.orderList_con_price {
font-size: 0.2rem;
font-weight: 400;
color: #333333;
}
}
.orderList_pay {
display: flex;
align-items: center;
margin-top: 0.42rem;
.orderList_pay_tit {
font-size: 0.28rem;
font-weight: 500;
color: #333333;
}
.orderList_pay_price {
font-size: 0.2rem;
font-weight: bold;
color: #333333;
}
}
.orderList_btn {
display: flex;
margin-top: 0.34rem;
}
}
}
}
</style>
<template>
<div class="main">
<!-- 头部标题 -->
<commonheader />
<div class="main_content">
<div class="main_content_list">
<van-checkbox-group v-model="selctOrderData" ref="checkboxGroup">
<div class="main_content_list_card" v-for="(item, index) in orderList" :key="index">
<div class="card_header">
<van-checkbox :name="item"></van-checkbox>
<span class="card_header_title">{{ item.title }}</span>
</div>
<div class="card_con">
<p>{{ item.desc }}</p>
</div>
<div class="card_fotter">
<div class="card_fotter_left">
<span class="price">¥</span>
<span class="price_num">{{ item.price }}<span class="price_num">.00</span></span>
</div>
<div class="card_fotter_left card_fotter_right">
<span class="price">单位已优惠</span>
<span class="price">¥</span>
<span class="price_num">{{ item.price }}<span class="price_num">.00</span></span>
</div>
</div>
</div>
</van-checkbox-group>
</div>
</div>
<van-submit-bar :price="totalPrice" button-text="提交订单" :disabled="!selctOrderData.length" @submit="onSubmit">
<van-checkbox v-model="isAll" @click="checkAll">全选</van-checkbox>
</van-submit-bar>
</div>
</template>
<script>
import Commonheader from '../components/Commonheader.vue'
export default {
components: { Commonheader },
data() {
return {
isAll: false,
numVsible: true,
orderList: [
{
id: 1,
title: '订单点的电大点啊点订单点的电大点啊点',
desc: '张三;1234456789;男;北京市;某某',
price: 10,
num: 1
},
{
id: 2,
title: '订单点的电大点啊点订单点的电大点啊点',
desc: '张三;1234456789;男;北京市;某某',
price: 20,
num: 1
},
{
id: 3,
title: '订单点的电大点啊点订单点的电大点啊点',
desc: '张三;1234456789;男;北京市;某某',
price: 30,
num: 1
},
{
id: 4,
title: '订单点的电大点啊点订单点的电大点啊点',
desc: '张三;1234456789;男;北京市;某某',
price: 40,
num: 1
}
],
selctOrderData: [] // 选中的数据
}
},
computed: {
totalPrice() {
return this.selctOrderData.map(item => item.price * 100 * item.num).reduce((pre, nex) => (pre += nex), 0)
}
},
methods: {
onClickLeft() {
history.go(-1)
},
checkAll() {
this.$refs.checkboxGroup.toggleAll(this.isAll)
},
onSubmit() {
console.log(this.selctOrderData)
this.$router.push({
path: '/PayDetail'
})
},
onClickRight() {}
}
}
</script>
<style lang="scss" scoped>
.main {
background-color: #f7f7f7;
height: 100vh;
.main_content {
padding: 0.51rem 0.3rem 0.3rem 0.3rem;
margin-top: 0.9rem;
.main_content_list {
padding-bottom: 0.6rem;
.main_content_list_card {
height: 2.16rem;
background: #fff;
opacity: 1;
border-radius: 18px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0.3rem;
margin-bottom: 0.3rem;
.card_header {
display: flex;
align-items: flex-start;
.card_header_title {
width: 2.88rem;
font-size: 0.32rem;
font-weight: 500;
color: #333333;
margin-left: 0.3rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.card_con {
font-weight: 400;
color: #999999;
margin-left: 0.66rem;
font-size: 0.24rem;
}
.card_fotter {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 0.7rem;
.card_fotter_left {
display: flex;
align-items: center;
justify-items: center;
.price {
font-size: 0.14rem;
color: #b80140;
}
.price_num {
font-size: 0.2rem;
font-weight: bold;
color: #b80140;
}
}
.card_fotter_right {
margin-left: 0.07rem;
background-color: #f8edf1;
}
}
}
}
}
}
</style>
<template>
<div class="main">
<commonheader />
<div class="main_content">
<div class="main_content_desc">1.打开支付宝扫码二维码支付,或长按保存二维码打开支付宝支付。</div>
<div class="main_content_qdCode">
<qrcode-vue :value="value" size="180" ref="qrcode" />
</div>
<div class="main_content_link">
2.
<el-button
class="link"
slot="append"
data-clipboard-target="#value"
ref="copy"
@click="initClipboard"
type="text"
><img
class="link_img"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/ilink.png"
/>支付链接</el-button
>
复制链接在浏览器打开去支付
</div>
<div id="value">{{ value }}</div>
</div>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import Clipboard from 'clipboard'
import { Toast } from 'vant'
import commonheader from '../components/Commonheader.vue'
export default {
components: {
QrcodeVue,
commonheader
},
data() {
return {
qrcodeUrl: '',
value: 'http://www.baidu.com',
clipboard: null
}
},
methods: {
getQrcodeUrl() {
this.qrcodeUrl = this.$refs.qrcode.$el
.querySelector('canvas')
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream')
},
initClipboard() {
if (this.clipboard) {
return
}
this.clipboard = new Clipboard(this.$refs.copy.$el)
this.clipboard.on('success', () => {
Toast.success('复制成功!')
this.clipboard.destroy()
})
this.clipboard.on('error', () => {
Toast.fail('复制失败,请重新复制!')
this.clipboard.destroy()
})
}
},
mounted() {
this.getQrcodeUrl()
this.initClipboard()
}
}
</script>
<style lang="scss" scoped>
.main {
background: #f7f7f7;
.main_content {
padding: 0.57rem 0.58rem 0 0.46rem;
background: #fff;
display: flex;
align-items: center;
flex-direction: column;
.main_content_desc {
// width: 5.56rem;
font-size: 0.3rem;
font-weight: 400;
color: #333333;
margin-top: 0.57rem;
}
.main_content_qdCode {
width: 2.88rem;
height: 2.84rem;
padding: 0.78rem 1.64rem 0 1.34rem;
}
.main_content_link {
font-size: 0.3rem;
font-weight: 400;
color: #333333;
margin-top: 1.99rem;
.link {
color: #b80140;
.link_img {
width: 0.3017rem;
height: 0.3rem;
}
}
}
#value {
font-size: 0.3rem;
opacity: 0;
}
}
}
</style>
<template>
<div class="main">
<!-- 头部标题 -->
<!-- <van-nav-bar title="标题" left-text="返回" left-arrow fixed>
<template #right>
<van-icon name="contact" size="28" />
</template>
</van-nav-bar> -->
<commonheader />
<!-- 我的订单 -->
<div class="main_content">
<div class="main_content_order" @click="handleOrder">
<div class="main_content_order_text">我的订单</div>
<van-icon name="arrow" size="14" />
</div>
<div class="main_content_footer">退出登录</div>
</div>
</div>
</template>
<script>
import Commonheader from '../components/Commonheader.vue'
export default {
components: { Commonheader },
methods: {
handleOrder() {
this.$router.push({
path: '/myOrder'
})
}
}
}
</script>
<style lang="scss" scoped>
.main {
.main_content {
height: calc(100vh - 46px);
margin-top: 0.46rem;
padding: 0.51rem 0.3rem 0 0.3rem;
background-color: #f7f7f7;
.main_content_order {
width: 6.9rem;
height: 0.7rem;
background: #fff;
opacity: 1;
border-radius: 0.2rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.25rem 0 0.3rem;
box-sizing: border-box;
margin-top: .21rem;
.main_content_order_text {
font-size: 0.28rem;
font-weight: 400;
color: #333333;
opacity: 1;
}
}
.main_content_footer {
width: 6.9rem;
height: 0.88rem;
background: #fff;
border-radius: 0.2rem;
font-size: 0.3rem;
font-weight: 500;
color: #333333;
line-height: 0.88rem;
text-align: center;
margin-top: 6.11rem;
}
}
}
</style>
<template>
<div class="main">
<!-- 头部标题 -->
<!-- <van-nav-bar title="标题" left-text="返回" left-arrow fixed>
<template #right>
<van-icon name="contact" size="28" />
</template>
</van-nav-bar> -->
<commonheader />
<img-show v-show="isShowStep" />
<sign-form v-show="isShowStep" />
</div>
</template>
<script>
import SignForm from '../components/SignForm.vue'
import ImgShow from '../components/ImgShow.vue'
import Commonheader from '../components/Commonheader.vue'
export default {
components: {
SignForm,
ImgShow,
Commonheader
},
data() {
return {
isShowStep: true
}
}
}
</script>
<style lang="scss" scoped></style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论