wx/pages/index/index.vue

<template>
  <view class="box">
    <!-- 门店授权 -->
    <view class="location">
      <view class="location-left">
        <view><uni-icons type="location" size="20"></uni-icons></view>
        <view>暂未添加门店或定位未授权</view>
      </view>
      <view @click="location" class="location-right">
        <view>切换</view>
        <view><uni-icons type="right" size="20"></uni-icons></view>
      </view>
    </view>
    <!-- 轮播图 -->
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item>
          <view class="swiper-item uni-bg-red">A</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-green">B</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-blue">C</view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 图片 -->
    <view class="img">
      <image class="image" src="../../static/logo.png" mode=""></image>
    </view>
    <!-- 优惠劵 -->
    <view class="discount-coupon">
      <view class="discount-coupon-one">
        <view class="discount-coupon-one-left">
          <image src="../../static/logo.png" style="width: 1.4rem; height: 1.4rem"></image>
          <view style="margin-left: 0.5rem; font-weight: 700">优惠劵</view>
        </view>
        <view @click="discount" class="discount-coupon-one-right">
          <view style="font-size: 0.8rem; color: #7e828b">查看更多</view>
          <view style="margin-right: 0.8rem"><uni-icons type="right" size="18"></uni-icons></view>
        </view>
      </view>

      <view class="discount-coupon-tow">
        <!-- 暂无数据 -->
        <view v-if="data" class="discount-coupon-tow-notAvailable">暂无数据</view>
        <!-- 优惠劵 -->
        <view v-else class="discountsImg">
          <img src="https://i.postimg.cc/Vkf063Xd/image.jpg" style="width: 100%; height: 7rem; border-radius: 1rem 0 0 1rem" />
          <view class="img-box">
            <view class="img-box-one">测试</view>
            <view class="img-box-tow">满80.00元可用</view>
            <view class="img-box-three">有效期2024.05.29-2024.06.30</view>
          </view>
          <view class="img-button">
            <view class="img-button-one">￥50.00</view>
            <view class="img-button-tow">领取</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 水票 -->
    <view class="water-coupon">
      <view class="water-coupon-one">
        <view class="water-coupon-one-left">
          <image src="../../static/logo.png" style="width: 1.4rem; height: 1.4rem"></image>
          <view style="margin-left: 0.5rem; font-weight: 700">推荐水票</view>
        </view>
        <view @click="water" class="water-coupon-one-right">
          <view style="font-size: 0.8rem; color: #7e828b">查看更多</view>
          <view style="margin-right: 0.8rem"><uni-icons type="right" size="18"></uni-icons></view>
        </view>
      </view>
      <!-- 内容 -->
      <view class="water-coupon-tow">
        <!-- 暂无数据 -->
        <view v-if="data" class="water-coupon-tow-notAvailable">暂无数据</view>
        <!-- 水票 -->
        <view v-else class="water">
          <view class="water-left">
            <view class="water-left-left">
              <image class="image" src="../../static/logo.png"></image>
            </view>
            <view class="water-left-right">
              <view class="water-left-right-up">测试</view>
              <view class="water-left-right-centre">
                <text style="color: #8e8aac; font-size: 0.9rem">活动</text>
                <text style="color: #ff6600; margin-left: 0.5rem; font-size: 0.9rem">测试</text>
              </view>
              <view class="water-left-right-button">
                <text>￥</text>
                <text style="font-size: 1.5rem">4.00</text>
                <text style="color: #8e8aac">/</text>
                <text style="color: #8e8aac">桶</text>
              </view>
            </view>
          </view>
          <view class="water-right">
            <view class="water-right-buttom">购买</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品 -->
    <view class="commodity">
      <view class="commodity-one">
        <view class="commodity-one-left">
          <image src="../../static/logo.png" style="width: 1.4rem; height: 1.4rem"></image>
          <view style="margin-left: 0.5rem; font-weight: 700">推荐商品</view>
        </view>
        <view @click="commodity" class="commodity-one-right">
          <view style="font-size: 0.8rem; color: #7e828b">查看更多</view>
          <view style="margin-right: 0.8rem"><uni-icons type="right" size="18"></uni-icons></view>
        </view>
      </view>
      <view class="commodity-tow">
        <!--暂无数据  -->
        <view v-if="data" class="commodity-tow-notAvailable">暂无数据</view>
        <!-- 商品 -->
        <view v-else class="commodity-three">
          <view class="commodity-three-left">
            <view class="commodity-three-left-left">
              <image class="image" src="../../static/logo.png"></image>
            </view>
            <view class="commodity-three-left-right">
              <view class="commodity-three-left-right-up">测试</view>
              <view class="commodity-three-left-right-button">
                <text>￥</text>
                <text style="font-size: 1.5rem">4.00</text>
                <text style="color: #8e8aac">/</text>
                <text style="color: #8e8aac">桶</text>
              </view>
            </view>
          </view>
          <view class="commodity-three-right">
            <view class="commodity-three-right-buttom">购买</view>
          </view>
        </view>
      </view>
    </view>
    <shoppingIcon />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import shoppingIcon from '@/components/shoppingIcon.vue';
const data = ref(false);
// 轮播图
const background = ref(['color1', 'color2', 'color3']);
// 指点器
const indicatorDots = ref(true);
//是否自动切换
const autoplay = ref(true);
const interval = ref(2000);
const duration = ref(500);

function changeIndicatorDots() {
  indicatorDots.value = !indicatorDots.value;
}
function changeAutoplay() {
  autoplay.value = !autoplay.value;
}
function intervalChange(e) {
  interval.value = parseInt(e.target.value, 10);
}
function durationChange(e) {
  duration.value = parseInt(e.target.value, 10);
}
//优惠劵
const discount = () => {
  uni.navigateTo({
    url: '/pages/index/components/coupon'
  });
};
//水票
const water = () => {
  uni.switchTab({
    url: '/pages/water-coupon/index'
  });
};
//商城
const commodity = () => {
  uni.switchTab({
    url: '/pages/shopp/index'
  });
};
//切换门店
const location = () => {
  uni.navigateTo({
    url: '/pages/index/components/switchStores'
  });
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
// 优惠劵
.discount-coupon {
  width: 92%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.2rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  display: flow-root;
  .discount-coupon-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .discount-coupon-one-left {
      display: flex;
      align-items: center;
      margin-left: 1rem;
      margin-top: 1rem;
    }
    .discount-coupon-one-right {
      display: flex;
      align-items: center;
      margin-left: 1rem;
      margin-top: 1rem;
    }
  }
  .discount-coupon-tow {
    .discount-coupon-tow-notAvailable {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #7e828b;
      height: 6rem;
    }
    .discountsImg {
      display: flow-root;
      position: relative;
      padding: 0.5rem 0rem;
      .img-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 15rem;
        position: absolute;
        top: 15%;
        left: -4%;
        .img-box-one {
          font-size: 1.2rem;
          color: #fff;
        }
        .img-box-tow {
          background-color: #fff;
          margin-top: 0.2rem;
          padding: 0.2rem 0.8rem;
          border-radius: 0.5rem;
          color: red;
        }
        .img-box-three {
          margin-top: 0.8rem;
          font-size: 0.9rem;
          color: #fff;
        }
      }
      .img-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 3%;
        right: 3%;
        .img-button-one {
          margin-top: 1rem;
          font-size: 1.5rem;
          color: #fff;
        }
        .img-button-tow {
          margin-top: 1.2rem;
          background-color: #ffdecc;
          padding: 0.2rem 1rem;
          font-size: 1.2rem;
          color: red;
          border-radius: 1rem;
        }
      }
    }
  }
}
//水票
.water-coupon {
  width: 92%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.2rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  .water-coupon-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .water-coupon-one-left {
      display: flex;
      align-items: center;
      margin-left: 1rem;
      margin-top: 1rem;
    }
    .water-coupon-one-right {
      display: flex;
      align-items: center;
      margin-left: 1rem;
      margin-top: 1rem;
    }
  }
  .water-coupon-tow {
    .water-coupon-tow-notAvailable {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #7e828b;
      height: 6rem;
    }
    .water {
      width: 83%;
      margin: 0 auto;
      background-color: #fff;
      padding: 1rem;
      border-radius: 0.5rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .water-left {
        display: flex;
        align-items: flex-start;
        .water-left-left {
          .image {
            width: 5rem;
            height: 5rem;
          }
        }
        .water-left-right {
          margin-left: 0.8rem;
          .water-left-right-up {
            font-size: 1.1rem;
            font-weight: 700;
          }
          .water-left-right-centre {
            margin-bottom: 0.5rem;
          }
          .water-left-right-button {
            color: #ff6600;
          }
        }
      }
      .water-right {
        .water-right-buttom {
          padding: 0rem 1rem;
          color: #fff;
          background-color: #00ba26;
          height: 2.2rem;
          line-height: 2.2rem;
          border-radius: 1rem;
        }
      }
    }
  }
}
//商品
.commodity {
  width: 92%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.2rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  .commodity-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .commodity-one-left {
      display: flex;
      align-items: center;
      margin-left: 1rem;
      margin-top: 1rem;
    }
    .commodity-one-right {
      display: flex;
      align-items: center;
      margin-left: 1rem;
      margin-top: 1rem;
    }
  }
  .commodity-tow {
    .commodity-tow-notAvailable {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #7e828b;
      height: 6rem;
    }
    .commodity-three {
      width: 83%;
      margin: 0 auto;
      background-color: #fff;
      padding: 1rem;
      border-radius: 0.5rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .commodity-three-left {
        display: flex;
        align-items: flex-start;
        .commodity-three-left-left {
          .image {
            width: 5rem;
            height: 5rem;
          }
        }
        .commodity-three-left-right {
          margin-left: 0.8rem;
          .water-left-right-up {
            font-size: 1.1rem;
            font-weight: 700;
          }
          .commodity-three-left-right-button {
            margin-top: 2rem;
            color: #ff6600;
          }
        }
      }
      .commodity-three-right {
        .commodity-three-right-buttom {
          padding: 0rem 1rem;
          color: #fff;
          background-color: #00ba26;
          height: 2.2rem;
          line-height: 2.2rem;
          border-radius: 1rem;
        }
      }
    }
  }
}
// 轮播图
.uni-margin-wrap {
  width: 92%;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  .swiper {
    height: 300rpx;
    .swiper-item {
      display: block;
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
    }
    .swiper-list {
      margin-top: 40rpx;
      margin-bottom: 0;
    }
    .uni-common-mt {
      margin-top: 60rpx;
      position: relative;
    }
    .info {
      position: absolute;
      right: 20rpx;
    }
    .uni-padding-wrap {
      width: 550rpx;
      padding: 0 100rpx;
    }
  }
}
// 图片
.img {
  margin: 0 auto;
  width: 92%;
  .image {
    width: 100%;
    height: 10rem;
  }
}
//定位
.location {
  width: 83%;
  margin: 0.5rem auto;
  padding: 0.5rem 0.8rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  .location-left {
    display: flex;
  }
  .location-right {
    display: flex;
  }
}
</style>