other_project/mallplus
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

2023-3-8

Browse Source 
完善功能
This commit is contained in:
guoxing
2023-03-08 17:57:45 +08:00
parent 12ef832fc1
commit 419533df1f
6 changed files with 953 additions and 841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
mallplusui-uniapp-app/pagesU/user/coupon.vue
View File

@@ -1,21 +1,26 @@
<template>
<view>
<view class="tabr" :style="{top:headerTop}">
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">可用({{couponValidList.length}})</view><view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已失效({{couponinvalidList.length}})</view>
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">可用({{couponValidList.length}})</view>
<view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已失效({{couponinvalidList.length}})
</view>
<view class="border" :class="typeClass"></view>
</view>
<view class="place" ></view>
<view class="place"></view>
<view class="list">
<!-- 优惠券列表 -->
<view class="sub-list valid" :class="subState">
<view class="tis" v-if="couponValidList.length==0">没有数据~</view>
<view class="row" v-for="(row,index) in couponValidList" :key="index" >
<view class="row" v-for="(row,index) in couponValidList" :key="index">
<!-- 删除按钮 -->
<view class="menu" @tap.stop="deleteCoupon(row.id,couponValidList)">
<view class="icon shanchu"></view>
</view>
<!-- content -->
<view class="carrier" :class="[typeClass=='valid'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
<view class="carrier"
:class="[typeClass=='valid'?theIndex==index?'open':oldIndex==index?'close':'':'']"
@touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)"
@touchend="touchEnd(index,$event)">
<view class="left">
<view class="title">
{{row.note}}
@@ -51,13 +56,16 @@
</view>
<view class="sub-list invalid" :class="subState">
<view class="tis" v-if="couponinvalidList.length==0">没有数据~</view>
<view class="row" v-for="(row,index) in couponinvalidList" :key="index" >
<view class="row" v-for="(row,index) in couponinvalidList" :key="index">
<!-- 删除按钮 -->
<view class="menu" @tap.stop="deleteCoupon(row.id,couponinvalidList)">
<view class="icon shanchu"></view>
</view>
<!-- content -->
<view class="carrier" :class="[typeClass=='invalid'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
<view class="carrier"
:class="[typeClass=='invalid'?theIndex==index?'open':oldIndex==index?'close':'':'']"
@touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)"
@touchend="touchEnd(index,$event)">
<view class="left">
<view class="title">
{{row.note}}
@@ -100,159 +108,161 @@
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import eonfox from '@/components/eonfox/eonfox.js';
import fns from '@/components/eonfox/fns.js';
import { formatDate } from '@/common/date';
import {
formatDate
} from '@/common/date';
var ef = new eonfox();
export default {
data() {
return {
couponValidList:[
couponValidList: [
// {id:1,title:"日常用品立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"满50使用"},
// {id:2,title:"家用电器立减100元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"100",criteria:"满500使用"},
// {id:3,title:"全场立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"无门槛"},
// {id:4,title:"全场立减50元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"50",criteria:"满1000使用"}
],
couponinvalidList:[
couponinvalidList: [
// {id:1,title:"日常用品立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"满50使用"},
// {id:2,title:"家用电器立减100元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"100",criteria:"满500使用"},
// {id:3,title:"全场立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"无门槛"},
// {id:4,title:"全场立减50元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"50",criteria:"满1000使用"}
],
headerTop:0,
headerTop: 0,
//控制滑动效果
typeClass:'valid',
subState:'',
theIndex:null,
oldIndex:null,
isStop:false
typeClass: 'valid',
subState: '',
theIndex: null,
oldIndex: null,
isStop: false
}
},
onPageScroll(e){
onPageScroll(e) {
},
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
onPullDownRefresh() {
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
onLoad() {
this.getData()
//兼容H5下排序栏位置
// #ifdef H5
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
let Timer = setInterval(()=>{
let uniHead = document.getElementsByTagName('uni-page-head');
if(uniHead.length>0){
this.headerTop = uniHead[0].offsetHeight+'px';
clearInterval(Timer);//清除定时器
}
},1);
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
let Timer = setInterval(() => {
let uniHead = document.getElementsByTagName('uni-page-head');
if (uniHead.length > 0) {
this.headerTop = uniHead[0].offsetHeight + 'px';
clearInterval(Timer); //清除定时器
}
}, 1);
// #endif
},
filters: {
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
},
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
},
methods: {
goUse(){
goUse() {
uni.switchTab({
url:'/pages/index/index'
url: '/pages/index/index'
})
},
async getData(){
let params = { };
let data = await Api.apiCall('get', Api.index.listMemberCoupon, params);
let viewList = data;
viewList.forEach(item => {
if(item.useStatus==0){
this.couponValidList.push(item);
}else{
this.couponinvalidList.push(item);
}
});
async getData() {
let params = {};
let data = await Api.apiCall('get', Api.index.listMemberCoupon, params);
let viewList = data;
viewList.forEach(item => {
if (item.useStatus == 0) {
this.couponValidList.push(item);
} else {
this.couponinvalidList.push(item);
}
});
},
switchType(type){
switchType(type) {
// console.log(type)
if(this.typeClass==type){
return ;
if (this.typeClass == type) {
return;
}
uni.pageScrollTo({
scrollTop:0,
duration:0
scrollTop: 0,
duration: 0
})
this.typeClass = type;
this.subState = this.typeClass==''?'':'show'+type;
setTimeout(()=>{
this.subState = this.typeClass == '' ? '' : 'show' + type;
setTimeout(() => {
this.oldIndex = null;
this.theIndex = null;
this.subState = this.typeClass=='valid'?'':this.subState;
},200)
this.subState = this.typeClass == 'valid' ? '' : this.subState;
}, 200)
},
//控制左滑删除效果-begin
touchStart(index,event){
touchStart(index, event) {
//多点触控不触发
if(event.touches.length>1){
if (event.touches.length > 1) {
this.isStop = true;
return ;
return;
}
this.oldIndex = this.theIndex;
this.theIndex = null;
//初始坐标
this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
},
touchMove(index,event){
touchMove(index, event) {
//多点触控不触发
if(event.touches.length>1){
if (event.touches.length > 1) {
this.isStop = true;
return ;
return;
}
let moveX = event.touches[0].pageX - this.initXY[0];
let moveY = event.touches[0].pageY - this.initXY[1];
if(this.isStop||Math.abs(moveX)<5){
return ;
if (this.isStop || Math.abs(moveX) < 5) {
return;
}
if (Math.abs(moveY) > Math.abs(moveX)){
if (Math.abs(moveY) > Math.abs(moveX)) {
// 竖向滑动-不触发左滑效果
this.isStop = true;
return;
}
if(moveX<0){
if (moveX < 0) {
this.theIndex = index;
this.isStop = true;
}else if(moveX>0){
if(this.theIndex!=null&&this.oldIndex==this.theIndex){
} else if (moveX > 0) {
if (this.theIndex != null && this.oldIndex == this.theIndex) {
this.oldIndex = index;
this.theIndex = null;
this.isStop = true;
setTimeout(()=>{
setTimeout(() => {
this.oldIndex = null;
},150)
}, 150)
}
}
},
touchEnd(index,$event){
touchEnd(index, $event) {
//解除禁止触发状态
this.isStop = false;
},
//删除商品
deleteCoupon(id,List){
deleteCoupon(id, List) {
let len = List.length;
for(let i=0;i<len;i++){
if(id==List[i].id){
for (let i = 0; i < len; i++) {
if (id == List[i].id) {
List.splice(i, 1);
break;
}
@@ -270,20 +280,27 @@ import Api from '@/common/api';
}
</script>
<style lang="scss">
view{
view {
display: flex;
flex-wrap: wrap;
}
page{position: relative;background-color: #f5f5f5;}
.hidden{
page {
position: relative;
background-color: #f5f5f5;
}
.hidden {
display: none !important;
}
.place{
.place {
width: 100%;
height: 95upx;
}
.tabr{
.tabr {
background-color: #fff;
/* #ifdef H5 || MP-WEIXIN*/
width: 100% !important;
@@ -295,7 +312,8 @@ import Api from '@/common/api';
position: fixed;
top: 0;
z-index: 10;
view{
view {
width: 50%;
height: 90upx;
justify-content: center;
@@ -303,55 +321,79 @@ import Api from '@/common/api';
font-size: 32upx;
color: #999;
}
.on{
.on {
color: $uni-color-success;
}
.border{
.border {
height: 4upx;
background-color: $uni-color-success;
transition: all .3s ease-out;
&.invalid{
transform: translate3d(100%,0,0);
&.invalid {
transform: translate3d(100%, 0, 0);
}
}
}
.list{
.list {
width: 100%;
display: block;
position: relative;
}
@keyframes showValid {
0% {transform: translateX(-100%);}100% {transform: translateX(0);}
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes showInvalid {
0% {transform: translateX(0);}100% {transform: translateX(-100%);}
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.sub-list{
&.invalid{
.sub-list {
&.invalid {
position: absolute;
top: 0;
left:100%;
left: 100%;
display: none;
}
&.showvalid{
&.showvalid {
display: flex;
animation: showValid 0.20s linear both;
}
&.showinvalid{
&.showinvalid {
display: flex;
animation: showInvalid 0.20s linear both;
}
width: 100%;
padding: 20upx 0 120upx 0;
.tis{
.tis {
width: 100%;
height: 60upx;
justify-content: center;
align-items: center;
font-size: 32upx;
}
.row{
.row {
width: 92%;
height: 24vw;
margin: 20upx auto 10upx auto;
@@ -362,11 +404,13 @@ import Api from '@/common/api';
overflow: hidden;
z-index: 4;
border: 0;
.menu{
.icon{
.menu {
.icon {
color: #fff;
font-size:50upx;
font-size: 50upx;
}
position: absolute;
width: 28%;
height: 100%;
@@ -377,19 +421,36 @@ import Api from '@/common/api';
color: #fff;
z-index: 2;
}
.carrier{
.carrier {
@keyframes showMenu {
0% {transform: translateX(0);}100% {transform: translateX(-28%);}
0% {
transform: translateX(0);
}
100% {
transform: translateX(-28%);
}
}
@keyframes closeMenu {
0% {transform: translateX(-28%);}100% {transform: translateX(0);}
0% {
transform: translateX(-28%);
}
100% {
transform: translateX(0);
}
}
&.open{
&.open {
animation: showMenu 0.25s linear both;
}
&.close{
&.close {
animation: closeMenu 0.15s linear both;
}
background-color: #fff;
position: absolute;
width: 100%;
@@ -397,22 +458,28 @@ import Api from '@/common/api';
height: 100%;
z-index: 3;
flex-wrap: nowrap;
.left{
.left {
width: 100%;
.title{
.title {
padding-top: 3vw;
width: 90%;
margin: 0 5%;
font-size: 36upx;
}
.term{
.term {
width: 90%;
margin: 0 5%;
font-size: 26upx;
color: #999;
}
position: relative;
.gap-top,.gap-bottom{
.gap-top,
.gap-bottom {
position: absolute;
width: 20upx;
height: 20upx;
@@ -420,52 +487,68 @@ import Api from '@/common/api';
border-radius: 100%;
background-color: #f5f5f5;
}
.gap-top{
.gap-top {
top: -10upx;
}
.gap-bottom{
.gap-bottom {
bottom: -10upx;
}
.shixiao{
.shixiao {
position: absolute;
right: 20upx;
font-size: 150upx;
z-index: 6;
color: rgba(153,153,153,0.2)
color: rgba(153, 153, 153, 0.2)
}
}
.right{
.right {
flex-shrink: 0;
width: 28%;
color: #fff;
background:linear-gradient(to right,#ec625c,#ee827f);
&.invalid{
background:linear-gradient(to right,#aaa,#999);
.use{
background: linear-gradient(to right, #ec625c, #ee827f);
&.invalid {
background: linear-gradient(to right, #aaa, #999);
.use {
color: #aaa;
}
}
justify-content: center;
.ticket,.criteria{width: 100%;}
.ticket{
.ticket,
.criteria {
width: 100%;
}
.ticket {
padding-top: 1vw;
justify-content: center;
align-items: baseline;
height: 6vw;
.num{
.num {
font-size: 42upx;
font-weight: 600;
}
.unit{
.unit {
font-size: 24upx;
}
}
.criteria{
.criteria {
justify-content: center;
font-size: 28upx;
}
.use{
.use {
width: 50%;
height: 40upx;
justify-content: center;
@@ -478,6 +561,7 @@ import Api from '@/common/api';
}
}
}
/*
<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
<view class="left">
@@ -509,5 +593,4 @@ import Api from '@/common/api';
* */
}
}
</style>

848
mallplusui-uniapp-app/pagesU/user/deposit.vue
View File

File diff suppressed because it is too large Load Diff