This commit is contained in:
kbing1981 2024-07-30 16:53:24 +08:00
parent 11372ab1fc
commit bc5a7b0d2c
9 changed files with 187 additions and 190 deletions

View File

@ -5,7 +5,7 @@
<view class="head-top"> <view class="head-top">
<view class="pay-title">项目次卡</view> <view class="pay-title">项目次卡</view>
<view class="flex"> <view class="flex">
<view style="width: 160upx;height: 160upx;"> <view class="detail-view-img">
<image :src="orderXm.packageImg" <image :src="orderXm.packageImg"
style="width: 100%;height: 100%;border-radius: 19upx;"></image> style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view> </view>
@ -1277,8 +1277,8 @@
justify-content: space-around; justify-content: space-around;
} }
.detail-view-img{ .detail-view-img{
width: 76px; width: 80px;
height: 76px; height: 80px;
border-radius: 9px; border-radius: 9px;
} }
.detail-view{ .detail-view{
@ -1321,14 +1321,23 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.header-bottom-money-zhen span{ .header-bottom-money-zhen span{
color: #FF6000 ; color: #FF1200;
} }
.header-bottom-money-zhen span:nth-child(1){
font-size: 26rpx;
}
.header-bottom-money-zhen span:nth-child(2){
font-size:38rpx;
font-weight: bold;
}
.header-bottom-money-zhen span:nth-child(3){
font-size: 26rpx;
}
.header-bottom-money-zhen{ .header-bottom-money-zhen{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
justify-content: space-between; }
}
.detail-foot-nav-bor{ .detail-foot-nav-bor{
width: 64px; width: 64px;
height: 11rpx; height: 11rpx;
@ -1358,20 +1367,19 @@
margin: 10px 0; margin: 10px 0;
} }
.detail-foot-title{ .detail-foot-title{
width: 115px; width: 100px;
height: 32px; height:24px;
background-image: url(../../static/servicePackage/horn.png); background: linear-gradient(90deg, #ffdf96, #feca76);
background-repeat: no-repeat; border-radius: 0 15rpx 0 30rpx;
background-size: 100% 100%; font-weight: 400;
font-weight: 400; font-size: 12px;
font-size: 15px; color: #a13504;
color: #FFFFFF; text-align: right;
text-align: right; line-height: 24px;
line-height: 32px; padding-right: 18px;
padding-right: 15px; position: absolute;
position: absolute; right: 0;
right: 0; top: 0;
top: 0;
} }
.detail-foot-list-top{ .detail-foot-list-top{
width: 95%; width: 95%;
@ -1399,12 +1407,12 @@
.tese span:nth-child(1){ .tese span:nth-child(1){
font-weight: bold; font-weight: bold;
font-size: 22rpx; font-size: 26rpx;
color: #333333; color: #333333;
} }
.tese span:nth-child(2){ .tese span:nth-child(2){
font-weight: 400; font-weight: 400;
font-size: 22rpx; font-size: 26rpx;
color: #8D9194; color: #8D9194;
} }
.tese{ .tese{
@ -1422,8 +1430,8 @@
} }
.detail-foot-list-top span:nth-child(2){ .detail-foot-list-top span:nth-child(2){
width: 76rpx; width: 76rpx;
height: 33rpx; height: 30rpx;
line-height: 33rpx; line-height: 30rpx;
text-align: center; text-align: center;
border-radius: 16rpx; border-radius: 16rpx;
border: 1px solid #7D7D7D; border: 1px solid #7D7D7D;
@ -1433,8 +1441,7 @@
margin: 0px 25px 0px 5px; margin: 0px 25px 0px 5px;
} }
.detail-foot-list-top span:nth-child(3){ .detail-foot-list-top span:nth-child(3){
font-weight: 400; font-size: 30rpx;
font-size: 28rpx;
color: #029d88; color: #029d88;
} }
@ -1711,7 +1718,7 @@
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
padding: 29rpx; padding:24rpx;
} }
.d-title{ .d-title{
font-weight: bold; font-weight: bold;
@ -1835,7 +1842,7 @@
margin-left: 5px; margin-left: 5px;
} }
.money-pay-zhen span{ .money-pay-zhen span{
color: #FF6000; color:#FF1200;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
} }

View File

@ -1135,17 +1135,16 @@
margin-right: 1px; margin-right: 1px;
} }
.header-bottom-foot-view{ .header-bottom-foot-view{
width: 32%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1px 8px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
background-color: rgba(230, 246, 243, 1);
border-radius: 15px; border-radius: 15px;
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 11px;
color: #029c88; color: #029c88;
} }
.header-bottom-foot-title{ .header-bottom-foot-title{

View File

@ -23,8 +23,8 @@
<view class="header-bottom-money-view"> <view class="header-bottom-money-view">
<view class="header-bottom-money"> <view class="header-bottom-money">
<view class="header-bottom-money-zhen"> <view class="header-bottom-money-zhen">
<span></span> <span></span>
<span>{{getList.price}}</span> <span>{{getList.price}}</span>
<!-- <span>/</span> --> <!-- <span>/</span> -->
</view> </view>
<view class="header-bottom-money-jia"> <view class="header-bottom-money-jia">
@ -550,14 +550,14 @@
color: #FF1200; color: #FF1200;
} }
.header-bottom-money-zhen span:nth-child(1){ .header-bottom-money-zhen span:nth-child(1){
font-size: 25rpx; font-size: 28rpx;
} }
.header-bottom-money-zhen span:nth-child(2){ .header-bottom-money-zhen span:nth-child(2){
font-size:35rpx; font-size:38rpx;
font-weight: bold; font-weight: bold;
} }
.header-bottom-money-zhen span:nth-child(3){ .header-bottom-money-zhen span:nth-child(3){
font-size: 22rpx; font-size: 28rpx;
} }
.header-bottom-money-zhen{ .header-bottom-money-zhen{
display: flex; display: flex;

View File

@ -13,6 +13,7 @@
@clear="clear"> @clear="clear">
</uni-search-bar> </uni-search-bar>
<view class="search-btn" @click="searchBtn"> <view class="search-btn" @click="searchBtn">
<image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
搜索 搜索
</view> </view>
</view> </view>
@ -197,7 +198,7 @@
.shop_label{ .shop_label{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10rpx; margin-top:4rpx;
} }
.shop_label span{ .shop_label span{
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
@ -256,7 +257,7 @@
color: #F95900; color: #F95900;
} }
.item-view-bottom-qian{ .item-view-bottom-qian{
margin-top: 5px; margin-top:2px;
} }
.item-view-bottom{ .item-view-bottom{
@ -322,7 +323,7 @@
color: #333333; color: #333333;
} }
.item-view{ .item-view{
width:59%; width:60%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -331,10 +332,10 @@
padding:5rpx 0; padding:5rpx 0;
} }
.item-img{ .item-img{
width: 246rpx; width: 240rpx;
height: 206rpx; height: 200rpx;
border-radius: 14rpx; border-radius: 14rpx;
position: relative; position: relative;
} }
.img-span{ .img-span{
padding: 2px 5px; padding: 2px 5px;
@ -354,19 +355,18 @@
height: 100%; height: 100%;
} }
.item { .item {
width: 96%; width: 100%;
margin: 0 auto; margin: 0 auto ;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 140px; /*height: 140px;*/
background: #FFFFFF; background: #FFFFFF;
border-radius: 21rpx; border-radius: 21rpx;
margin-top:10px; margin-top:10px;
align-items: center; align-items: center;
padding: 12px; padding:20rpx;
} }
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;
@ -388,7 +388,7 @@
width:100%; width:100%;
} }
/deep/.zp-paging-container-content{ /deep/.zp-paging-container-content{
width: 100%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.fenlei{ .fenlei{
@ -422,21 +422,21 @@
} }
.search-btn{ .search-btn{
text-align: center; text-align: center;
line-height: 56rpx; color: #019c88;
color: #fff; font-weight: bold;
position: absolute; position: absolute;
right:30rpx; right:40rpx;
top: 22rpx; top: 20rpx;
height: 56rpx !important; font-size: 30rpx;
display: flex;
align-items: center;
} }
/deep/.uni-searchbar__box-icon-search,.search-btn{ /deep/.uni-searchbar__box-icon-search,.search-btn{
width: 110rpx; width: 110rpx;
height: 50rpx; height: 50rpx;
background: #18A689;
border-radius: 31rpx;
} }
/deep/.uni-searchbar__box{ /deep/.uni-searchbar__box{
height: 30px; height:34px;
border-radius: 30px !important; border-radius: 30px !important;
background-color: #fff !important; background-color: #fff !important;
border: 1px solid #09a28a; border: 1px solid #09a28a;
@ -446,9 +446,9 @@
position: relative; position: relative;
} }
/deep/.uni-searchbar{ /deep/.uni-searchbar{
width: 230px; width:250px;
border-radius: 31rpx; border-radius: 31rpx;
margin-right: 20rpx; padding-right: 24rpx;
} }
.service-head-top-left image{ .service-head-top-left image{
width: 20px; width: 20px;
@ -473,14 +473,11 @@
justify-content: space-between; justify-content: space-between;
} }
.service-head-top{ .service-head-top{
width: 100%; height:90rpx;
height: 100rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: 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;
} }
</style> </style>

View File

@ -1169,18 +1169,16 @@
margin-right: 1px; margin-right: 1px;
} }
.header-bottom-foot-view{ .header-bottom-foot-view{
width: 35%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2px 5px; padding: 1px 8px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
background-color: rgba(230, 246, 243, 1);
border-radius: 15px; border-radius: 15px;
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 11px;
color: #029c88; color: #029c88;
} }
.header-bottom-foot-title{ .header-bottom-foot-title{

View File

@ -202,7 +202,7 @@
.shop_label{ .shop_label{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10rpx; margin-top: 4rpx;
} }
.shop_label span{ .shop_label span{
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
@ -269,7 +269,7 @@
color: #FF1200; color: #FF1200;
} }
.item-view-bottom-qian{ .item-view-bottom-qian{
margin-top: 5px; margin-top: 2px;
} }
.item-view-bottom{ .item-view-bottom{
@ -334,28 +334,28 @@
align-items: flex-end; align-items: flex-end;
} }
.item-view-title{ .item-view-title{
width: 76%; width: 76%;
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.item-view{ .item-view{
width:59%; width:60%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
justify-content: space-between; justify-content: space-between;
padding:5rpx 0; padding:5rpx 0;
} }
.item-img{ .item-img{
width: 246rpx; width: 240rpx;
height: 206rpx; height: 200rpx;
border-radius: 14rpx; border-radius: 14rpx;
position: relative; position: relative;
} }
.img-span{ .img-span{
padding: 2px 5px; padding: 2px 5px;
@ -373,19 +373,20 @@
.item-img image{ .item-img image{
width: 100%; width: 100%;
height: 100%; height: 100%;
} border-radius: 14rpx;
.item { }
width: 96%; .item {
margin: 0 auto; width: 100%;
display: flex; margin: 0 auto ;
flex-direction: row; display: flex;
justify-content: space-between; flex-direction: row;
height: 140px; justify-content: space-between;
background: #FFFFFF; /*height: 140px;*/
border-radius: 21rpx; background: #FFFFFF;
margin-top:10px; border-radius: 21rpx;
align-items: center; margin-top:10px;
padding: 12px; align-items: center;
padding:20rpx;
} }
.item-detail { .item-detail {
@ -409,7 +410,7 @@
width:100%; width:100%;
} }
/deep/.zp-paging-container-content{ /deep/.zp-paging-container-content{
width: 100%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.fenlei{ .fenlei{
@ -443,21 +444,21 @@
} }
.search-btn{ .search-btn{
text-align: center; text-align: center;
line-height: 56rpx; color: #019c88;
color: #fff; font-weight: bold;
position: absolute; position: absolute;
right:30rpx; right:40rpx;
top: 22rpx; top: 20rpx;
height: 56rpx !important; font-size: 30rpx;
display: flex;
align-items: center;
} }
/deep/.uni-searchbar__box-icon-search,.search-btn{ /deep/.uni-searchbar__box-icon-search,.search-btn{
width: 110rpx; width: 110rpx;
height: 50rpx; height: 50rpx;
background: #18A689;
border-radius: 31rpx;
} }
/deep/.uni-searchbar__box{ /deep/.uni-searchbar__box{
height: 30px; height:34px;
border-radius: 30px !important; border-radius: 30px !important;
background-color: #fff !important; background-color: #fff !important;
border: 1px solid #09a28a; border: 1px solid #09a28a;
@ -467,9 +468,9 @@
position: relative; position: relative;
} }
/deep/.uni-searchbar{ /deep/.uni-searchbar{
width: 230px; width:250px;
border-radius: 31rpx; border-radius: 31rpx;
margin-right: 20rpx; padding-right: 24rpx;
} }
.service-head-top-left image{ .service-head-top-left image{
width: 20px; width: 20px;

View File

@ -1,63 +1,62 @@
<!-- 自定义下拉刷新与上拉加载演示(vue) --> <!-- 自定义下拉刷新与上拉加载演示(vue) -->
<template> <template>
<view class="content-view"> <view class="content-view">
<z-paging ref="paging" v-model="dataList" @query="queryList"> <z-paging ref="paging" v-model="dataList" @query="queryList">
<template #top> <template #top>
<view class="service-head-top"> <view class="service-head-top">
<view class="service-head-top-left"> <view class="service-head-top-left">
<image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image> <image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image>
<span>{{typeData=='104'?'服务套餐':typeData=='105'?'项目次卡':'服务疗程'}}</span> <span>{{typeData=='104'?'服务套餐':typeData=='105'?'项目次卡':'服务疗程'}}</span>
</view> </view>
<view> <view>
<uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input" <uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input" @clear="clear">
@clear="clear"> </uni-search-bar>
</uni-search-bar> <view class="search-btn" @click="searchBtn">
<view class="search-btn" @click="searchBtn"> <image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
<image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image> 搜索
搜索 </view>
</view> </view>
</view> </view>
</view> <view class="fenlei">
<view class="fenlei"> <z-tabs class="z-tabs-fenlei":list="tabList" @change="tabChange" @changeClick="changeClick"/>
<z-tabs class="z-tabs-fenlei":list="tabList" @change="tabChange" @changeClick="changeClick"/> </view>
</view> </template>
</template> <template #loadingMoreNoMore >
<template #loadingMoreNoMore > <custom-nomore/>
<custom-nomore /> </template>
</template> <view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)"> <image :src="item.packageImg" mode="" class="item-img"></image>
<image :src="item.packageImg" mode="" class="item-img"></image> <view class="item-view">
<view class="item-view"> <view class="view-cata">
<view class="view-cata"> <view class="item-view-title">{{item.title}}</view>
<view class="item-view-title">{{item.title}}</view> <!-- <span class="xiaoer item-view-biao">{{item.classifyName}}</span> -->
<!-- <span class="xiaoer item-view-biao">{{item.classifyName}}</span> --> </view>
</view> <view class="item-view-bottom-qian">
<view class="item-view-bottom-qian"> <span></span>
<span></span> <span>{{item.price}}</span>
<span>{{item.price}}</span> <span>/ <text v-if="item.type!='104'">{{item.serviceCount}}</text> {{typeData=='104'?'':typeData=='105'?'':''}}</span>
<span>/ <text v-if="item.type!='104'">{{item.serviceCount}}</text> {{typeData=='104'?'':typeData=='105'?'':''}}</span> <span></span>
<span></span> <span>{{item.oldPrice}}<text v-if="item.type!='104'">/{{item.serviceCount}}</text>{{typeData=='104'?'':typeData=='105'?'':''}}</span>
<span>{{item.oldPrice}}<text v-if="item.type!='104'">/{{item.serviceCount}}</text>{{typeData=='104'?'':typeData=='105'?'':''}}</span> </view>
</view> <view class="flex" style="margin-top: 10rpx;">
<view class="flex" style="margin-top: 10rpx;"> <view class="shop_label" v-if="item.tagsData!=''">
<view class="shop_label" v-if="item.tagsData!=''"> <span v-for="tag in item.tagsData" :key="tag">{{tag}}</span>
<span v-for="tag in item.tagsData" :key="tag">{{tag}}</span> </view>
</view> <view class="shop_label" v-else>
<view class="shop_label" v-else> <span>助眠解压</span>
<span>助眠解压</span> </view>
</view> </view>
</view> <view class="item-view-bottom">
<view class="item-view-bottom"> <view class="item-view-xiangmu">
<view class="item-view-xiangmu"> <span>已售</span><span>{{item.sales}}</span><!-- | 好评{{item.esteemRate}}% -->
<span>已售</span><span>{{item.sales}}</span><!-- | 好评{{item.esteemRate}}% --> </view>
</view> <view class="item-view-bottom-btn">
<view class="item-view-bottom-btn"> 查看
查看 </view>
</view> </view>
</view> </view>
</view> </view>
</view> </z-paging>
</z-paging>
</view> </view>
</template> </template>
<script> <script>
@ -277,7 +276,7 @@
} }
.item-view-bottom-qian span:nth-child(3){ .item-view-bottom-qian span:nth-child(3){
font-size: 28rpx; font-size: 28rpx;
color: #F95900; color: #FF1200;
} }
.item-view-bottom-qian span:nth-child(2){ .item-view-bottom-qian span:nth-child(2){
font-weight: bold; font-weight: bold;

View File

@ -749,18 +749,16 @@
margin-right: 1px; margin-right: 1px;
} }
.header-bottom-foot-view{ .header-bottom-foot-view{
width: 35%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2px 5px; padding: 1px 8px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
background-color: rgba(230, 246, 243, 1);
border-radius: 15px; border-radius: 15px;
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 11px;
color: #029c88; color: #029c88;
} }
.header-bottom-foot-title{ .header-bottom-foot-title{
@ -777,7 +775,6 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 6rpx;
} }
.header-bottom-foot{ .header-bottom-foot{
width: 100%; width: 100%;
@ -979,7 +976,7 @@
color: #fff; color: #fff;
} }
.teamwork-plate{ .teamwork-plate{
background: #fff; background:#fff;
margin: 20rpx 0; margin: 20rpx 0;
align-items: center; align-items: center;
padding:15rpx 26rpx; padding:15rpx 26rpx;

View File

@ -445,12 +445,12 @@
justify-content: space-between; justify-content: space-between;
padding:5rpx 0; padding:5rpx 0;
} }
.item-img{ .item-img{
width: 240rpx; width: 240rpx;
height: 200rpx; height: 200rpx;
border-radius: 14rpx; border-radius: 14rpx;
position: relative; position: relative;
} }
.img-span{ .img-span{
padding: 2px 5px; padding: 2px 5px;
font-weight: 400; font-weight: 400;
@ -482,7 +482,6 @@
align-items: center; align-items: center;
padding:20rpx; padding:20rpx;
} }
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;