<template>
|
<view class="store">
|
<!-- 轮播图 -->
|
<view class="store_banner">
|
<uni-swiper-dot :info="info" :current="current" field="content" mode="round">
|
<swiper class="swiper-box" @change="change">
|
<swiper-item v-for="(item, index) in 3" :key="index">
|
<view class="swiper-item">
|
<image src="@/static/uni.png" mode="aspectFill"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
</uni-swiper-dot>
|
<view class="store_banner_mode">
|
<text>{{current}}/{{info.length}}</text>
|
</view>
|
</view>
|
<!-- 商家信息 -->
|
<view class="store_info">
|
<view class="title">麦隆咖啡</view>
|
<view class="divide">
|
<uni-rate :value="5" size="18" color="#bbb" active-color="red" />
|
<text>5.0</text>
|
</view>
|
<view class="time">
|
<text>营业时间 09:00-20:00</text>
|
<view class="time_list">
|
<view class="time_list_item">
|
<text>有大桌子</text>
|
</view>
|
<view class="time_list_item">
|
<text>有大桌子</text>
|
</view>
|
</view>
|
</view>
|
<view class="address">
|
<view class="address_left">
|
<text>申长路988号虹桥万科中心T1楼105室</text>
|
<text>距您步行930m，需要11分钟</text>
|
</view>
|
<view class="address_right">
|
<image src="@/static/icon/ic_daohang@2x.png" mode="widthFix"></image>
|
<text>去这里</text>
|
</view>
|
</view>
|
<view class="coupon">
|
<view class="coupon_left">
|
<view class="coupon_left_price">
|
<text>¥</text>
|
<text>3</text>
|
</view>
|
<text class="coupon_left_mj">满3.01元可用</text>
|
</view>
|
<view class="coupon_content">
|
<text>生椰拿铁</text>
|
<text>瑞幸咖啡（虹桥协信中心店）</text>
|
<text>有效期至 2023-05-11 23:59</text>
|
</view>
|
<view class="coupon_right">
|
<text>领取</text>
|
</view>
|
</view>
|
</view>
|
<!-- 品牌故事 -->
|
<view class="store_story">
|
<view class="title">品牌故事</view>
|
<view class="content" :style="{display: open ? 'flex' : '-webkit-box'}">
|
弗洛里安咖啡馆(Coffee Florian)位于意大利佛罗伦萨威尼斯圣马可广场1720年开业，是意大利历史上最早的咖啡馆，至今仍在营业，狄更斯、歌德、拜伦等都曾曾曾在营业，狄更斯、歌德、拜伦等都曾曾曾
|
</view>
|
<view class="open" @click="open = !open">
|
<text>{{open ? '收起' : '展开'}}</text>
|
<uni-icons type="bottom" size="15" v-if="!open"></uni-icons>
|
<uni-icons type="top" size="15" v-else></uni-icons>
|
</view>
|
</view>
|
<!-- 咖啡菜单 -->
|
<view class="store_menu">
|
<view class="title">
|
<text>咖啡菜单</text>
|
<view class="title_to" @click="toCoffee">
|
<text>查看全部</text>
|
<uni-icons type="right" color="#999999" size="15"></uni-icons>
|
</view>
|
</view>
|
<view class="list">
|
<view class="list_item">
|
<image src="@/static/icon/img_baike@2x.png" mode="widthFix"></image>
|
<text>澳白Flatwhite</text>
|
</view>
|
<view class="list_item">
|
<image src="@/static/icon/img_baike@2x.png" mode="widthFix"></image>
|
<text>澳白Flatwhite</text>
|
</view>
|
<view class="list_item">
|
<image src="@/static/icon/img_baike@2x.png" mode="widthFix"></image>
|
<text>澳白Flatwhite</text>
|
</view>
|
</view>
|
</view>
|
<!-- 商家新鲜事 -->
|
<view class="store_news">
|
<view class="title">
|
<text>商家新鲜事</text>
|
<view class="title_to" @click="tobusinessNews">
|
<text>查看全部</text>
|
<uni-icons type="right" color="#999999" size="15"></uni-icons>
|
</view>
|
</view>
|
<view class="item">
|
<view class="item_info">
|
<view class="item_info_left">
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
<text>42coffee</text>
|
</view>
|
<view class="item_info_gz">关注</view>
|
</view>
|
<view class="item_desc">
|
元旦限定品质、咖啡知识蛋糕口感丰富。
|
</view>
|
<view class="item_list">
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
<!-- 精彩评论 -->
|
<view class="store_remak">
|
<view class="title">
|
<text>精彩评论</text>
|
<view class="title_to" @click="toComment">
|
<text>查看全部</text>
|
<uni-icons type="right" color="#999999" size="15"></uni-icons>
|
</view>
|
</view>
|
<view class="list">
|
<view class="list_item">
|
<view class="list_item_head">
|
<image src="@/static/logo.png" mode="widthFix"></image>
|
<text>木**王</text>
|
</view>
|
<view class="list_pf">
|
<uni-rate :value="5" size="18" color="#bbb" active-color="red" />
|
</view>
|
<view class="list_wz">
|
能用这个价位买到这样的质量真心值啦，做工精致用料
|
实在讲究，商家用心喽，不说价位质量与几百相比没什
|
么区别，值得购入！
|
</view>
|
<view class="list_imgs">
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
</view>
|
<view class="list_zan">
|
<image src="@/static/icon/ic_dianzan@2x.png" mode="widthFix"></image>
|
<text>2</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 操作 -->
|
<view class="shop_operate">
|
<view class="shop_operate_list">
|
<view class="shop_operate_list_item" @click="toReview">
|
<image src="@/static/icon/ic_pinglun@2x.png" mode="widthFix"></image>
|
<text>评论</text>
|
</view>
|
<view class="shop_operate_list_item">
|
<button open-type="share"></button>
|
<image src="@/static/icon/ic_fenxiang@2x.png" mode="widthFix"></image>
|
<text>分享</text>
|
</view>
|
</view>
|
<view class="shop_operate_ipt">
|
前往此地
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
current: 1,
|
info: [{
|
content: '内容 A'
|
}, {
|
content: '内容 B'
|
}, {
|
content: '内容 C'
|
}],
|
open: false
|
}
|
},
|
methods: {
|
change(e) {
|
this.current = e.detail.current + 1;
|
},
|
toCoffee() {
|
uni.navigateTo({
|
url: '/pages/coffee/index'
|
});
|
},
|
tobusinessNews() {
|
uni.navigateTo({
|
url: '/pages/businessNews/index'
|
});
|
},
|
toReview() {
|
uni.navigateTo({
|
url: '/pages/reviewMerchant/index'
|
});
|
},
|
toComment() {
|
uni.navigateTo({
|
url: '/pages/commentList/index'
|
});
|
}
|
},
|
onShareAppMessage: function(ops) {
|
if (ops.from === 'button') {
|
// 来自页面内转发按钮
|
console.log(ops.target)
|
}
|
return {
|
title: `测试分享标题`,
|
path: 'pages/storeDetails/index', //点击分享的图片进到哪一个页面
|
success: function (res) {
|
// 转发成功
|
console.log("转发成功:" + JSON.stringify(res));
|
},
|
fail: function (res) {
|
// 转发失败
|
console.log("转发失败:" + JSON.stringify(res));
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F5F5F5 !important;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.store {
|
width: 100%;
|
.store_banner /deep/ {
|
width: 100%;
|
height: 748rpx;
|
position: relative;
|
.store_banner_mode {
|
position: absolute;
|
bottom: 42rpx;
|
right: 32rpx;
|
width: 64rpx;
|
height: 36rpx;
|
background: rgba(0,0,0,0.4);
|
border-radius: 18rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text {
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.uni-swiper__warp {
|
width: 100%;
|
height: 100%;
|
}
|
.uni-swiper__dots-box {
|
display: none;
|
}
|
.swiper-box {
|
width: 100%;
|
height: 100%;
|
.swiper-item {
|
width: 100%;
|
height: 100%;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
.store_info {
|
width: 100%;
|
background-color: #FFFFFF;
|
padding: 28rpx 32rpx;
|
box-sizing: border-box;
|
.title {
|
font-size: 36rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
.divide {
|
display: flex;
|
align-items: center;
|
padding: 16rpx 0 22rpx 0;
|
border-bottom: 2rpx solid #F4F5F4;
|
text {
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #D20A0A;
|
margin-left: 10rpx;
|
}
|
}
|
.time {
|
display: flex;
|
flex-direction: column;
|
margin-top: 24rpx;
|
padding-bottom: 24rpx;
|
border-bottom: 2rpx solid #F4F5F4;
|
text {
|
font-size: 28rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
.time_list {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
margin-top: 16rpx;
|
.time_list_item {
|
padding: 4rpx 6rpx;
|
background-color: #F5F4F5;
|
border-radius: 4rpx;
|
margin-left: 12rpx;
|
&:first-child {
|
margin-left: 0 !important;
|
}
|
text {
|
font-size: 22rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
.address {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.address_left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
text {
|
&:first-child {
|
font-size: 28rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
&:last-child {
|
font-size: 24rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #999999;
|
margin-top: 16rpx;
|
}
|
}
|
}
|
.address_right {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
flex-shrink: 0;
|
image {
|
width: 25rpx;
|
height: 33rpx;
|
}
|
text {
|
font-size: 18rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #999999;
|
margin-top: 4rpx;
|
}
|
}
|
}
|
.coupon {
|
width: 100%;
|
margin-top: 32rpx;
|
height: 170rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
border-radius: 12rpx;
|
overflow: hidden;
|
border: 2rpx solid #D20A0A;
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.coupon_left {
|
width: 200rpx;
|
height: 100%;
|
background: rgba(217,217,217,0.4);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
margin-right: 32rpx;
|
.coupon_left_mj {
|
width: 100%;
|
text-align: center;
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #D20A0A;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.coupon_left_price {
|
display: flex;
|
align-items: baseline;
|
text {
|
&:first-child {
|
font-size: 36rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #D20A0A;
|
}
|
&:last-child {
|
font-size: 76rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #D20A0A;
|
}
|
}
|
}
|
}
|
.coupon_content {
|
width: 280rpx;
|
display: flex;
|
flex-direction: column;
|
text {
|
width: 100%;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
font-size: 20rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
margin-top: 16rpx;
|
&:first-child {
|
font-size: 32rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 0;
|
}
|
}
|
}
|
.coupon_right {
|
width: 128rpx;
|
height: 48rpx;
|
line-height: 48rpx;
|
margin-right: 24rpx;
|
text-align: center;
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
border-radius: 27rpx;
|
text {
|
font-size: 28rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
.store_story {
|
width: 100%;
|
margin-top: 16rpx;
|
padding: 28rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.title {
|
font-size: 32rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
margin-bottom: 20rpx;
|
}
|
.content {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 3;
|
font-size: 28rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
.open {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 24rpx;
|
text {
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 4rpx;
|
}
|
}
|
}
|
.store_menu {
|
width: 100%;
|
margin-top: 16rpx;
|
padding: 28rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-size: 32rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
.title_to {
|
display: flex;
|
align-items: center;
|
text {
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 8rpx;
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 24rpx;
|
.list_item {
|
width: 216rpx;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
image {
|
width: 216rpx;
|
height: 160rpx;
|
border-radius: 10rpx;
|
}
|
text {
|
width: 100%;
|
text-align: center;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
font-size: 28rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 14rpx;
|
}
|
}
|
}
|
}
|
.store_news {
|
width: 100%;
|
margin-top: 16rpx;
|
padding: 28rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-size: 32rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
.title_to {
|
display: flex;
|
align-items: center;
|
text {
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 8rpx;
|
}
|
}
|
}
|
.item {
|
width: 100%;
|
margin-top: 24rpx;
|
.item_info {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.item_info_left {
|
display: flex;
|
align-items: center;
|
image {
|
width: 64rpx;
|
height: 64rpx;
|
margin-right: 12rpx;
|
border-radius: 50%;
|
}
|
text {
|
font-size: 28rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
.item_info_gz {
|
width: 128rpx;
|
height: 48rpx;
|
line-height: 48rpx;
|
text-align: center;
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
border-radius: 27rpx;
|
font-size: 28rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.item_desc {
|
font-size: 28rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
margin: 24rpx 0;
|
}
|
.item_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
image {
|
width: 220rpx;
|
height: 220rpx;
|
border-radius: 10rpx;
|
margin-right: 12rpx;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
.store_remak {
|
width: 100%;
|
margin-top: 16rpx;
|
padding: 28rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-size: 32rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
.title_to {
|
display: flex;
|
align-items: center;
|
text {
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 8rpx;
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-top: 24rpx;
|
.list_item {
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 32rpx;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.list_pf {
|
width: 100%;
|
margin: 22rpx 0 24rpx 0;
|
}
|
.list_wz {
|
font-size: 28rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #000000;
|
}
|
.list_imgs {
|
width: 100%;
|
margin-top: 24rpx;
|
display: flex;
|
align-items: center;
|
image {
|
width: 220rpx;
|
height: 220rpx;
|
margin-right: 12rpx;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
}
|
}
|
.list_zan {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
margin-top: 22rpx;
|
image {
|
width: 30rpx;
|
height: 30rpx;
|
margin-right: 6rpx;
|
}
|
text {
|
font-size: 24rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #999999;
|
}
|
}
|
.list_item_head {
|
display: flex;
|
align-items: center;
|
image {
|
width: 64rpx;
|
height: 64rpx;
|
border-radius: 50%;
|
margin-right: 12rpx;
|
}
|
text {
|
font-size: 28rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
.shop_operate {
|
width: 100%;
|
padding: 16rpx 32rpx calc(env(safe-area-inset-bottom) + 16rpx) 0;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
border: 2rpx solid #F4F5F4;
|
position: sticky;
|
bottom: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.shop_operate_ipt {
|
width: 522rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
text-align: center;
|
background: linear-gradient(90deg, #D95A5A 0%, #D20A0A 100%);
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
box-sizing: border-box;
|
font-size: 32rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-left: 20rpx;
|
}
|
.shop_operate_list {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.shop_operate_list_item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
position: relative;
|
overflow: hidden;
|
button {
|
position: absolute;
|
top: -15rpx;
|
left: -15rpx;
|
width: 150rpx;
|
height: 150rpx;
|
background-color: rgba(0, 0, 0, 0);
|
border: none;
|
}
|
image {
|
width: 30rpx !important;
|
height: 30rpx !important;
|
margin-bottom: 8rpx;
|
}
|
text {
|
font-size: 16rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
