Skip to content

C
center-register-show-h5
提交 8a65949a authored 作者: matian's avatar matian
浏览文件
操作

feat:代码更新

上级 b26878db
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1225 行增加 和 4 行删除
package-lock.json
浏览文件 @ 8a65949a
差异被折叠。
package.json
浏览文件 @ 8a65949a
......@@ -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"
......
src/assets/rem/rem.js 0 → 100644
浏览文件 @ 8a65949a
;(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)
src/main.js
浏览文件 @ 8a65949a
......@@ -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 })
......
src/modules/home/components/Commonheader.vue 0 → 100644
浏览文件 @ 8a65949a
<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>
src/modules/home/components/ImgShow.vue 0 → 100644
浏览文件 @ 8a65949a
<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>
src/modules/home/components/SignForm.vue 0 → 100644
浏览文件 @ 8a65949a
<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>
src/modules/home/index.js
浏览文件 @ 8a65949a
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')
}
]
......
src/modules/home/views/Index.vue
浏览文件 @ 8a65949a
<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>
src/modules/home/views/MyOrder.vue 0 → 100644
浏览文件 @ 8a65949a
<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>
src/modules/home/views/OrderConfirm.vue 0 → 100644
浏览文件 @ 8a65949a
<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>
src/modules/home/views/PayDetail.vue 0 → 100644
浏览文件 @ 8a65949a
<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>
src/modules/home/views/PersonalCenter.vue 0 → 100644
浏览文件 @ 8a65949a
<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>
src/modules/home/views/SignMainPage.vue 0 → 100644
浏览文件 @ 8a65949a
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论