Commit bbecb4ad authored by 陈宗胤(贵阳日报)'s avatar 陈宗胤(贵阳日报)
parents 1486b429 571bbf6c
import { request } from '../utils/request';
// 分类
export function getStoreInformation(data) {
return request({
url: `/sgyrdd/shop/getById?shopId=${data}`,
method: 'GET',
});
}
@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";
}
......
......@@ -61,6 +61,20 @@
"navigationBarTitleText": "我的券"
}
}
,
{
"path": "pages/shop/confirmOrder",
"style": {
"navigationBarTitleText": "确认订单"
}
}
,
{
"path": "pages/shop/paymentSuccessful",
"style": {
"navigationBarTitleText": "支付成功"
}
}
],
"globalStyle": {
"navigationStyle": "custom"
......
......@@ -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();
......
......@@ -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;
}
}
}
......
<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>
<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>
<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"
:list="swiperList"
:list="shopSwiperList"
autoplay
height="536rpx"
customStyle="border-radius: 0rpx;"
:current="current"
@click="handleClick"
@change="onChange"
:indicator="{ type: 'dots-bar' }"
></wd-swiper>
</view>
<view class="content">
......@@ -18,33 +35,24 @@
<view class="shop-info">
<view class="shop-info-top">
<view class="shop-info-detail">
<text class="shop-title">川心美蛙鱼头火锅(中环广场店)</text>
<text class="shop-title">{{ shopInfo.shopName }}</text>
<view class="shop-tag-list">
<view class="tag-item">
<text>中环广场卤煮 第1名</text>
</view>
<view class="tag-item">
<text>火锅</text>
</view>
<view class="tag-item">
<text>免费wifi</text>
</view>
<view class="tag-item">
<text>朋友聚餐</text>
<view class="tag-item" v-for="(item, index) in shopInfo.tagList" :key="index">
<text>{{ item }}</text>
</view>
</view>
</view>
<view class="shop-info-right">
<view class="shop-info-score">
<view class="score-text">
<text class="score-num">4.5</text>
<text class="score-num">{{ shopInfo.grade }}</text>
<text class="tj">推荐</text>
</view>
<view class="score-icon">
<wd-rate
color="#fff"
readonly
v-model="value"
v-model="shopInfo.grade"
size="22rpx"
space="8rpx"
:active-color="['#FA5151']"
......@@ -58,8 +66,8 @@
</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>
<text class="shop-distance">距您<150米 {{ shopInfo.area }}</text>
<text class="shop-address-detail">{{ shopInfo.shopAddress }}(M区3栋)一层104 号</text>
</view>
<view class="shop-map-phone">
<image class="img1" src="@/static/shop/map.png"></image>
......@@ -133,7 +141,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 +184,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>
......@@ -233,10 +241,14 @@
</template>
<script setup>
import navBar from '@/Components/navBar/navBar.vue';
import { getStoreInformation } from '@/api/shop';
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const current = ref(0);
const old = reactive({ scrollTop: 0 });
const activeId = ref(1);
// 店铺信息
const shopInfo = ref({});
const shopSwiperList = ref([]);
const tagList = ref([
{ name: '美食', id: 1 },
{ name: '休闲娱乐', id: 2 },
......@@ -249,7 +261,14 @@ 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);
onLoad((options) => {
getStoreInformationFn('1626126617850544129');
});
onShow(() => {
getLocationFn();
});
const value = ref(5);
const handleClick = (e) => {
console.log(e);
};
......@@ -260,6 +279,43 @@ function scroll(e) {
console.log(e);
old.scrollTop = e.detail.scrollTop;
}
function getLocationFn() {
// xma.getLocation({
// type: 'wgs84',
// success: function (res) {
// console.log('经度:' + res.longitude);
// console.log('纬度:' + res.latitude);
// },
// fail: function (err) {
// console.error('获取位置失败:', err);
// },
// });
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log('经度123:' + position.coords.longitude);
console.log('纬度:' + position.coords.latitude);
},
function (error) {
console.error('获取位置失败:', error);
},
);
} else {
console.error('浏览器不支持Geolocation API');
}
}
// 获取店铺信息
const getStoreInformationFn = (id) => {
getStoreInformation(id).then((res) => {
if (res.code === 0) {
shopInfo.value = res.data.shop;
shopSwiperList.value = res.data.imgList.map((item) => imgUrl + item.imgUrl);
shopInfo.value.tagList = res.data.shop.labels.split(',');
}
});
};
function changeActie(id) {
activeId.value = id;
}
......@@ -273,6 +329,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;
......@@ -281,6 +390,9 @@ page {
:deep(.wd-swiper__track) {
border-radius: 0;
}
:deep(.wd-swiper-nav--bottom) {
bottom: 100rpx;
}
}
.content {
......
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