Skip to content

G
groupPurchase-miniapp
Commit da952626 authored by 石建新（贵阳日报）'s avatar 石建新（贵阳日报）
Browse files
Options

店铺详情

parent 9882fcc3
Show whitespace changes
Inline Side-by-side
Showing with 512 additions and 3 deletions
src/App.vue
View file @ da952626
......@@ -11,4 +11,13 @@ onHide(() => {
console.log('App Hide');
});
</script>
<style></style>
<style>
.multi-line {
width: 200px; /* 设置宽度 */
overflow: hidden; /* 溢出隐藏 */
display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 垂直排列子元素 */
-webkit-line-clamp: 1; /* 显示的行数 */
text-overflow: ellipsis; /* 溢出显示省略号 */
}
</style>
src/assets/iconfont/iconfont.css 0 → 100644
View file @ da952626
@font-face {
font-family: "iconfont"; /* Project id 4633414 */
src: url('//at.alicdn.com/t/c/font_4633414_aiuhmuh8flr.woff2?t=1721909840284') format('woff2'),
url('//at.alicdn.com/t/c/font_4633414_aiuhmuh8flr.woff?t=1721909840284') format('woff'),
url('//at.alicdn.com/t/c/font_4633414_aiuhmuh8flr.ttf?t=1721909840284') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before {
content: "\e606";
}
.icon-pinglun:before {
content: "\e618";
}
.icon-aixin:before {
content: "\e622";
}
\ No newline at end of file
src/main.ts
View file @ da952626
import { createSSRApp } from 'vue';
import App from './App.vue';
import store from './store';
import '@/assets/iconfont/iconfont.css'; // 引入自定义图标样式文件
export function createApp() {
const app = createSSRApp(App);
......
src/pages/shop/shop.vue
View file @ da952626
......@@ -14,6 +14,7 @@
></wd-swiper>
</view>
<view class="content">
<!-- 店铺信息 -->
<view class="shop-info">
<view class="shop-info-top">
<view class="shop-info-detail">
......@@ -66,7 +67,127 @@
</view>
</view>
</view>
<view class="subsidy-content"></view>
<!-- 店铺信息-end -->
<view class="shop-info-box"></view>
<!-- 补贴 -->
<view class="subsidy-content">
<view class="subsidy">
<image src="@/static/shop/subsidy.png" />
<text>立减10元</text>
</view>
<view class="more">
<text>更多</text>
<wd-icon name="arrow-right" size="24rpx"></wd-icon>
</view>
</view>
<!-- 补贴-end -->
<!-- 商品下单列表 -->
<view class="goods-list">
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view :id="i" class="scroll-view-item_H" v-for="i in 10" :key="i">
<view class="item-box">
<image src="@/static/shop/ice.png"></image>
<text class="goods-name">这是杯冷饮</text>
<text class="goods-price">￥15</text>
</view>
</view>
</scroll-view>
<wd-button block round custom-class="my-button">
<text>立即下单 到店秒提</text>
（共45个商品）
</wd-button>
</view>
<!-- 商品下单列表-end -->
<!-- 团购优惠-start -->
<view class="group-buying-discounts">
<view class="title">
<view class="icon">团</view>
<text>团购优惠</text>
</view>
<view class="group-buying-list">
<view class="group-buying-item" v-for="i in 3" :key="i">
<image class="goods-picture" src="@/static/shop/ice.png"></image>
<view class="goods-info-detail">
<text class="goods-title multi-line">双人田蛙尝鲜餐</text>
<text class="yh-fl multi-line">蔬菜免费，米饭免费</text>
<text class="yh-time multi-line">周一至周日 11:00-23:00 可用</text>
<view class="tag-list">
<view class="tag">过期退</view>
<view class="tag">随时退</view>
</view>
<view class="price">
<text class="num0">到手</text>
<text class="num">￥88</text>
<text class="num1">￥128</text>
</view>
</view>
<view class="pay">
<text class="sold-shares">已售36份</text>
<view class="my-button-qg">抢购</view>
</view>
</view>
</view>
</view>
<!-- 团购优惠-end -->
<!-- 用户评价 -->
<view class="user-reviews">
<view class="useer-reviews-title">
<text class="user-pj">用户评价</text>
<image class="user-icon" src="@/static/shop/edit.png"></image>
</view>
<!-- 评价列表 -->
<view class="reviews-list">
<view class="reviews-item" v-for="i in 2" :key="i">
<view class="user-info-box">
<view class="u-info-detail">
<!-- 头像 -->
<image src="@/static/shop/ice.png" class="user-tx"></image>
<view class="u-name">
<text>多多团购真好用</text>
<view class="u-pf">
<text>5分</text>
<wd-rate
color="#fff"
readonly
v-model="value"
size="18rpx"
space="8rpx"
:active-color="['#FA5151']"
/>
</view>
</view>
</view>
<text class="u-time">2024-07-14发表 南明区中环广场</text>
</view>
<view class="user-evaluate">
不得不说，味道非常好，很多配菜，份量很足，非常适合几个人聚 一起吃。
</view>
<view class="evaluate-img">
<image v-for="i in 2" :key="i" src="@/static/shop/ice.png"></image>
</view>
<view class="u-dz-sc-pl">
<text class="liulan">浏览 245</text>
<view class="pl-icon">
<view class="icon">
<i class="iconfont icon-aixin" />
<text>抢首赞</text>
</view>
<view class="icon">
<i class="iconfont icon-shoucang" />
<text>收藏</text>
</view>
<view class="icon">
<i class="iconfont icon-pinglun" />
<text>收藏</text>
</view>
</view>
</view>
</view>
<view class="u-more">查看全部5条评价</view>
</view>
<!-- 评价列表-end -->
</view>
<!-- 用户评价-end -->
</view>
</view>
</template>
......@@ -74,6 +195,7 @@
<script setup>
import navBar from '@/Components/navBar/navBar.vue';
const current = ref(0);
const old = reactive({ scrollTop: 0 });
const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
......@@ -86,6 +208,10 @@ const handleClick = (e) => {
const onChange = (e) => {
console.log(e);
};
function scroll(e) {
console.log(e);
old.scrollTop = e.detail.scrollTop;
}
</script>
<style lang="scss">
......@@ -108,11 +234,15 @@ page {
.content {
width: 750rpx;
position: relative;
// 商家信息
.shop-info-box {
height: 146 * 2rpx;
}
.shop-info {
width: 750rpx;
background-color: #fdfdfd;
position: relative;
position: absolute;
top: -80rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
display: flex;
......@@ -230,12 +360,353 @@ page {
}
}
}
// 商家信息-end
// 补贴
.subsidy-content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 10rpx 40rpx 14rpx 12rpx;
background: #ffefee;
margin-top: 16rpx;
box-shadow: 0rpx 2 * 2rpx 10 * 2rpx 0 * 2rpx rgba(226, 3, 3, 0.08);
.subsidy {
width: 144 * 2rpx;
height: 40 * 2rpx;
position: relative;
image {
position: absolute;
width: 144 * 2rpx;
height: 54 * 2rpx;
top: calc(50% - 54rpx);
left: 0;
}
text {
right: 14rpx;
position: absolute;
font-size: 11 * 2rpx;
line-height: 54 * 2rpx;
height: 54 * 2rpx;
top: calc(50% - 54rpx);
color: #fa5151;
}
}
.more {
font-size: 10 * 2rpx;
color: #abaaaa;
display: flex;
align-items: center;
}
}
// 补贴-end
// 商品下单列表
.goods-list {
width: 355 * 2rpx;
height: 200 * 2rpx;
border-radius: 8 * 2rpx;
background: #ffffff;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 20rpx;
margin: 0 auto;
margin-top: 22rpx;
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item_H {
display: inline-block;
margin-right: 4rpx;
.item-box {
display: flex;
flex-direction: column;
justify-content: center;
image {
width: 80 * 2rpx;
height: 88 * 2rpx;
border-radius: 5 * 2rpx;
}
.goods-name {
font-size: 11 * 2rpx;
color: #3d3d3d;
margin-top: 10rpx;
}
.goods-price {
color: #ff3e32;
font-weight: bold;
font-size: 12px;
margin-top: 20rpx;
}
}
}
.my-button {
width: 315 * 2rpx;
height: 32 * 2rpx;
margin-top: 20rpx;
background: linear-gradient(270deg, #ff3e32 0%, #ff7332 100%);
text {
font-size: 24rpx;
font-weight: 700;
}
}
}
// 商品下单列表-end
// 团购优惠
.group-buying-discounts {
width: 100%;
border-radius: 16rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 20rpx 40rpx;
background: #fdfdfd;
margin-top: 20rpx;
.title {
display: flex;
align-items: center;
.icon {
width: 20 * 2rpx;
height: 20 * 2rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3 * 2rpx 3 * 2rpx 0 * 2rpx 3 * 2rpx;
background: #fa5151;
font-size: 10 * 2rpx;
color: #fff;
font-weight: bold;
}
text {
position: absolute;
font-size: 13 * 2rpx;
font-weight: bold;
color: #3d3d3d;
margin-left: 52rpx;
}
}
.group-buying-list {
width: 100%;
margin-top: 40rpx;
.group-buying-item {
border-bottom: 2rpx solid #efefef;
display: flex;
align-items: center;
padding-bottom: 40rpx;
width: 100%;
image {
width: 60 * 2rpx;
height: 60 * 2rpx;
border-radius: 8 * 2rpx;
flex-shrink: 0;
}
.goods-info-detail {
box-sizing: border-box;
display: flex;
margin-left: 20rpx;
flex-direction: column;
.goods-title {
font-size: 12 * 2rpx;
font-weight: bold;
color: #3d3d3d;
margin-top: 8rpx;
}
.yh-fl,
.yh-time {
font-size: 8 * 2rpx;
margin-top: 8rpx;
color: #abaaaa;
}
.tag-list {
width: 280rpx;
display: flex;
flex-wrap: wrap;
margin: 12rpx 0;
.tag {
background: #fcdbdb;
padding: 2rpx 8rpx;
box-sizing: border-box;
font-size: 8 * 2rpx;
color: #fa5151;
margin-right: 8rpx;
}
}
.price {
.num0 {
font-size: 10 * 2rpx;
font-weight: 400;
color: #fa5151;
}
.num {
color: #fa5151;
font-weight: 700;
font-size: 14 * 2rpx;
}
.num1 {
line-height: 10 * 2rpx;
color: #abaaaa;
text-decoration: line-through;
}
}
}
.pay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
.sold-shares {
font-size: 10 * 2rpx;
color: #abaaaa;
}
.my-button-qg {
background: #fa5151;
margin-top: 8rpx;
width: 52 * 2rpx;
height: 24 * 2rpx;
border-radius: 12 * 2rpx;
text-align: center;
line-height: 24 * 2rpx;
position: absolute;
font-size: 12 * 2rpx;
color: #fff;
}
}
}
.group-buying-item:last-child {
border: none;
}
}
}
// 团购优惠-end
// 用户评价-start
.user-reviews {
width: 100%;
background-color: #fff;
box-sizing: border-box;
padding: 11 * 2rpx;
margin-top: 10rpx;
.useer-reviews-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.user-pj {
font-size: 14 * 2rpx;
color: #3d3d3d;
font-weight: bold;
}
.user-icon {
width: 36rpx;
height: 36rpx;
}
}
.reviews-list {
width: 100%;
display: flex;
flex-direction: column;
.reviews-item {
display: flex;
flex-direction: column;
padding: 40rpx 0;
border-bottom: 2rpx solid #efefef;
.user-info-box {
display: flex;
flex-direction: column;
.u-time {
font-size: 9 * 2rpx;
color: #abaaaa;
margin-top: 20rpx;
}
.u-info-detail {
display: flex;
align-content: center;
.u-name {
margin-left: 20rpx;
.u-pf {
display: flex;
align-items: center;
text {
color: #fa5151;
font-weight: 700;
font-size: 10 * 2rpx;
margin-right: 10rpx;
}
}
}
.user-tx {
width: 32px;
height: 32px;
border-radius: 50%;
}
text {
font-size: 12 * 2rpx;
color: #3d3d3d;
}
}
}
.user-evaluate {
font-size: 12 * 2rpx;
font-weight: normal;
color: #3d3d3d;
margin-top: 20rpx;
}
.evaluate-img {
display: flex;
flex-wrap: wrap;
image {
width: 114 * 2rpx;
height: 114 * 2rpx;
border-radius: 8 * 2rpx;
margin-left: 10rpx;
margin-top: 10rpx;
}
image:nth-child(1) {
margin-left: 0;
}
}
.u-dz-sc-pl {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40rpx;
.liulan {
font-size: 9 * 2rpx;
color: #abaaaa;
}
}
.pl-icon {
display: flex;
justify-content: space-between;
align-items: center;
.icon {
display: flex;
align-items: center;
margin-right: 20rpx;
.iconfont {
color: #767676;
margin-right: 14rpx;
}
text {
font-size: 18rpx;
color: #767676;
}
}
}
}
.u-more {
font-size: 9 * 2rpx;
color: #767676;
box-sizing: border-box;
text-align: center;
padding: 20rpx 0;
}
}
}
// 用户评价-end
}
}
</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