Merge branch 'wwz' into HEAD
This commit is contained in:
wwz
@@ -3,11 +3,12 @@
|
||||
<view class="onecontentleft" v-if="bannervo">
|
||||
现有<text style="color: #FC851E;font-size: 24rpx;">
|
||||
{{bannervo.coupons==null?116:bannervo.coupons}}人
|
||||
<!-- {{bannervo.coupons==null?116:bannervo.coupons}}人 -->
|
||||
</text>
|
||||
已免单
|
||||
</view>
|
||||
<view class="onecontentright flex-start">
|
||||
<view class="onecontentrightimage" v-if="bannervo">
|
||||
<!-- <view class="onecontentrightimage" v-if="bannervo">
|
||||
<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
|
||||
<view class="swiperItem" v-for="(item, index) in bannervo.counponsInfo" :key="index"
|
||||
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
||||
@@ -16,17 +17,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view style="overflow: hidden;width: 100rpx;">
|
||||
<view style="width: 600rpx;" class="swiperstyle">
|
||||
<image style="width: 30rpx;height: 30rpx;border-radius: 50%;display: inline-block;"
|
||||
v-for="(item, index) in listData" :key="index" :src="item.logo">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentrighttext">
|
||||
<swiper class="swiper" circular :autoplay="true" :vertical='true' :interval="2000">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in bannervo.counponsInfo" :key="index">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in bannervo" :key="index">
|
||||
{{item.name}}已省{{item.money}}元钱
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
<!-- <view class="after"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -35,7 +43,9 @@
|
||||
defineProps,
|
||||
onBeforeUnmount,
|
||||
reactive,
|
||||
defineExpose
|
||||
defineExpose,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
bannervo: {
|
||||
@@ -51,6 +61,13 @@
|
||||
}] //
|
||||
}
|
||||
});
|
||||
|
||||
const listData = ref()
|
||||
const listdataNumber = ref(4)
|
||||
watch(() => props.bannervo, (n, o) => {
|
||||
listData.value = [...props.bannervo,...props.bannervo]
|
||||
})
|
||||
|
||||
const slideNote = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
@@ -137,6 +154,11 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.swiperstyle {
|
||||
position: relative;
|
||||
animation: animationName 5s linear infinite;
|
||||
}
|
||||
|
||||
.onecontentrightimage {
|
||||
width: 65rpx;
|
||||
position: relative;
|
||||
@@ -207,7 +229,7 @@
|
||||
|
||||
.onecontentrighttext {
|
||||
width: 232rpx;
|
||||
|
||||
margin-left: 20rpx;
|
||||
.swiper {
|
||||
height: 28rpx;
|
||||
// width: 232rpx;
|
||||
@@ -239,4 +261,16 @@
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animationName {
|
||||
0% {
|
||||
/* 动画开始时的样式 */
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
/* 动画结束时的样式 */
|
||||
left: -290rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="therecontent flex-between" v-if="salesList">
|
||||
<view class="therecontent flex-between" >
|
||||
<view class="therecontent_box_item">
|
||||
<view class="therecontent_box_imge flex-between" @click="jrtoday(0)">
|
||||
<view class="therecontent_box_imge_text">
|
||||
@@ -13,14 +13,14 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.todayList"
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.hotList"
|
||||
:key="index" @click="clickproduct(item)">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
<image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
</image>
|
||||
<view class="therecontent_box_itembox_itemview flex-colum-start">
|
||||
<view class="therecontent_box_itembox_itemviewone">
|
||||
<text
|
||||
style="margin-left: 0;">{{item.productName.length>5?item.productName.substring(0,5)+'...':item.productName}}</text>
|
||||
style="margin-left: 0;">{{item.name.length>5?item.name.substring(0,5)+'...':item.name}}</text>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewtow flex-around">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/xia.png" mode="widthFix">
|
||||
@@ -54,17 +54,17 @@
|
||||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in salesList.hotList"
|
||||
:key="index" @click="clickproduct(item)">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
<image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
</image>
|
||||
<view class="therecontent_box_itembox_itemview flex-colum-start">
|
||||
<view class="therecontent_box_itembox_itemviewone flex-start">
|
||||
<view class="therecontent_box_itembox_itemviewoneafter">
|
||||
TOP.{{index + 1}}
|
||||
</view>
|
||||
<text>{{ item.productName.length>5?item.productName.substring(0,5)+'...':item.productName }}</text>
|
||||
<text>{{ item.name.length>5?item.name.substring(0,5)+'...':item.name }}</text>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewtowdiscount flex-around">
|
||||
已抢{{item.realSalesNumber}}份
|
||||
已抢{{item.saleNum}}份
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewthere ">
|
||||
<text>￥{{item.salePrice}}</text>
|
||||
|
||||
@@ -1,310 +1,173 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat class="navbar" :opacity='opacitys' :title='toplist.name' :titleshow='false'></navseat>
|
||||
|
||||
<view class="onecontent">
|
||||
<image class="onecontentimage" :src="toplist.coverImg" mode="aspectFill"></image>
|
||||
<image class="onecontentimage" :src="datas.toplist.coverImg" mode="aspectFill"></image>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
<view class="onecontentabsolute">
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<!-- <view :class="isFixedTop?'towcontentlistxitemboxfixed':''" :style="{'top':customheighttop + 'px'}">
|
||||
<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)">
|
||||
<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">
|
||||
</image>
|
||||
<view class="twocontent" v-for="(item, index) in datas.list" :key="index" @click="clickproduct(item)">
|
||||
<view class="df twoBox">
|
||||
<view class="df ">
|
||||
<image :src="item.logo" style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" mode="">
|
||||
</image>
|
||||
<view class="">
|
||||
{{ item.shopName }}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="isFixedTop" :style="{'height':windowHeight - seighT + 'px'}"></view>
|
||||
<view class="towcontentboutton" :style="{'height':seighT + 'px'}">
|
||||
<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"> -->
|
||||
<view class="fivecontent_item" v-for="(item,index) in list" :key="index" @click="clickproduct(item)">
|
||||
<view class="fivecontent_item_nav flex-start">
|
||||
<image class="fivecontent_item_navimage" :src="item.shopImage" mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_nav_left">
|
||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||
<view>
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
<view>
|
||||
{{item.distances}}
|
||||
<view class="">
|
||||
{{ item.distance }}m
|
||||
</view>
|
||||
</view>
|
||||
<view class="df" style=" justify-content: space-between; flex-wrap: wrap; padding: 30rpx 0rpx;">
|
||||
<image :src="item.coverImg" style="width: 192rpx;height: 192rpx;" mode=""></image>
|
||||
<view style="margin-left: 24rpx; flex: auto;">
|
||||
<view class="df" style="justify-content: space-between; flex-wrap: wrap;">
|
||||
<view style="font-weight: 500; font-size: 28rpx; color: #333333;">{{ item.name }}</view>
|
||||
<view style=" font-weight: 400; font-size: 24rpx; color: #999999;">已抢{{ item.saleNum
|
||||
}}份
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere " style="">
|
||||
<view class="df" style="align-items: normal;">
|
||||
<view class="df">
|
||||
<text
|
||||
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 500; font-size: 16rpx; color: #FF7127;">
|
||||
到手
|
||||
</text>
|
||||
<text
|
||||
style="font-weight: 500; font-size: 24rpx; color: #FF7127;">￥{{item.salePrice}}</text>
|
||||
<view style=" 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;">
|
||||
{{item.discount}}折
|
||||
</view>
|
||||
<text style=" 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;">￥{{item.originPrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
||||
<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
|
||||
:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
|
||||
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
|
||||
mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
||||
</view>
|
||||
<view style=" position: absolute;
|
||||
top: 16rpx;
|
||||
right: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;">
|
||||
马上抢
|
||||
</view>
|
||||
</view>
|
||||
<view class="df" style="justify-content: space-between;">
|
||||
<view
|
||||
style="font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 24rpx; color: #999999; padding-bottom: 8rpx;">
|
||||
共省{{item.originPrice-item.salePrice}}元
|
||||
</view>
|
||||
<view
|
||||
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: bold; font-size: 16rpx;margin-right: 12rpx; color: #FFFFFF;">
|
||||
<uni-countdown :show-day="false" :hour="convertMilliseconds(item.endTime).hours"
|
||||
:minute="convertMilliseconds(item.endTime).minutes"
|
||||
:second="convertMilliseconds(item.endTime).seconds" :indexs='index' color="#FFFFFF"
|
||||
border-color="#00B26A" splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_box">
|
||||
<view class="fivecontent_item_boxitem flex-between">
|
||||
<image :src="item.image" mode=""></image>
|
||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||
<view class="fivecontent_item_boxitemleftone flex-between">
|
||||
<view>{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}</view>
|
||||
<text>已抢{{item.realSalesNumber}}份</text>
|
||||
</view>
|
||||
<view class="flex-start flexstartboxfttow">
|
||||
<view class="fivecontent_item_boxitemlefttow flex-start"
|
||||
v-for="(c,index2) in item.proTag" :key="index2"
|
||||
:style="{'background':c.backColor,'color':c.backColor}">
|
||||
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
||||
:src="c.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemleftthereabsolute">
|
||||
马上抢
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext 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="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>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import uniCountdown from '@/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue';
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '咖啡',
|
||||
opacitys: false,
|
||||
towcontentclickindex: 0,
|
||||
windowHeight: '',
|
||||
seighT: '',
|
||||
customheighttop: '', //top高度
|
||||
isFixedTop: false,
|
||||
Topdistance: 3000, //吸顶初始距离
|
||||
list: [],
|
||||
toplist: {},
|
||||
listbox: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
distance: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
type:''
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacitys = false
|
||||
} else {
|
||||
this.opacitys = true
|
||||
}
|
||||
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||||
this.isFixedTop = true
|
||||
} else {
|
||||
this.isFixedTop = false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
_this.GetTop()
|
||||
// _this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.type = e.value
|
||||
// this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// this.GetTop()
|
||||
// }, 1000)
|
||||
},
|
||||
onShow() {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// _this.GetTop()
|
||||
_this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.init_fn()
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickproduct(item){
|
||||
uni.pro.navigateTo('product/index',{
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
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:this.type, //品类
|
||||
orderBy:0, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
dateType: 1,
|
||||
status: 'loadmore'
|
||||
}
|
||||
this.onLoadlist()
|
||||
},
|
||||
async distiricttopCommon(e) {
|
||||
let res = await this.api.distiricttopCommon({
|
||||
type: this.type, //团购卷品类Id/subShop-预约到店
|
||||
orderBy: ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.toplist = res.data.carousel[0]
|
||||
this.listbox = res.data.menu
|
||||
}
|
||||
},
|
||||
async onLoadlist() {
|
||||
try {
|
||||
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
|
||||
}
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
this.form.status = 'loading';
|
||||
if (res.data.pageNum == res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
//G滚动底部
|
||||
loadMore(e) {
|
||||
console.log(e)
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
this.windowHeight = data.windowHeight - data.statusBarHeight //总高度
|
||||
// #ifdef MP-WEIXIN
|
||||
const custom = wx.getMenuButtonBoundingClientRect()
|
||||
this.seighT = data.windowHeight - custom.height - custom.top;
|
||||
console.log(custom)
|
||||
this.customheighttop = custom.height + custom.top
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.customheighttop = data.statusBarHeight / 2
|
||||
this.seighT = data.windowHeight - data.statusBarHeight / 2
|
||||
// #endif
|
||||
this.$u.getRect('.towcontentlistxitembt').then(res => {
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
})
|
||||
this.$u.getRect('.towcontentlistxitem').then(res => {
|
||||
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 //滚动距离
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
console.log(res)
|
||||
})
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
APIhome,
|
||||
userdict
|
||||
} from "@/common/api/index/index.js"
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
let datas = reactive({
|
||||
titlename: '咖啡',
|
||||
opacitys: false,
|
||||
toplist: "",
|
||||
list: []
|
||||
})
|
||||
onLoad(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
towcontentclick(index) {
|
||||
this.towcontentclickindex = index
|
||||
}
|
||||
}
|
||||
};
|
||||
function clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
id: item.id
|
||||
})
|
||||
}
|
||||
async function getList() {
|
||||
let ele = await userdict({
|
||||
type: "group"
|
||||
})
|
||||
datas.toplist = ele
|
||||
let res = await APIhome({
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
categoryId: 1,
|
||||
orderType: 0,
|
||||
name: '',
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
distanceType: ''
|
||||
})
|
||||
datas.list = res.records
|
||||
}
|
||||
|
||||
function convertMilliseconds(milliseconds) {
|
||||
// 计算天数
|
||||
const days = Math.floor(milliseconds / 86400000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 86400000;
|
||||
// 计算小时数
|
||||
const hours = Math.floor(milliseconds / 3600000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 3600000;
|
||||
// 计算分钟数
|
||||
const minutes = Math.floor(milliseconds / 60000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 60000;
|
||||
// 计算秒数
|
||||
const seconds = Math.floor(milliseconds / 1000);
|
||||
|
||||
return {
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 492rpx;
|
||||
@@ -369,305 +232,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
.twocontent {
|
||||
padding: 20rpx 40rpx;
|
||||
|
||||
.twoBox {
|
||||
background-color: #fff;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0rpx;
|
||||
border-bottom: 1rpx solid #ccc;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
|
||||
.towcontentlistxitemboxfixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
margin-top: 0rpx !important;
|
||||
}
|
||||
|
||||
.towcontentlistxitem {
|
||||
// margin-top: -32rpx;
|
||||
padding: 36rpx 28rpx 0rpx 28rpx;
|
||||
border-radius: 24rpx 0rpx 0rpx 0rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembox:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembox {
|
||||
margin-left: 48rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentlistxitemboxopacity {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentlistxitembt {
|
||||
padding: 28rpx;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembtitem {
|
||||
flex: none;
|
||||
padding: 8rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitemaktev {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: #FEE06A;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.towcontentboutton {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.fivecontent_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.fivecontent_item {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.fivecontent_item_nav {
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_left {
|
||||
flex: auto;
|
||||
margin-left: 12rpx;
|
||||
|
||||
.fivecontent_item_nav_lefttop {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FEE9DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_box {
|
||||
margin-top: 20rpx;
|
||||
border-top: 2rpx solid #E5E5E5;
|
||||
padding-top: 14rpx;
|
||||
|
||||
.fivecontent_item_boxitem {
|
||||
image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemleft {
|
||||
margin-left: 24rpx;
|
||||
flex: auto;
|
||||
|
||||
.fivecontent_item_boxitemleftone {
|
||||
width: 100%;
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FFD6D7;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
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;
|
||||
right: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
// width: 100%;
|
||||
margin-top: 12rpx;
|
||||
// align-items: flex-end;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.fivecontent_item_boxitemlefthere_one {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #333333;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: 30rpx;
|
||||
padding: 16rpx 0;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.df {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
||||
<view class="onecontent">
|
||||
<view class="onecontentabsolute"></view>
|
||||
</view>
|
||||
@@ -16,19 +14,18 @@
|
||||
<view class="towcontentoneboxswiper">
|
||||
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
||||
:interval="'3000'">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
<swiper-item class="swiperitem" v-for="(item, index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">{{item.userName}}* 免单{{item.orderAmount}}元订单号：{{item.orderNo}}
|
||||
<view class="swiper-item">{{ item.userName }}* 免单{{ item.orderAmount }}元订单号：{{ item.orderNo }}
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentoness">
|
||||
<view class="towcontentonebox_box">
|
||||
订单数：{{total}}
|
||||
订单数：10
|
||||
</view>
|
||||
<view class="towcontentonebox">
|
||||
<view class="towcontentoneboxswiper">
|
||||
@@ -43,36 +40,19 @@
|
||||
金额
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiperitem" v-for="(item,index) in ordermineWinnerList" :key="index">
|
||||
<view class="swiperitem" v-for="(item, index) in ordermineWinnerList" :key="index">
|
||||
<view class="swiper-item" style="margin-top: 32rpx;">
|
||||
<view class="swiper_itemone">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
{{ item.isRefund == true ? '已免单' : '待免单' }}
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
{{ item.orderNo }}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.orderAmount}}元
|
||||
{{ item.orderAmount }}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <swiper class="swiper" circular :autoplay='true' :vertical='true' interval="3000"
|
||||
display-multiple-items="4">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">
|
||||
<view class="swiper_itemone">
|
||||
{{item.orderAmount}}元
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -83,295 +63,266 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
forEach
|
||||
} from 'lodash';
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '',
|
||||
opacity: false,
|
||||
orderfindWiningUserlist: [],
|
||||
ordermineWinnerList: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
total:0
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.orderfindWiningUser()
|
||||
this.ordermineWinnerEvent()
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.titlename = res.data.name
|
||||
}
|
||||
});
|
||||
},
|
||||
onReachBottom() {
|
||||
this.ordermineWinnerEvent()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
let orderfindWiningUserlist = ref([{
|
||||
userName: "王*",
|
||||
orderAmount: 12,
|
||||
orderNo: 213504512353548688546
|
||||
}, {
|
||||
userName: "赵*",
|
||||
orderAmount: 48,
|
||||
orderNo: 65481188834105643623210
|
||||
}, {
|
||||
userName: "钱*",
|
||||
orderAmount: 91,
|
||||
orderNo: 5891051346764518249444
|
||||
}, {
|
||||
userName: "孙*",
|
||||
orderAmount: 84,
|
||||
orderNo: 688472546798742575342
|
||||
}, {
|
||||
userName: "王",
|
||||
orderAmount: 73,
|
||||
orderNo: 597344582826533594131
|
||||
}, {
|
||||
userName: "郑*",
|
||||
orderAmount: 98,
|
||||
orderNo: 469867684658481051627
|
||||
}, {
|
||||
userName: "凯*",
|
||||
orderAmount: 95,
|
||||
orderNo: 895961781634536230631
|
||||
},
|
||||
|
||||
cut(str, firstStr, lastStr) {
|
||||
let start = str.indexOf(firstStr);
|
||||
let end = str.lastIndexOf(lastStr);
|
||||
return str.slice(start, end + 1); //slice方法截取的部分不包括第二参数所在位置
|
||||
},
|
||||
|
||||
async ordermineWinnerEvent() {
|
||||
let res = await this.api.ordermineWinner({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
page: this.form.page,
|
||||
size: this.form.size
|
||||
})
|
||||
if(res.code ==0){
|
||||
this.total = res.data.total
|
||||
if(this.form.page==1){
|
||||
this.ordermineWinnerList = res.data.list
|
||||
}else{
|
||||
this.ordermineWinnerList.push(...res.data.list)
|
||||
}
|
||||
this.form.page = ++this.form.page;
|
||||
}
|
||||
},
|
||||
async orderfindWiningUser() {
|
||||
let res = await this.api.orderfindWiningUser()
|
||||
this.orderfindWiningUserlist = res.data.map((i) => {
|
||||
i.userName = i.userName.slice(0, 1)
|
||||
return i
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
])
|
||||
let ordermineWinnerList = ref([{
|
||||
isRefund: true,
|
||||
orderNo: 895961781634536230631,
|
||||
orderAmount: "95"
|
||||
},
|
||||
{
|
||||
isRefund: true,
|
||||
orderAmount: 74,
|
||||
orderNo: 222674526516892311380
|
||||
},
|
||||
{
|
||||
isRefund: false,
|
||||
orderAmount: 23,
|
||||
orderNo: 862674526546892311380
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 684.19rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 534.19rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 684.19rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||
.towcontent {
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
width: 100%;
|
||||
margin-top: -100rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||
|
||||
.onecontentabsolute {
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.towcontentoneimage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 534.19rpx;
|
||||
top: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 242rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 40rpx;
|
||||
text-align: left;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
.towcontentoness {
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
margin-top: -100rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
padding: 38rpx 48rpx;
|
||||
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||
.towcontentonebox_box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 262rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background: #FFA436;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentoneimage {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 242rpx;
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
// height: 242rpx;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 40rpx;
|
||||
text-align: left;
|
||||
.swiper {
|
||||
height: 230rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoness {
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
padding: 38rpx 48rpx;
|
||||
|
||||
.towcontentonebox_box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 262rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background: #FFA436;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
// height: 242rpx;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 230rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 144rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 144rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,18 +3,18 @@
|
||||
<Nav v-if="showindex == 'index'" />
|
||||
<view class="content" v-if="showindex == 'index'">
|
||||
<!-- 轮播图 -->
|
||||
<swipers :carousel='hometoplist.carousel'></swipers>
|
||||
<swipers :carousel='hometoplist.bannerList'></swipers>
|
||||
<!-- 广告 -->
|
||||
<advertisement :bannervo='hometoplist.bannervo' :itemStyle='advertisementStyle' ref="refbannervo">
|
||||
<advertisement :bannervo='hometoplist.freeBannerList' :itemStyle='advertisementStyle' ref="refbannervo">
|
||||
</advertisement>
|
||||
<!-- 金刚区 -->
|
||||
<diamond :district='hometoplist.district'></diamond>
|
||||
<!-- 今日上线 -->
|
||||
<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
|
||||
<todaylist :todayList='hometoplist.todayProInfo' :salesList="hometoplist.hotRanking" ></todaylist>
|
||||
<!-- 类目 -->
|
||||
<view :style="{'top':store.height+'px'}" class="fourcontent" id="fourcontent">
|
||||
<view class="flex-between" style="flex-wrap: inherit;">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menuList" :key="index"
|
||||
@click="viewHistory(item,index)"
|
||||
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
||||
<text style="margin-right: 10rpx;">{{item.name}}</text>
|
||||
@@ -25,9 +25,10 @@
|
||||
</view>
|
||||
<view class="componentsclass" v-if="showproductlist">
|
||||
<AreaSelect v-if="viewHistoryindex == 0" @updateValue="openproductlist" />
|
||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||
@grouping="openproductlist" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 首页抢购区域 -->
|
||||
<view class="fivecontent">
|
||||
@@ -183,8 +184,8 @@
|
||||
const showindex = ref('index')
|
||||
//计算广告图片的重合尺寸是位移
|
||||
const getStyle = (e) => {
|
||||
if (e > hometoplist.bannervo.counponsInfo.length / 2) {
|
||||
var right = hometoplist.bannervo.counponsInfo.length - e
|
||||
if (e > hometoplist.freeBannerList.length / 2) {
|
||||
var right = hometoplist.freeBannerList.length - e
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
||||
zIndex: 9999 - right,
|
||||
@@ -202,21 +203,16 @@
|
||||
const refbannervo = ref(null);
|
||||
//数据
|
||||
const hometoplist = reactive({
|
||||
bannervo: {
|
||||
counponsInfo: [],
|
||||
coupons: ''
|
||||
}
|
||||
|
||||
})
|
||||
// 首页上面数据
|
||||
const hometop = async () => {
|
||||
try {
|
||||
let res = await APIhomehomePageUp()
|
||||
Object.assign(hometoplist, res)
|
||||
if (hometoplist.bannervo.counponsInfo) {
|
||||
hometoplist.bannervo.counponsInfo.forEach((item, index) => {
|
||||
hometoplist.freeBannerList.forEach((item, index) => {
|
||||
advertisementStyle.value.push(getStyle(index))
|
||||
})
|
||||
}
|
||||
// 数据加载完后获取dom 高度
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().select('#fourcontent');
|
||||
@@ -229,12 +225,13 @@
|
||||
// 下面初始数据
|
||||
const formhomelist = reactive({ //筛选
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
categoryId: '1', //品类
|
||||
orderType: '1', //1.理我最近 2.销量优先 3.价格优先
|
||||
distanceType: '1000', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
status: 'loadmore',
|
||||
name:'1'
|
||||
})
|
||||
// 使用 reactive 创建响应式对象
|
||||
const timeData = ref({});
|
||||
@@ -248,7 +245,7 @@
|
||||
try {
|
||||
let res = await APIhome(formhomelist)
|
||||
var dates = new Date().getTime();
|
||||
res.list.forEach((item, index) => {
|
||||
res.records.forEach((item, index) => {
|
||||
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
@@ -307,7 +304,7 @@
|
||||
const showproductlist = ref(false);
|
||||
// 定义方法
|
||||
const openproductlist = (e) => {
|
||||
hometoplist.menu[viewHistoryindex.value].name = e //下标更改name
|
||||
hometoplist.menuList[viewHistoryindex.value].name = e //下标更改name
|
||||
showproductlist.value = !showproductlist.value
|
||||
}
|
||||
|
||||
@@ -327,7 +324,7 @@
|
||||
}
|
||||
// 是否有弹出层
|
||||
if (item.isChild) {
|
||||
showproductlist.value = showproductlist.value ? viewHistoryindex.value == index ? false : true : !
|
||||
showproductlist.value = showproductlist.value ? (viewHistoryindex.value == index ? false : true) : !
|
||||
showproductlist.value
|
||||
}
|
||||
viewHistoryindex.value = index
|
||||
|
||||
Reference in New Issue
Block a user