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

首頁組件

Browse Source
This commit is contained in:
魏啾
2024-04-15 16:15:09 +08:00
parent 289b808bf6
commit 091552233c
36 changed files with 3452 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.hbuilderx/launch.json
View File

@@ -18,6 +18,10 @@
{ {
"playground" : "custom", "playground" : "custom",
"type" : "uni-app:app-android" "type" : "uni-app:app-android"
},
{
"playground" : "standard",
"type" : "uni-app:app-ios"
} }
] ]
} }

130
App.vue
View File

@@ -10,70 +10,70 @@
// console.log('App Show'); // console.log('App Show');
try { try {
// #ifdef APP-PLUS // #ifdef APP-PLUS
uni.getSystemInfo({ // uni.getSystemInfo({
success: (res) => { // success: (res) => {
let system = res; // let system = res;
if (system.platform == 'ios') { // if (system.platform == 'ios') {
console.log('ios', 64); // console.log('ios', 64);
uni.request({ // uni.request({
url: uni.conf.baseUrl + '/api/systemConfig/updateSystemVersion?platformCode=' + 1, // url: uni.conf.baseUrl + '/api/systemConfig/updateSystemVersion?platformCode=' + 1,
method: 'POST', // method: 'POST',
// header: { // // header: {
// userId: uni.getStorageSync('userId'), // // userId: uni.getStorageSync('userId'),
// token: uni.getStorageSync('token'), // // token: uni.getStorageSync('token'),
// myLoginName: uni.getStorageSync('myLoginName') // // myLoginName: uni.getStorageSync('myLoginName')
// }, // // },
success: (res) => { // success: (res) => {
let datares = res.data; // let datares = res.data;
// uni.showToast({ // // uni.showToast({
// title: res.message || res.msg, // // title: res.message || res.msg,
// icon: "none", // // icon: "none",
// }) // // })
// console.log(datares, '11111111') // // console.log(datares, '11111111')
if (datares.code == 200) { // if (datares.code == 200) {
uni.is_update = datares.data.versionCode; //是版本号，判断是否升级 // uni.is_update = datares.data.versionCode; //是版本号，判断是否升级
uni.is_force = datares.data.forceUpdate; //是否强制更新 1：强制 0：未强制 // uni.is_force = datares.data.forceUpdate; //是否强制更新 1：强制 0：未强制
uni.versionName = datares.data.versionName; //是版本号 显示版本号 // uni.versionName = datares.data.versionName; //是版本号 显示版本号
uni.is_wgt = 0; //是热更新 目前好像没有该功能 // uni.is_wgt = 0; //是热更新 目前好像没有该功能
uni.updateUrlApp = datares.data.url; //是下载地址 // uni.updateUrlApp = datares.data.url; //是下载地址
uni.update_content = datares.data.updateInfo; //版本说明 // uni.update_content = datares.data.updateInfo; //版本说明
// uni.pro.switchTab('index/index'); // // uni.pro.switchTab('index/index');
} // }
}, // },
fail: (res) => { // fail: (res) => {
// uni.showToast({ // // uni.showToast({
// title: res.message || res.msg, // // title: res.message || res.msg,
// icon: "none", // // icon: "none",
// }) // // })
} // }
}); // });
} else { // } else {
console.log(res, 66); // console.log(res, 66);
uni.request({ // uni.request({
url: uni.conf.baseUrl + '/api/systemConfig/updateSystemVersion?platformCode=' + 0, // url: uni.conf.baseUrl + '/api/systemConfig/updateSystemVersion?platformCode=' + 0,
method: 'POST', // method: 'POST',
// header: { // // header: {
// userId: uni.getStorageSync('userId'), // // userId: uni.getStorageSync('userId'),
// token: uni.getStorageSync('token'), // // token: uni.getStorageSync('token'),
// myLoginName: uni.getStorageSync('myLoginName') // // myLoginName: uni.getStorageSync('myLoginName')
// }, // // },
success: (res) => { // success: (res) => {
let datares = res.data; // let datares = res.data;
console.log(res); // console.log(res);
if (datares.code == 200) { // if (datares.code == 200) {
uni.is_update = datares.data.versionCode; //是版本号，判断是否升级 // uni.is_update = datares.data.versionCode; //是版本号，判断是否升级
uni.is_force = datares.data.forceUpdate; //是否强制更新 1：强制 0：未强制 // uni.is_force = datares.data.forceUpdate; //是否强制更新 1：强制 0：未强制
uni.versionName = datares.data.versionName; //是版本号 显示版本号 // uni.versionName = datares.data.versionName; //是版本号 显示版本号
uni.is_wgt = 0; //是热更新 目前好像没有该功能 // uni.is_wgt = 0; //是热更新 目前好像没有该功能
uni.updateUrlApp = datares.data.url; //是下载地址 // uni.updateUrlApp = datares.data.url; //是下载地址
uni.update_content = datares.data.updateInfo; //版本说明 // uni.update_content = datares.data.updateInfo; //版本说明
// uni.pro.switchTab('index/index'); // // uni.pro.switchTab('index/index');
} // }
} // }
}); // });
} // }
} // }
}); // });
// #endif // #endif
} catch (e) {} } catch (e) {}
}, },
@@ -139,7 +139,7 @@
} }
page { page {
background-color: #f2f2f2; background-color: #F9F9F9;
} }
text { text {

153
components/blackmonth-swiper/index.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<view>
<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
<view class="swiperItem" v-for="(item, index) in swiperList" :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>
<!-- <swiper class="swiperItem" circular v-for="(item, index) in swiperList" :key="index"
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
<swiper-item class="children">
<image class="pic" :src="item.logo"></image>
</swiper-item>
</swiper> -->
</view>
</template>
<script>
export default {
props: {
swiperList: {
type: Array,
default () {
return []
}
},
timersetnteritem: {
type: String,
default: '0'
}
},
data() {
return {
timersetInterval: null,
slideNote: {
x: 0,
y: 0
},
screenWidth: 0,
itemStyle: []
};
},
watch: {
timersetnteritem(newVal,oldVal) {
if (newVal == 1) {
clearTimeout(this.timersetInterval);
this.timersetInterval = null;
}
}
},
created() {
var macInfo = uni.getSystemInfoSync();
this.screenWidth = macInfo.screenWidth;
// 计算swiper样式
this.swiperList.forEach((item, index) => {
this.itemStyle.push(this.getStyle(index))
})
this.timersetInterval = setInterval(() => {
this.endMove()
}, 2000);
},
methods: {
getStyle(e) {
if (e > this.swiperList.length / 2) {
var right = this.swiperList.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
}
}
// if (e > this.swiperList.length / 2) {
// var right = this.swiperList.length - e
// return {
// transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
// zIndex: 9999 - right,
// opacity: 0.8 / right
// }
// } else {
// return {
// transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
// zIndex: 9999 - e,
// opacity: 0.8 / e
// }
// }
},
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) {
console.log(e, 86)
var newList = JSON.parse(JSON.stringify(this.itemStyle))
// 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.itemStyle = newList
}
}
}
</script>
<style lang="scss">
.swiperPanel {
margin: 20rpx 0;
height: 100rpx;
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;
}
}
}
}
</style>

145
components/navseat.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<view class="content">
<!-- 导航栏 -->
<view class="navbar" :class="{active:opacity}">
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
<view class="status-bar"></view>
<view class="navbar_tow flex-between"
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="navbar_tow flex-between"
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
<!-- #endif -->
<!-- 标题搜索框 -->
<view class="flex-between" @click="clicknavigateBack">
<view class="navbar_tow_one flex-start">
<u-icon name="arrow-left" color="#000" size="40"></u-icon>
</view>
<view class="navbar_tow_tow" v-if="opacity">
{{title}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
title: {
type: String,
default: ''
},
opacity: {
type: Boolean,
default: false
},
},
computed: {
HeighT() { //手机类型的尺寸
return this.$store.getters.is_BarHeight
},
},
methods: {
clicknavigateBack(){
uni.navigateBack()
}
}
};
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.content {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999999;
.active {
background: rgba(249, 249, 249, 1);
}
.status-bar {
// #ifdef APP-PLUS
height: calc(var(--status-bar-height) / 2);
// #endif
// #ifdef MP-WEIXIN
height: var(--status-bar-height);
// #endif
}
// #ifdef APP-PLUS
.statusbarmargin {
margin-top: var(--status-bar-height);
}
// #endif
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
.navbar_tow {
width: 100%;
position: relative;
font-size: 36rpx;
.flex-between {
// #ifdef APP-PLUS || H5
margin: 28rpx;
// #endif
// #ifdef MP-WEIXIN
margin-left: 28rpx;
// #endif
width: 100%;
flex-wrap: nowrap;
height: 100%;
line-height: 100%;
.navbar_tow_one {
height: 100%;
line-height: 100%;
text:nth-child(1) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
text:nth-child(2) {
margin-left: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
.navbar_tow_tow {
flex: auto;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
}
}
}
</style>

209
components/qiyue-category/qiyue-category.vue Normal file
View File

@@ -0,0 +1,209 @@
<template>
<view class="nav">
<view class="nav-left">
<scroll-view scroll-y>
<view class="nav-left-item" v-for="(item, index) in categoryList"
@click="categoryClickMain(item, index)" :key="index"
:style="index == categoryActive ? 'color:' + activeTextColor + ';background-color:' + activeBackgroundColor : ''">
{{ item[label] }}
</view>
</scroll-view>
</view>
<view class="nav-right" v-if="!subCategoryList.length == 0">
<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="loadMore"
scroll-with-animation>
<view class="nav-right-item" v-for="(item, index2) in subCategoryList" :key="index2"
@click="categoryClickSub(item)">
<view>{{ item[label] }}</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
name: 'category',
data() {
return {
h: null,
namelang: '',
keyword: '请输入相关行业',
height: 0,
scrollTop: 0,
scrollHeight: 0,
categoryActive: 0,
activeStyle: {
color: this.activeTextColor,
backgroundColor: this.activeBackgroundColor
}
};
},
props: {
//主分类激活索引
merchant: {
type: Number,
default: 1
},
defaultActive: {
type: Number,
default: 0
},
//主分类List
categoryList: {
type: Array,
default: () => {
return null;
}
},
//侧边分类List
subCategoryList: {
type: Array,
default: () => {
return null;
}
},
activeTextColor: {
type: String,
default: '#FF981E'
},
activeBackgroundColor: {
type: String,
default: '#fff'
},
label: {
type: String,
default: 'name'
},
imgSrc: {
type: String,
default: 'logo'
},
//主分类点击事件
categoryMainClick: {},
//子分类点击事件
categorySubClick: {}
},
methods: {
async computed_h() {
//获取div宽度
let content_Icon = await uni.utils.info_distance('Box_top');
let content_top_box = await uni.utils.info_distance('Box_text');
let system_info = await uni.getSystemInfo();
var h_ = system_info.windowHeight + 'px';
this.h = {
height: h_
};
},
scroll(e) {
this.scrollHeight = e.detail.scrollHeight;
},
categoryClickMain(category, index) {
this.namelang = category.name
this.$emit('categoryMainClick', {
'category': category,
'index': index
});
this.categoryActive = index;
this.scrollTop = -this.scrollHeight * index;
},
loadMore(e) {
console.log(e)
this.$emit('loadMores');
},
categoryClickSub(category) {
this.$emit('categorySubClick', category);
},
searchkeyword() {
this.$emit('searchkeyword', this.keyword)
},
},
mounted() {
this.categoryActive = this.defaultActive;
this.computed_h();
// uni.getSystemInfo({
// success: res => {
// console.log(res);
// this.height = res.windowHeight;
// }
// });
},
watch: {
subCategoryList(newValue, oldValue) {}
}
};
</script>
<style scoped>
.Box_top {
padding: 32rpx 28rpx;
}
.Box_text {
background: #f1f0f5;
padding: 10rpx 28rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #999999;
}
.Box_texttext {
margin-left: 16rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
}
.nav {
display: flex;
width: 100%;
}
.nav-left {
max-height: 600rpx;
width: 30%;
overflow: auto;
}
.nav-left-item {
padding: 10rpx 0;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.nav-right {
width: 70%;
max-height: 600rpx;
overflow: auto;
}
.nav-right-item {
width: 100%;
border-left: solid 1px #e0e0e0;
/* height: 100px; */
text-align: left;
padding: 24rpx 32rpx;
font-size: 13px;
}
.nav-right-item image {
width: 50px;
height: 50px;
}
.active {
color: #f24544;
}
.padding {
height: var(--status-bar-height);
width: 100%;
top: 0;
position: fixed;
background-color: #f24544;
}
</style>

6
framework/0-conf.js
View File

@@ -9,12 +9,12 @@ const proxyApi = 'https://wxcashiertest.sxczgkj.cn/cashierService'
// #endif // #endif
// #ifdef H5 // #ifdef H5
const baseUrl = debug ? proxyApi : "https://cashier.sxczgkj.cn/cashierService" const baseUrl = debug ? proxyApi : "https://wxcashiertest.sxczgkj.cn/cashierService"
const baseUrlwws = 'wss://cashier.sxczgkj.cn/cashierService' // 线上 const baseUrlwws = 'wss://cashier.sxczgkj.cn/cashierService' // 线上
// #endif // #endif
// #ifdef APP || MP-WEIXIN // #ifdef APP || MP-WEIXIN
const baseUrl = debug ? proxyApi : 'https://cashier.sxczgkj.cn/cashierService' const baseUrl = debug ? proxyApi : 'https://wxcashiertest.sxczgkj.cn/cashierService'
const baseUrlwws = 'wss://cashier.sxczgkj.cn/cashierService' // 线上 const baseUrlwws = 'wss://wxcashiertest.sxczgkj.cn/cashierService' // 线上
// #endif // #endif
// import VConsole from "./vConsole.js" // import VConsole from "./vConsole.js"

9
framework/11-api.js
View File

@@ -46,7 +46,7 @@ function requestrequest(options) {
async function request(options) { async function request(options) {
try { try {
if (options.toast) { if (options.toast) {
// #ifdef MP-WEIXIN || MP-ALIPAY // #ifdef MP-WEIXIN || APP-PLUS
uni.showLoading({ uni.showLoading({
title: '加载中', title: '加载中',
mask: true mask: true
@@ -66,6 +66,9 @@ async function request(options) {
// #ifdef APP-PLUS // #ifdef APP-PLUS
environment: 'app', environment: 'app',
// #endif // #endif
// #ifdef H5
environment: 'app',
// #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
environment: 'wx', environment: 'wx',
// #endif // #endif
@@ -76,7 +79,7 @@ async function request(options) {
} else { } else {
} }
// #ifdef MP-WEIXIN || MP-ALIPAY // #ifdef MP-WEIXIN || APP-PLUS
options.url = uni.conf.baseUrl + options.url options.url = uni.conf.baseUrl + options.url
let res = await requestrequest(options); let res = await requestrequest(options);
// #endif // #endif
@@ -84,7 +87,7 @@ async function request(options) {
let res = await uni.pro.request(options); let res = await uni.pro.request(options);
// #endif // #endif
if (res.code != 0) { if (res.code != 0) {
if (res.code == 401) { if (res.code == -4) {
uni.showToast({ uni.showToast({
title: res.message || res.msg, title: res.message || res.msg,
icon: "none", icon: "none",

7
manifest.json
View File

@@ -58,7 +58,10 @@
"mp-weixin" : { "mp-weixin" : {
"appid" : "wxd88fffa983758a30", "appid" : "wxd88fffa983758a30",
"setting" : { "setting" : {
"urlCheck" : false "urlCheck" : false,
"minified" : true,
"es6" : true,
"postcss" : true
}, },
"usingComponents" : true, "usingComponents" : true,
"libVersion" : "latest" "libVersion" : "latest"
@@ -69,7 +72,7 @@
"disableHostCheck" : false, "disableHostCheck" : false,
"proxy" : { "proxy" : {
"/api" : { "/api" : {
"target" : "https://cashier.sxczgkj.cn/cashierService", "target" : "https://wxcashiertest.sxczgkj.cn/cashierService",
// "target" : "https://ky.sxczgkj.cn", // "target" : "https://ky.sxczgkj.cn",
"ws" : false, "ws" : false,
"changeOrigin" : true, //是否跨域 "changeOrigin" : true, //是否跨域

18
pages.json
View File

@@ -6,6 +6,20 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{
"path": "pages/index/jtoday",
"style": {
"navigationBarTitleText": "每日上新",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/hotlist",
"style": {
"navigationBarTitleText": "热榜推荐",
"navigationStyle": "custom"
}
},
{ {
"path": "pages/index/uindexlist", "path": "pages/index/uindexlist",
"style": { "style": {
@@ -51,7 +65,9 @@
{ {
"path": "pages/user/user", "path": "pages/user/user",
"style": { "style": {
"navigationBarTitleText": "个人中心" "navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor": "#FFD158",
"navigationBarTextStyle": "white"
} }
}, },
{ {

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

@@ -1,15 +1,27 @@
<template> <template>
<view class="onecontent flex-between"> <view class="onecontent flex-between">
<view class="onecontentleft"> <view class="onecontentleft">
现有<text>0元无门槛</text>抵价券 正在出售 现有{{bannervo.coupons}}人以免单
</view> </view>
<view class="onecontentright flex-start"> <view class="onecontentright flex-start">
<view class="onecontentrightimage flex-start"> <view class="onecontentrightimage">
<u-swiper class="onecontentrightswiper" circular style="width: 100%;" nextMargin="50" :list="list1" <view class="onecontentrightimageabsolute">
height='28'></u-swiper> <u-swiper circular previousMargin='30' nextMargin="30" :list="bannervo.counponsInfo" keyName="logo"
radius="14" height='28' bgColor='none' imgMode='aspectFit'></u-swiper>
</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>
<view class="onecontentrighttext"> <view class="onecontentrighttext">
text1 <swiper class="swiper" circular :autoplay="true" :vertical='true' :interval="2000">
<swiper-item class="swiperitem" v-for="(item,index) in bannervo.counponsInfo" :key="index">
{{item.name}}已省{{item.money}}元钱
</swiper-item>
</swiper>
</view> </view>
</view> </view>
<!-- 小内切圆 --> <!-- 小内切圆 -->
@@ -21,15 +33,30 @@
export default { export default {
data() { data() {
return { return {
list1: [ isScroll: false,
'https://cdn.uviewui.com/uview/swiper/swiper1.png', minCount: 0,
'https://cdn.uviewui.com/uview/swiper/swiper2.png', fontColor: 'black'
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
],
text1:'开箱即用',
}; };
}, },
props: {
bannervo: {
type: Object,
default () {
return {
coupons: '',
logo: []
}
}
},
title: {
type: String,
default: '每日特价'
},
img: {
type: String,
default: ''
},
},
}; };
</script> </script>
@@ -53,19 +80,63 @@
} }
} }
.onecontentright { .onecontentright {
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #333333; color: #333333;
.onecontentrightimage { .onecontentrightimage {
width: 90rpx; width: 90rpx;
position: relative;
overflow: hidden;
height: 28rpx;
.onecontentrightswiper { .onecontentrightimageabsolute {
border: 50%; width: 100%;
width: 28rpx; left: 0;
top: 0;
position: absolute;
z-index: 9;
}
.onecontentrightimageabsolutetow {
width: 100%;
left: 14rpx;
top: 0;
position: absolute;
z-index: 10;
}
// .onecontentrightswiper {
// border: 50%;
// width: 28rpx;
// height: 28rpx;
// background: red;
// }
}
.onecontentrighttext {
width: 232rpx;
.swiper {
height: 28rpx; height: 28rpx;
// width: 232rpx;
.swiperitem {
width: 100rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #333333;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
} }
} }

70
pages/index/components/todaylist.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<view class="therecontent flex-between"> <view class="therecontent flex-between">
<view class="therecontent_box_item"> <view class="therecontent_box_item">
<view class="therecontent_box_imge flex-between"> <view class="therecontent_box_imge flex-between" @click="jrtoday(0)">
<view class="therecontent_box_imge_text"> <view class="therecontent_box_imge_text">
{{todayList.name}} {{todayList.name}}
</view> </view>
@@ -14,17 +14,17 @@
</view> </view>
<view class="therecontent_box_itembox"> <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.todayList"
:key="item"> :key="index">
<image :src="item.image" mode="aspectFill"></image> <image :src="item.image" mode="aspectFill"></image>
<view class="therecontent_box_itembox_itemview"> <view class="therecontent_box_itembox_itemview flex-colum-start">
<view class="therecontent_box_itembox_itemviewone"> <view class="therecontent_box_itembox_itemviewone">
{{item.productName}} <text style="margin-left: 0;">{{item.productName}}</text>
</view> </view>
<view class="therecontent_box_itembox_itemviewtow flex-start"> <view class="therecontent_box_itembox_itemviewtow flex-around">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/xia.png" mode="widthFix"> <image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/xia.png" mode="widthFix">
</image> </image>
<view> <view>
8折 {{item.discount || '1'}}折
</view> </view>
</view> </view>
<view class="therecontent_box_itembox_itemviewthere flex-start"> <view class="therecontent_box_itembox_itemviewthere flex-start">
@@ -37,7 +37,7 @@
</view> </view>
<view class="therecontent_box_item"> <view class="therecontent_box_item">
<view class="therecontent_box_imge flex-between" <view class="therecontent_box_imge flex-between"
style="background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box2.png) no-repeat;"> style="background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box2.png) no-repeat; background-size: cover;" @click="jrtoday(1)">
<view class="therecontent_box_imge_text"> <view class="therecontent_box_imge_text">
{{salesList.name}} {{salesList.name}}
</view> </view>
@@ -49,21 +49,18 @@
</view> </view>
</view> </view>
<view class="therecontent_box_itembox"> <view class="therecontent_box_itembox">
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in salesList.hotList" :key="item"> <view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in salesList.hotList"
<image :src="item.image" mode="aspectFill"></image> :key="index">
<view class="therecontent_box_itembox_itemview"> <image :src="item.image" 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_itemviewone flex-start">
<view class="therecontent_box_itembox_itemviewoneafter"> <view class="therecontent_box_itembox_itemviewoneafter">
TOP.{{index + 1}} TOP.{{index + 1}}
</view> </view>
<text>{{item.productName}}</text> <text>{{item.productName}}</text>
</view> </view>
<view class="therecontent_box_itembox_itemviewtow flex-start"> <view class="therecontent_box_itembox_itemviewtowdiscount flex-around">
<image :src="item.image"> 已抢{{item.realSalesNumber}}份
</image>
<view>
8折
</view>
</view> </view>
<view class="therecontent_box_itembox_itemviewthere flex-start"> <view class="therecontent_box_itembox_itemviewthere flex-start">
<text>￥{{item.salePrice}}</text> <text>￥{{item.salePrice}}</text>
@@ -85,13 +82,17 @@
salesList: { salesList: {
type: Object, type: Object,
default () { default () {
return {} return {
salesList:[]
}
} }
}, },
todayList: { todayList: {
type: Object, type: Object,
default () { default () {
return {} return {
todayList:[]
}
} }
}, },
title: { title: {
@@ -99,13 +100,21 @@
default: '每日特价' default: '每日特价'
} }
}, },
methods:{
jrtoday(e){
if(e == 0){
uni.pro.navigateTo('index/jtoday')
}else{
uni.pro.navigateTo('index/hotlist')
}
}
}
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.therecontent { .therecontent {
padding: 0 28rpx; padding: 0 28rpx;
background: #F9F9F9;
.therecontent_box_item { .therecontent_box_item {
width: 336rpx; width: 336rpx;
@@ -117,6 +126,7 @@
.therecontent_box_itembox_item { .therecontent_box_itembox_item {
margin-top: 20rpx; margin-top: 20rpx;
flex-wrap: nowrap;
image { image {
width: 114rpx; width: 114rpx;
@@ -133,19 +143,21 @@
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #333333; color: #333333;
text{ text {
margin-left: 4rpx;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.therecontent_box_itembox_itemviewoneafter{
.therecontent_box_itembox_itemviewoneafter {
width: 48rpx; width: 48rpx;
height: 24rpx; height: 24rpx;
line-height: 24rpx; line-height: 24rpx;
text-align: center; 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; border-radius: 4rpx 4rpx 4rpx 4rpx;
font-family: Roboto, Roboto; font-family: Roboto, Roboto;
font-weight: 500; font-weight: 500;
@@ -157,7 +169,7 @@
.therecontent_box_itembox_itemviewtow { .therecontent_box_itembox_itemviewtow {
margin-top: 8rpx; margin-top: 8rpx;
width: 60rpx; width: 60rpx;
padding: 4rpx 10rpx; // padding: 4rpx 10rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 4rpx; border-radius: 4rpx;
border: 2rpx solid #FF7127; border: 2rpx solid #FF7127;
@@ -168,6 +180,7 @@
} }
view { view {
padding-right: 2rpx;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold; font-weight: bold;
font-size: 16rpx; font-size: 16rpx;
@@ -175,12 +188,21 @@
} }
} }
.therecontent_box_itembox_itemviewtowdiscount {
margin-top: 10rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
}
.therecontent_box_itembox_itemviewthere { .therecontent_box_itembox_itemviewthere {
margin-top: 4rpx; margin-top: 4rpx;
align-items: flex-end;
text:nth-child(1) { text:nth-child(1) {
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500; font-weight: Bold;
font-size: 24rpx; font-size: 24rpx;
color: #FF7127; color: #FF7127;
} }

548
pages/index/hotlist.vue Normal file
View File

@@ -0,0 +1,548 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat class="navbar" :opacity='opacitys' :title='titlename'></navseat>
<view class="onecontent">
<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 class="after"></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;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/bsb.png) no-repeat;
background-size: cover;
.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 24rpx 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;
}
}
}
}
}
}
}
}
}
.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>

371
pages/index/index.vue
View File

@@ -8,8 +8,7 @@
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}"> :style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-PLUS --> <!-- #ifdef APP-PLUS -->
<view class="status-bar"></view> <view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
<view class="navbar_tow flex-between">
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<view class="navbar_tow flex-between" <view class="navbar_tow flex-between"
@@ -18,8 +17,8 @@
<!-- 标题搜索框 --> <!-- 标题搜索框 -->
<view class="flex-between"> <view class="flex-between">
<view class="navbar_tow_one flex-start" @click="uindexlist"> <view class="navbar_tow_one flex-start" @click="uindexlist">
<text>美味抢先点</text> <text class="textnth-childone">美味抢先点</text>
<text>西安</text> <text class="textnth-childtow">西安</text>
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" <u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
size="16"></u-icon> size="16"></u-icon>
</view> </view>
@@ -30,20 +29,24 @@
</view> </view>
</view> </view>
<!-- 吸顶 --> <!-- 吸顶 -->
<view v-if="isFixedTop" class="fourcontent flex-between" style="padding: 28rpx 0 28rpx 28rpx"> <view v-if="isFixedTop" class="fourcontent flex-between">
<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.menu" :key="index"
@click="viewHistory(item,index)"
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
<text>{{item.name}}</text> <text>{{item.name}}</text>
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" <u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
size="16"></u-icon> color="#333333" size="16"></u-icon>
</view> </view>
</view> </view>
</view> </view>
<!-- 以上都是导航栏处理 --> <!-- 以上都是导航栏处理 -->
<!-- 轮播图 --> <!-- 轮播图 -->
<swipers :carousel='hometoplist.carousel'></swipers> <swipers :carousel='hometoplist.carousel'></swipers>
<!-- 广告 --> <!-- 广告 -->
<advertisement></advertisement> <advertisement :bannervo='hometoplist.bannerVO'></advertisement>
<view class="" style="width: 200rpx;">
<!-- <customSwiper :swiper-list="hometoplist.bannerVO.counponsInfo" :timersetnteritem='timersetInterval' /> -->
</view>
<!-- 金刚区 --> <!-- 金刚区 -->
<diamond :district='hometoplist.district'></diamond> <diamond :district='hometoplist.district'></diamond>
<!-- 今日上线 --> <!-- 今日上线 -->
@@ -51,28 +54,20 @@
<!-- 类目 --> <!-- 类目 -->
<view class="fourcontent flex-between"> <view class="fourcontent flex-between">
<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.menu" :key="index"
@click="viewHistory(item)"> @click="viewHistory(item,index)"
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
<text>{{item.name}}</text> <text>{{item.name}}</text>
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" <u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
size="16"></u-icon> size="16"></u-icon>
</view> </view>
</view> </view>
<!-- 盒子撑开 --> <view class="fivecontent" :style="{'height':seighT + 'px'}">
<!-- #ifdef MP-WEIXIN --> <!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"
<view v-if="isFixedTop" :style="isFixedTop?`height:${fourcontentHeighT}px`:''"></view> scroll-with-animation> -->
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view v-if="isFixedTop" :style="isFixedTop?`height:${fourcontentHeighT + 22}px`:''"></view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
<view v-if="isFixedTop"></view>
<!-- #endif -->
<!-- 产品 -->
<view class="fivecontent">
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index"> <view class="fivecontent_item" v-for="(item,index) in homelist" :key="index">
<view class="fivecontent_item_nav flex-start"> <view class="fivecontent_item_nav flex-start">
<image src="@/static/avatar.png" mode="aspectFill"></image> <image :src="item.shopImage" mode="aspectFill"></image>
<view class="fivecontent_item_nav_left"> <view class="fivecontent_item_nav_left">
<view class="fivecontent_item_nav_lefttop flex-between"> <view class="fivecontent_item_nav_lefttop flex-between">
<view> <view>
@@ -82,28 +77,33 @@
龙首.{{item.distances}}m 龙首.{{item.distances}}m
</view> </view>
</view> </view>
<view class="flex-start"> <view class="fivecontent_item_nav_lefttopstart flex-start">
<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in 2" <view class="fivecontent_item_nav_leftlang flex-start"
:key="index1"> v-for="(s,index1) in item.shopTag" :key="index1"
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png" :style="{'background':s.backColor,'color':s.backColor}">
mode="aspectFill"></image> <image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg"
<text>{{item.shopTag}}</text> :src="s.shareImg" mode="aspectFill"></image>
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="fivecontent_item_box"> <view class="fivecontent_item_box">
<view class="fivecontent_item_boxitem flex-between"> <view class="fivecontent_item_boxitem flex-between">
<image src="@/static/avatar.png" mode=""></image> <image :src="item.image" mode=""></image>
<view class="fivecontent_item_boxitemleft flex-colum-start"> <view class="fivecontent_item_boxitemleft flex-colum-start">
<view class="fivecontent_item_boxitemleftone flex-between"> <view class="fivecontent_item_boxitemleftone flex-between">
<view>全场饮品任选</view> <view>{{item.productName}}</view>
<text>已抢15789份</text> <text>已抢{{item.realSalesNumber}}份</text>
</view> </view>
<view class="fivecontent_item_boxitemlefttow flex-start"> <view class="flex-start flexstartboxfttow">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png" <view class="fivecontent_item_boxitemlefttow flex-start"
mode="aspectFill"></image> v-for="(c,index2) in item.proTag" :key="index2"
<text>人气连锁品牌</text> :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>
<view class="indexboxitemleftthere flex-colum-start"> <view class="indexboxitemleftthere flex-colum-start">
<view class="indexboxitemleftthereabsolute"> <view class="indexboxitemleftthereabsolute">
@@ -112,19 +112,22 @@
<view class="indexboxitemlefttheretext flex-start"> <view class="indexboxitemlefttheretext flex-start">
<view class="indexboxitemlefttheretextone"> <view class="indexboxitemlefttheretextone">
<text>¥</text> <text>¥</text>
<text>1444</text> <text>{{item.salePrice}}</text>
</view> </view>
<view class="indexboxitemlefttheretexttow"> <view class="indexboxitemlefttheretexttow">
¥111 ¥{{item.discount}}
</view> </view>
</view> </view>
<view class="indexboxitemleftthere_countdown flex-between"> <view class="indexboxitemleftthere_countdown flex-between">
<text class="indexboxitemleftthere_countdowntext">共省4元</text> <text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
<view class="indexboxitemleftthere_countdowntexts"> <view class="indexboxitemleftthere_countdowntexts">
<uni-countdown :show-day="false" :day="1" :hour="1" :minute="12" <uni-countdown @timeup="updateCity" :show-day="false"
:second="40" color="#FFFFFF" border-color="#00B26A" :day="item.end_times.d" :hour="item.end_times.h"
splitorColor="#FFFFFF" :font-size="8"></uni-countdown> :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>
@@ -134,8 +137,9 @@
</view> </view>
</view> </view>
</view> </view>
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
<!-- </scroll-view> -->
</view> </view>
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
@@ -159,8 +163,8 @@
<!-- 标题搜索框 --> <!-- 标题搜索框 -->
<view class="flex-between"> <view class="flex-between">
<view class="navbar_tow_one flex-start" @click="uindexlist"> <view class="navbar_tow_one flex-start" @click="uindexlist">
<text>八点八零</text> <text class="textnth-childone">八点八零</text>
<text>西安</text> <text class="textnth-childtow">西安</text>
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" <u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
size="16"></u-icon> size="16"></u-icon>
</view> </view>
@@ -172,9 +176,10 @@
</view> </view>
</view> </view>
<!-- 吸顶 --> <!-- 吸顶 -->
<view class="fourcontent flex-between" style="padding: 28rpx 0 28rpx 28rpx"> <view class="fourcontent flex-between">
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" <view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
:key="index" @click="viewHistory(item)"> :key="index" @click="viewHistory(item,index)"
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
<text>{{item.name}}</text> <text>{{item.name}}</text>
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill" <u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
color="#333333" size="16"></u-icon> color="#333333" size="16"></u-icon>
@@ -193,16 +198,12 @@
</view> </view>
</view> </view>
<view class="sixcontent" v-if="clickhometoplistmenulist.districts"> <view class="sixcontent" v-if="clickhometoplistmenulist.districts">
<view class="sixcontentitemP flex-start"> <view class="sixcontentitemP flex-start" style="padding-bottom:0 ;">
<view class="sixcontentitemP_itembox flex-colum-start"> <category style="width: 100%;"
<view class="sixcontentitemP_itemone" :categoryList="clickhometoplistmenulist.districts"
:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''" :subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
v-for="(item,index) in clickhometoplistmenulist.districts" :key="index" @categorySubClick="categorySubClick">
@click="clickdetail(item,index)"> </category>
{{item.name}}
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -216,39 +217,51 @@
import todaylist from './components/todaylist.vue' import todaylist from './components/todaylist.vue'
import productlist from './components/productlist.vue' import productlist from './components/productlist.vue'
import advertisement from './components/advertisement.vue' import advertisement from './components/advertisement.vue'
import customSwiper from '@/components/blackmonth-swiper/index'
import category from '@/components/qiyue-category/qiyue-category.vue';
export default { export default {
components: { components: {
swipers, swipers,
diamond, diamond,
todaylist, todaylist,
productlist, productlist,
advertisement advertisement,
category,
customSwiper
}, },
data() { data() {
return { return {
timersetInterval:'0', //定时器
isFixedTop: false, //吸顶是否显示 isFixedTop: false, //吸顶是否显示
Topdistance: 3000, //吸顶初始距离 Topdistance: 3000, //吸顶初始距离
fourcontentHeighT: 0, //高度
keyword: '', keyword: '',
current: 0, current: 0,
opacity: false, opacity: false,
showproductlist: true, //弹成 showproductlist: false, //弹成
clickdetailindex: 0, //默认下拉选项第一个 seighT: null, //高度
hometoplist: { //上面数据 hometoplist: { //上面数据
carousel: [], carousel: [],
district: [] district: [],
}, },
homelist: [], //下面数据 homelist: [], //下面数据
clickhometoplistmenulist: {}, //下拉点击的数据 clickhometoplistmenulist: {}, //下拉点击的数据
form: { form: {
address: '', //地址 address: '西安市', //地址
type: '', //品类 type: '', //品类
orderBy: '', //1.理我最近 2.销量优先 3.价格优先 orderBy: '', //1.理我最近 2.销量优先 3.价格优先
distance: '', //附近1KM 1选中 0不选中 other: '', //附近1KM 1选中 0不选中
page: 1, //页数 page: 1, //页数
size: 10, //页容量 size: 10, //页容量
status: 'loadmore' status: 'loadmore'
} },
viewHistoryindex: '', //吸顶元素值
clickdetailindex: 0, //默认下拉选项第一个
clickdetailtowindex: 0, //默认二级菜单数据选项第一个
clickdetailtowlist: [],
// 二级菜单
categoryList: [],
subCategoryList: [] //二级菜单数据
}; };
}, },
@@ -265,6 +278,10 @@
this.isFixedTop = false this.isFixedTop = false
} }
}, },
onHide() {
this.timersetInterval = '1'
},
computed: { computed: {
HeighT() { //手机类型的尺寸 HeighT() { //手机类型的尺寸
return this.$store.getters.is_BarHeight return this.$store.getters.is_BarHeight
@@ -274,17 +291,16 @@
setTimeout(() => { setTimeout(() => {
this.GetTop() this.GetTop()
}, 1000) }, 1000)
let res = await this.apix.locationdistrict({
keywords: '西安市'
})
this.clickhometoplistmenulist = res.data[0].districts
}, },
onReachBottom() { onReachBottom() {
this.onLoadhome() this.onLoadhome()
}, },
onShow() { onShow() {
this.hometop() this.hometop()
this.onLoadhome() this.init_fn()
}, },
methods: { methods: {
closeproductlist() { closeproductlist() {
@@ -301,33 +317,66 @@
this.list[data].end_times = 0; this.list[data].end_times = 0;
this.$forceUpdate(); this.$forceUpdate();
}, },
//获取元素距离顶部的距离
GetTop() { GetTop() {
//获取元素距离顶部的距离 uni.getSystemInfo({
this.$u.getRect('.fourcontent').then(res => { success: (data) => {
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 this.seighT = data.windowHeight;
this.fourcontentHeighT = res.height //高度 this.$u.getRect('.fourcontent').then(res => {
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离
this.seighT = this.seighT - res.height //高度
})
this.$u.getRect('.navbar').then(res => {
this.seighT = this.seighT - res.height //高度
})
}
}) })
}, },
// 首页上面数据 // 首页上面数据
async hometop() { async hometop() {
try { try {
let res = await this.apix.homehomePageUp() let res = await this.apix.homehomePageUp()
this.hometoplist = res.data this.hometoplist = res.data
} catch (e) { } catch (e) {}
//TODO handle the exception
}
}, },
// 下面初始数据 // 下面初始数据
init_fn() { init_fn() {
this.homelist = [] this.homelist = []
this.form.page = 1 this.form = {
this.form.status = 'loadmore' address: '西安市', //地址
this.onLoadhome() lng:'108.949158',
lat:'34.301731',
type: '', //品类
orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
other: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
},
this.onLoadhome()
}, },
async onLoadhome() { async onLoadhome() {
try { try {
let res = await this.apix.home(this.form) let res = await this.apix.home(this.form)
var dates = new Date().getTime();
res.data.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.length == 0) { if (res.data.length == 0) {
this.form.status = 'nomore' this.form.status = 'nomore'
return false; return false;
@@ -343,12 +392,11 @@
} }
}, 500) }, 500)
} }
} catch (e) { } catch (e) {}
//TODO handle the exception
}
}, },
// 点击元素到指定位置 // 点击元素到指定位置
async viewHistory(item) { async viewHistory(item, index) {
this.viewHistoryindex = index
if (item.dictName == 'allCity') { if (item.dictName == 'allCity') {
let res = await this.apix.locationdistrict({ let res = await this.apix.locationdistrict({
keywords: '西安市' keywords: '西安市'
@@ -358,26 +406,66 @@
this.clickhometoplistmenulist = item this.clickhometoplistmenulist = item
} }
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: this.Topdistance + 1, scrollTop: this.Topdistance,
duration: 300 duration: 300
}); });
if (item.isChild) { if (item.isChild) {
this.showproductlist = true this.showproductlist = true
} else { } else {
this.form.other = item.description //附近1KM 1选中 0不选中
this.form.page = 1
this.form.size = 10
this.form.status = 'loadmore'
this.homelist = []
this.onLoadhome()
} }
}, },
// 选择元素的指定选项 // 选择元素的指定选项
clickdetail(item, index) { clickdetail(item, index) {
console.log(category);
this.clickdetailindex = index this.clickdetailindex = index
this.showproductlist = false this.showproductlist = false
this.hometoplist.menu[this.viewHistoryindex].name = item.label
switch (item.dictName) {
case 'category':
// 品类
this.form.type = item.value
break;
case 'sort':
// 智能排序
this.form.orderBy = item.value
break;
}
this.form.page = 1
this.form.size = 10
this.form.status = 'loadmore'
this.homelist = []
this.onLoadhome()
},
//城市二级菜单
categoryMainClick(category) {
console.log(category);
this.subCategoryList = category.category.districts;
},
//确定街道菜单赋值
categorySubClick(category) {
console.log(category);
this.hometoplist.menu[this.viewHistoryindex].name = category.name
this.showproductlist = false
this.form.address = category.center
this.form.page = 1
this.form.size = 10
this.form.status = 'loadmore'
this.homelist = []
this.onLoadhome()
}, },
} }
}; };
</script> </script>
<style scoped lang="scss"> <style lang="scss">
page { page {
background: #F9F9F9; background: #F9F9F9;
} }
@@ -406,6 +494,7 @@
} }
// #endif // #endif
.navbar { .navbar {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -433,14 +522,14 @@
height: 100%; height: 100%;
line-height: 100%; line-height: 100%;
text:nth-child(1) { .textnth-childone {
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold; font-weight: bold;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
} }
text:nth-child(2) { .textnth-childtow {
margin-left: 16rpx; margin-left: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
@@ -475,7 +564,7 @@
.navbar_tow_towinput { .navbar_tow_towinput {
padding-left: 32rpx; padding-left: 32rpx;
padding-right: 116rpx; padding: 12rpx 120rpx 12rpx 32rpx;
height: 100%; height: 100%;
flex: auto; flex: auto;
background: #FFFFFF; background: #FFFFFF;
@@ -495,7 +584,7 @@
} }
.fourcontent { .fourcontent {
padding: 32rpx 28rpx 0 28rpx; padding: 32rpx 28rpx 32rpx 28rpx;
overflow-x: auto; overflow-x: auto;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -511,6 +600,10 @@
} }
} }
.fourcontent_itemactev {
background: #fee06a;
}
.fourcontent_item:nth-child(1) { .fourcontent_item:nth-child(1) {
margin-left: 0; margin-left: 0;
} }
@@ -518,13 +611,13 @@
.sixcontent { .sixcontent {
.sixcontentitemP { .sixcontentitemP {
width: 100%;
padding: 0 32rpx 28rpx 32rpx; padding: 0 32rpx 28rpx 32rpx;
max-height: 600rpx; max-height: 600rpx;
overflow: auto; overflow: auto;
.sixcontentitemP_itembox { .sixcontentitemP_itembox {
.sixcontentitemP_itemone { .sixcontentitemP_itemone {
flex: 1;
margin-top: 16rpx; margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
@@ -560,6 +653,11 @@
.fivecontent { .fivecontent {
padding: 0 28rpx; padding: 0 28rpx;
overflow: auto;
.fivecontent_item:nth-child(1) {
margin-top: 0;
}
.fivecontent_item { .fivecontent_item {
margin-top: 32rpx; margin-top: 32rpx;
@@ -586,32 +684,35 @@
color: #666666; color: #666666;
} }
.fivecontent_item_nav_leftlang { .fivecontent_item_nav_lefttopstart {
margin-top: 8rpx; margin-top: 8rpx;
width: max-content;
padding: 4rpx 10rpx;
background: #FFF9E1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
text { .fivecontent_item_nav_leftlang {
margin-left: 6rpx; margin-left: 12rpx;
width: max-content;
padding: 4rpx 10rpx;
background: #FFF9E1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
font-family: Source Han Sans CN, Source Han Sans CN; .fivecontent_item_nav_leftlangtext {
font-weight: 400; margin-left: 6rpx;
font-size: 16rpx; font-family: Source Han Sans CN, Source Han Sans CN;
color: #F9A511; font-weight: 400;
font-size: 16rpx;
color: #F9A511;
}
.fivecontent_item_nav_leftlangimage {
width: 10.82rpx;
height: 14.06rpx;
}
} }
image { .fivecontent_item_nav_leftlang:nth-child(1) {
width: 10.82rpx; margin-left: 0;
height: 14.06rpx;
} }
} }
.fivecontent_item_nav_leftlang:nth-child(2) {
margin-left: 12rpx;
background: #FEE9DF;
}
} }
} }
@@ -649,28 +750,37 @@
} }
} }
.fivecontent_item_boxitemlefttow { .flexstartboxfttow {
margin-top: 8rpx; .fivecontent_item_boxitemlefttow {
width: max-content; margin-left: 16rpx;
padding: 4rpx 10rpx; margin-top: 8rpx;
background: #FFF9E1; width: max-content;
border-radius: 4rpx 4rpx 4rpx 4rpx; padding: 4rpx 10rpx;
background: #FFF9E1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
text { .fivecontent_item_boxitemlefttowtext {
margin-left: 6rpx; margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 16rpx;
color: #F9A511;
}
font-family: Source Han Sans CN, Source Han Sans CN; .fivecontent_item_boxitemlefttowimage {
font-weight: 400; width: 10.82rpx;
font-size: 16rpx; height: 14.06rpx;
color: #F9A511; }
} }
image { .fivecontent_item_boxitemlefttow:nth-child(1) {
width: 10.82rpx; margin-left: 0;
height: 14.06rpx; background: #FFD6D7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
} }
} }
.indexboxitemleftthere { .indexboxitemleftthere {
position: relative; position: relative;
margin-top: 30rpx; margin-top: 30rpx;
@@ -720,6 +830,7 @@
.indexboxitemleftthere_countdown { .indexboxitemleftthere_countdown {
width: 100%; width: 100%;
padding-right: 7rpx;
.indexboxitemleftthere_countdowntext { .indexboxitemleftthere_countdowntext {
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
@@ -732,8 +843,10 @@
font-family: Roboto, Roboto; font-family: Roboto, Roboto;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
margin-left: 16rpx; font-family: Source Han Sans CN, Source Han Sans CN;
font-size: 22rpx; font-weight: bold;
font-size: 16rpx;
color: #FFFFFF;
} }
} }
} }

389
pages/index/jtoday.vue Normal file
View File

@@ -0,0 +1,389 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat :opacity='opacity' :title='titlename'></navseat>
<view class="onecontent">
<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="订阅提醒，每日爆品上线不错过" />
<view class="onecontentabsoluteitembotton">
订阅提醒
</view>
</view>
</view>
</view>
<view class="towcontent">
<view class="fivecontent_item" v-for="(item,index) in 20" :key="index">
<view class="fivecontent_item_nav flex-start">
<image class="fivecontent_item_navimage" 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' />
</view>
<!-- 小内切圆 -->
<!-- <view class="after"></view> -->
</view>
</template>
<script>
import navseat from '@/components/navseat.vue'
export default {
components: {
navseat
},
data() {
return {
titlename: '今日上新',
opacity: false,
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
}
},
};
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.content {
.onecontent {
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;
.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 {
padding: 0 28rpx;
position: relative;
margin-top: -32rpx;
.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 {
.fivecontent_item_navimage {
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;
}
.flex-start {
.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;
}
}
}
}
}
}
}
}
.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>

43
pages/user/coupon.vue
View File

@@ -1,11 +1,9 @@
<template> <template>
<view class="container"> <view class="container">
<view class="header"> <view class="containertop">
<navigator class="t" hover-class="none">历史记录</navigator> <view class="containertopbox">
<navigator class="t" hover-class="none">管理</navigator> <view class=""></view>
</view> </view>
<view class="list">
<view class="item" v-for="item in 5" :key="item"></view>
</view> </view>
</view> </view>
</template> </template>
@@ -19,31 +17,12 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$height: 40px; .container{
.header { .containertop{
width: 100%; padding:48rpx 32rpx;
height: $height; .containertopbox{
background-color: #fff;
position: fixed; }
top: 0; }
left: 0;
z-index: 99;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 $paddingSize;
.t {
margin-left: $paddingSize;
color: #999;
} }
}
.list {
padding: $height $paddingSize $paddingSize;
.item {
border-radius: 20upx;
height: 100px;
background-color: #fff;
margin-top: $paddingSize;
}
}
</style> </style>

29
pages/user/user.vue
View File

@@ -4,18 +4,15 @@
<view style="width: 36px; height: 36px;border-radius: 10rpx;"> <view style="width: 36px; height: 36px;border-radius: 10rpx;">
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' <button open-type="chooseAvatar" @chooseavatar='onChooseAvatar'
style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;"> style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;">
<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"> <image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar"
mode="aspectFill">
</image> </image>
<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill"> <image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill">
</image> </image>
</button> </button>
</view> </view>
<view class="info flex-colum-start"> <view class="info flex-colum-start">
<!-- <view class="name"><input type="nickname" @blur="blurname"
v-model="userInfo.nickName" placeholder="请输入昵称"></view> -->
<text class="phone">{{userInfo.telephone || '无'}}</text> <text class="phone">{{userInfo.telephone || '无'}}</text>
<!-- <text class="phone">1882177889</text> -->
</view> </view>
</view> </view>
<view class="card"> <view class="card">
@@ -47,7 +44,7 @@
</view> </view>
</view> </view>
</view> </view>
<!-- <view class="card"> <view class="card">
<view class="header-wrap"> <view class="header-wrap">
<view class="header"> <view class="header">
<text class="title">更多服务</text> <text class="title">更多服务</text>
@@ -55,23 +52,23 @@
</view> </view>
<view class="order-menu"> <view class="order-menu">
<navigator class="item" hover-class="none" url="/pages/user/coupon"> <navigator class="item" hover-class="none" url="/pages/user/coupon">
<image class="icon" src="@/static/user_icon5.png" mode="aspectFit"></image> <!-- <image class="icon" src="@/static/user_icon5.png" mode="aspectFit"></image> -->
<text class="t">优惠券</text> <text class="t">优惠券</text>
</navigator> </navigator>
<view class="item"> <view class="item">
<image class="icon" src="@/static/user_icon6.png" mode="aspectFit"></image> <!-- <image class="icon" src="@/static/user_icon6.png" mode="aspectFit"></image> -->
<text class="t">寄存记录</text> <text class="t">寄存记录</text>
</view> </view>
<view class="item"> <view class="item">
<image class="icon" src="@/static/user_icon7.png" mode="aspectFit"></image> <!-- <image class="icon" src="@/static/user_icon7.png" mode="aspectFit"></image> -->
<text class="t">储值明细</text> <text class="t">储值明细</text>
</view> </view>
<view class="item"> <view class="item">
<image class="icon" src="@/static/user_icon8.png" mode="aspectFit"></image> <!-- <image class="icon" src="@/static/user_icon8.png" mode="aspectFit"></image> -->
<text class="t">设置</text> <text class="t">设置</text>
</view> </view>
</view> </view>
</view> --> </view>
<view class="version-wrap"> <view class="version-wrap">
<!-- <text class="t">版本号：2.0.0</text> --> <!-- <text class="t">版本号：2.0.0</text> -->
<text class="t">陕西超掌柜科技有限公司</text> <text class="t">陕西超掌柜科技有限公司</text>
@@ -86,7 +83,7 @@
return { return {
shopUser: {}, shopUser: {},
userInfo: {}, userInfo: {},
shopInfo:{} shopInfo: {}
}; };
}, },
onShow() { onShow() {
@@ -149,14 +146,14 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container {
padding: 0 $paddingSize;
}
.user-info-wrap { .user-info-wrap {
padding: $paddingSize + 20upx $paddingSize; padding: $paddingSize + 20upx $paddingSize;
display: flex; display: flex;
align-items: center; align-items: center;
width: 750rpx;
height: 280rpx;
background: #FFD158;
border-radius: 0rpx 0rpx 40rpx 0rpx;
.avatar { .avatar {
$size: 120upx; $size: 120upx;

7
store/index.js
View File

@@ -81,7 +81,6 @@ const store = new Vuex.Store({
statusBar = e.statusBarHeight statusBar = e.statusBarHeight
// @ts-ignore // @ts-ignore
const custom = wx.getMenuButtonBoundingClientRect() const custom = wx.getMenuButtonBoundingClientRect()
console.log(custom, e, 1111)
// customBar = custom.bottom + custom.top - e.statusBarHeight // customBar = custom.bottom + custom.top - e.statusBarHeight
customBar = custom.height customBar = custom.height
heightBar = custom.top heightBar = custom.top
@@ -96,10 +95,10 @@ const store = new Vuex.Store({
// #ifdef APP-PLUS // #ifdef APP-PLUS
console.log('app-plus', e) console.log('app-plus', e)
statusBar = e.statusBarHeight statusBar = e.statusBarHeight
heightBar = e.statusBarHeight/2 heightBar = e.statusBarHeight
customBar = e.statusBarHeight + 45 customBar = e.statusBarHeight
bottomPadding = (e.screenHeight - e.safeArea.bottom) bottomPadding = (e.screenHeight - e.safeArea.bottom)
customBar = 0 // customBar = 0
// #endif // #endif
// #ifdef H5 // #ifdef H5
statusBar = 0 statusBar = 0

25
uni_modules/d-swiper-type/changelog.md Normal file
View File

@@ -0,0 +1,25 @@
## 1.0.1（2022-06-14）
1.优化代码
## 1.0.0（2022-06-03）
### 可能为全网最好用的分类插件：侧边导航分类插件【亲测可用：2022-06-02 23:09】
##### 请直接把代码复制到页面直接使用。
````
学习方法最重要，仔细看下也好理解，不难。
像这种分类联动 页面，直接把代码里的文件复制出来吧。自定义样式，看看代码你也能看懂
有时间改成插件模式
````
````
此插件功能
1.已实现：右边滑动，左边同步滚动到对应位置
2.已实现：左边菜单滚动，右边同事滚动到对应位置
3.已实现：当右边滑动顶部时，左侧置顶。其他时候始终保持在置顶第二块位置
4.左侧一级分类；右侧二级分类 全部都可自定义
5.使用2个swiper，卡顿延迟降低到极低
6.连续滚动 ：跳转下一个分类 几乎无卡顿
````

478
uni_modules/d-swiper-type/components/d-swiper-type/d-swiper-type.vue Normal file
View File

@@ -0,0 +1,478 @@
<template>
<view>
<view id="headinga">
<!-- <view class="fixed">
<cu-custom :isBack="true" bgColor=" text-white">
<block slot="backText">返回</block>
<block slot="content">垂直导航 {{list_data_left.length}}</block>
</cu-custom>
</view> -->
<view
style="width: 100%;height: 400rpx;background-color: pink;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 80rpx;">
当前高度：{{my_hua_dong_num}}
</view>
</view>
<!-- navScroll -->
<!-- navNow -->
<view style="background-color: #fff;display: flex;">
<view style="width: 20%;background-color: #fff;">
<swiper :duration="500"
:vertical="true"
:display-multiple-items="navCount"
:style="'height:'+hh+'px'"
:current-item-id="navScroll"
>
<swiper-item v-for="item,index in navList" :key="index" class=""
:item-id="item.navId"
>
<view class=""
:style="navNow==item.navId?'background-color:red;':'background-color: #9bf;'"
style="width: 100%;height: 100rpx;margin-top: 20rpx;height: 80rpx;line-height: 80rpx;display: flex;align-items: center;justify-content: center;color: #fff;"
@click="onNav(item,item.navId)">
<!-- {{navNow}}-{{item.navId}} -->
{{item.navId}}
</view>
</swiper-item>
</swiper>
</view>
<scroll-view
:scroll-y="true"
:scroll-with-animation="true"
:enable-back-to-top="true"
:style="'height:'+hh+'px'"
:scroll-into-view="scrollintoview"
@scroll="myonPageScroll"
>
<view v-for="(item,index) in mainList" :key="index"
:id="item.navId"
:data-nav-id="item.navId"
:data-nav-scroll-id="item.navScrollId"
class="trip main-item"
style="margin-bottom: 10rpx; border-radius: 0rpx;border: 0rpx solid red;padding: 20rpx 30rpx 0 30rpx;">
<view style="width: 100%;;display: flex;flex-wrap: wrap;justify-content: space-between;">
<view style="width: 100%;height: 50rpx;;display: flex;align-items: center;" >冰激凌{{item.navId}}</view>
<view style="width: 30%;height: 170rpx;background-color: #f2f2f2;margin-top: 20rpx;overflow: hidden;border-radius: 25rpx;position: relative;"
v-for="(item_find,index_find) in 9" :key="index_find">
<!-- 自定义页面布局start -->
<!-- 自定义页面布局start -->
<!-- 自定义页面布局start -->
<!-- <view style="width: 100%;height: 60rpx;line-height: 60rpx;background-color: #ccc;position: absolute;bottom: 0rpx;color: red;
display: flex;align-items: center;justify-content: center;z-index: 99;opacity: 0.5;">
早餐
</view> -->
<view style="width: 170rpx;height: 170rpx;background-color: pink;">
<image v-if="index%3==0" src="../../static/icon_img/bing.png" style="width: 170rpx;height: 170rpx;"></image>
<image v-if="index%3==1" src="../../static/icon_img/mangguo.png" style="width: 170rpx;height: 170rpx;"></image>
<image v-if="index%3==2" src="../../static/icon_img/xigua.png" style="width: 170rpx;height: 170rpx;"></image>
</view>
</view>
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
<!-- 自定义页面布局end -->
<!-- 自定义页面布局end -->
<!-- 自定义页面布局end -->
</view>
</view>
</scroll-view>
<!-- -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
list_data_right:[],
list_data_left:[],
list: [],
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
load: true,
heightleft:100,
hh:0,
scrolltop:0,
scrollintoview:'',
mainList:[],
navList:[],
navCount:0,
navNow:0,
vue_all_list:[],
my_hua_dong_num:0,
navScroll:''
};
},
onLoad() {
// mainList.push({
// })
//
// this.list_data_right_api()
this.list_data_left_api()
//
uni.showLoading({
title: '加载中...',
mask: true
});
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
list[i].id = i;
}
this.list = list;
this.listCur = list[0];
},
onReady() {
this._onReadyApi()
uni.hideLoading()
},
methods: {
myonPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
console.log('___________________________________________________start');
// console.log('00000000000000000000000000000000');
// console.log(e);
this.my_hua_dong_num = Math.round(e.detail.scrollTop).toString()
// console.log(this.vue_all_list);
var num = e.currentTarget.offsetTop + e.detail.scrollTop
// var num = e.detail.scrollTop
console.log("滚动距离为：" + num);
// console.log("滚动距离为：" + num);
var ww = this.vue_all_list.find(
v => v.top >= num
)
console.log('+++++++++++++++')
console.log(this.vue_all_list)
console.log('_________ww____________________')
console.log(ww)
console.log('+++++++++++++++')
// console.log(ww)
if (e.detail.scrollTop<=70) {
// console.log(this.navList[0].navId)
// return
this.navNow = this.navList[0].navId
} else {
this.navNow = ww.id
}
if (ww.dataset.navScrollId) {
this.navScroll = ww.dataset.navScrollId
} else {
this.navScroll = this.navNow
}
// console.log(ww.dataset.navScrollId)
// this.navScroll = ww.dataset.qq
console.log('navNow_____________='+this.navNow)
console.log('navScroll_____________='+this.navScroll)
// this.navScroll =
// console.log(ww.id)
// console.log('+++++++++++++++')
// ww.dataset
// this.scrollStates.mainItems.find(
// v => v.top >= top)
console.log('___________________________________________________end');
},
TabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.mainCur = e.currentTarget.dataset.id;
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
},
VerticalMain(e) {
// #ifdef MP-ALIPAY
return false //支付宝小程序暂时不支持双向联动
// #endif
let that = this;
let tabHeight = 0;
if (this.load) {
for (let i = 0; i < this.list.length; i++) {
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
view.fields({
size: true
}, data => {
this.list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
this.list[i].bottom = tabHeight;
}).exec();
}
this.load = false
}
let scrollTop = e.detail.scrollTop + 10;
for (let i = 0; i < this.list.length; i++) {
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
this.verticalNavTop = (this.list[i].id - 1) * 50
this.tabCur = this.list[i].id
console.log(scrollTop)
return false
}
}
},
list_data_left_api() {
var that = this
//mainList
var mainList = []
var navList = []
// navList
var list_data_left = []
var navScrollId = ''
let prevNav = ''
var i=0
for(i ; i<25 ; i++) {
const mainId = 'main-'+i
const navId = 'nav-'+i
const tId = (10000+i).toString()
if (!prevNav) {
prevNav = navId
}
mainList.push({
id:mainId,
navId:navId,
navScrollId:prevNav,
data:{
id:tId,
start:'呵呵',
name:tId,
}
})
navList.push({
navId:navId,
mainId:mainId,
label:tId
})
prevNav = navId
// list_data_left.push({
// id:(10000+i).toString(),
// start:'呵呵',
// name:(10000+i).toString(),
// })
}
this.mainList = mainList
this.navList = navList
// this.list_data_left = list_data_left
console.log(this.navList)
console.log(this.mainList)
this.navNow = this.navList[0].navId
// uni.createSelectorQuery().selectAll('.main-item').fields({
// // id:true,
// id:true
// // dataset:true,
// // rect:true,
// }).exec(res=>{
// console.log('---------------------------')
// console.log('------------------33---------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log(res)
// })
// return
setTimeout(function(){
wx.createSelectorQuery().selectAll('.main-item').fields({
// id:true,
id:true,
dataset:true,
rect:true,
}).exec(res=>{
console.log('---------------------------')
console.log('---------------------------')
console.log('---------------------------')
console.log('---------------------------')
console.log(res[0])
that.vue_all_list = res[0]
console.log(that.vue_all_list)
console.log('---------------------------vue_all_list_end')
})
// uni.createSelectorQuery().selectAll('.mmmm').fields({
// // id:true,
// size:true
// // dataset:true,
// // rect:true,
// }).exec(res=>{
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log(res)
// })
},300)
},
list_data_right_api() {
var list_data_right = []
var i=0
for(i;i<100;i++) {
list_data_right.push({
id:(10000+i).toString(),
start:'呵呵'
})
}
this.list_data_right = list_data_right
console.log(this.list_data_right)
},
onNav(e,kk) {
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
var value = e.navId
console.log(e)
if (e) {
this.scrollintoview = value
this.navNow = kk
}
},
_onReadyApi() {
console.log('--------------------------------')
var windowHeight = uni.getSystemInfoSync().windowHeight
console.log(windowHeight)
var that = this
uni.createSelectorQuery().select('#headinga').boundingClientRect((res) => {
console.log('+++++++++++++++')
console.log('+++++++++++++++')
that.hh = windowHeight - res.height
that.navCount = Math.round(that.hh/50)
// console.log()
console.log(that.navCount+'+++++++++++++++'+that.hh)
// this.editorCtx = res.context
}).exec()
}
},
}
</script>
<style>
/* .aaaa{ */
/* } */
.fixed {
position: fixed;
z-index: 99;
}
.VerticalNav.nav {
width: 200upx;
white-space: initial;
}
.VerticalNav.nav .cu-item {
width: 100%;
text-align: center;
background-color: #fff;
margin: 0;
border: none;
height: 50px;
position: relative;
}
.VerticalNav.nav .cu-item.cur {
background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
content: "";
width: 8upx;
height: 30upx;
border-radius: 10upx 0 0 10upx;
position: absolute;
background-color: currentColor;
top: 0;
right: 0upx;
bottom: 0;
margin: auto;
}
.VerticalBox {
display: flex;
}
.VerticalMain {
background-color: #f1f1f1;
flex: 1;
}
</style>

478
uni_modules/d-swiper-type/components/d-swiper-type/pages/home/hometype.vue Normal file
View File

@@ -0,0 +1,478 @@
<template>
<view>
<view id="headinga">
<!-- <view class="fixed">
<cu-custom :isBack="true" bgColor=" text-white">
<block slot="backText">返回</block>
<block slot="content">垂直导航 {{list_data_left.length}}</block>
</cu-custom>
</view> -->
<view
style="width: 100%;height: 400rpx;background-color: pink;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 80rpx;">
当前高度：{{my_hua_dong_num}}
</view>
</view>
<!-- navScroll -->
<!-- navNow -->
<view style="background-color: #fff;display: flex;">
<view style="width: 20%;background-color: #fff;">
<swiper :duration="500"
:vertical="true"
:display-multiple-items="navCount"
:style="'height:'+hh+'px'"
:current-item-id="navScroll"
>
<swiper-item v-for="item,index in navList" :key="index" class=""
:item-id="item.navId"
>
<view class=""
:style="navNow==item.navId?'background-color:red;':'background-color: #9bf;'"
style="width: 100%;height: 100rpx;margin-top: 20rpx;height: 80rpx;line-height: 80rpx;display: flex;align-items: center;justify-content: center;color: #fff;"
@click="onNav(item,item.navId)">
<!-- {{navNow}}-{{item.navId}} -->
{{item.navId}}
</view>
</swiper-item>
</swiper>
</view>
<scroll-view
:scroll-y="true"
:scroll-with-animation="true"
:enable-back-to-top="true"
:style="'height:'+hh+'px'"
:scroll-into-view="scrollintoview"
@scroll="myonPageScroll"
>
<view v-for="(item,index) in mainList" :key="index"
:id="item.navId"
:data-nav-id="item.navId"
:data-nav-scroll-id="item.navScrollId"
class="trip main-item"
style="margin-bottom: 10rpx; border-radius: 0rpx;border: 0rpx solid red;padding: 20rpx 30rpx 0 30rpx;">
<view style="width: 100%;;display: flex;flex-wrap: wrap;justify-content: space-between;">
<view style="width: 100%;height: 50rpx;;display: flex;align-items: center;" >冰激凌{{item.navId}}</view>
<view style="width: 30%;height: 170rpx;background-color: #f2f2f2;margin-top: 20rpx;overflow: hidden;border-radius: 25rpx;position: relative;"
v-for="(item_find,index_find) in 9" :key="index_find">
<!-- 自定义页面布局start -->
<!-- 自定义页面布局start -->
<!-- 自定义页面布局start -->
<!-- <view style="width: 100%;height: 60rpx;line-height: 60rpx;background-color: #ccc;position: absolute;bottom: 0rpx;color: red;
display: flex;align-items: center;justify-content: center;z-index: 99;opacity: 0.5;">
早餐
</view> -->
<view style="width: 170rpx;height: 170rpx;background-color: pink;">
<image v-if="index%3==0" src="../../static/icon_img/bing.png" style="width: 170rpx;height: 170rpx;"></image>
<image v-if="index%3==1" src="../../static/icon_img/mangguo.png" style="width: 170rpx;height: 170rpx;"></image>
<image v-if="index%3==2" src="../../static/icon_img/xigua.png" style="width: 170rpx;height: 170rpx;"></image>
</view>
</view>
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
<!-- 自定义页面布局end -->
<!-- 自定义页面布局end -->
<!-- 自定义页面布局end -->
</view>
</view>
</scroll-view>
<!-- -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
list_data_right:[],
list_data_left:[],
list: [],
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
load: true,
heightleft:100,
hh:0,
scrolltop:0,
scrollintoview:'',
mainList:[],
navList:[],
navCount:0,
navNow:0,
vue_all_list:[],
my_hua_dong_num:0,
navScroll:''
};
},
onLoad() {
// mainList.push({
// })
//
// this.list_data_right_api()
this.list_data_left_api()
//
uni.showLoading({
title: '加载中...',
mask: true
});
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
list[i].id = i;
}
this.list = list;
this.listCur = list[0];
},
onReady() {
this._onReadyApi()
uni.hideLoading()
},
methods: {
myonPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
console.log('___________________________________________________start');
// console.log('00000000000000000000000000000000');
// console.log(e);
this.my_hua_dong_num = Math.round(e.detail.scrollTop).toString()
// console.log(this.vue_all_list);
var num = e.currentTarget.offsetTop + e.detail.scrollTop
// var num = e.detail.scrollTop
console.log("滚动距离为：" + num);
// console.log("滚动距离为：" + num);
var ww = this.vue_all_list.find(
v => v.top >= num
)
console.log('+++++++++++++++')
console.log(this.vue_all_list)
console.log('_________ww____________________')
console.log(ww)
console.log('+++++++++++++++')
// console.log(ww)
if (e.detail.scrollTop<=70) {
// console.log(this.navList[0].navId)
// return
this.navNow = this.navList[0].navId
} else {
this.navNow = ww.id
}
if (ww.dataset.navScrollId) {
this.navScroll = ww.dataset.navScrollId
} else {
this.navScroll = this.navNow
}
// console.log(ww.dataset.navScrollId)
// this.navScroll = ww.dataset.qq
console.log('navNow_____________='+this.navNow)
console.log('navScroll_____________='+this.navScroll)
// this.navScroll =
// console.log(ww.id)
// console.log('+++++++++++++++')
// ww.dataset
// this.scrollStates.mainItems.find(
// v => v.top >= top)
console.log('___________________________________________________end');
},
TabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.mainCur = e.currentTarget.dataset.id;
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
},
VerticalMain(e) {
// #ifdef MP-ALIPAY
return false //支付宝小程序暂时不支持双向联动
// #endif
let that = this;
let tabHeight = 0;
if (this.load) {
for (let i = 0; i < this.list.length; i++) {
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
view.fields({
size: true
}, data => {
this.list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
this.list[i].bottom = tabHeight;
}).exec();
}
this.load = false
}
let scrollTop = e.detail.scrollTop + 10;
for (let i = 0; i < this.list.length; i++) {
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
this.verticalNavTop = (this.list[i].id - 1) * 50
this.tabCur = this.list[i].id
console.log(scrollTop)
return false
}
}
},
list_data_left_api() {
var that = this
//mainList
var mainList = []
var navList = []
// navList
var list_data_left = []
var navScrollId = ''
let prevNav = ''
var i=0
for(i ; i<25 ; i++) {
const mainId = 'main-'+i
const navId = 'nav-'+i
const tId = (10000+i).toString()
if (!prevNav) {
prevNav = navId
}
mainList.push({
id:mainId,
navId:navId,
navScrollId:prevNav,
data:{
id:tId,
start:'呵呵',
name:tId,
}
})
navList.push({
navId:navId,
mainId:mainId,
label:tId
})
prevNav = navId
// list_data_left.push({
// id:(10000+i).toString(),
// start:'呵呵',
// name:(10000+i).toString(),
// })
}
this.mainList = mainList
this.navList = navList
// this.list_data_left = list_data_left
console.log(this.navList)
console.log(this.mainList)
this.navNow = this.navList[0].navId
// uni.createSelectorQuery().selectAll('.main-item').fields({
// // id:true,
// id:true
// // dataset:true,
// // rect:true,
// }).exec(res=>{
// console.log('---------------------------')
// console.log('------------------33---------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log(res)
// })
// return
setTimeout(function(){
wx.createSelectorQuery().selectAll('.main-item').fields({
// id:true,
id:true,
dataset:true,
rect:true,
}).exec(res=>{
console.log('---------------------------')
console.log('---------------------------')
console.log('---------------------------')
console.log('---------------------------')
console.log(res[0])
that.vue_all_list = res[0]
console.log(that.vue_all_list)
console.log('---------------------------vue_all_list_end')
})
// uni.createSelectorQuery().selectAll('.mmmm').fields({
// // id:true,
// size:true
// // dataset:true,
// // rect:true,
// }).exec(res=>{
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log('---------------------------')
// console.log(res)
// })
},300)
},
list_data_right_api() {
var list_data_right = []
var i=0
for(i;i<100;i++) {
list_data_right.push({
id:(10000+i).toString(),
start:'呵呵'
})
}
this.list_data_right = list_data_right
console.log(this.list_data_right)
},
onNav(e,kk) {
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
console.log('________________onNav___'+kk)
var value = e.navId
console.log(e)
if (e) {
this.scrollintoview = value
this.navNow = kk
}
},
_onReadyApi() {
console.log('--------------------------------')
var windowHeight = uni.getSystemInfoSync().windowHeight
console.log(windowHeight)
var that = this
uni.createSelectorQuery().select('#headinga').boundingClientRect((res) => {
console.log('+++++++++++++++')
console.log('+++++++++++++++')
that.hh = windowHeight - res.height
that.navCount = Math.round(that.hh/50)
// console.log()
console.log(that.navCount+'+++++++++++++++'+that.hh)
// this.editorCtx = res.context
}).exec()
}
},
}
</script>
<style>
/* .aaaa{ */
/* } */
.fixed {
position: fixed;
z-index: 99;
}
.VerticalNav.nav {
width: 200upx;
white-space: initial;
}
.VerticalNav.nav .cu-item {
width: 100%;
text-align: center;
background-color: #fff;
margin: 0;
border: none;
height: 50px;
position: relative;
}
.VerticalNav.nav .cu-item.cur {
background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
content: "";
width: 8upx;
height: 30upx;
border-radius: 10upx 0 0 10upx;
position: absolute;
background-color: currentColor;
top: 0;
right: 0upx;
bottom: 0;
margin: auto;
}
.VerticalBox {
display: flex;
}
.VerticalMain {
background-color: #f1f1f1;
flex: 1;
}
</style>

10
uni_modules/d-swiper-type/components/d-swiper-type/pages/home/readme.md Normal file
View File

@@ -0,0 +1,10 @@
## 【2023-左侧联动分类插件-可能是最好用的插件】-全网唯一几乎无卡顿 [相对来说]
## d-swiper-type
````
直接复制组件代码到页面旧可以，不用使用组件，超简单，超丝滑~
````

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/bing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 365 KiB

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/del.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/del2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 B

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/mangguo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 KiB

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/xigua.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 626 KiB

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/yan_close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
uni_modules/d-swiper-type/components/d-swiper-type/pages/static/icon_img/yan_open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

89
uni_modules/d-swiper-type/package.json Normal file
View File

@@ -0,0 +1,89 @@
{
"id": "d-swiper-type",
"displayName": "2023_侧边联动导航滑动分类_【超流畅、超丝滑、全网唯一】国际庄邓",
"version": "1.0.1",
"description": "2023_侧边联动导航滑动分类_【超流畅、超丝滑、全网唯一】国际庄邓",
"keywords": [
"uni_modules",
"联动侧边栏导航分类",
"分类",
"侧边",
"联动"
],
"repository": "https://github.com/qq1415551519/uniapp-d-search-log",
"engines": {
"HBuilderX": "^3.1.20"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "u"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y",
"小红书": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
}
}
}
}
}

30
uni_modules/d-swiper-type/readme.md Normal file
View File

@@ -0,0 +1,30 @@
## 【2023-左侧联动分类插件-可能是最好用的插件】-全网唯一几乎无卡顿【超丝滑~】
## d-swiper-type
````
弹框插件： https://ext.dcloud.net.cn/plugin?id=2708
日历插件： https://ext.dcloud.net.cn/plugin?id=2779
````
````
1. /pages/home/hometype.vue 为案例文件
````
### 下载插件后直接复制到自己页面使用。【直接复制代码】
````
1.文件路径：'@/uni_modules/d-swiper-type/components/d-swiper-type/pages/home/hometype.vue'
2.复制图片目录 static/icon_img
````

20
uni_modules/liu-super-slide/changelog.md Normal file
View File

@@ -0,0 +1,20 @@
## 1.0.9（2023-06-08）
增加预览二维码
## 1.0.8（2023-05-31）
增加license
## 1.0.7（2023-05-15）
增加点击事件
## 1.0.6（2023-05-14）
优化赋值
## 1.0.5（2023-05-13）
优化代码
## 1.0.4（2023-05-13）
优化手动点击逻辑
## 1.0.3（2023-05-13）
优化手动点击逻辑
## 1.0.2（2023-05-12）
增加属性
## 1.0.1（2023-05-12）
增加示例
## 1.0.0（2023-05-12）
初始发布

207
uni_modules/liu-super-slide/components/liu-super-slide/liu-super-slide.vue Normal file
View File

@@ -0,0 +1,207 @@
<template>
<view>
<view class="card-list" v-if="showListArr.length>0">
<image v-if="bgUrl" class="swiper-img" :src='bgUrl'></image>
<p class="card-info" :class="item.class<5?'card' + item.class:item.class%2==0?'card3':'card2'"
v-for="(item, index) in showListArr" :key="index" @click.stop="click(item.class,item,true)">
<image class="item-img" :src="item.picUrl"></image>
<!-- <view class="item-name">{{item.title}}</view> -->
</p>
</view>
</view>
</template>
<script>
export default {
props: {
//轮播数据源
swiperList: {
type: Array,
default: [],
},
//背景图片
bgUrl: {
type: String,
default: ''
},
//是否自动轮播
autoplay: {
type: Boolean,
default: true
},
//轮播自动切换时间间隔
interval: {
type: Number,
default: 5000
},
//点击轮播是否有触感振动(自动轮播不生效)
vibrate: {
type: Boolean,
default: true
},
},
data() {
return {
timer: null,
showListArr: []
};
},
watch: {
swiperList: {
deep: true,
immediate: true,
handler(newArr) {
let newList = JSON.parse(JSON.stringify(newArr))
if (newList.length == 0) return
this.$nextTick(() => {
newList.forEach((res, index) => {
res.class = index
})
this.showListArr = JSON.parse(JSON.stringify(newList))
if (this.autoplay) this.autoPlayFun()
})
},
}
},
methods: {
autoPlayFun() {
this.timer = setInterval(() => {
this.getMenu()
}, this.interval)
},
getMenu() {
let list = this.showListArr.filter(res => res.class == 1)
this.click(1, list[0], false)
},
click(index, mess, clickState) {
if(clickState) this.$emit('click', mess)
if (this.autoplay && clickState) return
if (clickState && this.vibrate && !this.autoplay) uni.vibrateShort()
if (clickState) {
this.getMenu()
return
}
for (let i = 0; i < this.showListArr.length; i++) {
const item = this.showListArr[i]
if (item.class > index) {
item.class--
} else if (item.class === index) {
item.class = 0
} else if (item.class === 0) {
item.class = this.showListArr.length - 1
}
}
this.$emit('change', mess)
},
},
destroyed() {
clearInterval(this.timer)
}
};
</script>
<style scoped>
.card-list {
width: 100%;
height: 360rpx;
position: relative;
}
.swiper-img {
position: absolute;
width: 94%;
height: 250rpx;
left: 0;
right: 0;
margin: auto;
border-radius: 16rpx;
opacity: 0.7;
}
.card-list p {
border-radius: 8rpx;
position: absolute;
z-index: 99;
transition: all 1s cubic-bezier(0.36, 0, 0.64, 1);
}
.card-info {
width: 240rpx;
height: 180rpx;
overflow: hidden;
border-radius: 8rpx;
}
.item-img {
width: 100%;
height: 100%;
}
.item-name {
position: absolute;
font-size: 30rpx;
line-height: 30rpx;
color: #FFFFFF;
text-shadow: 0px 4rpx 8rpx #000000;
display: flex;
align-items: center;
justify-content: center;
}
.card0 {
transform: scale(1.5, 1.5);
left: 255rpx;
z-index: 9999 !important;
}
.card0 .item-name {
width: 100%;
top: 75rpx;
}
.card1 {
left: 50rpx;
}
.card1 .item-name {
width: 40rpx;
height: 100%;
top: 0rpx;
left: 10rpx;
}
.card2 {
left: 120rpx;
z-index: 999 !important;
}
.card2 .item-name {
width: 40rpx;
height: 100%;
top: 0rpx;
left: 10rpx;
}
.card3 {
left: 390rpx;
z-index: 999 !important;
}
.card3 .item-name {
width: 40rpx;
height: 100%;
top: 0rpx;
right: 10rpx;
}
.card4 {
left: 460rpx;
}
.card4 .item-name {
width: 40rpx;
height: 100%;
top: 0rpx;
right: 10rpx;
}
</style>

6
uni_modules/liu-super-slide/license.md Normal file
View File

@@ -0,0 +1,6 @@
### 1、本插件可免费下载使用；
### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。

85
uni_modules/liu-super-slide/package.json Normal file
View File

@@ -0,0 +1,85 @@
{
"id": "liu-super-slide",
"displayName": "轮播图、3D轮播、堆叠轮播(很好看)",
"version": "1.0.9",
"description": "很好看、很好用的3D轮播、堆叠轮播，支持任何图片数量、点击、自动轮播、手动轮播(走过路过千万不要错过)",
"keywords": [
"3D轮播",
"轮播",
"堆叠轮播",
"轮播图",
"图片轮播"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

78
uni_modules/liu-super-slide/readme.md Normal file
View File

@@ -0,0 +1,78 @@
### liu-super-slide适用于uni-app项目的3D轮播、堆叠轮播、轮播图(很好看)组件
### 本组件目前兼容微信小程序、H5
### 本组件是很好看、好用的3D轮播、堆叠轮播，支持任何图片数量、点击、自动轮播、手动轮播(走过路过千万不要错过)
# --- 扫码预览、关注我们 ---
## 扫码关注公众号，查看更多插件信息，预览插件效果！
![](https://uni.ckapi.pro/uniapp/publicize.png)
### 使用方式
```
<template>
<view class="page-main">
<liu-super-slide :swiperList="swiperList" :bgUrl="bgUrl" :autoplay="autoplay" :interval="interval"
@change="change" @click="click"></liu-super-slide>
</view>
</template>
<script>
export default {
data() {
return {
autoplay: true,
interval: 3000,
bgUrl: "https://cdn.pixabay.com/photo/2020/09/05/19/38/landscape-5547401_1280.png",
swiperList: [{
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
title: '思考'
}, {
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
title: '雨天'
}, {
picUrl: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg',
title: '兔子'
}, {
picUrl: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png',
title: '日落'
}, {
picUrl: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg',
title: '植物'
}, {
picUrl: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png',
title: '时尚'
}, {
picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
title: '生活'
}]
}
},
methods: {
change(e) {
console.log('当前轮播信息：', e)
},
//点击轮播
click(e) {
console.log('点击轮播', e)
}
}
}
</script>
```
### 属性说明
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|---------------- | ---------------------- | ---------------|
| swiperList | Array | [] | 轮播数据源
| bgUrl | String | | 背景图片(非必传)
| autoplay | Boolean | true | 是否自动轮播
| interval | Number | 5000 | 轮播自动切换时间间隔(autoplay为true时生效)
| vibrate | Boolean | true | 点击轮播是否有触感振动(自动轮播不生效)
| @change | Function | | 轮播回调
| @click | Function | | 点击轮播