01.17(卡券核销模块
This commit is contained in:
Hong
@@ -29,7 +29,7 @@ export const carShopUserMenuList = [{
|
||||
|
||||
export const repairUserMenuList = [{
|
||||
text: '核销',
|
||||
path: '/pages/carShop/mine/store/store',
|
||||
path: '/pages/repair/user/verification/verification',
|
||||
image:'../../../static/images/repair/user/affirm.png',
|
||||
type:1
|
||||
}, {
|
||||
|
||||
26
pages.json
26
pages.json
@@ -444,6 +444,32 @@
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/repair/user/verification/verification",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "核销验券",
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/repair/user/verification/verification_list",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "核销码",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/repair/user/verification/verification_history",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "历史记录",
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
112
pages/repair/user/verification/verification.vue
Normal file
112
pages/repair/user/verification/verification.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar title="验券" :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)" :titleStyle="{color:'#fff'}">
|
||||
<view class="u-nav-slot" slot="left">
|
||||
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<image class="header-bj" src="@/static/images/repair/user/verification.png" mode=""></image>
|
||||
<view class="voucher-inspection">
|
||||
<image class="" src="@/static/images/repair/user/voucher_inspection.png" mode=""></image>
|
||||
<view class="voucher-inspection-input">
|
||||
<u-input v-model="verificationCode" placeholder="请输入券码" :customStyle="{height:'100rpx'}">
|
||||
<template slot="suffix">
|
||||
<image @click="codeScannerFn" class="voucher-inspection-sweep"
|
||||
src="@/static/images/repair/user/sweep.png" mode="">
|
||||
</image>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
<u-button type="primary" text="提交" color="#13AFA8"
|
||||
:customStyle='{width:"544rpx",height: "80rpx",marginTop: "112rpx",fontSize: "28rpx",fontWeight: 500,borderRadius: "16rpx",}'
|
||||
@click="submitFn"></u-button>
|
||||
</view>
|
||||
<view class="history-list flex align-center justify-center" @click="navHistoryListFn">
|
||||
历史记录
|
||||
<image style="width: 10rpx;height: 20rpx;margin-left: 8rpx;" src="/static/images/icon/arrow-right.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
verificationCode: '123123'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitFn() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/repair/user/verification/verification_list"
|
||||
})
|
||||
},
|
||||
//历史记录
|
||||
navHistoryListFn() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/repair/user/verification/verification_history'
|
||||
})
|
||||
},
|
||||
//扫码
|
||||
codeScannerFn() {
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
success: (res) => {
|
||||
this.verificationCode = res.result
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
position: fixed;
|
||||
bottom: 68rpx;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.header-bj {
|
||||
width: 750rpx;
|
||||
height: 454rpx;
|
||||
}
|
||||
|
||||
.voucher-inspection {
|
||||
width: 666rpx;
|
||||
height: 572rpx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
left: 46rpx;
|
||||
top: - 214rpx;
|
||||
padding: 56rpx 50rpx 80rpx 50rpx;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 562rpx;
|
||||
height: 115rpx;
|
||||
}
|
||||
|
||||
.voucher-inspection-input {
|
||||
display: inline-block;
|
||||
width: 542rpx;
|
||||
height: 100rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
.voucher-inspection-sweep {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
pages/repair/user/verification/verification_history.vue
Normal file
110
pages/repair/user/verification/verification_history.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
||||
<view slot="top">
|
||||
<u-navbar title="历史记录" safeAreaInsetTop placeholder bgColor="#F7F7F7" :titleStyle="{color:'#000'}">
|
||||
<view class="u-nav-slot" slot="left">
|
||||
<u-icon name="arrow-left" color="#000" size="19"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="detail flex justify-between">
|
||||
<view>核销明细</view>
|
||||
<view class="flex align-center detail-time justify-end" @click="show=true">
|
||||
<view>{{timeData}} </view>
|
||||
<image src="@/static/images/carshop/user/arrows_bott.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="history-list">
|
||||
<view class="history-list-cont" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="flex justify-between align-center">
|
||||
<view class="f-24 c999">
|
||||
<view class="f-28 c111">某某券</view>
|
||||
<view>券码信息：123456</view>
|
||||
<view>核销时间：2023-06-21 12:33:00</view>
|
||||
</view>
|
||||
<view class="f-28 c-primary">核销成功</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="year-month" @confirm="confirm"
|
||||
@cancel="show=false" @close="show=false" closeOnClickOverlay :formatter="formatter"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
parseTime
|
||||
} from "@/utils/index.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
show: false,
|
||||
value1: Number(new Date()),
|
||||
timeData: parseTime(Number(new Date()), '{y}-{m}')
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
queryList(pageNo, pageSize) {
|
||||
this.$refs.paging.complete([{}, {}, {}])
|
||||
return
|
||||
garageList({
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
}).catch(err => {
|
||||
this.$refs.paging.complete(false);
|
||||
})
|
||||
},
|
||||
//选择时间
|
||||
confirm(e) {
|
||||
this.timeData = parseTime(e.value, '{y}-{m}')
|
||||
console.log(parseTime(e.value, '{y}-{m}'));
|
||||
this.show = false
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
return value
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
padding: 0 48rpx;
|
||||
|
||||
.history-list-cont {
|
||||
padding: 32rpx 0 24rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
padding: 0 0 26rpx 0;
|
||||
margin: 48rpx 48rpx 0 48rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.detail-time {
|
||||
width: 200rpx;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
pages/repair/user/verification/verification_list.vue
Normal file
143
pages/repair/user/verification/verification_list.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="veri-okk" v-if="stateFlag">
|
||||
<image src="@/static/images/repair/user/veri_okk.png" mode=""></image>
|
||||
<view class="f-26 c555 veri-okk-text">已完成核销！</view>
|
||||
<u-button type="primary" text="返回首页" color="#13AFA8"
|
||||
:customStyle='{width:"264rpx",height: "80rpx",fontSize: "28rpx",fontWeight: 500,borderRadius: "40rpx",marginTop:"96rpx"}'
|
||||
@click="navBackFn"></u-button>
|
||||
</view>
|
||||
<view class="data-cont" v-else>
|
||||
<image v-if="isOkFlag" class="data-cont-verification-ok"
|
||||
src="@/static/images/repair/user/verification_ok.png" mode=""></image>
|
||||
<view class="data-cont-header flex align-center">
|
||||
<image class="data-cont-shop-image" src="@/static/favicon.ico" mode=""></image>
|
||||
<text>星桔EV(祥园路店)</text>
|
||||
</view>
|
||||
<view class="data-cont-waist flex">
|
||||
<image src="@/static/htz-image-upload/play.png" mode=""></image>
|
||||
<view class="data-cont-waist-info flex-column justify-between">
|
||||
<view class="f-30 c222">某某券</view>
|
||||
<view class="flex justify-between">
|
||||
<view class="c999 f-24">描述</view>
|
||||
<view class="c666 f-30">X 1</view>
|
||||
</view>
|
||||
<view class="f-38 c-danger">¥198.00 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="c999 f-24 ticket-number">券码信息：<text class="c111 f-30"
|
||||
:class="[isOkFlag?'is-ok-flag':'']">123456</text></view>
|
||||
<view class="data-cont-buttom flex justify-end" v-if="!isOkFlag">
|
||||
<view>
|
||||
<u-button type="primary" text="核销" color="#13AFA8"
|
||||
:customStyle='{width:"266rpx",height: "80rpx",fontSize: "28rpx",fontWeight: 500,borderRadius: "40rpx",}'
|
||||
@click="submitVerificationFn"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isOkFlag: false,
|
||||
stateFlag: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//提交核销
|
||||
submitVerificationFn() {
|
||||
this.stateFlag = true
|
||||
},
|
||||
//返回首页
|
||||
navBackFn() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/repair/user/verification/verification'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.veri-okk {
|
||||
text-align: center;
|
||||
|
||||
.veri-okk-text {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
margin-top: 136rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.data-cont {
|
||||
margin: 24rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
|
||||
.data-cont-verification-ok {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 16rpx;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
|
||||
.data-cont-buttom {
|
||||
width: 100%;
|
||||
padding: 0 0 32rpx 0;
|
||||
}
|
||||
|
||||
.ticket-number {
|
||||
margin: 16rpx 0 20rpx 0;
|
||||
|
||||
.is-ok-flag {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.data-cont-waist {
|
||||
border-bottom: 1rpx solid #eee;
|
||||
padding: 16rpx 0;
|
||||
|
||||
.data-cont-waist-info {
|
||||
width: calc(100% - 160rpx);
|
||||
|
||||
}
|
||||
|
||||
image {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-right: 16rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.data-cont-header {
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.data-cont-shop-image {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
82
pages/repair/user/verification/verification_ok.vue
Normal file
82
pages/repair/user/verification/verification_ok.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar title="验券" :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)" :titleStyle="{color:'#fff'}">
|
||||
<view class="u-nav-slot" slot="left">
|
||||
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<image class="header-bj" src="@/static/images/repair/user/verification.png" mode=""></image>
|
||||
<view class="voucher-inspection">
|
||||
<image class="" src="@/static/images/repair/user/voucher_inspection.png" mode=""></image>
|
||||
<view class="voucher-inspection-input">
|
||||
<u-input placeholder="请输入券码" :customStyle="{height:'100rpx'}">
|
||||
<template slot="suffix">
|
||||
<image class="voucher-inspection-sweep" src="@/static/images/repair/user/sweep.png" mode="">
|
||||
</image>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
<u-button type="primary" text="提交" color="#13AFA8"
|
||||
:customStyle='{width:"544rpx",height: "80rpx",marginTop: "112rpx",fontSize: "28rpx",fontWeight: 500,borderRadius: "16rpx",}'
|
||||
@click="submitFn"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
submitFn(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/repair/user/verification/verification_list"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.header-bj {
|
||||
width: 750rpx;
|
||||
height: 454rpx;
|
||||
}
|
||||
|
||||
.voucher-inspection {
|
||||
width: 666rpx;
|
||||
height: 572rpx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
left: 46rpx;
|
||||
top: - 214rpx;
|
||||
padding: 56rpx 50rpx 80rpx 50rpx;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 562rpx;
|
||||
height: 115rpx;
|
||||
}
|
||||
|
||||
.voucher-inspection-input {
|
||||
display: inline-block;
|
||||
width: 542rpx;
|
||||
height: 100rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
.voucher-inspection-sweep {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/repair/user/sweep.png
Normal file
BIN
static/images/repair/user/sweep.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 672 B |
BIN
static/images/repair/user/veri_okk.png
Normal file
BIN
static/images/repair/user/veri_okk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
static/images/repair/user/verification.png
Normal file
BIN
static/images/repair/user/verification.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 809 KiB |
BIN
static/images/repair/user/verification_ok.png
Normal file
BIN
static/images/repair/user/verification_ok.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
static/images/repair/user/voucher_inspection.png
Normal file
BIN
static/images/repair/user/voucher_inspection.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -86,6 +86,9 @@ image {
|
||||
.c444 {
|
||||
color: #444444;
|
||||
}
|
||||
.c555 {
|
||||
color: #555555;
|
||||
}
|
||||
.c999 {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user