You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
534 lines
12 KiB
534 lines
12 KiB
<template>
|
|
<view class="intimate">
|
|
<view class="intimate-navbar">
|
|
<!-- #ifndef H5 -->
|
|
<u-navbar title="贴心服务" :border-bottom="false" :background="isScroll?background:background1"></u-navbar>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="intimate-hd" @click="openPage(1)">
|
|
<image :src="storeInfo.imageList?storeInfo.imageList[0]:''"></image>
|
|
<view class="a">{{storeInfo.shop_name}}
|
|
<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon>
|
|
</view>
|
|
<view class="b">{{storeInfo.summary}}</view>
|
|
</view>
|
|
<!-- <scroll-view scroll-x class="intimate-menu">
|
|
<view class="item" @click="tabItem1(i)" v-for="i in 10" :key="i" :class="tabIndex1==i?'item-on':''">
|
|
<image src="@/static/home/phone.jpg"></image>
|
|
<view class="p">手机</view>
|
|
</view>
|
|
</scroll-view> -->
|
|
<view class="intimate-bd">
|
|
<scroll-view scroll-y class="a">
|
|
<view class="item" @click="tabItem(-1)" :class="tabIndex==-1?'item-on':''">全部商品</view>
|
|
<view class="item" @click="tabItem(i)" v-for="(a,i) in list" :key="i" :class="tabIndex==i?'item-on':''">
|
|
{{a.name}}</view>
|
|
</scroll-view>
|
|
<view class="b">
|
|
<view class="t">
|
|
<view class="item" @click="tabFilter(0)" :class="filterIndex==0?'item-on':''">价格</view>
|
|
<view class="item" @click="tabFilter(1)" :class="filterIndex==1?'item-on':''">折扣</view>
|
|
<view class="item" @click="tabFilter(2)" :class="filterIndex==2?'item-on':''">销量</view>
|
|
<view class="item" @click="tabFilter(3)" :class="filterIndex==3?'item-on':''">综合</view>
|
|
</view>
|
|
<scroll-view scroll-y class="l">
|
|
<view class="item" v-for="(a,i) in list1" :key="i" @click="openPage(2,a)">
|
|
<view style="width: 100%;height: 230rpx;align-items: center;display: flex;">
|
|
<image :src="a.server_image" mode="widthFix" style="height: 100%;"></image>
|
|
</view>
|
|
|
|
<view class="title">
|
|
<!-- <text>自营</text> -->
|
|
{{a.server_name}}
|
|
</view>
|
|
<view class="price">
|
|
<view class="n">￥<text>{{a.server_price}}</text></view>
|
|
<view class="o">￥{{a.line_price}}</view>
|
|
</view>
|
|
<!-- <view class="desc">
|
|
{{a.comment_num}}条评论 {{a.comment_rate}}好评率
|
|
</view> -->
|
|
</view>
|
|
<u-empty v-if="isShow" text="暂无信息" mode="list"></u-empty>
|
|
<u-divider v-if="list1.length == total && total>=1">没有更多了</u-divider>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as newFunApi from '@/api/newFun'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isScroll: true,
|
|
background1: {
|
|
background: '#fff',
|
|
},
|
|
background: {
|
|
background: 'transparent',
|
|
backgroundSize: '100%',
|
|
},
|
|
isShow: false,
|
|
tabIndex1: 1,
|
|
tabIndex: -1,
|
|
filterIndex: 0,
|
|
storeInfo: {},
|
|
keyword: "",
|
|
list: [],
|
|
total: 0,
|
|
list1: [],
|
|
filterFlag: true,
|
|
}
|
|
},
|
|
onLoad(o) {
|
|
this.tabIndex = o.index ? (o.index) : -1
|
|
this.getList();
|
|
this.storeInfo = uni.getStorageSync("cityInfo")
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop <= 44) {
|
|
this.isScroll = true;
|
|
} else {
|
|
this.isScroll = false;
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取列表
|
|
*/
|
|
async getList() {
|
|
let {
|
|
status,
|
|
message,
|
|
data
|
|
} = await newFunApi.serverCategoryList({});
|
|
if (status == 200) {
|
|
this.list = data.list
|
|
this.getGoodsList();
|
|
}
|
|
},
|
|
/**
|
|
* 获取商品列表
|
|
*/
|
|
async getGoodsList() {
|
|
let {
|
|
status,
|
|
message,
|
|
data
|
|
} = await newFunApi.serverList({
|
|
server_name: "",
|
|
category_id: this.tabIndex == -1 ? "" : (this.list.length > 0 ? this.list[this.tabIndex]
|
|
.category_id : ""),
|
|
order_field: this.filterIndex == 0 ? "server_price" : this.filterIndex == 1 ?
|
|
"line_price" : this.filterIndex == 2 ? "sold" : "",
|
|
order_sort: this.filterFlag ? "desc" : "asc"
|
|
});
|
|
if (status == 200) {
|
|
if (data.list.length > 0) {
|
|
data.list.map(a => {
|
|
a.server_price = Number(a.server_price);
|
|
a.line_price = Number(a.line_price)
|
|
})
|
|
}
|
|
this.list1 = data.list
|
|
this.total = data.total
|
|
this.isShow = data.total == 0 ? true : false
|
|
}
|
|
},
|
|
openPage(index, a) {
|
|
if (index == 1) {
|
|
uni.navigateTo({
|
|
url: "/pages/user/vip/goods"
|
|
})
|
|
} else if (index == 2) {
|
|
uni.setStorageSync("getInfo", a)
|
|
uni.navigateTo({
|
|
url: "/pages/news/recycling/detail?type="+1
|
|
})
|
|
}
|
|
},
|
|
tabItem(index) {
|
|
this.tabIndex = index;
|
|
this.filterIndex = 0;
|
|
this.getGoodsList();
|
|
},
|
|
tabFilter(index) {
|
|
if (index == this.filterIndex) {
|
|
this.filterFlag = !this.filterFlag
|
|
} else {
|
|
this.filterFlag = true
|
|
}
|
|
this.filterIndex = index;
|
|
this.getGoodsList();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.intimate {
|
|
background: url(https://www.royaum.com.cn/static/news/refund-bg1.png) center top no-repeat;
|
|
background-size: 100% auto;
|
|
|
|
&-hd {
|
|
width: 686rpx;
|
|
height: 170rpx;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
border-radius: 12rpx;
|
|
margin: 0 auto;
|
|
padding-top: 30rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
position: absolute;
|
|
width: 162rpx;
|
|
height: 162rpx;
|
|
border-radius: 162rpx;
|
|
left: 18rpx;
|
|
top: -20rpx;
|
|
}
|
|
|
|
.a {
|
|
font-size: 32rpx;
|
|
color: #212121;
|
|
margin-left: 220rpx;
|
|
}
|
|
|
|
.b {
|
|
margin-left: 220rpx;
|
|
font-size: 28rpx;
|
|
color: #646464;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-menu {
|
|
height: 180rpx;
|
|
white-space: nowrap;
|
|
margin-top: 30rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.item {
|
|
width: 150rpx;
|
|
height: 180rpx;
|
|
background: #FFFFFF;
|
|
display: inline-block;
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #FFFFFF;
|
|
text-align: center;
|
|
margin-left: 12rpx;
|
|
border-radius: 8rpx;
|
|
|
|
image {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
}
|
|
|
|
.p {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
}
|
|
|
|
&-on {
|
|
border: 1px solid #F21A1C;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
padding: 30rpx 0 0;
|
|
display: flex;
|
|
height: calc(100vh - 340rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.a {
|
|
width: 150rpx;
|
|
height: 100%;
|
|
|
|
.item {
|
|
padding: 20rpx 35rpx;
|
|
border-left: 3px solid #FFFFFF;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
box-sizing: border-box;
|
|
|
|
&-on {
|
|
background-color: #FFFFFF;
|
|
border-left-color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.b {
|
|
width: 600rpx;
|
|
height: 100%;
|
|
background-color: #FFFFFF;
|
|
|
|
.t {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
line-height: 100rpx;
|
|
|
|
.item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
&-on {
|
|
color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.l {
|
|
height: calc(100% - 120rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
width: 270rpx;
|
|
height: 369rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 15rpx;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
image {
|
|
width: 230rpx;
|
|
height: 230rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.title {
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
text {
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
.n {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
|
|
text {
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
|
|
.o {
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-share {
|
|
width: 548rpx;
|
|
height: 810rpx;
|
|
overflow: hidden;
|
|
|
|
.l {
|
|
width: 548rpx;
|
|
background: #FFFFFF;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.a {
|
|
width: 490rpx;
|
|
height: 243rpx;
|
|
margin: 0 auto;
|
|
padding-top: 24rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.b {
|
|
padding: 20rpx 20rpx;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
width: 220rpx;
|
|
height: 369rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 0;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.title {
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
text {
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding: 0 5rpx;
|
|
|
|
.n {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
|
|
text {
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
|
|
.o {
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
padding: 0 5rpx;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.c {
|
|
background-color: #F1F1F1;
|
|
height: 150rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 140rpx;
|
|
height: 122rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 640rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #F34A40;
|
|
position: fixed;
|
|
left: 50%;
|
|
margin-left: -320rpx;
|
|
top: 50%;
|
|
z-index: 2;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-top: 450rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.goods .uni-scroll-view .uni-scroll-view {
|
|
overflow: auto !important;
|
|
}
|
|
</style>
|
|
|