178 lines
3.5 KiB
Vue
178 lines
3.5 KiB
Vue
<template>
|
||
<view>
|
||
<block v-if="shop.shopName">
|
||
<!-- 搜索框 -->
|
||
<view class="shop-banner" v-if="shop.backgroundUrl" :style="'background-image: url('+ shop.backgroundUrl +');background-size: 100%;'">
|
||
<view class="shop-logo">
|
||
<u-avatar :src="shop.logoUrl" :size="120" mode="square" :show-level="true"></u-avatar>
|
||
</view>
|
||
<view class="shop-info">
|
||
<view class="title">{{shop.shopName}}
|
||
<u-icon name="star-fill" color="#fd8008" v-if="shop.follow" @click="onFollow(shop.shopId)"></u-icon>
|
||
<u-icon name="star" v-else @click="onFollow(shop.shopId)"></u-icon>
|
||
</view>
|
||
<!-- <view class="about">联系电话：{{ shop.phone }}</view> -->
|
||
<view class="address">地址：{{ shop.fullAddress }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop-banner" v-else>
|
||
<view class="shop-logo">
|
||
<u-avatar :src="shop.logoUrl" :size="120" mode="square" :show-level="true"></u-avatar>
|
||
</view>
|
||
<view class="shop-info">
|
||
<view class="title">{{shop.shopName}} 关注</view>
|
||
<!-- <view class="about">联系电话：{{ shop.phone }}</view> -->
|
||
<view class="address">地址：{{ shop.fullAddress }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="diy-search">
|
||
<view class="inner">
|
||
<view class="search-input">
|
||
<text class="search-icon iconfont icon-search"></text>
|
||
<input v-model="searchValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入关键词"
|
||
type="text"></input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
tips: {
|
||
type: String,
|
||
default: '搜索商品'
|
||
},
|
||
shop: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
searchValue: ''
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
onClick() {
|
||
this.$emit('event')
|
||
},
|
||
onFollow(shopId){
|
||
this.$emit('onFollow',shopId)
|
||
},
|
||
/**
|
||
* 搜索提交
|
||
*/
|
||
onSearch() {
|
||
const {
|
||
searchValue
|
||
} = this
|
||
if (searchValue) {
|
||
this.$emit('event', searchValue)
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.shop-banner {
|
||
background-color: #2C71C7;
|
||
height: 200rpx;
|
||
position: fixed;
|
||
top: var(--window-top);
|
||
left: var(--window-left);
|
||
right: var(--window-right);
|
||
z-index: 9;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.shop-logo {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 24rpx;
|
||
}
|
||
|
||
.shop-logo image {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.shop-info {
|
||
width: 100%;
|
||
margin-left: 20rpx;
|
||
height: 140rpx;
|
||
z-index: 10;
|
||
color: #FFFFFF;
|
||
|
||
.title {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.diy-search {
|
||
width: 750rpx;
|
||
background: #e2f2fb;
|
||
padding: 20rpx 40rpx;
|
||
font-size: 26rpx;
|
||
position: fixed;
|
||
z-index: 10;
|
||
top: 200rpx;
|
||
left: var(--window-left);
|
||
right: var(--window-right);
|
||
.inner {
|
||
width: 360rpx;
|
||
height: 60rpx;
|
||
background: #fff;
|
||
border-radius: 100rpx;
|
||
overflow: hidden;
|
||
|
||
&.radius {
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
&.round {
|
||
border-radius: 60rpx;
|
||
}
|
||
}
|
||
|
||
.search-input {
|
||
height: 60rpx;
|
||
color: #999;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.search-icon {
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.flow-delivery {
|
||
background-color: #2C71C7;
|
||
padding: 10rpx 26rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.col-title {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.my-order {
|
||
border: 1px solid #fff;
|
||
border-radius: 20rpx;
|
||
padding: 0rpx 20rpx;
|
||
}
|
||
}
|
||
</style>
|