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({ ...@@ -9,7 +9,7 @@ App({
globalData: { globalData: {
appImageBase: '../../../image/', appImageBase: '../../../image/',
appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResources/', appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResourcesS2/',
token: '', token: '',
refreshToken: '', refreshToken: '',
userInfo: null, userInfo: null,
......
app.json
{ {
"pages": [ "pages": [
"pages/pay/order-input/order-input",
"pages/home/home/home", "pages/home/home/home",
"pages/home/dynamic/dynamic", "pages/home/dynamic/dynamic",
"pages/home/dynamic-detail/dynamic-detail", "pages/home/dynamic-detail/dynamic-detail",
...@@ -40,7 +42,8 @@ ...@@ -40,7 +42,8 @@
"pages/mine/question/question", "pages/mine/question/question",
"pages/mine/question-more/question-more", "pages/mine/question-more/question-more",
"pages/pay/home/home", "pages/pay/home/home",
"pages/pay/order-input/order-input",
"pages/pay/order-detail/order-detail", "pages/pay/order-detail/order-detail",
"pages/pay/coupon/coupon", "pages/pay/coupon/coupon",
"pages/pay/coupon-input/coupon-input", "pages/pay/coupon-input/coupon-input",
......
pages/pay/order-input/order-input.js
let App = getApp()
Page({ Page({
data: { data: {
orderType: '年卡', imageBase: App.globalData.appImageBase,
required: false,
isOld: true, orderType: 6, // 1 - 年卡/月卡，2 - 次票， 3 - SPA， 4 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影
showNotice: false,
formItemNum: 1, buyContent: '',
formItem: {}, buyPass: [
formList: [], App.globalData.appResourcesBase + 'pay/content-pass-1.png'
formName: '', ],
formPhone: '',
formIdNum: '', required: false,
isSubmit: 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() { onLoad() {
if (this.data.orderType === '年卡') { // this.setData({
let formItem = {} // buyContent: this.data.buyPass[0]
let formList = [] // })
formItem.name = '姓名'
formItem.phone = '手机号' // if (this.data.orderType === '年卡') {
formItem.idNum = '身份证' // let formItem = {}
formList.push(formItem) // let formList = []
this.setData({ // formItem.name = '姓名'
formItem, // formItem.phone = '手机号'
formList // formItem.idNum = '身份证'
}) // formList.push(formItem)
} // this.setData({
// formItem,
// formList
// })
// }
}, },
handleNotice() { handleNotice() {
let showNotice = true let showNotice = true
this.setData({ this.setData({
showNotice showNotice
}) })
}, },
payOrder() { payOrder() {
wx.reLaunch({ wx.reLaunch({
url: '/pages/paySucc/index', url: '/pages/paySucc/index',
}) })
}, },
handleItemNumEdit(e) { handleItemNumEdit(e) {
const operation = e.currentTarget.dataset.operation const operation = e.currentTarget.dataset.operation
let formItemNum = this.data.formItemNum let formItemNum = this.data.formItemNum
let formItem = this.data.formItem let formItem = this.data.formItem
let formList = this.data.formList let formList = this.data.formList
if (formItemNum === 1 && operation === -1) { if (formItemNum === 1 && operation === -1) {
console.log('至少买一个') console.log('至少买一个')
} else if (formItemNum === 20 && operation === 1) { } else if (formItemNum === 20 && operation === 1) {
console.log('最多买20个') console.log('最多买20个')
} else if (operation === 1) { } else if (operation === 1) {
formItemNum += operation formItemNum += operation
formList.push(formItem) formList.push(formItem)
} else if (operation === -1) { } else if (operation === -1) {
formItemNum += operation formItemNum += operation
formList.pop() 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({ this.setData({
errorName: '' formItemNum,
formList
}) })
} },
onInputBlur: function(event) {
if (this.data.formPhone === '') { console.log(event)
this.setData({ let funcType = event.target.dataset.type
isSubmit: false, let funcValue = event.detail.value
errorPhone: '请输入正确的手机号码' console.log(funcType, funcValue)
}) switch (funcType) {
} else if (this.data.formPhone.length != 11) { case 'name':
this.setData({ this.setData({
isSubmit: false, formName: funcValue
errorPhone: '请输入正确的手机号码' })
}) break
} else { case 'phone':
this.setData({ this.setData({
errorPhone: '' formPhone: funcValue
}) })
} break
case 'idNum':
if (this.data.formIdNum === '') { 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({ this.setData({
isSubmit: false, isSubmit: true
errorIdNum: '请输入正确的身份证号'
}) })
} else if (this.data.formIdNum.length != 16) { },
onQuantityCut: function () {
this.setData({ this.setData({
isSubmit: false, quantity: this.data.quantity - 1
errorIdNum: '请输入正确的身份证号'
}) })
} else { },
onQuantityAdd: function () {
this.setData({ 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": { "usingComponents": {},
"Tips": "../../components/Tips/Tips", "navigationStyle": "default",
"Blank": "../../components/Blank/Blank" "navigationBarTextStyle": "black",
}, "navigationBarTitleText": "确认订单",
"navigationBarTitleText": "确认订单" "navigationBarBackgroundColor": "#FFFFFF"
} }
\ No newline at end of file
pages/pay/order-input/order-input.wxml
<view class="card-wrapper"> <view class="container">
<view class="card-name">精灵鸟理想国年卡</view> <!-- winBuyContent -->
<view class="card-price"> <view class="buy-content">
<text class="price-symbol">￥</text> <view class="buy-content-pass" wx:if="{{orderType === 1}}">
<text class="price">1680.00</text> <image src="{{buyContent}}"></image>
<text class="price-symbol">/人</text> </view>
</view>
<view class="card-times row"> <view class="buy-content-pass" wx:if="{{orderType === 2}}">
<view class="card-left">使用次数</view> <image src="{{buyContent}}"></image>
<view class="card-right">不限</view> </view>
</view>
<view class="card-date row"> <view class="buy-content-service row align-c" wx:if="{{orderType === 3}}">
<view class="card-left">有效期</view> <view class="row con-c align-c">
<view class="card-right">2019.09.30 - 2020.09.30</view> <image src="{{buyContentCover}}"></image>
</view> </view>
<view class="card-bg"> <view class="buy-content-service-info col con-b">
<image mode="widthFix" src="../../assets/logo1.png"></image> <text>{{buyContentTitle}}</text>
</view> <text>{{'¥' + buyContentAmount}}</text>
<view class="card-logo"> </view>
<image mode="widthFix" src="../../assets/logo2.png"></image> </view>
</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="buy-content-activity row align-c" wx:if="{{orderType === 6}}">
<view class="notice">购买须知</view> <image src="{{buyContentCover}}"></image>
<l-icon name="right" color="#959DAA" size="22" /> <view class="buy-content-activity-info col con-b">
</view> <view class="title">
<l-popup show="{{showNotice}}" content-align="bottom" > <text>{{buyContentTitle}}</text>
<view class="notice-popup-wrapper"> </view>
<view class="notice-popup-title">购买须知</view> <view class="time">
<scroll-view scroll-y class="notice-popup-content"> <text>{{buyContentTime}}</text>
<view class="content-title">门票说明</view> </view>
<view class="content-sub-title">儿童营地日票（次票）</view> <view class="amount row align-e">
<view class="content-text">次票10元/次：单次进园，可享室外游乐设备，室内场馆及马场需单独收取费用。</view> <text>{{buyContentAmount}}</text>
<view class="content-sub-title">儿童营地年卡</view> </view>
<view class="content-text">1680元/年：一年内无限次进园，园区内室外游乐设备、室内场馆及马场均可参观游玩，不收取额外费用。</view> </view>
<view class="content-title">使用规则</view> </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="buy-content-activity row align-c" wx:if="{{orderType === 7}}">
<view class="choose-num-title">选择购买数量</view> <image src="{{buyContentCover}}"></image>
<view class="choose-num-tool row align-c"> <view class="buy-content-activity-info col con-b">
<view class="choose-edit" bindtap="handleItemNumEdit" data-operation="{{-1}}">-</view> <view class="title">
<view class="choose-num">{{formItemNum}}</view> <text>{{buyContentTitle}}</text>
<view class="choose-edit" bindtap="handleItemNumEdit" data-operation="{{1}}">+</view> </view>
</view> <view class="time">
<view class="choose-wraning">每笔订单购买数量上限为20</view> <text>{{buyContentTime}}</text>
<view class="choose-num-total"> </view>
<text>剩余库存：</text> <view class="amount row align-e">
<text class="num-total">500</text> <text>免费</text>
</view> </view>
</view> </view>
</view>
</view>
<view class="vip-info-wrapper"> <!-- winShoppingCart -->
<view class="vip-info-title">填写贵宾信息</view> <view class="shopping-cart" wx:if="{{orderType === 4 || orderType === 5}}">
<view class="tips-wrapper"> <view class="shopping-cart-title">
<Tips text="凭年卡入园需出示身份证信息"></Tips> <text>确认商品</text>
</view> </view>
<view class="vip-info"> <view class="shopping-cart-list">
<form> <block wx:for="{{shoppingCartList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="vip-item" wx:for="{{formList}}" wx:key="index"> <view class="shopping-cart-item row con-b align-c" data-item="{{item}}">
<view class="vip-info-no">年卡{{index+1}}</view> <view class="shopping-cart-item-cover">
<!-- <view class="vip-input-wrapper" wx:for="{{item}}" wx:for-index="key" wx:for-item="value" wx:key="key"> <image src="{{item.cover}}"></image>
<view class="vip-input-header">{{value}}</view> </view>
<input class="vip-input {{required ? 'inputError' : ''}}" placeholder="请输入{{value}}" placeholder-class="input-place" data-type="{{key}}" bindblur="onInputBlur"></input> <view class="shopping-cart-item-name row">
<view wx:if="{{required}}" class="vip-input-tips">请填写{{value}}</view> <text>{{'撒大声地撒多多撒大声地撒多'}}</text>
</view> --> </view>
<view class="vip-input-wrapper" wx:if="{{item.name}}"> <view class="shopping-cart-item-info col">
<view class="vip-input-header">{{item.name}}</view> <text>123</text>
<input class="vip-input {{errorName.length>0 ? 'inputError' : ''}}" placeholder="请输入{{item.name}}" placeholder-class="input-place" data-type="{{name}}" bindblur="onInputBlur"></input> <text>123</text>
<view wx:if="{{errorName.length>0}}" class="vip-input-tips">{{errorName}}</view> </view>
</view> </view>
<view class="vip-input-wrapper" wx:if="{{item.phone}}"> </block>
<view class="vip-input-header">{{item.phone}}</view> <view class="shopping-cart-total row con-b align-c">
<input class="vip-input {{errorPhone.length>0 ? 'inputError' : ''}}" placeholder="请输入{{item.phone}}" placeholder-class="input-place" data-type="{{phone}}" bindblur="onInputBlur"></input> <text>总计</text>
<view wx:if="{{errorPhone.length>0}}" class="vip-input-tips">{{errorPhone}}</view> <text>181.80</text>
</view> </view>
<view class="vip-input-wrapper" wx:if="{{item.idNum}}"> </view>
<view class="vip-input-header">{{item.idNum}}</view> </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"> <!-- winNotice -->
<Tips text="付款后一经确认不得退款"></Tips> <view class="buy-notice row con-e align-c">
</view> <text>{{noticeText}}</text>
<image src="{{imageBase + 'more-g.png'}}"></image>
</view>
<view class="footer-btn row align-c" wx:if="{{ticketInfo.status !== 0}}"> <!-- winEntry -->
<view class="new-price"> <view class="entry">
<text class="new-symbol">￥</text> <view class="entry-title">
<text>3360.00</text> <text>选择报名时间与人数</text>
</view> </view>
<view class="old-price" wx:if="isOld"> <view class="entry-label">
<text class="old-symbol">￥</text> <text>报名时间</text>
<text>5600.00</text> </view>
</view> <view class="entry-input row con-b align-c">
<view class="pay-btn" bindtap="payOrder">立即支付</view> <picker class="row con-b align-c" mode="date" value="{{entryDate}}" start="{{entryStartDate}}" end="{{entryEndDate}}" bindchange="onSelectionDate">
</view> <text>{{'2020-20-20'}}</text>
<!-- 底部占位 --> </picker>
<Blank></Blank> <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 { .container {
position: relative; margin-top: 60rpx;
width: 670rpx;
height: 356rpx;
margin: 64rpx auto 0;
padding: 32rpx 40rpx;
color: #fff;
background: linear-gradient(140deg, #F4D5C1 0%, #FA99CE 100%);
border-radius: 4rpx;
} }
.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 { .card-name, .card-price {
font-size: 42rpx; font-size: 42rpx;
font-weight: 500; font-weight: 500;
line-height: 58rpx; line-height: 58rpx;
} }
.card-price { .card-price {
margin-top: 8rpx; margin-top: 8rpx;
} }
.price-symbol { .price-symbol {
font-size: 26rpx; font-size: 26rpx;
} }
.card-times { .card-times {
margin-top: 80rpx; margin-top: 80rpx;
} }
.card-date { .card-date {
margin-top: 8rpx; margin-top: 8rpx;
} }
.card-left, .card-right { .card-left, .card-right {
margin-right: 16rpx; margin-right: 16rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
z-index: 10; z-index: 10;
} }
.card-left { .card-left {
font-weight: 500; font-weight: 500;
} }
.card-bg, .card-logo { .card-bg, .card-logo {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.card-bg { .card-bg {
width: 366rpx; width: 366rpx;
height: 356rpx; height: 356rpx;
z-index: 1; z-index: 1;
} }
.card-logo { .card-logo {
width: 308rpx; width: 308rpx;
height: 186rpx; height: 186rpx;
z-index: 2; z-index: 2;
} }
.notice-wrapper { .notice-wrapper {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
padding: 0 40rpx; padding: 0 40rpx;
line-height: 100rpx; line-height: 100rpx;
} }
.notice { .notice {
margin-right: 8rpx; margin-right: 8rpx;
color: #15191F; color: #15191f;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
} }
.notice-popup-wrapper { .notice-popup-wrapper {
max-height: 1110rpx; max-height: 1110rpx;
padding: 56rpx 40rpx 68rpx; padding: 56rpx 40rpx 68rpx;
background-color: #fff; background-color: #fff;
border-radius: 24rpx 24rpx 0 0; border-radius: 24rpx 24rpx 0 0;
} }
.notice-popup-title { .notice-popup-title {
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
} }
.notice-popup-content { .notice-popup-content {
max-height: 896rpx; max-height: 896rpx;
} }
.content-title { .content-title {
height: 80rpx; height: 80rpx;
color: #15191F; color: #15191f;
font-size: 34rpx; font-size: 34rpx;
} }
.content-sub-title { .content-sub-title {
height: 52rpx; height: 52rpx;
color: #15191F; color: #15191f;
font-size: 26rpx; font-size: 26rpx;
} }
.content-text { .content-text {
height: 112rpx; height: 112rpx;
color: #959DA9; color: #959da9;
font-size: 26rpx; font-size: 26rpx;
line-height: 44rpx; line-height: 44rpx;
} }
.choose-num-wrapper { .choose-num-wrapper {
position: relative; position: relative;
width: 670rpx; width: 670rpx;
height: 226rpx; height: 226rpx;
margin: 32rpx auto 0; margin: 32rpx auto 0;
} }
.choose-num-title { .choose-num-title {
color: #15191F; color: #15191f;
font-size: 34rpx; font-size: 34rpx;
font-weight: 600; font-weight: 600;
line-height: 48rpx; line-height: 48rpx;
} }
.choose-num-tool { .choose-num-tool {
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
margin-top: 40rpx; margin-top: 40rpx;
border: 1px solid #DBDFE5; border: 1px solid #dbdfe5;
border-radius: 4rpx; border-radius: 4rpx;
} }
.choose-edit { .choose-edit {
width: 78rpx; width: 78rpx;
line-height: 40rpx; line-height: 40rpx;
font-size: 40rpx; font-size: 40rpx;
text-align: center; text-align: center;
} }
.choose-num { .choose-num {
flex: 1; flex: 1;
line-height: 40rpx; line-height: 40rpx;
border-left: 1px solid #C2C7CF; border-left: 1px solid #c2c7cf;
border-right: 1px solid #C2C7CF; border-right: 1px solid #c2c7cf;
text-align: center; text-align: center;
} }
.choose-wraning { .choose-wraning {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
color: #D92B3A; color: #d92b3a;
font-size: 22rpx; font-size: 22rpx;
} }
.choose-num-total { .choose-num-total {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
color: #15191F; color: #15191f;
font-size: 30rpx; font-size: 30rpx;
} }
.num-total { .num-total {
color: #86C5E1; color: #86c5e1;
} }
.vip-info-wrapper { .vip-info-wrapper {
width: 670rpx; width: 670rpx;
margin: 64rpx auto 0; margin: 64rpx auto 0;
} }
.vip-info-title { .vip-info-title {
color: #15191F; color: #15191f;
font-size: 34rpx; font-size: 34rpx;
font-weight: 600; font-weight: 600;
} }
.tips-wrapper { .tips-wrapper {
margin-top: 24rpx; margin-top: 24rpx;
} }
.vip-info { .vip-info {
margin-top: 48rpx; margin-top: 48rpx;
} }
.vip-info-no { .vip-info-no {
height: 90rpx; height: 90rpx;
color: #15191F; color: #15191f;
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
} }
.vip-input-wrapper { .vip-input-wrapper {
height: 210rpx; height: 210rpx;
} }
.vip-input-header { .vip-input-header {
height: 58rpx; height: 58rpx;
color: #1E2025; color: #1e2025;
font-size: 30rpx; font-size: 30rpx;
} }
.vip-input { .vip-input {
width: 670rpx; width: 670rpx;
height: 80rpx; height: 80rpx;
padding-left: 24rpx; padding-left: 24rpx;
border: 1px solid #DBDFE5; border: 1px solid #dbdfe5;
border-radius: 4rpx; border-radius: 4rpx;
font-size: 30rpx; font-size: 30rpx;
line-height: 80rpx; line-height: 80rpx;
} }
.input-place { .input-place {
color: #C2C7CF; color: #c2c7cf;
} }
.inputError { .inputError {
border-color: #D92B3A; border-color: #d92b3a;
} }
.vip-input-tips { .vip-input-tips {
margin-top: 8rpx; margin-top: 8rpx;
color: #D92B3A; color: #d92b3a;
font-size: 22rpx; font-size: 22rpx;
} }
.footer-btn { .footer-btn {
position: relative; position: relative;
height: 128rpx; height: 128rpx;
padding: 32rpx 40rpx 0; padding: 32rpx 40rpx 0;
border-top: 1px solid #E2E7EF; border-top: 1px solid #e2e7ef;
} }
.new-price { .new-price {
color: #5DB5DD; color: #5db5dd;
font-size: 34rpx; font-size: 34rpx;
} }
.old-price { .old-price {
margin-left: 8px; margin-left: 8px;
color: #C2C7CF; color: #c2c7cf;
font-size: 22rpx; font-size: 22rpx;
text-decoration:line-through; text-decoration: line-through;
} }
.new-symbol { .new-symbol {
font-size: 32rpx; font-size: 32rpx;
} }
.old-symbol { .old-symbol {
font-size: 20rpx; font-size: 20rpx;
} }
.pay-btn { .pay-btn {
position: absolute; position: absolute;
right: 40rpx; right: 40rpx;
bottom: 0; bottom: 0;
width: 248rpx; width: 248rpx;
height: 96rpx; height: 96rpx;
color: #fff; color: #fff;
font-size: 30rpx; font-size: 30rpx;
line-height: 96rpx; line-height: 96rpx;
text-align: center; text-align: center;
border-radius: 4rpx; border-radius: 4rpx;
background-color: #86C5E1; background-color: #86c5e1;
} }
image { image {
width: 100%; width: 100%;
height: 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