This commit is contained in:
commit
0641684278
11
api/shop.js
11
api/shop.js
|
|
@ -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});
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name" : "多商户商城",
|
"name" : "铸源商城",
|
||||||
"appid" : "__UNI__496DF55",
|
"appid" : "__UNI__496DF55",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.4",
|
"versionName" : "1.0.4",
|
||||||
|
|
|
||||||
11
pages.json
11
pages.json
|
|
@ -64,6 +64,17 @@
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shop/search/index",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "商家搜索"
|
||||||
|
// #ifdef MP || APP-PLUS
|
||||||
|
,
|
||||||
|
"navigationBarBackgroundColor": "#F2F2F2"
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/goods_details/index",
|
"path": "pages/goods_details/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
||||||
|
|
@ -126,8 +126,12 @@
|
||||||
.content .content-list .list-container .list-item .list-item-right .item-content{
|
.content .content-list .list-container .list-item .list-item-right .item-content{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
white-space: pre-wrap !important;
|
||||||
padding-right: 6rpx;
|
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{
|
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-score{
|
||||||
color:#FE8C16;
|
color:#FE8C16;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
|
@ -157,16 +161,18 @@
|
||||||
padding-right: 6rpx;
|
padding-right: 6rpx;
|
||||||
grid-gap: 12rpx;
|
grid-gap: 12rpx;
|
||||||
max-width: 500rpx;
|
max-width: 500rpx;
|
||||||
|
width: 100vw;
|
||||||
}
|
}
|
||||||
.content .content-list .list-container .list-item .list-item-right .item-address .address{
|
.content .content-list .list-container .list-item .list-item-right .item-address .address{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
min-width: 0;
|
min-width: 360rpx;
|
||||||
max-width: 360rpx;
|
max-width: 360rpx;
|
||||||
|
|
||||||
}
|
}
|
||||||
.content .content-list .list-container .list-item .list-item-right .item-address .distance{
|
.content .content-list .list-container .list-item .list-item-right .item-address .distance{
|
||||||
display: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -16,86 +16,41 @@
|
||||||
<view class="content-type">
|
<view class="content-type">
|
||||||
<!-- <cover-image src="../annex/static/vipBg.png" style="position: absolute;
|
<!-- <cover-image src="../annex/static/vipBg.png" style="position: absolute;
|
||||||
top: -20px;"></cover-image> -->
|
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>
|
<image class="type-item-img" src="@/static/images/shop/tab1.png" mode=""></image>
|
||||||
<text class="type-item-text">餐饮美食</text>
|
<text class="type-item-text">{{item.category_name}}</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>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-list">
|
<view class="content-list">
|
||||||
<view class="list-tab">
|
<view class="list-tab">
|
||||||
<view :class="current==0?'action':''" @click="selectCurrent(0)">全部商家</view>
|
<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>
|
||||||
<view class="list-container" v-if="true">
|
<view class="list-container" v-if="shopList.length">
|
||||||
<view class="list-item" v-for="(item,index) in 20" :key='index'>
|
<view class="list-item" v-for="(item,index) in shopList" :key='index'>
|
||||||
<view class="list-item-left" v-if="index==1">
|
<view class="list-item-left">
|
||||||
<image src="@/static/images/shop/1.jpg" mode=""></image>
|
<image :src="item.mer_avatar" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="list-item-left" v-else-if="index==2">
|
<view class="list-item-right" @click="navtoDetail(item)">
|
||||||
<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="item-title">
|
<view class="item-title">
|
||||||
特色餐厅（福田店）
|
{{item.mer_name}}
|
||||||
</view>
|
</view>
|
||||||
<view class="item-content">
|
<view class="item-content">
|
||||||
<view class="right-center-left">
|
<view class="right-center-left">
|
||||||
<view class="center-left-score">
|
<view class="center-left-score">
|
||||||
<text class="iconfont icon-kongxinxing"></text>
|
<text class="iconfont icon-kongxinxing"></text>
|
||||||
<!-- <text class="iconfont icon-kongxinxing">★</text> -->
|
<!-- <text class="iconfont icon-kongxinxing">★</text> -->
|
||||||
<text>4.7分</text>
|
<text>{{item.service_score}}分</text>
|
||||||
</view>
|
</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>
|
||||||
<view class="right-center-right">
|
<view class="right-center-right">
|
||||||
去选购
|
去选购
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-address">
|
<view class="item-address">
|
||||||
<view class="address">深圳市福田区购物公园cocopark购物中心</view>
|
<view class="address" v-if="item.mer_address">{{item.mer_address}}</view>
|
||||||
<view class="distance">100.23km</view>
|
<view class="distance" v-if="item.distance">{{item.distance}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -113,9 +68,11 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||||
|
import { getGeocoder } from '@/api/store.js';
|
||||||
import { getNavigation } from '@/api/public.js';
|
import { getNavigation } from '@/api/public.js';
|
||||||
import customTab from '@/components/customTab';
|
import customTab from '@/components/customTab';
|
||||||
import { mapGetters } from "vuex";
|
import { mapGetters } from "vuex";
|
||||||
|
import {shopInit,shopNearby} from '@/api/shop.js'
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
customTab,
|
customTab,
|
||||||
|
|
@ -126,11 +83,17 @@
|
||||||
newData: {},
|
newData: {},
|
||||||
activeRouter: '',
|
activeRouter: '',
|
||||||
tabList:[],
|
tabList:[],
|
||||||
|
shopList:[],
|
||||||
current:0,
|
current:0,
|
||||||
navtop:0,
|
navtop:0,
|
||||||
|
addressInfo:[],
|
||||||
|
latitude: '',
|
||||||
|
longitude: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(){
|
onLoad(){
|
||||||
|
this.init();
|
||||||
|
this.selfLocation();
|
||||||
},
|
},
|
||||||
onShow(){
|
onShow(){
|
||||||
this.getNav();
|
this.getNav();
|
||||||
|
|
@ -146,6 +109,83 @@
|
||||||
this.activeRouter = '/' + curRoute
|
this.activeRouter = '/' + curRoute
|
||||||
},
|
},
|
||||||
methods:{
|
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(){
|
getNav(){
|
||||||
getNavigation().then(res => {
|
getNavigation().then(res => {
|
||||||
this.newData = res.data
|
this.newData = res.data
|
||||||
|
|
@ -167,12 +207,17 @@
|
||||||
});
|
});
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
selectCurrent(val){
|
selectCurrent(val,b){
|
||||||
|
if(b){
|
||||||
|
this.selfLocation();
|
||||||
|
}else{
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
this.current=val;
|
this.current=val;
|
||||||
},
|
},
|
||||||
navtoDetail(){
|
navtoDetail(item){
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/shop_details/index'
|
url:'/pages/shop_details/index?id='+item.mer_id
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1,25 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="shop_details" :style="viewColor">
|
<view class="shop_details" :style="viewColor">
|
||||||
<view class="head">
|
<view class="head">
|
||||||
<swipers :imgUrls="shopInfo.swiper_image"></swipers>
|
<swipers :imgUrls="shopInfo.detail.images"></swipers>
|
||||||
<view class="back" @tap="toRouter"><i class="iconfont icon-xiangzuo"></i></view>
|
<view class="back" @tap="toRouter"
|
||||||
|
><i class="iconfont icon-xiangzuo"></i
|
||||||
|
></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="main">
|
<view class="main">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="title_left">
|
<view class="title_left">
|
||||||
<image src="@/static/images/shop_bg.png" mode=""></image>
|
<image :src="shopInfo.mer_avatar" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="title_right">
|
<view class="title_right">
|
||||||
<view class="txt">特色餐厅(朝阳总店)</view>
|
<view class="txt">{{ shopInfo.mer_name }}</view>
|
||||||
<view class="grade">
|
<view class="grade">
|
||||||
<text class="iconfont icon-shitixing"></text>
|
<text class="iconfont icon-shitixing"></text>
|
||||||
<text>评分4.5分</text>
|
<text>评分{{ shopInfo.service_score }}分</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="desc">商家承诺:</view>
|
<view class="desc"
|
||||||
|
>商家承诺：{{
|
||||||
|
shopInfo.detail.promise ? shopInfo.detail.promise : "啥也没有留下"
|
||||||
|
}}</view
|
||||||
|
>
|
||||||
<view class="site" @tap="openMap">
|
<view class="site" @tap="openMap">
|
||||||
<view>
|
<view>
|
||||||
<text class="iconfont icon-dingwei"></text>
|
<text class="iconfont icon-dingwei"></text>
|
||||||
<text>北京市东城区朝阳门内大街特色</text>
|
<text>{{ shopInfo.mer_address }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="iconfont icon-jiantou"></view>
|
<view class="iconfont icon-jiantou"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -28,42 +34,49 @@
|
||||||
<view class="business">
|
<view class="business">
|
||||||
<view class="business_one">营业中</view>
|
<view class="business_one">营业中</view>
|
||||||
<view class="business_one">
|
<view class="business_one">
|
||||||
<text>周一到周日</text>
|
<text v-for="(item, index) in shopInfo.config.mer_take_day">{{
|
||||||
<text>09：00 - 22：00</text>
|
" " + week[item]
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="business_one">
|
||||||
|
<text>{{ shopInfo.config.mer_take_time.join("-") }}</text>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="iconfont icon-dianhua"></view> -->
|
<!-- <view class="iconfont icon-dianhua"></view> -->
|
||||||
<view class="business_one">
|
<view class="business_one">
|
||||||
<view>
|
<view> 商家电话：15834567081 </view>
|
||||||
商家电话：15834567081
|
|
||||||
</view>
|
|
||||||
<text class="copy" @tap="setCopy(15834567081)">复制</text>
|
<text class="copy" @tap="setCopy(15834567081)">复制</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="business_list">可提供：</view>
|
<view class="business_list">可提供：</view>
|
||||||
<view class="business_list">
|
<view class="business_list">
|
||||||
<text>WiFi</text>
|
<text v-for="(item, index) in shopInfo.detail.services">{{
|
||||||
<text>充电宝</text>
|
item
|
||||||
<text>停车场</text>
|
}}</text>
|
||||||
<text>茶水</text>
|
|
||||||
<text>饮料</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tabs">
|
<view class="tabs">
|
||||||
<view class="tabs_nav">
|
<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>
|
||||||
<view class='conter'>
|
<view class="conter">
|
||||||
<!-- #ifndef APP-PLUS -->
|
<!-- #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> -->
|
<!-- <jyf-parser v-if="description.type == 0" :domain='domain' :html="description.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser> -->
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifdef APP-PLUS -->
|
<!-- #ifdef APP-PLUS -->
|
||||||
<!-- <view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view> -->
|
<!-- <view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view> -->
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<view class="product_content">
|
<view class="product_content" v-html="shopInfo.detail.detail"></view>
|
||||||
|
<!-- <view class="product_content">
|
||||||
欢迎来到我们的火锅店！我们是一个有着悠久历史和传统美食文化的品牌，我们的火锅是采用新鲜的食材和秘制的调料烹饪而成，每一口都充满了浓郁的鲜香和醇厚的口感。
|
欢迎来到我们的火锅店！我们是一个有着悠久历史和传统美食文化的品牌，我们的火锅是采用新鲜的食材和秘制的调料烹饪而成，每一口都充满了浓郁的鲜香和醇厚的口感。
|
||||||
</view>
|
</view>
|
||||||
<view class="product_content">
|
<view class="product_content">
|
||||||
我们的品牌特色在于选用上等食材，如草原鲜嫩肥羊、天然海鲜等，以及秘制香料和特色锅底。店内环境优雅舒适，服务周到细致，为您打造一处独具特色的火锅天地。
|
我们的品牌特色在于选用上等食材，如草原鲜嫩肥羊、天然海鲜等，以及秘制香料和特色锅底。店内环境优雅舒适，服务周到细致，为您打造一处独具特色的火锅天地。
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -72,26 +85,42 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import swipers from '@/components/swipers';
|
import swipers from "@/components/swipers";
|
||||||
import parser from "@/components/jyf-parser/jyf-parser";
|
import parser from "@/components/jyf-parser/jyf-parser";
|
||||||
import { mapGetters } from "vuex";
|
import { mapGetters } from "vuex";
|
||||||
|
import { shopDetail } from "@/api/shop.js";
|
||||||
export default {
|
export default {
|
||||||
components: { swipers, "jyf-parser": parser },
|
components: { swipers, "jyf-parser": parser },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
shopInfo: {
|
shopInfo: {
|
||||||
swiper_image:[{img:'/static/images/shop_bg.png'}],
|
swiper_image: [{ img: "/static/images/shop_bg.png" }],
|
||||||
},
|
},
|
||||||
tabList:[{name:'商家信息'}],
|
week: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||||
actIndex:0
|
tabList: [{ name: "商家信息" }],
|
||||||
}
|
actIndex: 0,
|
||||||
|
id: 0,
|
||||||
|
shopInfo: {},
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['viewColor'])
|
...mapGetters(["viewColor"]),
|
||||||
|
},
|
||||||
|
onLoad(option) {
|
||||||
|
this.id = option.id;
|
||||||
|
this.init();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
init() {
|
||||||
|
shopDetail({ id: this.id }).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
this.shopInfo = res.data;
|
||||||
|
console.log("res: ", res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
handleTab(i) {
|
handleTab(i) {
|
||||||
this.actIndex = i
|
this.actIndex = i;
|
||||||
},
|
},
|
||||||
setCopy(content) {
|
setCopy(content) {
|
||||||
// 该方法不支持h5
|
// 该方法不支持h5
|
||||||
|
|
@ -99,64 +128,65 @@
|
||||||
uni.setClipboardData({
|
uni.setClipboardData({
|
||||||
data: String(content), // 必须字符串
|
data: String(content), // 必须字符串
|
||||||
success: function () {
|
success: function () {
|
||||||
console.log('success');
|
console.log("success");
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
//#endif
|
//#endif
|
||||||
|
|
||||||
// h5端赋值方法，使用创建节点
|
// h5端赋值方法，使用创建节点
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
if (!document.queryCommandSupported('copy')) { // 兼容某些浏览器的判断
|
if (!document.queryCommandSupported("copy")) {
|
||||||
console.log('该浏览器不支持')
|
// 兼容某些浏览器的判断
|
||||||
|
console.log("该浏览器不支持");
|
||||||
}
|
}
|
||||||
let textarea = document.createElement("textarea")
|
let textarea = document.createElement("textarea");
|
||||||
textarea.value = content
|
textarea.value = content;
|
||||||
textarea.readOnly = "readOnly"
|
textarea.readOnly = "readOnly";
|
||||||
document.body.appendChild(textarea)
|
document.body.appendChild(textarea);
|
||||||
textarea.select() // 选择对象
|
textarea.select(); // 选择对象
|
||||||
textarea.setSelectionRange(0, content.length) // 核心
|
textarea.setSelectionRange(0, content.length); // 核心
|
||||||
let result = document.execCommand("copy") // 执行浏览器复制命令
|
let result = document.execCommand("copy"); // 执行浏览器复制命令
|
||||||
if (result) {
|
if (result) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '复制成功',
|
title: "复制成功",
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
icon:'none'
|
icon: "none",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
textarea.remove()
|
textarea.remove();
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
handlePay() {
|
handlePay() {
|
||||||
// 从相机和相册扫码
|
// 从相机和相册扫码
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
uni.scanCode({
|
uni.scanCode({
|
||||||
scanType:['qrCode'],
|
scanType: ["qrCode"],
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
console.log('二维码信息：' + res);
|
console.log("二维码信息：" + res);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
toRouter() {
|
toRouter() {
|
||||||
uni.navigateBack()
|
uni.navigateBack();
|
||||||
},
|
},
|
||||||
openMap() {
|
openMap() {
|
||||||
uni.openLocation({
|
uni.openLocation({
|
||||||
latitude: Number(22.541211),
|
latitude: Number(this.shopInfo.lat),
|
||||||
longitude: Number(114.118052),
|
longitude: Number(this.shopInfo.long),
|
||||||
name: '深房广场',
|
name: this.shopInfo.mer_name,
|
||||||
address: '鲜果自由，等你来哈',
|
address: this.shopInfo.mer_info,
|
||||||
// scale:8,
|
// scale:8,
|
||||||
success: function () {
|
success: function () {
|
||||||
console.log('success');
|
console.log("success");
|
||||||
},
|
},
|
||||||
fail: function (error) {
|
fail: function (error) {
|
||||||
console.log('error', error);
|
console.log("error", error);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
@ -204,18 +234,20 @@
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.grade,.desc,.site{
|
.grade,
|
||||||
|
.desc,
|
||||||
|
.site {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
margin-top: 8rpx;
|
margin-top: 8rpx;
|
||||||
}
|
}
|
||||||
.grade {
|
.grade {
|
||||||
color: #FE8C16;
|
color: #fe8c16;
|
||||||
& > :first-child {
|
& > :first-child {
|
||||||
margin-right: 8rpx;
|
margin-right: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
color: #4E4E4E;
|
color: #4e4e4e;
|
||||||
}
|
}
|
||||||
.site {
|
.site {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
|
|
@ -253,7 +285,7 @@
|
||||||
margin-top: 12rpx;
|
margin-top: 12rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
&:nth-child(3){
|
&:nth-child(4) {
|
||||||
margin-top: 12rpx;
|
margin-top: 12rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -308,7 +340,11 @@
|
||||||
bottom: 30rpx;
|
bottom: 30rpx;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 92rpx;
|
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;
|
border-radius: 60rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 92rpx;
|
line-height: 92rpx;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue