siyunxing/dajiankang-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
PC-202306242200\Administrator
2026-03-28 23:10:55 +08:00
commit 1c24452b6c
1735 changed files with 150474 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

536
pages/order/confirm - 副本.vue Normal file
View File

@@ -0,0 +1,536 @@
<template>
<view class="container">
<!-- 顶部导航 -->
<wd-navbar title="下单" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
<!-- 收货地址 -->
<view class="address-card" @click="selectAddress">
<view class="address-content">
<view v-if="address" class="address-text">
<view class="province-city">{{ address.receiverArea }} {{ address.receiverAddress }}</view>
<view class="address-detail">{{ address.receiverName }} {{ address.receiverPhone }}</view>
</view>
<view class="address-text" v-else>请选择地址</view>
<view class="arrow-right">
<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
</view>
</view>
</view>
<!-- 商品列表 -->
<view class="product-section">
<view class="section-title">商品信息</view>
<view class="product-list">
<view class="product-item" @click="viewProduct">
<!-- src="/images/product.jpg" -->
<image class="product-image" :src="goods.cover" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">{{ goods.name }}</view>
<view class="product-count">{{ goods.specs }}</view>
<view style="font-size: 36rpx; font-weight: bold; color: #ff2929">￥{{ goods.currentPrice }}</view>
</view>
</view>
<view class="arrow-right">
<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
</view>
</view>
<view class="price-item" style="margin-top: 25rpx">
<text class="price-label">商品数量</text>
<view class="price-value">
<wd-input-number v-model="dataFrom.goodsNum" />
</view>
</view>
</view>
<!-- 价格明细 -->
<!-- <view class="price-section">
<view class="section-title">价格明细</view>
<view class="price-item">
<text class="price-label">商品金额</text>
<text class="price-value" style="color: #ff2929">¥ {{ goods.currentPrice }}</text>
</view>
<view class="price-item">
<text class="price-label">商品数量</text>
<view class="price-value">
<wd-input-number v-model="GoodsNum" />
</view>
</view>
<view class="price-total">
<text class="price-label">合计</text>
<text class="price-value total">¥ {{ goods.currentPrice * GoodsNum }}</text>
</view>
</view> -->
<!-- 订单备注 -->
<view class="remark-section">
<view class="section-title">订单备注</view>
<view class="remark-content">
<wd-textarea style="height: 100rpx" v-model="dataFrom.note" placeholder="请填写订单备注" />
</view>
</view>
<!-- 抵扣 -->
<view class="price-section">
<view class="section-title">支付方式</view>
<view class="price-item-pay" :class="dataFrom.payType == 1 ? 'active-border' : ''" @click="changePayType(1)">
<view style="width: 350rpx; text-align: center" class="price-label">余额支付</view>
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
<text style="color: #aaa">可用余额：</text>
{{ userInfo.money || 0 }}
</view>
</view>
<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 1">
<view style="color: #aaa; font-size: 24rpx">
当前权益等级：{{ userInfo.userRights.rights.rightsName }}
<text style="margin-left: 30rpx">
可享受折扣：
<text style="color: #ff2929">{{ userInfo.userRights.rights.rightsDiscount / 10 }}折</text>
</text>
</view>
</view>
<view class="price-item-pay" :class="dataFrom.payType == 2 ? 'active-border' : ''" @click="changePayType(2)">
<view style="width: 350rpx; text-align: center" class="price-label">权益货值</view>
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
<text style="color: #aaa">可用抵扣：</text>
{{ userInfo.userRights.pice || 0 }}
</view>
</view>
<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 2">
<view style="color: #aaa; font-size: 24rpx">提示：抵扣金额不足时，自动使用余额补足</view>
</view>
<view class="price-item-pay" style="flex-direction: column" :class="dataFrom.payType == 3 ? 'active-border' : ''" @click="changePayType(3)">
<view style="display: flex; align-items: center; justify-content: space-between">
<view style="width: 350rpx; text-align: center" class="price-label">混合支付</view>
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
<view v-if="dataFrom.payType == 3">
<view
style="width: 350rpx; color: #ff2929; text-align: center"
class="price-value"
v-if="goods.currentPrice * dataFrom.goodsNum > userInfo.userRights.pice + userInfo.money"
>
<view>
<text style="color: #aaa">余额：</text>
<text v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice > userInfo.money">
{{userInfo.money}}
</text>
<text v-else>
{{ goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice }}
</text>
</view>
<view>
<text style="color: #aaa">抵扣：</text>
<text v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.money > userInfo.userRights.pice">
{{userInfo.userRights.pice}}
</text>
<text v-else>
{{ goods.currentPrice * dataFrom.goodsNum - userInfo.money }}
</text>
</view>
</view>
<view
style="width: 350rpx; color: #ff2929; text-align: center"
class="price-value"
v-if="goods.currentPrice * dataFrom.goodsNum < userInfo.userRights.pice + userInfo.money"
>
<view v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice < 0">
<text style="color: #aaa">余额：</text>
{{ 0 }}
</view>
<view v-else>
<text style="color: #aaa">余额：</text>
{{ goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice }}
</view>
<view>
<text style="color: #aaa">抵扣：</text>
{{ goods.currentPrice * dataFrom.goodsNum < userInfo.userRights.pice ? goods.currentPrice * dataFrom.goodsNum : userInfo.userRights.pice }}
</view>
</view>
</view>
<view v-else>
<text style="color: #aaa">-</text>
</view>
</view>
</view>
<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 3">
<view style="color: #aaa; font-size: 24rpx">提示：混合支付时优先使用抵扣金额</view>
</view>
<!-- <view class="price-section">
<view class="price-item">
<text class="price-label">商品金额</text>
<text class="price-value" style="color: #ff2929">¥ {{ goods.currentPrice }}</text>
</view>
</view> -->
<!-- <view class="price-item">
<view class="price-label">是否使用抵扣金额</view>
<view>
<wd-radio-group shape="dot" inline v-model="typePay">
<wd-radio :value="1" :disabled="!userInfo.userRights">是</wd-radio>
<wd-radio :value="2">否</wd-radio>
</wd-radio-group>
</view>
</view>
<view class="price-item">
<text class="price-label">当前余额</text>
<text class="price-value" style="color: #ff2929">¥ {{ userInfo.money || 0 }}</text>
</view>
<view class="price-item">
<text class="price-label">当前抵扣金额</text>
<text class="price-value" style="color: #ff2929">¥ {{ userInfo.userRights.pice || 0 }}</text>
</view>
<view class="price-item">
<text class="price-label">可抵扣金额</text>
<text class="price-value" style="color: #ff2929">¥ {{ userInfo.userRights.pice || 0 }}</text>
</view> -->
</view>
<view style="height: 130rpx"></view>
<!-- 底部结算栏 -->
<view class="footer">
<view class="total-price">
合计：
<text style="color: #ff2929" v-if="dataFrom.payType == 1">¥ {{ (goods.currentPrice * dataFrom.goodsNum * userInfo.userRights.rights.rightsDiscount) / 100 }}</text>
<text style="color: #ff2929" v-if="dataFrom.payType == 2">¥ {{ goods.currentPrice * dataFrom.goodsNum }}</text>
<text style="color: #ff2929" v-if="dataFrom.payType == 3">¥ {{ goods.currentPrice * dataFrom.goodsNum }}</text>
</view>
<view class="pay-button" @click="submitOrder">确认支付</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { toast } from '@/utils/fun.js';
import api from '@/api/index';
import { Store } from '@/store';
const store = Store();
const userInfo = computed(() => {
if (!store.userInfo.userRights) {
dataFrom.value.payType = 2;
}
return (
store.userInfo || {
inviteCode: '',
nickname: '',
mobile: '',
avatar: '',
paywallet: {
balance: 0
},
userRights: null
}
);
});
const goods = ref({});
const address = ref(null);
const dataFrom = ref({
goodsId: null,
goodsNum: 1,
totalAmount: 0,
payableAmount: 0,
payAmount: 0,
payType: 1,
receiverId: null,
note: '',
orderType: 1
});
const submitOrder = () => {
//余额支付
if (dataFrom.value.payType == 1) {
//存在权益包
if (userInfo.value.userRights) {
if ((goods.value.currentPrice * dataFrom.value.goodsNum * userInfo.value.userRights.rights.rightsDiscount) / 100 > userInfo.value.money) {
toast('当前可用余额不足');
return;
}
dataFrom.value.payAmount = (goods.value.currentPrice * dataFrom.value.goodsNum * userInfo.value.userRights.rights.rightsDiscount) / 100;
dataFrom.value.payableAmount = dataFrom.value.payAmount;
dataFrom.value.totalAmount = goods.value.currentPrice * dataFrom.value.goodsNum;
}
}
// 权益包支付
if (dataFrom.value.payType == 2) {
//判断权益包货值是否大于总金额
if (goods.value.currentPrice * dataFrom.value.goodsNum > userInfo.value.userRights.pice) {
// 判断权益货值+余额是否>商品总价 >走混合支付
console.log(goods.value.currentPrice * dataFrom.value.goodsNum);
console.log(userInfo.value.userRights.pice + userInfo.value.money);
console.log(goods.value.currentPrice * dataFrom.value.goodsNum > userInfo.value.userRights.pice + userInfo.value.money);
if (goods.value.currentPrice * dataFrom.value.goodsNum < userInfo.value.userRights.pice + userInfo.value.money) {
uni.showModal({
title: '提示',
content: '当前货值不足，是否使用余额补足？',
success: (res) => {
if (res.confirm) {
}
}
});
} else {
toast('当前权益货值不足');
}
return;
}
}
api.orderCreate(dataFrom.value).then((res: any) => {
uni.navigateTo({
url: '/pages/order/success?id=' + res.id
});
});
};
onLoad(async (options: any) => {
dataFrom.value.goodsId = options.id;
await store.usersGetInfo();
api.goodsInfo({ id: options.id }).then((res: any) => {
goods.value = res;
});
api.addressPage({ isDefault: 1 }).then((res: any) => {
if (res.list.length !== 0) {
address.value = res.list[0];
// 赋值默认收货地址;
dataFrom.value.receiverId = address.value.id;
}
});
uni.$on('address', (e) => {
address.value = e;
});
});
const selectAddress = () => {
uni.navigateTo({
url: '/pages/address/list?type=1'
});
};
const viewProduct = () => {
uni.navigateTo({
url: '/pages/goods/goods?id=' + goods.value.id
});
};
const changePayType = (e = 1) => {
dataFrom.value.payType = e;
};
const back = () => {
uni.navigateBack();
};
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
background-color: #f5f5f5;
position: relative;
}
/* 地址卡片 */
.address-card {
margin: 25rpx;
margin-bottom: 0;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
}
.address-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.address-text {
flex: 1;
}
.province-city {
font-size: 15px;
margin-bottom: 5px;
}
.address-detail {
font-size: 14px;
color: #666;
}
.arrow-right {
color: #ccc;
font-size: 18px;
}
/* 商品部分 */
.product-section {
margin: 25rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 0;
}
.section-title {
font-size: 15px;
color: #333;
margin-bottom: 15px;
font-weight: 500;
}
.product-list {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-item {
display: flex;
align-items: center;
}
.product-image {
width: 80px;
height: 80px;
border-radius: 4px;
margin-right: 10px;
}
.product-info {
flex: 1;
}
.product-name {
font-size: 14px;
margin-bottom: 5px;
}
.product-count {
font-size: 13px;
color: #999;
margin: 10rpx 0;
}
/* 价格明细 */
.price-section {
margin: 25rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 0;
}
.price-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.price-item-pay {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15rpx;
padding: 24rpx 0rpx;
border: 1rpx solid #f7f7f7;
border-radius: 10rpx;
background-color: #f7f7f7;
}
.price-total {
display: flex;
align-items: center;
justify-content: space-between;
}
.price-label {
font-size: 14px;
color: #333;
}
.price-value {
font-size: 14px;
color: #333;
}
.total {
color: #ff2929;
font-weight: 500;
}
/* 订单备注 */
.remark-section {
margin: 25rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 0;
}
.remark-content {
border-radius: 16rpx;
border: 1rpx solid #f7f7f7;
overflow: hidden;
height: 100rpx;
}
/* 底部结算栏 */
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
padding: 0 30rpx;
background-color: #fff;
border-top: 1rpx solid #eee;
}
.total-price {
font-size: 15px;
color: #333;
}
.pay-button {
background-color: #799675;
color: #fff;
font-size: 16px;
padding: 0 30px;
height: 36px;
line-height: 36px;
border-radius: 18px;
}
.active-border {
background-color: rgba(121, 150, 117, 0.1);
border: 1rpx solid #799675;
.price-label {
color: #799675;
}
}
</style>

501
pages/order/confirm.vue Normal file
View File

@@ -0,0 +1,501 @@
<template>
<view class="container">
<!-- 顶部导航 -->
<wd-navbar title="下单" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
<!-- 收货地址 -->
<view class="address-card" @click="selectAddress">
<view class="address-content">
<view v-if="address" class="address-text">
<view class="province-city">{{ address.receiverArea }} {{ address.receiverAddress }}</view>
<view class="address-detail">{{ address.receiverName }} {{ address.receiverPhone }}</view>
</view>
<view v-else class="address-text">请选择地址</view>
<view class="arrow-right">
<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
</view>
</view>
</view>
<!-- 商品列表 -->
<view class="product-section">
<view class="section-title">商品信息</view>
<view class="product-list">
<view class="product-item" @click="viewProduct">
<image class="product-image" :src="goods.cover" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">{{ goods.name }}</view>
<view class="product-spec">{{ goods.specs }}</view>
<view class="product-price">￥{{ goods.currentPrice }}</view>
</view>
</view>
<view class="arrow-right">
<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
</view>
</view>
<view class="price-item" style="margin-top: 25rpx">
<text class="price-label">商品数量</text>
<view class="price-value">
<wd-input-number v-model="dataFrom.goodsNum" />
</view>
</view>
</view>
<!-- 订单备注 -->
<view class="remark-section">
<view class="section-title">订单备注</view>
<view class="remark-content">
<wd-textarea style="height: 100rpx" v-model="dataFrom.note" placeholder="请填写订单备注" />
</view>
</view>
<!-- 支付方式 -->
<view class="price-section">
<view class="section-title">支付方式</view>
<!-- 余额支付 -->
<view class="price-item-pay" :class="{ 'active-border': dataFrom.payType === 1 }" @click="dataFrom.payType = 1">
<view style="width: 350rpx; text-align: center" class="price-label">余额支付</view>
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
<text style="color: #aaa">可用余额：</text>
{{ userInfo.money || 0 }}
</view>
</view>
<view v-if="dataFrom.payType === 1 && userInfo.userRights" class="price-item">
<view style="color: #aaa; font-size: 24rpx">
当前权益等级：{{ userInfo.userRights.rights.rightsName }}
<text style="margin-left: 30rpx">
可享受折扣：
<text style="color: #ff2929">{{ userInfo.userRights.rights.rightsDiscount / 10 }}</text>
折
</text>
</view>
</view>
<!-- 权益货值支付 -->
<view class="price-item-pay" v-if="userInfo.userRights" :class="{ 'active-border': dataFrom.payType === 2 }" @click="dataFrom.payType = 2">
<view style="width: 350rpx; text-align: center" class="price-label">权益货值</view>
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
<text style="color: #aaa">可用抵扣：</text>
{{ userInfo.userRights.pice || 0 }}
</view>
</view>
<view v-if="dataFrom.payType === 2" class="price-item">
<view style="color: #aaa; font-size: 24rpx">提示：抵扣金额不足时，自动使用余额补足</view>
</view>
<!-- 混合支付 -->
<view class="price-item-pay" :class="{ 'active-border': dataFrom.payType === 3 }" @click="dataFrom.payType = 3" v-if="userInfo.userRights">
<view style="display: flex; align-items: center; justify-content: space-between; width: 100%">
<view style="width: 350rpx; text-align: center" class="price-label">混合支付</view>
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
<view v-if="totalAmount > userInfo.userRights.pice + userInfo.money">
<view>
<text style="color: #aaa">余额：</text>
{{ min(userInfo.money, totalAmount - userInfo.userRights.pice) }}
</view>
<view>
<text style="color: #aaa">抵扣：</text>
{{ min(userInfo.userRights.pice, totalAmount - userInfo.money) }}
</view>
</view>
<view v-else>
<view>
<text style="color: #aaa">余额：</text>
{{ max(0, totalAmount - userInfo.userRights.pice) }}
</view>
<view v-if="min(totalAmount - (totalAmount - userInfo.userRights.pice), userInfo.userRights.pice) > totalAmount">
<text style="color: #aaa">抵扣：</text>
{{ totalAmount }}
</view>
<view v-else>
<text style="color: #aaa">抵扣：</text>
{{ min(totalAmount - (totalAmount - userInfo.userRights.pice), userInfo.userRights.pice) }}
</view>
</view>
</view>
</view>
</view>
<view v-if="dataFrom.payType === 3" class="price-item">
<view style="color: #aaa; font-size: 24rpx">提示：混合支付时优先使用抵扣金额</view>
</view>
</view>
<view style="height: 130rpx"></view>
<!-- 底部结算栏 -->
<view class="footer">
<view class="total-price">
合计：
<text style="color: #ff2929">{{ formatPrice(paymentAmount) }}</text>
</view>
<view class="pay-button" @click="submitOrder">确认支付</view>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { toast } from '@/utils/fun.js';
import api from '@/api/index';
import { Store } from '@/store';
const store = Store();
// 用户信息
const userInfo = computed(() => {
if (!store.userInfo.userRights) {
dataFrom.value.payType = 1;
}
return (
store.userInfo || {
inviteCode: '',
nickname: '',
mobile: '',
avatar: '',
paywallet: { balance: 0 },
userRights: null
}
);
});
// 商品信息
const goods = ref({});
const address = ref(null);
// 表单数据
const dataFrom = ref({
goodsId: null,
goodsNum: 1,
totalAmount: 0,
payableAmount: 0,
payAmount: 0,
payType: 1,
receiverId: null,
note: '',
orderType: 1
});
// 计算总金额
const totalAmount = computed(() => {
return goods.value.currentPrice * dataFrom.value.goodsNum;
});
// 计算实际支付金额
const paymentAmount = computed(() => {
if (dataFrom.value.payType === 1) {
const discount = userInfo.value.userRights?.rights?.rightsDiscount || 100;
return (totalAmount.value * discount) / 100;
}
return totalAmount.value;
});
// 提交订单
const submitOrder = () => {
let data = JSON.parse(JSON.stringify(dataFrom.value));
if (!address.value) {
uni.showToast({
title: '请选择收货地址',
icon: 'none'
});
return;
}
uni.showLoading({
mask: true
});
// 设置收货地址
data.receiverId = address.value?.id;
if (data.payType == 1) {
// 设置支付金额
data.payAmount = paymentAmount.value;
data.totalAmount = totalAmount.value;
data.payableAmount = paymentAmount.value;
data.totalAmount = totalAmount.value;
}
if (data.payType == 2) {
// 设置抵扣金额
data.deductibleAmount = totalAmount.value;
data.totalAmount = totalAmount.value;
data.deductionAmount = totalAmount.value;
data.totalAmount = totalAmount.value;
}
if (data.payType == 3) {
if (userInfo.value.userRights.pice < totalAmount.value) {
data.deductibleAmount = userInfo.value.userRights.pice;
data.deductionAmount = userInfo.value.userRights.pice;
data.payAmount = totalAmount.value - userInfo.value.userRights.pice;
data.payableAmount = totalAmount.value - userInfo.value.userRights.pice;
data.totalAmount = totalAmount.value;
} else {
// 设置抵扣金额
data.deductibleAmount = totalAmount.value;
data.totalAmount = totalAmount.value;
data.deductionAmount = totalAmount.value;
data.totalAmount = totalAmount.value;
data.payType = 2;
}
}
api.orderCreate(data)
.then((res) => {
uni.hideLoading();
uni.navigateTo({
url: '/pages/order/success?id=' + res
});
})
.catch(() => {
uni.hideLoading();
});
};
// 加载数据
onLoad(async (options) => {
dataFrom.value.goodsId = options.id;
await store.usersGetInfo();
api.goodsInfo({ id: options.id }).then((res) => {
goods.value = res;
});
api.addressPage({ isDefault: 1 }).then((res) => {
if (res.list.length) {
address.value = res.list[0];
dataFrom.value.receiverId = address.value.id;
}
});
uni.$on('address', (e) => {
address.value = e;
});
});
// 工具函数
const min = (a, b) => Math.min(a, b);
const max = (a, b) => Math.max(a, b);
const formatPrice = (price) => `¥ ${parseFloat(price).toFixed(2)}`;
// 其他方法
const selectAddress = () => {
uni.navigateTo({
url: '/pages/address/list?type=1'
});
};
const viewProduct = () => {
uni.navigateTo({
url: '/pages/goods/goods?id=' + goods.value.id
});
};
const back = () => {
uni.navigateBack();
};
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
background-color: #f5f5f5;
position: relative;
}
.address-card {
margin: 25rpx;
margin-bottom: 0;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
}
.address-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.address-text {
flex: 1;
}
.province-city {
font-size: 15px;
margin-bottom: 5px;
}
.address-detail {
font-size: 14px;
color: #666;
}
.arrow-right {
color: #ccc;
font-size: 18px;
}
.product-section {
margin: 25rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 0;
}
.section-title {
font-size: 15px;
color: #333;
margin-bottom: 15px;
font-weight: 500;
}
.product-list {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-item {
display: flex;
align-items: center;
}
.product-image {
width: 80px;
height: 80px;
border-radius: 4px;
margin-right: 10px;
}
.product-info {
flex: 1;
}
.product-name {
font-size: 14px;
margin-bottom: 5px;
}
.product-spec {
font-size: 13px;
color: #999;
margin: 10rpx 0;
}
.product-price {
font-size: 36rpx;
font-weight: bold;
color: #ff2929;
}
.price-section {
margin: 25rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 0;
}
.price-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.price-item-pay {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15rpx;
padding: 24rpx 0rpx;
border: 1rpx solid #f7f7f7;
border-radius: 10rpx;
background-color: #f7f7f7;
}
.price-total {
display: flex;
align-items: center;
justify-content: space-between;
}
.price-label {
font-size: 14px;
color: #333;
}
.price-value {
font-size: 14px;
color: #333;
}
.total {
color: #ff2929;
font-weight: 500;
}
.remark-section {
margin: 25rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 0;
}
.remark-content {
border-radius: 16rpx;
border: 1rpx solid #f7f7f7;
overflow: hidden;
height: 100rpx;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
padding: 0 30rpx;
background-color: #fff;
border-top: 1rpx solid #eee;
}
.total-price {
font-size: 15px;
color: #333;
}
.pay-button {
background-color: #799675;
color: #fff;
font-size: 16px;
padding: 0 30px;
height: 36px;
line-height: 36px;
border-radius: 18px;
}
.active-border {
background-color: rgba(121, 150, 117, 0.1);
border: 1rpx solid #799675;
.price-label {
color: #799675;
}
}
</style>

344
pages/order/order.vue Normal file
View File

@@ -0,0 +1,344 @@
<template>
<view class="container">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
<!--
<view slot="top">
</view> -->
<!-- 订单列表 -->
<wd-navbar title="订单" safeAreaInsetTop></wd-navbar>
<!-- 顶部导航栏 -->
<view class="nav-tabs">
<!-- 订单状态：0 - 待付款，1 - 已完成，2 - 已取消,示例值(2) -->
<view class="tab-item" :class="queryFrom.orderStatus === '' ? 'active' : ''" @click="changeStatus('')">全部</view>
<view class="tab-item" :class="queryFrom.orderStatus === 0 ? 'active' : ''" @click="changeStatus(0)">待付款</view>
<view class="tab-item" :class="queryFrom.orderStatus == 1 ? 'active' : ''" @click="changeStatus(1)">已完成</view>
<view class="tab-item" :class="queryFrom.orderStatus == 2 ? 'active' : ''" @click="changeStatus(2)">已取消</view>
</view>
<view class="order-list">
<!-- 订单项1 - 待付款 -->
<view class="order-item" v-for="(item, index) in dataList" :key="index">
<view class="order-header">
<text class="order-id">{{ item.orderNo }}</text>
<text class="order-status pending" v-if="item.orderStatus === 0">待付款</text>
<text class="order-status completed" v-if="item.orderStatus == 1">已完成</text>
</view>
<view class="order-content">
<image class="product-image" :src="item.goods.cover" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">
<view>{{ item.goods.name }}</view>
</view>
<view class="product-spec">
<view>{{ item.goods.specs }}</view>
<view class="product-count">×{{ item.goodsNum }}</view>
</view>
<view class="product-price">
<view style="font-size: 26rpx" v-if="item.deductionAmount">已抵扣金额：￥{{ item.deductionAmount }}</view>
<view v-else></view>
<text style="font-weight: bold">¥{{ item.payableAmount }}</text>
</view>
</view>
</view>
<view class="order-footer">
<view class="order-time">{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}</view>
<view class="order-actions">
<!-- <view class="btn-cancel">取消订单</view> -->
<!-- <view class="btn-pay">去支付</view> -->
<view class="btn-buy-again" v-if="item.orderStatus == 1" @click="toGoods(item.goodsId)">再次购买</view>
</view>
</view>
</view>
<!-- <view class="order-item">
<view class="order-header">
<text class="order-id">GMZST202506040001</text>
<text class="order-status completed">已完成</text>
</view>
<view class="order-content">
<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">方愈苗药皮毒清软膏</view>
<view class="product-spec">12支/箱</view>
</view>
<view class="product-count">×230000</view>
<view class="product-price">¥50w</view>
</view>
<view class="order-footer">
<view class="order-time">2025-10-09 19:43:57</view>
<view class="order-actions">
<view class="btn-reorder">再来一单</view>
</view>
</view>
</view>
<view class="order-item">
<view class="order-header">
<text class="order-id">GMZST202506040001</text>
<text class="order-status cancelled">已取消</text>
</view>
<view class="order-content">
<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">方愈苗药皮毒清软膏</view>
<view class="product-spec">12支/箱</view>
</view>
<view class="product-count">×320000</view>
<view class="product-price">¥10w</view>
</view>
<view class="order-footer">
<view class="order-time">2025-10-09 19:43:57</view>
<view class="order-actions">
</view>
</view>
</view> -->
</view>
</z-paging>
</view>
</template>
<script setup lang="ts">
import api from '@/api/index';
import { ref } from 'vue';
import { timeFormat } from '@/utils/fun.js';
const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);
const queryFrom = ref({
orderType: 1,
payStatus: '',
orderStatus: ''
});
const changeStatus = (e) => {
queryFrom.value.orderStatus = e;
paging.value.reload();
};
const queryList = (pageNo, pageSize) => {
api.orderPage({ pageNo, pageSize, ...queryFrom.value })
.then((res: any) => {
paging.value.complete(res.list);
})
.catch((res) => {
paging.value.complete(false);
});
};
const toGoods = (e) => {
uni.navigateTo({
url: '/pages/goods/goods?id=' + e
});
};
</script>
<style scoped>
.container {
padding: 0;
background-color: #f5f5f5;
min-height: 100vh;
}
/* 导航标签样式 */
.nav-tabs {
display: flex;
/* justify-content: space-around; */
background-color: #ffffff;
padding: 24rpx 0;
border-bottom: 1rpx solid #eee;
}
.tab-item {
font-size: 15px;
color: #999;
position: relative;
padding: 0 10px;
z-index: 9;
}
.tab-item.active {
color: #333;
font-weight: bold;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0rpx;
right: 20rpx;
width: 40rpx;
height: 12rpx;
background: #627c54;
border-radius: 24rpx 24rpx 24rpx 24rpx;
z-index: 5;
opacity: 0.5;
}
/* 订单列表样式 */
.order-list {
padding: 10px;
}
.order-item {
background-color: #fff;
margin-bottom: 36rpx;
border-radius: 16rpx;
padding: 36rpx;
}
.order-header {
font-size: 28rpx;
display: flex;
justify-content: space-between;
border-bottom: 1rpx solid #eeeeee;
padding-bottom: 24rpx;
color: #232323;
}
.order-id {
font-size: 14px;
color: #333;
}
.order-status {
font-size: 14px;
font-weight: 500;
}
.pending {
color: #ff5722;
}
.completed {
color: #4caf50;
}
.cancelled {
color: #f44336;
}
.order-content {
display: flex;
padding: 20rpx 0;
}
.product-image {
width: 150rpx;
height: 150rpx;
border-radius: 8rpx;
margin-right: 20rpx;
background-color: #f0f0f0;
}
.product-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-name {
font-size: 28rpx;
color: #232323;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.product-spec {
font-size: 28rpx;
color: #666;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.product-count {
font-size: 24rpx;
color: #232323;
text-align: right;
}
.product-price {
font-size: 36rpx;
color: #ff3d3d;
/* font-weight: bold; */
text-align: right;
display: flex;
align-items: center;
justify-content: space-between;
}
.order-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0 0;
border-top: 1rpx solid #f5f5f5;
}
.order-time {
font-size: 24rpx;
color: #232323;
}
.order-actions {
display: flex;
gap: 10px;
}
.btn-cancel,
.btn-pay,
.btn-reorder,
.btn-buy-again {
width: 150rpx;
height: 56rpx;
border-radius: 28rpx;
/* border: 1rpx solid #999999; */
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
.btn-cancel {
border: 1rpx solid #999999;
color: #999;
}
.btn-pay {
color: #ff6f00;
border: 1rpx solid #ff6f00;
}
.btn-reorder {
color: #ffffff;
background-color: #458f3b;
border: none;
}
.btn-buy-again {
color: #ffffff;
background-color: #f44336;
border: none;
}
.btn-cancel:active,
.btn-pay:active,
.btn-reorder:active,
.btn-buy-again:active {
opacity: 0.8;
}
</style>

286
pages/order/success.vue Normal file
View File

File diff suppressed because one or more lines are too long