268 lines
5.4 KiB
Vue
268 lines
5.4 KiB
Vue
<template>
|
|
<view class="s_page">
|
|
<custom :isBack="false">
|
|
<template v-slot:left>
|
|
<view class="custom_icon left" @tap="windowHandler">
|
|
<image src="/static/img/icon_01.png" mode=""></image>
|
|
</view>
|
|
</template>
|
|
</custom>
|
|
<view class="view_content">
|
|
<view class="txt_box">
|
|
<view class="txt">{{ $t(`核销积分比例(每单上限)`) }}:10%(100)</view>
|
|
<view class="txt">{{ $t(`返现积分比例(每单上限)`) }}:10%(100)</view>
|
|
</view>
|
|
<view class="step_two public_box">
|
|
<view class="item_box">
|
|
<view class="box_title">{{ $t('店铺ID·名称') }}/店舗ID·店舗名</view>
|
|
<view class="box_fun flex"><view class="txt ts"><view>No.123</view><view>asd</view></view></view>
|
|
</view>
|
|
<view class="item_box">
|
|
<view class="box_title">{{ $t('消费金额') }}/消费金額</view>
|
|
<view class="box_fun flex"><view class="txt flex"><input v-model="form_data.money.value" type="number" /></view></view>
|
|
</view>
|
|
</view>
|
|
<view class="next_btn_box">
|
|
<view class="next_btn flex_abc" :class="{'active': form_data.money.value}" @tap="scanCodeHandle()">扫会员码</view>
|
|
</view>
|
|
</view>
|
|
<view class="window_box" v-show="window_flag">
|
|
<view class="window_bgc" @tap="windowHandler"></view>
|
|
<view class="window_content" :class="{'active': animation_flag,'close': !animation_flag}"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import custom from '@/components/custom/custom'
|
|
export default {
|
|
components: {
|
|
custom
|
|
},
|
|
data() {
|
|
return {
|
|
window_flag: false,
|
|
animation_flag: false,
|
|
form_data: {
|
|
money: {
|
|
value: '',
|
|
tips_key: '',
|
|
process_type: 2
|
|
}
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
windowHandler() {
|
|
let flag = !this.window_flag
|
|
if(flag) {
|
|
this.window_flag = flag
|
|
this.animation_flag = flag
|
|
}else {
|
|
this.animation_flag = flag
|
|
setTimeout(() => {
|
|
this.window_flag = flag
|
|
},1000)
|
|
}
|
|
},
|
|
gotoWhere(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
},
|
|
scanCodeHandle() {
|
|
// this.gotoWhere(`/pages/verification/stepOne`)
|
|
// 允许从相机和相册扫码
|
|
uni.scanCode({
|
|
success:(res) => {
|
|
let customer_info = res.result.split('-')
|
|
uni.setStorageSync('customer_info',customer_info)
|
|
this.gotoWhere(`/pages/verification/stepOne`)
|
|
// let rex = /^(\/page)/
|
|
// if(rex.test(res.result)) {
|
|
// this.gotoWhere(res.result)
|
|
// }
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page {
|
|
background: linear-gradient(rgba(160,204,87, .2) 0%, rgba(223,226,0, .2) 100%);
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.s_page {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
height: auto;
|
|
}
|
|
.custom_icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
&.left {
|
|
margin-left: 16rpx;
|
|
}
|
|
&.right {
|
|
margin-right: 32rpx;
|
|
}
|
|
}
|
|
.txt_box {
|
|
.txt {
|
|
font-size: 28rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
.window_box {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
.window_bgc {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
.window_content {
|
|
width: 320rpx;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -320rpx;
|
|
background-color: #FFFFFF;
|
|
transition: left 1s;
|
|
&.active {
|
|
animation: oneframe 1s forwards;
|
|
}
|
|
&.close {
|
|
animation: twoeframe 1s forwards;
|
|
}
|
|
}
|
|
}
|
|
@keyframes oneframe {
|
|
0% {
|
|
}
|
|
100% {
|
|
left: 0;
|
|
}
|
|
}
|
|
@keyframes twoeframe {
|
|
0% {
|
|
left: 0;
|
|
}
|
|
100% {
|
|
left: -320rpx;
|
|
}
|
|
}
|
|
.public_box {
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
.view_content {
|
|
padding-top: 40rpx;
|
|
padding-bottom: 150rpx;
|
|
}
|
|
.step_two {
|
|
.item_box {
|
|
width: 100%;
|
|
margin-bottom: 40rpx;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.box_title {
|
|
font-size: 28rpx;
|
|
line-height: 38rpx;
|
|
color: $them_color_two;
|
|
font-weight: bold;
|
|
}
|
|
.box_fun {
|
|
width: 100%;
|
|
min-height: 80rpx;
|
|
|
|
.change_btn_box {
|
|
flex-shrink: 0;
|
|
margin-left: 20rpx;
|
|
.chang_btn {
|
|
height: 54rpx;
|
|
width: 54rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
image {
|
|
height: 35%;
|
|
width: 35%;
|
|
display: block;
|
|
}
|
|
&.del {
|
|
background-color: $them_color_two;
|
|
}
|
|
&.add {
|
|
background-color: $them_color_two;
|
|
}
|
|
}
|
|
}
|
|
.txt {
|
|
flex: 1;
|
|
height: 100%;
|
|
padding: 16rpx 0 30rpx;
|
|
box-sizing: border-box;
|
|
align-items: flex-end;
|
|
border-bottom: 1px solid #E1E0E8;
|
|
>view,
|
|
input{
|
|
color: #000000;
|
|
font-size: 48rpx;
|
|
line-height: 48rpx;
|
|
font-weight: bold;
|
|
}
|
|
&.ts {
|
|
>view {
|
|
font-size: 28rpx !important;
|
|
line-height: 38rpx !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.next_btn_box {
|
|
// width: 100%;
|
|
// position: fixed;
|
|
// left: 0;
|
|
// bottom: 0;
|
|
// background-color: #FFFFFF;
|
|
// padding: 20rpx 0;
|
|
}
|
|
.next_btn {
|
|
margin: 0 auto;
|
|
width: 92%;
|
|
height: 82rpx;
|
|
border-radius: 41rpx;
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
font-weight: bold;
|
|
background: #F2F2F2;
|
|
color: #ACACAC;
|
|
&.active {
|
|
background: linear-gradient(90deg, #7EB96A 0%, #D3D722 100%);
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style>
|