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-14 18:23:33 +08:00
parent 0602dc6c72
commit 9dda08a1b1
14 changed files with 602 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages.json
View File

@@ -79,6 +79,12 @@
"style": {
"navigationBarTitleText": "确认订单"
}
},
{
"path": "shoppingcart/index",
"style": {
"navigationBarTitleText": "购物车"
}
}
]
},
@@ -91,6 +97,12 @@
"navigationBarTitleText": "会员信息"
}
},
{
"path": "integral/index",
"style": {
"navigationBarTitleText": "我的积分"
}
},
{
"path": "recharge/index",
"style": {

11
src/pages/common/groupbuy/index.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

4
src/pages/home/index.vue
View File

@@ -17,12 +17,12 @@
<view class='user-info-card'>
<image class='user-avatar' :src='userInfo.image' mode='aspectFill' />
<text class='user-name primary-text-color'>{{ userInfo?.nickName }}</text>
<view class='integral-view primary-text-color'>
<view class='integral-view primary-text-color' @click.stop='goPath("/pages/mine/subs/integral/index")'>
<text>{{ userInfo?.integration }}</text>
<text>积分</text>
</view>
<view class='divider' style='height: 83rpx' />
<view class='balance-view'>
<view class='balance-view' @click.stop='goPath("/pages/mine/subs/recharge/index")'>
<text class='accent-text-color'>{{ userInfo?.balance }}</text>
<text>余额（元）</text>
</view>

2
src/pages/mall/index.vue
View File

@@ -29,7 +29,7 @@
</scroll-view>
</view>
<view class='shopping-cart'>
<view class='shopping-cart' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
<image :src='assetsUrl("ic_shopping_cart.png")' />
<text>10</text>
</view>

120
src/pages/mall/subs/components/coupon-dialog.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<uni-popup type='bottom' ref='popupRef' :mask-click='false'>
<view class='popup-content c-flex-column'>
<view class='c-flex-row'>
<text>优惠券</text>
<text @click.stop='close'>确定</text>
</view>
<scroll-view>
<coupon-item v-for='item in coupons' :item='item' />
</scroll-view>
</view>
</uni-popup>
</template>
<script lang='ts' setup>
import CouponItem from '../components/coupon-item.vue';
const popupRef = ref();
const coupons = [{
id: 1,
title: '优惠券',
desc: '满100减10',
price: 100,
threshold: 10,
priceDesc: '满100减10',
useTime: '2021-12-31',
status: 1,
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满100减10',
price: 200,
threshold: 80,
priceDesc: '满100减10',
useTime: '2021-01-01',
status: 1,
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满100减10',
price: 300,
threshold: 60,
priceDesc: '满100减10',
useTime: '2023-12-31',
status: '0',
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满100减10',
price: 50,
threshold: 50,
priceDesc: '满100减10',
useTime: '2021-10-31',
status: 0,
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满1000减30',
price: 200,
threshold: 30,
priceDesc: '满100减10',
useTime: '2024-12-31',
status: 0,
useStatus: '未使用'
}];
const show = () => {
popupRef.value.open();
};
const close = () => {
popupRef.value.close();
};
defineExpose({
show
});
</script>
<style lang='scss' scoped>
.popup-content {
background: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
padding: 38rpx 45rpx 0 45rpx;
view:nth-of-type(1) {
display: flex;
margin-bottom: 70rpx;
position: relative;
text:nth-of-type(1) {
font-weight: bold;
font-size: 30rpx;
color: #333333;
position: absolute;
left: 0;
right: 0;
text-align: center;
}
text:nth-of-type(2) {
font-weight: bold;
font-size: 30rpx;
color: #F32B2B;
position: absolute;
right: 0;
}
}
scroll-view {
max-height: 600rpx;
}
}
</style>

111
src/pages/mall/subs/components/coupon-item.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<view class='coupon-content'>
<image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
<image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
<view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
<text>{{ item.price }}</text>
<text>满{{ item.threshold }}元可用</text>
</view>
<view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
<text>{{ item?.title }}</text>
<text>有效期至{{ item.useTime }}</text>
<image class='checkbox' :src='assetsUrl("ic_checkbox_active.png")' />
</view>
</view>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
defineProps({
item: Object
});
</script>
<style lang='scss' scoped>
.coupon-content {
display: flex;
flex-direction: row;
height: 200rpx;
position: relative;
margin: 10rpx 0 10rpx 0;
image {
width: 100%;
height: 100%;
position: absolute;
}
.left-content {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
padding-left: 50rpx;
text:nth-of-type(1) {
font-size: 55rpx;
font-weight: bold;
}
text:nth-of-type(1):after {
content: '元';
font-size: 24rpx;
}
text:nth-of-type(2) {
font-size: 26rpx;
font-weight: 400;
}
}
.left-content-disabled {
@extend .left-content;
color: #C2C2C2;
}
.right-content {
display: flex;
flex-direction: column;
position: relative;
flex: 1;
justify-content: center;
margin-left: 100rpx;
text:nth-of-type(1) {
font-size: 30rpx;
}
text:nth-of-type(2) {
font-size: 26rpx;
margin-top: 20rpx;
color: #333333;
}
.checkbox {
display: flex;
width: 42rpx;
height: 42rpx;
align-items: center;
justify-content: center;
font-weight: bold;
position: absolute;
right: 36rpx;
}
}
.right-content-disabled {
@extend .right-content;
color: #C2C2C2;
text:nth-of-type(2) {
color: #C2C2C2;
}
}
}
</style>

3
src/pages/mall/subs/goods/goods-detail.vue
View File

@@ -63,7 +63,7 @@
</view>
<view class='small-button-item'>
<view class='shoppingcart-count'>
<view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
<image :src='assetsUrl("ic_goods_shoppingcart.png")' />
<text>12</text>
</view>
@@ -78,7 +78,6 @@
</view>
</view>
<sku-dialog ref='skuDialogRef' />
</template>
<script lang='ts' setup>

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

@@ -62,7 +62,7 @@
<text class='card-view-title'>运费</text>
<text class='card-view-value'>￥8</text>
</view>
<view class='c-flex-row'>
<view class='c-flex-row' @click.stop='showCouponDialog'>
<text class='card-view-title'>优惠券
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
</text>
@@ -95,12 +95,15 @@
</view>
</view>
<payment-dialog ref='paymentDialogRef' @change='args => paymentType=args' />
<coupon-dialog ref='couponDialogRef' />
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import PaymentDialog from '../components/payment-dialog.vue';
import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
const couponDialogRef = ref();
const paymentDialogRef = ref();
const paymentType = ref(0);
const tabIndex = ref(0);
@@ -110,6 +113,10 @@ const changePayment = () => {
paymentDialogRef.value.show();
};
const showCouponDialog = () => {
couponDialogRef.value.show();
};
const payment = () => {
};

237
src/pages/mall/subs/shoppingcart/index.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<view class='content'>
<view class='c-flex-row'>
<text class='manage' @click.stop='isEditMode = !isEditMode'>管理</text>
</view>
<view class='card-view'>
<scroll-view>
<view class='c-flex-column' v-for='(item, index) in [1,2,3,5]' :key='index'>
<view class='c-flex-row'>
<image v-show='isEditMode' class='checkbox' :src='assetsUrl("ic_checkbox_active_red.png")' />
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
<view class='c-flex-column'>
<text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装
</text>
<view class='sku-view'>
<text>紫色，120cm x1</text>
<image :src='assetsUrl("ic_arrow_down_gray.png")' />
</view>
<text>￥29.90</text>
<view class='count-change-view c-flex-row'>
<view class='count-image' @click.stop='countChange(false)'>
<image :src='assetsUrl("ic_reduce.png")' />
</view>
<text>{{ goodsCount }}</text>
<view class='count-image' @click.stop='countChange(true)'>
<image :src='assetsUrl("ic_plus.png")' />
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class='bottom-view c-flex-row'>
<view class='c-flex-row' @click.stop='checkedAll = !checkedAll'>
<image :src='assetsUrl(checkedAll?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
<text>全选</text>
</view>
<view style='flex: 1' />
<text>合计：
<text>￥29.90</text>
</text>
<text class='settlement' @click.stop='settlement'>结算</text>
</view>
</view>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
const isEditMode = ref(false);
const checkedAll = ref(false);
const goodsCount = ref(1);
const countChange = (isPlus: Boolean) => {
};
const settlement = () => {
};
</script>
<style lang='scss' scoped>
.content {
position: relative;
.manage {
width: 100%;
font-weight: 400;
font-size: 30rpx;
color: #333333;
background: #FFFFFF;
align-self: flex-end;
padding: 20rpx 30rpx;
text-align: end;
}
.card-view {
margin: 30rpx;
border-radius: 10rpx;
background: #FFFFFF;
padding: 10rpx 20rpx 20rpx 17rpx;
.c-flex-column:nth-of-type(1) {
margin: 20rpx 0;
}
view:nth-of-type(1) {
.checkbox {
width: 35rpx;
height: 35rpx;
margin-right: 20rpx;
}
.goods-image {
width: 186rpx;
height: 186rpx;
border-radius: 10rpx;
}
.c-flex-column {
flex: 1;
height: 186rpx;
margin-left: 20rpx;
position: relative;
text:nth-of-type(1) {
font-weight: 400;
font-size: 28rpx;
color: #333333;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.sku-view {
display: flex;
flex-direction: row;
width: 210rpx;
position: relative;
background: #F2F2F2;
margin-top: 10rpx;
align-items: center;
border-radius: 22rpx;
padding: 5rpx 20rpx;
text {
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
image {
width: 20rpx;
height: 20rpx;
margin-left: 13rpx;
}
}
text:nth-of-type(2) {
display: flex;
font-weight: bold;
font-size: 32rpx;
color: #333333;
margin-top: 20rpx;
}
.count-change-view {
position: absolute;
right: 0;
bottom: 0;
.count-image {
display: flex;
align-items: center;
justify-content: center;
width: 54rpx;
height: 54rpx;
background: #FBFBFB;
image {
width: 15rpx;
height: 2rpx;
}
}
.count-image:nth-of-type(2) image {
width: 17rpx;
height: 17rpx;
}
text {
display: flex;
width: 54rpx;
height: 54rpx;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 30rpx;
color: #333333;
background: #F2F2F2;
}
}
}
}
}
.bottom-view {
background: #FFFFFF;
position: fixed;
padding: 12rpx 30rpx 78rpx 30rpx;
bottom: 0;
left: 0;
right: 0;
image {
width: 35rpx;
height: 35rpx;
}
.c-flex-row:nth-of-type(1) {
text {
margin-left: 10rpx;
font-size: 28rpx;
color: #333333;
}
}
text:nth-of-type(1) {
font-size: 30rpx;
color: #333333;
text {
font-weight: bold;
font-size: 36rpx;
color: #F32B2B;
}
}
.settlement {
display: flex;
background: #F32B2B;
border-radius: 43rpx;
padding: 17rpx 75rpx;
font-weight: bold;
font-size: 30rpx;
color: #FFFFFF;
margin-left: 37rpx;
align-items: center;
justify-content: center;
}
}
}
</style>

2
src/pages/mine/index.vue
View File

@@ -18,7 +18,7 @@
</view>
<view class='bottom-row'>
<view>
<view @click.stop='goPath("/pages/mine/subs/integral/index")'>
<text>{{ userInfo.integration }}</text>
<text>积分</text>
</view>

45
src/pages/mine/subs/integral/components/integral-item.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<view class='card-view'>
<text class='category-title'>2023-02-12</text>
<view class='item c-flex-column' v-for='(item,index) in 3' :key='index'>
<view class='c-flex-row'>
<text class='primary-text-color' style='flex: 1'>消费</text>
<text class='accent-text-color'>-30</text>
</view>
<view class='c-flex-row'>
<text class='secondary-text-color' style='flex: 1'>2023-06-27 15:02:11</text>
<text style='color: #999999'>会员积分：￥30.00</text>
</view>
<view class='divider' style='margin-top: 20rpx'/>
</view>
</view>
</template>
<script lang='ts' setup>
defineProps({
item: Object
});
</script>
<style lang='scss' scoped>
.card-view {
display: flex;
flex-direction: column;
padding: 16rpx 23rpx 20rpx 30rpx;
margin: 20rpx 0;
}
.category-title {
font-size: 34rpx;
font-weight: bold;
color: #333333;
}
.item {
margin: 10rpx 0;
view:nth-of-type(2) {
margin-top: 10rpx;
}
}
</style>

53
src/pages/mine/subs/integral/index.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<view class='content'>
<view class='top-view c-flex-column'>
<text>2520</text>
<text>会员积分</text>
</view>
<text class='integral-detail-title'>积分明细</text>
<scroll-view style='margin: 10rpx 20rpx'>
<integral-item v-for='(item,index) in tradeList' :key='index' :item='item' />
</scroll-view>
</view>
</template>
<script lang='ts' setup>
import IntegralItem from '@/pages/mine/subs/integral/components/integral-item.vue';
const tradeList = ref([1, 2, 3, 4, 5]);
</script>
<style lang='scss' scoped>
.top-view {
height: 195rpx;
background: linear-gradient(#F32B2B, #F95D5D);
align-items: center;
justify-content: center;
text:nth-of-type(1) {
font-weight: 400;
font-size: 50rpx;
color: #FFFFFF;
}
text:nth-of-type(2) {
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
margin-top: 10rpx;
}
}
.integral-detail-title {
margin: 20rpx 24rpx;
font-weight: bold;
font-size: 30rpx;
color: #333333;
position: relative;
}
scroll-view{
width: auto;
}
</style>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 641 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB