Skip to content

严立 / mini-shimao

Go to a project
Commit 09bb006f by 严立
Options

LL - 确认订单静态

parent 88f2e258
Inline Side-by-side
Showing with 1173 additions and 375 deletions
app.js
......@@ -9,7 +9,7 @@ App({
globalData: {
appImageBase: '../../../image/',
appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResources/',
appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResourcesS2/',
token: '',
refreshToken: '',
userInfo: null,
......
app.json
{
"pages": [
"pages/pay/order-input/order-input",
"pages/home/home/home",
"pages/home/dynamic/dynamic",
"pages/home/dynamic-detail/dynamic-detail",
......@@ -40,7 +42,8 @@
"pages/mine/question/question",
"pages/mine/question-more/question-more",
"pages/pay/home/home",
"pages/pay/order-input/order-input",
"pages/pay/order-detail/order-detail",
"pages/pay/coupon/coupon",
"pages/pay/coupon-input/coupon-input",
......
pages/pay/order-input/order-input.js
let App = getApp()
Page({
data: {
orderType: '年卡',
required: false,
isOld: true,
showNotice: false,
formItemNum: 1,
formItem: {},
formList: [],
formName: '',
formPhone: '',
formIdNum: '',
isSubmit: false
imageBase: App.globalData.appImageBase,
orderType: 6, // 1 - 年卡/月卡，2 - 次票， 3 - SPA， 4 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影
buyContent: '',
buyPass: [
App.globalData.appResourcesBase + 'pay/content-pass-1.png'
],
required: false,
isOld: true,
showNotice: false,
formItemNum: 1,
formItem: {},
formList: [],
formName: '',
formPhone: '',
formIdNum: '',
isSubmit: false,
// 购买内容
buyContentCover: '',
buyContentTitle: '肌底补水保湿焕肤提华SPA套餐SPA套餐',
buyContentTime: '周一至周日 10:00-12:00',
buyContentAmount: '36.00',
// 购买清单
shoppingCartList: [{
cover: '',
name: 'aaaaa',
quantity: 12,
price: '60.50',
}, {
cover: '',
name: 'aaaaa',
quantity: 12,
price: '60.50',
}],
noticeText: '购买须知',
// 预约选择组件属性
entryDate: '',
entryStartDate: '',
entryEndDate: '',
// 数量选择组件属性
quantityTitle: '选择购买数量',
quantityError: '每笔订单购买数量上限为20',
quantityTipText: '剩余库存',
quantityTipNumber: 0,
quantity: 0,
quantityMax: 20,
quantityMin: 0,
// 购买人员信息
contactTitle: '填写购票人信息',
contactName: '',
contactPhone: '',
// 立即支付
payAmount: '59.00',
// 以下变量均为界面控制
winBuyContent: false, // 购买内容
winShoppingCart: false, // 购买清单
winNotice: false, // 购买须知
winNoticeTip: false, // 购买提示
winEntry: false, // 预约选择
winQuantity: false, // 数量选择
winContact: false, // 联系信息
winRegister: false, // 注册信息
winButtonPay: false, // 立即支付
winButtonAppointment: false, // 确认预约
},
onLoad() {
if (this.data.orderType === '年卡') {
let formItem = {}
let formList = []
formItem.name = '姓名'
formItem.phone = '手机号'
formItem.idNum = '身份证'
formList.push(formItem)
this.setData({
formItem,
formList
})
}
// this.setData({
// buyContent: this.data.buyPass[0]
// })
// if (this.data.orderType === '年卡') {
// let formItem = {}
// let formList = []
// formItem.name = '姓名'
// formItem.phone = '手机号'
// formItem.idNum = '身份证'
// formList.push(formItem)
// this.setData({
// formItem,
// formList
// })
// }
},
handleNotice() {
let showNotice = true
this.setData({
showNotice
})
let showNotice = true
this.setData({
showNotice
})
},
payOrder() {
wx.reLaunch({
url: '/pages/paySucc/index',
})
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
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.inspectForm()
},
inspectForm: function () {
console.log(1)
if (this.data.formName === '') {
this.setData({
isSubmit: false,
errorName: '请填写姓名'
})
} else {
this.setData({
errorName: ''
formItemNum,
formList
})
}
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 === '') {
},
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: false,
errorIdNum: '请输入正确的身份证号'
isSubmit: true
})
} else if (this.data.formIdNum.length != 16) {
},
onQuantityCut: function () {
this.setData({
isSubmit: false,
errorIdNum: '请输入正确的身份证号'
quantity: this.data.quantity - 1
})
} else {
},
onQuantityAdd: function () {
this.setData({
errorIdNum: ''
quantity: this.data.quantity + 1
})
}
this.setData({
isSubmit: true
})
},
})
\ No newline at end of file
})
\ No newline at end of file
pages/pay/order-input/order-input.json
{
"usingComponents": {
"Tips": "../../components/Tips/Tips",
"Blank": "../../components/Blank/Blank"
},
"navigationBarTitleText": "确认订单"
"usingComponents": {},
"navigationStyle": "default",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "确认订单",
"navigationBarBackgroundColor": "#FFFFFF"
}
\ No newline at end of file
pages/pay/order-input/order-input.wxml
<view class="card-wrapper">
<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="container">
<!-- winBuyContent -->
<view class="buy-content">
<view class="buy-content-pass" wx:if="{{orderType === 1}}">
<image src="{{buyContent}}"></image>
</view>
<view class="buy-content-pass" wx:if="{{orderType === 2}}">
<image src="{{buyContent}}"></image>
</view>
<view class="buy-content-service row align-c" wx:if="{{orderType === 3}}">
<view class="row con-c align-c">
<image src="{{buyContentCover}}"></image>
</view>
<view class="buy-content-service-info col con-b">
<text>{{buyContentTitle}}</text>
<text>{{'¥' + buyContentAmount}}</text>
</view>
</view>
<view class="buy-content-art" wx:if="{{orderType === 4}}">
<view class="buy-content-art-title">
<text>取货门店</text>
</view>
<view class="buy-content-art-item row align-c">
<view class="row con-c align-c">
<image src="{{buyContentCover}}"></image>
</view>
<view class="buy-content-art-info col con-c">
<text>{{buyContentTitle}}</text>
<text>{{buyContentTime}}</text>
</view>
</view>
</view>
<view class="buy-content-art" wx:if="{{orderType === 5}}">
<view class="buy-content-art-title">
<text>取货门店</text>
</view>
<view class="buy-content-art-item row align-c">
<view class="row con-c align-c">
<image src="{{buyContentCover}}"></image>
</view>
<view class="buy-content-art-info col con-c">
<text>{{buyContentTitle}}</text>
<text>{{buyContentTime}}</text>
</view>
</view>
<view class="buy-content-art-tip row align-c">
<image src="{{imageBase + 'fail-icon-4.png'}}"></image>
<text>请在下单3天内取餐，逾期失效</text>
</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="buy-content-activity row align-c" wx:if="{{orderType === 6}}">
<image src="{{buyContentCover}}"></image>
<view class="buy-content-activity-info col con-b">
<view class="title">
<text>{{buyContentTitle}}</text>
</view>
<view class="time">
<text>{{buyContentTime}}</text>
</view>
<view class="amount row align-e">
<text>{{buyContentAmount}}</text>
</view>
</view>
</view>
<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="buy-content-activity row align-c" wx:if="{{orderType === 7}}">
<image src="{{buyContentCover}}"></image>
<view class="buy-content-activity-info col con-b">
<view class="title">
<text>{{buyContentTitle}}</text>
</view>
<view class="time">
<text>{{buyContentTime}}</text>
</view>
<view class="amount row align-e">
<text>免费</text>
</view>
</view>
</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>
<!-- winShoppingCart -->
<view class="shopping-cart" wx:if="{{orderType === 4 || orderType === 5}}">
<view class="shopping-cart-title">
<text>确认商品</text>
</view>
<view class="shopping-cart-list">
<block wx:for="{{shoppingCartList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="shopping-cart-item row con-b align-c" data-item="{{item}}">
<view class="shopping-cart-item-cover">
<image src="{{item.cover}}"></image>
</view>
<view class="shopping-cart-item-name row">
<text>{{'撒大声地撒多多撒大声地撒多'}}</text>
</view>
<view class="shopping-cart-item-info col">
<text>123</text>
<text>123</text>
</view>
</view>
</block>
<view class="shopping-cart-total row con-b align-c">
<text>总计</text>
<text>181.80</text>
</view>
</view>
</view>
<view class="tips-wrapper">
<Tips text="付款后一经确认不得退款"></Tips>
</view>
<!-- winNotice -->
<view class="buy-notice row con-e align-c">
<text>{{noticeText}}</text>
<image src="{{imageBase + 'more-g.png'}}"></image>
</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>
<!-- winEntry -->
<view class="entry">
<view class="entry-title">
<text>选择报名时间与人数</text>
</view>
<view class="entry-label">
<text>报名时间</text>
</view>
<view class="entry-input row con-b align-c">
<picker class="row con-b align-c" mode="date" value="{{entryDate}}" start="{{entryStartDate}}" end="{{entryEndDate}}" bindchange="onSelectionDate">
<text>{{'2020-20-20'}}</text>
</picker>
<image class="input-icon" src="{{imageBase + 'more.png'}}"></image>
</view>
<view class="entry-label">
<text>报名人数</text>
</view>
<view class="entry-input row con-b align-c">
<l-button l-class="input-button input-cut" special="{{true}}" bind:lintap="onQuantityCut">
<image class="input-icon" src="{{imageBase + 'cut.png'}}"></image>
</l-button>
<text class="text" style="{{formQuantity === 0 ? 'color: #C2C7CF' : 'color: #15191F'}}">{{quantity}}</text>
<l-button l-class="input-button input-add" special="{{true}}" bind:lintap="onQuantityAdd">
<image class="input-icon" src="{{imageBase + 'add.png'}}"></image>
</l-button>
</view>
<view class="quantity-other row con-b align-c">
<view class="quantity-error">
<text>{{quantityError}}</text>
</view>
<view class="quantity-tip row align-c">
<text>{{quantityTipText + '：'}}</text>
<text>{{quantityTipNumber}}</text>
</view>
</view>
</view>
<!-- winQuantity -->
<view class="quantity col">
<view class="quantity-title">
<text>{{quantityTitle}}</text>
</view>
<view class="quantity-input row con-b align-c">
<l-button l-class="input-button input-cut" special="{{true}}" bind:lintap="onQuantityCut">
<image class="input-icon" src="{{imageBase + 'cut.png'}}"></image>
</l-button>
<text class="text" style="{{formQuantity === 0 ? 'color: #C2C7CF' : 'color: #15191F'}}">{{quantity}}</text>
<l-button l-class="input-button input-add" special="{{true}}" bind:lintap="onQuantityAdd">
<image class="input-icon" src="{{imageBase + 'add.png'}}"></image>
</l-button>
</view>
<view class="quantity-other row con-b align-c">
<view class="quantity-error">
<text>{{quantityError}}</text>
</view>
<view class="quantity-tip row align-c">
<text>{{quantityTipText + '：'}}</text>
<text>{{quantityTipNumber}}</text>
</view>
</view>
</view>
<!-- winContact -->
<view class="contact">
<view class="contact-title col">
<text>{{contactTitle}}</text>
<text>仅用于接收订单确认短信</text>
</view>
<view class="contact-input col">
<text>姓名</text>
<input auto-focus placeholder="请输入姓名"></input>
<text>{{'错误信息'}}</text>
</view>
<view class="contact-input col">
<text>手机号</text>
<input auto-focus placeholder="请输入手机号"></input>
<text>{{'错误信息'}}</text>
</view>
</view>
<!-- winRegister -->
<view class="register">
<view class="register-title col">
<text>填写贵宾信息</text>
</view>
<view class="register-tip row align-c">
<image src="{{imageBase + 'fail-icon-4.png'}}"></image>
<text>凭月卡入园需出示身份证信息</text>
</view>
<block wx:for="{{3}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="register-item-title">
<text>{{'年卡' + (index + 1)}}</text>
</view>
<view class="contact-input col">
<text>姓名</text>
<input auto-focus placeholder="请输入姓名"></input>
<text>{{'错误信息'}}</text>
</view>
<view class="contact-input col">
<text>手机号</text>
<input auto-focus placeholder="请输入手机号"></input>
<text>{{'错误信息'}}</text>
</view>
<view class="contact-input col">
<text>身份证号</text>
<input auto-focus placeholder="请输入身份证号"></input>
<text>{{'错误信息'}}</text>
</view>
</block>
</view>
<!-- winButtonPay -->
<view class="pay">
<view class="pay-tip row align-c">
<image src="{{imageBase + 'fail-icon-4.png'}}"></image>
<text>付款后一经确认不得退款</text>
</view>
<view class="pay-operation row con-b align-c">
<text>{{'¥' + payAmount}}</text>
<button class="row con-c align-c">立即支付</button>
</view>
</view>
</view>
\ No newline at end of file
pages/pay/order-input/order-input.wxss
.card-wrapper {
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;
.container {
margin-top: 60rpx;
}
.buy-content {
border-radius: 4px;
}
/* 购买内容 - pass */
.buy-content-pass {
width: 670rpx;
height: 356rpx;
border-radius: 4px;
background: linear-gradient(47deg, #122F3B 0%, rgba(14, 53, 70, 0) 100%);
}
/* 购买内容 - service */
.buy-content-service {
width: 670rpx;
height: 216rpx;
padding: 0 32rpx;
border-radius: 4px;
background: #F5F6F8;
}
.buy-content-service image {
display: block;
width: 140rpx;
height: 140rpx;
margin-right: 32rpx;
border-radius: 4px;
background: #808080;
}
.buy-content-service-info {
width: 434rpx;
height: 140rpx;
}
.buy-content-service-info text:nth-child(1) {
height: 42rpx;
font-size: 30rpx;
font-weight: 800;
line-height: 42rpx;
color: #15191F;
}
.buy-content-service-info text:nth-child(2) {
height: 42rpx;
font-size: 30rpx;
font-weight: 800;
line-height: 32rpx;
color: #5DB5DD;
}
/* 购买内容 - art */
.buy-content-art-title text {
height: 48rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #15191F;
}
.buy-content-art-item {
width: 670rpx;
height: 216rpx;
margin-top: 40rpx;
padding: 0 32rpx;
border-radius: 4px;
background: #F5F6F8;
}
.buy-content-art-item image {
display: block;
width: 140rpx;
height: 140rpx;
margin-right: 32rpx;
border-radius: 4px;
background: #808080;
}
.buy-content-art-info {
width: 434rpx;
height: 140rpx;
}
.buy-content-art-info text:nth-child(1) {
height: 42rpx;
font-size: 30rpx;
font-weight: 800;
line-height: 42rpx;
color: #15191F;
}
.buy-content-art-info text:nth-child(2) {
height: 36rpx;
margin-top: 16rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #656E7B;
}
.buy-content-art-tip {
width: 670rpx;
height: 72rpx;
margin-top: 40rpx;
padding: 0 40rpx;
background: #F5EEDF;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #837048;
}
.buy-content-art-tip image {
display: block;
width: 28rpx;
height: 28rpx;
margin-right: 14rpx;
}
/* 购买内容 - activity */
.buy-content-activity {
width: 670rpx;
height: 280rpx;
padding: 0 32rpx;
border-radius: 4px;
background: #F5F6F8;
}
.buy-content-activity image {
display: block;
width: 150rpx;
height: 200rpx;
background: #808080;
}
.buy-content-activity-info {
height: 200rpx;
margin-left: 32rpx;
}
.buy-content-activity-info .title {
width: 424rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 42rpx;
color: #15191F;
}
.buy-content-activity-info .time {
width: 424rpx;
height: 36rpx;
margin-top: 16rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #656E7B;
}
.buy-content-activity-info .amount {
flex-grow: 1;
vertical-align: bottom;
font-size: 30rpx;
font-weight: 500;
line-height: 32rpx;
color: #5DB5DD;
}
/* 购买商品清单 */
.shopping-cart {
margin-top: 64rpx;
}
.shopping-cart-title text {
width: 136rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #15191F;
}
.shopping-cart-list {
width: 670rpx;
margin-top: 40rpx;
border-radius: 4px;
background: #F5F6F8;
}
.shopping-cart-item {
width: 606rpx;
height: 188rpx;
margin: 0 32rpx;
padding: 24rpx 0;
border-bottom: 1px #E2E7EF solid;
}
.shopping-cart-item-cover image {
display: block;
width: 140rpx;
height: 140rpx;
border-radius: 4px;
background: #808080;
}
.shopping-cart-item-name {
width: 290rpx;
height: 108rpx;
margin-left: 24rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 40rpx;
color: #15191F;
}
.shopping-cart-item-info {
width: 152rpx;
height: 108rpx;
}
.shopping-cart-item-info text:nth-child(1) {
height: 36rpx;
margin-top: 4rpx;
text-align: right;
font-size: 26rpx;
font-weight: 500;
line-height: 32rpx;
color: #15191F;
}
.shopping-cart-item-info text:nth-child(2) {
height: 36rpx;
margin-top: 8rpx;
text-align: right;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.shopping-cart-total {
height: 88rpx;
padding: 0 32rpx;
}
.shopping-cart-total text:nth-child(1) {
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.shopping-cart-total text:nth-child(2) {
font-size: 32rpx;
font-weight: 500;
line-height: 32rpx;
color: #5DB5DD;
}
/* 购买须知 / 报名须知 / 预约须知 */
.buy-notice {
width: 670rpx;
margin: 30rpx 40rpx;
font-size: 26rpx;
font-weight: 400;
color: #15191F;
line-height: 36rpx;
}
.buy-notice image {
display: block;
width: 32rpx;
height: 32rpx;
margin-left: 8rpx;
}
/* 报名组件 */
.entry-title {
margin-top: 32rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #15191F;
}
.entry-label {
height: 42rpx;
margin-top: 48rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
color: #1E2025;
}
.entry-input {
position: relative;
width: 670rpx;
height: 80rpx;
margin-top: 16rpx;
border-radius: 4px;
border: 1px solid #DBDFE5;
}
.entry-input picker {
width: 590rpx;
margin-left: 24rpx;
}
.entry-input picker text {
display: block;
width: 590rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 32rpx;
color: #15191F;
}
.entry-input > image {
position: absolute;
right: 24rpx;
}
/* 数量组件 */
.quantity-title {
margin-top: 32rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #15191F;
}
.quantity-input {
width: 670rpx;
height: 80rpx;
margin-top: 40rpx;
border-radius: 4px;
border: 1px solid #DBDFE5;
}
.input-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 80rpx;
height: 40rpx;
}
.input-cut {
border-right: 1px #E9EBEF solid;
}
.input-add {
border-left: 1px #E9EBEF solid;
}
.input-icon {
width: 32rpx;
height: 32rpx;
}
.quantity-error {
height: 32rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #D92B3A;
}
.quantity-other {
margin-top: 16rpx;
}
.quantity-tip text:nth-child(1) {
height: 42rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
color: #1E2025;
}
.quantity-tip text:nth-child(2) {
height: 42rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
color: #5DB5DD;
}
/* 购买人员信息 */
.contact {
width: 670rpx;
margin-top: 44rpx;
padding-bottom: 40rpx;
}
.contact-title {
margin-bottom: 18rpx;
}
.contact-title text:nth-child(1) {
height: 48rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #15191F;
}
.contact-title text:nth-child(2) {
height: 36rpx;
margin-top: 8rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.contact-input text:nth-child(1) {
height: 42rpx;
margin-top: 32rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
color: #1E2025;
}
.contact-input input {
width: 670rpx;
height: 80rpx;
margin: 16rpx 0 8rpx 0;
padding: 0 24rpx;
border-radius: 4px;
border: 1px solid #DBDFE5;
font-size: 30rpx;
font-weight: 400;
line-height: 32rpx;
color: #C2C7CF;
}
.contact-input text:nth-child(3) {
height: 32rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #D92B3A;
}
/* 注册人员信息 */
.register {
}
.register-title {
margin-bottom: 18rpx;
height: 48rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #15191F;
}
.register-tip {
width: 670rpx;
height: 72rpx;
margin-top: 40rpx;
padding: 0 40rpx;
background: #F5EEDF;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #837048;
}
.register-tip image {
display: block;
width: 28rpx;
height: 28rpx;
margin-right: 14rpx;
}
.register-item-title {
height: 42rpx;
margin-top: 40rpx;
font-size: 30rpx;
font-weight: 800;
line-height: 42rpx;
color: #15191F;
}
/* 立即支付 */
.pay {
margin-top: 40rpx;
}
.pay-tip {
width: 750rpx;
height: 72rpx;
padding: 0 40rpx;
background: #F5EEDF;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #837048;
}
.pay-tip image {
display: block;
width: 28rpx;
height: 28rpx;
margin-right: 14rpx;
}
.pay-operation {
padding: 32rpx 40rpx;
}
.pay-operation text {
height: 58rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #5DB5DD;
}
.pay-operation button {
width: 248rpx;
height: 96rpx;
border-radius: 4px;
background: #86C5E1;
font-size: 30rpx;
font-weight: 500;
line-height: 42px;
color: #FFFFFF;
}
.card-name, .card-price {
font-size: 42rpx;
font-weight: 500;
line-height: 58rpx;
font-size: 42rpx;
font-weight: 500;
line-height: 58rpx;
}
.card-price {
margin-top: 8rpx;
margin-top: 8rpx;
}
.price-symbol {
font-size: 26rpx;
font-size: 26rpx;
}
.card-times {
margin-top: 80rpx;
margin-top: 80rpx;
}
.card-date {
margin-top: 8rpx;
margin-top: 8rpx;
}
.card-left, .card-right {
margin-right: 16rpx;
font-size: 22rpx;
line-height: 32rpx;
z-index: 10;
margin-right: 16rpx;
font-size: 22rpx;
line-height: 32rpx;
z-index: 10;
}
.card-left {
font-weight: 500;
font-weight: 500;
}
.card-bg, .card-logo {
position: absolute;
right: 0;
bottom: 0;
position: absolute;
right: 0;
bottom: 0;
}
.card-bg {
width: 366rpx;
height: 356rpx;
z-index: 1;
width: 366rpx;
height: 356rpx;
z-index: 1;
}
.card-logo {
width: 308rpx;
height: 186rpx;
z-index: 2;
width: 308rpx;
height: 186rpx;
z-index: 2;
}
.notice-wrapper {
width: 100%;
height: 100rpx;
padding: 0 40rpx;
line-height: 100rpx;
width: 100%;
height: 100rpx;
padding: 0 40rpx;
line-height: 100rpx;
}
.notice {
margin-right: 8rpx;
color: #15191F;
font-size: 26rpx;
font-weight: 500;
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;
max-height: 1110rpx;
padding: 56rpx 40rpx 68rpx;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
}
.notice-popup-title {
width: 100%;
height: 90rpx;
width: 100%;
height: 90rpx;
}
.notice-popup-content {
max-height: 896rpx;
max-height: 896rpx;
}
.content-title {
height: 80rpx;
color: #15191F;
font-size: 34rpx;
height: 80rpx;
color: #15191f;
font-size: 34rpx;
}
.content-sub-title {
height: 52rpx;
color: #15191F;
font-size: 26rpx;
height: 52rpx;
color: #15191f;
font-size: 26rpx;
}
.content-text {
height: 112rpx;
color: #959DA9;
font-size: 26rpx;
line-height: 44rpx;
height: 112rpx;
color: #959da9;
font-size: 26rpx;
line-height: 44rpx;
}
.choose-num-wrapper {
position: relative;
width: 670rpx;
height: 226rpx;
margin: 32rpx auto 0;
position: relative;
width: 670rpx;
height: 226rpx;
margin: 32rpx auto 0;
}
.choose-num-title {
color: #15191F;
font-size: 34rpx;
font-weight: 600;
line-height: 48rpx;
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;
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;
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;
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;
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;
position: absolute;
right: 0;
bottom: 0;
color: #15191f;
font-size: 30rpx;
}
.num-total {
color: #86C5E1;
color: #86c5e1;
}
.vip-info-wrapper {
width: 670rpx;
margin: 64rpx auto 0;
width: 670rpx;
margin: 64rpx auto 0;
}
.vip-info-title {
color: #15191F;
font-size: 34rpx;
font-weight: 600;
color: #15191f;
font-size: 34rpx;
font-weight: 600;
}
.tips-wrapper {
margin-top: 24rpx;
margin-top: 24rpx;
}
.vip-info {
margin-top: 48rpx;
margin-top: 48rpx;
}
.vip-info-no {
height: 90rpx;
color: #15191F;
font-size: 30rpx;
font-weight: 600;
height: 90rpx;
color: #15191f;
font-size: 30rpx;
font-weight: 600;
}
.vip-input-wrapper {
height: 210rpx;
height: 210rpx;
}
.vip-input-header {
height: 58rpx;
color: #1E2025;
font-size: 30rpx;
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;
width: 670rpx;
height: 80rpx;
padding-left: 24rpx;
border: 1px solid #dbdfe5;
border-radius: 4rpx;
font-size: 30rpx;
line-height: 80rpx;
}
.input-place {
color: #C2C7CF;
color: #c2c7cf;
}
.inputError {
border-color: #D92B3A;
border-color: #d92b3a;
}
.vip-input-tips {
margin-top: 8rpx;
color: #D92B3A;
font-size: 22rpx;
margin-top: 8rpx;
color: #d92b3a;
font-size: 22rpx;
}
.footer-btn {
position: relative;
height: 128rpx;
padding: 32rpx 40rpx 0;
border-top: 1px solid #E2E7EF;
position: relative;
height: 128rpx;
padding: 32rpx 40rpx 0;
border-top: 1px solid #e2e7ef;
}
.new-price {
color: #5DB5DD;
font-size: 34rpx;
color: #5db5dd;
font-size: 34rpx;
}
.old-price {
margin-left: 8px;
color: #C2C7CF;
font-size: 22rpx;
text-decoration:line-through;
margin-left: 8px;
color: #c2c7cf;
font-size: 22rpx;
text-decoration: line-through;
}
.new-symbol {
font-size: 32rpx;
font-size: 32rpx;
}
.old-symbol {
font-size: 20rpx;
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;
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
width: 100%;
height: 100%;
}
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