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.
432 lines
11 KiB
432 lines
11 KiB
<template>
|
|
<view
|
|
class="themes-head position-r"
|
|
:style="{ 'padding-top': navHeight + 'px' }"
|
|
>
|
|
<view
|
|
class="head-bx-h"
|
|
:style="[
|
|
{'height': `${navHeight}px`} ,
|
|
{'background': shopInfo.bgimg ? `url(${shopInfo.bgimg})` : `url(${event_rul}/static/images/df-bg.png)`},
|
|
{'background-size': '100% auto'}
|
|
]"
|
|
>
|
|
<view class="head-bx-ct position-a flex al-item-center">
|
|
<text class="iconfont icon-icon_arrow_left" @tap="goBack"></text>
|
|
<text
|
|
class="iconfont icon-shouye"
|
|
@tap="goto"
|
|
data-url="/pages/index/index"
|
|
data-opentype="reLaunch"
|
|
></text>
|
|
<view class="search flex al-item-center j-between border-rius-r">
|
|
<text class="iconfont icon-search"></text>
|
|
<input
|
|
placeholder="请输入搜索内容..."
|
|
type="text"
|
|
v-model="searchVlaue"
|
|
@confirm="search"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="head-bx-cont">
|
|
<view class="head-store flex al-item-center j-between">
|
|
<view class="store-l flex al-item-center">
|
|
<image class="store-logo" :src="shopInfo.logo"></image>
|
|
<view class="store-l-c flex1">
|
|
<view
|
|
class="store-l-tlt flex al-item-center"
|
|
@click="goto"
|
|
:data-url="
|
|
'/pagesA/shop/shop-detail?bid=' +
|
|
shopInfo.id +
|
|
'&pagestext=' +
|
|
shopInfo.name
|
|
"
|
|
>
|
|
<text class="head-store__name">{{ shopInfo.name || "" }}</text>
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
<!-- <view class="store-l-tx text-center" :style="{'background-color': '#FF8017'}">自营</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="store-r flex flex-colum al-item-center">
|
|
<view
|
|
@tap="followFn"
|
|
class="store-r-tlt text-center"
|
|
:class="shopInfo.isFollow ? 'followed' : 'isFollow'"
|
|
>
|
|
<image
|
|
class="follow-icon"
|
|
v-if="!shopInfo.isFollow"
|
|
:src="event_rul + '/static/theme/follow-icon.svg'"
|
|
></image>
|
|
<text>{{ shopInfo.isFollow ? "已关注" : "关注" }}</text>
|
|
</view>
|
|
<!-- <view class="store-r-tlt text-center" :style="{'border-color': '#FF8017', 'color': '#FF8017','border':' 1px solid'}">已关注</view> -->
|
|
<view class="store-r-tx">{{ shopInfo.attention || 0 }}人关注</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="isShowNav"
|
|
class="head-nav-list flex j-between"
|
|
:class="{ 'isFixed': navFixed }"
|
|
:style="[
|
|
{ 'top': navHeight - 1 + 'px' },
|
|
{ 'background': (navFixed ? shopInfo.bgimg ? `url(${shopInfo.bgimg})` : `url(${event_rul}/static/images/df-bg.png)`: '')},
|
|
{ 'background-position': `top -${navHeight}px left 0`},
|
|
{'background-size': '100% auto'}
|
|
]"
|
|
>
|
|
<block v-for="(item, idx) in navBar" :key="idx">
|
|
<view class="nav-list-itm" @tap="selectNav(idx)">
|
|
<view class="itm-tx color-white">{{ item }}</view>
|
|
<view
|
|
v-show="navIndex == idx"
|
|
class="itm-select border-rius-r"
|
|
></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from "vuex";
|
|
var app = getApp();
|
|
export default {
|
|
props: {
|
|
navHeight: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
navList: {
|
|
typa: Array,
|
|
default: function() {
|
|
return [];
|
|
},
|
|
},
|
|
shopData: {
|
|
typa: Object,
|
|
default: {},
|
|
},
|
|
navIndex: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
isShowNav: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
bxContHeight: 0,
|
|
timeout: null,
|
|
timeouttwo: null,
|
|
searchVlaue: "",
|
|
shopInfo: this.shopData,
|
|
event_rul: app.globalData.event_url,
|
|
navBar: [],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["opt","navFixed","heardHeight"]),
|
|
},
|
|
watch: {
|
|
// 监听shopData变化
|
|
shopData(newV, oldV) {
|
|
this.shopInfo = newV;
|
|
},
|
|
navList: {
|
|
handler: function(newV, oldV) {
|
|
this.navBar = newV;
|
|
},
|
|
deep: true,
|
|
}
|
|
},
|
|
mounted() {
|
|
const vr = uni.getSystemInfoSync();
|
|
this.styleHeight();
|
|
this.getData();
|
|
console.log(this.shopInfo.name,"shopInfo")
|
|
},
|
|
beforeDestroy() {
|
|
clearTimeout(this.timeout);
|
|
clearTimeout(this.timeouttwo);
|
|
},
|
|
methods: {
|
|
...mapActions(["acNavHeightTop","acHeardHeight"]),
|
|
getData() {
|
|
if (this.navList.length == 0) {
|
|
this.navBar = ["精选", "商品", "活动", "新品"];
|
|
} else {
|
|
this.navBar = this.navList;
|
|
}
|
|
const query = uni.createSelectorQuery().in(this);
|
|
this.timeouttwo = setTimeout(() => {
|
|
let listTop = 0;
|
|
query.select(".head-nav-list").boundingClientRect((data) => {
|
|
listTop = data ? Number(data.top) : 0;
|
|
}).exec();
|
|
query.select(".head-bx-cont").boundingClientRect((data) => {
|
|
const heightTop = listTop - (data ? Number(data.top) : 0);
|
|
this.acNavHeightTop(heightTop);
|
|
}).exec();
|
|
}, 200)
|
|
},
|
|
// 关注店铺
|
|
followFn() {
|
|
var that = this;
|
|
console.log("打印店铺信息+++++", this.shopData, this.shopData);
|
|
// 暂时写死 follow_id：27，正确为 follow_id：that.shopData.id
|
|
app.post(
|
|
"ApiMy/addFollow",
|
|
{ follow_id: that.shopData.id || "", type: "store" },
|
|
function (res) {
|
|
console.log("点击关注和取消关注addFollow===========", res);
|
|
if (res) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
that.getInfo();
|
|
}
|
|
);
|
|
},
|
|
|
|
getInfo() {
|
|
var that = this;
|
|
// 暂时写死 id：27，正确为 id：that.shopData.id
|
|
app.post(
|
|
"/ApiBusiness/follow",
|
|
{ bid: that.shopData.id || "" },
|
|
function (res) {
|
|
that.$set(that.shopData, "attention", res.data.followCount);
|
|
that.$set(that.shopData, "isFollow", res.data.isFollow);
|
|
|
|
console.log("-----", that.shopData);
|
|
// 公共头部信息
|
|
uni.setStorage({
|
|
key: "header_data",
|
|
data: that.shopData,
|
|
});
|
|
}
|
|
);
|
|
},
|
|
|
|
styleHeight() {
|
|
let query = uni.createSelectorQuery().in(this);
|
|
query.select(".head-bx-cont").boundingClientRect();
|
|
query.select(".themes-head").boundingClientRect();
|
|
this.timeout = setTimeout(() => {
|
|
query.exec((res) => {
|
|
if (res[0] != null && res[1] != null) {
|
|
this.bxContHeight = res[0].height;
|
|
if(!this.navFixed) {
|
|
this.acHeardHeight(res[1].height)
|
|
}
|
|
}
|
|
});
|
|
}, 200)
|
|
},
|
|
// 返回
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
// 搜索
|
|
search() {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pagesA/shop/search?keyword=" +
|
|
this.searchVlaue +
|
|
"&id=" +
|
|
this.shopData.id,
|
|
});
|
|
return;
|
|
},
|
|
selectNav(idx) {
|
|
this.$emit("navselect", idx, this.bxContHeight, this.heardHeight);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.themes-head {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
z-index: 3;
|
|
|
|
.head-bx-h {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
background-size: 100% 1020rpx;
|
|
background-position: top 0 left 0;
|
|
.head-bx-ct {
|
|
height: 32px;
|
|
left: 0;
|
|
bottom: 4px;
|
|
|
|
.icon-icon_arrow_left {
|
|
padding-left: 30rpx;
|
|
color: #fff;
|
|
font-size: 50rpx;
|
|
}
|
|
.icon-shouye {
|
|
font-size: 45rpx;
|
|
color: #fff;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
.search {
|
|
margin-left: 20rpx;
|
|
width: 60%;
|
|
height: 100%;
|
|
padding: 0 20rpx;
|
|
background-color: #fff;
|
|
|
|
.icon-search {
|
|
font-size: 50rpx;
|
|
color: #ababab;
|
|
}
|
|
input {
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-bx-cont {
|
|
.head-store {
|
|
color: #fff;
|
|
padding: 30rpx 28rpx 0;
|
|
&__name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* autoprefixer: ignore next */
|
|
-webkit-box-orient: vertical;
|
|
text-align: justify;
|
|
}
|
|
.store-l {
|
|
width: 80%;
|
|
.store-logo {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.store-l-c {
|
|
padding-left: 20rpx;
|
|
.store-l-tlt {
|
|
font-size: 32rpx;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
padding-right: 45rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon-arrow-right {
|
|
font-size: 40rpx;
|
|
padding: 6rpx 0 0 0;
|
|
}
|
|
}
|
|
.store-l-tx {
|
|
min-width: 60rpx;
|
|
// min-height: 30rpx;
|
|
padding: 4rpx 10rpx;
|
|
margin-top: 8rpx;
|
|
line-height: 30rpx;
|
|
display: inline-block;
|
|
font-size: 24rpx;
|
|
border-radius: 4rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.store-r {
|
|
.store-r-tlt {
|
|
width: 120rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
border-radius: 24rpx;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&.isFollow {
|
|
background-image: linear-gradient(
|
|
152deg,
|
|
rgba(255, 116, 25, 1) 0,
|
|
rgba(237, 12, 12, 1) 100%
|
|
);
|
|
color: #fff;
|
|
.follow-icon {
|
|
width: 28rpx;
|
|
height: 24rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
&.followed {
|
|
color: #fff;
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 200%;
|
|
height: 200%;
|
|
border: 2rpx solid #fff;
|
|
box-sizing: border-box;
|
|
transform: scale(0.5, 0.5);
|
|
border-radius: 48rpx;
|
|
transform-origin: 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.store-r-tx {
|
|
padding-top: 6rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-nav-list {
|
|
padding: 0 28rpx;
|
|
font-size: 28rpx;
|
|
align-items: flex-start;
|
|
background-size: 100% 1020rpx;
|
|
&.isFixed {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 36;
|
|
}
|
|
.nav-list-itm {
|
|
padding: 28rpx 32rpx 0;
|
|
.itm-tx {
|
|
z-index: 6;
|
|
}
|
|
.itm-select {
|
|
width: 100%;
|
|
height: 6rpx;
|
|
margin-top: 6rpx;
|
|
z-index: 2;
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|