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",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.4",
|
||||
|
|
|
|||
11
pages.json
11
pages.json
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,320 +1,356 @@
|
|||
<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>
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="title">
|
||||
<view class="title_left">
|
||||
<image src="@/static/images/shop_bg.png" mode=""></image>
|
||||
</view>
|
||||
<view class="title_right">
|
||||
<view class="txt">特色餐厅(朝阳总店)</view>
|
||||
<view class="grade">
|
||||
<text class="iconfont icon-shitixing"></text>
|
||||
<text>评分4.5分</text>
|
||||
</view>
|
||||
<view class="desc">商家承诺:</view>
|
||||
<view class="site" @tap="openMap">
|
||||
<view>
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
<text>北京市东城区朝阳门内大街特色</text>
|
||||
</view>
|
||||
<view class="iconfont icon-jiantou"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="business">
|
||||
<view class="business_one">营业中</view>
|
||||
<view class="business_one">
|
||||
<text>周一到周日</text>
|
||||
<text>09：00 - 22：00</text>
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-dianhua"></view> -->
|
||||
<view class="business_one">
|
||||
<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>
|
||||
</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>
|
||||
<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="shop_details" :style="viewColor">
|
||||
<view class="head">
|
||||
<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="shopInfo.mer_avatar" mode=""></image>
|
||||
</view>
|
||||
<view class="title_right">
|
||||
<view class="txt">{{ shopInfo.mer_name }}</view>
|
||||
<view class="grade">
|
||||
<text class="iconfont icon-shitixing"></text>
|
||||
<text>评分{{ shopInfo.service_score }}分</text>
|
||||
</view>
|
||||
<view class="desc"
|
||||
>商家承诺：{{
|
||||
shopInfo.detail.promise ? shopInfo.detail.promise : "啥也没有留下"
|
||||
}}</view
|
||||
>
|
||||
<view class="site" @tap="openMap">
|
||||
<view>
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
<text>{{ shopInfo.mer_address }}</text>
|
||||
</view>
|
||||
<view class="iconfont icon-jiantou"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="business">
|
||||
<view class="business_one">营业中</view>
|
||||
<view class="business_one">
|
||||
<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>
|
||||
<text class="copy" @tap="setCopy(15834567081)">复制</text>
|
||||
</view>
|
||||
<view class="business_list">可提供：</view>
|
||||
<view class="business_list">
|
||||
<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>
|
||||
<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" v-html="shopInfo.detail.detail"></view>
|
||||
<!-- <view class="product_content">
|
||||
欢迎来到我们的火锅店！我们是一个有着悠久历史和传统美食文化的品牌，我们的火锅是采用新鲜的食材和秘制的调料烹饪而成，每一口都充满了浓郁的鲜香和醇厚的口感。
|
||||
</view>
|
||||
<view class="product_content">
|
||||
我们的品牌特色在于选用上等食材，如草原鲜嫩肥羊、天然海鲜等，以及秘制香料和特色锅底。店内环境优雅舒适，服务周到细致，为您打造一处独具特色的火锅天地。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @tap="handlePay">去付款</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @tap="handlePay">去付款</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swipers from '@/components/swipers';
|
||||
import parser from "@/components/jyf-parser/jyf-parser";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
components:{swipers,"jyf-parser": parser},
|
||||
data(){
|
||||
return {
|
||||
shopInfo:{
|
||||
swiper_image:[{img:'/static/images/shop_bg.png'}],
|
||||
},
|
||||
tabList:[{name:'商家信息'}],
|
||||
actIndex:0
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
...mapGetters(['viewColor'])
|
||||
},
|
||||
methods:{
|
||||
handleTab(i){
|
||||
this.actIndex = i
|
||||
},
|
||||
setCopy(content) {
|
||||
// 该方法不支持h5
|
||||
//#ifndef APP-PLUS
|
||||
uni.setClipboardData({
|
||||
data: String(content), // 必须字符串
|
||||
success: function() {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
//#endif
|
||||
|
||||
// h5端赋值方法，使用创建节点
|
||||
// #ifdef H5
|
||||
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") // 执行浏览器复制命令
|
||||
if (result) {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
duration: 2000,
|
||||
icon:'none'
|
||||
});
|
||||
}
|
||||
textarea.remove()
|
||||
// #endif
|
||||
},
|
||||
handlePay(){
|
||||
// 从相机和相册扫码
|
||||
// #ifdef APP-PLUS
|
||||
uni.scanCode({
|
||||
scanType:['qrCode'],
|
||||
success: function (res) {
|
||||
console.log('二维码信息：' + res);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
toRouter(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
openMap() {
|
||||
uni.openLocation({
|
||||
latitude: Number(22.541211),
|
||||
longitude: Number(114.118052),
|
||||
name: '深房广场',
|
||||
address: '鲜果自由，等你来哈',
|
||||
// scale:8,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
},
|
||||
fail: function (error) {
|
||||
console.log('error', error);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
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" }],
|
||||
},
|
||||
week: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
tabList: [{ name: "商家信息" }],
|
||||
actIndex: 0,
|
||||
id: 0,
|
||||
shopInfo: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...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;
|
||||
},
|
||||
setCopy(content) {
|
||||
// 该方法不支持h5
|
||||
//#ifndef APP-PLUS
|
||||
uni.setClipboardData({
|
||||
data: String(content), // 必须字符串
|
||||
success: function () {
|
||||
console.log("success");
|
||||
},
|
||||
});
|
||||
//#endif
|
||||
|
||||
// h5端赋值方法，使用创建节点
|
||||
// #ifdef H5
|
||||
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"); // 执行浏览器复制命令
|
||||
if (result) {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
textarea.remove();
|
||||
// #endif
|
||||
},
|
||||
handlePay() {
|
||||
// 从相机和相册扫码
|
||||
// #ifdef APP-PLUS
|
||||
uni.scanCode({
|
||||
scanType: ["qrCode"],
|
||||
success: function (res) {
|
||||
console.log("二维码信息：" + res);
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
toRouter() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
openMap() {
|
||||
uni.openLocation({
|
||||
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");
|
||||
},
|
||||
fail: function (error) {
|
||||
console.log("error", error);
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.over {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.shop_details{
|
||||
font-family: PingFang SC;
|
||||
.head{
|
||||
position: relative;
|
||||
.back{
|
||||
position: absolute;
|
||||
top: 88rpx;
|
||||
left: 40rpx;
|
||||
color: #fff;
|
||||
.iconfont{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main{
|
||||
position: relative;
|
||||
height: calc(100vh - 400rpx);
|
||||
background: #fff;
|
||||
margin-top: -40rpx;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 28rpx;
|
||||
.title{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.title_left{
|
||||
image{
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
.title_right{
|
||||
margin-left: 10rpx;
|
||||
width:100%;
|
||||
.txt{
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.grade,.desc,.site{
|
||||
font-size: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.grade{
|
||||
color: #FE8C16;
|
||||
&>:first-child{
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
color: #4E4E4E;
|
||||
}
|
||||
.site{
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.iconfont{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
&>:first-child{
|
||||
max-width: 320rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
&>:first-child{
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.business{
|
||||
margin-top: 40rpx;
|
||||
background-color: color-mix(in oklch, var(--view-theme), transparent 90%);
|
||||
// opacity: 0.8;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
&_one{
|
||||
font-size: 28rpx;
|
||||
&:nth-child(1){
|
||||
color: #333333;
|
||||
}
|
||||
&:nth-child(2){
|
||||
margin-top: 12rpx;
|
||||
color: #999;
|
||||
}
|
||||
&:nth-child(3){
|
||||
margin-top: 12rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.copy{
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
&_list{
|
||||
margin-top: 12rpx;
|
||||
text{
|
||||
font-size: 24rpx;
|
||||
// color: var(--view-theme);
|
||||
// border: #1372F5 1px solid;
|
||||
color: var(--view-theme);
|
||||
border: var(--view-theme) 1px solid;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 16rpx;
|
||||
&:not(:first-child){
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs{
|
||||
margin-top: 40rpx;
|
||||
&_nav{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
&_item{
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
& + .tabs_item{
|
||||
margin-left: 68rpx;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.conter{
|
||||
margin-top: 28rpx;
|
||||
.product_content{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
width: 80%;
|
||||
height: 92rpx;
|
||||
background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||
border-radius: 60rpx;
|
||||
text-align: center;
|
||||
line-height: 92rpx;
|
||||
color: #fff;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.over {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.shop_details {
|
||||
font-family: PingFang SC;
|
||||
.head {
|
||||
position: relative;
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 88rpx;
|
||||
left: 40rpx;
|
||||
color: #fff;
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
position: relative;
|
||||
height: calc(100vh - 400rpx);
|
||||
background: #fff;
|
||||
margin-top: -40rpx;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 28rpx;
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.title_left {
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
.title_right {
|
||||
margin-left: 10rpx;
|
||||
width: 100%;
|
||||
.txt {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.grade,
|
||||
.desc,
|
||||
.site {
|
||||
font-size: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.grade {
|
||||
color: #fe8c16;
|
||||
& > :first-child {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
color: #4e4e4e;
|
||||
}
|
||||
.site {
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
& > :first-child {
|
||||
max-width: 320rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
& > :first-child {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.business {
|
||||
margin-top: 40rpx;
|
||||
background-color: color-mix(in oklch, var(--view-theme), transparent 90%);
|
||||
// opacity: 0.8;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
&_one {
|
||||
font-size: 28rpx;
|
||||
&:nth-child(1) {
|
||||
color: #333333;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
margin-top: 12rpx;
|
||||
color: #999;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
margin-top: 12rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.copy {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
&_list {
|
||||
margin-top: 12rpx;
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
// color: var(--view-theme);
|
||||
// border: #1372F5 1px solid;
|
||||
color: var(--view-theme);
|
||||
border: var(--view-theme) 1px solid;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 16rpx;
|
||||
&:not(:first-child) {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
margin-top: 40rpx;
|
||||
&_nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
&_item {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
& + .tabs_item {
|
||||
margin-left: 68rpx;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.conter {
|
||||
margin-top: 28rpx;
|
||||
.product_content {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
width: 80%;
|
||||
height: 92rpx;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
var(--view-bntColor21) 0%,
|
||||
var(--view-bntColor22) 100%
|
||||
);
|
||||
border-radius: 60rpx;
|
||||
text-align: center;
|
||||
line-height: 92rpx;
|
||||
color: #fff;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue