init

fuintUniapp/components/page/location/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <!-- 定位店铺 -->
+  <view class="main-loc">
+      <view v-if="storeInfo.name" class="diy-location">
+        <view class="inner" @click="onTargetLocation">
+          <view class="location-input">
+            <text class="store">
+               <text class="name">{{ storeInfo.name }}</text>
+               <text class="switch">[切换店铺]</text>
+               <text class="address"><text class="location-icon iconfont icon-dingwei"></text>{{ storeInfo.address }}</text>
+            </text>
+          </view>
+        </view>
+      </view>
+  </view>
+</template>
+
+<script>
+  export default {
+
+    /**
+     * 组件的属性列表
+     * 用于组件自定义设置
+     */
+    props: {
+      itemStyle: Object,
+      storeInfo: Object
+    },
+
+    /**
+     * 组件的方法列表
+     * 更新属性和数据的方法与更新页面数据的方法类似
+     */
+    methods: {
+      /**
+       * 跳转到定位页面页面
+       */
+      onTargetLocation() {
+        this.$navTo('pages/location/index')
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+.main-loc {
+  height: 90rpx;
+  /* #ifdef H5 */
+  height: 100rpx;
+  /* #endif */
+  color: #ffffff;
+  .diy-location {
+    background: linear-gradient(to bottom, $fuint-theme, $fuint-theme);
+    padding: 3rpx 10rpx 10rpx 10rpx;
+    /* #ifdef H5 */
+    padding-top: 15rpx;
+    /* #endif */
+    position: fixed;
+    z-index: 99999;
+    width: 100%;
+  }
+
+  .inner {
+    height: 82rpx;
+    overflow: hidden;
+    &.radius {
+      border-radius: 10rpx;
+    }
+    &.round {
+      border-radius: 60rpx;
+    }
+  }
+
+  .location-input {
+    color: #484848;
+    padding-left: 10rpx;
+  }
+  
+  .store {
+      .name {
+          font-size: 32rpx;
+          font-weight: bold;
+          color: #ffffff;
+      }
+      .switch {
+          margin-left: 15rpx;
+          font-size: 22rpx;
+          color: #ffffff;
+      }
+      .address {
+          clear: bold;
+          display: block;
+          margin-top: 2rpx;
+          font-size: 23rpx;
+          margin-left: 0rpx;
+          color: #ffffff;
+          .location-icon {
+            margin-right: 4rpx;
+            font-size: 24rpx;
+            color: #f03c3c;
+            font-weight: bold;
+          }
+      }
+  }
+}
+  
+</style>