Skip to content

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

付钱

parent 07edb666
Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 27 deletions
src/api/confirmOrder.js
View file @ 3055a512
......@@ -8,3 +8,20 @@ export function groupBuyConfirm(data) {
data,
});
}
// 修改临时订单-使用优惠券时需要调用
export function groupBuyUpdate(data) {
return request({
url: `/sgyrdd/previewOrder/groupBuy/update`,
method: 'POST',
data,
});
}
// 修改临时订单-提交订单并返回支付信息
export function groupBuyCreate(data) {
return request({
url: `/sgyrdd/sgyOrder/groupBuy/create`,
method: 'POST',
data,
});
}
src/api/packageDetail.js
View file @ 3055a512
......@@ -26,7 +26,7 @@ export function getCouponShopList(prodId, shopId) {
export function receiveCoupon(data) {
return request({
url: `/sgyrdd/coupon/receiveCoupon`,
method: 'POST',
method: 'GET',
data,
});
}
}
\ No newline at end of file
src/pages/packageDetails/packageDetails.vue
View file @ 3055a512
......@@ -156,7 +156,7 @@
<!-- card-end -->
<view class="rich-text-card">
<text class="title">商品详情</text>
<rich-text :nodes="prodInfo.content"></rich-text>
<rich-text class="desc" :nodes="prodInfo.content"></rich-text>
</view>
<view class="rich-text-card">
<text class="title">购买须知</text>
......@@ -509,6 +509,7 @@ page {
display: flex;
flex-direction: column;
margin-top: 12rpx;
border: 1 * 2rpx solid #f3f3f3;
.ticket-box {
display: flex;
......@@ -841,6 +842,9 @@ page {
margin-top: 10rpx;
border-radius: 8 * 2rpx;
box-shadow: 0 -8rpx 22 * 2rpx 0 rgba(255, 255, 255, 0.6);
.desc {
white-space: pre-line;
}
.purchase-information {
display: flex;
flex-direction: column;
......
src/pages/shop/confirmOrder.vue
View file @ 3055a512
<template>
<!-- 确认订单页面 -->
<view class="confirm-order-pages">
<wd-popup
v-model="showpopup"
position="bottom"
custom-style="height: 50%;border-radius: 16rpx 16rpx 0 0 ;box-sizing:border-box;padding:20rpx;"
@close="handleClose"
:safe-area-inset-bottom="true"
custom-class="popup"
>
<view class="title-box">
<text class="title">选择优惠券</text>
<wd-icon
@click="showpopup = false"
color="#D8D8D8"
name="close-bold"
size="30rpx"
></wd-icon>
</view>
<view class="popup-content">
<view
class="ticket-item"
:class="activeCouponId === item.couponId ? 'active-ticket' : ''"
v-for="(item, index) in orderInfo.shopCoupon"
:key="index"
@click.stop="selectShopCoupon(item)"
>
<view class="ticket-box">
<view class="normal ticket-left">
<view class="ticket-box">
<view class="ticket-price">
<text class="price">￥</text>
<text class="num">{{ item.reduceAmount }}</text>
</view>
<view class="ticket-desc">
<text class="desc">满{{ item.cashCondition }}元可用</text>
<text class="desc">数量：{{ item.count }}</text>
</view>
</view>
</view>
<view class="ticket-right">
<view class="head">
<text class="title">{{ item.couponName }}</text>
<view class="headbox">
<text class="time">{{ item.userEndTime }}过期</text>
<!-- <view v-if="item.numState === 0" class="btn" @click="getCoupon(item)">
立即领取
</view>
<i
v-else
class="iconfont icon-lianhe40"
style="font-size: 120rpx; color: #efefef"
></i> -->
</view>
</view>
<!-- 展开优惠券 -->
<!-- <view class="foot">
<view class="line"></view>
<view class="footbox" @click.stop="showDetailFn(item)">
<text class="desc">优惠券规则</text>
<text class="more">展开</text>
<wd-icon
:name="item.showDetail ? 'chevron-down' : 'chevron-right'"
size="15px"
color="#9d9d9d"
></wd-icon>
</view>
</view> -->
</view>
</view>
<view class="detail" v-if="item.showDetail">
<view class="line"></view>
<view class="detail-box" style="font-size: 16rpx">
{{ item.activityNotes }}
</view>
</view>
</view>
<wd-status-tip v-if="orderInfo.shopCoupon.length === 0" image="content" tip="暂无优惠券" />
</view>
</wd-popup>
<Header title="确认订单"></Header>
<!-- 商品卡 -->
<view class="order-detail-card">
<view class="title">老凯里酸汤鱼</view>
<view class="title">{{ orderInfo.shopName }}</view>
<view class="detail">
<view class="group-buying-list">
<view class="group-buying-item">
<image class="goods-picture" src="@/static/shop/ice.png"></image>
<image class="goods-picture" :src="orderInfo.orderItems[0].pic"></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>
<text class="goods-title multi-line">{{ orderInfo.orderItems[0].prodName }}</text>
<!-- <text class="yh-time multi-line">周一至周日</text> -->
<text class="yh-time multi-line">数量x1</text>
<!-- <text class="yh-fl multi-line">蔬菜免费，米饭免费</text> -->
</view>
<view class="pay">
<text class="sold-shares">￥89</text>
<text class="sold-shares">￥{{ orderInfo.orderItems[0].price }}</text>
</view>
</view>
</view>
</view>
<view class="card-bottom">
<view class="notice">
<view class="notice" v-if="orderInfo.shopCoupon.length > 0">
<i class="iconfont icon-tongzhi icon"></i>
每桌限用1张劵
</view>
<view class="quan">
<view class="quan-icon">券</view>
商家优惠券
<view class="view-coupons">
<text>￥0</text>
<view class="view-coupons" @click="showpopup = true">
<text v-if="activeCouponInfo.reduceAmount">￥{{ activeCouponInfo.reduceAmount }}</text>
<wd-icon color="#696969" name="chevron-right" size="22px"></wd-icon>
</view>
</view>
<view class="price">
已优惠￥31 小计
<text>￥89</text>
已优惠￥{{ orderInfo.reduceAmount }} 小计
<text>￥{{ orderInfo.actualTotal }}</text>
</view>
</view>
</view>
......@@ -47,14 +129,14 @@
<image src="@/static/shop/wx-icon.png"></image>
微信
</view>
<radio class="radio" color="#F12A2A" value="'wx'" :checked="'wx' == selectType" />
<radio class="radio" color="#F12A2A" value="0" :checked="0 == 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" />
<radio class="radio" color="#F12A2A" value="2" :checked="2 == selectType" />
</view>
</radio-group>
</view>
......@@ -64,11 +146,11 @@
<view class="left">
<view class="jq">
<text class="hj">合计:</text>
<text class="jg-price">￥89</text>
<text class="jg-price">￥{{ orderInfo.actualTotal }}</text>
</view>
<view class="yh">
<text class="zgyh">总共优惠</text>
<text class="zgyh-name">￥31.00</text>
<text class="zgyh-name">￥{{ orderInfo.reduceAmount }}</text>
</view>
</view>
<view class="btn" @tap="submitOrder">提交订单</view>
......@@ -79,28 +161,91 @@
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { groupBuyConfirm } from '@/api/confirmOrder';
const selectType = ref('wx');
const skuId = ref('');
const prodId = ref('');
import { groupBuyConfirm, groupBuyUpdate, groupBuyCreate } from '@/api/confirmOrder';
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const selectType = ref(0);
const prodId = ref(null);
const skuId = ref(null);
const showpopup = ref(false);
const orderInfo = ref({});
const activeCouponInfo = ref({});
const activeCouponId = ref('');
// 商品优惠券
const productCoupons = ref([]);
onLoad((options) => {
const { prodId, skuId } = options;
prodId.value = prodId;
skuId.value = skuId;
groupBuyConfirmFn(prodId, skuId);
});
function radioChange(evt) {
const { value } = evt.detail;
selectType.value = value;
}
function alert() {
if (productCoupons.value.length > 0) {
show.value = true;
}
}
function groupBuyConfirmFn(prodId, skuId) {
groupBuyConfirm({ prodId, skuId }).then((res) => {});
return new Promise((resolve, reject) => {
groupBuyConfirm({ prodId, skuId }).then((res) => {
if (res.code === 0) {
res.data.orderItems[0].pic = imgUrl + res.data.orderItems[0].pic;
orderInfo.value = res.data;
resolve(res.data.shopId);
}
});
});
}
function showDetailFn(item) {
item.showDetail = !item.showDetail;
}
/**
* 选择优惠券
*/
function selectShopCoupon(item) {
if (item.cashCondition < orderInfo.value.orderItems[0].price) {
activeCouponId.value = item.couponId;
activeCouponInfo.value = item;
showpopup.value = false;
groupBuyUpdateFn(item.couponUserId);
} else {
xma.showToast({
title: '不满足优惠券使用条件',
icon: 'none',
});
}
}
function groupBuyUpdateFn(couponUserId) {
groupBuyUpdate({ key: orderInfo.value.key, couponUserId }).then((res) => {
if (res.code === 0) {
res.data.orderItems[0].pic = imgUrl + res.data.orderItems[0].pic;
orderInfo.value = res.data;
}
});
}
function submitOrder() {
// TODO: 跳转到确认订单页面，并��带所选的支付方式
xma.redirectTo({
url: '/pages/shop/paymentSuccessful',
// id String 是 临时订单的id或key
// payWayCode String 是 支付方式,，0-翼支付，1-支付宝，2-微信
// placeOrderWay String 是 爽贵阳传：sgy，人多多传：ma
// remark String 否 备注
const params = {
id: orderInfo.value.key,
payWayCode: selectType.value,
placeOrderWay: 'sgy',
};
groupBuyCreate(params).then((res) => {
if (res.code === 0) {
const { paymentUrl, merchantNo } = res.data.result;
plus.runtime.openURL(paymentUrl);
console.log('merchantNo', merchantNo);
}
});
// xma.redirectTo({
// url: '/pages/shop/paymentSuccessful',
// });
}
</script>
......@@ -112,6 +257,223 @@ page {
display: flex;
box-sizing: border-box;
flex-direction: column;
.title-box {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
position: relative;
top: 0;
width: 100%;
.title {
font-size: 15 * 2rpx;
font-weight: bold;
color: #3d3d3d;
}
}
.popup-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
.ticket-item {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
margin-top: 12rpx;
border: 1 * 2rpx solid #f3f3f3;
.ticket-box {
display: flex;
.normal {
background: url('../../static/ticket/ticket-normal.png') no-repeat;
background-size: 100% 100%;
}
.past {
background: url('../../static/ticket/ticket-past.png') no-repeat;
background-size: 100% 100%;
}
.ticket-left {
width: 200rpx;
height: 200rpx;
.ticket-box {
width: 94%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30rpx;
.ticket-price {
display: flex;
align-items: last baseline;
text {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
.num {
font-size: 52rpx;
}
}
.ticket-desc {
display: flex;
flex-direction: column;
align-items: center;
gap: 24rpx;
.desc {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
}
}
}
.ticket-right {
display: flex;
flex-direction: column;
width: 504rpx;
position: relative;
.img {
width: 126rpx;
height: 94rpx;
position: absolute;
right: 28rpx;
top: 26rpx;
}
.head {
display: flex;
flex-direction: column;
padding: 30rpx 22rpx 26rpx 32rpx;
gap: 4rpx;
.title {
font-family: PingFang SC Heavy-Regular;
font-size: 32rpx;
color: #333333;
line-height: 32rpx;
}
.headbox {
display: flex;
justify-content: space-between;
align-items: end;
height: 50rpx;
.time {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
.btn {
padding: 20rpx;
box-sizing: border-box;
border-radius: 26rpx;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #ff7051 0%, #ff382e 100%);
color: #fff;
font-size: 24rpx;
line-height: 24rpx;
}
}
}
.foot {
display: flex;
flex-direction: column;
padding: 0 22rpx 14rpx 32rpx;
gap: 14rpx;
.line {
border-top: 2rpx solid #f2f2f2;
}
.footbox {
display: flex;
align-items: center;
justify-content: space-between;
.more {
margin-left: auto;
font-size: 8 * 2rpx;
color: #abaaaa;
}
.desc {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
}
}
}
}
.detail {
display: flex;
flex-direction: column;
padding: 24rpx 0rpx 56rpx 0rpx;
gap: 30rpx;
.line {
border-top: 2rpx solid #e7e7e7;
}
.detail-box {
display: flex;
flex-direction: column;
gap: 40rpx;
padding: 0 40rpx 0 22rpx;
.rowbox {
display: flex;
flex-direction: row;
gap: 48rpx;
text {
font-family: PingFang SC Regular;
font-size: 28rpx;
color: #666666;
line-height: 28rpx;
}
.desc {
width: 476rpx;
}
}
}
}
}
.active-ticket {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
margin-top: 12rpx;
border: 1 * 2rpx solid #fa5151;
}
}
.order-detail-card {
width: 720rpx;
border-radius: 16 * 2rpx;
......
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