APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add style

voice
刘嘉炜 4 years ago
parent
73b3fc8758
commit
c36ac39eb4
6 changed files with 582 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      src/pages.json
  2. 2
      src/pages/index/index.vue
  3. 194
      src/pages/write_off/confirm_order/confirm_order.vue
  4. 54
      src/pages/write_off/null/null.vue
  5. 121
      src/pages/write_off/operate/operate.vue
  6. 188
      src/pages/write_off/search_result/search_result.vue

24
src/pages.json
View File

@ -133,6 +133,30 @@
}
},
{
"path": "pages/write_off/search_result/search_result",
"style": {
"navigationBarTitleText": "核销查询"
}
},
{
"path": "pages/write_off/operate/operate",
"style": {
"navigationBarTitleText": "核销订单"
}
},
{
"path": "pages/write_off/confirm_order/confirm_order",
"style": {
"navigationBarTitleText": "核销订单"
}
},
{
"path": "pages/write_off/null/null",
"style": {
"navigationBarTitleText": "确认订单信息"
}
},
{
"path": "pages/employee/review_list/review_list",
"style": {
"navigationBarTitleText": "员工管理"

2
src/pages/index/index.vue
View File

@ -96,7 +96,7 @@
{
id: 4,
name: '核销查询',
path: '/pages/write_off/list/list',
path: '/pages/write_off/search_result/search_result',
serverKey: 1008 // 后端对应权限编号
},
{

194
src/pages/write_off/confirm_order/confirm_order.vue
View File

@ -0,0 +1,194 @@
<template>
<view class="confirm-order">
<view class="co-container">
<view class="c-store-name">欧轩智能羽毛球馆(永泰店)</view>
<view class="c-main-section">
<view class="s-line">
<view>
<text>订单编号：</text>
<view><view>20195175645666</view></view>
</view>
<view>(次卡)</view>
</view>
<view class="s-line">
<view>
<text>用户昵称：</text>
<view><view>周大强</view></view>
</view>
</view>
<view class="s-line">
<view>
<text>预订项目：</text>
<view><view>单人羽毛球次卡 (可随时使用) </view></view>
</view>
</view>
<view class="s-line">
<view>
<text>预定日期：</text>
<view><view>2019-05-18 周五</view></view>
</view>
</view>
<view class="s-line">
<view>
<text>预定场次：</text>
<view>
<view>平日+上午</view>
<view>平日+上午</view>
</view>
</view>
</view>
</view>
<view class="c-more-ticket">
<view class="mt-tip">该次卡订单有多张票，请选择验证码核销（多选）</view>
<view class="mt-lines">
<view v-for="i in 3" :key="i">
<view>20121 0152 1252</view>
<image></image>
</view>
</view>
</view>
<view class="c-dotted-line"></view>
<view class="c-btns">
<view>确认核销</view>
<view>不核销</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
page{
background-color: $themeColor;
}
.confirm-order{
padding-top: 46upx;
.co-container{
position: relative;
margin: 0 auto;
padding: 0 40upx 60upx;
width: 702upx;
border-radius: 10upx;
background-color: #fff;
.c-store-name{
line-height: 108upx;
font-size: 32upx;
font-weight: 500;
border-bottom: 2upx solid #D8D8D8;
color: #1A1A1A;
@include textHide(1);
}
.c-main-section{
padding: 20upx 0 24upx;
.s-line{
display: flex;
align-items: baseline;
>view{
display: flex;
align-items: baseline;
>view{
>view{
min-width: 0;
font-size: 28upx;
line-height: 60upx;
color: #1A1A1A;
@include textHide(1);
}
}
>text{
flex-shrink: 0;
font-size: 28upx;
line-height: 60upx;
color: #9C9C9F;
}
&+view{
flex-shrink: 0;
font-size: 28upx;
line-height: 60upx;
color: $themeColor;
}
}
}
}
.c-more-ticket{
padding-top: 32upx;
padding-bottom: 32upx;
border-top: 2upx solid #D8D8D8;
.mt-tip{
margin-bottom: 28upx;
line-height: 34upx;
font-size: 24upx;
color: #9C9C9F;
}
.mt-lines{
>view{
&:not(:last-child){
margin-bottom: 24upx;
}
@include centerFlex(space-between);
>view{
min-width: 0;
font-size: 28upx;
line-height: 40upx;
color: #1a1a1a;
}
>image{
flex-shrink: 0;
width: 40upx;
height: 40upx;
background-color: skyblue;
}
}
}
}
.c-dotted-line{
position: absolute;
left: 0;
width: 100%;
border-bottom: 2upx dotted #D8D8D8;
&::before,&::after{
content: '';
position: absolute;
top: -9upx;
display: block;
width: 20upx;
height: 20upx;
border-radius: 50%;
background-color: $themeColor;
}
&::before{
left: -10upx;
}
&::after{
right: -10upx;
}
}
.c-btns{
padding-top: 58upx;
>view{
height: 112upx;
text-align: center;
line-height: 108upx;
border-radius: 10upx;
border: 2upx solid $themeColor;
font-size: 32upx;
color: $themeColor;
&:first-child{
margin-bottom: 24upx;
color: #fff;
background-color: $themeColor;
}
}
}
}
}
</style>

54
src/pages/write_off/null/null.vue
View File

@ -0,0 +1,54 @@
<template>
<view class="null-container">
<image @click="isScan = !isScan"></image>
<view class="c-tip" v-if="isScan">很抱歉！获取不到二维码订单信息</view>
<view class="c-tip" v-else>很抱歉！获取不到验证码订单信息</view>
<view class="c-btn">返回</view>
</view>
</template>
<script>
export default {
data(){
return {
isScan: false
}
}
}
</script>
<style lang="scss">
@import "~style/public.scss";
page{
background-color: #fff;
}
.null-container{
padding-top: 90upx;
>image{
display: block;
margin: 0 auto 86upx;
width: 420upx;
height: 420upx;
background-color: skyblue;
}
.c-tip{
margin-bottom: 260upx;
line-height: 40upx;
text-align: center;
font-size: 28upx;
color: #9c9c9f;
}
.c-btn{
margin: 0 auto;
width: 280upx;
text-align: center;
height: 92upx;
line-height: 88upx;
font-size: 32upx;
border: 2upx solid $themeColor;
color: $themeColor;
border-radius: 46upx;
}
}
</style>

121
src/pages/write_off/operate/operate.vue
View File

@ -0,0 +1,121 @@
<template>
<view class="operate-container">
<view class="store-bar">
<text>当前门店</text>
<picker>
<view>
<input />
<image></image>
</view>
</picker>
</view>
<view class="c-scan-btn">
<image></image>
</view>
<view class="c-verification-code">
<view><input placeholder="输入订单验证码" /></view>
<view @click="confirmBtn">确认核销</view>
</view>
</view>
</template>
<script>
import util from '../../../utils/util'
export default {
methods: {
confirmBtn(){
let _timeSta = new Date().getTime();
if(_timeSta%3 == 0)return util.routeTo(`/pages/write_off/confirm_order/confirm_order`, 'nT');
if(_timeSta%2 < 1)return util.routeTo(`/pages/write_off/null/null`, 'nT');
return util.routeTo(`/pages/write_off/confirm_order/confirm_order`, 'nT');
}
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
page{
background-color: #f2f2f7;
}
.operate-container{
.store-bar{
margin-bottom: 24upx;
padding: 0 24upx;
height: 144upx;
background-color: #fff;
@include centerFlex(space-between);
>text{
margin-right: 20upx;
flex-shrink: 0;
font-size: 28upx;
color: #9C9C9F;
}
>picker{
flex-grow: 1;
}
view{
padding: 0 20upx;
height: 92upx;
border-radius: 10upx;
background: #f2f2f2;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 28upx;
color: #333;
}
>image{
flex-shrink: 0;
flex-grow: 0;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
}
.c-scan-btn{
margin: 0 auto 24upx;
width: 702upx;
height: 360upx;
border-radius: 10upx;
background-color: #fff;
@include centerFlex(center);
>image{
width: 172upx;
height: 172upx;
background-color: skyblue;
}
}
.c-verification-code{
padding: 40upx;
border-radius: 10upx;
background-color: #fff;
>view{
&:first-child{
margin-bottom: 30upx;
padding: 0 20upx;
height: 112upx;
border-radius: 10upx;
background-color: #f2f2f7;
>input{
height: 100%;
width: 100%;
font-size: 32upx;
color: #1a1a1a;
}
}
&+view{
height: 112upx;
text-align: center;
line-height: 112upx;
border-radius: 10upx;
font-size: 32upx;
color: #fff;
background-color: $themeColor;
}
}
}
}
</style>

188
src/pages/write_off/search_result/search_result.vue
View File

@ -0,0 +1,188 @@
<template>
<view class="search-result">
<view class="store-bar">
<text>当前门店</text>
<picker>
<view>
<input />
<image></image>
</view>
</picker>
</view>
<view class="r-timer-select">
<picker>
<view>
<text>核销日期：2020-08-27</text>
<image></image>
</view>
</picker>
<view>核销数量：30</view>
</view>
<view class="r-order-list">
<view class="l-item" v-for="i in 10" :key="i">
<view class="i-name">欧轩智能羽毛球馆(永泰店)</view>
<view class="i-lines">
<view>
<view>订单编号：20195175645666</view>
<view>（租场）</view>
</view>
<view>
<view>用户昵称：周大强</view>
</view>
<view>
<view>核销码： 200801108978</view>
</view>
<view>
<view>验证方式：扫码器验证(pad)</view>
</view>
<view>
<view>核销时间：2021-05-17 11:12:58</view>
</view>
</view>
</view>
</view>
<view class="r-bottom-btn"><view @click="toOperate">核销订单</view></view>
</view>
</template>
<script>
import util from '../../../utils/util'
export default {
methods: {
toOperate(){
util.routeTo(`/pages/write_off/operate/operate`, 'nT');
}
}
}
</script>
<style lang="scss">
@import "~style/public.scss";
page{
background-color: #f2f2f7;
}
.search-result{
padding-bottom: 132upx;
padding-bottom: calc( 132upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 132upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
.store-bar{
padding: 0 24upx;
height: 144upx;
background-color: #fff;
@include centerFlex(space-between);
>text{
margin-right: 20upx;
flex-shrink: 0;
font-size: 28upx;
color: #9C9C9F;
}
>picker{
flex-grow: 1;
}
view{
padding: 0 20upx;
height: 92upx;
border-radius: 10upx;
background: #f2f2f2;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 28upx;
color: #333;
}
>image{
flex-shrink: 0;
flex-grow: 0;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
}
.r-timer-select{
padding: 0 24upx;
margin-bottom: 10upx;
@include centerFlex(space-between);
picker{
flex-shrink: 0;
view{
padding: 24upx 0;
>text{
font-weight: 500;
font-size: 32upx;
}
>image{
margin-left: 16upx;
vertical-align: middle;
width: 22upx;
height: 22upx;
background-color: skyblue;
}
}
}
>view{
max-width: 40%;
text-align: right;
font-weight: 500;
font-size: 32upx;
@include textHide(1);
}
}
.r-order-list{
padding: 0 24upx;
.l-item{
margin-bottom: 24upx;
padding: 0 20upx;
border-radius: 10upx;
background-color: #fff;
.i-name{
height: 100upx;
line-height: 98upx;
border-bottom: 2upx solid #D8D8D8;
font-weight: 500;
font-size: 28upx;
color: #1a1a1a;
}
.i-lines{
padding-top: 8upx;
padding-bottom: 32upx;
>view{
display: flex;
>view{
min-width: 0;
line-height: 52upx;
font-size: 28upx;
color: #9c9c9f;
@include textHide(1);
&+view{
flex-shrink: 0;
color: $themeColor;
}
}
}
}
}
}
.r-bottom-btn{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 10upx 24upx;
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
background-color: #f2f2f7;
>view{
height: 112upx;
line-height: 112upx;
text-align: center;
font-size: 32upx;
border-radius: 10upx;
color: #fff;
background-color: $themeColor;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save