Waiting/suke-mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单详情

Browse Source
This commit is contained in:
Waiting
2024-03-12 22:24:36 +08:00
parent 0883e88df0
commit c17b70af2d
9 changed files with 464 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/pages/mall/subs/components/payment-dialog.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
<view class='popup-content c-flex-column'>
<view class='c-flex-row'>
<image :src='assetsUrl("ic_back.png")' @click.stop='close()' />
<text>选择支付方式</text>
</view>
<view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_WECHAT)'>
<image :src='assetsUrl("ic_wechat.png")' />
<text>微信支付</text>
<image :src='assetsUrl(currentType===PAYMENT_TYPE_WECHAT?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
</view>
<view class='divider' style='margin: 40rpx 0' />
<view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_BALANCE)'>
<image :src='assetsUrl("ic_balance.png")' />
<text>余额（剩余￥100）</text>
<image :src='assetsUrl(currentType===PAYMENT_TYPE_BALANCE?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
</view>
</view>
</uni-popup>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
const popupRef = ref();
const PAYMENT_TYPE_WECHAT = 0;
const PAYMENT_TYPE_BALANCE = 1;
const currentType = ref(PAYMENT_TYPE_WECHAT);
const emits = defineEmits(['change']);
const show = () => {
popupRef.value.open();
};
const close = () => {
popupRef.value.close();
};
const doPayment = (paymentType: number) => {
emits('change', paymentType);
currentType.value = paymentType;
switch (paymentType) {
case PAYMENT_TYPE_WECHAT:
console.log('PAYMENT_TYPE_WECHAT');
break;
case PAYMENT_TYPE_BALANCE:
console.log('PAYMENT_TYPE_BALANCE');
break;
}
close();
};
defineExpose({
show
});
</script>
<style lang='scss' scoped>
.popup-content {
background: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
padding: 38rpx 45rpx 140rpx 45rpx;
view:nth-of-type(1) {
display: flex;
margin-bottom: 70rpx;
position: relative;
image {
width: 35rpx;
height: 35rpx;
align-self: flex-start;
}
text {
font-weight: bold;
font-size: 30rpx;
color: #333333;
position: absolute;
left: 0;
right: 0;
text-align: center;
}
}
view:nth-of-type(n+2) {
image:nth-of-type(1) {
width: 47rpx;
height: 47rpx;
}
text {
align-self: center;
flex: 1;
font-weight: 400;
font-size: 30rpx;
color: #333333;
margin-left: 23rpx;
}
image:nth-of-type(2) {
width: 35rpx;
height: 35rpx;
}
}
}
</style>

20
src/pages/mall/subs/order/order-confirm.vue
View File

@@ -81,9 +81,9 @@
</view>
</view>
<view class='payment-way c-flex-row'>
<view class='payment-way c-flex-row' @click.stop='changePayment'>
<text>支付方式</text>
<view>微信支付
<view>{{ paymentType === 0 ? '微信支付' : '余额' }}
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
</view>
</view>
@@ -91,16 +91,28 @@
<view class='bottom-view c-flex-row'>
<text>合计</text>
<text>￥29.90</text>
<text>确认订单</text>
<text @click.stop='payment'>确认订单</text>
</view>
</view>
<payment-dialog ref='paymentDialogRef' @change='args => paymentType=args' />
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import PaymentDialog from '../components/payment-dialog.vue';
const paymentDialogRef = ref();
const paymentType = ref(0);
const tabIndex = ref(0);
const changePayment = () => {
console.log(paymentDialogRef);
paymentDialogRef.value.show();
};
const payment = () => {
};
</script>
<style lang='scss' scoped>

3
src/pages/mine/subs/order/components/order-item.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class='card-view'>
<view class='card-view' @click.stop='goPath("/pages/mine/subs/order/order-detail")'>
<view class='goods-info-view c-flex-row'>
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
<view class='c-flex-column' style='flex: 1;'>
@@ -36,6 +36,7 @@
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
defineProps({
item: Object

335
src/pages/mine/subs/order/order-detail.vue
View File

@@ -1,11 +1,346 @@
<template>
<view class='content'>
<view class='countdown c-flex-row'>
<image :src='assetsUrl("ic_order.png")' />
<view class='c-flex-column'>
<text>
待支付
</text>
<view class='c-flex-row'>
<image :src='assetsUrl("ic_time.png")' />
<text>支付剩余时间
<text style='color: #F32B2B'>05:23</text>
</text>
</view>
</view>
</view>
<view class='address-view c-flex-column'>
<view class='user-info c-flex-row'>
<text>默认</text>
<text>黄先生</text>
<text>155****6532</text>
<view style='flex: 1' />
<text style='color: #5B96FB'>复制</text>
</view>
<view class='addr c-flex-row'>
<image :src='assetsUrl("ic_location.png")' />
<text>湖南省 长沙市 详细地址详细地址详细地址</text>
</view>
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
</view>
<view class='goods-info-view c-flex-column'>
<view class='c-flex-row'>
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
<view class='c-flex-column' style='flex: 1;'>
<view class='c-flex-row'>
<text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
</view>
<text style='color: #999999;margin-top: 30rpx'>
2356235654
</text>
<view class='bottom-view c-flex-row'>
<text>
紫色，120cm x1
</text>
<text>23.20</text>
</view>
</view>
</view>
<view class='divider' />
<view class='remark-view c-flex-row'>
<text style='flex: 1'>备注</text>
<text>无备注</text>
</view>
</view>
<view class='card-view'>
<view class='c-flex-row'>
<text class='card-view-title'>商品总价</text>
<text class='card-view-value'>￥29.90</text>
</view>
<view class='c-flex-row'>
<text class='card-view-title'>运费</text>
<text class='card-view-value'>￥8</text>
</view>
<view class='c-flex-row'>
<text class='card-view-title'>优惠券
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
</text>
<text class='card-view-value' style='color: #F32B2B;margin: 0'>-￥20
</text>
</view>
<view class='divider' />
<view class='c-flex-row'>
<view style='flex: 1' />
<view class='c-flex-row'>
<text class='card-view-value'>共1件商品 合计：
<text style='font-size: 34rpx;color:#F32B2B'>¥29.90</text>
</text>
</view>
</view>
</view>
<view class='order-no c-flex-column'>
<text>订单编号：1524625555555
<text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
</text>
<text>下单时间：2022-02-22 12：22：55</text>
</view>
<view class='bottom-action-view c-flex-row'>
<text @click.stop='cancel'>取消订单</text>
<text @click.stop='payment'>立即支付</text>
</view>
</view>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
const cancel = () => {
};
const payment = () => {
};
</script>
<style lang='scss' scoped>
.content {
padding: 20rpx 30rpx;
}
.countdown {
padding: 10rpx 30rpx 30rpx 30rpx;
image:nth-of-type(1) {
width: 60rpx;
height: 74rpx;
}
view:not(.c-flex-row):nth-of-type(1) {
margin-left: 23rpx;
text:nth-of-type(1) {
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
view:nth-of-type(1) {
margin-top: 5rpx;
image {
width: 30rpx;
height: 30rpx;
}
text {
font-weight: 400;
font-size: 26rpx;
color: #333333;
margin-left: 8rpx;
}
}
}
}
.address-view {
padding-top: 38rpx;
background: #FFFFFF;
.user-info {
margin-left: 20rpx;
margin-right: 20rpx;
text:nth-of-type(1) {
padding: 2rpx 10rpx;
font-size: 24rpx;
color: #F32B2B;
border-radius: 5rpx;
border: 1rpx solid #F32B2B;
margin-right: 12rpx;
}
text:nth-of-type(n+2) {
font-weight: bold;
font-size: 30rpx;
color: #333333;
margin-left: 10rpx;
}
image {
width: 8rpx;
height: 16rpx;
}
}
.addr {
margin-top: 15rpx;
margin-left: 20rpx;
image {
width: 30rpx;
height: 37rpx;
}
text {
font-weight: 400;
font-size: 26rpx;
color: #999999;
margin-left: 16rpx;
}
}
.dashed-line {
width: 100%;
height: 8rpx;
margin-top: 37rpx;
}
}
.goods-info-view {
display: flex;
position: relative;
background: #FFFFFF;
margin-top: 20rpx;
border-radius: 10rpx;
padding: 30rpx 20rpx;
.goods-image {
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
margin-right: 20rpx;
}
.goods-name {
font-size: 30rpx;
font-weight: 400;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
margin-right: 20rpx;
color: #333333;
flex: 1;
}
.bottom-view {
display: flex;
justify-content: space-between;
margin-top: 10rpx;
text:nth-of-type(1) {
font-size: 26rpx;
font-weight: 400;
flex: 1;
color: #999999;
}
text:nth-of-type(2) {
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
text:nth-of-type(2):before {
content: '￥';
}
text:nth-of-type(3) {
font-size: 34rpx;
color: #333333;
font-weight: bold;
}
}
.divider {
margin: 30rpx 0;
}
.remark-view {
text {
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
}
.card-view {
margin-top: 20rpx;
padding: 0 25rpx 0 23rpx;
view:not(.divider):nth-of-type(n+1) {
margin: 20rpx 0;
.card-view-title {
font-weight: 400;
font-size: 30rpx;
color: #333333;
flex: 1;
}
.card-view-value {
font-weight: 400;
font-size: 26rpx;
color: #333333;
image {
width: 8rpx;
height: 16rpx;
margin-left: 16rpx;
}
}
}
}
.order-no {
background: #FFFFFF;
border-radius: 10rpx;
padding: 22rpx 23rpx;
margin-top: 20rpx;
margin-bottom: 200rpx;
text:nth-of-type(n+1) {
font-weight: 400;
font-size: 26rpx;
color: #333333;
}
text:nth-of-type(1) {
margin-bottom: 12rpx;
}
}
.bottom-action-view {
background: #FFFFFF;
position: fixed;
justify-content: flex-end;
bottom: 0;
left: 0;
right: 0;
padding: 12rpx 30rpx 78rpx 30rpx;
text:nth-of-type(1) {
font-weight: 400;
font-size: 30rpx;
color: #333333;
border-radius: 34rpx;
padding: 17rpx 45rpx;
border: 1rpx solid #707070;
margin-right: 20rpx;
}
text:nth-of-type(2) {
padding: 17rpx 45rpx;
border-radius: 43rpx;
border: 1rpx solid #F32B2B;
font-weight: bold;
font-size: 30rpx;
color: #F32B2B;
}
}
</style>

BIN
src/static/images/ic_back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

BIN
src/static/images/ic_balance.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/static/images/ic_order.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/static/images/ic_wechat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

3
src/store/modules/user/index.ts
View File

@@ -68,7 +68,8 @@ const useUserStore = defineStore('user', {
...wechatUserInfo.userInfo,
encryptedData: wechatUserInfo?.encryptedData,
rawData: JSON.parse(wechatUserInfo?.rawData),
signature: wechatUserInfo?.signature
signature: wechatUserInfo?.signature,
iv: wechatUserInfo.iv
};
const res = await login({