admin/jurong_circle_front_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025-10-23

Browse Source 
支付页面
This commit is contained in:
Sun_sun
2025-10-23 10:18:06 +08:00
parent 12910d0a1d
commit 1f4c2c75eb
18 changed files with 581 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/address.js
View File

@@ -3,7 +3,7 @@ import {
} from "../util/api"
// const baseURL = "http://192.168.0.12:3005/term"
const baseURL = "http://192.168.0.26:3000/api"
const baseURL = "http://192.168.0.11:3000/api"
// 项目相关API
export const addressAPI = {

2
api/common.js
View File

@@ -1,6 +1,6 @@
import { http } from "../util/api";
const baseURL = "http://192.168.0.26:3000/api"
const baseURL = "http://192.168.0.11:3000/api"
export const commonAPI = {
getRegion: () => http.get(baseURL + '/regions/provinces'),

3
api/finnancial.js
View File

@@ -2,7 +2,8 @@ import {
http
} from "../util/api"
const baseURL = "http://192.168.0.15:3008"
// const baseURL = "http://192.168.0.15:3008" // 本地
const baseURL = "http://192.168.0.4:3008" // 测试服务器
// 项目相关API
export const financeAPI = {

3
api/group.js
View File

@@ -2,7 +2,8 @@ import {
http
} from "../util/api";
const baseURL = "http://192.168.0.15:3007"
// const baseURL = "http://192.168.0.15:3007" // 本地
const baseURL = "http://192.168.0.4:3007" // 测试服务器
export const groupAPI = {
getList: (params) => http.get(baseURL + '/group/list', params),

4
api/mall.js
View File

@@ -2,7 +2,7 @@ import {
http
} from "../util/api";
const baseUrl = "http://192.168.0.26:3000"
const baseUrl = "http://192.168.0.11:3000"
export const mallAPI = {
getMallList: (params) => http.get(baseUrl + '/api/products', params),
@@ -12,6 +12,8 @@ export const mallAPI = {
addCart: (data) => http.post(baseUrl +"/api/cart/add", data), // 添加购物车
createOrder: (data) => http.post(baseUrl + `/api/orders/create-from-cart`,data), // 创建订单
getOrder: (orderId) => http.get(baseUrl + `/api/orders/pending-payment/${orderId}`), // 获取订单
payment: (data) => http.post(baseUrl + "/api/orders/confirm-payment", data), // 支付订单
getCouponList: (uid) => http.get(baseUrl + `/api/coupon/user/${uid}`)
}
export default {

3
api/message.js
View File

@@ -3,7 +3,8 @@ import {
} from "../util/api"
// const baseURL = "http://192.168.0.12:3005/chat"
const baseURL = "http://192.168.0.15:3007"
// const baseURL = "http://192.168.0.15:3007" // 本地
const baseURL = "http://192.168.0.4:3007" // 测试服务器
// 项目相关API
export const messageAPI = {

3
api/program.js
View File

@@ -3,7 +3,8 @@ import {
} from "../util/api"
// const baseURL = "http://192.168.0.12:3005/term"
const baseURL = "http://192.168.0.15:3006"
// const baseURL = "http://192.168.0.15:3006"
const baseURL = "http://192.168.0.4:3006"
// 项目相关API
export const programAPI = {

6
api/user.js
View File

@@ -2,6 +2,8 @@ import {
http
} from "../util/api"
const baseURL = "http://192.168.0.4:3000/api"
// 用户相关API
export const userAPI = {
// 获取用户列表
@@ -19,7 +21,9 @@ export const userAPI = {
delete: (id) => http.delete(`/users/${id}`),
// 获取用户统计
getStats: () => http.get('/users/stats/overview')
getStats: () => http.get('/users/stats/overview'),
getProfile: () => http.get(baseURL + '/user/profile')
}
export default {

18
pages.json
View File

@@ -142,7 +142,23 @@
"style" :
{
"navigationBarTitleText" : "确认订单",
"backgroundColor": "#E4ECFF"
"backgroundColor": "#E4ECFF",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/my/order",
"style" :
{
"navigationBarTitleText" : "我的订单"
}
},
{
"path" : "pages/home/mallSearch",
"style" :
{
"navigationBarTitleText" : "搜索商品",
"navigationStyle": "custom"
}
}
],

6
pages/home/index.vue
View File

@@ -82,13 +82,12 @@
<view class="mall-title u-m-l-5 u-m-r-5">
{{item.name}}
</view>
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
{{item.rongdou_price}}
</view>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
<u-icon name="integral"></u-icon>
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
{{item.points_price}}
</view>
<view class="mall-tag u-m-l-5 u-m-r-5">
@@ -112,13 +111,12 @@
<view class="mall-title u-m-l-5 u-m-r-5">
{{item.name}}
</view>
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
{{item.rongdou_price}}
</view>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
<u-icon name="integral"></u-icon>
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
{{item.points_price}}
</view>
<view class="mall-tag u-m-l-5 u-m-r-5">

14
pages/home/mallDetail.vue
View File

@@ -31,7 +31,7 @@
{{dataInfo.rongdou_price}}
</view>
<view class="mall-price">
<u-icon name="integral"></u-icon>
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
{{dataInfo.points_price}}
</view>
<view v-if="dataInfo.discount" class="discount-info">
@@ -67,7 +67,7 @@
{{item.price}}
</view>
<view class="mall-price u-m-l-5 u-m-r-5">
<u-icon name="integral"></u-icon>
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
{{item.points}}
</view>
</view>
@@ -85,7 +85,7 @@
{{item.price}}
</view>
<view class="mall-price u-m-l-5 u-m-r-5">
<u-icon name="integral"></u-icon>
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
{{item.points}}
</view>
</view>
@@ -199,7 +199,7 @@
mallAPI
} from '../../api/mall';
import {
getImageUrl
getImageUrl, arrayContainsAll
} from '../../util/common.js';
const instance = getCurrentInstance();
@@ -312,11 +312,6 @@
return hasValidCombination;
}
// arr1是否包含arr2
const arrayContainsAll = (arr1, arr2) => {
return arr2.every(item => arr1.includes(item));
}
// 是否被选中
const isChose = (key) => {
return choseKeys.value.includes(key)
@@ -385,6 +380,7 @@
cart_item_ids: [cartItemId]
}).then(response => {
if (response.success) {
showSure.value = false
// 进入支付页面
uni.navigateTo({
url: '/pages/home/pay?preOrderId=' + response.data

15
pages/home/mallSearch.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<view class="search-container">
</view>
</template>
<script setup>
</script>
<style scoped lang="scss">
.search-container{
}
</style>

435
pages/home/pay.vue
View File

@@ -2,14 +2,13 @@
<view class="pay-container">
<scroll-view scroll-y="true" style="height: 100%;">
<view class="scroll-container">
<view class="box-bg">
<view class="box-bg u-p-b-40">
<view class="address">
<view class="text">
<view class="text" @click="handleSelectAddress">
<image style="width: 40rpx;height: 40rpx;" src="/static/icon/Map pin2.png" mode=""></image>
<view class="u-m-l-10">张三 | </view>
<view class="u-m-l-10">浙江省 宁波市 海曙区</view>
<view class="u-m-l-10">{{selectAddressLabel}}</view>
</view>
<view class="right-icon">
<view class="right-icon" @click="handleAddressManage">
<image style="width: 100%;height: 100%;" src="/static/icon/Chevron right Menu.png" mode="">
</image>
</view>
@@ -49,68 +48,449 @@
</view>
</view>
<view class="box-bg pay-method u-m-t-20">
<view class="title">
<view class="box-bg u-m-t-20 discount">
选择优惠券
<u-input class="u-m-t-20" :disabled="discountOptions.length==0"
:placeholder="discountOptions.length==0?'暂无优惠券':'请选择优惠券'" v-model="discountLabel" type="select"
:border="true" @click="handleSelectCoupon" />
<view class="u-m-t-10" style="font-weight: 500;font-size: 20rpx;">选择优惠券后自动换算扣除</view>
</view>
<view class="box-bg pay-method u-m-t-20" v-if="dataInfo.items?.length && dataInfo.items.length!=0">
<view class="title u-m-b-20">
支付方式
</view>
<view class="item" @click="handleChangeMethod">
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('rongdou')"
@click="handleChangeMethod(0)">
<view class="title">
融豆
</view>
<view class="value">
<u-checkbox v-model="checked" shape="circle" active-color="#305def"></u-checkbox>
<u-checkbox v-model="rongdouChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('points')"
@click="handleChangeMethod(1)">
<view class="title">
积分
</view>
<view class="value">
<u-checkbox v-model="pointsChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('mixed')"
@click="handleChangeMethod(2)">
<view class="title">
融豆+积分
</view>
<view class="value">
<u-checkbox v-model="rpChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('alipay')"
@click="handleChangeMethod(3)">
<view class="title">
支付宝
</view>
<view class="value">
<u-checkbox v-model="alipayChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('wechatpay')"
@click="handleChangeMethod(4)">
<view class="title">
微信
</view>
<view class="value">
<u-checkbox v-model="wechatpayChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="box-bottom">
<view class="box-bottom" id="boxBottom">
<view class="text">
实际支付：1231
实际支付：
<image v-if="rpChecked || pointsChecked" src="/static/icon/jifen.png" class="icon" mode=""></image>
<image v-else-if="rongdouChecked || wechatpayChecked || alipayChecked" src="/static/icon/rongdou.png"
class="icon" mode=""></image>
{{allPayNum}}
</view>
<view class="btn">
<u-button>确认支付</u-button>
<u-button @click="handleSubmit">确认支付</u-button>
</view>
</view>
<!-- 地址选择 -->
<u-select v-model="showSelectAddress" :list="addressOptions" @confirm="confirm"></u-select>
<!-- 优惠券选择 -->
<u-select v-model="showDiscount" :list="discountOptions" @confirm="confirmDiscount"></u-select>
<!-- 关闭提示 -->
<u-modal @confirm="handleBack" v-model="showBack" content="是否关闭订单，确认返回后可在个人中心查看我的订单完成支付"
:show-cancel-button="true"></u-modal>
<!-- 消息提示 -->
<u-toast ref="msgRef" />
</view>
</template>
<script setup>
import {
computed,
onMounted,
ref
ref,
getCurrentInstance
} from 'vue';
import {
onLoad
onLoad,
onBackPress,
onPullDownRefresh
} from '@dcloudio/uni-app'
import {
mallAPI
} from '../../api/mall';
import {
getImageUrl
addressAPI
} from '../../api/address'
import {
getImageUrl,
arrayContainsAll
} from '../../util/common.js'
const checked = ref(false)
const msgRef = ref()
const showBack = ref(false)
onBackPress((options) => {
if (options.from === 'navigateBack') {
return false;
} else {
showBack.value = true
return true;
}
})
const handleBack = () => {
uni.navigateBack();
}
const instance = getCurrentInstance();
const scrollHeight = ref(0)
const loadHeight = () => {
uni.getSystemInfo({
success(res) {
let screenHeight = res.screenHeight
uni.createSelectorQuery().in(instance.proxy).select("#boxBottom").boundingClientRect((
data) => {
scrollHeight.value = screenHeight - data.height
}).exec()
}
})
}
// 收获地址
const showSelectAddress = ref(false)
const addressOptions = ref([])
const selectAddressId = ref()
const selectAddressLabel = ref()
const handleSelectAddress = () => {
// 地址信息
addressAPI.getList().then(res => {
addressOptions.value = res.data.map(item => {
if (item.is_default) {
selectAddressId.value = item.id
selectAddressLabel.value = item.receiver_name + " | " + item.province_name +
item
.city_name + item.district_name + item.detailed_address
}
return {
value: item.id,
label: item.receiver_name + " | " + item.province_name + item.city_name + item
.district_name + item.detailed_address
}
})
showSelectAddress.value = true
})
}
const confirm = (val) => {
selectAddressId.value = val[0].value
selectAddressLabel.value = val[0].label
}
const handleAddressManage = () => {
uni.navigateTo({
url: '/pages/my/shippingAddress'
})
}
// 优惠券
const showDiscount = ref(false)
const discountLabel = ref('')
const discountOptions = ref([])
const couponRecordId = ref()
const handleSelectCoupon = async () => {
await loadCoupon()
if (discountOptions.value.length == 0) return
showDiscount.value = true
}
const confirmDiscount = (val) => {
couponRecordId.value = val[0].value
discountLabel.value = val[0].label
calculateAllPay()
}
// 支付方式
const rongdouChecked = ref(false)
const pointsChecked = ref(false)
const rpChecked = ref(false)
const alipayChecked = ref(false)
const wechatpayChecked = ref(false)
const allPayNum = ref(null)
const clearChecked = () => {
rongdouChecked.value = false
pointsChecked.value = false
rpChecked.value = false
alipayChecked.value = false
wechatpayChecked.value = false
}
const handleChangeMethod = (val) => {
clearChecked()
if (val == 0) { // 融豆
rongdouChecked.value = true
}
if (val == 1) { // 积分
pointsChecked.value = true
}
if (val == 2) { // 融豆+积分
rpChecked.value = true
}
if (val == 3) { // 支付宝
alipayChecked.value = true
}
if (val == 4) { // 微信
wechatpayChecked.value = true
}
calculateAllPay() // 计算实际支付
}
// 计算实际支付
const calculateAllPay = () => {
if (rongdouChecked.value) { // 融豆
allPayNum.value = dataInfo.value.items[0].rongdou_price * dataInfo.value.items[0].quantity
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
.couponInfo
handle1to1(couponInfo)
}
} else if (pointsChecked.value) { // 积分
allPayNum.value = dataInfo.value.items[0].points_price * dataInfo.value.items[0].quantity
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
.couponInfo
handle1to10000(couponInfo)
}
} else if (rpChecked.value) { // 融豆+积分
allPayNum.value = dataInfo.value.items[0].points_price * dataInfo.value.items[0].quantity
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
.couponInfo
handle1to10000(couponInfo)
}
} else if (alipayChecked.value) { // 支付宝
allPayNum.value = dataInfo.value.items[0].price * dataInfo.value.items[0].quantity
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
.couponInfo
handle1to1(couponInfo)
}
} else if (wechatpayChecked.value) { // 微信
allPayNum.value = dataInfo.value.items[0].price * dataInfo.value.items[0].quantity
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
.couponInfo
handle1to1(couponInfo)
}
}
if (allPayNum.value < 0) allPayNum.value = 0
}
const handle1to1 = (couponInfo) => {
if (couponInfo.type == 'discount_for_a_amount') { // 满减
if (allPayNum.value > couponInfo.for_a_amount) {
allPayNum.value -= couponInfo.discount
}
} else if (couponInfo.type == 'deduction') { // 抵扣
allPayNum.value -= couponInfo.price
} else if (couponInfo.type == 'discount') { // 折扣
allPayNum.value *= couponInfo.precent * 0.01
}
}
const handle1to10000 = (couponInfo) => {
if (couponInfo.type == 'discount_for_a_amount') { // 满减
if (allPayNum.value > (couponInfo.for_a_amount * 10000)) {
allPayNum.value -= couponInfo.discount * 10000
}
} else if (couponInfo.type == 'deduction') { // 抵扣
allPayNum.value -= couponInfo.price * 10000
} else if (couponInfo.type == 'discount') { // 折扣
allPayNum.value = allPayNum.value * couponInfo.precent * 0.01
}
}
const isPay = ref(false)
const handleSubmit = () => {
if (isPay.value) {
msgRef.value.show({
title: '请不要重复支付',
type: 'error'
})
return
}
if (!selectAddressId.value) {
msgRef.value.show({
title: '请选择收货地址',
type: 'error'
})
return
}
const orderData = {
orderId: preOrderId.value,
addressId: selectAddressId.value,
pointsAmount: allPayNum.value,
beansAmount: allPayNum.value,
couponRecordId: couponRecordId.value
}
if (rongdouChecked.value) {
orderData.paymentMethod = 'beans'
handlePay(orderData)
return
}
if (pointsChecked.value) {
orderData.paymentMethod = 'points'
handlePay(orderData)
return
}
if (rpChecked.value) {
orderData.paymentMethod = 'mixed'
handlePay(orderData)
return
}
if (alipayChecked.value) {
msgRef.value.show({
title: '暂不支持支付宝支付',
type: 'primary'
})
return
}
if (wechatpayChecked.value) {
msgRef.value.show({
title: '暂不支持微信支付',
type: 'primary'
})
return
}
msgRef.value.show({
title: '请选择支付方式',
type: 'warning'
})
}
const handlePay = (orderData) => {
mallAPI.payment(orderData).then(res => {
if (res.success) {
msgRef.value.show({
title: '支付成功',
type: 'success'
})
isPay.value = true
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
}
const dataInfo = ref({})
const couponList = ref({})
const loadData = () => {
mallAPI.getOrder(preOrderId.value).then(res => {
const loadData = async () => {
// 订单信息
await mallAPI.getOrder(preOrderId.value).then(res => {
dataInfo.value = res.data
dataInfo.value.items.forEach(item => {
if (item.payment_methods.includes('rongdou') && item.payment_methods.includes(
'points')) item.payment_methods.push('mixed')
})
})
uni.stopPullDownRefresh()
}
const loadCoupon = () => {
// 折扣信息
mallAPI.getCouponList(userId.value).then(res => {
couponList.value = res.coupon
// 排除已经使用的优惠券 和 排除商品不可使用的优惠券
let pIds = dataInfo.value.items.map(item => {
return item.product_id
})
couponList.value = couponList.value.filter(item => {
if (item.use_time == null && arrayContainsAll(item.couponInfo.products_id, pIds))
return true
return false
})
discountOptions.value = couponList.value.map(item => {
if (item.couponInfo.type === 'discount_for_a_amount') {
return {
value: item.coupon_id,
label: "满减券：满" + item.couponInfo.for_a_amount + "元减" + item.couponInfo
.discount + "元"
}
} else if (item.couponInfo.type === 'deduction') {
return {
value: item.coupon_id,
label: "抵扣券：抵扣" + item.couponInfo.price + "元"
}
} else if (item.couponInfo.type === 'discount') {
return {
value: item.coupon_id,
label: "折扣券：折扣" + item.couponInfo.precent + "%"
}
}
})
})
}
const preOrderId = ref()
const userId = ref()
// 刷新
onPullDownRefresh(async () => {
console.log(111);
loadData()
})
onLoad((val) => {
preOrderId.value = val.preOrderId
})
onMounted(() => {
loadHeight()
userId.value = uni.getStorageSync("user").id
loadData()
loadCoupon()
})
</script>
@@ -118,9 +498,10 @@
.pay-container {
width: 100%;
height: 100%;
background: var(--Color, #E4ECFF);
background: #E4ECFF;
.scroll-container {
padding-bottom: 200rpx;
.box-bg {
background: #F5F8FF;
@@ -135,6 +516,8 @@
.text {
display: flex;
align-items: center;
// border: 1px solid #000;
flex: 1;
}
.right-icon {
@@ -176,6 +559,10 @@
}
}
.discount {
padding: 30rpx 40rpx;
}
.pay-method {
padding: 30rpx 40rpx;
@@ -208,7 +595,15 @@
background: #F5F8FF;
.text {}
.text {
display: flex;
align-items: center;
.icon {
height: 30rpx;
width: 30rpx;
}
}
.btn {}
}

21
pages/my/my.vue
View File

@@ -9,6 +9,10 @@
</view>
<view class="header-username u-m-l-20">
{{user.real_name}}
<view>
<u-tag class="u-m-r-20 u-m-t-10" :text="Math.abs(user.balance)" type="warning"></u-tag>
<u-tag :text="user.points"></u-tag>
</view>
</view>
</view>
<view class="header-setting">
@@ -144,6 +148,12 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getImageUrl } from '../../util/common';
import {
authAPI
} from '../../api/auth.js';
import {
onShow
} from '@dcloudio/uni-app'
const user = ref()
@@ -153,8 +163,17 @@
})
}
const loadData = () => {
authAPI.me().then(res => {
user.value = res.user
})
}
onShow(() => {
loadData()
})
onMounted(() => {
user.value = uni.getStorageSync("user")
})
const loginOut = () => {

13
pages/my/order.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<view>
</view>
</template>
<script setup>
</script>
<style lang="scss">
</style>

BIN
static/icon/jifen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/icon/rongdou.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 158 KiB

6
util/common.js
View File

@@ -5,6 +5,12 @@ export const validatePhone = (phone) => {
};
// arr1是否包含arr2
export const arrayContainsAll = (arr1, arr2) => {
return arr2.every(item => arr1.includes(item));
}
export const getImageUrl = (imagePath) => {
if (!imagePath) return ''
// 如果图片路径以/uploads开头，直接返回原路径