jje_uniapp/pages/index/index.vue

<template>
  <view class="content-wrap bg-color">


    <view class="head-wrap ">
      <view class="content-info ">

        <view class="h-bg">
          <!-- 轮播图 -->
          <u-swiper
              :circular="true"
              :list="bannerList"
              :height="340"
          ></u-swiper>
        </view>
        <view class="content">

          <!--  通知栏 -->
          <view v-if="noticeList.length > 0" class="h-notice-bar">
            <scroll-notice :dataList="noticeList" :type="2" :interval="3000" :height="46" :fontSize="12" color="#666666"
                           @click="handleNoticeClick"></scroll-notice>
          </view>

          <!--          温馨提示-->
          <view  class="noticeCard">
            <uni-card>
              <text>{{indexTips}}</text>
            </uni-card>
          </view>
          <!-- 个人信息、钱包、商店 -->
          <view class="h-content-wrap">
            <!-- 欢迎语 -->
            <view class="welcome-wrap">
              <view class="logo">
                <image v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode=""></image>
                <image v-else src="../../static/logo.png" mode=""></image>
              </view>
              <view class="text">
                <view class="phone">{{ userInfo.cellPhone }}</view>
                <view class="welcome">尊敬的{{ userInfo.ncikName }}，下午好~</view>
              </view>
              <view @click="gotoReceiveCoupons()" class="arrow-right">
                <!-- <image v-if="userInfo.wxQrCode" class="qrcode" :src="userInfo.qrcode" mode=""></image> -->
                <!-- <image class="qrcode" src="../../static/index/qrcode.png" mode=""></image>
                <view class="h-text">会员码</view> -->
                <view class="coupon-wrap">
                  <u-icon name="coupon-fill" color="#ffb83d" size="22"></u-icon>
                  <text>领券中心</text>
                </view>
              </view>
            </view>

            <!-- 余额信息 -->
            <view class="balance-info">
              <view @click="gotoRechargeService()" class="balance-amount">
                <text class="number" v-if="userInfo.balance">￥{{ userInfo.balance }}</text>
                <text class="number" v-else>￥0.00</text>
                <view class="">余额</view>
              </view>
              <view @click="gotoIntgral()" class="score-info">
                <text class="number" v-if="userInfo.integral">{{ userInfo.integral }}</text>
                <text class="number" v-else>0</text>
                <view class="">积分</view>
              </view>
              <view @click="gotoCoupon()" class="coupon-info">
                <text class="number" v-if="userInfo.coupon">{{ userInfo.coupon }}</text>
                <text class="number" v-else>0</text>
                <view class="">优惠券</view>

              </view>
              <view class="e-currency-info">
                <text class="number" v-if="userInfo.electronicCurrency">{{ userInfo.electronicCurrency }}</text>
                <text class="number" v-else>0</text>
                <view class="">电子币</view>
              </view>
            </view>

            <view class="custom-line"></view>

            <view class="store-wrap">
              <view class="store-info">
                <view class="logo">
                  <image src="../../static/index/u55.png" mode=""></image>
                </view>
                <view @click="gotoStoreChoose()" class="store-content">
                  <view class="h-row">
                    <view class="store-desc">
                      <view class="store-name">
                        <view class="">{{ storeInfo.storeName }}</view>
                      </view>
                    </view>
                    <view class="arrow-right">
                      <view class="change-store">更换门店</view>
                      <u-icon name="arrow-right" color="#333" size="16"></u-icon>
                    </view>
                  </view>
                  <view class="h-row">
                    <text class="address">地址：{{ storeInfo.address }}</text>
                    <!-- <text class="address">距你1.8km</text> -->
                  </view>
                </view>
              </view>

            </view>
          </view>

          <!-- 上次订单 -->
          <view class="nav-wrap ">

            <view class="upper-order-wrap">
              <!-- 左边内容 -->
              <view @click="gotoServiceOrder()" class="left-content">
                <view class="title">
                  到店服务
                </view>
                <view class="desc">
                  <!--									多种服务模式任您选择-->
                </view>
                <view class="bg-img">
                  <image src="../../static/index/u65.png" mode=""></image>
                </view>
              </view>
              <!-- 右边内容 -->
              <view class="right-content" @click="goBookService()">
                <view class="title">
                  预约服务
                </view>
                <view class="desc">
                  <!--									拼命研发中敬请期待...-->
                </view>
                <view class="bg-img">
                  <image src="../../static/index/u67.png" mode=""></image>
                </view>
              </view>
            </view>

            <!-- 导航菜单 -->
            <view class="horizontal-dashed-line"></view>
            <view class="menu-tab">
              <!--							<view class="button-wrap">-->
              <!--								<view @click="gotoComeOrder()" class="btn">-->
              <!--									<view class="icon">-->
              <!--										<u-icon name="/static/index/u213.png" color="red" size="30"></u-icon>-->
              <!--									</view>-->
              <!--									<view class="name">-->
              <!--										再来一单-->
              <!--									</view>-->
              <!--								</view>-->
              <!--							</view>-->
              <view class="button-wrap">
                <view @click="gotoRechargeService()" class="btn">
                  <view class="icon">
                    <u-icon name="/static/index/u215.png" color="red" size="30"></u-icon>
                  </view>
                  <view class="name">
                    储值服务
                  </view>
                </view>
              </view>
              <view class="button-wrap">
                <view @click="gotoOrder()" class="btn">
                  <view class="icon">
                    <u-icon name="/static/index/u217.png" color="red" size="30"></u-icon>
                  </view>
                  <view class="name">
                    当前订单
                  </view>
                </view>
              </view>
              <view class="button-wrap">
                <view @click="gotoReceiveCoupons()" class="btn">
                  <view class="icon">
                    <u-icon name="/static/index/u247.png" color="red" size="30"></u-icon>
                  </view>
                  <view class="name">
                    领优惠券
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 为你推荐 -->
          <view class="recommend-wrap">
            <view class="recommend-nav">
              <view class="icon">
                <image src="/static/index/u87.png" mode=""></image>
              </view>
              <view class="title">
                为你推荐
              </view>
            </view>
            <!-- 分割线 -->
            <view class="custom-line"></view>
            <!-- 门店列表 -->
            <view class="store-wrap ">
              <view class="store-list">
                <view class="store-content">
                  <view class="store-img">
                    <image src="../../static/logo.png" mode=""></image>
                  </view>
                  <view class="h-store-content">
                    <view class="title">
                      <text>{{ storeInfo.storeName }}</text>
                    </view>
                    <view class="adress">
                      地址：{{ storeInfo.address }}
                    </view>
                    <view class="desc">
                      <view class="price">
                      </view>
                      <view @click="gotoGoods()" class="order-btn">
                        <view class="btn">去下单</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="footer ">
            <view class="">---到底了---</view>
          </view>
        </view>
      </view>
    </view>

    <view class="tabBarView">
      <tab-bar :tabIndex="tabIndex"></tab-bar>
    </view>
  </view>

</template>

<script>
import tabBar from "../../components/tabBar/tabBar";
import ScrollNotice from '../../components/scroll-notice/ScrollNotice.vue';

export default {
  components: {
    ScrollNotice, tabBar
  },
  data() {
    return {
      noticeList: [],
      notice: '',
      userInfo: {},
      bannerList: [],
      reqParm: {
        auth: true,
        appid: 46,
        telphone: '',
        longitude: 0,
        latitude: 0
      },
      storeList: [],
      storeInfo: {},
      indexTips:'温馨提示:“娇骄儿JJe”微信小程序为新系统限白云店和遵义店使用，微信小程序系统目前处于试运行阶段，老会员卡暂时不能使用；待开放正式版“娇骄儿JJe”微信小程序后会员退卡全店通用，具体时间请关注娇骄儿微信公众号以及“娇骄儿JJe”微信小程序通告。如有异常请联系工作人员：0851-85833828'
    };
  },

  onShow() {
    // 查询门店信息
    const data = uni.getStorageSync('storeInfo');
    if (!data) {
      // 获取门店列表数据
      console.log('+++++++++++++++++++++++++++++++++', this.userInfo)
      this.getStoreListData();
    } else {
      this.storeInfo = data;
    }
  },
  onLoad() {
    uni.hideTabBar({
      animation: false
    })

    // 获取经纬度信息
    this.getLocation();

    //公告信息
    this.getNoticeListData();

    // 获取banner图列表
    this.getSlideshowList();

    // 用户信息
    this.userInfo = uni.getStorageSync('userInfo');
    if (this.userInfo.selfPhoto) {
      this.getImgUrlByOssId(this.userInfo.selfPhoto);
    }
  },
  // 分享到朋友圈
  onShareTimeline() {
  },
  // 分享到用户
  onShareAppMessage(OBJECT) {
  },
  methods: {
    // 去服务点单页面
    gotoServiceOrder() {
      uni.navigateTo({
        url: '/orderPages/storeService/index'
      })
    },

    goBookService() {
      uni.navigateTo({
        url: '/orderPages/bookService/index'
      })
    },
    //点击通知
    handleNoticeClick(e) {
      console.log(e)
      uni.$u.route({
        url: '/pages/notice/notice-detail',
        params: {
          noticeId: e.noticeId
        }
      })
    },
    // 去优惠劵大厅
    gotoReceiveCoupons() {
      uni.navigateTo({
        url: '/orderPages/receiveCoupons/index'
      })
    },
    // 去我的优惠劵页面
    gotoCoupon() {
      uni.navigateTo({
        url: '/orderPages/myCoupon/index'
      })
    },
    // 储值服务
    gotoRechargeService() {
      uni.navigateTo({
        url: '/myPages/recharge/index?name=lisa',
      })
    },
    // 获取banner图片
    getSlideshowList() {
      let that = this;
      this.$api.getSlideshowList({data: this.reqParm}).then((res) => {
        this.getImgUrlByBannerOssId(res.data.data);
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      })
    },
    async getImgUrlByBannerOssId(items) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].slideshowId) {
          this.$api.getImgUrlByOssId({ossId: items[i].slideshowId}).then(res => {
            this.bannerList.push(res.data.data[0].url.replace(/^http:/, "https:"))
          })
        }
      }
    },
    // 获取门店列表数据
    getStoreListData() {
      let that = this;
      // 用户绑定门店
      this.$api.storeList(this.reqParm).then((res) => {
        console.log(res.data.data[0])
        that.storeInfo = res.data.data[0]
        // 更新用户选择的门店信息
        uni.setStorageSync('storeInfo', res.data.data[0])
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      })
    },
    // 积分详细页面
    gotoIntgral() {
      uni.$u.route({
        url: '/pages/integral/integral',
        params: {
          name: 'lisa'
        }
      })
    },
    getNoticeListData() {
      let req = {
        auth: true,
        noticeType: 2
      }
      this.$api.noticeList({data: req}).then((res) => {
        if (res.data.rows.length === 1) {
          this.noticeList.push(res.data.rows[0])
          this.noticeList.push(res.data.rows[0])
        } else {
          this.noticeList = res.data.rows;
        }
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      })
    },

    getImgUrlByOssId(ossId) {
      if (ossId) {
        this.$api.getImgUrlByOssId(ossId).then(res => {
          console.log('++++++++用户头像+++++++++++++++', res)
        })
        this.userInfo.selfPhotoUrl = url;
        return url;
      }

    },
    // 获取经纬度信息
    getLocation() {

      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          var latitude = res.latitude; // 纬度
          var longitude = res.longitude; // 经度
          var speed = res.speed; // 速度
          var accuracy = res.accuracy; // 精确度
          // 在这里可以对位置信息进行处理
          console.log("纬度：" + latitude + ";经度" + longitude)
          this.reqParm.latitude = latitude
          this.reqParm.longitude = longitude
        }
      });
    },

    // 去选择门店
    gotoStoreChoose() {
      uni.navigateTo({
        url: '/storePages/store/store-choose?type=1',
      })
    },
    // 去再来一单
    gotoComeOrder() {

      uni.$u.route({
        url: '/pages/index/tabbar',
        params: {
          PageCur: 'orderList',
          status: '4'
        }
      })

    },

    // 去订单页面
    gotoOrder() {
      uni.setStorageSync('orderListIndex', 1)
      uni.switchTab({
        url: '/pages/order/index',
      })
    },
    // 去商品下单页面
    gotoGoods() {
      uni.navigateTo({
        url: '/orderPages/bookService/index',
      })
    },

    // 用户绑定门店
    userBindStore() {
      let that = this;
      // 用户绑定门店
      this.$api.userBindStore(this.reqParm).then((res) => {
        console.log(this.reqParm)
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      })
    },

  }
};
</script>

<style scoped lang="scss">

/* 头部内容 */
.head-wrap {
  height: 2200rpx;
  background: #FFE05C;

  .content-info {
    position: relative;

    .h-bg {
      height: 680rpx;
    }

    .content {
      position: absolute;
      top: 460rpx;
      left: 24rpx;
      right: 24rpx;
      border-radius: 12rpx;

      .h-notice-bar {
        padding-left: 20rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(237, 86, 159, 0.05);
        border-radius: 20rpx;
      }
      .noticeCard{
        margin-top: 10rpx;
        padding: 10rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(237, 86, 159, 0.05);
        border-radius: 10px;
      }

      .h-content-wrap {
        background: #fff;
        border-radius: 10px;
        /* 欢迎语 */
        .welcome-wrap {
          padding-top: 12px;
          display: flex;
          margin-left: 12px;
          margin-right: 12px;
          margin-top: 16px;
          align-items: center;

          .logo {
            width: 13%;

            image {
              border-radius: 15px;
              width: 36px;
              height: 36px;
            }
          }

          .text {
            width: 60%;
            font-size: 14px;

            .welcome-wrap {
              font-size: 12px;
              color: #999999;
            }

            .welcome {
              font-size: 12px;
              color: #999999;
            }
          }

          .arrow-right {
            width: 30%;
            text-align: center;
            cursor: pointer;
            display: flex;
            justify-content: center;
            background: #fff8db;
            // background: red;
            height: 32px;
            align-items: center;
            border-radius: 16px;

            .qrcode {
              height: 20px;
              width: 20px;
            }

            .h-text {
              font-size: 12px;
              color: #999999;
            }

            .coupon-wrap {
              display: flex;
              font-size: 14px;
              color: #666;
              align-items: center;
            }
          }

        }

        /* 钱包信息 */
        .balance-info {
          font-size: 12px;
          padding-left: 12px;
          margin-bottom: 16px;
          margin-top: 12px;
          color: #666;
          display: flex;
          justify-content: space-around;
          text-align: center;

          .balance-amount {
            padding-right: 4px;
          }

          .score-info {
            padding-right: 4px;
          }

          .coupon-info {
            padding-right: 4px;
          }

          .e-currency-info {
            padding-right: 4px;
          }

          .number {
            color: #333333;
            font-size: 14px;
          }
        }

        /* 商店信息 */
        .store-wrap {
          margin: 10px;

          .store-info {
            display: flex;

            .logo {
              width: 10%;
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;

              image {
                width: 30px;
                height: 30px;
              }
            }

            .store-content {
              width: 90%;
              padding-bottom: 13px;

              .h-row {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .store-desc {
                  width: 90%;
                  display: flex;
                  line-height: 30px;
                  font-size: 14px;

                  .store-name {
                  }

                }

                .arrow-right {
                  text-align: right;
                  margin: 0 auto;
                  cursor: pointer;
                  padding-top: 3px;
                  width: 100px;
                  display: flex;
                  font-size: 14px;

                  .change-store {
                    text-align: right;
                    color: #666;
                  }

                  image {
                    width: 18px;
                    height: 18px;
                  }
                }

                .address {
                  color: #999999;
                  font-size: 12px;
                  padding-right: 12px;
                }
              }
            }

          }

          .adress {
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 40px;
            color: #666;
          }
        }
      }
    }
  }
}


/* 上次订单 */
.nav-wrap {
  background: #fff;
  border-radius: 8px;
  margin-top: 16px;

  .upper-order-wrap {
    display: flex;
    border-radius: 6px;
    justify-content: center;

    .left-content {
      margin-top: 20px;
      width: 50%;
      font-size: 12px;
      text-align: center;
      border-radius: 10px;

      .title {
        font-size: 18px;
        text-align: center;
      }

      .desc {
        padding-top: 6px;
        color: #999999;
      }

      .bg-img {
        text-align: center;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 78px;
          height: 78px;
        }
      }
    }

    .right-content {
      margin-top: 20px;
      width: 50%;
      font-size: 12px;
      text-align: center;

      .title {
        font-size: 18px;
        text-align: center;
      }

      .desc {
        padding-top: 6px;
        color: #999999;
      }

      .bg-img {
        height: 100px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 78px;
          height: 78px;
        }
      }
    }
  }

  .menu-tab {
    display: flex;
    justify-content: space-around; // 平均分布
    justify-content: center;
    padding-bottom: 8px;

    .button-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 16px;
      margin-bottom: 18px;

      .name {
        padding-top: 3px;
        font-size: 12px;
        color: #666666;
      }

      .btn {
        padding-left: 12px;
        padding-right: 12px;
        height: 36px;
        border-radius: 18px;

        .icon {
          display: flex;
          padding-right: 6px;
          align-items: center;
          justify-content: center;

          image {
            height: 14px;
            width: 14px;
          }
        }
      }
    }
  }
}


/* 为你推荐 */
.recommend-wrap {
  margin-top: 16px;
  background: #fff;
  border-radius: 8px;

  .recommend-nav {
    display: flex;
    margin-left: 12px;
    padding-top: 8px;
    padding-bottom: 4px;
    align-items: center;

    .icon {
      padding-right: 4px;

      image {
        height: 26px;
        width: 26px;
      }
    }

    .title {
      font-size: 16px;
    }
  }

  /* 门店列表 */
  .store-wrap {
    margin: 12px;
    height: 100px;

    .store-list {
      margin-top: 16px;

      .store-content {
        display: flex;

        .store-img {
          width: 30%;

          image {
            width: 100%;
            height: 78px;
            border-radius: 6px;
          }
        }

        .h-store-content {
          width: 70%;
          padding-left: 8px;
          padding-top: 4px;

          .title {
            font-size: 18px;
            font-family: "黑体", sans-serif;
          }

          .adress {
            font-size: 14px;
            color: #666;
          }

          .price {
            color: #666;
            width: 60%;
            font-size: 14px;
            line-height: 22px;

            .red {
              color: red;
              font-size: 16px;
            }
          }

          .desc {
            display: flex;
            padding-top: 3px;

            .price {
              width: 60%;
              font-size: 14px;
              line-height: 22px;
            }

            .order-btn {
              width: 100%;

              .btn {
                background: #FFE05C;
                text-align: center;
                border-radius: 14px;
                height: 26px;
                line-height: 26px;
                color: #333;
                font-size: 12px;
              }
            }
          }
        }
      }

    }
  }
}

/* 底部 */
.footer {
  margin-top: 30px;
  height: 60px;
  font-size: 12px;
  text-align: center;
  color: #666;
  margin-bottom: 40px;
}

.tabBarView {
  position: fixed;
  bottom: 0;
}

</style>