This commit is contained in:
faiz 2024-03-26 15:02:49 +08:00
commit 0641684278
7 changed files with 1439 additions and 374 deletions

View File

@ -8,7 +8,14 @@ import request from "@/utils/request.js";
* 获取主页数据 无需授权
*
*/
export function getIndexData()
export function shopInit(data)
{
return request.get("common/home",{},{ noAuth : true});
return request.get("store/merchant/category",data,{ noAuth : true});
}
//获取附件商家
export function shopNearby(data){
return request.get('store/merchant/lst',data,{noAuth:true});
}
export function shopDetail(data){
return request.get('store/merchant/detail/'+data.id,{},{noAuth:true});
}

View File

@ -1,5 +1,5 @@
{
"name" : "多商户商城",
"name" : "铸源商城",
"appid" : "__UNI__496DF55",
"description" : "",
"versionName" : "1.0.4",

View File

@ -64,6 +64,17 @@
// #endif
}
},
{
"path": "pages/shop/search/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "商家搜索"
// #ifdef MP || APP-PLUS
,
"navigationBarBackgroundColor": "#F2F2F2"
// #endif
}
},
{
"path": "pages/goods_details/index",
"style": {

View File

@ -126,8 +126,12 @@
.content .content-list .list-container .list-item .list-item-right .item-content{
display: flex;
justify-content: space-between;
white-space: pre-wrap !important;
padding-right: 6rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-left{
min-height: 80rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-score{
color:#FE8C16;
font-size: 24rpx;
@ -157,16 +161,18 @@
padding-right: 6rpx;
grid-gap: 12rpx;
max-width: 500rpx;
width: 100vw;
}
.content .content-list .list-container .list-item .list-item-right .item-address .address{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
min-width: 360rpx;
max-width: 360rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-address .distance{
display: 1;
flex: 1;
display: flex;
overflow:hidden;
}

View File

@ -16,86 +16,41 @@
<view class="content-type">
<!-- <cover-image src="../annex/static/vipBg.png" style="position: absolute;
top: -20px;"></cover-image> -->
<view class="type-item">
<view class="type-item" v-for="(item,index) in tabList" :key="index" @click="goShopSearch(item)">
<image class="type-item-img" src="@/static/images/shop/tab1.png" mode=""></image>
<text class="type-item-text">餐饮美食</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab2.png" mode=""></image>
<text class="type-item-text">丽人美妆</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab3.png" mode=""></image>
<text class="type-item-text">休闲娱乐</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab4.png" mode=""></image>
<text class="type-item-text">运动健身</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab5.png" mode=""></image>
<text class="type-item-text">婚庆服务</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab6.png" mode=""></image>
<text class="type-item-text">亲子</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab7.png" mode=""></image>
<text class="type-item-text">教育培训</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
<text class="type-item-text">汽车服务</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab9.png" mode=""></image>
<text class="type-item-text">家装</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab10.png" mode=""></image>
<text class="type-item-text">生活服务</text>
<text class="type-item-text">{{item.category_name}}</text>
</view>
</view>
<view class="content-list">
<view class="list-tab">
<view :class="current==0?'action':''" @click="selectCurrent(0)">全部商家</view>
<view :class="current==1?'action':''" @click="selectCurrent(1)">附近商家</view>
<view :class="current==1?'action':''" @click="selectCurrent(1,true)">附近商家</view>
</view>
<view class="list-container" v-if="true">
<view class="list-item" v-for="(item,index) in 20" :key='index'>
<view class="list-item-left" v-if="index==1">
<image src="@/static/images/shop/1.jpg" mode=""></image>
<view class="list-container" v-if="shopList.length">
<view class="list-item" v-for="(item,index) in shopList" :key='index'>
<view class="list-item-left">
<image :src="item.mer_avatar" mode=""></image>
</view>
<view class="list-item-left" v-else-if="index==2">
<image src="@/static/images/shop/2.jpg" mode=""></image>
</view>
<view class="list-item-left" v-else-if="index==3">
<image src="@/static/images/shop/3.png" mode=""></image>
</view>
<view class="list-item-left" v-else>
<image src="@/static/images/shop/4.jpg" mode=""></image>
</view>
<view class="list-item-right" @click="navtoDetail()">
<view class="list-item-right" @click="navtoDetail(item)">
<view class="item-title">
特色餐厅福田店
{{item.mer_name}}
</view>
<view class="item-content">
<view class="right-center-left">
<view class="center-left-score">
<text class="iconfont icon-kongxinxing"></text>
<!-- <text class="iconfont icon-kongxinxing"></text> -->
<text>4.7</text>
<text>{{item.service_score}}</text>
</view>
<view class="center-left-time">营业时间12:00-24:00</view>
<view class="center-left-time" v-if="item.config&&item.config.mer_take_time">营业时间:{{item.config.mer_take_time.join('-')}}</view>
</view>
<view class="right-center-right">
去选购
</view>
</view>
<view class="item-address">
<view class="address">深圳市福田区购物公园cocopark购物中心</view>
<view class="distance">100.23km</view>
<view class="address" v-if="item.mer_address">{{item.mer_address}}</view>
<view class="distance" v-if="item.distance">{{item.distance}}</view>
</view>
</view>
</view>
@ -113,9 +68,11 @@
</template>
<script>
import { HTTP_REQUEST_URL } from '@/config/app';
import { getGeocoder } from '@/api/store.js';
import { getNavigation } from '@/api/public.js';
import customTab from '@/components/customTab';
import { mapGetters } from "vuex";
import {shopInit,shopNearby} from '@/api/shop.js'
export default {
components:{
customTab,
@ -126,11 +83,17 @@
newData: {},
activeRouter: '',
tabList:[],
shopList:[],
current:0,
navtop:0,
addressInfo:[],
latitude: '',
longitude: '',
}
},
onLoad(){
this.init();
this.selfLocation();
},
onShow(){
this.getNav();
@ -146,6 +109,83 @@
this.activeRouter = '/' + curRoute
},
methods:{
init(){
shopInit().then((res)=>{
if(res.data.lst){
this.tabList=res.data.lst;
}
if(res.data.list){
this.shopList=res.data.list;
}
console.log('res: ',res);
})
},
selfLocation() {
let self = this
// uni.showLoading({
// title: '',
// mask: true,
// });
uni.getLocation({
type: 'gcj02',
success: (res) => {
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
self.latitude = res.latitude
self.longitude = res.longitude
getGeocoder({
lat: latitude,
long: longitude
}).then(res => {
uni.hideLoading();
const data = res.data;
console.log('data: ',data);
let data1={
mini:1,
type_id:4,
location:data.location.lat+','+data.location.lng
}
shopNearby(data1).then((r)=>{
if(r.data.list){
this.shopList=r.data.list;
}
})
// getCityList(data.address_component.province+'/'+data.address_component.city+'/'+data.address_component.district+'/'+(!data.address_reference.town ? '' : data.address_reference.town.title)).then(res=>{
// self.addressInfo = res.data;
// // self.$set(self.userAddress, 'detail', data.formatted_addresses.recommend);
// uni.hideLoading();
// }).catch(e=>{
// uni.showToast({
// title: '',
// icon: 'none',
// duration: 1000
// });
// })
}).catch(e=>{
uni.hideLoading();
uni.showToast({
title: '定位失败,请手动输入地址',
icon: 'none',
duration: 1000
});
})
},
fail: (res) => {
uni.hideLoading();
uni.showToast({
title: res.errMsg,
icon: 'none',
duration: 1000
});
}
});
},
goShopSearch(item){
uni.navigateTo({
url:'./search/index'
})
},
getNav(){
getNavigation().then(res => {
this.newData = res.data
@ -167,12 +207,17 @@
});
// #endif
},
selectCurrent(val){
selectCurrent(val,b){
if(b){
this.selfLocation();
}else{
this.init();
}
this.current=val;
},
navtoDetail(){
navtoDetail(item){
uni.navigateTo({
url:'/pages/shop_details/index'
url:'/pages/shop_details/index?id='+item.mer_id
})
}
}

960
pages/shop/search/index.vue Normal file
View File

@ -0,0 +1,960 @@
<template>
<view :style="viewColor">
<view class='productList'>
<view class='search acea-row row-between-wrapper'>
<!--#ifdef H5-->
<view v-if='!$wechat.isWeixin()' class="back" @click='set_where(1)'>
<view class="iconfont icon-xiangzuo"></view>
</view>
<!--#endif-->
<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
<input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search" :value='where.keyword'
@confirm="searchSubmit"></input>
</view>
<view style="text-align: right;" class='iconfont' ></view>
</view>
<view class="nav-wrapper">
<!-- <view class='nav acea-row row-middle'>
<view class='item' @click="downStatus = !downStatus" :class="{'t-color':downKey>0 && firstKey == 0}">
{{downMenu[downKey].title}}
<text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text>
<text v-else class="iconfont icon-xiala1"></text>
</view>
<view class='item' :class="{'t-color':firstKey == 3}" @click='set_where(3)'>
销量
</view>
<view class='item' :class="{'t-color':firstKey == 2}" @click='set_where(2)'>
价格
<image v-if="price==1" :src="domain+'/static/diy/up'+keyColor+'.png'"></image>
<image v-else-if="price==2" :src="domain+'/static/diy/down'+keyColor+'.png'"></image>
<image v-else :src='`${domain}/static/images/horn.png`'></image>
</view>
<view class='item' :class="{'t-color':firstKey == 4}" @click='bindRight'>
筛选
<text class="iconfont icon-shaixuan"></text>
</view>
</view> -->
</view>
<!-- 商品 -->
<block>
<view v-if="!is_switch" class='list acea-row row-between-wrapper on'>
<view class='item on' hover-class='none' v-for="(item,index) in productList" :key="index"
@click="godDetail(item)">
<view class='pictrue on'>
<image :src='item.image' class="on"></image>
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
</view>
<view class='text on'>
<view class='name line1'>
<text class="text_name line2">{{item.store_name}}</text>
</view>
<view class='money on'><text class='num'>{{item.price}}</text></view>
<view class="item_tags">
<text v-if="item.merchant&&item.merchant.type_name && item.product_type == 0" class="font-bg-red bt-color">{{item.merchant.type_name}}</text>
<text v-else-if="item.merchant.is_trader && item.product_type == 0" class="font-bg-red bt-color">自营</text>
<text v-if="item.product_type != 0" :class="'font_bg-red bt-color type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
</view>
<view class="score">{{item.rate}}评分 {{item.reply_count}}条评论</view>
<view class="company" v-if="item.merchant" @click.stop="goShop(item.mer_id)">
<text class="line1">{{item.merchant.mer_name}}</text>
<view class="flex">
进店
<text class="iconfont icon-xiangyou"></text>
</view>
</view>
</view>
<!-- 返佣 -->
<block v-if="item.max_extension>0 && (item.product_type == 0 || item.product_type == 2)">
<view class="foot-bar on">
最高赚 ¥{{item.max_extension}}
</view>
</block>
</view>
</view>
<view v-else class='list'>
<WaterfallsFlow :wfList='productList' @itemTap="godDetail" :type="1" @goShop="goShop"/>
</view>
<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
<view class='pictrue' style="margin: 60rpx auto;">
<image :src="`${domain}/static/images/noCart.png`"></image>
<view>暂无商品去看点什么吧</view>
</view>
<recommend v-if="recommend_switch == 1" :hostProduct="hostProduct" :isLogin="isLogin"></recommend>
</view>
</block>
<rightSlider v-if="rightBox&&brandStataus&&parmasStatus" :status="rightBox&&brandStataus&&parmasStatus" :brandList="brandList" :storeTypeArr="storeTypeArr" :parmasList="parmasList" @confirm="confirm" @close="close" :price_on="where.price_on" :price_off="where.price_off" :activeIndex="activeIndex"></rightSlider>
</view>
<view class="down-wrapper" v-if="downStatus">
<view class="bg" @click="downStatus=false"></view>
<view class="down-box">
<view class="down-item" v-for="(item,index) in downMenu" :key="item.key" :class="{'on':index == downKey}" @click="bindDown(item,index)">
{{item.title}}
<text v-if="index == downKey" class="iconfont icon-gou"></text>
</view>
</view>
</view>
<!-- #ifndef H5 -->
<passwordPopup></passwordPopup>
<!-- #endif -->
</view>
</template>
<script>
import {
getProductslist,
getProductHot,
getBrandlist,
getStoreTypeApi,
getParmasList
} from '@/api/store.js';
import recommend from '@/components/recommend';
import rightSlider from '@/components/rightSlider.vue'
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
import {initiateAssistApi} from '@/api/activity.js';
import { configMap } from "@/utils";
import { mapGetters } from "vuex";
// #ifndef H5
import passwordPopup from '@/components/passwordPopup';
// #endif
import { goShopDetail } from '@/libs/order.js'
import { HTTP_REQUEST_URL } from '@/config/app';
import { toLogin } from '@/libs/login.js';
const app = getApp();
export default {
computed: configMap({hide_mer_status: 1,recommend_switch: 0}, mapGetters(['uid','isLogin','scrollTop','viewColor','keyColor'])),
components: {
// #ifndef H5
passwordPopup,
// #endif
recommend,
rightSlider,
WaterfallsFlow,
},
watch:{
},
data() {
return {
domain: HTTP_REQUEST_URL,
productList: [],
list: [],
storeTypeArr: [], //
parmasList: [],
is_switch: true,
where: {
cate_pid: '',
order: '',
price_on: '',
price_off: '',
brand_id: '',
mer_type_id: '',
keyword:'',
is_trader: '',
filter_params: '',
page:1,
limit:30
},
price: 0,
stock: 0,
nows: false,
loadend: false,
loading: false,
loadTitle: '加载更多',
title: '',
hostProduct: [],
hotPage: 1,
hotLimit: 10,
hotScroll: false,
//
rightBox: false,
brandStataus: false,
parmasStatus: false,
//
brandList: [],
downKey: 0,
downStatus: false,
//
downMenu: [{
title: '综合',
key: 1,
},
{
title: '评分',
key: 2,
},
{
title: '新品',
key: 3,
}
],
//
firstKey:0,
sotreParam:{
keyword:'',
page:1,
limit:30,
order:'',
},
storeKey:0,
storeScroll:true,
activeIndex: 0,
};
},
//
onPageScroll() {
uni.$emit('scroll');
},
onLoad: function(options) {
this.$set(this.where, 'cate_pid', options.id || '');
this.title = options.title || '';
this.$set(this.where, 'keyword', options.searchValue || '');
this.get_product_list(true);
this.get_host_product();
},
onReady(){
},
mounted: function() {
},
methods: {
//
goShop(id){
if(this.hide_mer_status != 1){
uni.navigateTo({
url:`/pages/store/home/index?id=${id}`
})
}
},
//
async getStoreType() {
let temp = []
getStoreTypeApi()
.then(res => {
temp = res.data.map(item => {
return {
...item,
check: false
}
})
// if (this.where.mer_type_id.length > 0) {
// this.where.mer_type_id.forEach((ids, index) => {
// temp.forEach(el => {
// if (ids == el.mer_type_id) {
// el.check = true
// }
// })
// })
// }
this.storeTypeArr = temp
})
.catch(res => {
this.$util.Tips({
title: res
});
});
},
//
async getParmasList(){
let temp = []
getParmasList({
cate_pid:this.where.cate_pid,
keyword:this.where.keyword
})
.then(res => {
this.parmasStatus = true
temp = res.data.map(item => {
return {
...item,
check: false,
showValue: false,
parmasValue: []
}
})
this.parmasList = temp
})
.catch(res => {
this.$util.Tips({
title: res
});
});
},
//
bindRight(){
this.price = 0;
this.firstKey = 4;
if(!this.brandList.length)this.getBrandlist()
if(!this.storeTypeArr.length)this.getStoreType()
if(!this.parmasList.length)this.getParmasList()
this.rightBox = true
},
//
async getBrandlist(){
let temp = []
getBrandlist({
cate_pid:this.where.cate_pid,
keyword:this.where.keyword
}).then(res=>{
this.brandStataus = true
temp = res.data.list.map(item=>{
return {
...item,
check:false
}
})
this.brandList = temp
})
},
//
godDetail(item) {
goShopDetail(item, this.uid).then(res => {
if (this.isLogin) {
initiateAssistApi(item.activity_id).then(res => {
let id = res.data.product_assist_set_id;
uni.hideLoading();
uni.navigateTo({
url: '/pages/activity/assist_detail/index?id=' + id
});
}).catch((err) => {
uni.showToast({
title: err,
icon: 'none'
})
});
} else {
toLogin()
}
})
},
//
confirm(data,index) {
let arr1 = [],arr2 = []
if(data.brandList.length == 0){
this.where.brand_id = ''
}else{
data.brandList.forEach(item =>{
arr1.push(item.brand_id)
})
this.where.brand_id = arr1.toString()
}
if(data.typeList.length == 0){
this.where.mer_type_id = ''
}else{
data.typeList.forEach(item =>{
arr2.push(item.mer_type_id)
})
this.where.mer_type_id = arr2.toString()
}
this.activeIndex = index
this.where.filter_params = JSON.stringify(data.parmasList)
this.rightBox = data.status
this.where.price_on = data.price_on
this.where.price_off = data.price_off
this.where.is_trader = data.is_trader
this.loadend = false;
this.$set(this.where, 'page', 1)
this.get_product_list(true);
},
//
close() {
this.rightBox = false
},
//
bindDown(item, index) {
this.firstKey = 0
if(index == 0){
this.where.order = ''
}else if(index == 1){
this.where.order = 'rate'
}else if(index == 2){
this.where.order = 'is_new'
}
this.downKey = index
this.downStatus = false
this.loadend = false;
this.$set(this.where, 'page', 1)
this.get_product_list(true);
},
Changswitch: function() {
let that = this;
that.is_switch = !that.is_switch
},
searchSubmit: function(e) {
let that = this;
that.$set(that.where, 'keyword', e.detail.value);
that.loadend = false;
that.$set(that.where, 'page', 1)
this.get_product_list(true);
},
/**
* 获取我的推荐
*/
get_host_product: function() {
let that = this;
if (that.hotScroll) return
getProductHot(
that.hotPage,
that.hotLimit,
).then(res => {
that.hotPage++
that.hotScroll = res.data.length < that.hotLimit
that.hostProduct = that.hostProduct.concat(res.data.list)
// that.$set(that, 'hostProduct', res.data)
});
},
//
set_where: function(e) {
switch (e) {
case 1:
uni.setStorageSync('storeIndex', this.where.cate_pid);
uni.navigateBack()
break
case 2:
this.firstKey = e
if (this.price == 0){
this.price = 1;
this.where.order = 'price_asc'
}else if (this.price == 1){
this.price = 2;
this.where.order = 'price_desc'
}else if (this.price == 2){
this.price = 0;
this.where.order = ''
}
this.$set(this.where, 'page', 1)
this.get_product_list(true);
break;
case 3:
this.price = 0;
this.loadend = false;
this.$set(this.where, 'order', 'sales')
this.$set(this.where, 'page', 1)
this.get_product_list(true);
this.firstKey = e
break;
}
this.loadend = false;
this.$set(this.where, 'page', 1);
this.get_product_list(true);
},
//
get_product_list: function(isPage) {
let that = this;
if (that.loadend) return;
if (that.loading) return;
if (isPage === true) that.$set(that, 'productList', []);
that.loading = true;
that.loadTitle = '';
getProductslist(that.where).then(res => {
let list = res.data.list;
let productList = that.$util.SplitArray(list, that.productList);
let loadend = list.length < that.where.limit;
that.loadend = loadend;
that.loading = false;
that.loadTitle = loadend ? '已全部加载' : '加载更多';
that.$set(that, 'productList', productList);
that.$set(that.where, 'page', that.where.page + 1);
}).catch(err => {
that.loading = false;
that.loadTitle = '加载更多';
});
},
},
onPullDownRefresh() {
},
onReachBottom() {
if (this.productList.length > 0) {
this.get_product_list('');
} else {
this.get_host_product();
}
},
onPullDownRefresh(){
//
setTimeout(()=>{
const newList = this.productList.reverse();
this.productList = newList;
uni.stopPullDownRefresh();
},500)
}
}
</script>
<style lang="scss" scoped>
.productList .search {
width: 100%;
height: 86rpx;
padding: 0 20rpx;
box-sizing: border-box;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background-color: var(--view-theme);
}
.bt-color{
background-color: var(--view-theme);
border:1px solid var(--view-theme);
&.type2{
background-color: #FD6523;
border: 1px solid #FD6523;
}
}
.productList .search .back {
display: flex;
align-items: center;
width: 40rpx;
height: 60rpx;
.iconfont {
color: #fff;
font-size: 36rpx;
}
}
.productList .search .input {
width: 570rpx;
height: 60rpx;
background-color: #fff;
border-radius: 50rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
.productList .search .input input {
flex: 1;
height: 100%;
font-size: 26rpx;
margin-left: 10rpx;
}
.productList .search .input .placeholder {
color: #999;
}
.productList .search .input .iconfont {
font-size: 35rpx;
color: #555;
}
.productList .search .icon-pailie,
.productList .search .icon-tupianpailie {
color: #fff;
width: 62rpx;
font-size: 40rpx;
height: 86rpx;
line-height: 86rpx;
}
.productList .nav-wrapper {
z-index: 9;
position: fixed;
left: 0;
top: 0;
width: 100%;
margin-top: 86rpx;
background-color: $theme-color;
.tab-bar {
display: flex;
align-items: center;
.tab-item {
position: relative;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 8rpx 0 20rpx;
color: #fff;
font-size: 28rpx;
font-weight: bold;
&::after {
content: ' ';
position: absolute;
left: 50%;
bottom: 18rpx;
width: 30rpx;
height: 3rpx;
background: transparent;
transform: translateX(-50%);
}
&.on {
&::after {
background: #fff;
}
}
}
}
}
.productList .nav {
height: 86rpx;
color: #454545;
font-size: 28rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
padding: 0 28rpx;
}
.productList .nav .item {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
&.t-color{
font-weight: bold;
}
}
.productList .nav .item image {
width: 15rpx;
height: 19rpx;
margin-left: 10rpx;
}
.productList{
padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); /// IOS<11.2/
padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); /// IOS>11.2/
}
.productList .list {
padding: 0 20rpx;
// margin-top: 168rpx;
margin-top:80rpx;
}
.productList .list.on {
background-color: #fff;
border-top: 1px solid #f6f6f6;
}
.noCommodity {
background-color: #fff;
padding-bottom: 30rpx;
}
.spin {
display: block;
transform: rotate(180deg);
font-size: 36rpx;
}
.icon-xiala1 {
margin-top: 6rpx;
}
.icon-shaixuan {
font-size: 30rpx;
margin-left: 10rpx;
}
.down-wrapper {
.bg {
z-index: 8;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
}
.down-box {
z-index: 8;
position: fixed;
left: 0;
top: 170rpx;
width: 100%;
padding: 0 40rpx 28rpx 74rpx;
background-color: #F8F8F8;
border-radius: 0 0 24rpx 24rpx;
.down-item {
margin-top: 28rpx;
font-size: 24rpx;
color: #454545;
&.on {
color: var(--view-theme);
}
.iconfont{
float: right;
}
}
}
}
.store-wrapper {
margin-top: 240rpx;
border-top: 1px solid #F6F6F6;
.star-box {
display: flex;
align-items: center;
.star {
position: relative;
width: 111rpx;
height: 19rpx;
background: url(~pages/columnGoods/images/star.png);
background-size: 111rpx 19rpx;
}
.star-active {
position: absolute;
left: 0;
top: 0;
width: 111rpx;
height: 19rpx;
overflow: hidden;
background: url(~pages/columnGoods/images/star_active.png);
background-size: 111rpx 19rpx;
}
.num {
color: $theme-color;
font-size: 24rpx;
margin-left: 10rpx;
}
}
.store-item {
margin-bottom: 12rpx;
padding: 40rpx 20rpx;
background-color: #fff;
.head {
display: flex;
align-items: center;
justify-content: space-between;
.left-wrapper {
display: flex;
align-items: center;
.logo {
width: 80rpx;
height: 80rpx;
image {
width: 80rpx;
height: 80rpx;
border-radius: 6rpx;
}
}
.con-box {
margin-left: 20rpx;
.name {
font-size: 30rpx;
color: #333;
font-weight: bold;
}
}
}
.link {
width: 114rpx;
height: 50rpx;
line-height: 50rpx;
background: linear-gradient(-90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
border-radius: 25rpx;
text-align: center;
color: #fff;
font-size: 24rpx;
}
}
.pic-wrapper {
display: flex;
margin-top: 30rpx;
.pic-item {
position: relative;
width: 226rpx;
height: 226rpx;
margin-right: 16rpx;
image {
width: 226rpx;
height: 226rpx;
border-radius: 16rpx;
}
.price {
position: absolute;
right: 0;
bottom: 0;
height: 36rpx;
padding: 0 10rpx;
line-height: 36rpx;
text-align: center;
background: rgba(0, 0, 0, .5);
border-radius: 16rpx 2rpx 16rpx 2rpx;
color: #fff;
font-size: 24rpx;
text {
font-size: 18rpx;
}
}
&:nth-child(3n) {
margin-right: 0;
}
}
}
}
}
.productList .list .item.on {
width: 100%;
display: flex;
border-bottom: 1px solid #f6f6f6;
padding: 30rpx 0;
margin: 0;
position: relative;
}
.productList .list .item .pictrue.on {
position: relative;
width: 260rpx;
height: 260rpx;
.border-picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: center/cover no-repeat;
}
}
.productList .list .item .pictrue image {
width: 260rpx;
height: 260rpx;
border-radius: 20rpx 20rpx 0 0;
}
.productList .list .item .pictrue image.on {
border-radius: 6rpx;
}
.productList .list .item .text {
font-size: 30rpx;
color: #222;
width: 460rpx;
padding: 0 0 0 22rpx;
.name{
height: 80rpx;
}
}
.item_tags{
margin-top: 8rpx;
}
.item_tags .tags_item {
display: inline-block;
font-size: 20rpx;
text-align: center;
border-radius: 5rpx;
padding: 0 4rpx;
line-height: 28rpx;
margin-right: 8rpx;
}
.item_tags .tags_item.ticket{
color: #E93323;
border: 1px solid #E93323;
}
.item_tags .tags_item.delivery{
color: #FF9000;
border: 1px solid #FF9000;
}
.productList .list .item .text .money {
display: flex;
align-items: center;
font-size: 26rpx;
font-weight: bold;
margin-top: 10rpx;
color: var(--view-priceColor);
}
.productList .list .item .text .money .num {
font-size: 34rpx;
}
.productList .distance {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999999;
.icon-xiangyou {
font-size: 24rpx;
line-height: 24rpx;
}
}
.productList .list .item .text .money .ticket-big {
display: flex;
align-items: center;
justify-content: center;
min-width: 163rpx;
height: 28rpx;
margin-left: 10rpx;
background-image: url(~static/images/yh.png);
background-size: 100% 100%;
font-size: 20rpx;
font-weight: normal;
padding: 0 10rpx;
}
.productList .list .item .text .score {
margin-top: 10rpx;
color: #737373;
font-size: 20rpx;
}
.productList .list .item .text .company {
display: flex;
align-items: center;
color: #737373;
font-size: 20rpx;
margin-top: 10rpx;
.name {
display: inline-block;
width: 200rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.flex {
display: flex;
align-items: center;
margin-left: 10rpx;
color: #282828;
.iconfont {
font-size: 16rpx;
margin-top: 4rpx;
}
}
}
.productList .list .item .foot-bar {
width: 100%;
height: 52rpx;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
border-radius: 0px 0px 16rpx 16rpx;
color: #fff;
font-size: 24rpx;
.icon-fenxiang {
font-size: 24rpx;
margin-right: 10rpx;
}
&.on {
position: absolute;
right: 0;
bottom: 30rpx;
width: 180rpx;
height: 44rpx;
border-radius: 22rpx;
}
}
</style>

View File

@ -1,25 +1,31 @@
<template>
<view class="shop_details" :style="viewColor">
<view class="head">
<swipers :imgUrls="shopInfo.swiper_image"></swipers>
<view class="back" @tap="toRouter"><i class="iconfont icon-xiangzuo"></i></view>
<swipers :imgUrls="shopInfo.detail.images"></swipers>
<view class="back" @tap="toRouter"
><i class="iconfont icon-xiangzuo"></i
></view>
</view>
<view class="main">
<view class="title">
<view class="title_left">
<image src="@/static/images/shop_bg.png" mode=""></image>
<image :src="shopInfo.mer_avatar" mode=""></image>
</view>
<view class="title_right">
<view class="txt">特色餐厅(朝阳总店)</view>
<view class="txt">{{ shopInfo.mer_name }}</view>
<view class="grade">
<text class="iconfont icon-shitixing"></text>
<text>评分4.5</text>
<text>评分{{ shopInfo.service_score }}</text>
</view>
<view class="desc">商家承诺:</view>
<view class="desc"
>商家承诺{{
shopInfo.detail.promise ? shopInfo.detail.promise : "啥也没有留下"
}}</view
>
<view class="site" @tap="openMap">
<view>
<text class="iconfont icon-dingwei"></text>
<text>北京市东城区朝阳门内大街特色</text>
<text>{{ shopInfo.mer_address }}</text>
</view>
<view class="iconfont icon-jiantou"></view>
</view>
@ -28,42 +34,49 @@
<view class="business">
<view class="business_one">营业中</view>
<view class="business_one">
<text>周一到周日</text>
<text>0900 - 2200</text>
<text v-for="(item, index) in shopInfo.config.mer_take_day">{{
" " + week[item]
}}</text>
</view>
<view class="business_one">
<text>{{ shopInfo.config.mer_take_time.join("-") }}</text>
</view>
<!-- <view class="iconfont icon-dianhua"></view> -->
<view class="business_one">
<view>
商家电话15834567081
</view>
<view> 商家电话15834567081 </view>
<text class="copy" @tap="setCopy(15834567081)">复制</text>
</view>
<view class="business_list">可提供</view>
<view class="business_list">
<text>WiFi</text>
<text>充电宝</text>
<text>停车场</text>
<text>茶水</text>
<text>饮料</text>
<text v-for="(item, index) in shopInfo.detail.services">{{
item
}}</text>
</view>
</view>
<view class="tabs">
<view class="tabs_nav">
<view class="tabs_item" v-for="(item,index) in tabList" :class="actIndex==index?'active':''" @tap='handleTab(index)'>{{item.name}}</view>
<view
class="tabs_item"
v-for="(item, index) in tabList"
:class="actIndex == index ? 'active' : ''"
@tap="handleTab(index)"
>{{ item.name }}</view
>
</view>
<view class='conter'>
<view class="conter">
<!-- #ifndef APP-PLUS -->
<!-- <jyf-parser v-if="description.type == 0" :domain='domain' :html="description.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser> -->
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<!-- <view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view> -->
<!-- #endif -->
<view class="product_content">
<view class="product_content" v-html="shopInfo.detail.detail"></view>
<!-- <view class="product_content">
欢迎来到我们的火锅店我们是一个有着悠久历史和传统美食文化的品牌我们的火锅是采用新鲜的食材和秘制的调料烹饪而成每一口都充满了浓郁的鲜香和醇厚的口感
</view>
<view class="product_content">
我们的品牌特色在于选用上等食材如草原鲜嫩肥羊天然海鲜等以及秘制香料和特色锅底店内环境优雅舒适服务周到细致为您打造一处独具特色的火锅天地
</view>
</view> -->
</view>
</view>
</view>
@ -72,26 +85,42 @@
</template>
<script>
import swipers from '@/components/swipers';
import swipers from "@/components/swipers";
import parser from "@/components/jyf-parser/jyf-parser";
import { mapGetters } from "vuex";
import { shopDetail } from "@/api/shop.js";
export default {
components: { swipers, "jyf-parser": parser },
data() {
return {
shopInfo: {
swiper_image:[{img:'/static/images/shop_bg.png'}],
swiper_image: [{ img: "/static/images/shop_bg.png" }],
},
tabList:[{name:'商家信息'}],
actIndex:0
}
week: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
tabList: [{ name: "商家信息" }],
actIndex: 0,
id: 0,
shopInfo: {},
};
},
computed: {
...mapGetters(['viewColor'])
...mapGetters(["viewColor"]),
},
onLoad(option) {
this.id = option.id;
this.init();
},
methods: {
init() {
shopDetail({ id: this.id }).then((res) => {
if (res) {
this.shopInfo = res.data;
console.log("res: ", res);
}
});
},
handleTab(i) {
this.actIndex = i
this.actIndex = i;
},
setCopy(content) {
// h5
@ -99,64 +128,65 @@
uni.setClipboardData({
data: String(content), //
success: function () {
console.log('success');
}
console.log("success");
},
});
//#endif
// h5使
// #ifdef H5
if (!document.queryCommandSupported('copy')) { //
console.log('该浏览器不支持')
if (!document.queryCommandSupported("copy")) {
//
console.log("该浏览器不支持");
}
let textarea = document.createElement("textarea")
textarea.value = content
textarea.readOnly = "readOnly"
document.body.appendChild(textarea)
textarea.select() //
textarea.setSelectionRange(0, content.length) //
let result = document.execCommand("copy") //
let textarea = document.createElement("textarea");
textarea.value = content;
textarea.readOnly = "readOnly";
document.body.appendChild(textarea);
textarea.select(); //
textarea.setSelectionRange(0, content.length); //
let result = document.execCommand("copy"); //
if (result) {
uni.showToast({
title: '复制成功',
title: "复制成功",
duration: 2000,
icon:'none'
icon: "none",
});
}
textarea.remove()
textarea.remove();
// #endif
},
handlePay() {
//
// #ifdef APP-PLUS
uni.scanCode({
scanType:['qrCode'],
scanType: ["qrCode"],
success: function (res) {
console.log('二维码信息:' + res);
}
console.log("二维码信息:" + res);
},
});
// #endif
},
toRouter() {
uni.navigateBack()
uni.navigateBack();
},
openMap() {
uni.openLocation({
latitude: Number(22.541211),
longitude: Number(114.118052),
name: '深房广场',
address: '鲜果自由,等你来哈',
latitude: Number(this.shopInfo.lat),
longitude: Number(this.shopInfo.long),
name: this.shopInfo.mer_name,
address: this.shopInfo.mer_info,
// scale:8,
success: function () {
console.log('success');
console.log("success");
},
fail: function (error) {
console.log('error', error);
}
console.log("error", error);
},
});
},
}
}
},
};
</script>
<style scoped lang="scss">
@ -204,18 +234,20 @@
font-size: 32rpx;
color: #333333;
}
.grade,.desc,.site{
.grade,
.desc,
.site {
font-size: 24rpx;
margin-top: 8rpx;
}
.grade {
color: #FE8C16;
color: #fe8c16;
& > :first-child {
margin-right: 8rpx;
}
}
.desc {
color: #4E4E4E;
color: #4e4e4e;
}
.site {
color: #999999;
@ -253,7 +285,7 @@
margin-top: 12rpx;
color: #999;
}
&:nth-child(3){
&:nth-child(4) {
margin-top: 12rpx;
color: #333;
display: flex;
@ -308,7 +340,11 @@
bottom: 30rpx;
width: 80%;
height: 92rpx;
background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
background-image: linear-gradient(
90deg,
var(--view-bntColor21) 0%,
var(--view-bntColor22) 100%
);
border-radius: 60rpx;
text-align: center;
line-height: 92rpx;