Skip to content

严立 / mini-shimao

Go to a project
Commit 5f481136 by wjw
Options

wjw--订单修改

parent 136d73c5
Inline Side-by-side
Showing with 1178 additions and 19 deletions
pages/pay/order-detail/order-detail.js
// pages/orderDetail/index.js
Page({ Page({
data: { data: {
showNotice: false,
isFoodOrder: true,
orderBtnText: '去评价',
bottom: '0rpx',
swiperCurrent: 0,
showCodePopup: false,
// ticketInfo: {
// store: '元养水韵SPA',
// status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价
// time: '周一至周日 10:00 - 20:00',
// name: '文碧海',
// phone: '17612345222',
// useNum:'1件商品可用',
// useTime: '2019.09.30 - 2020.12.30',
// sealImg: '../../assets/seal.png'
// },
// ticketInfo: {
// status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款
// store: '拾光花坊插花分享会',
// date: '8月24日',
// time: '10:00 - 12:30',
// address: '拾光花坊2号厅',
// name: '文碧海',
// phone: '17612345222',
// useNum:'1件商品可用',
// useTime: '2019.09.30 - 2020.12.30',
// sealImg: '../../assets/seal2.png'
// },
// ticketInfo: {
// status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款
// store: '夏日音乐盛典星光之夜主题演唱会',
// date: '8月24日 - 10月30日',
// time: '10:00 - 12:30',
// address: '世茂 · 碧海银湖营销展示中心前100米星光广场',
// name: '文碧海',
// phone: '17612345222',
// useNum:'1件商品可用',
// useTime: '2019.09.30 - 2020.12.30',
// sealImg: '../../assets/seal2.png',
// sealImg2: '../../assets/seal2-1.png'
// },
ticketInfo: {
type: 'movie',
status: 0, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款
store: '阿凡达',
date: '8月24日 10:00 - 12:30',
name: '文碧海',
phone: '17612345222',
useNum:'3张电影票',
useTime: '2019.09.30 - 2020.12.30',
sealImg: '../../assets/seal2.png',
sealImg2: '../../assets/seal2-1.png'
}, },
onLoad: function (options) { goodsInfo:{
titleImg: '../../assets/goods_title.png',
title: '海错图展馆',
list: [
{
id: 0,
infoText: '《海错图》展览单人门票',
img: '../../assets/goods_item.png',
price: '30.60',
used: '查看券码'
},
{
id: 1,
infoText: '《海错图》展览单人门票',
img: '../../assets/goods_item.png',
price: '30.60',
used: '已使用'
},
]
}, },
// goodsInfo:{
// titleImg: '../../assets/good2.png',
// title: '元养水韵SPA',
// list: [
// {
// id: 0,
// infoText: '肌底补水保湿焕肤提亮SPA套餐',
// img: '../../assets/goods_item2.png',
// price: '30.60',
// used: '查看券码'
// },
// {
// id: 1,
// infoText: '泰国皇室经典SPA',
// img: '../../assets/goods_item2.png',
// price: '30.60',
// used: '已使用'
// },
// ]
// },
orderInfo: {
price: '61.20',
no: '12345994500652',
time: '2020-09-30 12:00:00',
payTime: '2020-09-30 12:11:11',
score: 50
},
codeList: [
{
id: 0,
title: '《 阿凡达 》电影票',
img: '../../assets/QRcode.png',
num: '2179 7092 0925'
},
{
id: 1,
content: 2
},
{
id: 2,
content: 3
}
]
},
onShow() {
let statusText = ''
let status = this.data.ticketInfo.status
let orderBtnText = this.data.orderBtnText
let bottom = ''
if (status === 0) {
console.log(0)
bottom = '-32rpx'
} else if (status === 1) {
console.log(1)
statusText = '订单待评价',
orderBtnText = '去评价'
} else if (status === 2) {
statusText = '订单已过期'
} else if (status === 3) {
statusText = '订单已取消'
orderBtnText = '再次下单'
} else if (status === 4) {
statusText = '订单已评价'
} else {
statusText = '订单待付款'
orderBtnText = '去支付'
}
this.setData({
statusText,
orderBtnText,
bottom
})
},
handleQRcode() {
let showCodePopup = true
this.setData({
showCodePopup
})
},
closeQRcode() {
let showCodePopup = false
this.setData({
showCodePopup
})
},
handleNotice() {
let showNotice = true
this.setData({
showNotice
})
},
swiperChange(e) {
let swiperCurrent = e.detail.current
console.log(swiperCurrent)
this.setData({
swiperCurrent
})
}
}) })
\ No newline at end of file
pages/pay/order-detail/order-detail.json
{ {
"usingComponents": {} "usingComponents": {
"Tips": "../../components/Tips/Tips",
"Blank": "../../components/Blank/Blank"
},
"navigationBarTitleText": "订单详情"
} }
\ No newline at end of file
pages/pay/order-detail/order-detail.wxml
<!--pages/home/home/home.wxml--> <view class="order-status col con-c {{ticketInfo.status === 1 ? 'bgPink' : ''}}" wx:if="{{ticketInfo.status !== 0}}">
<text>pages/home/home/home.wxml</text> <view class="status-text">{{statusText}}</view>
<view class="status-tips" wx:if="{{ticketInfo.status === 2}}">有效期2019.09.30 - 2020.12.30</view>
<view class="status-tips" wx:elif="{{ticketInfo.status === 3}}">下单后15分钟内未付款，自动取消订单</view>
<view class="status-tips" wx:elif="{{ticketInfo.status === 5}}">请在14:59内付款，否则讲自动取消订单</view>
</view>
<view class="ticket-wrapper">
<!-- 票券上 -->
<view class="ticket-main col">
<view class="ticket-row-store row {{ticketInfo.store.length>11?'align-s':'align-c'}}">
<view class="ticket-left">{{ticketInfo.type === 'movie' ? '电影' :'使用门店'}}</view>
<view class="ticket-right">
<view class="ticket-store">{{ticketInfo.store}}</view>
</view>
</view>
<view class="ticket-row-time row">
<view class="ticket-left">{{ticketInfo.date && ticketInfo.type === 'movie' ? '场次': (ticketInfo.date ? '活动时间' : '')}}</view>
<view class="ticket-right">
<view class="ticket-date">{{ticketInfo.date}}</view>
<view class="ticket-time">{{ticketInfo.time}}</view>
</view>
</view>
<view class="ticket-row-time row" wx:if="{{ticketInfo.address}}">
<view class="ticket-left">活动地点</view>
<view class="ticket-right">
<view class="ticket-address">{{ticketInfo.address}}</view>
</view>
</view>
<view class="ticket-info">
<view class="ticket-row-name row align-c">
<view class="ticket-left">订单信息</view>
<view class="ticket-right">
<view class="ticket-name">{{ticketInfo.name}}</view>
</view>
</view>
<view class="ticket-row-phone row">
<view class="ticket-left"></view>
<view class="ticket-right">
<view class="ticket-phone">{{ticketInfo.phone}}</view>
</view>
</view>
</view>
<!-- 印章 -->
<view class="seal-wrapper" style="bottom: {{bottom}}">
<image class="seal" mode="widthFix" src="{{ticketInfo.status === 0 ? ticketInfo.sealImg : ticketInfo.sealImg2}}"></image>
</view>
<!-- 白色圆 -->
<view class="circle" wx:if="{{ticketInfo.status === 0}}"></view>
</view>
<!-- 票券下 -->
<view class="ticket-footer col align-c" wx:if="{{ticketInfo.status === 0}}">
<view class="ticket-footer-top">{{ticketInfo.useNum}}</view>
<view class="ticket-footer-middle" bindtap="handleQRcode">一键扫码</view>
<view class="ticket-footer-bottom">{{ticketInfo.useTime}}</view>
</view>
<!-- 扫码弹窗 -->
<l-popup show="{{showCodePopup}}" l-class="l-popup-bg">
<view class="scan-code-wrapper col align-c">
<view class="code-header">20件商品可用</view>
<view class="code-tips">请将券码出示给门店核销人员</view>
<swiper class="code-main" next-margin="64rpx" bindchange="swiperChange">
<swiper-item wx:for="{{codeList}}" wx:key="id">
<view class="code-item col con-c align-c {{index === swiperCurrent ? 'item-center' : ''}}">
<view class="code-item-title">{{item.title}}</view>
<view class="code-img">
<image mode="widthFix" src="{{item.img}}"></image>
</view>
<view class="code-num-wrapper row align-c con-b">
<view class="code-num-title">券码{{index+1}}:</view>
<view class="code-num">{{item.num}}</view>
<view class="num-copy">复制</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="img-num row align-c">
<text class="current-img-num">{{swiperCurrent+1}}</text>
<text class="symbol-img-num"> / </text>
<text class="total-img-num">{{codeList.length}}</text>
</view>
<view class="code-close-btn row con-c align-c" bindtap="closeQRcode">
<image mode="widthFix" src="../../assets/icon_close.png"></image>
</view>
</view>
</l-popup>
</view>
<view class="tips-wrapper">
<Tips text="请在下单内3天内取餐，逾期无效"></Tips>
</view>
<view class="notice-wrapper row con-e" bindtap="handleNotice" wx:if="{{ticketInfo.status === 0 || ticketInfo.status === 5}}">
<view class="notice">{{ticketInfo.status === 0 ? '使用须知' : '购买须知'}}</view>
<l-icon name="right" color="#959DAA" size="22" />
</view>
<l-popup show="{{showNotice}}" content-align="bottom">
<view class="notice-popup-wrapper">
<view class="notice-popup-title">购买须知</view>
<scroll-view scroll-y class="notice-popup-content">
</scroll-view>
</view>
</l-popup>
<view class="goods-wrapper">
<view class="goods-title">购买商品</view>
<view class="goods-list">
<view class="goods-list-title-wrapper row align-c">
<view class="goods-list-title-img">
<image mode="widthFix" src="{{goodsInfo.titleImg}}"></image>
</view>
<view class="goods-list-title">{{goodsInfo.title}}</view>
</view>
<view class="goods-item row" wx:for="{{goodsInfo.list}}" wx:key="id">
<view class="goods-item-img">
<image mode="widthFix" src="{{item.img}}"></image>
</view>
<view class="goods-item-info">
<view class="goods-item-info-text">{{item.infoText}}</view>
<view class="goods-item-info-price">
<text class="price-symbol">￥</text>
<text class="price">{{item.price}}</text>
</view>
</view>
<view class="goods-item-btn {{item.used === '已使用'?'disabled':''}}" bindtap="handleQRcode">{{item.used}}</view>
<!-- <view class="goods-item-btn"></view> -->
</view>
</view>
</view>
<view class="order-info-wrapper">
<view class="order-price">
<text class="order-price-symbol">￥</text>
<text>{{orderInfo.price}}</text>
</view>
<view class="order-title">实付金额</view>
<view class="order-info">
<view class="order-item">订单编号：{{orderInfo.no}}</view>
<view class="order-item">下单时间：{{orderInfo.time}}</view>
<view class="order-item">付款时间：{{orderInfo.payTime}}</view>
<view class="order-item">获得积分：{{orderInfo.score}}分</view>
</view>
</view>
<view class="footer-btn row con-e" wx:if="{{ticketInfo.status !== 0}}">
<view class="delete-btn" wx:if="!{{ticketInfo.status === 0 || ticketInfo.status === 1}}">删除订单</view>
<view class="order-btn" wx:if="{{ticketInfo.status === 1 || ticketInfo.status === 3 || ticketInfo.status === 5}}">{{orderBtnText}}</view>
</view>
<Blank></Blank>
\ No newline at end of file
pages/pay/order-detail/order-detail.wxss
/* pages/home/home/home.wxss */ .order-status {
\ No newline at end of file width: 670rpx;
height: 240rpx;
margin: 64rpx auto 0;
padding-left: 32rpx;
color: #15191F;
background-color: #ECF4F8;
}
.status-text {
font-size: 54rpx;
font-weight: 600;
}
.status-tips {
margin-top: 24rpx;
}
.bgPink {
background-color: #F3E1E1;
}
.ticket-wrapper {
width: 670rpx;
margin: 64rpx auto 0;
}
.ticket-main {
position: relative;
width: 100%;
padding: 48rpx 32rpx 46rpx;
background-color: #F3F4F6;
border-bottom: 1px dashed #E2E7EF;
}
.ticket-left {
width: 152rpx;
display: table-cell;
vertical-align: bottom;
font-size: 26rpx;
color: #959DA9;
}
.ticket-right {
flex: 1;
font-size: 26rpx;
}
.ticket-store {
font-size: 38rpx;
color: #15191F;
font-weight: 600;
}
.ticket-row-time, .ticket-row-phone {
margin-top: 16rpx;
}
.ticket-time, .ticket-address, .ticket-date {
font-size: 30rpx;
line-height: 42rpx;
}
.ticket-info {
margin-top: 48rpx;
}
.seal-wrapper {
position: absolute;
right: 0;
bottom: -32rpx;
width: 166rpx;
height: 200rpx;
}
.seal {
width: 100%;
height: 100%;
}
.circle {
position: absolute;
left: -18rpx;
bottom: -18rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #fff;
}
.ticket-footer {
padding: 50rpx 32rpx 24rpx;
background-color: #F3F4F6;
}
.ticket-footer-top {
font-size: 34rpx;
color: #15191F;
}
.ticket-footer-middle {
width: 606rpx;
height: 96rpx;
line-height: 96rpx;
margin: 40rpx 0;
color: #fff;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
.ticket-footer-bottom {
font-size: 26rpx;
color: #959DAA;
}
/* 扫码弹窗 */
.scan-code-wrapper {
}
.code-header {
height: 70rpx;
color: #fff;
font-size: 30rpx;
text-align: center;
}
.code-tips {
height: 92rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
}
.code-main {
width: 750rpx;
height: 666rpx;
}
.code-item {
width: 526rpx;
height: 666rpx;
background-color: #fff;
border-radius: 4rpx;
}
.item-center {
margin: 0 auto;
}
.code-item-title {
color: #15191F;
font-size: 30rpx;
font-weight: 600;
}
.code-img {
width: 296rpx;
height: 296rpx;
margin: 56rpx 0;
}
.code-num-wrapper {
width: 446rpx;
height: 96rpx;
padding: 0 24rpx;
background-color: #F2F3F5;
border-radius: 4rpx;
}
.code-num-title {
color: #959DA9;
font-size: 26rpx;
}
.code-num {
color: #15191F;
font-size: 30rpx;
}
.num-copy {
color: #5DB5DD;
font-size: 26rpx;
}
.img-num {
margin-top: 54rpx;
}
.current-img-num {
color: #fff;
font-size: 34rpx;
}
.symbol-img-num, .total-img-num {
color: #979797;
font-size: 26rpx;
}
.code-close-btn {
width: 80rpx;
height: 80rpx;
margin-top: 35rpx;
background: rgba(254, 252, 249, 0.5);
border-radius: 50%;
}
.code-close-btn image {
width: 60%;
}
.l-popup-bg {
background: rgba(0, 0, 0, .4);
}
.tips-wrapper {
margin: 40rpx 40rpx 0;
}
.notice-wrapper {
width: 100%;
height: 100rpx;
padding: 0 40rpx;
line-height: 100rpx;
}
.notice {
margin-right: 8rpx;
color: #15191F;
font-size: 26rpx;
}
.notice-popup-wrapper {
padding: 56rpx 40rpx 68rpx;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
}
.notice-popup-title {
width: 100%;
height: 90rpx;
}
.notice-content {
max-height: 896rpx;
}
.goods-wrapper {
padding: 32rpx 40rpx 0;
}
.goods-title {
color: #15191F;
font-size: 34rpx;
}
.goods-list {
margin-top: 40rpx;
padding: 0 32rpx 14rpx;
background-color: #F5F6F8;
}
.goods-list-title-wrapper {
width: 100%;
height: 132rpx;
}
.goods-list-title-img {
min-width: 40rpx;
min-height: 54rpx;
max-width: 74rpx;
max-height: 74rpx;
}
.goods-list-title {
margin-left: 16rpx;
color: #15191F;
font-size: 26rpx;
font-weight: 600;
}
.goods-item {
margin-bottom: 22rpx;
padding-bottom: 22rpx;
border-bottom: 1px solid #E2E7EF;
}
.goods-item:last-child {
margin-bottom: 0rpx;
border-bottom: none;
}
.goods-item-img {
width: 140rpx;
height: 136rpx;
}
.goods-item-info {
flex: 1;
padding: 0 32rpx 0 24rpx;
}
.goods-item-info-text {
color: #15191F;
font-size: 26rpx;
font-weight: 600;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goods-item-info-price {
margin-top: 18rpx;
color: #15191F;
font-weight: 600;
}
.price-symbol {
font-size: 22rpx;
}
.price{
font-size: 26rpx;
}
.goods-item-btn {
margin-top: 40rpx;
width: 120rpx;
height: 56rpx;
color: #fff;
font-size: 22rpx;
text-align: center;
line-height: 56rpx;
background-color: #86C5E1;
border-radius: 4rpx;
}
.disabled {
background-color: #C8E1EC;
}
.order-info-wrapper {
position: relative;
width: 670rpx;
margin: 64rpx 40rpx 64rpx;
}
.order-price {
position: absolute;
top: 0;
right: 0;
width: 134rpx;
height: 58rpx;
color: #5DB5DD;
font-size: 34rpx;
font-weight: 600;
}
.order-price-symbol {
font-size: 30rpx;
}
.order-title {
width: 100%;
line-height: 68rpx;
font-size: 34rpx;
font-weight: 600;
}
.order-info {
margin-top: 22rpx;
}
.order-item {
width: 100%;
color: #959DA9;
font-size: 22rpx;
line-height: 42rpx;
}
.footer-btn {
padding: 32rpx 20rpx 0;
border-top: 1px solid #E2E7EF;
}
.delete-btn, .order-btn {
width: 200rpx;
line-height: 96rpx;
margin-right: 24rpx;
border-radius: 4rpx;
font-size: 30rpx;
font-weight: 600;
text-align: center;
}
.delete-btn {
color: #656E7B;
background-color: #fff;
border: 1px solid #C2C7CF;
}
.order-btn {
color: #fff;
background-color: #86C5E1;
}
image {
width: 100%;
height: 100%;
}
pages/pay/order-input/order-input.js
Page({ Page({
data: { data: {
orderType: '年卡',
required: false,
isOld: true,
showNotice: false,
formItemNum: 1,
formItem: {},
formList: [],
formName: '',
formPhone: '',
formIdNum: '',
isSubmit: false
}, },
onLoad: function (options) { onLoad() {
if (this.data.orderType === '年卡') {
let formItem = {}
let formList = []
formItem.name = '姓名'
formItem.phone = '手机号'
formItem.idNum = '身份证'
formList.push(formItem)
this.setData({
formItem,
formList
})
}
}, },
}) handleNotice() {
\ No newline at end of file let showNotice = true
this.setData({
showNotice
})
},
payOrder() {
wx.reLaunch({
url: '/pages/paySucc/index',
})
},
handleItemNumEdit(e) {
const operation = e.currentTarget.dataset.operation
let formItemNum = this.data.formItemNum
let formItem = this.data.formItem
let formList = this.data.formList
if (formItemNum === 1 && operation === -1) {
console.log('至少买一个')
} else if (formItemNum === 20 && operation === 1) {
console.log('最多买20个')
} else if (operation === 1) {
formItemNum += operation
formList.push(formItem)
} else if (operation === -1) {
formItemNum += operation
formList.pop()
}
this.setData({
formItemNum,
formList
})
},
onInputBlur: function (event) {
console.log(event)
let funcType = event.target.dataset.type
let funcValue = event.detail.value
console.log(funcType, funcValue)
switch (funcType) {
case 'name':
this.setData({
formName: funcValue
})
break
case 'phone':
this.setData({
formPhone: funcValue
})
break
case 'idNum':
this.setData({
formPhone: funcValue
})
break
}
this.inspectForm()
},
inspectForm: function () {
console.log(1)
if (this.data.formName === '') {
this.setData({
isSubmit: false,
errorName: '请填写姓名'
})
} else {
this.setData({
errorName: ''
})
}
if (this.data.formPhone === '') {
this.setData({
isSubmit: false,
errorPhone: '请输入正确的手机号码'
})
} else if (this.data.formPhone.length != 11) {
this.setData({
isSubmit: false,
errorPhone: '请输入正确的手机号码'
})
} else {
this.setData({
errorPhone: ''
})
}
if (this.data.formIdNum === '') {
this.setData({
isSubmit: false,
errorIdNum: '请输入正确的身份证号'
})
} else if (this.data.formIdNum.length != 16) {
this.setData({
isSubmit: false,
errorIdNum: '请输入正确的身份证号'
})
} else {
this.setData({
errorIdNum: ''
})
}
this.setData({
isSubmit: true
})
},
})
\ No newline at end of file
pages/pay/order-input/order-input.json
{ {
"usingComponents": {} "usingComponents": {
"Tips": "../../components/Tips/Tips",
"Blank": "../../components/Blank/Blank"
},
"navigationBarTitleText": "确认订单"
} }
\ No newline at end of file
pages/pay/order-input/order-input.wxml
<!--pages/home/home/home.wxml--> <view class="card-wrapper">
<text>pages/home/home/home.wxml</text> <view class="card-name">精灵鸟理想国年卡</view>
<view class="card-price">
<text class="price-symbol">￥</text>
<text class="price">1680.00</text>
<text class="price-symbol">/人</text>
</view>
<view class="card-times row">
<view class="card-left">使用次数</view>
<view class="card-right">不限</view>
</view>
<view class="card-date row">
<view class="card-left">有效期</view>
<view class="card-right">2019.09.30 - 2020.09.30</view>
</view>
<view class="card-bg">
<image mode="widthFix" src="../../assets/logo1.png"></image>
</view>
<view class="card-logo">
<image mode="widthFix" src="../../assets/logo2.png"></image>
</view>
</view>
<view class="notice-wrapper row con-e" bindtap="handleNotice">
<view class="notice">购买须知</view>
<l-icon name="right" color="#959DAA" size="22" />
</view>
<l-popup show="{{showNotice}}" content-align="bottom" >
<view class="notice-popup-wrapper">
<view class="notice-popup-title">购买须知</view>
<scroll-view scroll-y class="notice-popup-content">
<view class="content-title">门票说明</view>
<view class="content-sub-title">儿童营地日票（次票）</view>
<view class="content-text">次票10元/次：单次进园，可享室外游乐设备，室内场馆及马场需单独收取费用。</view>
<view class="content-sub-title">儿童营地年卡</view>
<view class="content-text">1680元/年：一年内无限次进园，园区内室外游乐设备、室内场馆及马场均可参观游玩，不收取额外费用。</view>
<view class="content-title">使用规则</view>
<view class="content-text">购卡者需满16周岁，不满16周岁的游客需由16周岁以上游客陪同入场。</view>
<view class="content-text">入园时，您必须出示相应身份证件。</view>
<view class="content-title">温馨提示</view>
<view class="content-text">票价不含税，如需发票请联系园区工作人员。</view>
<view class="content-title">温馨提示</view>
<view class="content-text">票价不含税，如需发票请联系园区工作人员。</view>
<view class="content-title">温馨提示</view>
<view class="content-text">票价不含税，如需发票请联系园区工作人员。</view>
<view class="content-title">温馨提示</view>
<view class="content-text">票价不含税，如需发票请联系园区工作人员。</view>
</scroll-view>
</view>
</l-popup>
<view class="choose-num-wrapper">
<view class="choose-num-title">选择购买数量</view>
<view class="choose-num-tool row align-c">
<view class="choose-edit" bindtap="handleItemNumEdit" data-operation="{{-1}}">-</view>
<view class="choose-num">{{formItemNum}}</view>
<view class="choose-edit" bindtap="handleItemNumEdit" data-operation="{{1}}">+</view>
</view>
<view class="choose-wraning">每笔订单购买数量上限为20</view>
<view class="choose-num-total">
<text>剩余库存：</text>
<text class="num-total">500</text>
</view>
</view>
<view class="vip-info-wrapper">
<view class="vip-info-title">填写贵宾信息</view>
<view class="tips-wrapper">
<Tips text="凭年卡入园需出示身份证信息"></Tips>
</view>
<view class="vip-info">
<form>
<view class="vip-item" wx:for="{{formList}}" wx:key="index">
<view class="vip-info-no">年卡{{index+1}}</view>
<!-- <view class="vip-input-wrapper" wx:for="{{item}}" wx:for-index="key" wx:for-item="value" wx:key="key">
<view class="vip-input-header">{{value}}</view>
<input class="vip-input {{required ? 'inputError' : ''}}" placeholder="请输入{{value}}" placeholder-class="input-place" data-type="{{key}}" bindblur="onInputBlur"></input>
<view wx:if="{{required}}" class="vip-input-tips">请填写{{value}}</view>
</view> -->
<view class="vip-input-wrapper" wx:if="{{item.name}}">
<view class="vip-input-header">{{item.name}}</view>
<input class="vip-input {{errorName.length>0 ? 'inputError' : ''}}" placeholder="请输入{{item.name}}" placeholder-class="input-place" data-type="{{name}}" bindblur="onInputBlur"></input>
<view wx:if="{{errorName.length>0}}" class="vip-input-tips">{{errorName}}</view>
</view>
<view class="vip-input-wrapper" wx:if="{{item.phone}}">
<view class="vip-input-header">{{item.phone}}</view>
<input class="vip-input {{errorPhone.length>0 ? 'inputError' : ''}}" placeholder="请输入{{item.phone}}" placeholder-class="input-place" data-type="{{phone}}" bindblur="onInputBlur"></input>
<view wx:if="{{errorPhone.length>0}}" class="vip-input-tips">{{errorPhone}}</view>
</view>
<view class="vip-input-wrapper" wx:if="{{item.idNum}}">
<view class="vip-input-header">{{item.idNum}}</view>
<input class="vip-input {{errorIdNum.length>0 ? 'inputError' : ''}}" placeholder="请输入{{item.idNum}}" placeholder-class="input-place" data-type="{{idNum}}" bindblur="onInputBlur"></input>
<view wx:if="{{errorIdNum.length>0}}" class="vip-input-tips">{{errorIdNum}}</view>
</view>
</view>
</form>
</view>
</view>
<view class="tips-wrapper">
<Tips text="付款后一经确认不得退款"></Tips>
</view>
<view class="footer-btn row align-c" wx:if="{{ticketInfo.status !== 0}}">
<view class="new-price">
<text class="new-symbol">￥</text>
<text>3360.00</text>
</view>
<view class="old-price" wx:if="isOld">
<text class="old-symbol">￥</text>
<text>5600.00</text>
</view>
<view class="pay-btn" bindtap="payOrder">立即支付</view>
</view>
<!-- 底部占位 -->
<Blank></Blank>
pages/pay/order-input/order-input.wxss
/* pages/home/home/home.wxss */ .card-wrapper {
\ No newline at end of file position: relative;
width: 670rpx;
height: 356rpx;
margin: 64rpx auto 0;
padding: 32rpx 40rpx;
color: #fff;
background: linear-gradient(140deg, #F4D5C1 0%, #FA99CE 100%);
border-radius: 4rpx;
}
.card-name, .card-price {
font-size: 42rpx;
font-weight: 500;
line-height: 58rpx;
}
.card-price {
margin-top: 8rpx;
}
.price-symbol {
font-size: 26rpx;
}
.card-times {
margin-top: 80rpx;
}
.card-date {
margin-top: 8rpx;
}
.card-left, .card-right {
margin-right: 16rpx;
font-size: 22rpx;
line-height: 32rpx;
z-index: 10;
}
.card-left {
font-weight: 500;
}
.card-bg, .card-logo {
position: absolute;
right: 0;
bottom: 0;
}
.card-bg {
width: 366rpx;
height: 356rpx;
z-index: 1;
}
.card-logo {
width: 308rpx;
height: 186rpx;
z-index: 2;
}
.notice-wrapper {
width: 100%;
height: 100rpx;
padding: 0 40rpx;
line-height: 100rpx;
}
.notice {
margin-right: 8rpx;
color: #15191F;
font-size: 26rpx;
font-weight: 500;
}
.notice-popup-wrapper {
max-height: 1110rpx;
padding: 56rpx 40rpx 68rpx;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
}
.notice-popup-title {
width: 100%;
height: 90rpx;
}
.notice-popup-content {
max-height: 896rpx;
}
.content-title {
height: 80rpx;
color: #15191F;
font-size: 34rpx;
}
.content-sub-title {
height: 52rpx;
color: #15191F;
font-size: 26rpx;
}
.content-text {
height: 112rpx;
color: #959DA9;
font-size: 26rpx;
line-height: 44rpx;
}
.choose-num-wrapper {
position: relative;
width: 670rpx;
height: 226rpx;
margin: 32rpx auto 0;
}
.choose-num-title {
color: #15191F;
font-size: 34rpx;
font-weight: 600;
line-height: 48rpx;
}
.choose-num-tool {
width: 100%;
height: 80rpx;
margin-top: 40rpx;
border: 1px solid #DBDFE5;
border-radius: 4rpx;
}
.choose-edit {
width: 78rpx;
line-height: 40rpx;
font-size: 40rpx;
text-align: center;
}
.choose-num {
flex: 1;
line-height: 40rpx;
border-left: 1px solid #C2C7CF;
border-right: 1px solid #C2C7CF;
text-align: center;
}
.choose-wraning {
position: absolute;
left: 0;
bottom: 0;
color: #D92B3A;
font-size: 22rpx;
}
.choose-num-total {
position: absolute;
right: 0;
bottom: 0;
color: #15191F;
font-size: 30rpx;
}
.num-total {
color: #86C5E1;
}
.vip-info-wrapper {
width: 670rpx;
margin: 64rpx auto 0;
}
.vip-info-title {
color: #15191F;
font-size: 34rpx;
font-weight: 600;
}
.tips-wrapper {
margin-top: 24rpx;
}
.vip-info {
margin-top: 48rpx;
}
.vip-info-no {
height: 90rpx;
color: #15191F;
font-size: 30rpx;
font-weight: 600;
}
.vip-input-wrapper {
height: 210rpx;
}
.vip-input-header {
height: 58rpx;
color: #1E2025;
font-size: 30rpx;
}
.vip-input {
width: 670rpx;
height: 80rpx;
padding-left: 24rpx;
border: 1px solid #DBDFE5;
border-radius: 4rpx;
font-size: 30rpx;
line-height: 80rpx;
}
.input-place {
color: #C2C7CF;
}
.inputError {
border-color: #D92B3A;
}
.vip-input-tips {
margin-top: 8rpx;
color: #D92B3A;
font-size: 22rpx;
}
.footer-btn {
position: relative;
height: 128rpx;
padding: 32rpx 40rpx 0;
border-top: 1px solid #E2E7EF;
}
.new-price {
color: #5DB5DD;
font-size: 34rpx;
}
.old-price {
margin-left: 8px;
color: #C2C7CF;
font-size: 22rpx;
text-decoration:line-through;
}
.new-symbol {
font-size: 32rpx;
}
.old-symbol {
font-size: 20rpx;
}
.pay-btn {
position: absolute;
right: 40rpx;
bottom: 0;
width: 248rpx;
height: 96rpx;
color: #fff;
font-size: 30rpx;
line-height: 96rpx;
text-align: center;
border-radius: 4rpx;
background-color: #86C5E1;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment