yangjun
/
sadjv3_user
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

约到店

This commit is contained in:
Mr.jiang 2024-08-01 14:29:43 +08:00
parent 33358afe67
commit 377203fea9
1 changed files with 288 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

523
pages/shop/index.vue
View File

@ -1,32 +1,34 @@
<!-- 自定义下拉刷新与上拉加载演示(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>{{getText}}</span> <span>{{getText}}</span>
</view> </view>
<view> <view>
<uni-search-bar @service="serviceTrue" :cancelext="'取消'" v-model="searchValue" @input="input" @clear="clear"> <uni-search-bar @service="serviceTrue" :cancelext="'取消'" v-model="searchValue" @input="input"
@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>
</template> </template>
<!-- <template #refresher="{refresherStatus}" > <!-- <template #refresher="{refresherStatus}" >
<custom-refresher :status="refresherStatus" /> <custom-refresher :status="refresherStatus" />
</template> --> </template> -->
<template #loadingMoreNoMore > <template #loadingMoreNoMore>
<custom-nomore /> <custom-nomore />
</template> </template>
<view v-if="getText=='企业'"> <view v-if="getText=='企业'">
<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.massageImg" mode="" class="item-img"></image> <image :src="item.massageImg" 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>
@ -39,7 +41,7 @@
</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>
</view> </view>
<view class="shop_label" v-else> <view class="shop_label" v-else>
<span>助眠解压</span> <span>助眠解压</span>
@ -49,75 +51,75 @@
<view class="item-view-xiangmu"> <view class="item-view-xiangmu">
<span>已售</span><span>{{item.sales}}</span> <span>已售</span><span>{{item.sales}}</span>
</view> </view>
<view class="item-view-bottom-btn"> <view class="item-view-bottom-btn">
查看 查看
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view v-if="getText=='商家'">
<view v-if="getText=='商家'"> <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.logo" mode="" class="item-img"></image>
<image :src="item.logo" 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.consortiaName}}</view>
<view class="item-view-title">{{item.consortiaName}}</view>
</view>
<view class="item-view-jianjie">
{{item.consortiaContent}}
</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="shop_label" v-else> <view class="item-view-jianjie">
<span>助眠解压</span> {{item.consortiaContent}}
</view> </view>
</view> <view class="flex" style="margin-top: 10rpx;">
<view class="item-view-bottom"> <view class="shop_label" v-if="item.tagsData!=''">
<view class="item-view-xiangmu"> <span v-for="tag in item.tagsData" :key="tag">{{tag}}</span>
<span></span> </view>
<view class="shop_label" v-else>
<span>助眠解压</span>
</view>
</view> </view>
<view class="item-view-bottom-btn"> <view class="item-view-bottom">
查看 <view class="item-view-xiangmu">
<span></span>
</view>
<view class="item-view-bottom-btn">
查看
</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 {
loadingType:0, loadingType: 0,
myId: '', myId: '',
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！ // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
dataList: [], dataList: [],
typeData:'104', typeData: '104',
tabIndex: 0, tabIndex: 0,
searchValue:'', searchValue: '',
serviceTrue:true, serviceTrue: true,
page:1, page: 1,
limit:10, limit: 10,
titleNmae:'', titleNmae: '',
classifyId:'', classifyId: '',
getName:'', getName: '',
getText:'', getText: '',
tagsData:[] tagsData: []
} }
}, },
onLoad(e){ onLoad(e) {
this.typeData=e.type this.typeData = e.type
this.getName=e.name; this.getName = e.name;
this.getText=e.text this.getText = e.text
this.myId = uni.getStorageSync('userId') this.myId = uni.getStorageSync('userId')
// this.getData(); // this.getData();
// uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
// title: this.getText, title: this.getText,
// }) })
}, },
// onPullDownRefresh: function() { // onPullDownRefresh: function() {
// this.page = 1; // this.page = 1;
@ -138,15 +140,15 @@
// } // }
// }, // },
input(res) {//搜索 输入框 input(res) { //搜索 输入框
this.searchValue=res; this.searchValue = res;
}, },
searchBtn(){//搜索按钮 searchBtn() { //搜索按钮
if(this.searchValue!=""){ if (this.searchValue != "") {
this.getData() this.getData()
} }
}, },
getData(){ getData() {
// var that=this; // var that=this;
// if(that.getText=='企业'){ // if(that.getText=='企业'){
// that.$Request.get("/app/artificer/selectMassageTypeQyPage", { // that.$Request.get("/app/artificer/selectMassageTypeQyPage", {
@ -184,57 +186,59 @@
// } // }
// }); // });
// } // }
this.$refs.paging.reload(true); this.$refs.paging.reload(true);
}, },
queryList(pageNo, pageSize) { queryList(pageNo, pageSize) {
if(this.getText=='企业'){ if (this.getText == '企业') {
const params = { var params = {
page: pageNo, page: pageNo,
limit: pageSize, limit: pageSize,
city:'长春', city: '长春',
title: this.searchValue title: this.searchValue
} }
this.$Request.get('/app/artificer/selectMassageTypeQyPage',params).then(res => { this.$Request.get('/app/artificer/selectMassageTypeQyPage', params).then(res => {
for(var i=0;i<res.data.list.length;i++){ for (var i = 0; i < res.data.list.length; i++) {
res.data.list[i].tagsData=res.data.list[i].labels.split(','); res.data.list[i].tagsData = res.data.list[i].labels.split(',');
} }
this.$refs.paging.complete(res.data.list); this.$refs.paging.complete(res.data.list);
}).catch(res => { }).catch(res => {
this.$refs.paging.complete(false); this.$refs.paging.complete(false);
}) })
}else{ } else {
const params = { var params = {
page: pageNo, page: pageNo,
limit: pageSize, limit: pageSize,
title: this.searchValue title: this.searchValue
} }
this.$Request.get('/app/consortia/selectConsortiaList',params).then(res => { this.$Request.get('/app/consortia/selectConsortiaList', params).then(res => {
for(var i=0;i<res.data.list.length;i++){ for (var i = 0; i < res.data.list.length; i++) {
res.data.list[i].tagsData=res.data.list[i].labels.split(','); res.data.list[i].tagsData = res.data.list[i].tags.split(',');
} }
this.$refs.paging.complete(res.data.list); console.log("res.data.list",params)
}).catch(res => { this.$refs.paging.complete(res.data.list);
this.$refs.paging.complete(false); }).catch(res => {
}) this.$refs.paging.complete(false);
} })
}
}, },
backImg(){//返回上一页 backImg() { //返回上一页
uni.reLaunch({ uni.reLaunch({
url:'/pages/index/index' url: '/pages/index/index'
}) })
}, },
clear(res) { clear(res) {
this.getData() this.getData()
}, },
itemClick(item) { itemClick(item) {
if(this.getText=='企业'){ if (this.getText == '企业') {
uni.navigateTo({ uni.navigateTo({
url:'/pages/my/fuwuDateil?id='+item.massageTypeId+'&limit='+this.limit+'&page='+this.page+'&name='+'index'+'&isCanCoupon='+item.isCanCoupon url: '/pages/my/fuwuDateil?id=' + item.massageTypeId + '&limit=' + this.limit + '&page=' +
this.page + '&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon
}) })
}else{ } else {
uni.navigateTo({ uni.navigateTo({
url:'/pages/shop/yueDaoDianDrtail?id='+item.consortiaId url: '/pages/shop/yueDaoDianDrtail?id=' + item.consortiaId
}) })
} }
@ -244,22 +248,24 @@
</script> </script>
<style scoped> <style scoped>
/deep/.refresh-body .content {
/deep/.refresh-body .content{
background-color: #f7f7f7; background-color: #f7f7f7;
} }
/deep/.refresh-body{
/deep/.refresh-body {
height: 100% !important; height: 100% !important;
border-top: 2px solid #f7f7f7; border-top: 2px solid #f7f7f7;
} }
.content-view{
.content-view {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
background-color: #f7f7f7; background-color: #f7f7f7;
position: relative; position: relative;
} }
.item-view-bottom-btn{
.item-view-bottom-btn {
text-align: center; text-align: center;
width: 131rpx; width: 131rpx;
height: 55rpx; height: 55rpx;
@ -270,95 +276,113 @@
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.item-view-bottom-qian span:nth-child(5){
font-size: 28rpx; .item-view-bottom-qian span:nth-child(5) {
color: #848484; font-size: 28rpx;
text-decoration-line: line-through; color: #848484;
text-decoration-line: line-through;
} }
.item-view-bottom-qian span:nth-child(4){
font-size: 26rpx; .item-view-bottom-qian span:nth-child(4) {
color: #848484; font-size: 26rpx;
text-decoration-line: line-through; color: #848484;
margin-left: 5px; text-decoration-line: line-through;
margin-left: 5px;
} }
.item-view-bottom-qian span:nth-child(3){
font-size: 26rpx; .item-view-bottom-qian span:nth-child(3) {
color: #848484; font-size: 26rpx;
text-decoration-line: line-through; color: #848484;
} text-decoration-line: line-through;
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #FF6000;
} }
.item-view-bottom-qian span:nth-child(1){
font-weight: 400; .item-view-bottom-qian span:nth-child(2) {
font-size: 26rpx; font-weight: bold;
color: #FF6000; font-size: 36.81rpx;
color: #FF6000;
} }
.item-view-bottom-qian{
margin-top: 2px; .item-view-bottom-qian span:nth-child(1) {
font-weight: 400;
font-size: 26rpx;
color: #FF6000;
} }
.item-view-bottom{
width: 100%; .item-view-bottom-qian {
display: flex; margin-top: 2px;
flex-direction: row;
justify-content: space-between;
align-items: center;
} }
.item-view-jianjie{
font-weight: 400; .item-view-bottom {
font-size: 24rpx; width: 100%;
color: #999999; display: flex;
margin:5px 0px; flex-direction: row;
display: -webkit-box; justify-content: space-between;
-webkit-box-orient: vertical; align-items: center;
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
overflow: hidden;
text-overflow: ellipsis;
} }
.item-view-biao{
.item-view-jianjie {
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin: 5px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 显示的行数，可以根据需要修改 */
overflow: hidden;
text-overflow: ellipsis;
}
.item-view-biao {
border-radius: 15rpx 3rpx 15rpx 3rpx; border-radius: 15rpx 3rpx 15rpx 3rpx;
} }
.tuina{
background-color:#d1f2df; .tuina {
background-color: #d1f2df;
color: #17984d; color: #17984d;
} }
.xiaoer{
background-color:#f1f8d7; .xiaoer {
background-color: #f1f8d7;
color: #58b314; color: #58b314;
font-size: 22rpx; font-size: 22rpx;
padding: 3rpx 3rpx; padding: 3rpx 3rpx;
border-radius: 15rpx 15rpx 2rpx 2rpx; border-radius: 15rpx 15rpx 2rpx 2rpx;
} }
.taishi{
background-color:#e5d5c6; .taishi {
background-color: #e5d5c6;
color: #805d39; color: #805d39;
} }
.kangfu{
background-color:#fcf3da; .kangfu {
background-color: #fcf3da;
color: #ff8600; color: #ff8600;
} }
.item-view-xiangmu span:nth-child(2){
font-weight: normal; .item-view-xiangmu span:nth-child(2) {
color: #333333; font-weight: normal;
font-size: 30rpx; color: #333333;
font-size: 30rpx;
} }
.item-view-xiangmu span:nth-child(1){
font-weight: normal; .item-view-xiangmu span:nth-child(1) {
color: #666666; font-weight: normal;
margin-right: 5rpx; color: #666666;
font-size: 30rpx; margin-right: 5rpx;
font-size: 30rpx;
} }
.item-view-xiangmu{
width: 100%; .item-view-xiangmu {
display: flex; width: 100%;
flex-direction: row; display: flex;
font-weight: 400; flex-direction: row;
font-size: 25rpx; font-weight: 400;
align-items: flex-end; font-size: 25rpx;
} align-items: flex-end;
.item-view-title{ }
.item-view-title {
width: 75%; width: 75%;
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
@ -367,25 +391,29 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.item-view{
width:60%; .item-view {
height: 100%; width: 60%;
display: flex; height: 100%;
flex-direction: column; display: flex;
justify-content: center; flex-direction: column;
justify-content: space-between; justify-content: center;
padding:5rpx 0; justify-content: space-between;
padding: 5rpx 0;
} }
.item-img{
width: 240rpx; .item-img {
height: 200rpx; width: 240rpx;
border-radius: 14rpx; height: 200rpx;
position: relative; border-radius: 14rpx;
position: relative;
} }
.item-img img{
.item-img img {
border-radius: 14rpx; border-radius: 14rpx;
} }
.img-span{
.img-span {
padding: 2px 5px; padding: 2px 5px;
font-weight: 400; font-weight: 400;
font-size: 8px; font-size: 8px;
@ -398,23 +426,26 @@
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
} }
.item-img image{
.item-img image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.item { .item {
width: 100%; 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:20rpx; padding: 20rpx;
} }
.item-detail { .item-detail {
padding: 5rpx 15rpx; padding: 5rpx 15rpx;
border-radius: 10rpx; border-radius: 10rpx;
@ -431,21 +462,25 @@
width: 100%; width: 100%;
background-color: #eeeeee; background-color: #eeeeee;
} }
/deep/.zp-paging-container{
/deep/.zp-paging-container {
background-color: #f7f7f7; background-color: #f7f7f7;
width:100%; width: 100%;
} }
/deep/.zp-paging-container-content{
/deep/.zp-paging-container-content {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.fenlei{
.fenlei {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.index-fenl-title{
.index-fenl-title {
width: 81rpx; width: 81rpx;
text-align: center; text-align: center;
position: relative; position: relative;
@ -454,37 +489,43 @@
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
font-size: 34rpx; font-size: 34rpx;
color:#019C88; color: #019C88;
} }
.index-fenl-title-bottom{
.index-fenl-title-bottom {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
margin-bottom: 0px; margin-bottom: 0px;
width: 81rpx; width: 81rpx;
height: 14rpx; height: 14rpx;
border-radius: 7rpx; border-radius: 7rpx;
background: linear-gradient(-48deg,rgba(1, 156, 136, 0.35),rgba(45, 196, 142, 0.35)); background: linear-gradient(-48deg, rgba(1, 156, 136, 0.35), rgba(45, 196, 142, 0.35));
} }
/deep/.uni-searchbar__cancel{
/deep/.uni-searchbar__cancel {
display: none; display: none;
} }
.search-btn{
.search-btn {
text-align: center; text-align: center;
color: #019c88; color: #019c88;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
right:40rpx; right: 40rpx;
top: 20rpx; top: 20rpx;
font-size: 30rpx; font-size: 30rpx;
display: flex; display: flex;
align-items: center; 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;
} }
/deep/.uni-searchbar__box{
height:34px; /deep/.uni-searchbar__box {
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;
@ -493,75 +534,87 @@
flex-flow: row-reverse; flex-flow: row-reverse;
position: relative; position: relative;
} }
/deep/.uni-searchbar{
width:250px; /deep/.uni-searchbar {
width: 250px;
border-radius: 31rpx; border-radius: 31rpx;
padding-right: 24rpx; padding-right: 24rpx;
} }
.service-head-top-left image{
.service-head-top-left image {
width: 20px; width: 20px;
height: 20rpx; height: 20rpx;
margin-right:5px; margin-right: 5px;
margin-left: 10rpx; margin-left: 10rpx;
} }
.service-head-top-left span{
.service-head-top-left span {
width: 180rpx; width: 180rpx;
height: 60rpx; height: 60rpx;
background:url('../../static/images/headline.png') 0rpx 26rpx; 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; margin-top: 14rpx;
} }
.service-head-top-left{
.service-head-top-left {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.service-head-top{
height:90rpx; .service-head-top {
height: 90rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.view-cata{
.view-cata {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.shop_category{
.shop_category {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
font-size: 26rpx; font-size: 26rpx;
padding: 8rpx 0; padding: 8rpx 0;
margin-top:40rpx ; margin-top: 40rpx;
} }
.shop_category_a{
.shop_category_a {
color: #019c88; color: #019c88;
} }
.shop_item{
.shop_item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
width: 90%; width: 90%;
margin: 15rpx auto; margin: 15rpx auto;
} }
.shop_color{
color:#fb672b; .shop_color {
color: #fb672b;
font-weight: bold; font-weight: bold;
font-size: 38rpx; font-size: 38rpx;
} }
.shop_label{
.shop_label {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 4rpx; margin-top: 4rpx;
} }
.shop_label span{
.shop_label span {
background: linear-gradient(90deg, #ffefde, #fff7ef); background: linear-gradient(90deg, #ffefde, #fff7ef);
height: 34rpx; height: 34rpx;
line-height: 34rpx; line-height: 34rpx;
@ -572,16 +625,16 @@
margin-bottom: 8rpx; margin-bottom: 8rpx;
color: #f68607; color: #f68607;
} }
.shop-arrow{
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
width: 7px;
height: 7px;
border-color: #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 7px;
}
</style> .shop-arrow {
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
width: 7px;
height: 7px;
border-color: #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 7px;
}
</style>