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.
743 lines
16 KiB
743 lines
16 KiB
<template>
|
|
<gui-page>
|
|
<view slot="gBody">
|
|
<view style="padding-bottom: 300rpx;">
|
|
<view v-if="!isLoading" style="padding: 20rpx;">
|
|
<view style="background-color: #fff;padding: 10rpx;margin-bottom: 20rpx;border-radius: 10rpx;">
|
|
<view style="font-size: 32rpx;font-weight: bold;">
|
|
{{detail.shop_name}}
|
|
<image :src="detail.type == 1 ? '../../static/qiyi.png' : '../../static/geren.png'"
|
|
style="width: 75rpx;margin-left: 10rpx;" mode="widthFix"></image>
|
|
</view>
|
|
<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
|
|
<u-rate size="25" active-color="#f4a213" :current="detail.commentRate" :disabled="true" />
|
|
<view style="font-size: 25rpx;">{{detail.commentCount}}人评价</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="detail.imgs"
|
|
style="background-color: #fff;
|
|
border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;margin-bottom: 20rpx;">
|
|
<!-- <gui-swiper :swiperItems="detail.imgs" @taped="taped" :width="710" :height="350" :spacing="0"
|
|
imgMode="widthFix" :padding="0" borderRadius="0rpx"></gui-swiper> -->
|
|
|
|
<u-swiper :list="detail.imgs" name="img" img-mode="aspectFill" height="562"></u-swiper>
|
|
</view>
|
|
<view class="width: 100%; gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between"
|
|
style="background-color: #fff;padding: 20rpx 20rpx;border-radius: 10rpx;">
|
|
<view style="font-weight: bold;">
|
|
<view style="margin-bottom: 20rpx;">
|
|
营业时间：{{detail.shop_hours}}
|
|
</view>
|
|
<text style="padding: 10rpx 20rpx;background-color: #f4f4f6;font-size: 20rpx;color: #777;">
|
|
{{detail.category}}
|
|
</text>
|
|
</view>
|
|
<view style="text-align: center;">
|
|
<text class="gui-icons" style="font-size: 40rpx;" @click="onMakePhoneCall"></text>
|
|
<view style="text-align: center;font-size: 20rpx;">电话</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view style="background-color: #fff;padding:20rpx 20rpx;width: 100%;
|
|
margin-top: 20rpx;border-radius: 10rpx;min-height: 80rpx;line-height: 40rpx;">
|
|
<text class="gui-icons " style="font-size: 24rpx;font-weight: bold;"
|
|
@click="onOpenLocation"> {{detail.full_address}} </text>
|
|
</view>
|
|
|
|
<view style="margin: 20rpx 0;">
|
|
<gui-switch-navigation activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)"
|
|
activeLineWidth="50rpx" padding="30rpx" :size="0" textAlign="center"
|
|
activeDirection="center" :items="[{id:0,name:'商品'},{id:1,name:'评价'}]"
|
|
@change="navchange"></gui-switch-navigation>
|
|
</view>
|
|
|
|
<view v-if="type == 0">
|
|
<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
|
|
<view class="goods-item" v-for="(item, index) in list.data" :key="index"
|
|
@click="onTargetDetail(item.goods_id)">
|
|
<!-- 单列显示 -->
|
|
<view v-if="showView" class="dis-flex">
|
|
<!-- 商品图片 -->
|
|
<view class="goods-item_left">
|
|
<image class="image" :src="item.goods_image"></image>
|
|
</view>
|
|
<view class="goods-item_right">
|
|
<!-- 商品名称 -->
|
|
<view class="goods-name">
|
|
|
|
<text class="twoline-hide">{{ item.goods_name }}</text>
|
|
</view>
|
|
<view class="goods-item_desc">
|
|
<!-- 商品卖点 -->
|
|
<view class="desc-selling_point dis-flex">
|
|
<text class="oneline-hide">{{ item.selling_point }}</text>
|
|
</view>
|
|
<!-- 商品销量 -->
|
|
<view class="desc-goods_sales dis-flex">
|
|
<text>已售{{ item.goods_sales }}件</text>
|
|
</view>
|
|
<!-- 商品价格 -->
|
|
<view class="desc_footer">
|
|
<text class="price_x">¥{{ item.goods_price_min }}</text>
|
|
<text class="price_y col-9"
|
|
v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 多列显示 -->
|
|
<view v-else class="">
|
|
<!-- 商品图片 -->
|
|
<view class="goods-image">
|
|
<image class="image" mode="aspectFill" :src="item.goods_image"></image>
|
|
</view>
|
|
<view class="detail">
|
|
<!-- 商品名称 -->
|
|
<view class="goods-name">
|
|
<text class="twoline-hide">{{ item.goods_name }}</text>
|
|
</view>
|
|
<!-- 商品价格 -->
|
|
<view class="detail-price oneline-hide">
|
|
<text class="goods-price f-36" style="color: #7B0373;">￥{{ item.goods_price_min }}</text>
|
|
<text v-if="item.line_price_min > 0"
|
|
class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="type == 1&&detail.commentList">
|
|
<view class="comment-list" style="background-color: #fff;padding: 10rpx;">
|
|
<view class="comment-item" v-for="(item, index) in detail.commentList" :key="index">
|
|
<view class="comment-item_row dis-flex flex-y-center">
|
|
<view class="user-info dis-flex flex-y-center">
|
|
<avatar-image class="user-avatar" :url="item.user.avatar_url" :width="50" />
|
|
<text class="user-name">{{ item.user.nick_name }}</text>
|
|
</view>
|
|
<!-- 评星 -->
|
|
<view class="star-rating">
|
|
<u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" />
|
|
</view>
|
|
</view>
|
|
<view class="item-content m-top20">
|
|
<text class="f-26 twoline-hide">{{ item.content }}</text>
|
|
</view>
|
|
<view class="comment-time">{{ item.create_time }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer-fixed">
|
|
<view class="footer-container">
|
|
<!-- 导航图标 -->
|
|
<view class="foo-item-fast">
|
|
<!-- 首页 -->
|
|
<view class="fast-item fast-item--home" @click="onTargetHome">
|
|
<view class="fast-icon">
|
|
<text class="iconfont icon-shouye"></text>
|
|
</view>
|
|
<view class="fast-text">
|
|
<text>首页</text>
|
|
</view>
|
|
</view>
|
|
<!-- 客服 (仅微信小程序端显示) -->
|
|
<button class="btn-normal" @click="zaixiankefu">
|
|
<view class="fast-item" style="width: 160rpx;">
|
|
<view class="fast-icon">
|
|
<text class="iconfont icon-kefu1"></text>
|
|
</view>
|
|
<view class="fast-text">
|
|
<text>在线客服助手</text>
|
|
</view>
|
|
</view>
|
|
</button>
|
|
<button class="btn-normal" @click="open1">
|
|
<view class="fast-item" style="width: 160rpx;">
|
|
<view class="fast-icon">
|
|
<text class="iconfont icon-kefu1"></text>
|
|
</view>
|
|
<view class="fast-text">
|
|
<text>专属客服通道</text>
|
|
</view>
|
|
</view>
|
|
</button>
|
|
</view>
|
|
<!-- 操作按钮 -->
|
|
<view class="foo-item-btn">
|
|
<view class="btn-wrapper">
|
|
<view class="btn-item " @click="onMakePhoneCall"
|
|
style="background: linear-gradient(to top, #0E001F, #7B0373 );color: #fff;">
|
|
<text>联系商家</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<gui-popup ref="guipopup1">
|
|
<view class="gui-relative gui-box-shadow gui-img-in">
|
|
<gui-image :src="detail.service" :width="580"></gui-image>
|
|
<!-- 关闭按钮 -->
|
|
<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
|
|
@tap.stop="close1"></text>
|
|
</view>
|
|
</gui-popup>
|
|
</view>
|
|
</gui-page>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import * as ShopApi from '@/api/shop'
|
|
import * as GoodsApi from '@/api/goods'
|
|
import {
|
|
getEmptyPaginateObj,
|
|
getMoreListData
|
|
} from '@/core/app'
|
|
var img =
|
|
"https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 正在加载中
|
|
isLoading: true,
|
|
// 当前门店ID
|
|
shopId: undefined,
|
|
// 门店详情
|
|
detail: null,
|
|
list: getEmptyPaginateObj(), // 商品列表数据
|
|
type: 0,
|
|
rates: {
|
|
10: 5,
|
|
20: 3,
|
|
30: 1
|
|
},
|
|
showView: false,
|
|
swiperItems: [{
|
|
img: img,
|
|
url: '',
|
|
title: "测试标题 001",
|
|
opentype: 'navigate'
|
|
},
|
|
{
|
|
img: img,
|
|
url: '',
|
|
title: "测试标题 002",
|
|
opentype: 'navigate'
|
|
},
|
|
{
|
|
img: img,
|
|
url: '',
|
|
title: "测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
|
|
opentype: 'navigate'
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
// 记录当前门店ID
|
|
this.shopId = options.shopId
|
|
// 获取门店详情
|
|
this.getShopDetail()
|
|
this.getGoodsList()
|
|
},
|
|
|
|
methods: {
|
|
zaixiankefu() {
|
|
window.location.href = 'https://work.weixin.qq.com/kfid/kfc6206617a5de54b2d'; // 跳转到相对路径下的网页
|
|
},
|
|
open1: function() {
|
|
if (this.detail.service) {
|
|
this.$refs.guipopup1.open();
|
|
}
|
|
},
|
|
close1: function() {
|
|
this.$refs.guipopup1.close();
|
|
},
|
|
onTargetHome(e) {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
fanhui() {
|
|
uni.navigateBack()
|
|
},
|
|
onTargetDetail(goodsId) {
|
|
if (goodsId > 0) {
|
|
this.$navTo('pages/goods/detail', {
|
|
goodsId
|
|
})
|
|
}
|
|
},
|
|
taped: function(e) {
|
|
let _this = this
|
|
let b = [];
|
|
_this.detail.imgs.forEach(function(elements, indexs) {
|
|
b.push(elements.img)
|
|
});
|
|
uni.previewImage({
|
|
urls: b,
|
|
current: b[e]
|
|
});
|
|
},
|
|
|
|
getGoodsList() {
|
|
const app = this
|
|
const param = {
|
|
shop_id: app.shopId,
|
|
page: 1
|
|
}
|
|
GoodsApi.list(param)
|
|
.then(result => {
|
|
// 合并新数据
|
|
const newList = result.data.list
|
|
app.list.data = getMoreListData(newList, app.list, 1)
|
|
})
|
|
},
|
|
navchange: function(e) {
|
|
this.type = e
|
|
},
|
|
|
|
// 获取门店详情
|
|
getShopDetail() {
|
|
const app = this
|
|
app.isLoading = true
|
|
ShopApi.detail(app.shopId)
|
|
.then(result => app.detail = result.data.detail)
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
|
|
// 拨打电话
|
|
onMakePhoneCall() {
|
|
const app = this
|
|
uni.makePhoneCall({
|
|
phoneNumber: app.detail.phone
|
|
})
|
|
},
|
|
|
|
// 查看位置
|
|
onOpenLocation() {
|
|
const app = this
|
|
const {
|
|
detail
|
|
} = app
|
|
uni.openLocation({
|
|
name: detail.shop_name,
|
|
address: detail.region.province + detail.region.city + detail.region.region + detail.address,
|
|
longitude: Number(detail.longitude),
|
|
latitude: Number(detail.latitude),
|
|
scale: 15
|
|
})
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
* 分享当前页面
|
|
*/
|
|
onShareAppMessage() {
|
|
const app = this
|
|
// 构建页面参数
|
|
const params = app.$getShareUrlParams({
|
|
shopId: app.shopId
|
|
})
|
|
return {
|
|
title: app.detail.shop_name,
|
|
path: "/pages/shop/detail?" + params
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 分享到朋友圈
|
|
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
|
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
|
*/
|
|
onShareTimeline() {
|
|
const app = this
|
|
// 构建页面参数
|
|
const params = app.$getShareUrlParams({
|
|
shopId: app.shopId
|
|
})
|
|
return {
|
|
title: app.detail.shop_name,
|
|
path: "/pages/shop/detail?" + params
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f4f4f4;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
background: #fff;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.header {
|
|
padding: 30rpx 0;
|
|
border-bottom: 1rpx solid #f1f1f1;
|
|
|
|
.shop-logo,
|
|
.shop-name {
|
|
text-align: center;
|
|
}
|
|
|
|
.shop-logo {
|
|
.image {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.shop-name {
|
|
margin-top: 16rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.shop-summary {
|
|
padding: 20rpx;
|
|
margin-top: 30rpx;
|
|
font-size: 26rpx;
|
|
line-height: 1.6;
|
|
background: #f9f9f9;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.content {
|
|
margin-top: 30rpx;
|
|
|
|
.content-item {
|
|
padding: 12rpx 0;
|
|
|
|
.content-item__text {
|
|
padding: 0 20rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.goods-comment {
|
|
padding: 20rpx 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
margin-bottom: 25rpx;
|
|
|
|
.total {
|
|
margin: 0 4rpx;
|
|
}
|
|
|
|
.show-more {
|
|
margin-right: 8rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.comment-item {
|
|
padding: 15rpx 5rpx;
|
|
margin-bottom: 10rpx;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.comment-item_row {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
margin-right: 15rpx;
|
|
|
|
.user-avatar {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.item-content {
|
|
color: #333;
|
|
margin: 16rpx 0;
|
|
max-height: 76rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.comment-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 10rpx;
|
|
}
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
// 页面头部
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
|
|
// 搜索框
|
|
.search {
|
|
flex: 1;
|
|
}
|
|
|
|
// 切换显示方式
|
|
.show-view {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
font-size: 36rpx;
|
|
color: #505050;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// 排序组件
|
|
.store-sort {
|
|
position: sticky;
|
|
top: var(--window-top);
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
background: #fff;
|
|
color: #000;
|
|
z-index: 99;
|
|
|
|
.sort-item {
|
|
flex-basis: 33.3333%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 50rpx;
|
|
|
|
&.active {
|
|
color: $main-bg;
|
|
}
|
|
}
|
|
|
|
.sort-item-price .price-arrow {
|
|
margin-left: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #000;
|
|
|
|
.icon {
|
|
&.active {
|
|
color: $main-bg;
|
|
}
|
|
|
|
&.up {
|
|
margin-bottom: -16rpx;
|
|
}
|
|
|
|
&.down {
|
|
margin-top: -16rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 商品列表
|
|
.goods-list {
|
|
padding: 4rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// 单列显示
|
|
.goods-list.column-1 {
|
|
.goods-item {
|
|
width: 100%;
|
|
height: 280rpx;
|
|
margin-bottom: 12rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
line-height: 1.6;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.goods-item_left {
|
|
display: flex;
|
|
width: 300rpx;
|
|
background: #fff;
|
|
align-items: center;
|
|
|
|
.image {
|
|
display: block;
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
}
|
|
}
|
|
|
|
.goods-item_right {
|
|
position: relative;
|
|
flex: 1;
|
|
|
|
.goods-name {
|
|
margin-top: 10rpx;
|
|
min-height: 68rpx;
|
|
line-height: 1.3;
|
|
white-space: normal;
|
|
color: #484848;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.goods-item_desc {
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.desc-selling_point {
|
|
width: 400rpx;
|
|
font-size: 24rpx;
|
|
color: #e49a3d;
|
|
}
|
|
|
|
.desc-goods_sales {
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.desc_footer {
|
|
font-size: 24rpx;
|
|
|
|
.price_x {
|
|
margin-right: 16rpx;
|
|
|
|
color: #9e1a91;
|
|
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.price_y {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 平铺显示
|
|
.goods-list.column-2 {
|
|
.goods-item {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.goods-item {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding: 6rpx;
|
|
background-color: #FFF;
|
|
border-radius: 10rpx;
|
|
|
|
.goods-image {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0;
|
|
padding-bottom: 100%;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
border-radius: 1rpx;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 100%;
|
|
}
|
|
|
|
.image {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
padding: 8rpx;
|
|
background: #fff;
|
|
|
|
.goods-name {
|
|
min-height: 68rpx;
|
|
line-height: 1.3;
|
|
white-space: normal;
|
|
color: #484848;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.detail-price {
|
|
.goods-price {
|
|
margin-right: 8rpx;
|
|
|
|
}
|
|
|
|
.line-price {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.demo-close {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
opacity: 0.88;
|
|
text-align: center;
|
|
font-size: 58rpx;
|
|
}
|
|
|
|
.demo-lr {
|
|
flex: 1;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.demo-lr-items {
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@import "./detail.scss";
|
|
</style>
|