Skip to content

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

Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/groupPurchase-miniapp

parents 3ed46f29 e9c56829
Show whitespace changes
Inline Side-by-side
Showing with 934 additions and 6 deletions
src/App.vue
View file @ c4121d05
......@@ -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/Components/navBar/navBar.vue
View file @ c4121d05
......@@ -4,7 +4,7 @@
class="container"
:style="`height: {{containerHeight}}px; marginTop: {{containerMargin}}px;`"
>
containerMargin{{ (containerHeight, containerHeight, containerMargin) }}
<!-- containerMargin{{ (containerHeight, containerHeight, containerMargin) }} -->
<slot></slot>
</view>
</view>
......
src/assets/iconfont/iconfont.css 0 → 100644
View file @ c4121d05
@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 @ c4121d05
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.json
View file @ c4121d05
......@@ -16,6 +16,16 @@
"style": {
"navigationBarTitleText": "店铺首页"
}
}, {
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "订单列表"
}
}, {
"path": "pages/order/detail",
"style": {
"navigationBarTitleText": "订单详情"
}
}
],
"globalStyle": {
......
src/pages/order/components/Header/index.vue 0 → 100644
View file @ c4121d05
<template>
<div class="header">
<div class="headbox">
<wd-icon
class="icon"
name="thin-arrow-left"
color="#333333"
size="18px"
@click="handleBack"
></wd-icon>
<div class="title">{{ props.title }}</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: '',
},
});
const handleBack = () => {
uni.navigateBack();
};
</script>
<style lang="scss" scoped>
.header {
height: 88rpx;
background-color: #ffffff;
position: fixed;
z-index: 999;
width: 100%;
.headbox {
position: relative;
display: flex;
align-items: center;
height: 100%;
width: 100%;
.icon {
padding: 0 20rpx;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36rpx;
font-family: PingFang SC;
color: #333333;
}
}
}
</style>
src/pages/order/components/OrderList/index.vue 0 → 100644
View file @ c4121d05
<template>
<div class="content">
<div class="box">
<div class="header">
<div class="left">
<img src="@/static/order/shop.png" />
<div class="title">宽带融合5G 169套餐</div>
</div>
<span class="status">待消费</span>
</div>
<div class="info">
<img
mode="aspectFill"
src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg"
/>
<div class="info-box">
<div class="text">下单时间：2023-06-27 15:53</div>
<div class="text">预约时间：2023-07-04 10:00-12:00</div>
<div class="text">数量：1</div>
<div class="text">实付：￥169</div>
</div>
</div>
<div class="btn">
<div class="btn-info">删除</div>
<div class="btn-info">查看预约</div>
<div class="btn-error">再来一单</div>
</div>
</div>
</div>
</template>
<script></script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx;
.box {
background-color: #fff;
width: 100%;
border-radius: 16rpx;
padding: 28rpx 18rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: 30rpx;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
gap: 20rpx;
img {
height: 38rpx;
width: 38rpx;
}
.title {
color: #333;
font-size: 32rpx;
font-family: PingFang SC;
}
}
.status {
color: #666;
font-size: 28rpx;
}
}
.info {
display: flex;
gap: 20rpx;
img {
width: 110rpx;
height: 110rpx;
border-radius: 12rpx;
}
.info-box {
display: flex;
flex-direction: column;
gap: 18rpx;
.text {
color: #666;
line-height: 28rpx;
font-size: 28rpx;
font-family: PingFang SC;
}
}
}
.btn {
display: flex;
justify-content: flex-end;
gap: 14rpx;
.btn-info {
width: 162rpx;
height: 66rpx;
border-radius: 34rpx;
border: 1rpx solid #999999;
color: #666;
font-size: 28rpx;
font-family: PingFang SC;
display: flex;
align-items: center;
justify-content: center;
}
.btn-error {
width: 162rpx;
height: 66rpx;
border-radius: 34rpx;
border: 1rpx solid #e9231b;
color: #e9231b;
font-size: 28rpx;
font-family: PingFang SC;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>
src/pages/order/detail.vue 0 → 100644
View file @ c4121d05
<template>
<div class="container">
<Header title="订单详情"></Header>
<div class="content">
<div class="status">
<div class="status-box">
<wd-icon name="check-outline" size="26px" color="#333"></wd-icon>
<div class="status-text">已使用</div>
</div>
<div class="detail">请在2023年07月04前到店消费</div>
</div>
<div>
</div>
</div>
</div>
</template>
<script setup>
import Header from './components/Header/index.vue';
</script>
<style scoped lang="scss">
.container {
background-color: #f5f5f5;
height: 100vh;
}
.content {
padding-top: 44px;
}
.status {
display: flex;
flex-direction: column;
padding: 32rpx 20rpx;
gap: 6rpx;
.status-box {
display: flex;
align-items: center;
gap: 6rpx;
.status-text {
font-size: 48rpx;
font-weight: bold;
color: #333;
font-family: PingFang SC;
}
}
.detail {
font-size: 28rpx;
color: #999;
font-family: PingFang SC;
}
}
</style>
src/pages/order/order.vue 0 → 100644
View file @ c4121d05
<template>
<div class="container">
<Header title="全部订单"></Header>
<div class="tabs">
<wd-tabs v-model="tab" animated lineWidth="38" lineHeight="3">
<block v-for="item in tabs" :key="item">
<wd-tab :title="`${item}`" :name="item">
<OrderList></OrderList>
</wd-tab>
</block>
</wd-tabs>
</div>
</div>
</template>
<script setup>
import Header from './components/Header/index.vue';
import OrderList from './components/OrderList/index.vue';
const tabs = ref(['全部', '待付款', '待收货', '待使用', '待评价', '退款/售后']);
const tab = ref('待使用');
</script>
<style scoped lang="scss">
.container {
background-color: #f5f5f5;
height: 100vh;
}
.tabs {
padding-top: 44px;
.wd-tabs {
background-color: #f5f5f5;
}
&:deep(.wd-tabs__nav) {
background-color: #f5f5f5;
}
&:deep(.wd-tabs__line) {
background-color: #e9231b;
bottom: 2px;
}
}
</style>
src/pages/shop/shop.vue
View file @ c4121d05
......@@ -14,6 +14,7 @@
></wd-swiper>
</view>
<view class="content">
<!-- 店铺信息 -->
<view class="shop-info">
<view class="shop-info-top">
<view class="shop-info-detail">
......@@ -33,31 +34,190 @@
</view>
</view>
</view>
<view class="shop-info-score"></view>
<view class="shop-info-right">
<view class="shop-info-score">
<view class="score-text">
<text class="score-num">4.5</text>
<text class="tj">推荐</text>
</view>
<view class="shop-info-bottom"></view>
<view class="score-icon">
<wd-rate
color="#fff"
readonly
v-model="value"
size="22rpx"
space="8rpx"
:active-color="['#FA5151']"
/>
</view>
</view>
<view class="shop-business-hours">
<texe>营业时间: 11:00-22:30</texe>
</view>
</view>
</view>
<view class="shop-info-bottom">
<view class="shop-address">
<text class="shop-distance">距您＜150米 南明区</text>
<text class="shop-address-detail">南明区后巢乡花果园中环广场3号(M区3栋)一层104 号</text>
</view>
<view class="shop-map-phone">
<image class="img1" src="@/static/shop/map.png"></image>
<image src="@/static/shop/phone.png"></image>
</view>
</view>
</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>
<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',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]);
const value = ref(4.5);
const handleClick = (e) => {
console.log(e);
};
const onChange = (e) => {
console.log(e);
};
function scroll(e) {
console.log(e);
old.scrollTop = e.detail.scrollTop;
}
</script>
<style lang="scss">
page {
background-color: #f9f9f9;
}
.shop-pages {
width: 375 * 2rpx;
margin: 0 auto;
......@@ -74,11 +234,15 @@ const onChange = (e) => {
.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;
......@@ -89,6 +253,8 @@ const onChange = (e) => {
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
.shop-info-detail {
display: flex;
flex-direction: column;
......@@ -121,14 +287,426 @@ const onChange = (e) => {
}
}
}
.shop-info-right {
display: flex;
flex-direction: column;
justify-content: space-between;
.shop-info-score {
// max-width: 62 * 2rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-self: end;
padding: 8rpx;
border-radius: 8px;
background: linear-gradient(180deg, #fcdbdb 0%, rgba(255, 255, 255, 0.36) 100%);
.score-text {
display: flex;
justify-content: space-between;
align-items: center;
color: #fa5151;
max-width: 62 * 2rpx;
.score-num {
font-size: 18 * 2rpx;
font-weight: bold;
}
.tj {
font-size: 11 * 2rpx;
color: #fa5151;
margin-left: 8rpx;
}
}
}
.shop-business-hours {
texe {
font-size: 8 * 2rpx;
color: #767676;
}
}
}
}
.shop-info-bottom {
border-top: 2rpx solid #efefef;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 20rpx 0;
align-items: center;
.shop-address {
display: flex;
flex-direction: column;
max-width: 245 * 2rpx;
.shop-distance {
font-size: 12 * 2rpx;
color: #3d3d3d;
}
.shop-address-detail {
font-size: 11 * 2rpx;
margin-top: 8rpx;
color: #abaaaa;
}
}
.shop-map-phone {
display: flex;
align-content: center;
.img1 {
margin-right: 48rpx;
}
image {
width: 20 * 2rpx;
height: 20 * 2rpx;
}
}
}
}
// 商家信息-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