Skip to content

G
groupPurchase-miniapp
Commit 3ed46f29 authored by 陈宗胤（贵阳日报）'s avatar 陈宗胤（贵阳日报）
Browse files
Options

团购首页

parent e020eb5c
Show whitespace changes
Inline Side-by-side
Showing with 649 additions and 5 deletions
src/Components/index/FoodDetails.vue 0 → 100644
View file @ 3ed46f29
<template>
<view class="card" v-for="(item, index) in cardData" :key="index">
<image class="img" src="../../static/index/test1.png" mode="widthFix" />
<view class="right">
<text class="text">王将速食超市（可店内用餐）</text>
<view class="twoBxo">
<text class="one-text">5.0推荐</text>
<text class="two-text">￥30/人</text>
<text class="three-text">销量1265</text>
<text class="four-text">1.2km</text>
</view>
<view class="threeBox">
<image class="img2" src="../../static/index/test2.png" mode="widthFix" />
<text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
</view>
<view class="labelBox">
<view>卤味爱好者最佳选择</view>
<view>免费wifi</view>
<view>服务态度很好</view>
</view>
<view class="groupPurchasePrice">
<image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
<text class="one-text">￥19</text>
<view class="two-text">7.8折</view>
<text class="three-text">￥29.8</text>
<text class="four-text">深夜加班续命套餐</text>
</view>
<view class="groupPurchasePrice">
<image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
<text class="one-text">￥39</text>
<view class="two-text">8.8折</view>
<text class="three-text">￥59.8</text>
<text class="four-text">游戏通宵补血套餐</text>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
cardData: {
type: Array,
},
});
</script>
<style lang="scss" scoped>
.card {
width: 710rpx;
height: 316rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #fdfdfd;
margin: 0 auto;
margin-bottom: 2rpx;
display: flex;
padding: 22rpx 0;
padding-left: 20rpx;
box-sizing: border-box;
.img {
width: 144rpx;
}
.right {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.text {
font-size: 28rpx;
font-weight: bold;
color: #3d3d3d;
}
.twoBxo {
display: flex;
align-items: center;
.one-text {
font-size: 22rpx;
font-weight: bold;
color: #ff5353;
}
.two-text {
font-size: 20rpx;
color: #abaaaa;
font-weight: 500;
margin-left: 20rpx;
}
.three-text {
font-size: 20rpx;
color: #abaaaa;
font-weight: 500;
margin-left: 8rpx;
}
.four-text {
font-size: 20rpx;
color: #908f8f;
font-weight: 500;
margin-left: 182rpx;
}
}
.threeBox {
display: flex;
align-items: center;
.img2 {
width: 40rpx;
}
.one-text {
font-size: 22rpx;
color: #3d3d3d;
font-weight: 500;
margin-left: 8rpx;
}
}
.labelBox {
display: flex;
align-items: center;
view {
margin-right: 8rpx;
display: inline-block;
height: 36rpx;
padding: 0 8rpx;
line-height: 36rpx;
font-size: 18rpx;
color: #abaaaa;
background-color: rgba(243, 243, 243, 1);
}
}
.groupPurchasePrice {
display: flex;
align-items: center;
.img {
width: 32rpx;
}
.one-text {
font-size: 28rpx;
font-weight: 500;
color: #fa5151;
}
.two-text {
margin-left: 4rpx;
display: inline-block;
height: 24rpx;
padding: 0 8rpx;
line-height: 24rpx;
font-size: 18rpx;
color: #fa5151;
background: #fcdbdb;
}
.three-text {
margin-left: 4rpx;
font-size: 20rpx;
color: #abaaaa;
font-weight: 300;
text-decoration: line-through;
}
.four-text {
margin-left: 4rpx;
font-size: 22rpx;
color: #3d3d3d;
}
}
}
}
</style>
src/Components/index/ShopCard.vue 0 → 100644
View file @ 3ed46f29
<template>
<view class="card">
<view class="head">
<view class="containerBox">
<image class="img" src="../../static/index/test1.png" mode="widthFix" />
<view class="right">
<text class="text">老门框卤煮总店（百年老店）</text>
<view class="twoBxo">
<text class="one-text">5.0推荐</text>
<text class="two-text">￥30/人</text>
<text class="three-text">销量1265</text>
<text class="four-text">1.2km</text>
</view>
<view class="threeBox">
<image class="img2" src="../../static/index/test2.png" mode="widthFix" />
<text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
</view>
<view class="labelBox">
<view>卤味爱好者最佳选择</view>
<view>免费wifi</view>
<view>服务态度很好</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {} from 'vue';
</script>
<style lang="scss" scoped>
.card {
width: 710rpx;
height: 536rpx;
border-radius: 16rpx;
background: #fdfdfd;
margin: 0 auto;
margin-top: 10rpx;
.head {
width: 100%;
height: 200rpx;
background: url('../../static/index/test3.png') no-repeat;
background-size: 100% 100%;
position: relative;
.containerBox {
display: flex;
position: absolute;
bottom: -35rpx;
left: 20rpx;
.img {
width: 144rpx;
}
.right {
margin-left: 20rpx;
display: flex;
flex-direction: column;
.text {
font-size: 28rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
.twoBxo {
display: flex;
align-items: center;
margin-top: 10rpx;
.one-text {
font-size: 22rpx;
font-weight: bold;
color: #fa5151;
}
.two-text {
font-size: 20rpx;
color: #ffffff;
font-weight: 500;
margin-left: 20rpx;
}
.three-text {
font-size: 20rpx;
color: #ffffff;
font-weight: 500;
margin-left: 8rpx;
}
.four-text {
font-size: 20rpx;
color: #ffffff;
font-weight: 500;
margin-left: 182rpx;
}
}
.threeBox {
display: flex;
align-items: center;
margin-top: 10rpx;
.img2 {
width: 40rpx;
}
.one-text {
font-size: 22rpx;
color: #ffffff;
font-weight: 500;
margin-left: 8rpx;
}
}
.labelBox {
margin-top: 10rpx;
display: flex;
align-items: center;
view {
margin-right: 8rpx;
display: inline-block;
height: 36rpx;
padding: 0 8rpx;
line-height: 36rpx;
font-size: 18rpx;
color: #767676;
background: linear-gradient(90deg, #fcdbdb 0%, rgba(255, 255, 255, 0) 98%);
}
}
}
}
}
}
</style>
src/components/index/Search.vue
View file @ 3ed46f29
......@@ -3,14 +3,14 @@
<image
@tap="test2"
class="arrow"
src="../../static/arrow.png"
src="../../static/index/arrow.png"
mode="aspectFit|aspectFill|widthFix"
/>
<slot></slot>
<view class="searchBox">
<image
class="magnifyingGlass"
src="../../static/magnifyingGlass.png"
src="../../static/index/magnifyingGlass.png"
mode="aspectFit|aspectFill|widthFix"
/>
<input type="text" :value="test" class="text" />
......@@ -61,6 +61,7 @@ function onHandleClick() {
display: flex;
align-items: center;
padding-left: 20rpx;
box-sizing: border-box;
.arrow {
width: 15rpx;
height: 24rpx;
......
src/pages/index/index.vue
View file @ 3ed46f29
<template>
<view class="container">
<view class="top">
<!-- 搜索 -->
<Search>
<image class="food" src="../../static/food.png" mode="aspectFit|aspectFill|widthFix" />
<image class="food" src="../../static/index/food.png" mode="widthFix" />
</Search>
<view></view>
<!-- 类别选择 -->
<view class="classification">
<view class="classification-top">
<view class="choice" v-for="(item, index) in classificationT" :key="index">
<image class="imgs" :src="'../../static/index/' + item.img + '.png'" mode="widthFix" />
<text class="introduce">{{ item.text }}</text>
</view>
</view>
<view class="classification-bottom">
<view class="choice" v-for="(item, index) in classificationB" :key="index">
<image class="imgs" :src="'../../static/index/' + item.img + '.png'" mode="widthFix" />
<text class="introduce">{{ item.text }}</text>
</view>
</view>
</view>
</view>
<!-- 红包 -->
<view class="redEnvelope">
<view class="title">今日福利</view>
<view class="box-red">
<view class="redBagBox"></view>
<view class="redBagBox"></view>
<view class="redBagBox"></view>
<view class="redBagBox"></view>
</view>
<image class="discount" src="../../static/index/discount.png" mode="widthFix" />
</view>
<!-- 贵阳老味道 -->
<view class="guiyang"></view>
<!-- 附件美食 -->
<view class="nearby">
<view class="nearby-top">
<view class="left">
<image class="tou" src="../../static/index/eat.png" mode="widthFix" />
<text class="">附近人气美食</text>
</view>
<view class="right">
<text class="">立即查看</text>
<image class="jian" src="../../static/index/rightJ.png" mode="widthFix" />
</view>
</view>
<view class="nearby-bootom">
<view class="contentBox" v-for="(item, index) in 3" :key="index">
<image class="img" src="../../static/index/eatFood.png" mode="widthFix" />
<text class="one">颜悦养生汤锅...</text>
<view class="price">
<text class="two">4.2推荐</text>
<text class="three">￥36/人</text>
</view>
<text class="four">36分钟前有人购买</text>
</view>
</view>
</view>
<!-- 推荐 -->
<view class="recommend">
<view class="tabs">
<text @tap="choice(0)" class="text" :class="light === 0 ? 'light' : ''">推荐</text>
<text @tap="choice(1)" class="text" :class="light === 1 ? 'light' : ''">特色小吃</text>
<text @tap="choice(2)" class="text" :class="light === 2 ? 'light' : ''">贵阳老字号</text>
<text @tap="choice(3)" class="text" :class="light === 3 ? 'light' : ''">火锅</text>
<text @tap="choice(4)" class="text" :class="light === 4 ? 'light' : ''">奶茶</text>
</view>
<view class="recommend-bottom">
<view class="box">
<text class="text">位置距离</text>
<wd-icon name="fill-arrow-down" size="22rpx" class="icon"></wd-icon>
</view>
<view class="box">
<text class="text2">排序筛选</text>
<wd-icon name="fill-arrow-down" size="22rpx" class="icon2"></wd-icon>
</view>
</view>
</view>
<!-- 美食卡片 -->
<FoodDetails :cardData="cardData" />
<!-- 店铺卡片推荐 -->
<ShopCard />
<!-- 美食卡片 -->
<FoodDetails :cardData="cardData" />
</view>
</template>
<script setup>
import { onMounted } from 'vue';
import { onMounted, reactive, ref } from 'vue';
import { useCountStore } from '@/store';
import Search from '../../components/index/Search.vue';
import FoodDetails from '../../components/index/FoodDetails.vue';
import ShopCard from '../../components/index/ShopCard.vue';
const title = ref('小程序平台');
const { countInfo, addCount } = useCountStore();
onMounted(() => {});
const light = ref(0);
const classificationT = reactive([
{ img: 'hotPot', text: '火锅' },
{ img: 'barbecue', text: '烧烤烤肉' },
{ img: 'stirFriedDishes', text: '地方菜系' },
{ img: 'hamburg', text: '小吃快餐' },
]);
const classificationB = reactive([
{ img: 'seafood', text: '鱼鲜海鲜' },
{ img: 'foreignLand', text: '异域风味' },
{ img: 'selfHelp', text: '自助餐' },
{ img: 'drink', text: '饮品店' },
{ img: 'bread', text: '面包蛋糕' },
]);
const cardData = reactive([
{
text: '测试',
},
{
text: '测试',
},
{
text: '测试',
},
]);
const choice = (index) => {
light.value = index;
};
function toUIComponentsDoc() {
window.open('https://wot-design-uni.netlify.app/component/button.html');
}
......@@ -28,6 +136,9 @@ function onHandleClick() {
</script>
<style lang="scss">
page {
background: #f3f3f3;
}
.container {
.top {
width: 100%;
......@@ -40,6 +151,250 @@ function onHandleClick() {
height: 45rpx;
margin-left: 25rpx;
}
.classification {
width: 710rpx;
height: 304rpx;
background: rgba(255, 255, 255, 0.94);
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin: 0 auto;
margin-top: 10rpx;
overflow: hidden;
box-sizing: border-box;
.classification-top {
display: flex;
justify-content: space-evenly;
margin-top: 32rpx;
.choice {
display: flex;
flex-direction: column;
align-items: center;
font-size: 24rpx;
color: #3d3d3d;
font-weight: 500;
font-family:
Source Han Sans,
Source Han Sans;
.imgs {
width: 88rpx;
}
}
}
.classification-bottom {
display: flex;
justify-content: space-evenly;
margin-top: 34rpx;
.choice {
display: flex;
flex-direction: column;
align-items: center;
font-size: 24rpx;
color: #3d3d3d;
font-weight: 500;
justify-content: flex-end;
font-family:
Source Han Sans,
Source Han Sans;
.imgs {
width: 68rpx;
margin-bottom: 8rpx;
}
}
}
}
}
.redEnvelope {
width: 710rpx;
height: 172rpx;
background: #ffffff;
border-radius: 16rpx 16rpx 16rpx 16rpx;
box-sizing: border-box;
margin: 0 auto;
margin-top: 12rpx;
overflow: hidden;
position: relative;
.title {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: bold;
font-size: 28rpx;
color: #3d3d3d;
line-height: 28rpx;
text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.36);
text-transform: none;
margin: 10rpx 0 0 20rpx;
}
.box-red {
padding: 10rpx 0 0 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.redBagBox {
margin-right: 8rpx;
width: 124rpx;
height: 104rpx;
background: url('../../static/index/redBag.png') no-repeat;
background-size: 100% 100%;
}
}
.discount {
position: absolute;
right: 0;
top: 0;
width: 208rpx;
z-index: 99;
}
}
.guiyang {
width: 710rpx;
height: 136rpx;
margin: 0 auto;
margin-top: 10rpx;
background: url('../../static/index/guiyang.png') no-repeat;
background-size: 100% 100%;
}
.nearby {
width: 710rpx;
height: 380rpx;
border-radius: 16rpx;
background: #ffffff;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
padding-top: 20rpx;
.nearby-top {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 20rpx;
.left {
display: flex;
align-items: center;
font-size: 28rpx;
font-family:
Source Han Sans,
Source Han Sans;
font-weight: 500;
.tou {
width: 24rpx;
margin-right: 12rpx;
}
}
.right {
display: flex;
align-items: center;
font-size: 20rpx;
color: #abaaaa;
font-family:
Source Han Sans,
Source Han Sans;
font-weight: 400;
.jian {
width: 20rpx;
margin-left: 8rpx;
}
}
}
.nearby-bootom {
margin-top: 20rpx;
display: flex;
padding: 0 20rpx;
box-sizing: border-box;
overflow: hidden;
justify-content: space-between;
.contentBox {
width: 220rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
.img {
width: 220rpx;
}
.one {
font-size: 28rpx;
font-weight: bold;
color: #3d3d3d;
}
.price {
.two {
font-size: 24rpx;
color: #fa5151;
font-weight: bold;
}
.three {
font-size: 20rpx;
color: #abaaaa;
margin-left: 8rpx;
}
}
.four {
font-size: 20rpx;
color: #abaaaa;
}
}
}
}
.recommend {
width: 710rpx;
height: 140rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
background: #ffffff;
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
margin: 0 auto;
margin-top: 10rpx;
.tabs {
padding-top: 20rpx;
.text {
font-size: 24rpx;
color: #d8d8d8;
margin-left: 40rpx;
font-weight: bold;
}
.light {
background: linear-gradient(241deg, #ff8f1f -7%, #fa5151 93%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
position: relative;
&::after {
content: '';
width: 20rpx;
height: 12rpx;
background: url('../../static/index/subscript.png') no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: -16rpx;
left: 50%;
transform: translate(-50%);
}
}
}
.recommend-bottom {
display: flex;
padding: 0 40rpx;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
margin-top: 40rpx;
.box {
display: flex;
align-items: center;
.text {
font-size: 24rpx;
color: #3d3d3d;
}
.text2 {
font-size: 24rpx;
color: #908f8f;
}
.icon {
// transform: rotate(180deg);
}
.icon2 {
transform: rotate(180deg);
color: #908f8f;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment