|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <view class="searchBoxBg">
|
|
|
+ <view class="searchBox">
|
|
|
+ <image src="../../static/img/icon_search.png" mode="" class="searchImg"></image>
|
|
|
+ <input type="text" class="searchInput" placeholder="请输入门店名称、联系人、手机号" v-model="searchValue"
|
|
|
+ @confirm="searchDone" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 门店列表 -->
|
|
|
+ <view class="shopContent">
|
|
|
+ <view v-for="(item,index) in data" :key="index">
|
|
|
+ <view class="shopBox">
|
|
|
+ <view class="shopTop">
|
|
|
+ <view class="shopName">门店名称门店名称门店名称称门店名称</view>
|
|
|
+
|
|
|
+ <!-- 地址和电话 -->
|
|
|
+ <image class="tubiao" src="../../static/img/icon_daohang_def.png" mode="" @click="goAddress(item.address)">
|
|
|
+ </image>
|
|
|
+ <image class=" tubiao" src="../../static/img/icon_phone_def.png" mode="" @click="call(item.phone)">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 门店类型-开业时间-联系人 -->
|
|
|
+ <view class="shopType"><text style='color: #B98B5D;'>门店类型</text> · 开业时间 · 联系人:{{lianxiren}}</view>
|
|
|
+
|
|
|
+ <!-- 详细地址 -->
|
|
|
+ <view class="addressView">
|
|
|
+ <view class="address">山东省济南市历下区齐鲁软件园创业广场广广场广广场广广场广广场广</view>
|
|
|
+ <view class="distance">29.6km</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchValue: '',
|
|
|
+ data: [1, 2, 3, 4, 5, 6, 7],
|
|
|
+ lianxiren: '王老师',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ searchDone() {
|
|
|
+ this.searchValue = e.target.value;
|
|
|
+ },
|
|
|
+ goAddress(e) {
|
|
|
+ console.log('地图导航');
|
|
|
+ },
|
|
|
+ call(e) {
|
|
|
+ console.log('打电话');
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .content {
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchBoxBg {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .searchBoxBg {
|
|
|
+ top: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+ .searchBox {
|
|
|
+ display: flex;
|
|
|
+ height: 72rpx;
|
|
|
+ margin: 24rpx;
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchImg {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchInput {
|
|
|
+ height: 72rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ width: 85%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopContent {
|
|
|
+ position: relative;
|
|
|
+ top: 120rpx;
|
|
|
+ left: 0rpx;
|
|
|
+ padding: 0rpx 24rpx;
|
|
|
+ background-color: #F4F5F7;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBox {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 20rpx 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopTop {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 20rpx 10rpx 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopName {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tubiao {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopType {
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addressView {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .distance {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+</style>
|