修改搜索问题,优化签到页面

master
lemon橪 2021-09-03 09:48:35 +08:00
parent 6ca01d2c71
commit 90d9fa9671
3 changed files with 64 additions and 57 deletions

View File

@ -2,8 +2,8 @@
"name" : "lili商城", "name" : "lili商城",
"appid" : "__UNI__C100675", "appid" : "__UNI__C100675",
"description" : "", "description" : "",
"versionName" : "4.0.34", "versionName" : "4.0.40",
"versionCode" : 4000034, "versionCode" : 4000040,
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
"compatible" : { "compatible" : {

View File

@ -1,26 +1,30 @@
<template> <template>
<view class="sign-in"> <view class="sign-in">
<view class="signin-btn-con"> <view class="date-card">
<div class="box">
<div class="circle-box"> <div class="circle-box">
<div class="cricle" @click="signIn()"> <div class="cricle" @click="signIn()">
<span v-if="!ifSign" :class="{ active: signFlag || ifSign }"></span> <span v-if="!ifSign" :class="{ active: signFlag || ifSign }"></span>
<span v-else :class="{ active: signFlag || ifSign }" :style="ifSign ? 'transform: rotateY(0deg);' : ''">已签</span> <span v-else :class="{ active: signFlag || ifSign }"
:style="ifSign ? 'transform: rotateY(0deg);' : ''">已签</span>
</div> </div>
</div> </div>
<text class="tips">坚持每天连续签到可以获多重奖励哦</text> <text class="tips">坚持每天连续签到可以获多重奖励哦</text>
</div>
</view> </view>
<div class="date-card"> <div class="date-card">
<view class="date-con"> <view class="date-con">
<view class="date-tit"> <view class="date-tit">
<u-row style="width: 100%; justify-content: center;"> <div class="current-month">
<div style="text-align: center; " class="text">{{ currentMonth }} {{ currentYear }}</div> <div class="day">每日记录<span> ({{ currentMonth }})</span></div>
</u-row> </div>
</view> </view>
<view class="week"> <view class="week">
<text v-for="item in weekArr" :key="item.id">{{ item }}</text> <text v-for="item in weekArr" :key="item.id">{{ item }}</text>
</view> </view>
<view class="date" v-for="obj in dataObj" :key="obj.id"> <view class="date" v-for="obj in dataObj" :key="obj.id">
<view class="item" v-for="item in obj" :key="item.id" :class="item == '' ? 'hide' : ''" :animation="item == currentDay ? animationData : ''"> <view class="item" v-for="item in obj" :key="item.id" :class="item == '' ? 'hide' : ''"
:animation="item == currentDay ? animationData : ''">
<view class="just" :class="signArr.indexOf(item) != -1 ? 'active' : ''"> <view class="just" :class="signArr.indexOf(item) != -1 ? 'active' : ''">
<view class="top">{{ item }} </view> <view class="top">{{ item }} </view>
<view class="bottom"> <view class="bottom">
@ -36,7 +40,7 @@
"> ">
<view class="top">{{ item }}</view> <view class="top">{{ item }}</view>
<view class="bottom"> <view class="bottom">
<u-icon name="checkmark" color="#ff9f28"></u-icon> <u-icon name="checkmark" :color="aiderLightColor"></u-icon>
</view> </view>
</view> </view>
</view> </view>
@ -50,7 +54,7 @@
<text class="close" @click="close">×</text> <text class="close" @click="close">×</text>
</view> </view>
<view class="mask-con"> <view class="mask-con">
<u-icon size="120" style="margin: 50rpx 0" color="#ff9f28" name="checkmark"></u-icon> <u-icon size="120" style="margin: 50rpx 0" :color="aiderLightColor" name="checkmark"></u-icon>
<text class="text">连续签到可获得额外奖励哦</text> <text class="text">连续签到可获得额外奖励哦</text>
</view> </view>
</view> </view>
@ -62,7 +66,7 @@ import { sign, signTime } from "@/api/point.js";
export default { export default {
data() { data() {
return { return {
aiderLightColor:this.$aiderLightColor,
signFlag: false, signFlag: false,
animationData: {}, animationData: {},
maskFlag: false, // maskFlag: false, //
@ -105,7 +109,6 @@ export default {
this.getDate(); this.getDate();
}, },
methods: { methods: {
/** /**
* 补0 * 补0
*/ */
@ -205,7 +208,6 @@ export default {
Number(itemVal[1]) === Number(this.currentMonthIndex) Number(itemVal[1]) === Number(this.currentMonthIndex)
) { ) {
this.signArr.push(Number(itemVal[2])); this.signArr.push(Number(itemVal[2]));
} }
if ( if (
Number(itemVal[0]) === Number(date.getFullYear()) && Number(itemVal[0]) === Number(date.getFullYear()) &&
@ -285,70 +287,79 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
page {
background: #f7f7f7;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.date-card { .date-card {
padding: 0 40rpx; padding: 0 32rpx;
margin: 32rpx 0;
box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
} }
.tips { .tips {
margin-top: 34rpx; margin-top: 54rpx;
color: #999;
font-size: 24rpx;
letter-spacing: 1rpx;
} }
.circle-box { .circle-box {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 50%; border-radius: 50%;
margin-top: 60rpx; background: $aider-light-color;
background: #ff9f28; box-shadow: 0 4rpx 24rpx 0 rgba($color: $aider-light-color, $alpha: 1);
display: flex; display: flex;
justify-content: center; //X justify-content: center; //X
align-items: center; // Y align-items: center; // Y
} }
.cricle { .cricle {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
border-radius: 50%; border-radius: 50%;
background: #ff9f28; background: $aider-light-color;
text-align: center; text-align: center;
line-height: 160rpx; line-height: 160rpx;
color: #fff; color: #fff;
font-size: 40rpx; font-size: 40rpx;
} }
.current-month {
page {
background: #fff;
}
.sign-in {
color: #333;
.signin-btn-con {
width: 100%; width: 100%;
height: 670rpx; margin: 20rpx 0;
background-image: linear-gradient(180deg, #ff6b35, #ff9f28, #ffcc03); }
.box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text { padding:64rpx 32rpx;
color: #fff; background: #fff;
font-size: 28rpx; border-radius: 20rpx;
font-weight: 400; }
} .sign-in {
} color: #333;
.date-con { .date-con {
background: #fff; background: #fff;
min-height: 730rpx; min-height: 730rpx;
border-radius: 0.8em; border-radius: 20rpx;
border: 1px solid #ededed;
padding: 0 28rpx; padding: 0 28rpx;
transform: translateY(-320rpx);
box-shadow: (1px 3px 5px rgba(0, 0, 0, 0.2));
} }
.day {
font-size: 36rpx;
> span {
font-size: 30rpx;
color: #999;
margin-left: 20rpx;
}
}
.date-tit { .date-tit {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 30rpx 0; margin: 0 0 30rpx 0;
} }
.week { .week {
@ -419,7 +430,7 @@ page {
} }
.top { .top {
color: #ff9f28; color: $aider-light-color;
} }
} }
@ -461,7 +472,7 @@ page {
width: 540rpx; width: 540rpx;
height: 130rpx; height: 130rpx;
line-height: 130rpx; line-height: 130rpx;
background: #ff9f28; background: $aider-light-color;
color: #fff; color: #fff;
font-size: 40rpx; font-size: 40rpx;
font-weight: 500; font-weight: 500;

View File

@ -376,12 +376,7 @@ export default {
*/ */
keyword(val) { keyword(val) {
if (val) { if (val) {
let identical = this.hotKeywordList.some((item) => { if (val) {
return item == val;
});
if (!identical) {
this.defaultKeyword = "请输入搜索商品";
} else {
this.defaultKeyword = val; this.defaultKeyword = val;
} }
} else { } else {
@ -741,11 +736,12 @@ export default {
keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || ""; keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || "";
} }
this.defaultKeyword == "请输入搜索商品" ? (keyword = "") : ""; this.defaultKeyword == "请输入搜索商品" ? (keyword = "") : "";
this.keyword = keyword; // this.keyword = keyword;
keyword ? (this.keyword = keyword) : "";
this.saveKeyword(keyword); // this.saveKeyword(keyword); //
this.isShowSeachGoods = true; this.isShowSeachGoods = true;
this.$refs.mSearch.isShowSeachGoods = true; this.$refs.mSearch.isShowSeachGoods = true;
this.params.keyword = keyword; this.params.keyword = this.keyword;
this.params.pageNumber = 1; this.params.pageNumber = 1;
this.$set(this.sortParams, "keyword", keyword); this.$set(this.sortParams, "keyword", keyword);
this.loadData("refresh", 1); this.loadData("refresh", 1);