Skip to content

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

订单

parent b75c85a3
Show whitespace changes
Inline Side-by-side
Showing with 766 additions and 9 deletions
src/assets/iconfont/iconfont.css
View file @ 81e0eb99
@font-face {
font-family: "iconfont"; /* Project id 4633414 */
src: url('//at.alicdn.com/t/c/font_4633414_03ddalpufkiu.woff2?t=1721970729959') format('woff2'),
url('//at.alicdn.com/t/c/font_4633414_03ddalpufkiu.woff?t=1721970729959') format('woff'),
url('//at.alicdn.com/t/c/font_4633414_03ddalpufkiu.ttf?t=1721970729959') format('truetype');
src: url('//at.alicdn.com/t/c/font_4633414_xeh7f81eleh.woff2?t=1722311537248') format('woff2'),
url('//at.alicdn.com/t/c/font_4633414_xeh7f81eleh.woff?t=1722311537248') format('woff'),
url('//at.alicdn.com/t/c/font_4633414_xeh7f81eleh.ttf?t=1722311537248') format('truetype');
}
.iconfont {
......@@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-tongzhi:before {
content: "\e60d";
}
.icon-fenxiang:before {
content: "\e639";
}
.icon-shuangshangjiantou-:before {
content: "\e600";
}
.icon-jinggao:before {
content: "\e716";
}
......
src/pages.json
View file @ 81e0eb99
......@@ -61,6 +61,20 @@
"navigationBarTitleText": "我的券"
}
}
,
{
"path": "pages/shop/confirmOrder",
"style": {
"navigationBarTitleText": "确认订单"
}
}
,
{
"path": "pages/shop/paymentSuccessful",
"style": {
"navigationBarTitleText": "支付成功"
}
}
],
"globalStyle": {
"navigationStyle": "custom"
......
src/pages/order/components/Header/index.vue
View file @ 81e0eb99
......@@ -2,6 +2,7 @@
<view class="header">
<view class="headbox">
<wd-icon
v-if="showBack"
class="icon"
name="thin-arrow-left"
color="#333333"
......@@ -19,6 +20,10 @@ const props = defineProps({
type: String,
default: '',
},
showBack: {
type: Boolean,
default: true,
},
});
const handleBack = () => {
uni.navigateBack();
......
src/pages/packageDetails/packageDetails.vue
View file @ 81e0eb99
......@@ -67,8 +67,64 @@
<view class="rich-text-card">
<text class="title">购买须知</text>
<rich-text :nodes="'nodes'"></rich-text>
<view class="rich-more-btn">
收起
<image src="@/static/shop/more.png"></image>
</view>
</view>
<!-- 使用方法-start -->
<view class="user-detail-card">
<text class="title">使用方法</text>
<view class="step-list">
<view class="step">
<image class="icon" src="@/static/shop/pay.png"></image>
线上购买
</view>
<wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
<view class="step">
<image class="icon" src="@/static/shop/shop.png"></image>
线上购买
</view>
<wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
<view class="step">
<image class="icon" src="@/static/shop/xcx.png"></image>
线上购买
</view>
<wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
<view class="step">
<image class="icon" src="@/static/shop/scan-code.png"></image>
线上购买
</view>
</view>
</view>
<!-- 使用方法-end -->
<!-- 适用门店 -->
<view class="applicable-stores-card">
<text class="title">适用门店</text>
<text class="goods-name">川心美蛙鱼头火锅(中环广场店)</text>
<view class="goods-pf-rs">
<text class="goods-fs">4.3分</text>
<text class="goods-type">火锅</text>
<text class="goods-rs">36/人</text>
</view>
<text class="distance">距你129m</text>
<text class="address">后巢乡花果园中环广场3号(M区4栋)3层114号</text>
</view>
<!-- 适用门店-end -->
<!-- 底部 -->
<view class="bottom-operation-bar">
<view class="start">
<image src="@/static/shop/start.png"></image>
241
</view>
<view class="start">
<image src="@/static/shop/share.png"></image>
分享
</view>
<view class="btn">立即抢购</view>
</view>
<!-- 底部-end -->
</view>
</template>
<script setup>
......@@ -86,6 +142,8 @@ page {
.package-details {
width: 750rpx;
position: relative;
padding-bottom: 110 * 2rpx;
margin: 0 auto;
.swiper {
width: 750rpx;
margin: 0 auto;
......@@ -104,6 +162,8 @@ page {
margin: 0 auto;
display: flex;
flex-direction: column;
position: relative;
margin-top: -40rpx;
.package-details-num {
display: flex;
align-items: flex-end;
......@@ -208,6 +268,8 @@ page {
}
}
}
.applicable-stores-card,
.user-detail-card,
.rich-text-card {
width: 355 * 2rpx;
padding: 20rpx;
......@@ -220,6 +282,113 @@ page {
.title {
font-size: 13 * 2rpx;
color: #151515;
font-weight: 500;
}
.rich-more-btn {
width: 315 * 2rpx;
display: flex;
align-items: center;
justify-content: center;
border-top: 1 * 2rpx solid #efefef;
font-size: 9 * 2rpx;
color: #abaaaa;
box-sizing: border-box;
padding: 20rpx 0 0 0;
margin-top: 20rpx;
image {
width: 18rpx;
height: 18rpx;
}
}
}
.user-detail-card {
.step-list {
display: flex;
justify-content: space-between;
align-content: center;
margin-top: 20rpx;
.step {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8 * 2rpx;
color: #151515;
image {
width: 40rpx;
height: 40rpx;
margin-bottom: 8rpx;
}
}
}
}
.applicable-stores-card {
display: flex;
flex-direction: column;
.goods-name {
font-size: 14 * 2rpx;
font-weight: bold;
color: #151515;
margin-top: 20rpx;
}
.goods-pf-rs {
display: flex;
align-items: center;
margin-top: 10rpx;
.goods-fs {
font-weight: 500;
font-size: 14 * 2rpx;
color: #fa5151;
}
.goods-type {
margin: 0 10rpx;
font-size: 10 * 2rpx;
font-weight: 500;
color: #abaaaa;
}
.goods-rs {
font-size: 10 * 2rpx;
font-weight: 500;
color: #abaaaa;
}
}
.distance {
font-size: 11 * 2rpx;
color: #fa5151;
}
.address {
margin-top: 20rpx;
font-size: 11 * 2rpx;
color: #767676;
}
}
.bottom-operation-bar {
width: 100%;
background: #fff;
border-radius: 16rpx 16rpx 0 0;
display: flex;
box-sizing: border-box;
padding: 20rpx 20rpx 96rpx 42rpx;
position: fixed;
justify-content: space-between;
bottom: 0;
.start {
font-size: 11 * 2rpx;
display: flex;
flex-direction: column;
align-items: center;
color: #3d3d3d;
image {
width: 40rpx;
height: 40rpx;
}
}
.btn {
font-size: 12 * 2rpx;
color: #ffffff;
border-radius: 16 * 2rpx;
background: #fa5151;
box-sizing: border-box;
padding: 20rpx 208rpx;
}
}
}
......
src/pages/shop/confirmOrder.vue 0 → 100644
View file @ 81e0eb99
<template>
<!-- 确认订单页面 -->
<view class="confirm-order-pages">
<Header title="确认订单"></Header>
<!-- 商品卡 -->
<view class="order-detail-card">
<view class="title">老凯里酸汤鱼</view>
<view class="detail">
<view class="group-buying-list">
<view class="group-buying-item">
<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-time multi-line">周一至周日</text>
<text class="yh-fl multi-line">蔬菜免费，米饭免费</text>
</view>
<view class="pay">
<text class="sold-shares">￥89</text>
</view>
</view>
</view>
</view>
<view class="card-bottom">
<view class="notice">
<i class="iconfont icon-tongzhi icon"></i>
每桌限用1张劵
</view>
<view class="quan">
<view class="quan-icon">券</view>
商家优惠券
<view class="view-coupons">
<text>￥0</text>
<wd-icon color="#696969" name="chevron-right" size="22px"></wd-icon>
</view>
</view>
<view class="price">
已优惠￥31 小计
<text>￥89</text>
</view>
</view>
</view>
<!-- 商品卡-end -->
<view class="pay-card">
<radio-group style="width: 100%" @change="radioChange">
<view class="pay-item">
<view class="icon">
<image src="@/static/shop/wx-icon.png"></image>
微信
</view>
<radio class="radio" color="#F12A2A" value="'wx'" :checked="'wx' == selectType" />
</view>
<view class="pay-item">
<view class="icon">
<image src="@/static/shop/yzf-icon.png"></image>
翼支付
</view>
<radio class="radio" color="#F12A2A" value="'yzf'" :checked="'yzf' == selectType" />
</view>
</radio-group>
</view>
<!-- 支付方式-end -->
<!-- 底部 -->
<view class="footsubmit-order-box">
<view class="left">
<view class="jq">
<text class="hj">合计:</text>
<text class="jg-price">￥89</text>
</view>
<view class="yh">
<text class="zgyh">总共优惠</text>
<text class="zgyh-name">￥31.00</text>
</view>
</view>
<view class="btn" @tap="submitOrder">提交订单</view>
</view>
<!-- 底部-end -->
</view>
</template>
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
const selectType = ref('wx');
function radioChange(evt) {
const { value } = evt.detail;
selectType.value = value;
}
function submitOrder() {
// TODO: 跳转到确认订单页面，并��带所选的支付方式
xma.redirectTo({
url: '/pages/shop/paymentSuccessful',
});
}
</script>
<style lang="scss" scoped>
page {
background: #f2f2f2;
}
.confirm-order-pages {
display: flex;
box-sizing: border-box;
flex-direction: column;
.order-detail-card {
width: 720rpx;
border-radius: 16 * 2rpx;
margin: 0 auto;
box-sizing: border-box;
margin-top: 108rpx;
background: #ffffff;
display: flex;
flex-direction: column;
.title {
font-size: 28rpx;
width: 100%;
padding: 34rpx 40rpx;
position: relative;
color: #333333;
border-bottom: 2rpx solid #f2f2f2;
}
.detail {
.group-buying-list {
width: 100%;
box-sizing: border-box;
padding: 40rpx 38rpx;
.group-buying-item {
border-bottom: 2rpx solid #efefef;
display: flex;
align-items: flex-start;
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;
}
}
.pay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin-left: auto;
.sold-shares {
font-size: 32rpx;
color: #333333;
}
.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;
font-size: 12 * 2rpx;
color: #fff;
}
}
}
.group-buying-item:last-child {
border: none;
}
}
}
.card-bottom {
width: 100%;
box-sizing: border-box;
padding: 0 38rpx;
display: flex;
flex-direction: column;
.notice {
display: flex;
align-items: center;
font-size: 24rpx;
color: #f23737;
.icon {
color: #f23737;
font-weight: bold;
font-size: 34rpx;
margin-right: 6rpx;
}
}
.quan {
display: flex;
align-items: center;
font-weight: bold;
font-size: 24rpx;
margin-top: 24rpx;
.quan-icon {
border-radius: 5 * 2rpx;
padding: 8rpx;
background: #fc2828;
opacity: 1;
font-size: 8 * 2rpx;
color: #ffffff;
margin-right: 6px;
}
.view-coupons {
margin-left: auto;
display: flex;
align-items: center;
font-size: 24rpx;
color: #333333;
}
}
.price {
font-size: 28rpx;
color: #333333;
display: flex;
align-items: center;
margin-left: auto;
margin-top: 56rpx;
margin-bottom: 39rpx;
text {
color: #f12a2a;
font-size: 28rpx;
}
}
}
}
.pay-card {
display: flex;
width: 710rpx;
background: #fff;
border-radius: 16rpx;
padding: 84rpx 38rpx;
box-sizing: border-box;
margin: 0 auto;
margin-top: 20rpx;
.pay-item {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
.icon {
display: flex;
align-items: center;
font-weight: bold;
font-size: 32rpx;
color: #333333;
image {
width: 45rpx;
height: 45rpx;
margin-right: 12rpx;
}
}
.radio {
margin-left: auto;
}
}
.pay-item:nth-child(2) {
margin-top: 68rpx;
}
}
.footsubmit-order-box {
width: 100%;
box-sizing: border-box;
padding: 17rpx 20rpx 60rpx 20rpx;
display: flex;
justify-content: space-between;
background: #fff;
position: fixed;
bottom: 0;
.left {
.yh.jq {
display: flex;
align-items: center;
.hj {
font-weight: 400;
font-size: 24rpx;
color: #333;
}
.g-price {
font-weight: 400;
font-size: 32rpx;
color: #f12a2a;
}
}
.yh {
.zgyh {
font-size: 24rpx;
color: #999999;
}
.zgyh-name {
font-size: 24rpx;
color: #999999;
}
}
}
.btn {
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #ffffff;
width: 188rpx;
height: 75rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, #f73f3f 1%, #ec1a1a 98%);
}
}
}
</style>
src/pages/shop/paymentSuccessful.vue 0 → 100644
View file @ 81e0eb99
<template>
<!-- 支付成功页面 -->
<view class="container">
<Header :showBack="false" title=""></Header>
<view class="content">
<!-- 使用状态 -->
<view class="status">
<view class="status-text">购买成功！</view>
<view class="detail">查看订单详情</view>
</view>
<!-- 券码信息 -->
<view class="info">
<view class="box">
<text class="title">酸汤鱼双人套餐</text>
<text class="code">0115 8156 9126</text>
</view>
<view class="rectangle-with-semicircles"></view>
<view class="qrcode line">
<!-- 二维码 -->
<view class="qr-box">
<image src="@/static/order/QR-code.png" class="qr"></image>
<text class="qr-text">请向商家出示此核销码</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.container {
.content {
padding-top: 44px;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 28rpx;
.status-text {
font-family: PingFang SC Bold;
font-size: 42rpx;
color: #333333;
}
.detail {
font-size: 24rpx;
color: #333;
font-family: PingFang SC;
box-sizing: border-box;
padding: 8rpx 26rpx;
border-radius: 28rpx 28rpx 28rpx 28rpx;
border: 1rpx solid #999999;
margin-top: 9rpx;
}
}
.info {
background-color: #fff;
border-radius: 16rpx;
margin: 0 20rpx;
.box {
padding: 20rpx 20rpx 0;
display: flex;
flex-direction: column;
gap: 10rpx;
.title {
font-family: PingFang SC Bold;
font-size: 32rpx;
font-weight: bold;
line-height: 56rpx;
color: #333;
}
.code {
font-family: PingFang SC Heavy;
font-size: 40rpx;
font-weight: blod;
line-height: 56rpx;
color: #333;
}
}
}
.line {
border-top: 1px dashed #999;
}
.rectangle-with-semicircles {
width: 100%;
position: relative;
z-index: 10;
height: 20rpx;
}
.rectangle-with-semicircles::after {
position: absolute;
content: '';
height: 32rpx;
width: 32rpx;
border-radius: 50%;
background-color: #f5f5f5;
left: 0;
top: 50%;
transform: translate(-50%);
}
.rectangle-with-semicircles::before {
position: absolute;
content: '';
height: 32rpx;
width: 32rpx;
border-radius: 50%;
background-color: #f5f5f5;
right: 0;
top: 50%;
transform: translate(50%);
}
// 二维码
.qrcode {
padding: 30rpx 20rpx 20rpx;
display: flex;
flex-direction: column;
gap: 36rpx;
.qr-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4rpx;
.qr {
width: 320rpx;
height: 320rpx;
}
.qr-text {
font-family: PingFang SC Heavy;
font-size: 28rpx;
font-weight: blod;
line-height: 56rpx;
color: #333;
}
}
}
}
</style>
src/pages/shop/shop.vue
View file @ 81e0eb99
<template>
<!-- 店铺详情页面 -->
<view class="shop-pages">
<navBar />
<!-- 搜索 -->
<view class="search">
<wd-icon color="#fff" name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
<view class="searchBox">
<image
class="magnifyingGlass"
src="@/static/shop/search.png"
mode="aspectFit|aspectFill|widthFix"
/>
<input type="text" :value="test" class="text" />
</view>
<view class="icon-box">
<i class="iconfont icon icon-shoucang"></i>
<i class="iconfont icon icon-fenxiang"></i>
</view>
</view>
<view class="swiper">
<wd-swiper
customClass="swiper-custom"
......@@ -133,7 +149,7 @@
<view class="user-reviews">
<view class="useer-reviews-title">
<text class="user-pj">用户评价</text>
<image class="user-icon" src="@/static/shop/edit.png"></image>
<!-- <image class="user-icon" src="@/static/shop/edit.png"></image> -->
</view>
<!-- 评价列表 -->
<view class="reviews-list">
......@@ -176,10 +192,10 @@
<i class="iconfont icon-shoucang" />
<text>收藏</text>
</view>
<view class="icon">
<!-- <view class="icon">
<i class="iconfont icon-pinglun" />
<text>收藏</text>
</view>
<text>评论</text>
</view> -->
</view>
</view>
</view>
......@@ -249,7 +265,7 @@ const swiperList = ref([
'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 value = ref(5);
const handleClick = (e) => {
console.log(e);
};
......@@ -273,6 +289,59 @@ page {
width: 375 * 2rpx;
margin: 0 auto;
.search {
width: 710rpx;
height: 80rpx;
// background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 0.8;
margin: 0 auto;
margin-top: 44rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
box-sizing: border-box;
position: absolute;
top: 0;
z-index: 99;
.arrow {
width: 15rpx;
height: 24rpx;
}
.icon {
font-size: 28rpx;
}
.searchBox {
width: 129 * 2rpx;
height: 26 * 2rpx;
background: rgba(243, 243, 243, 0.4);
border-radius: 28rpx 28rpx 28rpx 28rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
margin-left: 20rpx;
.magnifyingGlass {
width: 26rpx;
height: 26rpx;
}
.text {
margin-left: 10rpx;
font-size: 24rpx;
}
}
.icon-box {
display: flex;
align-content: center;
margin-left: 86rpx;
.icon {
font-size: 40rpx;
color: #fff;
}
.icon-fenxiang {
margin-left: 20rpx;
}
}
}
.swiper {
width: 750rpx;
margin: 0 auto;
......
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