完善首页热榜推荐和今日上新

This commit is contained in:
魏啾
2024-05-09 15:29:29 +08:00
parent e1498a50f6
commit be2d4e1d39
6 changed files with 327 additions and 145 deletions

View File

@@ -93,7 +93,7 @@ export default {
return uni.api.get("/order/findWiningUser", data);
},
indexlist(data) { //商品列表(今日上新/热榜/咖啡饮品)
return uni.api.get("/distirict/productCate", data);
return uni.api.get("/distirict/productCate", data,false);
},
productproductInfo(data) { //商品详情
return uni.api.get("/product/productInfo", data);
@@ -101,4 +101,7 @@ export default {
distirictcomShopList(data) { //通用门店列表
return uni.api.get("/distirict/comShopList", data);
},
loginOut(data) { //退出登录
return uni.api.post("/loginOut", data);
},
}

View File

@@ -12,7 +12,7 @@
<view class="towcontentlistxitem flex-start">
<view class="towcontentlistxitembox flex-colum"
:class="towcontentclickindex == index?'towcontentlistxitemboxopacity':''"
v-for="(item,index) in listbox" :key="index" @click="towcontentclick(index)">
v-for="(item,index) in listbox" :key="index" @click="towcontentclick(item,index)">
<text>{{item.name}}</text>
<image v-if="towcontentclickindex == index"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dg.png" mode="widthFix">
@@ -22,7 +22,7 @@
<view class="towcontentlistxitembt flex-start">
<view class="towcontentlistxitembtitem"
:class="index==xitembtitemindex?'towcontentlistxitembtitemaktev':''"
v-for="(item,index) in xitembtitem" :key="index" @click="clickxitembtitemindex(index)">
v-for="(item,index) in xitembtitem" :key="index" @click="clickxitembtitemindex(item,index)">
{{item.name}}
</view>
@@ -37,12 +37,38 @@
<image :src="item.image" mode=""></image>
<view class="fivecontent_item_boxitemleft flex-colum-start">
<view class="fivecontent_item_boxitemleftone">
<view class="fivecontent_item_boxitemleftone_t"><text class="fivecontent_item_boxitemleftone_o">热销TOP.{{index + 1}}</text>热销热销热销热销热销热销热销热销热销热销热销热销热销已抢{{item.realSalesNumber}}</view>
<view class="fivecontent_item_boxitemleftone_t"><text
class="fivecontent_item_boxitemleftone_o">热销TOP.{{index + 1}}</text>热销热销热销热销热销热销热销热销热销热销热销热销热销已抢{{item.realSalesNumber}}
</view>
</view>
<view class="fivecontent_item_boxitemlefttow flex-between">
<view>{{item.productName}}</view>
<view class="fivecontent_item_boxitemlefttow_o flex-start">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="">
</image>
<view> {{item.productName}}</view>
</view>
<text class="fivecontent_item_boxitemlefttow_t">{{item.distances}}km</text>
</view>
<view class="fivecontent_item_boxitemlefthere flex-start">
<view class="fivecontent_item_boxitemlefthere_one flex-start">
<text class="flex_startone">券后</text>
<text class="flex_starttow">¥{{item.salePrice}}</text>
</view>
<view class="fivecontent_item_boxitemlefthere_tow">
{{item.discount || ''}}
</view>
<view class="fivecontent_item_boxitemlefthere_there">
¥{{item.originPrice}}
</view>
</view>
<view class="fivecontent_item_boxitemlefour flex-start">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/H.png" mode="">
</image>
<text>已抢{{item.realSalesNumber}}</text>
</view>
<view class="fivecontent_item_boxitemlefive">
马上抢
</view>
</view>
</view>
@@ -85,22 +111,17 @@
}
],
xitembtitemindex: 0,
xitembtitem: [{
name: '2小时销量飙升榜'
name: '2小时销量飙升榜',
dateType: 1
},
{
name: '今日热榜'
name: '今日热榜',
dateType: 0
}
],
form: {
address: '', //地址
type: '', //品类
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
distance: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
},
form: {},
};
},
onPageScroll(e) {
@@ -117,11 +138,14 @@
},
onLoad() {
this.distiricttopCommon()
this.onLoadlist()
setTimeout(() => {
this.GetTop()
}, 1000)
},
onShow() {
this.init_fn()
},
computed: {
HeighT() { //手机类型的尺寸
return this.$store.getters.is_BarHeight
@@ -129,11 +153,40 @@
},
methods: {
//飙升榜
clickxitembtitemindex(index) {
clickxitembtitemindex(item, index) {
this.xitembtitemindex = index
this.list = []
this.form.dateType = item.dateType
this.form.page = 1
this.form.size = 10
this.form.status = 'loadmore'
this.onLoadlist()
},
towcontentclick(index) {
towcontentclick(item, index) {
this.towcontentclickindex = index
this.list = []
this.form.type = item.description
this.form.page = 1
this.form.size = 10
this.form.status = 'loadmore'
this.onLoadlist()
},
// 下面初始数据
init_fn() {
this.list = []
this.form = {
address: uni.cache.get('getLocationstorage').address, //地址
lng: uni.cache.get('getLocationstorage').lng,
lat: uni.cache.get('getLocationstorage').lat,
type: '', //品类
orderBy: 4, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
other: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
dateType: 1,
status: 'loadmore'
}
this.onLoadlist()
},
//G滚动底部
loadMore(e) {
@@ -170,7 +223,7 @@
async distiricttopCommon() {
let res = await this.api.distiricttopCommon({
type: '', //团购卷品类Id/subShop-预约到店
orderBy: 2
orderBy: 4
})
console.log(res.data)
if (res.code == 0) {
@@ -183,43 +236,9 @@
},
async onLoadlist() {
try {
this.form = {
address: uni.cache.get('getLocationstorage').address, //地址
lng: uni.cache.get('getLocationstorage').lng,
lat: uni.cache.get('getLocationstorage').lat,
type: '', //团购卷品类Id
distanceInKm: '', //默认10 以经纬度为中心 多大范围以内 单位km
orderBy: 2, //0.今日上新 1.离我最近 2.销量优先/热榜推荐 3.价格优先
page: 1, //页数
size: 10, //页容量
status: 'loadmore',
}
let res = await this.api.indexlist(this.form)
var dates = new Date().getTime();
res.data.list.forEach((item, index) => {
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
if (leftTime >= 0) {
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
let m = Math.floor(leftTime / 1000 / 60 % 60);
let s = Math.floor(leftTime / 1000 % 60);
item.end_times = {
d: d,
h: h,
m: m,
s: s
}
} else {
item.end_times = 0
}
})
console.log(res.data.list)
if (res.data.pages < this.form.page) {
this.form.status = 'nomore'
// if (res.data.pageNum == 1) {
// this.is_end = true
// }
return false;
} else {
this.form.status = 'loading';
@@ -394,8 +413,8 @@
.fivecontent_item_boxitem {
image {
width: 192rpx;
height: 192rpx;
width: 208rpx;
height: 208rpx;
border-radius: 12rpx;
}
@@ -403,35 +422,137 @@
margin-left: 24rpx;
flex: 1;
justify-content: flex-start;
height: 192rpx;
position: relative;
.fivecontent_item_boxitemleftone {
width: 100%;
.fivecontent_item_boxitemleftone_t{
.fivecontent_item_boxitemleftone_o{
margin-right:10rpx ;
.fivecontent_item_boxitemleftone_t {
.fivecontent_item_boxitemleftone_o {
margin-right: 10rpx;
display: inline-block;
font-family: Roboto, Roboto;
font-weight: 500;
font-size: 16rpx;
color: #FFFFFF;
padding: 2rpx 6rpx ;
padding: 2rpx 6rpx;
text-align: center;
background: linear-gradient( 116deg, #FF9D2B 0%, #FF4805 100%);
background: linear-gradient(116deg, #FF9D2B 0%, #FF4805 100%);
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
font-family: Source Han Sans CN, Source Han Sans CN;
font-family: Source Han Sans CN,
Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
overflow:hidden;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
-webkit-line-clamp:2;
}
}
.fivecontent_item_boxitemlefttow{
.fivecontent_item_boxitemlefttow {
width: 100%;
margin-top: 14rpx;
.fivecontent_item_boxitemlefttow_o {
image {
width: 24rpx;
height: 24rpx;
}
view {
margin-left: 10rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
.fivecontent_item_boxitemlefttow_t {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
.fivecontent_item_boxitemlefthere {
width: 100%;
margin-top: 12rpx;
align-items: flex-end;
.fivecontent_item_boxitemlefthere_one {
align-items: flex-end;
.flex_startone {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
}
.flex_starttow {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 24rpx;
color: #FF7127;
}
}
.fivecontent_item_boxitemlefthere_tow {
margin-left: 4rpx;
padding: 2rpx 10rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #FF7127;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
}
.fivecontent_item_boxitemlefthere_there {
margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 16rpx;
color: #999999;
text-decoration-line: line-through;
}
}
.fivecontent_item_boxitemlefour {
margin-top: 12rpx;
background: #FFEEE9;
border-radius: 4rpx 4rpx 4rpx 4rpx;
padding: 4rpx 12rpx;
image {
width: 10.82rpx;
height: 14.06rpx;
}
text {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF5053;
}
}
.fivecontent_item_boxitemlefive{
position: absolute;
padding: 8rpx 12rpx;
background: #FEE06A;
bottom: 32rpx;
right: 0;
border-radius: 24rpx 24rpx 24rpx 24rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 24rpx;
color: #333333;
}
}
}

View File

@@ -109,14 +109,16 @@
马上抢
</view>
<view class="indexboxitemlefttheretext flex-start">
<view class="indexboxitemlefttheretextone">
<text>¥</text>
<text>{{item.salePrice}}</text>
<view class="fivecontent_item_boxitemlefthere_one flex-start">
<text class="flex_startone">到手</text>
<text class="flex_starttow">¥{{item.salePrice}}</text>
</view>
<view class="indexboxitemlefttheretexttow">
¥{{item.discount}}
<view class="fivecontent_item_boxitemlefthere_tow">
{{item.discount || ''}}
</view>
<view class="fivecontent_item_boxitemlefthere_there">
¥{{item.originPrice}}
</view>
</view>
<view class="indexboxitemleftthere_countdown flex-between">
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}</text>
@@ -394,7 +396,7 @@
init_fn() {
this.homelist = []
this.form = {
address:uni.cache.get('getLocationstorage').address, //地址
address: uni.cache.get('getLocationstorage').address, //地址
lng: uni.cache.get('getLocationstorage').lng,
lat: uni.cache.get('getLocationstorage').lat,
type: '', //品类
@@ -429,9 +431,6 @@
})
if (res.data.pages < this.form.page) {
this.form.status = 'nomore'
// if (res.data.pageNum == 1) {
// this.is_end = true
// }
return false;
} else {
this.form.status = 'loading';
@@ -843,7 +842,6 @@
margin-top: 30rpx;
padding-left: 16rpx;
width: 100%;
height: 88rpx;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
background-size: 100% 100%;
@@ -858,42 +856,59 @@
}
.indexboxitemlefttheretext {
.indexboxitemlefttheretextone {
text {
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
font-weight: normal;
color: #FF5053;
// width: 100%;
margin-top: 12rpx;
align-items: flex-end;
.fivecontent_item_boxitemlefthere_one {
align-items: flex-end;
.flex_startone {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
}
text:nth-child(2) {
font-weight: bold;
font-size: 34rpx;
}
text:nth-child(1) {
.flex_starttow {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 24rpx;
color: #FF7127;
}
}
.indexboxitemlefttheretexttow {
margin-left: 12rpx;
font-size: 20rpx;
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
font-weight: normal;
.fivecontent_item_boxitemlefthere_tow {
margin-left: 4rpx;
padding: 2rpx 10rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #FF7127;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
}
.fivecontent_item_boxitemlefthere_there {
margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 16rpx;
color: #999999;
text-decoration: line-through;
text-decoration-line: line-through;
}
}
.indexboxitemleftthere_countdown {
width: 100%;
padding-right: 7rpx;
margin-top: 2rpx;
.indexboxitemleftthere_countdowntext {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
padding-bottom: 8rpx;
}
.indexboxitemleftthere_countdowntexts {

View File

@@ -7,7 +7,7 @@
<view class="onecontentabsolute">
<view class="onecontentabsoluteitem flex-between">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/l.png" mode=""></image>
<input type="text" placeholder="订阅提醒,每日爆品上线不错过" />
<input :disabled="true" type="text" placeholder="订阅提醒,每日爆品上线不错过" />
<view class="onecontentabsoluteitembotton">
订阅提醒
</view>
@@ -59,26 +59,28 @@
马上抢
</view>
<view class="indexboxitemlefttheretext flex-start">
<view class="indexboxitemlefttheretextone">
<text>¥</text>
<text>{{item.salePrice}}</text>
<view class="fivecontent_item_boxitemlefthere_one flex-start">
<text class="flex_startone">到手</text>
<text class="flex_starttow">¥{{item.salePrice}}</text>
</view>
<view class="indexboxitemlefttheretexttow">
¥{{item.discount}}
<view class="fivecontent_item_boxitemlefthere_tow">
{{item.discount || ''}}
</view>
<view class="fivecontent_item_boxitemlefthere_there">
¥{{item.originPrice}}
</view>
</view>
<view class="indexboxitemleftthere_countdown flex-between">
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}</text>
<view class="indexboxitemleftthere_countdowntexts">
<!-- <uni-countdown @timeup="updateCity" :show-day="false" :day="item.end_times.d"
:hour="item.end_times.h" :minute="item.end_times.m"
:second="item.end_times.s" :indexs='index' color="#FFFFFF"
border-color="#00B26A" splitorColor="#FFFFFF"
:font-size="7"></uni-countdown> -->
<uni-countdown @timeup="updateCity" :show-day="false"
:day="item.end_times.d" :hour="item.end_times.h"
:minute="item.end_times.m" :second="item.end_times.s"
:indexs='index' color="#FFFFFF" border-color="#00B26A"
splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
</view>
</view>
</view>
</view>
@@ -406,10 +408,9 @@
margin-top: 30rpx;
padding-left: 16rpx;
width: 100%;
height: 88rpx;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
background-size: 100% 100%;
.indexboxitemleftthereabsolute {
position: absolute;
top: 14rpx;
@@ -419,46 +420,63 @@
font-size: 24rpx;
color: #FFFFFF;
}
.indexboxitemlefttheretext {
.indexboxitemlefttheretextone {
text {
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
font-weight: normal;
color: #FF5053;
// width: 100%;
margin-top: 12rpx;
align-items: flex-end;
.fivecontent_item_boxitemlefthere_one {
align-items: flex-end;
.flex_startone {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
}
text:nth-child(2) {
font-weight: bold;
font-size: 34rpx;
}
text:nth-child(1) {
.flex_starttow {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 24rpx;
color: #FF7127;
}
}
.indexboxitemlefttheretexttow {
margin-left: 12rpx;
font-size: 20rpx;
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
font-weight: normal;
.fivecontent_item_boxitemlefthere_tow {
margin-left: 4rpx;
padding: 2rpx 10rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #FF7127;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
}
.fivecontent_item_boxitemlefthere_there {
margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 16rpx;
color: #999999;
text-decoration: line-through;
text-decoration-line: line-through;
}
}
.indexboxitemleftthere_countdown {
width: 100%;
padding-right: 7rpx;
margin-top: 2rpx;
.indexboxitemleftthere_countdowntext {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
padding-bottom: 8rpx;
}
.indexboxitemleftthere_countdowntexts {
font-family: Roboto, Roboto;
font-weight: 400;

View File

@@ -258,7 +258,7 @@
<view class="classshowpopuptop">
价格说明
</view>
<view class="classshowpopupabsolute">
<view class="classshowpopupabsolute" @click="showpopup = false">
<u-icon name="close" color="#333333" size="28"></u-icon>
</view>
<view class="classshowpopupitem">
@@ -302,7 +302,7 @@
return {
titlename: '详情',
opacity: false,
showpopup: true,
showpopup: false,
indexform: {},
listdata: {

View File

@@ -2,11 +2,12 @@
<view class="container">
<view class="user-info-wrap">
<view style="width: 108rpx; height: 108rpx;border-radius: 50%;">
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.avatar" :src="userInfo.avatar"
mode="aspectFill">
</image>
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-else src="@/static/avatar.png" mode="aspectFill">
</image>
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.avatar"
:src="userInfo.avatar" mode="aspectFill">
</image>
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-else src="@/static/avatar.png"
mode="aspectFill">
</image>
</view>
<view class="info flex-colum-start">
<text class="phone">{{userInfo.telephone || '无'}}</text>
@@ -50,10 +51,34 @@
}
},
methods: {
//退出登录
boxClick() {
uni.showModal({
title: '注意',
content: '确定要退出登录吗?',
success: async (res) => {
if (res.confirm) {
try {
await this.api.loginOut();
} catch (e) {
//TODO handle the exception
}
uni.cache.clear();
uni.reLaunch({
url: '/pages/login/login'
});
}
}
});
},
clickinfo(item, index) {
switch (item.jumpType) {
case 'scan': //拉起相机
this.form.type = item.value
case 'scan': //特殊处理点击
switch (item.value) {
case 'loginOut':
this.boxClick()
break;
}
break;
case 'relative': //内部页面
uni.pro.navigateTo(item.absUrl)