女性专区加上部 tap

This commit is contained in:
Mr.jiang 2024-08-23 09:08:59 +08:00
parent 6ddab227fa
commit 6905a5631a
3 changed files with 178 additions and 115 deletions

View File

@ -173,6 +173,7 @@
this.searchValue = e.searchValue this.searchValue = e.searchValue
} }
this.tabNav() this.tabNav()
this.getData()
}, },
// onPullDownRefresh: function() { // onPullDownRefresh: function() {
// this.page = 1; // this.page = 1;

View File

@ -19,68 +19,134 @@
</view> </view>
</view> </view>
</view> </view>
<view class="fenlei">
<z-tabs class="z-tabs-fenlei" :list="tabListS" @changeClick="changeClick"/>
</view>
</template> </template>
<template #loadingMoreNoMore> <template #loadingMoreNoMore>
<custom-nomore /> <custom-nomore />
</template> </template>
<!-- 右侧商品 --> <!-- 右侧商品 -->
<!-- 主体部分 --> <!-- 主体部分 -->
<view class="body"> <view class="body">
<!-- 左侧分类 --> <!-- 左侧分类 -->
<view class="leftTab"> <view class="leftTab">
<scroll-view scroll-y="true" class="tabBox"> <scroll-view scroll-y="true" class="tabBox">
<block v-for="(item,index) in tabList" :key="index"> <block v-for="(item,index) in tabList" :key="index">
<view class="tabItem" :class="tabCurrent == index?'tabActive':''" @click="changeTab(index,item)"> <view class="tabItem" :class="tabCurrent == index?'tabActive':''"
{{item.value}} @click="changeTab(index,item)">
</view> {{item.value}}
</block>
</scroll-view>
</view>
<!-- 右侧商品 -->
<view class="rightGoods">
<!-- <view class="title">{{productTitle}}</view> -->
<view class="item" v-for="(item,index) in dataList" :key="index+'2'" @click="itemClick(item)">
<view class="item-img">
<image :src="item.massageImg" mode=""></image>
</view> </view>
<view class="item-view"> </block>
<view class="view-cata"> </scroll-view>
<span class="item-view-title">{{item.title}}</span> </view>
<!-- <span class="xiaoer item-view-biao">{{item.classifyName}}</span> --> <!-- 右侧商品 -->
<view class="rightGoods">
<!-- <view class="title">{{productTitle}}</view> -->
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
<image :src="item.massageImg" mode="" class="item-img"></image>
<view class="item-view">
<view class="item-view-title">
{{item.title}}
</view>
<view class="item-view-bottom-qian">
<span></span>
<span>{{item.price}}</span>
<span v-if="item.type!='104' && item.type!='105' && item.type!='106'"></span>
<span v-else-if="item.type=='104'">/</span>
<span v-else>/{{item.serviceCount?item.serviceCount:''}}</span>
<span>{{item.oldPrice}}</span>
<span v-if="item.type!='104' && item.type!='105' && item.type!='106'"></span>
<span v-else-if="item.type=='104'">/</span>
<span v-else>/{{item.serviceCount?item.serviceCount:''}}</span>
</view>
<view class="flex" style="margin-top: 10rpx;">
<view class="shop_label" v-if="item.tagsData!=''">
<span v-for="tag in item.tagsData" :key="tag">{{tag}}</span>
</view> </view>
<view class="item-view-bottom-qian"> <view class="shop_label" v-else>
<span></span> <span>助眠解压</span>
<span>{{item.price}}</span>
<span>{{item.oldPrice}}</span>
</view> </view>
<view class="flex" style="margin-top: 10rpx;"> </view>
<view class="shop_label" v-if="item.tagsData!=''"> <view class="item-view-bottom">
<span v-for="tag in item.tagsData" :key="tag">{{tag}}</span> <view class="item-view-xiangmu">
</view> <span>已售</span><span>{{item.sales}}</span>
<view class="shop_label" v-else>
<span>助眠解压</span>
</view>
</view> </view>
<view class="item-view-bottom"> <view class="item-view-bottom-btn">
<view class="item-view-xiangmu"> 查看
<span>已售</span><span>{{item.sales}} <!-- | 好评{{item.esteemRate}}% --></span>
</view>
<view class="item-view-bottom-btn">
查看
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
</z-paging> </z-paging>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
tabListS:[
{
code: "单项",
id: 1,
name: "",
orderNum: 6,
parentId: 22,
remark: "单项",
status: 1,
type: "",
value: "单项",
},
{
code: "套餐",
id: 104,
name: "",
orderNum: 6,
parentId: 22,
remark: "套餐",
status: 1,
type: "",
value: "套餐",
},
{
code: "疗程",
id: 106,
name: "",
orderNum: 6,
parentId: 22,
remark: "疗程",
status: 1,
type: "",
value: "疗程",
},
{
code: "次卡",
id: 105,
name: "",
orderNum: 6,
parentId: 22,
remark: "次卡",
status: 1,
type: "",
value: "次卡",
},
{
code: "企业",
id: 114,
name: "",
orderNum: 6,
parentId: 22,
remark: "企业",
status: 1,
type: "",
value: "企业",
},
],
loadingType: 0, loadingType: 0,
myId: '', myId: '',
// v-model // v-model
@ -98,30 +164,29 @@
// //
tabCurrent: 0, tabCurrent: 0,
productTitle: '氧气罐', productTitle: '氧气罐',
type:'1'
} }
}, },
onLoad() { onLoad(e) {
this.myId = uni.getStorageSync('userId') this.myId = uni.getStorageSync('userId')
if (e) {
this.searchValue = e.searchValue
}
this.tabNav() this.tabNav()
this.getData()
}, },
// onPullDownRefresh: function() { // onPullDownRefresh: function() {
// this.page = 1; // this.page = 1;
// this.getData() // this.getData()
// }, // },
methods: { methods: {
// changeClick(index,item){
// loadMore: async function() { this.type=item.id
// //loadingType: 0. 1. 2. this.searchValue=''
// if(this.loadingType==0){ this.page = 1;
// this.loadingType=2 this.dataList = []
// // this.getData()
// setTimeout(()=>{ },
// this.page++;
// this.loadingType=0;
// this.getData()
// },1000)
// }
// },
tabNav() { tabNav() {
let data = { let data = {
type: "服务类型", type: "服务类型",
@ -156,7 +221,8 @@
by: '3', by: '3',
status: '1', status: '1',
classifyId: this.classifyId, classifyId: this.classifyId,
title: this.searchValue title: this.searchValue,
type:this.type
} }
this.$Request.get('/app/artificer/selectMassageTypePage', params).then(res => { this.$Request.get('/app/artificer/selectMassageTypePage', params).then(res => {
for (var i = 0; i < res.data.list.length; i++) { for (var i = 0; i < res.data.list.length; i++) {
@ -185,11 +251,31 @@
this.getData() this.getData()
}, },
itemClick(item) { itemClick(item) {
uni.navigateTo({ if (item.type == '104') {
url: '/pages/my/fuwuDateil?id=' + item.massageTypeId + '&limit=' + this.limit + '&page=' + this uni.navigateTo({
.page + '&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon url: '/pages/my/serviceOderDrtail?id=' + item.id + '&limit=' + this.limit + '&page=' + this
}) .page + '&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon
})
} else if (item.type == '105') {
uni.navigateTo({
url: '/pages/my/cikarDrtail?id=' + item.id + '&limit=' + this.limit + '&page=' + this
.page + '&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon
})
} else if (item.type == '106') {
uni.navigateTo({
url: '/pages/my/fuwuliaochengDetail?id=' + item.id + '&limit=' + this.limit + '&page=' +
this.page + '&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon
})
} else if(item.type == '114'){
uni.navigateTo({
url: '/pages/shop/qiyeDatail?id=' + item.id +'&name=' + 'index'
})
}else {
uni.navigateTo({
url: '/pages/my/fuwuDateil?id=' + item.id + '&limit=' + this.limit + '&page=' + this.page +
'&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon
})
}
} }
} }
} }
@ -201,6 +287,16 @@
margin-top: 106px; margin-top: 106px;
margin-left: 42%; margin-left: 42%;
} }
/deep/.z-tabs-item-title /deep/span{
white-space: nowrap;
}
.fenlei{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fff;
}
.body { .body {
// height: 100vh; // height: 100vh;
display: flex; display: flex;
@ -209,12 +305,11 @@
.leftTab { .leftTab {
width:19%; width:19%;
height: 100%; height: 100%;
background: #fff; background: #ffffff;
// border-radius: 0px 15rpx 0px 0px; // border-radius: 0px 15rpx 0px 0px;
// padding: 24rpx 11rpx; // padding: 24rpx 11rpx;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #f7f7f7; border-top: 1px solid #f7f7f7;
// margin-top: 10px;
position: fixed; position: fixed;
left: 0; left: 0;
.tabBox { .tabBox {
@ -224,7 +319,7 @@
text-align: center; text-align: center;
padding: 14rpx 0; padding: 14rpx 0;
// border-radius: 60rpx; // border-radius: 60rpx;
color: #333; color: #464646;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-bottom: 20rpx; margin-bottom: 20rpx;
@ -261,17 +356,6 @@
} }
} }
} }
.tab-view {
width: 100%;
display: flex;
flex-direction: column;
position: fixed;
z-index: 999;
background: #fff linear-gradient(60deg, rgba(115, 212, 183, 0.2), rgba(227, 251, 244, 0.1), rgba(193, 236, 223, 0.35));
border-bottom: 1rpx solid #c4ede1;
padding-top: 6rpx;
}
.shop_label { .shop_label {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -290,23 +374,15 @@
color: #f68607; color: #f68607;
} }
/deep/.z-tabs-item-title {
color: #222;
}
/deep/.refresh-body .content {}
/deep/.refresh-body { /deep/.refresh-body {
height: 100% !important; height: 845px !important;
border-top: 2px solid #f7f7f7; background-color: #f7f7f7;
margin: 80px 0px;
} }
.content-view { .content-view {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background-color: #f7f7f7;
} }
.item-view-bottom-btn { .item-view-bottom-btn {
@ -314,7 +390,7 @@
width: 131rpx; width: 131rpx;
height: 55rpx; height: 55rpx;
line-height: 55rpx; line-height: 55rpx;
background: linear-gradient(90deg, #019c88, #0FA78B, #35C495); background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
border-radius: 10rpx; border-radius: 10rpx;
font-weight: bold; font-weight: bold;
font-size: 28rpx; font-size: 28rpx;
@ -331,19 +407,18 @@
font-size: 28rpx; font-size: 28rpx;
color: #848484; color: #848484;
text-decoration-line: line-through; text-decoration-line: line-through;
margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(3) { .item-view-bottom-qian span:nth-child(3) {
font-size: 28rpx; font-size: 28rpx;
color: #848484; color: #FF6000;
text-decoration-line: line-through;
margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(2) { .item-view-bottom-qian span:nth-child(2) {
font-weight: bold !important; font-weight: bold;
font-size: 36.81rpx !important; font-size: 36.81rpx;
color: #FF6000 !important; color: #FF6000;
} }
.item-view-bottom-qian span:nth-child(1) { .item-view-bottom-qian span:nth-child(1) {
@ -367,7 +442,8 @@
.item-view-jianjie { .item-view-jianjie {
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #848484;
margin: 5px 0px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -377,7 +453,8 @@
} }
.item-view-biao { .item-view-biao {
border-radius: 15rpx 3rpx 15rpx 3rpx; padding: 1px 2px;
border-radius: 6rpx;
} }
.tuina { .tuina {
@ -386,13 +463,8 @@
} }
.xiaoer { .xiaoer {
width: 120rpx;
height: 35rpx;
line-height: 35rpx;
text-align: center;
background-color: #f1f8d7; background-color: #f1f8d7;
color: #58b314; color: #58b314;
font-size: 20rpx;
} }
.taishi { .taishi {
@ -428,13 +500,9 @@
} }
.item-view-title { .item-view-title {
width: 76%;
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 33rpx;
color: #333333; color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.item-view { .item-view {
@ -471,7 +539,6 @@
.item-img image { .item-img image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 14rpx;
} }
.item { .item {
@ -591,14 +658,14 @@
} }
.service-head-top-left span { .service-head-top-left span {
width: 180rpx; height: 100rpx;
height: 60rpx; background: url('../../static/images/headline.png') 0rpx 50rpx;
background: url('../../static/images/headline.png') 0rpx 26rpx;
background-repeat: no-repeat; background-repeat: no-repeat;
font-weight: bold; font-weight: bold;
font-size: 34rpx; font-size: 34rpx;
color: #171717; color: #171717;
margin-top: 14rpx; display: flex;
align-items: center;
} }
.service-head-top-left { .service-head-top-left {
@ -616,10 +683,4 @@
justify-content: space-between; justify-content: space-between;
background: #fff; background: #fff;
} }
.view-cata {
display: flex;
flex-direction: row;
align-items: center;
}
</style> </style>

View File

@ -130,6 +130,7 @@
onLoad() { onLoad() {
this.myId = uni.getStorageSync('userId') this.myId = uni.getStorageSync('userId')
this.tabNav() this.tabNav()
this.getData()
}, },
methods: { methods: {
tabNav() { tabNav() {