CommunityApp/pagesM/pages/mention_store_list.vue

<template>
  <view class="pageBg">
    <map :longitude="longitude" :latitude="latitude" :markers="markers" zIndex="1" class="map_style"></map>
    <view class="address_line">
      <image src="http://139.9.103.171:1888/img/image/address_line.png"></image>
    </view>
    <view class="mention_store_list">
      <view class="mention_store_item">
        <view class="info_list">
          <view class="item">
            <text class="store_text"></text>
            <text class="store_name">广州店<text class="store_distance">距离40.5km</text></text>
          </view>
          <view class="item">
            <text class="contact_phone_text">联系电话：</text>
            <text class="contact_phone">123333333<text class="contact">(有货)拨打电话</text></text>
          </view>
          <view class="item">
            <text class="address_text">具体地址：</text>
            <text class="address">广东省广州市天河区车陂660号</text>
          </view>
          <view class="item">
            <text class="open_time_text">营业时间：</text>
            <text class="opten_time">08:00-22:00</text>
          </view>
        </view>
        <image class="operation_icon" src="http://139.9.103.171:1888/img/image/no_selected_icon.png"></image>
      </view>
      <view class="mention_store_item">
        <view class="info_list">
          <view class="item">
            <text class="store_text"></text>
            <text class="store_name">广州店<text class="store_distance">距离40.5km</text></text>
          </view>
          <view class="item">
            <text class="contact_phone_text">联系电话：</text>
            <text class="contact_phone">123333333<text class="contact">(有货)拨打电话</text></text>
          </view>
          <view class="item">
            <text class="address_text">具体地址：</text>
            <text class="address">广东省广州市天河区车陂660号</text>
          </view>
          <view class="item">
            <text class="open_time_text">营业时间：</text>
            <text class="opten_time">08:00-22:00</text>
          </view>
        </view>
        <image class="operation_icon" src="http://139.9.103.171:1888/img/image/no_selected_icon.png"></image>
      </view>
      <view class="mention_store_item">
        <view class="info_list">
          <view class="item">
            <text class="store_text"></text>
            <text class="store_name">广州店<text class="store_distance">距离40.5km</text></text>
          </view>
          <view class="item">
            <text class="contact_phone_text">联系电话：</text>
            <text class="contact_phone">123333333<text class="contact">(有货)拨打电话</text></text>
          </view>
          <view class="item">
            <text class="address_text">具体地址：</text>
            <text class="address">广东省广州市天河区车陂660号</text>
          </view>
          <view class="item">
            <text class="open_time_text">营业时间：</text>
            <text class="opten_time">08:00-22:00</text>
          </view>
        </view>
        <image class="operation_icon" src="http://139.9.103.171:1888/img/image/no_selected_icon.png"></image>
      </view>
      <view class="mention_store_item">
        <view class="info_list">
          <view class="item">
            <text class="store_text"></text>
            <text class="store_name">广州店<text class="store_distance">距离40.5km</text></text>
          </view>
          <view class="item">
            <text class="contact_phone_text">联系电话：</text>
            <text class="contact_phone">123333333<text class="contact">(有货)拨打电话</text></text>
          </view>
          <view class="item">
            <text class="address_text">具体地址：</text>
            <text class="address">广东省广州市天河区车陂660号</text>
          </view>
          <view class="item">
            <text class="open_time_text">营业时间：</text>
            <text class="opten_time">08:00-22:00</text>
          </view>
        </view>
        <image class="operation_icon" src="http://139.9.103.171:1888/img/image/no_selected_icon.png"></image>
      </view>
    </view>

    <view class="bottom_height"></view>
    <view class="bottom_btn">
      <button class="btn">确定</button>
    </view>

  </view>
</template>
<script>
import DtGoodsList from '../comps/dt_goods_list'
import DtNoData from '../comps/dt_no_data'
import DtNoMore from '../comps/dt_no_more'
export default {
  components: {
    DtGoodsList,
    DtNoData,
    DtNoMore

  },
  data() {
    return {
      methodsIndex: 1,
      hasAddress: false,
      mentionMember: '',
      mentionMobilephone: '',

      msgValue: '',

      latitude: 23.12631, //纬度
      longitude: 113.385, //经度
      markers: [
        {
          latitude: 23.12631, //纬度
          longitude: 113.385, //经度
          iconPath: "http://139.9.103.171:1888/img/image/map_remark_icon.png",
          height: uni.upx2px(52) + "px",
          width: uni.upx2px(38) + "px"
        }
      ],
    }
  },
  computed: {

  },
  methods: {

    onPageLoad(options) {

    },



  },
}
</script>

<style lang="scss" scoped>
.map_style {
  width: 100%;
  height: 400upx;
}
.address_line {
  width: 100%;
  height: 8upx;
  display: flex;
  flex-direction: row;
  image {
    height: 8upx;
    width: 100%;
  }
}

.mention_store_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  padding: 30upx;
  border-top:1upx solid #e5e5e5;
  .info_list {
    flex: 1;
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      flex-direction: row;
      font-size: 26upx;
      color: #666666;
      margin-bottom: 10upx;
      text:last-child {
        flex: 1;
      }
      .store_name,
      .contact_phone {
        display: flex;
        flex-direction: row;
      }
      .store_distance,
      .contact {
        text-decoration: underline;
        color: $dt-color-primary;
        font-size: 18upx;
        margin-left: 10upx;
        letter-spacing: 1upx;
        padding: 10upx;
      }
    }
    .item:first-child {
      font-size: 28upx;
      color: #333;
    }
    .item:last-child {
      margin-bottom: 0;
    }
  }
  .operation_icon {
    width: 40upx;
    height: 40upx;
    padding: 20upx 20upx 20upx 30upx;
  }
}
.mention_store_item:first-child {
  border-top: none;
}
.bottom_height {
  height: 130upx;
}
.bottom_btn {
  position: fixed;
  width: 100%;
  height: 110upx;
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  .btn {
    background: $dt-color-primary;
    border-radius: 10upx;
    margin: 0 30upx;
    width: 100%;
    font-size: 30upx;
    color: #fff;
  }
}
</style>