469 lines
20 KiB
Vue
469 lines
20 KiB
Vue
<template>
|
||
<view :class="theme_view">
|
||
<!-- 搜索 -->
|
||
<view class="flex-row jc-sb align-c padding-main bg-white pr oh">
|
||
<view class="flex-1 wh-auto">
|
||
<view class="search flex-row jc-sb align-c round border-color-main bg-white">
|
||
<view class="flex-row align-c flex-1 wh-auto padding-left-main">
|
||
<iconfont name="icon-index-search" size="28rpx" color="#ccc"></iconfont>
|
||
<input class="text-size-md flex-1 wh-auto padding-left-sm" type="done" :placeholder="$t('detail.detail.8q6345')" :value="search_keywords_value || ''" placeholder-class="cr-grey-c" @input="search_keywords_event" />
|
||
</view>
|
||
<button class="bg-main br-main cr-white round text-size-xs" type="default" size="mini" hover-class="none" @tap="search_button_event" :data-value="'/pages/plugins/shop/search/search?shop_id=' + propShop.id + '&'">
|
||
{{ is_shop_search_all_search_button == 1 ? $t('design.design.i7725u') : $t('common.search') }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view v-if="is_shop_search_all_search_button == 1" class="search-btn padding-left-main flex-row align-c">
|
||
<button class="bg-main-pair br-main-pair cr-white round text-size-xs" type="default" size="mini" hover-class="none" @tap="search_button_event" data-value="/pages/goods-search/goods-search?">{{$t('design.design.ay7m42')}}</button>
|
||
</view>
|
||
</view>
|
||
<!-- 顶部 -->
|
||
<view class="header plugins-shop-data-list bg-white oh">
|
||
<image :src="propShop.logo" mode="widthFix" class="shop-logo fl border-radius-main cp" @tap="image_show_event" :data-value="propShop.logo"></image>
|
||
<view class="base fr item">
|
||
<view class="shop-title single-text">
|
||
<!-- 认证信息 -->
|
||
<view v-if="(propBase.is_enable_auth || 0) == 1 && ((propShop.auth_type != -1 && (propShop.auth_type_msg || null) != null) || ((propShop.bond_status || 0) == 1 && (propShop.bond_status_msg || null) != null))" class="auth-icon dis-inline-block">
|
||
<!-- 实名认证 -->
|
||
<block v-if="propShop.auth_type != -1 && (propShop.auth_type_msg || null) != null">
|
||
<image :src="propShop.auth_type == 0 ? propBase.shop_auth_personal_icon : propBase.shop_auth_company_icon" class="icon va-m" mode="aspectFill" :data-value="'/pages/plugins/shop/license/license?id=' + propShop.id" @tap="url_event"></image>
|
||
</block>
|
||
<!-- 保证金认证 -->
|
||
<block v-if="(propShop.bond_status || 0) == 1 && (propShop.bond_status_msg || null) != null">
|
||
<image :src="propBase.shop_auth_bond_icon" class="icon va-m" mode="aspectFill"></image>
|
||
</block>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<text class="fw-b text-size va-m">{{ propShop.name }}</text>
|
||
</view>
|
||
<view class="base-bottom oh margin-top-sm text-size-xs">
|
||
<!-- 在线客服 -->
|
||
<view v-if="(propBase.is_service_info || 0) == 1" class="fl margin-right-xxl cp" @tap="popup_service_open_event">
|
||
<image class="va-m margin-right-sm" :src="common_static_url + 'customer-service-icon.png'" mode="scaleToFill"></image>
|
||
<text class="va-m cr-base">{{$t('design.design.21kak7')}}</text>
|
||
</view>
|
||
<!-- 收藏 -->
|
||
<view class="fl single-text cp" @tap="shop_favor_event">
|
||
<image class="va-m margin-right-sm" :src="common_static_url + 'favor' + (shop_favor_info.status == 1 ? '-active' : '') + '-icon.png'" mode="scaleToFill"></image>
|
||
<text :class="'va-m ' + (shop_favor_info.status == 1 ? 'cr-main' : '')">{{ shop_favor_info.text }}({{ shop_favor_info.count }})</text>
|
||
</view>
|
||
<!-- 评分 -->
|
||
<view v-if="(propShop.score_data || null) != null" class="fl margin-left-xxl">
|
||
<view class="dis-inline-block va-m">
|
||
<uni-rate :value="propShop.score_data.value" :readonly="true" :is-fill="false" :size="14" />
|
||
</view>
|
||
<text class="va-m cr-red">{{ propShop.score_data.value }}{{$t('design.design.745kx2')}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 导航 -->
|
||
<view v-if="((propShopGoodsCategory || null) != null && propShopGoodsCategory.length > 0) || ((shop_navigation || null) != null && shop_navigation.length > 0)" class="nav bg-white padding-sm flex-row">
|
||
<view v-if="propShopGoodsCategory.length > 0" class="item padding-main arrow-bottom nav-shop-category dis-inline-block cp" @tap="nav_shop_category_event">{{$t('recommend-form.recommend-form.203itn')}}</view>
|
||
<scroll-view scroll-x class="nav-scroll">
|
||
<view class="pr flex-row">
|
||
<block v-if="(shop_navigation || null) != null && shop_navigation.length > 0">
|
||
<block v-for="(item, index) in shop_navigation" :key="index">
|
||
<block v-if="(item.items || null) == null || item.items.length == 0">
|
||
<view class="item par dis-inline-block cp" @tap="nav_event" :data-value="item.url" :data-index="index">{{ item.name }}</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="item par dis-inline-block cp" @tap="nav_event" :data-index="index">{{ item.name }}</view>
|
||
<view v-if="(item.items_status || 0) == 1" class="nav-items pf oh bg-white cr-base">
|
||
<block v-for="(items, index2) in item.items" :key="index2">
|
||
<view class="item cp" @tap="nav_event" :data-value="items.url" :data-index="index" :data-indexs="index2">{{ items.name }}</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
<view v-if="nav_category_status" class="nav-category bg-white pa">
|
||
<scroll-view scroll-y class="category-scroll">
|
||
<block v-if="(propShopGoodsCategory || null) != null && propShopGoodsCategory.length > 0">
|
||
<block v-for="(item, index) in propShopGoodsCategory" :key="index">
|
||
<view class="item dis-block cr-base single-text cp" @tap="shop_category_event" :data-value="item.id">{{ item.name }}</view>
|
||
<block v-if="(item.items || null) != null && item.items.length > 0">
|
||
<view v-for="(item2, index2) in item.items" :key="index2" class="padding-left-xl">
|
||
<view class="item dis-block cr-base single-text cp" @tap="shop_category_event" :data-value="item2.id">{{ item2.name }}</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</block>
|
||
<block v-else>
|
||
<view class="padding-top-xxl padding-bottom-xxl cr-grey">{{$t('design.design.83occ4')}}</view>
|
||
</block>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 客服弹窗 -->
|
||
<component-popup :propShow="popup_service_status" propPosition="bottom" @onclose="popup_service_close_event">
|
||
<view class="padding-top-main bg-white">
|
||
<view class="padding-horizontal-main">
|
||
<view class="close oh">
|
||
<view class="fr" @tap.stop="popup_service_close_event">
|
||
<iconfont name="icon-close-o" size="28rpx" color="#999"></iconfont>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="popup-service-container">
|
||
<view v-if="(propShop || null) != null && (propBase || null) != null && (propBase.is_service_info || 0) == 1" class="header-service">
|
||
<view v-if="(propShop.chat_info || null) != null" class="item padding-main single-text">
|
||
<text class="va-m">{{$t('detail.detail.r4124d')}}</text>
|
||
<view class="dis-inline-block chat-info cp" @tap="chat_event">
|
||
<image class="dis-inline-block va-m" :src="propShop.chat_info.icon" mode="scaleToFill"></image>
|
||
<text class="margin-left-sm va-m cr-blue" :data-value="propShop.chat_info.chat_url">{{ propShop.chat_info.name }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="(propShop.service_qq || null) != null" class="item padding-main br-t-f9 single-text">
|
||
<text>Q Q：</text>
|
||
<text class="cp" @tap="text_copy_event" :data-value="propShop.service_qq">{{ propShop.service_qq }}</text>
|
||
</view>
|
||
<view v-if="(propShop.service_tel || null) != null" class="item padding-main br-t-f9 single-text">
|
||
<text>{{$t('order.order.7dxbm5')}}：</text>
|
||
<text class="cp" @tap="tel_event" :data-value="propShop.service_tel">{{ propShop.service_tel }}</text>
|
||
</view>
|
||
<view v-if="(propShop.open_week_name || null) != null && (propShop.close_week_name || null) != null" class="item padding-main br-t-f9 single-text">
|
||
<text>{{$t('article-detail.article-detail.728374')}}</text>
|
||
<text class="cp" @tap="text_copy_event" :data-value="propShop.open_week_name + $t('design.design.gv16tj') + propShop.close_week_name + '，' + propShop.open_time + '-' + propShop.close_time">{{ propShop.open_week_name }}{{$t('detail.detail.324777')}}{{ propShop.close_week_name }}，{{ propShop.open_time }}-{{ propShop.close_time }}</text>
|
||
</view>
|
||
<view v-if="(propShop.service_weixin_qrcode || null) != null || (propShop.service_line_qrcode || null) != null" class="oh qrcode tc br-t-f9 padding-top-main">
|
||
<view v-if="(propShop.service_weixin_qrcode || null) != null" class="item padding-bottom-lg dis-inline-block">
|
||
<image class="radius cp" :src="propShop.service_weixin_qrcode" mode="scaleToFill" @tap="image_show_event" :data-value="propShop.service_weixin_qrcode"></image>
|
||
<view>{{$t('detail.detail.54k10s')}}</view>
|
||
</view>
|
||
<view v-if="(propShop.service_line_qrcode || null) != null" class="item padding-bottom-lg dis-inline-block">
|
||
<image class="radius cp" :src="propShop.service_line_qrcode" mode="scaleToFill" @tap="image_show_event" :data-value="propShop.service_line_qrcode"></image>
|
||
<view>{{$t('detail.detail.vj4nom')}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</component-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const app = getApp();
|
||
import componentPopup from '@/components/popup/popup';
|
||
var common_static_url = app.globalData.get_static_url('common');
|
||
export default {
|
||
props: {
|
||
propBase: {
|
||
type: [Object,String],
|
||
default: '',
|
||
},
|
||
propShop: {
|
||
type: [Object,String],
|
||
default: '',
|
||
},
|
||
propShopGoodsCategory: {
|
||
type: [Array,String],
|
||
default: '',
|
||
},
|
||
propShopNavigation: {
|
||
type: [Array,String],
|
||
default: '',
|
||
},
|
||
propShopFavorUser: {
|
||
type: [Array,Object],
|
||
default: '',
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
theme_view: app.globalData.get_theme_value_view(),
|
||
common_static_url: common_static_url,
|
||
is_shop_search_all_search_button: 0,
|
||
search_keywords_value: '',
|
||
popup_service_status: false,
|
||
nav_category_status: false,
|
||
shop_category_tab_value: 0,
|
||
shop_navigation: [],
|
||
shop_favor_info: {
|
||
"text": this.$t('goods-detail.goods-detail.dco1sc'),
|
||
"status": 0,
|
||
"count": 0
|
||
},
|
||
};
|
||
},
|
||
|
||
components: {
|
||
componentPopup
|
||
},
|
||
created() {
|
||
this.init();
|
||
},
|
||
|
||
methods: {
|
||
// 初始化
|
||
init() {
|
||
var upd_data = {
|
||
is_shop_search_all_search_button: (this.propBase == null || parseInt(this.propBase.is_shop_search_all_search_button || 0) != 1) ? 0 : 1,
|
||
shop_navigation: this.propShopNavigation,
|
||
}
|
||
// 收藏信息
|
||
if ((this.propShop || null) != null) {
|
||
var status = this.propShopFavorUser.indexOf(this.propShop.id) != -1 ? 1 : 0;
|
||
upd_data['shop_favor_info'] = {
|
||
count: this.propShop.shop_favor_count || 0,
|
||
status: status,
|
||
text: (status == 1 ? this.$t('goods-detail.goods-detail.by7052') : '') + this.$t('goods-detail.goods-detail.dco1sc')
|
||
};
|
||
}
|
||
this.setData(upd_data);
|
||
},
|
||
|
||
// 店铺收藏事件
|
||
shop_favor_event(e) {
|
||
var user = app.globalData.get_user_info(this, 'shop_favor_event');
|
||
if (user != false) {
|
||
uni.showLoading({
|
||
title: this.$t('common.processing_in_text')
|
||
});
|
||
uni.request({
|
||
url: app.globalData.get_request_url("favor", "shopfavor", "shop"),
|
||
method: 'POST',
|
||
data: {
|
||
"id": this.propShop.id
|
||
},
|
||
dataType: 'json',
|
||
success: res => {
|
||
uni.hideLoading();
|
||
if (res.data.code == 0) {
|
||
this.setData({
|
||
shop_favor_info: res.data.data
|
||
});
|
||
app.globalData.showToast(res.data.msg, 'success');
|
||
} else {
|
||
if (app.globalData.is_login_check(res.data, this, 'shop_favor_event')) {
|
||
app.globalData.showToast(res.data.msg);
|
||
}
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.hideLoading();
|
||
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
// 搜索输入事件
|
||
search_keywords_event(e) {
|
||
this.setData({
|
||
search_keywords_value: e.detail.value || ''
|
||
});
|
||
},
|
||
|
||
// 搜索事件
|
||
search_button_event(e) {
|
||
var value = e.currentTarget.dataset.value || null;
|
||
app.globalData.url_open(value + 'keywords=' + this.search_keywords_value || '');
|
||
},
|
||
|
||
// 导航分类事件
|
||
nav_shop_category_event(e) {
|
||
this.setData({
|
||
nav_category_status: !this.nav_category_status
|
||
});
|
||
},
|
||
|
||
// 分类事件
|
||
shop_category_event(e) {
|
||
var value = e.currentTarget.dataset.value || null;
|
||
app.globalData.url_open('/pages/plugins/shop/search/search?shop_id=' + this.propShop.id + '&category_id=' + value);
|
||
},
|
||
|
||
// 导航事件
|
||
nav_event(e) {
|
||
// 存在子级则做子级显示隐藏处理
|
||
var value = e.currentTarget.dataset.value || null;
|
||
if(value == null) {
|
||
var index = e.currentTarget.dataset.index;
|
||
var temp_nav = this.propShopNavigation;
|
||
for(var i in temp_nav) {
|
||
if(i == index) {
|
||
temp_nav[i]['items_status'] = ((temp_nav[i]['items_status'] || 0) == 0) ? 1 : 0;
|
||
} else {
|
||
temp_nav[i]['items_status'] = 0;
|
||
}
|
||
}
|
||
this.setData({shop_navigation: temp_nav});
|
||
} else {
|
||
app.globalData.url_event(e);
|
||
}
|
||
},
|
||
|
||
// 开启客服弹层
|
||
popup_service_open_event(e) {
|
||
this.setData({
|
||
popup_service_status: true,
|
||
});
|
||
},
|
||
|
||
// 关闭客服弹层
|
||
popup_service_close_event(e) {
|
||
this.setData({
|
||
popup_service_status: false,
|
||
});
|
||
},
|
||
|
||
// url事件
|
||
url_event(e) {
|
||
app.globalData.url_event(e);
|
||
},
|
||
|
||
// 剪切板
|
||
text_copy_event(e) {
|
||
app.globalData.text_copy_event(e);
|
||
},
|
||
|
||
// 电话
|
||
tel_event(e) {
|
||
app.globalData.call_tel(e);
|
||
},
|
||
|
||
// 图片预览
|
||
image_show_event(e) {
|
||
app.globalData.image_show_event(e);
|
||
},
|
||
|
||
// 进入客服系统
|
||
chat_event() {
|
||
app.globalData.chat_entry_handle(this.propShop.chat_info.chat_url);
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
/**
|
||
* 搜索
|
||
*/
|
||
.search {
|
||
border: 2rpx solid;
|
||
padding: 2rpx;
|
||
}
|
||
|
||
.search button {
|
||
width: 140rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
padding: 0;
|
||
}
|
||
|
||
.search input {
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
}
|
||
|
||
.search-btn {
|
||
width: 148rpx;
|
||
}
|
||
|
||
.search-btn button {
|
||
width: 100%;
|
||
padding: 0;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
}
|
||
|
||
/**
|
||
* 头部
|
||
*/
|
||
.header {
|
||
padding: 20rpx 24rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.shop-logo {
|
||
width: 90rpx;
|
||
}
|
||
|
||
.base-bottom image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.header .base {
|
||
width: calc(100% - 110rpx);
|
||
}
|
||
|
||
.shop-title {
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
/**
|
||
* 导航
|
||
*/
|
||
.nav .nav-scroll {
|
||
float: right;
|
||
width: calc(100% - 172rpx);
|
||
}
|
||
|
||
.nav .nav-scroll .item.par {
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.nav .item {
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.nav-shop-category {
|
||
padding-right: 32rpx !important;
|
||
background-size: 28rpx 28rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
}
|
||
|
||
.nav .nav-items {
|
||
left: calc(50% - 212rpx);
|
||
top: 322rpx;
|
||
z-index: 1;
|
||
border-radius: 0 0 8rpx 8rpx;
|
||
box-shadow: 0 12rpx 12rpx rgb(0 0 0 / 10%);
|
||
}
|
||
|
||
.nav .nav-items .item {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
/**
|
||
* 导航商品分类
|
||
*/
|
||
.nav-category {
|
||
z-index: 1;
|
||
box-shadow: 0 12rpx 12rpx rgb(0 0 0 / 10%);
|
||
border-bottom-right-radius: 8rpx;
|
||
margin-top: 70rpx;
|
||
}
|
||
|
||
.nav-category .category-scroll {
|
||
max-height: 600rpx;
|
||
}
|
||
|
||
.nav-category .item {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
/**
|
||
* 商品分类切换
|
||
*/
|
||
.shop-category-list .item {
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.shop-category-list .item {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.shop-category-list .item:last-child {
|
||
margin-right: 20rpx;
|
||
}
|
||
</style>
|