Skip to content

G
gxpt_wechat
Commit b9225eee by zhangzhen
Options

优化首页内容

parent 3420da62
Showing with 258 additions and 192 deletions
components/module/f-navbar/f-navbar.vue
......@@ -179,10 +179,10 @@ export default {
immediate: true,
handler (val) {
if(val == 5){
if (this.scrollTop > 180) {
if (this.scrollTop > 160) {
this.transparentValue = 1;
} else {
this.transparentValue = this.scrollTop / 180;
this.transparentValue = this.scrollTop / 160;
}
}
}
......@@ -248,10 +248,10 @@ export default {
pageScroll(e) {
if (this.navbarType == 5) {
if (e.scrollTop && e.scrollTop > 0) {
if (e.scrollTop > 180) {
if (e.scrollTop > 160) {
this.transparentValue = 1;
} else {
this.transparentValue = e.scrollTop / 180;
this.transparentValue = e.scrollTop / 160;
}
} else {
this.transparentValue = 0;
......
components/module/f-tabbar/f-tabbar.vue
......@@ -156,27 +156,9 @@
display: block;
width: 30px;
height: 30px;
margin-top: 24rpx;
}
}
.icon-large {}
.scan-code-icon {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
transform: scale(2) translateY(-6px);
background: #007AFF;
border-radius: 50%;
box-shadow: 0 0 4px rgba($color: #007AFF, $alpha: 0.3);
image {
display: block;
width: 60%;
height: auto;
}
}
</style>
\ No newline at end of file
components/toolBox/toolBox.vue
<template>
<view class="tool-box">
<view class="tool-box" >
<view v-for="(item, index) in toolList" :key="index" class="tool-item" :class="{active:!show}" :style="{transitionDuration: dNum+'s' }" @tap.stop="onHandle(item,index)">
<text class="text-white text-bold text-xl">{{show ? item.name:item.sortName}}</text>
<image class="image" :src="item.imgUrl" mode="heightFix"></image>
<text v-if="show" class="text-white text-bold text-xl">{{item.name}}</text>
</view>
</view>
</template>
<script>
import config from "@/config/index.config"
import {getOrderByAvailable, openDoor} from "@/api/order.js"
export default {
......@@ -24,19 +26,23 @@
toolList:[
{
name:"开门",
imgUrl: config.assetsPath+'/open_door_icon.png',
sortName:"开"
},
{
name:"续单",
imgUrl: config.assetsPath+'/order_2_icon.png',
sortName:"续"
},
{
name:"验券",
imgUrl: config.assetsPath+'/scan_code_icon.png',
sortName:"验",
routePath:"/pages/useCouponIllustrate/useCouponIllustrate"
},
{
name:"客服",
imgUrl: config.assetsPath+'/zcpt.png',
sortName:"客"
}
],
......@@ -149,11 +155,12 @@
z-index: 99;
.tool-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 12vw;
height: 12vw;
border-radius: 50%;
width: 42px;
height: 36px;
border-radius: 20upx 0 0 20upx;
background: rgba(255, 255, 255, 0.72);
// border-top: 1px solid #E40583;
// border-left: 1px solid #E40583;
......@@ -162,17 +169,21 @@
transition-property: all;
transition-timing-function:ease;
box-shadow: -4rpx 4rpx 13rpx 0rpx rgba(74, 11, 47, 0.4);
.image{
max-width: 50upx;
height: 40upx;
}
text{
white-space: nowrap;
font-style: italic;
font-size: 28rpx;
color: #3D3D3D;
}
}
.active{
width: 6vw;
height: 6vw;
opacity: 0.6;
width: 24px;
height:50upx;
// border-radius: 12upx 0 0 12upx;
opacity: 0.8;
}
}
</style>
\ No newline at end of file
config/index.config.js
const CONFIG = {
// 开发环境配置
development: {
assetsPath: 'https://www.coujio.com/wechat_static', // 静态资源路径
assetsPath: 'http://10.24.5.140:8211/static', // 静态资源路径
baseUrl: 'https://www.coujio.com/front-api', // 后台接口请求地址
hostUrl: 'https://www.coujio.com/prod-api', // H5地址(前端运行地址)
// baseUrl: 'http://192.168.1.189:8883/front', // 后台接口请求地址
......
pages/index/index.vue
......@@ -5,7 +5,7 @@
<scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll">
<view class="content-box">
<view class="header-content"
:style="{height: statusBarHeight + 180+'px',paddingTop:statusBarHeight+'px' }">
:style="{paddingTop:statusBarHeight+'px' }">
<image :src="assetsPath + '/banner.png'" mode="widthFix"></image>
</view>
<view class="store-nav">
......@@ -15,7 +15,7 @@
<view class="flex-col content">
<view class="flex-row title-content ">
<text>凑角共享棋牌室</text>
<button class="cu-btn round bg-pink text-xl"
<button class="cu-btn round text-bold"
@tap="onNavToChangeStore">切换门店</button>
</view>
<view class="flex-1 tips-content">
......@@ -53,7 +53,7 @@
@tap="onNavToOrder(item)">
<view class="itemRow listStyle">
<view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="scaleToFill"></image>
<image class="room-img" :src="item.images[0]" mode="aspectFill" @tap.stop="onPreview(item.images)"></image>
<!-- <view class="absolute part-top-content">
<view class="flex-between">
<view></view>
......@@ -68,8 +68,9 @@
<view class="room-name">
<text>{{item.name}}</text>
</view>
<view class="price">
<view class="price" @tap.stop="onNavToInfo(item)">
<text>查看包厢</text>
<text class="cuIcon-playfill text-gray text-lg"></text>
</view>
</view>
<view class="facilitie-box">
......@@ -78,21 +79,36 @@
</view>
</view>
<view class="flex-priceBox">
<text style="color: #e70486;margin-left: -6rpx;">￥</text><text class="text-pink">{{ item.price }}</text><text>/小时</text>
<view class="flex-between confirm-box">
<view class="flex-priceBox">
<text style="color: #e70486;margin-left: -6rpx;">￥</text><text class="text-pink">{{ item.price }}</text><text>/小时</text>
</view>
<view class="confirm">
<button class="cu-btn">预定</button>
</view>
</view>
</view>
</view>
<view class="item-line"></view>
<view class="item-Go">
<view class="flex-row room-type">
<text>优惠套餐：</text>
<view v-for="(val,i) in item.packList" :key="i" class="item">
<text>{{val.name}}</text>
<view class="flex-wrap">
<view v-for="(val,i) in item.packList" :key="i" class="item">
<view class="part-1">
<text>惠</text>
</view>
<view class="part-2">
<text>{{val.duration}}小时{{val.price}}元</text>
</view>
<view class="part-3">
<text>{{(val.price/val.duration).toFixed(2)}}/小时</text>
</view>
</view>
</view>
<view class="">
</view>
</view>
<view class="confirm">
<text class="cuIcon-add text-white text-lg">预定</text>
</view>
</view>
</view>
......@@ -107,12 +123,12 @@
<text class="text-black text-xl text-bold">提示</text>
</view>
<view class="content">
<text class="text-black text-lg">定位已关闭，请开启定位，获取最近的门店信息</text>
<text class="text-black text-lg">未授权位置信息，请先授权，以便获取最近的门店信息</text>
</view>
</view>
<view class="flex-between btn-box">
<button class="cu-btn bg-white block" @tap="onClose">关闭</button>
<button class="cu-btn bg-pink block" @tap="onNavToSet">去设置</button>
<button class="cu-btn bg-pink block" @tap="onNavToSet">去授权</button>
</view>
</view>
</uni-popup>
......@@ -218,9 +234,6 @@
}
} else {
uni.showLoading({
title: "加载中"
})
this.onLoading()
}
},
......@@ -234,6 +247,9 @@
},
onLoad(option) {
uni.showLoading({
title: "加载中"
})
// 隐藏原生的tabbar
uni.hideTabBar();
this.onCheckUserLogin();
......@@ -286,49 +302,51 @@
})
},
onLoading() {
uni.showLoading({
title: "加载中..."
})
uni.getSetting({
complete: (res) => {
if(res.authSetting['scope.userLocation']){
uni.getLocation({
type: "gcj02",
success: (result) => {
if (result.errMsg == "getLocation:ok") {
this.latitude = result.latitude;
this.longitude = result.longitude;
uni.setStorageSync("latitude", result.latitude)
uni.setStorageSync("longitude", result.longitude)
} else {
uni.hideLoading()
uni.showToast({
icon: "none",
title: "获取位置信息失败"
})
}
},
fail: (err) => {
uni.showToast({
icon: "none",
title: err.errMsg
})
},
complete: () => {
uni.removeStorage({
key: 'storeId'
})
this.onGetListStore()
}
})
// uni.getSetting({
// complete: (res) => {
// console.log(res,'微信用户设置')
// if(res.authSetting['scope.userLocation']){
} else{
// } else{
// uni.hideLoading()
// this.$refs.popup.open()
// this.onGetListStore()
// }
// }
// })
uni.getLocation({
type: "gcj02",
success: (result) => {
if (result.errMsg == "getLocation:ok") {
this.latitude = result.latitude;
this.longitude = result.longitude;
uni.setStorageSync("latitude", result.latitude)
uni.setStorageSync("longitude", result.longitude)
} else {
uni.hideLoading()
uni.showToast({
icon: "none",
title: "获取位置信息失败"
})
this.$refs.popup.open()
this.onGetListStore()
}
},
fail: (err) => {
uni.showToast({
icon: "none",
title: '获取位置信息失败'
})
this.$refs.popup.open()
},
complete: () => {
uni.removeStorage({
key: 'storeId'
})
this.onGetListStore()
}
})
},
onGetListStore() {
getListStore({
......@@ -336,7 +354,6 @@
nowLatitude: this.latitude||'',
nowLongitude: this.longitude||''
}).then(res => {
uni.hideLoading()
if (res.data.code == 200 && res.data.data.length) {
this.storeList = res.data.data;
let obj = {}
......@@ -353,6 +370,7 @@
}
})
}
uni.hideLoading()
}
})
},
......@@ -434,6 +452,15 @@
this.onLoading()
}
})
},
onPreview(val){
uni.previewImage({
current:0,
urls:val,
complete:(res)=>{
console.log(res,"预览图片")
}
})
}
},
}
......@@ -461,6 +488,7 @@
flex-direction: column;
align-items: center;
width: 100%;
min-height: 100%;
margin-bottom: 50px;
background: #f5f5f5;
}
......@@ -471,24 +499,22 @@
justify-content: center;
width: 100%;
background-color: #E40583;
image {
display: block;
width: 68%;
width: 100%;
height: auto;
margin-top: -16upx;
}
}
.store-nav {
position: relative;
display: flex;
width: 90%;
width: 94%;
height: 220upx;
background: #FFFFFF;
box-shadow: 0rpx 7rpx 18rpx 0rpx rgba(0, 0, 0, 0.302);
border-radius: 29rpx 29rpx 29rpx 29rpx;
margin-top: -130upx;
margin-top: -60upx;
z-index: 10;
.icon-box {
......@@ -523,7 +549,14 @@
flex: 1;
}
button {
.cu-btn {
background: linear-gradient(to right,rgba(250, 219, 73, 1),rgba(250, 219, 75, 1),rgba(255, 167, 81, 1));
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
color: #ffffff;
font-size: 32upx;
font-weight: 600;
margin-right: 12upx;
padding: 0 24upx;
// width: 160upx;
// line-height: 46upx;
// background: #FFFFFF;
......@@ -534,13 +567,13 @@
// text-align: center;
// color: #3D3D3D;
// padding: 0;
height: 56rpx !important;
font-size: 28rpx !important;
background-color: #ffffff !important;
color: #130F26!important;
border: 1px solid #130F26!important;
margin: 0 22upx 0 0;
padding: 6rpx 20rpx 0 20rpx;
// height: 56rpx !important;
// font-size: 28rpx !important;
// background-color: #ffffff !important;
// color: #130F26!important;
// border: 1px solid #130F26!important;
// margin: 0 22upx 0 0;
// padding: 6rpx 20rpx 0 20rpx;
}
}
......@@ -550,6 +583,7 @@
position: relative;
width: 100%;
background: rgba(248, 250, 251, 0.5);
border-radius: 0 0 29rpx 29rpx;
.bg-img {
width: 100%;
height: 100%;
......@@ -617,7 +651,7 @@
.banner2 {
width: 674upx;
margin: auto;
margin:0 auto;
image {
display: block;
......@@ -629,21 +663,17 @@
.list-box {
display: flex;
align-items: center;
width: 680upx;
background: #FBF6EE;
border-radius: 14rpx 14rpx 14rpx 14rpx;
border: 2rpx solid #DBA556;
margin: 24upx 0;
width: 100%;
margin: 0 0 24upx;
padding-bottom: 24upx;
.title {
width: 620upx;
margin: 16upx 0;
width: 94%;
margin: 12upx 0;
text {
font-size: 35rpx;
font-weight: 800;
color: #3D3D3D;
font-size: 29upx;
font-weight: 400;
color: #333333;
}
}
......@@ -651,13 +681,14 @@
// position: relative;
// display: flex;
// flex-direction: column;
width: 620upx;
width: 92%;
// min-height: 314upx;
background-color: #FFFFFF;
border-radius: 18upx;
background-color: #FBF6EE;
border-radius: 14upx;
overflow: hidden;
margin: 0 0 20upx 0;
padding: 32rpx !important;
padding: 0 12upx;
border: 2upx solid #DBA556;
.part-top {
position: relative;
width: 620upx;
......@@ -668,7 +699,6 @@
box-shadow: 0 0 4upx rgba(0, 0, 0, 0.3);
overflow: hidden;
.room-img {
width: 100%;
height: 100%;
border-radius: 36upx 36upx 36upx 36upx;
......@@ -750,44 +780,21 @@
}
}
.room-type {
display: flex;
flex-direction: row;
align-items: center;
margin: 20upx 10upx 20upx 20upx;
.item {
display: flex;
justify-content: center;
align-items: center;
height: 44rpx;
padding: 0 8upx;
background: #FFFFFF;
border-radius: 11rpx 11rpx 11rpx 11rpx;
border: 2rpx solid #E40583;
margin: 0 5upx;
text {
font-size: 25upx;
color: #E40583;
}
}
}
// .confirm {
// display: flex;
// justify-content: center;
// align-items: center;
// align-self: flex-end;
// width: 80upx;
// height: 80upx;
// background: #E40583;
// border-radius: 0 0 32rpx 0;
.confirm {
display: flex;
justify-content: center;
align-items: center;
align-self: flex-end;
width: 80upx;
height: 80upx;
background: #E40583;
border-radius: 0 0 32rpx 0;
.text-lg {
font-size: 44upx;
font-weight: bolder;
}
}
// .text-lg {
// font-size: 44upx;
// font-weight: bolder;
// }
// }
}
}
}
......@@ -838,7 +845,7 @@
padding: 20rpx 0;
margin: 0 !important;
.text-title{
font-size: 28rpx !important;
font-size: 35rpx !important;
font-weight: 500 !important;
}
}
......@@ -852,19 +859,20 @@
.listStyle{
width: 100%;
display: flex;
border-radius: 16rpx !important;
flex-direction: row;
padding: 20upx 0;
// 容器
.part-top{
position: initial;
width: 212rpx !important;
height: 164rpx !important;
width: 260rpx !important;
height: 220rpx !important;
z-index: 10;
background-color: #FFFFFF;
border-radius: 8rpx !important;
border-radius: 12rpx !important;
box-shadow: 0 !important;
overflow: hidden;
.room-img{
width: 100%;
height: 100%;
border-radius: 0 !important;
}
}
......@@ -881,9 +889,9 @@
display: flex;
}
.price{
display: initial !important;
align-items: initial !important;
padding-top: 6rpx !important;
display: flex;
flex-direction: row;
align-items: center;
text{
color: #9e9e9e;
}
......@@ -913,53 +921,117 @@
}
.item-line{
width: 100%;
height: 1rpx;
background: #f1f0f0;
margin: 18rpx 0 32rpx 0;
height: 2rpx;
background: #F1E3CD;
}
// 栏目下
.item-Go{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
.flex-row{
flex: auto;
display: flex;
flex: 1;
align-items: center;
text {
color: #9e9e9e;
font-size: 28rpx;
}
.flex-wrap{
display: flex;
flex: 1;
flex-wrap: wrap;
}
// .item {
// display: flex;
// justify-content: center;
// align-items: center;
// height: 44rpx;
// padding: 0 8upx;
// background: #FFFFFF;
// border-radius: 8rpx;
// border: 2rpx solid #E40583;
// margin: 4upx 8upx;
// text {
// font-size: 25upx;
// color: #E40583;
// }
// }
}
.room-type {
display: flex;
flex-direction: row;
align-items: center;
padding: 20upx 0;
.item {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
height: 44rpx;
padding: 0 8upx;
background: #FFFFFF;
border-radius: 8rpx;
border: 2rpx solid #E40583;
margin: 0 10upx;
border-radius: 8upx;
border: 2rpx solid #fc3f21;
margin: 8upx;
overflow: hidden;
.part-1{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 10upx;
background: #fc3f21;
text{
color: #ffffff;
}
}
.part-2{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 10upx;
border-right: 2upx solid #fc3f21;
}
.part-3{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 10upx;
}
text {
font-size: 25upx;
color: #E40583;
color: #fc3f21;
}
}
}
.confirm {
justify-content: center;
align-items: center;
align-self: flex-end;
width: 50rpx;
height: 44rpx;
background: #e70486;
}
.confirm-box{
display: flex;
flex: 1;
width: 100%;
align-items: center;
}
.confirm {
.cu-btn{
padding: 0 10upx 0 14upx;
height: 52rpx;
background: linear-gradient(97deg, #E5268B, #FD5661);
color: #ffffff;
border-radius: 8rpx;
flex: 2;
letter-spacing: 8upx;
font-size: 32upx;
text-align: center;
line-height: 42rpx;
.text-lg {
font-size: 24rpx;
font-weight: bolder;
}
}
}
opacity: 0.95;
border-radius: 12rpx;
}
.text-lg {
font-size: 24rpx;
font-weight: bolder;
margin-bottom: 4upx;
margin-right: 4upx;
}
}
</style>
\ No newline at end of file
static/tab-bar-img/home.png
static/tab-bar-img/home.png

3.21 KB | W: | H:

static/tab-bar-img/home.png

1.05 KB | W: | H:

static/tab-bar-img/home.png
static/tab-bar-img/home.png
static/tab-bar-img/home.png
static/tab-bar-img/home.png
  • 2-up
  • Swipe
  • Onion skin
static/tab-bar-img/home_selected.png
static/tab-bar-img/home_selected.png

1.33 KB | W: | H:

static/tab-bar-img/home_selected.png

6.09 KB | W: | H:

static/tab-bar-img/home_selected.png
static/tab-bar-img/home_selected.png
static/tab-bar-img/home_selected.png
static/tab-bar-img/home_selected.png
  • 2-up
  • Swipe
  • Onion skin
static/tab-bar-img/order.png
static/tab-bar-img/order.png

3.19 KB | W: | H:

static/tab-bar-img/order.png

988 Bytes | W: | H:

static/tab-bar-img/order.png
static/tab-bar-img/order.png
static/tab-bar-img/order.png
static/tab-bar-img/order.png
  • 2-up
  • Swipe
  • Onion skin
static/tab-bar-img/order_selected.png
static/tab-bar-img/order_selected.png

1.55 KB | W: | H:

static/tab-bar-img/order_selected.png

1.21 KB | W: | H:

static/tab-bar-img/order_selected.png
static/tab-bar-img/order_selected.png
static/tab-bar-img/order_selected.png
static/tab-bar-img/order_selected.png
  • 2-up
  • Swipe
  • Onion skin
static/tab-bar-img/user.png
static/tab-bar-img/user.png

3.39 KB | W: | H:

static/tab-bar-img/user.png

1.22 KB | W: | H:

static/tab-bar-img/user.png
static/tab-bar-img/user.png
static/tab-bar-img/user.png
static/tab-bar-img/user.png
  • 2-up
  • Swipe
  • Onion skin
static/tab-bar-img/user_selected.png
static/tab-bar-img/user_selected.png

1.37 KB | W: | H:

static/tab-bar-img/user_selected.png

1.41 KB | W: | H:

static/tab-bar-img/user_selected.png
static/tab-bar-img/user_selected.png
static/tab-bar-img/user_selected.png
static/tab-bar-img/user_selected.png
  • 2-up
  • Swipe
  • Onion skin
utils/tools.js
......@@ -97,7 +97,7 @@ export const getTabbarHeight = function() {
var systemInfo = uni.getSystemInfoSync()
var data = {
...systemInfo,
tabbarH: 72, //tabbar高度--单位px
tabbarH: 50, //tabbar高度--单位px
tabbarPaddingB: 0, //tabbar底部安全距离高度--单位px
device: systemInfo.system.indexOf('iOS') != -1 ? 'iOS' : 'Android', //苹果或者安卓设备
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment