czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
魏啾
2024-04-30 18:27:43 +08:00
parent 25acfbeb91
commit 3b85017f91
24 changed files with 2846 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
pages/index/components/advertisement.vue
View File

@@ -6,15 +6,14 @@
<view class="onecontentright flex-start">
<view class="onecontentrightimage">
<view class="onecontentrightimageabsolute">
<u-swiper circular previousMargin='30' nextMargin="30" :list="bannervo.counponsInfo" keyName="logo"
radius="14" height='28' bgColor='none' imgMode='aspectFit'></u-swiper>
<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}">
<view class="children">
<image class="pic" :src="item.logo"></image>
</view>
</view>
</view>
<!-- <view class="onecontentrightimageabsolutetow">
<u-swiper circular previousMargin="30" nextMargin="30" :list="bannervo.logo" keyName="coverImg"
radius="14" height='28' bgColor='none' imgMode='aspectFit'></u-swiper>
</view> -->
</view>
<view class="onecontentrighttext">
<swiper class="swiper" circular :autoplay="true" :vertical='true' :interval="2000">
@@ -30,12 +29,22 @@
</template>
<script>
import customSwiper from '@/components/blackmonth-swiper/index'
export default {
components: {
customSwiper
},
data() {
return {
isScroll: false,
minCount: 0,
fontColor: 'black'
fontColor: 'black',
timersetInterval: '0', //定时器
slideNote: {
x: 0,
y: 0
},
screenWidth: 0
};
},
props: {
@@ -43,20 +52,68 @@
type: Object,
default () {
return {
coupons: '',
logo: []
counponsInfo: []
}
}
},
itemStyle: {
type: Array,
default () {
return []
}
},
title: {
type: String,
default: '每日特价'
},
img: {
timersetnteritem: {
type: String,
default: ''
},
default: '0'
}
},
watch: {
timersetnteritem(newVal, oldVal) {
console.log(newVal, oldVal)
if (newVal == 1) {
clearTimeout(this.timersetInterval);
this.timersetInterval = null;
} else {
this.timersetIntervalnewVal()
}
}
},
mounted() {
this.timersetIntervalnewVal()
},
methods: {
timersetIntervalnewVal() {
this.timersetInterval = setInterval(() => {
this.endMove()
}, 2000);
},
startMove(e) {
this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
},
endMove(e) {
// this.itemStyless = []
var newList = JSON.parse(JSON.stringify(this.itemStyle))
console.log(newList)
// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
// 向左滑动
var last = [newList.pop()]
newList = last.concat(newList)
// } else {
// 向右滑动
// newList.push(newList[0])
// newList.splice(0, 1)
// }
this.$emit('changeValue',newList);
this.$forceUpdate();
}
}
};
</script>
@@ -94,6 +151,42 @@
position: relative;
overflow: hidden;
height: 28rpx;
margin-right: 10rpx;
.swiperPanel {
height: 28rpx;
width: 100%;
overflow: hidden;
position: relative;
.swiperItem {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
/* 定义一个动画关键帧 */
.children {
height: 100%;
width: 25%;
// margin: 2rpx auto;
/* 应用动画，设置动画时长、循环次数和速度曲线 */
.pic {
height: 100%;
width: 100%;
border-radius: 50%;
// box-shadow: 0 0 10px #333;
}
}
}
}
.onecontentrightimageabsolute {
width: 100%;
@@ -101,6 +194,7 @@
top: 0;
position: absolute;
z-index: 9;
height: 28rpx;
}

15
pages/index/components/diamond.vue
View File

@@ -31,7 +31,6 @@
},
methods: {
clickdistrict(item) {
uni.pro.navigateTo('index/coupons/index');
switch (item.jumpType) {
case 'absolute':
uni.pro.navigateTo('webview/webview', {
@@ -39,7 +38,7 @@
});
break;
case 'relative':
uni.pro.navigateTo(item.absUrl);
uni.pro.navigateTo(item.absUrl,item);
break;
case 'scan':
if (!uni.utils.pluschooseImage()) {
@@ -52,7 +51,7 @@
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
success: res => {
// 当needResult 为 1 时，扫码返回的结果
console.log(res.resultStr,res)
console.log(res.resultStr, res)
}
});
} else {
@@ -68,7 +67,7 @@
// #ifdef APP || MP-WEIXIN
uni.scanCode({
success: res => {
console.log(res.result,res)
console.log(res.result, res)
}
});
// #endif
@@ -91,6 +90,9 @@
flex-wrap: nowrap;
.towcontent_item {
width: 25%;
margin-left: 34rpx;
image {
width: 92rpx;
height: 92rpx;
@@ -102,7 +104,12 @@
font-weight: 400;
font-size: 28rpx;
color: #333333;
white-space: nowrap;
}
}
.towcontent_item:nth-child(1) {
margin-left: 0rpx;
}
}
</style>

555
pages/index/drinks.vue Normal file
View File

@@ -0,0 +1,555 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat class="navbar" :opacity='opacitys' :title='titlename' :titleshow='false'></navseat>
<view class="onecontent">
<image class="onecontentimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/bsb.png" mode=" "></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>
</view>
<view class="towcontentlistxitembt flex-start">
<view class="towcontentlistxitembtitem" :class="index==1?'towcontentlistxitembtitemaktev':''"
v-for="(item,index) in 3" :key="index">
2小时销量飙升榜
</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 20" :key="index">
<view class="fivecontent_item_nav flex-start">
<image src="@/static/avatar.png" mode="aspectFill"></image>
<view class="fivecontent_item_nav_left">
<view class="fivecontent_item_nav_lefttop flex-between">
<view>
{{item.shopName}}
</view>
<view>
龙首.{{item.distances}}m
</view>
</view>
<view class="flex-start">
<view class="fivecontent_item_nav_leftlang flex-start"
v-for="(s,index1) in item.shopTag" :key="index1">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
mode="aspectFill"></image>
<text>{{s}}</text>
</view>
</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}}</view>
<text>已抢{{item.realSalesNumber}}份</text>
</view>
<view class="fivecontent_item_boxitemlefttow flex-start"
v-for="(c,index2) in item.proTag" :key="index2">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
mode="aspectFill"></image>
<text>{{c}}</text>
</view>
<view class="indexboxitemleftthere flex-colum-start">
<view class="indexboxitemleftthereabsolute">
马上抢
</view>
<view class="indexboxitemlefttheretext flex-start">
<view class="indexboxitemlefttheretextone">
<text>¥</text>
<text>{{item.salePrice}}</text>
</view>
<view class="indexboxitemlefttheretexttow">
¥{{item.discount}}
</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>
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, //吸顶初始距离
listbox: [{
name: '全部'
},
{
name: '美食正餐'
},
{
name: '饮品小吃'
}
],
form: {
address: '', //地址
type: '', //品类
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
distance: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
},
};
},
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() {
setTimeout(() => {
this.GetTop()
}, 1000)
},
computed: {
HeighT() { //手机类型的尺寸
return this.$store.getters.is_BarHeight
},
},
methods: {
//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)
})
}
})
},
towcontentclick(index) {
this.towcontentclickindex = index
}
}
};
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.content {
.onecontent {
width: 100%;
height: 492rpx;
position: relative;
.onecontentimage {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.after {
position: absolute;
bottom:32rpx;
right: 0;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
}
.onecontentabsolute {
position: absolute;
width: 100%;
padding: 0 52rpx;
bottom: 64rpx;
.onecontentabsoluteitem {
padding: 8rpx 16rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
image {
width: 24.16rpx;
height: 29.31rpx;
}
input {
padding: 0 16rpx;
flex: auto;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.onecontentabsoluteitembotton {
width: 120rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
border-radius: 28rpx 28rpx 28rpx 28rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 24rpx;
color: #333333;
}
}
}
}
.towcontent {
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%;
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;
right: 12rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 24rpx;
color: #FFFFFF;
}
.indexboxitemlefttheretext {
.indexboxitemlefttheretextone {
text {
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
font-weight: normal;
color: #FF5053;
}
text:nth-child(2) {
font-weight: bold;
font-size: 34rpx;
}
text:nth-child(1) {
font-size: 24rpx;
}
}
.indexboxitemlefttheretexttow {
margin-left: 12rpx;
font-size: 20rpx;
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
font-weight: normal;
color: #999999;
text-decoration: line-through;
}
}
.indexboxitemleftthere_countdown {
width: 100%;
padding-right: 7rpx;
.indexboxitemleftthere_countdowntext {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.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;
}
}
}
}
}
}
}
}
}
}
</style>

333
pages/index/freedaily.vue Normal file
View File

@@ -0,0 +1,333 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
<view class="onecontent">
<view class="onecontentabsolute"></view>
</view>
<view class="towcontent">
<view class="towcontentone">
<image class="towcontentoneimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd1.png"
mode="aspectFill"></image>
<view class="towcontentonebox">
<image class="towcontentoneboximage"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd2.png" mode="aspectFill">
</image>
<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"
:key="index">
<view class="swiper-item">{{item.userName}}* 免单{{item.orderAmount}}元订单号：{{item.orderNo}}
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="towcontentoness">
<view class="towcontentonebox_box">
订单数：82
</view>
<view class="towcontentonebox">
<view class="towcontentoneboxswiper">
<view class="swiper-item" style="margin-bottom: 32rpx;">
<view class="swiper_itemone">
金额
</view>
<view class="swiper_itemtow">
订单号
</view>
<view class="swiper_itemthere">
免单状态
</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>
<view class="towcontenttow">
注：每笔订单完成后30天内均有机会获得免单
</view>
</view>
</view>
</template>
<script>
import navseat from '@/components/navseat.vue'
export default {
components: {
navseat
},
data() {
return {
titlename: '今日上新',
opacity: false,
orderfindWiningUserlist: [],
form: {
address: '', //地址
type: '', //品类
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
other: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
},
};
},
onLoad(e) {
console.log(e)
this.orderfindWiningUser()
this.titlename = e.name
},
onPageScroll(e) {
if (e.scrollTop <= 44) { //搜索导航栏
this.opacity = false
} else {
this.opacity = true
}
},
methods: {
cut(str, firstStr, lastStr) {
let start = str.indexOf(firstStr);
let end = str.lastIndexOf(lastStr);
return str.slice(start, end + 1); //slice方法截取的部分不包括第二参数所在位置
},
async orderfindWiningUser() {
let res = await this.api.orderfindWiningUser()
this.orderfindWiningUserlist = res.data.map((i) => {
i.userName = i.userName.slice(0, 1)
return i
})
}
}
};
</script>
<style scoped lang="scss">
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%;
}
}
.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%);
.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: -30rpx;
left: 50%;
transform: translatex(-50%);
width: 118rpx;
height: 46rpx;
}
.towcontentonebox {
width: 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;
}
}
}
}
}
}
.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;
}
}
}
</style>

12
pages/index/hotlist.vue
View File

@@ -1,8 +1,9 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat class="navbar" :opacity='opacitys' :title='titlename'></navseat>
<navseat class="navbar" :opacity='opacitys' :title='titlename' :titleshow='false'></navseat>
<view class="onecontent">
<image class="onecontentimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/bsb.png" mode=" "></image>
<view class="onecontentabsolute">
</view>
</view>
@@ -215,8 +216,12 @@
width: 100%;
height: 492rpx;
position: relative;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/bsb.png) no-repeat;
background-size: cover;
.onecontentimage {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.onecontentabsolute {
position: absolute;
@@ -262,6 +267,7 @@
.towcontent {
position: relative;
margin-top: -32rpx;
.towcontentlistxitemboxfixed {
position: fixed;
top: 0;

41
pages/index/index.vue
View File

@@ -43,10 +43,8 @@
<!-- 轮播图 -->
<swipers :carousel='hometoplist.carousel'></swipers>
<!-- 广告 -->
<advertisement :bannervo='hometoplist.bannerVO'></advertisement>
<view class="" style="width: 200rpx;">
<!-- <customSwiper :swiper-list="hometoplist.bannerVO.counponsInfo" :timersetnteritem='timersetInterval' /> -->
</view>
<advertisement :bannervo='hometoplist.bannerVO' :itemStyle='itemStyle'
:timersetnteritem='timersetInterval' @changeValue="changeParentValue"></advertisement>
<!-- 金刚区 -->
<diamond :district='hometoplist.district'></diamond>
<!-- 今日上线 -->
@@ -244,6 +242,8 @@
district: [],
},
itemStyle: [ //样式
],
homelist: [], //下面数据
clickhometoplistmenulist: {}, //下拉点击的数据
form: {
@@ -291,16 +291,14 @@
setTimeout(() => {
this.GetTop()
}, 1000)
},
onReachBottom() {
this.onLoadhome()
},
onShow() {
this.hometop()
this.init_fn()
this.timersetInterval = '0'
},
methods: {
closeproductlist() {
@@ -332,11 +330,40 @@
}
})
},
changeParentValue(newValue) {
console.log(newValue)
this.itemStyle = newValue
},
getStyle(e) {
if (e > this.hometoplist.bannerVO.counponsInfo.length / 2) {
var right = this.hometoplist.bannerVO.counponsInfo.length - e
return {
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
zIndex: 9999 - right,
opacity: 1
}
} else {
return {
transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
zIndex: 9999 - e,
opacity: 1
}
}
},
// 首页上面数据
async hometop() {
try {
let res = await this.api.homehomePageUp()
this.hometoplist = res.data
if (this.hometoplist.bannerVO.counponsInfo) {
this.itemStyle = []
this.hometoplist.bannerVO.counponsInfo.forEach((item,
index) => {
this.itemStyle.push(this.getStyle(index))
})
}
// 计算swiper样式
} catch (e) {}
},
// 下面初始数据

15
pages/index/jtoday.vue
View File

@@ -1,8 +1,9 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat :opacity='opacity' :title='titlename'></navseat>
<navseat :opacity='opacity' :title='titlename' :titleshow='false'></navseat>
<view class="onecontent">
<image class="onecontentimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/nav.png" mode=""></image>
<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>
@@ -130,9 +131,15 @@
width: 100%;
height: 492rpx;
position: relative;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/nav.png) no-repeat;
background-size: cover;
.onecontentimage{
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/nav.png) no-repeat;
background-size: cover;
}
.onecontentabsolute {
position: absolute;
width: 100%;

300
pages/index/tothestore.vue Normal file
View File

@@ -0,0 +1,300 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat :opacity='opacity' :title='toplist.name' :titleshow='false'></navseat>
<view class="onecontent">
<image class="onecontentimage" :src="toplist.coverImg" mode=""></image>
<view class="onecontentabsolute">
</view>
</view>
<view class="towcontent">
<view class="fivecontent_item flex-between" v-for="(item,index) in list.list" :key="index">
<view class="fivecontent_itemone flex-start">
<image class="fivecontent_itemoneimage" :src="item.coverImg" mode=""></image>
<view class="fivecontent_itemonebox">
<view class="fivecontent_itemoneboxone flex-start">
<view class="fivecontent_itemoneboxone_o">
热销TOP{{index}}
</view>
<view class="fivecontent_itemoneboxone_t">
{{item.shopName}}
</view>
</view>
<view class="fivecontent_itemoneboxtow flex-start">
<image class="fivecontent_itemoneboxtowimage"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="widthFix"></image>
<view class="fivecontent_itemoneboxtow_o">
{{item.address}}
</view>
<view class="fivecontent_itemoneboxtow_t">
{{item.distances}}km
</view>
</view>
</view>
</view>
<view class="fivecontent_itemtow" @click="makePhoneCall(item)">
马上预约
</view>
</view>
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
</view>
<!-- 小内切圆 -->
<!-- <view class="after"></view> -->
</view>
</template>
<script>
import navseat from '@/components/navseat.vue'
export default {
components: {
navseat
},
data() {
return {
titlename: '今日上新',
opacity: false,
list: {},
toplist: {},
form: {
address: '', //地址
type: '', //品类
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
other: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
},
};
},
onPageScroll(e) {
if (e.scrollTop <= 44) { //搜索导航栏
this.opacity = false
} else {
this.opacity = true
}
},
onReachBottom() {
this.onLoadhome()
},
onShow() {
this.init_fn()
this.distiricttopCommon()
},
methods: {
init_fn(e) {
this.list = []
this.form.page = 1 //页数
this.form.size = 10 //页数
this.form.status = 'loadmore' //页数
this.distirictsubShopList()
},
makePhoneCall(item) {
uni.makePhoneCall({
phoneNumber: item.phone //仅为示例
});
},
async distiricttopCommon() {
let res = await this.api.distiricttopCommon({
type: 'subShop', //团购卷品类Id/subShop-预约到店
orderBy: ''
})
console.log(res.data)
if (res.code == 0) {
this.toplist = res.data.carousel[0]
}
},
async distirictsubShopList() {
let res = await this.api.distirictsubShopList({
address: '西安市', //地址
lng: '108.949158',
lat: '34.301731',
distanceInKm: '10', //默认10 以经纬度为中心 多大范围以内 单位km
isPage: '', //是否分页 1分页 0不分页
page: this.form.page, //页数
size: this.form.size, //页容量
})
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)
}
this.list = res.data
}
}
};
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.content {
.onecontent {
width: 100%;
height: 460rpx;
position: relative;
.onecontentimage {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.onecontentabsolute {
position: absolute;
width: 100%;
padding: 0 52rpx;
bottom: 64rpx;
.onecontentabsoluteitem {
padding: 8rpx 16rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
image {
width: 24.16rpx;
height: 29.31rpx;
}
input {
padding: 0 16rpx;
flex: auto;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.onecontentabsoluteitembotton {
width: 120rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
border-radius: 28rpx 28rpx 28rpx 28rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 24rpx;
color: #333333;
}
}
}
}
.towcontent {
position: relative;
margin-top: -32rpx;
padding: 32rpx 28rpx;
border-radius: 24rpx 24rpx 0rpx 0rpx;
background: #F9F9F9;
.fivecontent_item:nth-child(1) {
margin-top: 0;
}
.fivecontent_item {
background: #FFFFFF;
padding: 16rpx 24rpx;
margin-top: 32rpx;
width: 100%;
border-radius: 10rpx 10rpx 10rpx 10rpx;
.fivecontent_itemone {
.fivecontent_itemoneimage {
width: 84rpx;
height: 84rpx;
border-radius: 16rpx;
}
.fivecontent_itemonebox {
margin-left: 16rpx;
height: 84rpx;
display: flex;
flex-direction: column;
.fivecontent_itemoneboxone {
.fivecontent_itemoneboxone_o {
padding: 2rpx 8rpx;
background: linear-gradient(116deg, #FF9D2B 0%, #FF4805 100%);
border-radius: 4rpx 4rpx 4rpx 4rpx;
font-family: Roboto, Roboto;
font-weight: 500;
font-size: 16rpx;
color: #FFFFFF;
}
.fivecontent_itemoneboxone_t {
margin-left: 12rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
.fivecontent_itemoneboxtow {
margin-top: 10rpx;
.fivecontent_itemoneboxtowimage {
width: 24rpx;
height: 24rpx;
}
.fivecontent_itemoneboxtow_o {
margin-left: 8rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.fivecontent_itemoneboxtow_t {
margin-left: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
}
}
.fivecontent_itemtow {
padding: 8rpx 16rpx;
background: #FEE06A;
border-radius: 24rpx 24rpx 24rpx 24rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 24rpx;
color: #333333;
}
}
}
.after {
position: absolute;
top: -40rpx;
right: 0;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
}
}
</style>