499 lines
13 KiB
Vue
499 lines
13 KiB
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>
|