You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
419 lines
10 KiB
419 lines
10 KiB
<template>
|
|
<view>
|
|
<!-- #ifdef MP || APP -->
|
|
<view class="storeTitle">
|
|
<!-- <view :style="{height:getHeight.barTop+'px'}"></view>
|
|
<view class="sysTitle acea-row row-center-wrapper" :style="{height:getHeight.barHeight+'px'}">
|
|
<view>门店列表</view>
|
|
<text class="iconfont icon-ic_leftarrow" @click="goarrow"></text>
|
|
</view> -->
|
|
<view class="topdaohang" @click="goarrow">
|
|
<uni-icons type="left" size="18" color="white"></uni-icons>
|
|
<text>门店列表</text>
|
|
</view>
|
|
</view>
|
|
<view :style="{height:(getHeight.barTop+getHeight.barHeight)+'px'}"></view>
|
|
<!-- #endif -->
|
|
<!-- <view class="header acea-row row-between-wrapper">
|
|
<view class="item" :class="content.store_type==item.type?'on':''" v-for="(item, index) in navList" :key="index" @click="navChange(item.type)">{{item.name}}</view>
|
|
<view class="search acea-row row-middle">
|
|
<view class="name" @click="btnFn">{{ addressInfo.length ? addressInfo[1].label : '全部' }}<text class="iconfont icon-ic_down2"></text></view>
|
|
<input class="input" placeholder="请输入门店名称" placeholder-class="placeholders" @confirm="searchSubmit" v-model="content.keyword"></input>
|
|
<text class="iconfont icon-ic_search" @click="searchSubmit"></text>
|
|
</view>
|
|
<view class="pictrue" @click="goMap">
|
|
<image src="../static/map.png"></image>
|
|
</view>
|
|
</view> -->
|
|
<view class="input-container">
|
|
<input class="inputserch" v-model="content.keyword" placeholder="请输入门店名称" prefixIcon="search" @input="handinput"/>
|
|
<uni-icons class="inputicon" type="search" size="16" color="white"></uni-icons>
|
|
</view>
|
|
<view class="list" v-if="storeList.length" style="margin-top: 20rpx;">
|
|
<view class="item acea-row row-between-wrapper" :class="sortIndex==item.id?'borderhuang':''" v-for="(item, index) in storeList" :key="index" @click="activeFn(item)">
|
|
<!-- <text class="iconfont icon-a-icon_cornermark" v-if="sortIndex==item.id"></text> -->
|
|
<view class="left">
|
|
<view class="name line2 colorfff">{{item.name}}</view>
|
|
<view class="address acea-row">
|
|
<!-- <text class="iconfont icon-ic_location51 pt-2"></text> -->
|
|
<view class="flex-1 colorhui">{{item.address}}{{item.detailed_address}}</view>
|
|
</view>
|
|
<view class="address time colorhui">营业时间：{{item.day_time}}</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="gostore">进店选购</view>
|
|
<view class="distance">距离{{item.range}}km</view>
|
|
<view class="telephone acea-row row-center-wrapper">
|
|
<view class="phone acea-row row-center-wrapper" @click.stop="callPhone(item)">
|
|
<text class="iconfont icon-ic_Phone"></text>
|
|
</view>
|
|
<view class="phone acea-row row-center-wrapper" @click.stop="showMaoLocation(item)">
|
|
<text class="iconfont icon-icon_Location"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="emptyPage px-20" v-else>
|
|
<emptyPage title="暂无门店信息~" src="/statics/images/noOrder.gif"></emptyPage>
|
|
</view>
|
|
<areaWindow ref="areaWindow" :display="display" :cityShow="2" :address="addressInfo" @submit="OnChangeAddress" @changeClose="changeClose"></areaWindow>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
HTTP_REQUEST_URL
|
|
} from '@/config/app';
|
|
import colors from "@/mixins/color";
|
|
import {
|
|
getList
|
|
} from '@/api/new_store.js'
|
|
import areaWindow from '@/components/areaWindow';
|
|
import emptyPage from '@/components/emptyPage.vue';
|
|
export default {
|
|
components: {
|
|
areaWindow,
|
|
emptyPage
|
|
},
|
|
mixins:[colors],
|
|
data() {
|
|
return {
|
|
inputtext:'',
|
|
imgHost: HTTP_REQUEST_URL,
|
|
getHeight: this.$util.getWXStatusHeight(),
|
|
navList:[
|
|
{name:'附近',type:1},
|
|
{name:'常用',type:2}
|
|
],
|
|
storeList:[],
|
|
content: {
|
|
// 自己的位置
|
|
latitude: uni.getStorageSync('user_latitude'),
|
|
longitude: uni.getStorageSync('user_longitude'),
|
|
store_type: 1,
|
|
keyword: "",
|
|
province: 0,
|
|
city: 0,
|
|
area: 0,
|
|
},
|
|
display: false,
|
|
addressInfo: [],
|
|
sortIndex: 0,
|
|
comeType: 0,
|
|
isCollage:0
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.setStorageSync('isCollagemendian',options.storeId)
|
|
this.comeType = options.type
|
|
this.sortIndex = options.storeId
|
|
this.isCollage = options.isCollage
|
|
console.log('this.isCollage',this.isCollage);
|
|
this.content.product_id = options.product_id || 0
|
|
this.getlist()
|
|
},
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
handinput(){
|
|
this.getlist()
|
|
},
|
|
goarrow(){
|
|
uni.navigateBack()
|
|
},
|
|
navChange(type) {
|
|
this.content.store_type = type;
|
|
this.getlist();
|
|
},
|
|
// 输入关键字搜索门店
|
|
searchSubmit() {
|
|
this.getlist()
|
|
},
|
|
// 门店列表
|
|
getlist() {
|
|
getList(this.content).then(res => {
|
|
this.storeList = res.data
|
|
})
|
|
},
|
|
btnFn() {
|
|
this.display = true;
|
|
},
|
|
changeClose() {
|
|
this.display = false;
|
|
},
|
|
OnChangeAddress(address) {
|
|
this.addressInfo = address;
|
|
this.content.province = address[0].value;
|
|
this.content.city = address[1].value;
|
|
this.content.area = address[2].value;
|
|
this.getlist();
|
|
},
|
|
goMap() {
|
|
uni.navigateTo({
|
|
// #ifdef APP
|
|
url: `/pages/store/mapnvue/index?province=${this.content.province}&city=${this.content.city}&area=${this.content.area}`
|
|
// #endif
|
|
// #ifndef APP
|
|
url: `/pages/store/map/index?province=${this.content.province}&city=${this.content.city}&area=${this.content.area}`
|
|
// #endif
|
|
})
|
|
},
|
|
// 点击高亮
|
|
activeFn(row) {
|
|
if(this.isCollage){
|
|
uni.setStorageSync('isCollagemendian',row.id)
|
|
}
|
|
this.sortIndex = row.id
|
|
console.log(111,row);
|
|
uni.setStorageSync('mdnane','')
|
|
uni.setStorageSync('mdid','')
|
|
uni.setStorageSync('mdnane',row.name)
|
|
uni.setStorageSync('mdid',row.id)
|
|
uni.navigateBack()
|
|
|
|
},
|
|
// 打电话
|
|
callPhone(row) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: row.phone
|
|
});
|
|
},
|
|
showMaoLocation(e) {
|
|
let self = this;
|
|
// #ifdef H5
|
|
if (self.$wechat.isWeixin()) {
|
|
return self.$wechat.seeLocation({
|
|
latitude: Number(e.latitude),
|
|
longitude: Number(e.longitude),
|
|
name: e.name,
|
|
scale: 13,
|
|
address: `${e.address}-${e.detailed_address}`,
|
|
}).then(res => {})
|
|
}
|
|
// #endif
|
|
uni.openLocation({
|
|
latitude: Number(e.latitude),
|
|
longitude: Number(e.longitude),
|
|
name: e.name,
|
|
address: `${e.address}-${e.detailed_address}`,
|
|
success: function() {
|
|
Number
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.borderhuang{
|
|
border: 1px solid #F8BF1F;
|
|
}
|
|
.emptyPage{
|
|
position: relative;
|
|
|
|
}
|
|
.storeTitle{
|
|
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
|
position: fixed;
|
|
left:0;
|
|
top:0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
.sysTitle{
|
|
width: 100%;
|
|
position: relative;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
.iconfont{
|
|
position: absolute;
|
|
font-size: 36rpx;
|
|
left:11rpx;
|
|
width: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
.header{
|
|
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
|
padding: 40rpx 20rpx 42rpx 32rpx;
|
|
position: relative;
|
|
&::before{
|
|
position: absolute;
|
|
content: ' ';
|
|
width: 50%;
|
|
height: 90rpx;
|
|
background: linear-gradient(180deg, var(--view-gradient) 0%, #F5F5F5 100%);
|
|
right: 0;
|
|
bottom: -90rpx;
|
|
}
|
|
&::after{
|
|
position: absolute;
|
|
content: ' ';
|
|
width: 50%;
|
|
height: 90rpx;
|
|
background: linear-gradient(180deg, var(--view-theme) 0%, #F5F5F5 100%);
|
|
left: 0;
|
|
bottom: -90rpx;
|
|
}
|
|
.item{
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: rgba(255,255,255,0.6);
|
|
margin-right: 22rpx;
|
|
&.on{
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
font-size: 30rpx;
|
|
&::after{
|
|
position: absolute;
|
|
content: '';
|
|
width: 36rpx;
|
|
height: 30rpx;
|
|
border: 2px solid #FFFFFF;
|
|
border-left: 2px solid transparent !important;
|
|
border-top: 2px solid transparent !important;
|
|
border-right: 2px solid transparent !important;
|
|
border-radius: 50%;
|
|
left:50%;
|
|
bottom: -12rpx;
|
|
margin-left: -24rpx;
|
|
}
|
|
}
|
|
}
|
|
.search{
|
|
width: 416rpx;
|
|
height: 58rpx;
|
|
background: rgba(255,255,255,0.3);
|
|
border-radius: 50rpx;
|
|
font-size: 24rpx;
|
|
padding: 0 24rpx;
|
|
.icon-ic_search{
|
|
font-size: 32rpx;
|
|
color: rgba(255,255,255,0.6);
|
|
padding-left: 20rpx;
|
|
}
|
|
.name{
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
.iconfont{
|
|
font-size: 16rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
&:before{
|
|
position: absolute;
|
|
content: '';
|
|
width: 1px;
|
|
height: 24rpx;
|
|
background-color: rgba(255,255,255,0.4);
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -12rpx;
|
|
}
|
|
padding-right: 20rpx;
|
|
}
|
|
.input{
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
flex: 1;
|
|
margin-left: 20rpx;
|
|
}
|
|
/deep/.placeholders{
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.pictrue{
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.list{
|
|
position: relative;
|
|
padding-bottom: 1rpx;
|
|
.item{
|
|
background-color: #1B1A1D;
|
|
width: 710rpx;
|
|
margin: 0 auto 20rpx auto;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx 0 30rpx 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&.on{
|
|
border: 1px solid var(--view-theme);
|
|
}
|
|
.icon-a-icon_cornermark{
|
|
position: absolute;
|
|
right: -2rpx;
|
|
top: -4rpx;
|
|
color:var(--view-theme);
|
|
font-size: 50rpx;
|
|
}
|
|
.left{
|
|
flex: 1;
|
|
position: relative;
|
|
// border-right: 1px solid #eee;
|
|
padding-right: 20rpx;
|
|
.name{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.address{
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
margin-top: 16rpx;
|
|
.iconfont{
|
|
color: #666;
|
|
font-size: 24rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
.icon-icon_clock{
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
.time{
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
.right{
|
|
width: 182rpx;
|
|
text-align: center;
|
|
.gostore{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #C6C4CA;
|
|
}
|
|
.distance{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #7B7A7F;
|
|
margin-top: 14rpx;
|
|
}
|
|
.telephone{
|
|
.phone{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
background: #F8BF1F;
|
|
margin: 20rpx 10rpx 0 10rpx;
|
|
.iconfont{
|
|
font-size: 25rpx;
|
|
color: #1B1A1D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |