初始化
This commit is contained in:
267
pages/index/index - 副本.vue
Normal file
267
pages/index/index - 副本.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user