hxx/uni-shop-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: hxx:dd5010ddc78f2691e4905726687f3bbf6ce6ab5e
Branches Tags
hxx:main
...
compare: hxx:4407595d0ef1769bd4eab04ef34446b4fcc8e9e7
Branches Tags
hxx:main

10 Commits
dd5010ddc7 ... 4407595d0e

Author SHA1 Message Date
jqtmviyu
4407595d0e fix: 🐛 h5 我的页面 猜你喜欢 样式错误 2025-05-15 16:25:38 +08:00
jqtmviyu
c9db3c7a14 fix: 🐛 订单列表页骨架屏h5样式兼容 2025-05-15 16:15:16 +08:00
jqtmviyu
94588b7aed fix: 🐛 订单详情页骨架屏h5样式兼容 2025-05-15 16:11:04 +08:00
jqtmviyu
c36754e5ca fix: 🐛 分类页骨架屏h5样式兼容 2025-05-15 15:56:23 +08:00
jqtmviyu
594a1024a0 fix: 🐛 商品详情页骨架屏h5样式兼容 2025-05-15 15:54:01 +08:00
jqtmviyu
521739000d fix: 🐛 hot 热门页 h5 样式错误: 使用空白的<template>标签包裹 2025-05-15 15:23:00 +08:00
jqtmviyu
8446cd72cb fix: 🐛 重新生成首页骨架屏 2025-05-15 15:12:25 +08:00
jqtmviyu
fb840234cd fix: 🐛 uni-navigator添加 :render-link="false" 属性, 去掉编译成h5自动添加的a标签 2025-05-15 15:00:48 +08:00
jqtmviyu
7adca6685d feat: ✨ h5 样式兼容 2025-05-15 10:40:22 +08:00
jqtmviyu
2ac3cd88f5 feat: ✨ 订单列表 2025-05-13 20:19:48 +08:00
32 changed files with 2810 additions and 1278 deletions
Show Stats Expand all files Collapse all files

1
src/components/JbcGuess.vue
View File

@ -5,6 +5,7 @@
</view>
<view class="guess">
<navigator
:render-link="false"
class="guess-item"
v-for="item in guessList"
:key="item.id"

39
src/components/JbcSwiper.vue
View File

@ -8,7 +8,12 @@
@change="handleChange"
>
<swiper-item v-for="item in props.list" :key="item.id">
<navigator url="/pages/index/index" hover-class="none" class="navigator">
<navigator
:render-link="false"
url="/pages/index/index"
hover-class="none"
class="navigator"
>
<image mode="aspectFill" class="image" :src="item.imgUrl"></image>
</navigator>
</swiper-item>
@ -49,35 +54,5 @@ watch(
</script>
<style lang="scss">
/* 轮播图 */
.carousel {
height: 280rpx;
position: relative;
overflow: hidden;
transform: translateY(0);
background-color: #efefef;
.indicator {
position: absolute;
left: 0;
right: 0;
bottom: 16rpx;
display: flex;
justify-content: center;
.dot {
width: 30rpx;
height: 6rpx;
margin: 0 8rpx;
border-radius: 6rpx;
background-color: rgba(255, 255, 255, 0.4);
}
.active {
background-color: #fff;
}
}
.navigator,
.image {
width: 100%;
height: 100%;
}
}
@import '@/components/styles/JbcSwiper.scss';
</style>

31
src/components/styles/JbcSwiper.scss Normal file
View File

@ -0,0 +1,31 @@
/* 轮播图 */
.carousel {
height: 280rpx;
position: relative;
overflow: hidden;
transform: translateY(0);
background-color: #efefef;
.indicator {
position: absolute;
left: 0;
right: 0;
bottom: 16rpx;
display: flex;
justify-content: center;
.dot {
width: 30rpx;
height: 6rpx;
margin: 0 8rpx;
border-radius: 6rpx;
background-color: rgba(255, 255, 255, 0.4);
}
.active {
background-color: #fff;
}
}
.navigator,
.image {
width: 100%;
height: 100%;
}
}

6
src/manifest.json
View File

@ -48,6 +48,12 @@
},
/* 快应用特有相关 */
"quickapp": {},
/* H5特有相关 */
"h5": {
"router": {
"base": "./"
}
},
/* 小程序特有相关 */
"mp-weixin": {
"appid": "",

10
src/pages/cart/components/cartMain.vue
View File

@ -22,6 +22,7 @@
:class="{ checked: item.selected }"
></text>
<navigator
:render-link="false"
:url="`/pages/goods/goods?id=${item.id}`"
hover-class="none"
class="navigator"
@ -60,7 +61,12 @@
<view class="cart-blank" v-else>
<image src="/static/images/blank_cart.png" class="image" />
<text class="text">购物车还是空的，快来挑选好货吧</text>
<navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
<navigator
:render-link="false"
open-type="switchTab"
url="/pages/index/index"
hover-class="none"
>
<button class="button">去首页看看</button>
</navigator>
</view>
@ -83,7 +89,7 @@
<!-- 未登录: 提示登录 -->
<view class="login-blank" v-else>
<text class="text">登录后可查看购物车中的商品</text>
<navigator url="/pages/login/login" hover-class="none">
<navigator :render-link="false" url="/pages/login/login" hover-class="none">
<button class="button">去登录</button>
</navigator>
</view>

138
src/pages/category/category.scss Normal file
View File

@ -0,0 +1,138 @@
page {
height: 100%;
overflow: hidden;
}
.viewport {
height: 100%;
display: flex;
flex-direction: column;
}
.search {
padding: 0 30rpx 20rpx;
background-color: #fff;
.input {
display: flex;
align-items: center;
justify-content: space-between;
height: 64rpx;
padding-left: 26rpx;
color: #8b8b8b;
font-size: 28rpx;
border-radius: 32rpx;
background-color: #f3f4f4;
}
}
.icon-search {
&::before {
margin-right: 10rpx;
}
}
/* 分类 */
.categories {
flex: 1;
min-height: 400rpx;
display: flex;
}
/* 一级分类 */
.primary {
overflow: hidden;
width: 180rpx;
flex: none;
background-color: #f6f6f6;
.item {
display: flex;
justify-content: center;
align-items: center;
height: 96rpx;
font-size: 26rpx;
color: #595c63;
position: relative;
&::after {
content: '';
position: absolute;
left: 42rpx;
bottom: 0;
width: 96rpx;
border-top: 1rpx solid #e3e4e7;
}
}
.active {
background-color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 8rpx;
height: 100%;
background-color: #27ba9b;
}
}
}
.primary .item:last-child::after,
.primary .active::after {
display: none;
}
/* 二级分类 */
.secondary {
background-color: #fff;
.carousel {
height: 200rpx;
margin: 0 30rpx 20rpx;
border-radius: 4rpx;
overflow: hidden;
}
.panel {
margin: 0 30rpx 0rpx;
}
.title {
height: 60rpx;
line-height: 60rpx;
color: #333;
font-size: 28rpx;
border-bottom: 1rpx solid #f7f7f8;
.more {
float: right;
padding-left: 20rpx;
font-size: 24rpx;
color: #999;
}
}
.more {
&::after {
font-family: 'erabbit' !important;
content: '\e6c2';
}
}
.section {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 20rpx 0;
.goods {
width: 150rpx;
margin: 0rpx 30rpx 20rpx 0;
&:nth-child(3n) {
margin-right: 0;
}
image {
width: 150rpx;
height: 150rpx;
}
.name {
padding: 5rpx;
font-size: 22rpx;
color: #333;
}
.price {
padding: 5rpx;
font-size: 18rpx;
color: #cf4444;
}
.number {
font-size: 24rpx;
margin-left: 2rpx;
}
}
}
}

140
src/pages/category/category.vue
View File

@ -33,6 +33,7 @@
</view>
<view class="section">
<navigator
:render-link="false"
v-for="goods in item.goods"
:key="goods.id"
class="goods"
@ -112,142 +113,5 @@ onLoad(async () => {
</script>
<style lang="scss">
page {
height: 100%;
overflow: hidden;
}
.viewport {
height: 100%;
display: flex;
flex-direction: column;
}
.search {
padding: 0 30rpx 20rpx;
background-color: #fff;
.input {
display: flex;
align-items: center;
justify-content: space-between;
height: 64rpx;
padding-left: 26rpx;
color: #8b8b8b;
font-size: 28rpx;
border-radius: 32rpx;
background-color: #f3f4f4;
}
}
.icon-search {
&::before {
margin-right: 10rpx;
}
}
/* 分类 */
.categories {
flex: 1;
min-height: 400rpx;
display: flex;
}
/* 一级分类 */
.primary {
overflow: hidden;
width: 180rpx;
flex: none;
background-color: #f6f6f6;
.item {
display: flex;
justify-content: center;
align-items: center;
height: 96rpx;
font-size: 26rpx;
color: #595c63;
position: relative;
&::after {
content: '';
position: absolute;
left: 42rpx;
bottom: 0;
width: 96rpx;
border-top: 1rpx solid #e3e4e7;
}
}
.active {
background-color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 8rpx;
height: 100%;
background-color: #27ba9b;
}
}
}
.primary .item:last-child::after,
.primary .active::after {
display: none;
}
/* 二级分类 */
.secondary {
background-color: #fff;
.carousel {
height: 200rpx;
margin: 0 30rpx 20rpx;
border-radius: 4rpx;
overflow: hidden;
}
.panel {
margin: 0 30rpx 0rpx;
}
.title {
height: 60rpx;
line-height: 60rpx;
color: #333;
font-size: 28rpx;
border-bottom: 1rpx solid #f7f7f8;
.more {
float: right;
padding-left: 20rpx;
font-size: 24rpx;
color: #999;
}
}
.more {
&::after {
font-family: 'erabbit' !important;
content: '\e6c2';
}
}
.section {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 20rpx 0;
.goods {
width: 150rpx;
margin: 0rpx 30rpx 20rpx 0;
&:nth-child(3n) {
margin-right: 0;
}
image {
width: 150rpx;
height: 150rpx;
}
.name {
padding: 5rpx;
font-size: 22rpx;
color: #333;
}
.price {
padding: 5rpx;
font-size: 18rpx;
color: #cf4444;
}
.number {
font-size: 24rpx;
margin-left: 2rpx;
}
}
}
}
@import './category.scss';
</style>

35
src/pages/category/components/PageSkeleton.vue
View File

@ -48,7 +48,11 @@
transform: translate(0%, 0px) translateZ(0px);
"
>
<navigator class="navigator JbcSwiper--navigator" hover-class="none">
<navigator
:render-link="false"
class="navigator JbcSwiper--navigator"
hover-class="none"
>
<image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
</navigator>
</swiper-item>
@ -60,7 +64,11 @@
transform: translate(100%, 0px) translateZ(0px);
"
>
<navigator class="navigator JbcSwiper--navigator" hover-class="none">
<navigator
:render-link="false"
class="navigator JbcSwiper--navigator"
hover-class="none"
>
<image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
</navigator>
</swiper-item>
@ -79,7 +87,7 @@
<text class="name sk-transparent sk-text-27-2727-635 sk-text">居家生活用品</text>
</view>
<view class="section section">
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
<view class="name ellipsis sk-transparent sk-text-14-2857-313 sk-text"
>钻石陶瓷涂层多用锅18cm 小奶锅</view
@ -89,7 +97,7 @@
<text class="number sk-transparent sk-text-14-2857-254 sk-text">149.00</text>
</view>
</navigator>
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
<view class="name ellipsis sk-transparent sk-text-14-2857-51 sk-text"
>极光限定 珠光蓝珐琅锅</view
@ -106,7 +114,7 @@
<text class="name sk-transparent sk-text-27-2727-249 sk-text">收纳</text>
</view>
<view class="section section">
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
<view class="name ellipsis sk-transparent sk-text-14-2857-70 sk-text"
>给衣柜减减肥，真空防潮压缩袋</view
@ -116,7 +124,7 @@
<text class="number sk-transparent sk-text-14-2857-442 sk-text">79.00</text>
</view>
</navigator>
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
<view class="name ellipsis sk-transparent sk-text-14-2857-343 sk-text"
>爆款明星好物，抽屉式透明储物柜</view
@ -126,7 +134,7 @@
<text class="number sk-transparent sk-text-14-2857-258 sk-text">129.00</text>
</view>
</navigator>
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
<view class="name ellipsis sk-transparent sk-text-14-2857-321 sk-text"
>衣柜省空间神器，棉麻涤·收纳挂袋</view
@ -136,13 +144,13 @@
<text class="number sk-transparent sk-text-14-2857-693 sk-text">55.00</text>
</view>
</navigator>
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
</navigator>
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
</navigator>
<navigator class="goods goods" hover-class="none">
<navigator :render-link="false" class="goods goods" hover-class="none">
<image class="image sk-image"></image>
</navigator>
</view>
@ -153,7 +161,12 @@
</view>
</template>
<style>
<style lang="scss">
/* #ifdef H5 */
@import '@/components/styles/JbcSwiper.scss';
@import '../category.scss';
/* #endif */
.sk-transparent {
color: transparent !important;
}

56
src/pages/goods/components/PageSkeleton.vue
View File

@ -18,29 +18,31 @@
<view class="indicator indicator">
<text class="current sk-transparent sk-opacity">1</text>
<text class="split sk-transparent sk-opacity">/</text>
<text class="total sk-transparent sk-opacity">4</text>
<text class="total sk-transparent sk-opacity">5</text>
</view>
</view>
<view class="meta meta">
<view class="price price">
<text class="symbol sk-transparent sk-opacity">¥</text>
<text class="number sk-transparent sk-text-14-2857-867 sk-text">128.00</text>
<text class="number sk-transparent sk-text-14-2857-753 sk-text">680.00</text>
</view>
<view class="name ellipsis sk-transparent sk-text-14-2857-403 sk-text"
>钻石陶瓷涂层多用锅18cm 小奶锅</view
<view class="name ellipsis sk-transparent sk-text-14-2857-523 sk-text"
>朱炳仁·铜彩色生肖铜雕摆件</view
>
<view class="desc sk-transparent sk-text-0-0000-598 sk-text"
>十二生肖萌宝系列吉祥物，吉祥又好运app</view
>
<view class="desc sk-transparent sk-text-0-0000-460 sk-text">安全耐用，易于清洗APP</view>
</view>
<view class="action action">
<view class="item arrow sk-pseudo sk-pseudo-circle">
<text class="label sk-transparent sk-text-14-2857-126 sk-text">选择</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-698 sk-text">
请选择商品规格
</text>
<text class="label sk-transparent sk-text-14-2857-553 sk-text">选择</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-33 sk-text"
>请选择商品规格</text
>
</view>
<view class="item arrow sk-pseudo sk-pseudo-circle">
<text class="label sk-transparent sk-text-14-2857-337 sk-text">送至</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-169 sk-text">
<text class="label sk-transparent sk-text-14-2857-845 sk-text">送至</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-637 sk-text">
请选择收货地址
</text>
</view>
@ -59,19 +61,19 @@
>
<text class="icon-handset sk-pseudo sk-pseudo-circle"></text>客服
</button>
<navigator class="icons-button sk-transparent" open-type="switchTab">
<text class="icon-cart sk-pseudo sk-pseudo-circle"></text>购物车
<navigator class="icons-button sk-transparent" open-type="navigate">
<text class="icon-cart sk-pseudo sk-pseudo-circle"></text>
</navigator>
</view>
<view class="buttons buttons">
<view
class="addcart sk-transparent sk-text-31-9444-431 sk-text"
class="addcart sk-transparent sk-text-31-9444-934 sk-text"
style="background-position-x: 50%"
>
加入购物车
</view>
<view
class="buynow sk-transparent sk-text-31-9444-819 sk-text"
class="payment sk-transparent sk-text-31-9444-376 sk-text"
style="background-position-x: 50%"
>
立即购买
@ -81,14 +83,18 @@
</view>
</template>
<style>
<style lang="scss">
/* #ifdef H5 */
@import '../goods.scss';
/* #endif */
.sk-transparent {
color: transparent !important;
}
.sk-opacity {
opacity: 0 !important;
}
.sk-text-14-2857-867 {
.sk-text-14-2857-753 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -105,7 +111,7 @@
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-14-2857-403 {
.sk-text-14-2857-523 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -115,7 +121,7 @@
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text-0-0000-460 {
.sk-text-0-0000-598 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
@ -125,7 +131,7 @@
background-size: 100% 24rpx;
position: relative !important;
}
.sk-text-14-2857-126 {
.sk-text-14-2857-553 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -135,7 +141,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-698 {
.sk-text-14-2857-33 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -145,7 +151,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-337 {
.sk-text-14-2857-845 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -155,7 +161,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-169 {
.sk-text-14-2857-637 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -165,7 +171,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-31-9444-431 {
.sk-text-31-9444-934 {
background-image: linear-gradient(
transparent 31.9444%,
#eeeeee 0%,
@ -175,7 +181,7 @@
background-size: 100% 72rpx;
position: relative !important;
}
.sk-text-31-9444-819 {
.sk-text-31-9444-376 {
background-image: linear-gradient(
transparent 31.9444%,
#eeeeee 0%,

279
src/pages/goods/goods.scss Normal file
View File

@ -0,0 +1,279 @@
page {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.viewport {
background-color: #f4f4f4;
flex: 1;
height: 100%;
}
/* 商品信息 */
.goods {
background-color: #fff;
.preview {
height: 750rpx;
position: relative;
.swiper {
height: 750rpx;
}
.image {
width: 750rpx;
height: 750rpx;
}
.indicator {
height: 40rpx;
padding: 0 24rpx;
line-height: 40rpx;
border-radius: 30rpx;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
bottom: 30rpx;
right: 30rpx;
.current {
font-size: 26rpx;
}
.split {
font-size: 24rpx;
margin: 0 1rpx 0 2rpx;
}
.total {
font-size: 24rpx;
}
}
}
.meta {
position: relative;
border-bottom: 1rpx solid #eaeaea;
.price {
height: 130rpx;
padding: 25rpx 30rpx 0;
color: #fff;
font-size: 34rpx;
box-sizing: border-box;
background-color: #35c8a9;
}
.number {
font-size: 56rpx;
}
.brand {
width: 160rpx;
height: 80rpx;
overflow: hidden;
position: absolute;
top: 26rpx;
right: 30rpx;
}
.name {
max-height: 88rpx;
line-height: 1.4;
margin: 20rpx;
font-size: 32rpx;
color: #333;
}
.desc {
line-height: 1;
padding: 0 20rpx 30rpx;
font-size: 24rpx;
color: #cf4444;
}
}
.action {
padding-left: 20rpx;
.item {
height: 90rpx;
padding-right: 60rpx;
border-bottom: 1rpx solid #eaeaea;
font-size: 26rpx;
color: #333;
position: relative;
display: flex;
align-items: center;
&:last-child {
border-bottom: 0 none;
}
}
.label {
width: 60rpx;
color: #898b94;
margin: 0 16rpx 0 10rpx;
}
.text {
flex: 1;
-webkit-line-clamp: 1;
}
}
}
.panel {
margin-top: 20rpx;
background-color: #fff;
.title {
display: flex;
justify-content: space-between;
align-items: center;
height: 90rpx;
line-height: 1;
padding: 30rpx 60rpx 30rpx 6rpx;
position: relative;
text {
padding-left: 10rpx;
font-size: 28rpx;
color: #333;
font-weight: 600;
border-left: 4rpx solid #27ba9b;
}
navigator {
font-size: 24rpx;
color: #666;
}
}
}
.arrow {
&::after {
position: absolute;
top: 50%;
right: 30rpx;
content: '\e6c2';
color: #ccc;
font-family: 'erabbit' !important;
font-size: 32rpx;
transform: translateY(-50%);
}
}
/* 商品详情 */
.detail {
padding-left: 20rpx;
.content {
margin-left: -20rpx;
.image {
width: 100%;
}
}
.properties {
padding: 0 20rpx;
margin-bottom: 30rpx;
.item {
display: flex;
line-height: 2;
padding: 10rpx;
font-size: 26rpx;
color: #333;
border-bottom: 1rpx dashed #ccc;
}
.label {
width: 200rpx;
}
.value {
flex: 1;
}
}
}
/* 同类推荐 */
.similar {
.content {
padding: 0 20rpx 200rpx;
background-color: #f4f4f4;
display: flex;
flex-wrap: wrap;
.goods {
width: calc(375rpx - 60rpx - 14rpx);
padding: 24rpx 20rpx 20rpx;
margin: 20rpx 7rpx;
border-radius: 10rpx;
background-color: #fff;
}
.image {
width: 100%;
}
.name {
height: 80rpx;
margin: 10rpx 0;
font-size: 26rpx;
color: #262626;
}
.price {
line-height: 1;
font-size: 20rpx;
color: #cf4444;
}
.number {
font-size: 26rpx;
margin-left: 2rpx;
}
}
navigator {
&:nth-child(even) {
margin-right: 0;
}
}
}
/* 底部工具栏 */
.toolbar {
position: fixed;
left: 0;
right: 0;
bottom: calc((var(--window-bottom)));
z-index: 1;
background-color: #fff;
height: 100rpx;
padding: 0 20rpx;
border-top: 1rpx solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
.buttons {
display: flex;
& > view {
width: 220rpx;
text-align: center;
line-height: 72rpx;
font-size: 26rpx;
color: #fff;
border-radius: 72rpx;
}
.addcart {
background-color: #ffa868;
}
.payment {
background-color: #27ba9b;
margin-left: 20rpx;
}
}
.icons {
padding-right: 20rpx;
display: flex;
align-items: center;
flex: 1;
// 兼容 H5 端和 App 端的导航链接样式
.navigator-wrap,
.icons-button {
flex: 1;
text-align: center;
line-height: 1.4;
padding: 0;
margin: 0;
border-radius: 0;
font-size: 20rpx;
color: #333;
background-color: #fff;
&::after {
border: none;
}
}
text {
display: block;
font-size: 34rpx;
}
}
}

291
src/pages/goods/goods.vue
View File

@ -76,6 +76,7 @@
</view>
<view class="content">
<navigator
:render-link="false"
v-for="item in goods?.similarProducts"
:key="item.id"
class="goods"
@ -97,16 +98,23 @@
<view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
<view class="icons">
<button class="icons-button"><text class="icon-heart"></text>收藏</button>
<!-- #ifdef MP-WEIXIN -->
<button class="icons-button" open-type="contact">
<text class="icon-handset"></text>客服
</button>
<navigator class="icons-button" url="/pages/cart/goodsCart" open-type="navigate">
<!-- #endif -->
<navigator
:render-link="false"
class="icons-button"
url="/pages/cart/goodsCart"
open-type="navigate"
>
<text class="icon-cart"></text>购物车
</navigator>
</view>
<view class="buttons">
<view class="addcart" @tap="showSkuPopup(SkuMode.AddCart)"> 加入购物车 </view>
<view class="buynow" @tap="showSkuPopup(SkuMode.BuyNow)"> 立即购买 </view>
<view class="payment" @tap="showSkuPopup(SkuMode.BuyNow)"> 立即购买 </view>
</view>
</view>
@ -278,282 +286,5 @@ const handlerBuyNow = (e: SkuPopupEvent) => {
</script>
<style lang="scss">
page {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.viewport {
background-color: #f4f4f4;
flex: 1;
height: 100%;
}
/* 商品信息 */
.goods {
background-color: #fff;
.preview {
height: 750rpx;
position: relative;
.swiper {
height: 750rpx;
}
.image {
width: 750rpx;
height: 750rpx;
}
.indicator {
height: 40rpx;
padding: 0 24rpx;
line-height: 40rpx;
border-radius: 30rpx;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
bottom: 30rpx;
right: 30rpx;
.current {
font-size: 26rpx;
}
.split {
font-size: 24rpx;
margin: 0 1rpx 0 2rpx;
}
.total {
font-size: 24rpx;
}
}
}
.meta {
position: relative;
border-bottom: 1rpx solid #eaeaea;
.price {
height: 130rpx;
padding: 25rpx 30rpx 0;
color: #fff;
font-size: 34rpx;
box-sizing: border-box;
background-color: #35c8a9;
}
.number {
font-size: 56rpx;
}
.brand {
width: 160rpx;
height: 80rpx;
overflow: hidden;
position: absolute;
top: 26rpx;
right: 30rpx;
}
.name {
max-height: 88rpx;
line-height: 1.4;
margin: 20rpx;
font-size: 32rpx;
color: #333;
}
.desc {
line-height: 1;
padding: 0 20rpx 30rpx;
font-size: 24rpx;
color: #cf4444;
}
}
.action {
padding-left: 20rpx;
.item {
height: 90rpx;
padding-right: 60rpx;
border-bottom: 1rpx solid #eaeaea;
font-size: 26rpx;
color: #333;
position: relative;
display: flex;
align-items: center;
&:last-child {
border-bottom: 0 none;
}
}
.label {
width: 60rpx;
color: #898b94;
margin: 0 16rpx 0 10rpx;
}
.text {
flex: 1;
-webkit-line-clamp: 1;
}
}
}
.panel {
margin-top: 20rpx;
background-color: #fff;
.title {
display: flex;
justify-content: space-between;
align-items: center;
height: 90rpx;
line-height: 1;
padding: 30rpx 60rpx 30rpx 6rpx;
position: relative;
text {
padding-left: 10rpx;
font-size: 28rpx;
color: #333;
font-weight: 600;
border-left: 4rpx solid #27ba9b;
}
navigator {
font-size: 24rpx;
color: #666;
}
}
}
.arrow {
&::after {
position: absolute;
top: 50%;
right: 30rpx;
content: '\e6c2';
color: #ccc;
font-family: 'erabbit' !important;
font-size: 32rpx;
transform: translateY(-50%);
}
}
/* 商品详情 */
.detail {
padding-left: 20rpx;
.content {
margin-left: -20rpx;
.image {
width: 100%;
}
}
.properties {
padding: 0 20rpx;
margin-bottom: 30rpx;
.item {
display: flex;
line-height: 2;
padding: 10rpx;
font-size: 26rpx;
color: #333;
border-bottom: 1rpx dashed #ccc;
}
.label {
width: 200rpx;
}
.value {
flex: 1;
}
}
}
/* 同类推荐 */
.similar {
.content {
padding: 0 20rpx 200rpx;
background-color: #f4f4f4;
display: flex;
flex-wrap: wrap;
.goods {
width: calc(375rpx - 60rpx - 14rpx);
padding: 24rpx 20rpx 20rpx;
margin: 20rpx 7rpx;
border-radius: 10rpx;
background-color: #fff;
}
.image {
width: 100%;
}
.name {
height: 80rpx;
margin: 10rpx 0;
font-size: 26rpx;
color: #262626;
}
.price {
line-height: 1;
font-size: 20rpx;
color: #cf4444;
}
.number {
font-size: 26rpx;
margin-left: 2rpx;
}
}
navigator {
&:nth-child(even) {
margin-right: 0;
}
}
}
/* 底部工具栏 */
.toolbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #fff;
height: 100rpx;
padding: 0 20rpx var(--window-bottom);
border-top: 1rpx solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
.buttons {
display: flex;
& > view {
width: 220rpx;
text-align: center;
line-height: 72rpx;
font-size: 26rpx;
color: #fff;
border-radius: 72rpx;
}
.addcart {
background-color: #ffa868;
}
.buynow,
.payment {
background-color: #27ba9b;
margin-left: 20rpx;
}
}
.icons {
padding-right: 10rpx;
display: flex;
align-items: center;
flex: 1;
.icons-button {
flex: 1;
text-align: center;
line-height: 1.4;
padding: 0;
margin: 0;
border-radius: 0;
font-size: 20rpx;
color: #333;
background-color: #fff;
&::after {
border: none;
}
}
text {
display: block;
font-size: 34rpx;
}
}
}
@import './goods.scss';
</style>

79
src/pages/hot/hot.vue
View File

@ -4,49 +4,48 @@
<view class="cover">
<image :src="bannerPic"></image>
</view>
<template>
<!-- 推荐选项 -->
<view class="tabs">
<text
:class="['text', { active: index === actived }]"
v-for="(subTypeItem, index) in subTypes"
:key="subTypeItem.id"
@tap="actived = index"
>{{ subTypeItem.title }}</text
>
</view>
<!-- 推荐列表 -->
<scroll-view
:scroll-y="true"
class="scroll-view"
@scrolltolower="onScrollToLower"
<!-- 推荐选项 -->
<view class="tabs">
<text
:class="['text', { active: index === actived }]"
v-for="(subTypeItem, index) in subTypes"
v-show="actived === index"
:key="subTypeItem.id"
@tap="actived = index"
>{{ subTypeItem.title }}</text
>
<view class="goods">
<navigator
hover-class="none"
class="navigator"
v-for="goodItem in subTypeItem.goodsItems.items"
:key="goodItem.id"
:url="`/pages/goods/goods?id=${goodItem.id}`"
>
<image class="thumb" :src="goodItem.picture"></image>
<view class="name ellipsis">{{ goodItem.desc }}</view>
<view class="price">
<text class="symbol">¥</text>
<text class="number">{{ goodItem.price }}</text>
</view>
</navigator>
</view>
<view class="loading-text">{{
subTypeItem.goodsItems.page === subTypeItem.goodsItems.pages
? '没有更多数据~'
: '正在加载...'
}}</view>
</scroll-view>
</template>
</view>
<!-- 推荐列表 -->
<scroll-view
:scroll-y="true"
class="scroll-view"
@scrolltolower="onScrollToLower"
v-for="(subTypeItem, index) in subTypes"
v-show="actived === index"
:key="subTypeItem.id"
>
<view class="goods">
<navigator
:render-link="false"
hover-class="none"
class="navigator"
v-for="goodItem in subTypeItem.goodsItems.items"
:key="goodItem.id"
:url="`/pages/goods/goods?id=${goodItem.id}`"
>
<image class="thumb" :src="goodItem.picture"></image>
<view class="name ellipsis">{{ goodItem.desc }}</view>
<view class="price">
<text class="symbol">¥</text>
<text class="number">{{ goodItem.price }}</text>
</view>
</navigator>
</view>
<view class="loading-text">{{
subTypeItem.goodsItems.page === subTypeItem.goodsItems.pages
? '没有更多数据~'
: '正在加载...'
}}</view>
</scroll-view>
</view>
</template>

28
src/pages/index/components/CategoryPanel.vue
View File

@ -1,6 +1,7 @@
<template>
<view class="category">
<navigator
:render-link="false"
class="category-item"
hover-class="none"
url="/pages/index/index"
@ -22,30 +23,5 @@ const props = defineProps<{
</script>
<style lang="scss">
/* 前台类目 */
.category {
margin: 20rpx 0 0;
padding: 10rpx 0;
display: flex;
flex-wrap: wrap;
min-height: 328rpx;
.category-item {
width: 150rpx;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
box-sizing: border-box;
.icon {
width: 100rpx;
height: 100rpx;
}
.text {
font-size: 26rpx;
color: #666;
}
}
}
@import './styles/CategoryPanel.scss';
</style>

66
src/pages/index/components/HotPanel.vue
View File

@ -6,7 +6,12 @@
<text class="title-text">{{ item.title }}</text>
<text class="title-desc">{{ item.alt }}</text>
</view>
<navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="cards">
<navigator
:render-link="false"
hover-class="none"
:url="`/pages/hot/hot?type=${item.type}`"
class="cards"
>
<image
v-for="src in item.pictures"
:key="src"
@ -29,62 +34,5 @@ defineProps<{
</script>
<style lang="scss">
/* 热门推荐 */
.hot {
display: flex;
flex-wrap: wrap;
min-height: 508rpx;
margin: 20rpx 20rpx 0;
border-radius: 10rpx;
background-color: #fff;
.title {
display: flex;
align-items: center;
padding: 24rpx 24rpx 0;
font-size: 32rpx;
color: #262626;
position: relative;
.title-desc {
font-size: 24rpx;
color: #7f7f7f;
margin-left: 18rpx;
}
}
.item {
display: flex;
flex-direction: column;
width: calc(50% - 1rpx);
height: 254rpx;
border-right: 1rpx solid #eee;
border-top: 1rpx solid #eee;
.title {
justify-content: start;
}
&:nth-child(2n) {
border-right: 0 none;
}
&:nth-child(-n + 2) {
border-top: 0 none;
}
.image {
width: 150rpx;
height: 150rpx;
}
}
.cards {
flex: 1;
padding: 15rpx 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
@import './styles/HotPanel.scss';
</style>

460
src/pages/index/components/PageSkeleton.vue
View File

@ -1,163 +1,236 @@
<template name="skeleton">
<view is="components/JbcSwiper">
<view class="carousel JbcSwiper--carousel">
<swiper :circular="true" :current="0" :interval="3000" :autoplay="false">
<swiper-item
style="
position: absolute;
width: 100%;
height: 100%;
transform: translate(0%, 0px) translateZ(0px);
"
>
<navigator class="navigator JbcSwiper--navigator" hover-class="none">
<image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
</navigator>
</swiper-item>
</swiper>
<view class="indicator JbcSwiper--indicator">
<text class="dot JbcSwiper--dot active JbcSwiper--active"></text>
<text class="dot JbcSwiper--dot"></text>
<text class="dot JbcSwiper--dot"></text>
<text class="dot JbcSwiper--dot"></text>
<text class="dot JbcSwiper--dot"></text>
</view>
</view>
</view>
<view is="pages/index/components/CategoryPanel">
<view class="category CategoryPanel--category">
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-158 sk-text"
>居家</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-849 sk-text"
>锦鲤</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-598 sk-text"
>服饰</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-271 sk-text"
>母婴</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-768 sk-text"
>个护</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-999 sk-text"
>严选</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-502 sk-text"
>数码</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-420 sk-text"
>运动</text
>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-89 sk-text">杂项</text>
</navigator>
<navigator class="category-item CategoryPanel--category-item" hover-class="none">
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-28 sk-text">品牌</text>
</navigator>
</view>
</view>
<view is="pages/index/components/HotPanel">
<view class="panel HotPanel--panel hot HotPanel--hot">
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-496 sk-text"
>特惠推荐</text
>
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-20 sk-text"
>精选全攻略</text
>
<view class="sk-container">
<view class="viewport viewport">
<scroll-view
:enable-back-to-top="true"
:refresher-enabled="true"
:scroll-y="true"
class="scrool-view scrool-view"
>
<view is="components/JbcSwiper">
<view class="carousel JbcSwiper--carousel">
<swiper :circular="true" :current="0" :interval="3000" :autoplay="false">
<swiper-item
style="
position: absolute;
width: 100%;
height: 100%;
transform: translate(0%, 0px) translateZ(0px);
"
>
<navigator
:render-link="false"
class="navigator JbcSwiper--navigator"
hover-class="none"
>
<image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
</navigator>
</swiper-item>
</swiper>
<view class="indicator JbcSwiper--indicator">
<text class="dot JbcSwiper--dot active JbcSwiper--active"></text>
<text class="dot JbcSwiper--dot"></text>
<text class="dot JbcSwiper--dot"></text>
<text class="dot JbcSwiper--dot"></text>
<text class="dot JbcSwiper--dot"></text>
</view>
</view>
</view>
<navigator class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-183 sk-text"
>爆款推荐</text
>
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-205 sk-text"
>最受欢迎</text
>
<view is="pages/index/components/CategoryPanel">
<view class="category CategoryPanel--category">
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-800 sk-text"
>居家</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-259 sk-text"
>锦鲤</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-519 sk-text"
>服饰</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-450 sk-text"
>母婴</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-191 sk-text"
>个护</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-808 sk-text"
>严选</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-794 sk-text"
>数码</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-241 sk-text"
>运动</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-577 sk-text"
>杂项</text
>
</navigator>
<navigator
:render-link="false"
class="category-item CategoryPanel--category-item"
hover-class="none"
>
<image class="icon CategoryPanel--icon sk-image"></image>
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-685 sk-text"
>品牌</text
>
</navigator>
</view>
</view>
<navigator class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-35 sk-text"
>一站买全</text
>
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-223 sk-text"
>精心优选</text
>
<view is="pages/index/components/HotPanel">
<view class="panel HotPanel--panel hot HotPanel--hot">
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text
class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-914 sk-text"
>特惠推荐</text
>
<text
class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-766 sk-text"
>精选全攻略</text
>
</view>
<navigator :render-link="false" class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text
class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-437 sk-text"
>爆款推荐</text
>
<text
class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-14 sk-text"
>最受欢迎</text
>
</view>
<navigator :render-link="false" class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text
class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-767 sk-text"
>一站买全</text
>
<text
class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-976 sk-text"
>精心优选</text
>
</view>
<navigator :render-link="false" class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text
class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-741 sk-text"
>新鲜好物</text
>
<text
class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-965 sk-text"
>生活加分项</text
>
</view>
<navigator :render-link="false" class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
</view>
</view>
<navigator class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
<view class="item HotPanel--item">
<view class="title HotPanel--title">
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-158 sk-text"
>新鲜好物</text
>
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-452 sk-text"
>生活加分项</text
>
</view>
<navigator class="cards HotPanel--cards" hover-class="none">
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
<image class="image HotPanel--image sk-image" mode="aspectFit"></image>
</navigator>
</view>
</scroll-view>
</view>
</view>
</template>
<style>
<style lang="scss">
/* #ifdef H5 */
@import '@/components/styles/JbcSwiper.scss';
@import './styles/CategoryPanel.scss';
@import './styles/HotPanel.scss';
/* #endif */
.sk-transparent {
color: transparent !important;
}
.sk-text-24-0741-766 {
.sk-text-24-0000-172 {
background-image: linear-gradient(
transparent 24.0741%,
transparent 24%,
#eeeeee 0%,
#eeeeee 75.9259%,
#eeeeee 76%,
transparent 0%
) !important;
background-size: 100% 48.913rpx;
background-size: 100% 50rpx;
position: relative !important;
}
.sk-text {
@ -167,189 +240,214 @@
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-14-2857-226 {
.sk-text-14-2857-64 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 38.0435rpx;
background-size: 100% 39.2rpx;
position: relative !important;
}
.sk-text-14-2857-158 {
.sk-text-14-2857-800 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-849 {
.sk-text-14-2857-259 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-598 {
.sk-text-14-2857-519 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-271 {
.sk-text-14-2857-450 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-768 {
.sk-text-14-2857-191 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-999 {
.sk-text-14-2857-808 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-502 {
.sk-text-14-2857-794 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-420 {
.sk-text-14-2857-241 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-89 {
.sk-text-14-2857-577 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-28 {
.sk-text-14-2857-685 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 35.5072rpx;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-496 {
.sk-text-14-2857-914 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 43.1159rpx;
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text-14-2857-20 {
.sk-text-14-2857-766 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 32.971rpx;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-183 {
.sk-text-14-2857-437 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 43.1159rpx;
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text-14-2857-205 {
.sk-text-14-2857-14 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 32.971rpx;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-35 {
.sk-text-14-2857-767 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 43.1159rpx;
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text-14-2857-223 {
.sk-text-14-2857-976 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 32.971rpx;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-452 {
.sk-text-14-2857-741 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 32.971rpx;
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text-14-2857-965 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-image {
background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
background: #efefef !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;

26
src/pages/index/components/styles/CategoryPanel.scss Normal file
View File

@ -0,0 +1,26 @@
/* 前台类目 */
.category {
margin: 20rpx 0 0;
padding: 10rpx 0;
display: flex;
flex-wrap: wrap;
min-height: 328rpx;
.category-item {
width: 150rpx;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
box-sizing: border-box;
.icon {
width: 100rpx;
height: 100rpx;
}
.text {
font-size: 26rpx;
color: #666;
}
}
}

58
src/pages/index/components/styles/HotPanel.scss Normal file
View File

@ -0,0 +1,58 @@
/* 热门推荐 */
.hot {
display: flex;
flex-wrap: wrap;
min-height: 508rpx;
margin: 20rpx 20rpx 0;
border-radius: 10rpx;
background-color: #fff;
.title {
display: flex;
align-items: center;
padding: 24rpx 24rpx 0;
font-size: 32rpx;
color: #262626;
position: relative;
.title-desc {
font-size: 24rpx;
color: #7f7f7f;
margin-left: 18rpx;
}
}
.item {
display: flex;
flex-direction: column;
width: calc(50% - 1rpx);
height: 254rpx;
border-right: 1rpx solid #eee;
border-top: 1rpx solid #eee;
.title {
justify-content: start;
}
&:nth-child(2n) {
border-right: 0 none;
}
&:nth-child(-n + 2) {
border-top: 0 none;
}
.image {
width: 150rpx;
height: 150rpx;
}
}
.cards {
flex: 1;
padding: 15rpx 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}

30
src/pages/login/login.vue
View File

@ -5,15 +5,19 @@
</view>
<view class="login">
<!-- 网页端表单登录 -->
<!-- <input class="input" type="text" placeholder="请输入用户名/手机号码" />
<!-- #ifdef H5 -->
<input class="input" type="text" placeholder="请输入用户名/手机号码" />
<input class="input" type="text" password placeholder="请输入密码" />
<button class="button phone">登录</button> -->
<button class="button phone">登录</button>
<!-- #endif -->
<!-- 小程序端授权登录 -->
<!-- #ifdef MP-WEIXIN -->
<button class="button phone" @getphonenumber="onGetPhoneNumber">
<text class="icon icon-phone"></text>
手机号快捷登录
</button>
<!-- #endif -->
<view class="extra">
<view class="caption">
<text>其他登录方式</text>
@ -40,6 +44,7 @@ import type { LoginResult } from '@/types/member'
// 会员信息
const memberStore = useMemberStore()
// #ifdef MP-WEIXIN
const code = ref('')
onLoad(async () => {
const res = await wx.login()
@ -59,16 +64,10 @@ const onGetPhoneNumber: UniHelper.ButtonOnGetphonenumber = async (e) => {
res.result && loginSucess(res.result)
}
}
// #endif
// 模拟快捷登录
const handlePhoneLogin = async () => {
if (!code.value) {
uni.showToast({
title: '请先授权登录',
icon: 'none',
})
return
}
const res = await postPhoneNumberLoginMockAPI({
phoneNumber: '13800138000',
})
@ -84,7 +83,20 @@ const loginSucess = (profile: LoginResult) => {
icon: 'none',
})
setTimeout(() => {
// #ifdef MP-WEIXIN
uni.navigateBack()
// #endif
// #ifdef H5
// 获取当前页面栈
const pages = getCurrentPages()
const hasBack = pages.length > 1
if (hasBack) {
uni.navigateBack()
} else {
uni.switchTab({ url: '/pages/index/index' })
}
// #endif
}, 500)
}
</script>

34
src/pages/my/my.vue
View File

@ -4,35 +4,45 @@
<view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
<!-- 情况1：已登录 -->
<view class="overview" v-if="profile">
<navigator url="/pagesMember/profile/profile" hover-class="none">
<navigator :render-link="false" url="/pagesMember/profile/profile" hover-class="none">
<image class="avatar" mode="aspectFill" :src="profile.avatar"></image>
</navigator>
<view class="meta">
<view class="nickname">
{{ profile.nickname?.replace('黑马', '') || profile.account }}
</view>
<navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
<navigator
:render-link="false"
class="extra"
url="/pagesMember/profile/profile"
hover-class="none"
>
<text class="update">更新头像昵称</text>
</navigator>
</view>
</view>
<!-- 情况2：未登录 -->
<view class="overview" v-else>
<navigator url="/pages/login/login" hover-class="none">
<navigator :render-link="false" url="/pages/login/login" hover-class="none">
<image
class="avatar gray"
mode="aspectFill"
src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
></image>
</navigator>
<navigator class="meta" url="/pages/login/login" hover-class="none">
<navigator :render-link="false" class="meta" url="/pages/login/login" hover-class="none">
<view class="nickname"> 未登录 </view>
<view class="extra">
<text class="tips">点击登录账号</text>
</view>
</navigator>
</view>
<navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">
<navigator
:render-link="false"
class="settings"
url="/pagesMember/settings/settings"
hover-class="none"
>
设置
</navigator>
</view>
@ -40,13 +50,19 @@
<view class="orders">
<view class="title">
我的订单
<navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">
<navigator
:render-link="false"
class="navigator"
url="/pagesOrder/list/list?type=0"
hover-class="none"
>
查看全部订单<text class="icon-right"></text>
</navigator>
</view>
<view class="section">
<!-- 订单 -->
<navigator
:render-link="false"
v-for="item in orderTypes"
:key="item.type"
:class="item.icon"
@ -57,11 +73,13 @@
{{ item.text }}
</navigator>
<!-- 客服 -->
<!-- #ifdef MP-WEIXIN -->
<button class="contact icon-handset" open-type="contact">售后</button>
<!-- #endif -->
</view>
</view>
<!-- 猜你喜欢 -->
<view class="guess">
<view class="like">
<JbcGuess ref="guessRef" />
</view>
</scroll-view>
@ -225,7 +243,7 @@ page {
}
/* 猜你喜欢 */
.guess {
.like {
background-color: #f7f7f8;
margin-top: 20rpx;
}

5
src/pagesMember/address/address.vue
View File

@ -16,6 +16,7 @@
<view class="locate">{{ item.fullLocation }} {{ item.address }}</view>
</view>
<navigator
:render-link="false"
class="edit right"
hover-class="none"
:url="`/pagesMember/address/address-form?id=${item.id}`"
@ -35,7 +36,9 @@
</scroll-view>
<!-- 添加按钮 -->
<view class="add-btn">
<navigator hover-class="none" url="/pagesMember/address/address-form"> 新建地址 </navigator>
<navigator :render-link="false" hover-class="none" url="/pagesMember/address/address-form">
新建地址
</navigator>
</view>
</view>
</template>

72
src/pagesMember/profile/profile.vue
View File

@ -2,7 +2,12 @@
<view class="viewport">
<!-- 导航栏 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
<navigator
:render-link="false"
open-type="navigateBack"
class="back icon-left"
hover-class="none"
></navigator>
<view class="title">个人信息</view>
</view>
<!-- 头像 -->
@ -105,35 +110,54 @@ onLoad(() => {
// 修改头像, 和其他更新是分开接口
const handleChangeAvatar = () => {
// #ifdef MP-WEIXIN
uni.chooseMedia({
count: 1,
mediaType: ['image'],
success: (res) => {
const tempFilePath = res.tempFiles[0].tempFilePath
console.log(tempFilePath)
uni.uploadFile({
url: '/member/profile/avatar',
filePath: tempFilePath,
name: 'file',
success: (res) => {
console.log(res)
if (res.statusCode === 200) {
const avatar = JSON.parse(res.data).result.avatar
profile.value!.avatar = avatar
memberStore.updateAvatar(avatar)
uni.showToast({
title: '修改头像成功',
icon: 'success',
})
} else {
const errorMsg = JSON.parse(res.data).message
uni.showToast({
title: errorMsg,
icon: 'error',
})
}
},
})
uploadAvatar(tempFilePath)
},
})
// #endif
// #ifdef H5
uni.chooseImage({
count: 1,
extension: ['jpg', 'png', 'jpeg'],
success: (res) => {
console.log(res)
const tempFilePath = res.tempFilePaths[0]
uploadAvatar(tempFilePath)
},
})
// #endif
}
// 上传头像封装
const uploadAvatar = async (tempFilePath: string) => {
uni.uploadFile({
url: '/member/profile/avatar',
filePath: tempFilePath,
name: 'file',
success: (res) => {
console.log(res)
if (res.statusCode === 200) {
const avatar = JSON.parse(res.data).result.avatar
profile.value!.avatar = avatar
memberStore.updateAvatar(avatar)
uni.showToast({
title: '修改头像成功',
icon: 'success',
})
} else {
const errorMsg = JSON.parse(res.data).message
uni.showToast({
title: errorMsg,
icon: 'error',
})
}
},
})
}

13
src/pagesMember/settings/settings.vue
View File

@ -2,19 +2,28 @@
<view class="viewport">
<!-- 列表1 -->
<view class="list" v-if="memberStore.profile">
<navigator url="/pagesMember/address/address" hover-class="none" class="item arrow">
<navigator
:render-link="false"
url="/pagesMember/address/address"
hover-class="none"
class="item arrow"
>
我的收货地址
</navigator>
</view>
<!-- 列表2 -->
<!-- #ifdef MP-WEIXIN -->
<view class="list">
<button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button>
<button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button>
<button hover-class="none" class="item arrow" open-type="contact">联系我们</button>
</view>
<!-- #endif -->
<!-- 列表3 -->
<view class="list">
<navigator hover-class="none" class="item arrow" url="">关于金佰川</navigator>
<navigator :render-link="false" hover-class="none" class="item arrow" url=""
>关于金佰川</navigator
>
</view>
<!-- 操作按钮 -->
<view class="action" v-if="memberStore.profile">

3
src/pagesOrder/create/create.vue
View File

@ -2,6 +2,7 @@
<scroll-view scroll-y class="viewport">
<!-- 收货地址 -->
<navigator
:render-link="false"
v-if="selectedAddress"
class="shipment"
hover-class="none"
@ -14,6 +15,7 @@
<text class="icon icon-right"></text>
</navigator>
<navigator
:render-link="false"
v-else
class="shipment"
hover-class="none"
@ -26,6 +28,7 @@
<!-- 商品信息 -->
<view class="goods">
<navigator
:render-link="false"
v-for="item in orderPreList?.goods"
:key="item.skuId"
:url="`/pages/goods/goods?id=${item.id}`"

454
src/pagesOrder/detail/components/PageSkeleton.vue Normal file
View File

@ -0,0 +1,454 @@
<template name="skeleton">
<view class="sk-container">
<view class="overview sk-image" style="padding-top: 40px">
<view
class="status icon-clock sk-transparent sk-text-0-0000-538 sk-text sk-pseudo sk-pseudo-circle"
>等待付款</view
>
<view class="tips tips">
<text class="money sk-transparent sk-text-0-0000-37 sk-text">应付金额: ¥ 99.00</text>
<text class="time sk-transparent sk-text-0-0000-402 sk-text">支付剩余</text>
<view is="node-modules/@dcloudio/uni-ui/lib/uni-countdown/uni-countdown">
<view
class="uni-countdown countdown--uni-countdown data-v-342c352a countdown--data-v-342c352a"
>
<text
class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-825 sk-text"
style="
color: rgb(255, 255, 255);
font-size: 14px;
width: 22px;
line-height: 20px;
border-radius: 3px;
background-position-x: 50%;
"
>00</text
>
<text
class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
style="color: #fff; font-size: 12px; margin:"
>时</text
>
<text
class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-91 sk-text"
style="
color: rgb(255, 255, 255);
font-size: 14px;
width: 22px;
line-height: 20px;
border-radius: 3px;
background-position-x: 50%;
"
>29</text
>
<text
class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
style="color: #fff; font-size: 12px; margin:"
>分</text
>
<text
class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-512 sk-text"
style="
color: rgb(255, 255, 255);
font-size: 14px;
width: 22px;
line-height: 20px;
border-radius: 3px;
background-position-x: 50%;
"
>36</text
>
<text
class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
style="color: #fff; font-size: 12px; margin:"
>秒</text
>
</view>
</view>
</view>
<view
class="button sk-transparent sk-text-28-1250-663 sk-text"
style="background-position-x: 50%"
>去支付</view
>
</view>
<view class="shipment shipment">
<view class="locate sk-image">
<view class="user sk-transparent sk-text-14-2857-16 sk-text">马斯克 13900139000</view>
<view class="address sk-transparent sk-text-14-2857-206 sk-text"
>北京市 北京市 西城区1122332</view
>
</view>
</view>
<view class="goods goods">
<view class="item item">
<navigator :render-link="false" class="navigator navigator" hover-class="none">
<image class="cover sk-image"></image>
<view class="meta meta">
<view class="name ellipsis sk-transparent sk-text-14-2857-64 sk-text"
>亮碟多效合一洗涤块495g</view
>
<view class="type sk-transparent sk-text-22-2222-294 sk-text">495g</view>
<view class="price price">
<view class="actual actual">
<text class="symbol sk-transparent sk-opacity">¥</text>
<text class="sk-transparent sk-text-14-2857-809 sk-text">69.90</text>
</view>
</view>
<view class="quantity sk-transparent sk-opacity">x1</view>
</view>
</navigator>
</view>
<view class="total total">
<view class="row row">
<view class="text sk-transparent sk-text-0-0000-632 sk-text">商品总价: </view>
<view class="symbol sk-transparent sk-text-0-0000-436 sk-text sk-pseudo sk-pseudo-circle"
>99.00</view
>
</view>
<view class="row row">
<view class="text sk-transparent sk-text-0-0000-43 sk-text">运费: </view>
<view class="symbol sk-transparent sk-text-0-0000-596 sk-text sk-pseudo sk-pseudo-circle"
>0.00</view
>
</view>
<view class="row row">
<view class="text sk-transparent sk-text-0-0000-717 sk-text">应付金额: </view>
<view
class="symbol primary sk-transparent sk-text-0-0000-1000 sk-text sk-pseudo sk-pseudo-circle"
>69.90</view
>
</view>
</view>
</view>
<view class="detail detail">
<view class="title sk-transparent sk-text-0-0000-526 sk-text">订单信息</view>
<view class="row row">
<view class="item sk-transparent">
订单编号: 1922925007051165697
<text class="copy sk-transparent sk-text-0-0000-202 sk-text">复制</text>
</view>
<view class="item sk-transparent sk-text-0-0000-586 sk-text"
>下单时间: 2025-05-15 16:00:23</view
>
</view>
</view>
<view is="components/JbcGuess" class="r r">
<view class="caption JbcGuess--caption">
<text
class="text JbcGuess--text sk-transparent sk-text-0-0000-986 sk-text sk-pseudo sk-pseudo-circle"
>猜你喜欢</text
>
</view>
<view class="guess JbcGuess--guess">
<navigator :render-link="false" class="guess-item JbcGuess--guess-item">
<image class="image JbcGuess--image sk-image" mode="aspectFill"></image>
</navigator>
<navigator :render-link="false" class="guess-item JbcGuess--guess-item">
<image class="image JbcGuess--image sk-image" mode="aspectFill"></image>
</navigator>
</view>
</view>
<view class="toolbar toolbar" style="padding-bottom: 0px">
<view class="button primary sk-transparent sk-text-14-2857-301 sk-text"> 去支付 </view>
<view class="button sk-transparent sk-text-14-2857-130 sk-text"> 取消订单 </view>
</view>
</view>
</template>
<style lang="scss">
/* #ifdef H5 */
@import '../detail.scss';
/* #endif */
.sk-transparent {
color: transparent !important;
}
.sk-text-14-2857-450 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-0-0000-538 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 36rpx;
position: relative !important;
}
.sk-text-0-0000-37 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 28rpx;
position: relative !important;
}
.sk-text-0-0000-402 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 28rpx;
position: relative !important;
}
.sk-text-15-0000-825 {
background-image: linear-gradient(
transparent 15%,
#eeeeee 0%,
#eeeeee 85%,
transparent 0%
) !important;
background-size: 100% 40rpx;
position: relative !important;
}
.sk-opacity {
opacity: 0 !important;
}
.sk-text-15-0000-91 {
background-image: linear-gradient(
transparent 15%,
#eeeeee 0%,
#eeeeee 85%,
transparent 0%
) !important;
background-size: 100% 40rpx;
position: relative !important;
}
.sk-text-15-0000-512 {
background-image: linear-gradient(
transparent 15%,
#eeeeee 0%,
#eeeeee 85%,
transparent 0%
) !important;
background-size: 100% 40rpx;
position: relative !important;
}
.sk-text-28-1250-663 {
background-image: linear-gradient(
transparent 28.125%,
#eeeeee 0%,
#eeeeee 71.875%,
transparent 0%
) !important;
background-size: 100% 64rpx;
position: relative !important;
}
.sk-text-14-2857-16 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-206 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-64 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-22-2222-294 {
background-image: linear-gradient(
transparent 22.2222%,
#eeeeee 0%,
#eeeeee 77.7778%,
transparent 0%
) !important;
background-size: 100% 43.2rpx;
position: relative !important;
}
.sk-text-14-2857-809 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-0-0000-632 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-436 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-43 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-596 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-717 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-1000 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 36rpx;
position: relative !important;
}
.sk-text-0-0000-526 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 30rpx;
position: relative !important;
}
.sk-text-0-0000-202 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 20rpx;
position: relative !important;
}
.sk-text-0-0000-586 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-986 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 32rpx;
position: relative !important;
}
.sk-text-14-2857-301 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-130 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-image {
background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
background: #efefef !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
</style>

435
src/pagesOrder/detail/detail.scss Normal file
View File

@ -0,0 +1,435 @@
page {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.navbar {
width: 750rpx;
color: #000;
position: fixed;
top: 0;
left: 0;
z-index: 9;
/* background-color: #f8f8f8; */
background-color: transparent;
.wrap {
position: relative;
.title {
height: 44px;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
/* color: #000; */
color: transparent;
}
.back {
position: absolute;
left: 0;
height: 44px;
width: 44px;
font-size: 44rpx;
display: flex;
align-items: center;
justify-content: center;
/* color: #000; */
color: #fff;
}
}
}
.viewport {
background-color: #f7f7f8;
}
.overview {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
padding-bottom: 30rpx;
color: #fff;
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
background-size: cover;
.status {
font-size: 36rpx;
}
.status::before {
margin-right: 6rpx;
font-weight: 500;
}
.tips {
margin: 30rpx 0;
display: flex;
font-size: 14px;
align-items: center;
.money {
margin-right: 30rpx;
}
}
.button-group {
margin-top: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.button {
width: 260rpx;
height: 64rpx;
margin: 0 10rpx;
text-align: center;
line-height: 64rpx;
font-size: 28rpx;
color: #27ba9b;
border-radius: 68rpx;
background-color: #fff;
}
}
.shipment {
line-height: 1.4;
padding: 0 20rpx;
margin: 20rpx 20rpx 0;
border-radius: 10rpx;
background-color: #fff;
.locate,
.item {
min-height: 120rpx;
padding: 30rpx 30rpx 25rpx 75rpx;
background-size: 50rpx;
background-repeat: no-repeat;
background-position: 6rpx center;
}
.locate {
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
.user {
font-size: 26rpx;
color: #444;
}
.address {
font-size: 24rpx;
color: #666;
}
}
.item {
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
border-bottom: 1rpx solid #eee;
position: relative;
.message {
font-size: 26rpx;
color: #444;
}
.date {
font-size: 24rpx;
color: #666;
}
}
}
.goods {
margin: 20rpx 20rpx 0;
padding: 0 20rpx;
border-radius: 10rpx;
background-color: #fff;
.item {
padding: 30rpx 0;
border-bottom: 1rpx solid #eee;
.navigator {
display: flex;
margin: 20rpx 0;
}
.cover {
width: 170rpx;
height: 170rpx;
border-radius: 10rpx;
margin-right: 20rpx;
}
.meta {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.name {
height: 80rpx;
font-size: 26rpx;
color: #444;
}
.type {
line-height: 1.8;
padding: 0 15rpx;
margin-top: 6rpx;
font-size: 24rpx;
align-self: flex-start;
border-radius: 4rpx;
color: #888;
background-color: #f7f7f8;
}
.price {
display: flex;
margin-top: 6rpx;
font-size: 24rpx;
}
.symbol {
font-size: 20rpx;
}
.original {
color: #999;
text-decoration: line-through;
}
.actual {
margin-left: 10rpx;
color: #444;
}
.text {
font-size: 22rpx;
}
.quantity {
position: absolute;
bottom: 0;
right: 0;
font-size: 24rpx;
color: #444;
}
.action {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
padding: 30rpx 0 0;
.button {
width: 200rpx;
height: 60rpx;
text-align: center;
justify-content: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 60rpx;
border: 1rpx solid #ccc;
font-size: 26rpx;
color: #444;
}
.primary {
color: #27ba9b;
border-color: #27ba9b;
}
}
}
.total {
line-height: 1;
font-size: 26rpx;
padding: 20rpx 0;
color: #666;
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 0;
}
.symbol::before {
content: '¥';
font-size: 80%;
margin-right: 3rpx;
}
.primary {
color: #cf4444;
font-size: 36rpx;
}
}
}
.detail {
line-height: 1;
padding: 30rpx 20rpx 0;
margin: 20rpx 20rpx 0;
font-size: 26rpx;
color: #666;
border-radius: 10rpx;
background-color: #fff;
.title {
font-size: 30rpx;
color: #444;
}
.row {
padding: 20rpx 0;
.item {
padding: 10rpx 0;
display: flex;
align-items: center;
}
.copy {
border-radius: 20rpx;
font-size: 20rpx;
border: 1px solid #ccc;
padding: 5rpx 10rpx;
margin-left: 10rpx;
}
}
}
.toolbar-height {
height: 100rpx;
box-sizing: content-box;
}
.toolbar {
position: fixed;
left: 0;
right: 0;
bottom: calc(var(--window-bottom));
z-index: 1;
height: 100rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
flex-direction: row-reverse;
border-top: 1rpx solid #ededed;
border-bottom: 1rpx solid #ededed;
background-color: #fff;
box-sizing: content-box;
.button {
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 72rpx;
margin-left: 15rpx;
font-size: 26rpx;
border-radius: 72rpx;
border: 1rpx solid #ccc;
color: #444;
}
.delete {
order: 4;
}
.button {
order: 3;
}
.secondary {
order: 2;
color: #27ba9b;
border-color: #27ba9b;
}
.primary {
order: 1;
color: #fff;
background-color: #27ba9b;
}
}
.popup-root {
padding: 30rpx 30rpx 0;
border-radius: 10rpx 10rpx 0 0;
overflow: hidden;
.title {
font-size: 30rpx;
text-align: center;
margin-bottom: 30rpx;
}
.description {
font-size: 28rpx;
padding: 0 20rpx;
.tips {
color: #444;
margin-bottom: 12rpx;
}
.cell {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15rpx 0;
color: #666;
}
.icon::before {
content: '\e6cd';
font-family: 'erabbit' !important;
font-size: 38rpx;
color: #999;
}
.icon.checked::before {
content: '\e6cc';
font-size: 38rpx;
color: #27ba9b;
}
}
.footer {
display: flex;
justify-content: space-between;
padding: 30rpx 0 40rpx;
font-size: 28rpx;
color: #444;
.button {
flex: 1;
height: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx;
color: #444;
border-radius: 72rpx;
border: 1rpx solid #ccc;
}
.primary {
color: #fff;
background-color: #27ba9b;
border: none;
}
}
}

470
src/pagesOrder/detail/detail.vue
View File

@ -2,8 +2,19 @@
<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<view class="wrap">
<navigator v-if="hasBack" open-type="navigateBack" class="back icon-left"></navigator>
<navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home">
<navigator
:render-link="false"
v-if="hasBack"
open-type="navigateBack"
class="back icon-left"
></navigator>
<navigator
:render-link="false"
v-else
url="/pages/index/index"
open-type="switchTab"
class="back icon-home"
>
</navigator>
<view class="title">订单详情</view>
</view>
@ -35,6 +46,7 @@
<view class="status"> {{ OrderStateList[orderDetail.orderState].text }} </view>
<view class="button-group">
<navigator
:render-link="false"
class="button"
:url="`/pagesOrder/create/create?id=${query.id}`"
hover-class="none"
@ -82,6 +94,7 @@
<view class="goods">
<view class="item">
<navigator
:render-link="false"
class="navigator"
v-for="item in orderDetail.skus"
:key="item.id"
@ -104,7 +117,7 @@
<!-- 待评价状态:展示按钮 -->
<view class="action" v-if="orderDetail.orderState === OrderState.PendingReview">
<view class="button primary">申请售后</view>
<navigator url="" class="button"> 去评价 </navigator>
<navigator :render-link="false" url="" class="button"> 去评价 </navigator>
</view>
</view>
<!-- 合计 -->
@ -149,6 +162,7 @@
<!-- 其他订单状态:按需展示按钮 -->
<template v-else>
<navigator
:render-link="false"
class="button secondary"
:url="`/pagesOrder/create/create?id=${query.id}`"
hover-class="none"
@ -207,6 +221,7 @@
</template>
<script setup lang="ts">
import PageSkeleton from './components/PageSkeleton.vue'
import {
deleteMemberOrderAPI,
getMemberOrderLogisticsAPI,
@ -248,7 +263,7 @@ const onCopy = (id: string) => {
}
// 获取页面参数
const query = defineProps<{
id: string
id: string // 订单ID
}>()
// 获取当前页面栈
@ -258,6 +273,7 @@ const hasBack = pages.length > 1
// 获取当前页面实例
const pageInstance = pages.at(-1) as AnimationMethods
// #ifdef MP-WEIXIN
// 添加顶部动画
onReady(() => {
// 动画效果: 导航栏背景色
@ -320,6 +336,7 @@ onReady(() => {
},
)
})
// #endif
// 获取订单详情
const orderDetail = ref<OrderResult>()
@ -364,14 +381,23 @@ const handlePay = async () => {
res = await getMockPayParamsAPI({ orderId: query.id })
} else {
// 生产环境获取微信支付参数
// #ifdef MP-WEIXIN
res = await getWechatPayParamsAPI({ orderId: query.id })
// #endif
// #ifdef H5
res = await getMockPayParamsAPI({ orderId: query.id })
// #endif
}
if (res.code === '1') {
if (isDev) {
uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
} else {
// 生产环境使用微信支付
// #ifdef MP-WEIXIN
await wx.requestPayment(res.result as WechatMiniprogram.RequestPaymentOption)
// #endif
uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
}
} else {
@ -456,439 +482,5 @@ const handleDeleteOrder = async () => {
</script>
<style lang="scss">
page {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.navbar {
width: 750rpx;
color: #000;
position: fixed;
top: 0;
left: 0;
z-index: 9;
/* background-color: #f8f8f8; */
background-color: transparent;
.wrap {
position: relative;
.title {
height: 44px;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
/* color: #000; */
color: transparent;
}
.back {
position: absolute;
left: 0;
height: 44px;
width: 44px;
font-size: 44rpx;
display: flex;
align-items: center;
justify-content: center;
/* color: #000; */
color: #fff;
}
}
}
.viewport {
background-color: #f7f7f8;
}
.overview {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
padding-bottom: 30rpx;
color: #fff;
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
background-size: cover;
.status {
font-size: 36rpx;
}
.status::before {
margin-right: 6rpx;
font-weight: 500;
}
.tips {
margin: 30rpx 0;
display: flex;
font-size: 14px;
align-items: center;
.money {
margin-right: 30rpx;
}
}
.button-group {
margin-top: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.button {
width: 260rpx;
height: 64rpx;
margin: 0 10rpx;
text-align: center;
line-height: 64rpx;
font-size: 28rpx;
color: #27ba9b;
border-radius: 68rpx;
background-color: #fff;
}
}
.shipment {
line-height: 1.4;
padding: 0 20rpx;
margin: 20rpx 20rpx 0;
border-radius: 10rpx;
background-color: #fff;
.locate,
.item {
min-height: 120rpx;
padding: 30rpx 30rpx 25rpx 75rpx;
background-size: 50rpx;
background-repeat: no-repeat;
background-position: 6rpx center;
}
.locate {
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
.user {
font-size: 26rpx;
color: #444;
}
.address {
font-size: 24rpx;
color: #666;
}
}
.item {
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
border-bottom: 1rpx solid #eee;
position: relative;
.message {
font-size: 26rpx;
color: #444;
}
.date {
font-size: 24rpx;
color: #666;
}
}
}
.goods {
margin: 20rpx 20rpx 0;
padding: 0 20rpx;
border-radius: 10rpx;
background-color: #fff;
.item {
padding: 30rpx 0;
border-bottom: 1rpx solid #eee;
.navigator {
display: flex;
margin: 20rpx 0;
}
.cover {
width: 170rpx;
height: 170rpx;
border-radius: 10rpx;
margin-right: 20rpx;
}
.meta {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.name {
height: 80rpx;
font-size: 26rpx;
color: #444;
}
.type {
line-height: 1.8;
padding: 0 15rpx;
margin-top: 6rpx;
font-size: 24rpx;
align-self: flex-start;
border-radius: 4rpx;
color: #888;
background-color: #f7f7f8;
}
.price {
display: flex;
margin-top: 6rpx;
font-size: 24rpx;
}
.symbol {
font-size: 20rpx;
}
.original {
color: #999;
text-decoration: line-through;
}
.actual {
margin-left: 10rpx;
color: #444;
}
.text {
font-size: 22rpx;
}
.quantity {
position: absolute;
bottom: 0;
right: 0;
font-size: 24rpx;
color: #444;
}
.action {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
padding: 30rpx 0 0;
.button {
width: 200rpx;
height: 60rpx;
text-align: center;
justify-content: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 60rpx;
border: 1rpx solid #ccc;
font-size: 26rpx;
color: #444;
}
.primary {
color: #27ba9b;
border-color: #27ba9b;
}
}
}
.total {
line-height: 1;
font-size: 26rpx;
padding: 20rpx 0;
color: #666;
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 0;
}
.symbol::before {
content: '¥';
font-size: 80%;
margin-right: 3rpx;
}
.primary {
color: #cf4444;
font-size: 36rpx;
}
}
}
.detail {
line-height: 1;
padding: 30rpx 20rpx 0;
margin: 20rpx 20rpx 0;
font-size: 26rpx;
color: #666;
border-radius: 10rpx;
background-color: #fff;
.title {
font-size: 30rpx;
color: #444;
}
.row {
padding: 20rpx 0;
.item {
padding: 10rpx 0;
display: flex;
align-items: center;
}
.copy {
border-radius: 20rpx;
font-size: 20rpx;
border: 1px solid #ccc;
padding: 5rpx 10rpx;
margin-left: 10rpx;
}
}
}
.toolbar-height {
height: 100rpx;
box-sizing: content-box;
}
.toolbar {
position: fixed;
left: 0;
right: 0;
bottom: calc(var(--window-bottom));
z-index: 1;
height: 100rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
flex-direction: row-reverse;
border-top: 1rpx solid #ededed;
border-bottom: 1rpx solid #ededed;
background-color: #fff;
box-sizing: content-box;
.button {
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 72rpx;
margin-left: 15rpx;
font-size: 26rpx;
border-radius: 72rpx;
border: 1rpx solid #ccc;
color: #444;
}
.delete {
order: 4;
}
.button {
order: 3;
}
.secondary {
order: 2;
color: #27ba9b;
border-color: #27ba9b;
}
.primary {
order: 1;
color: #fff;
background-color: #27ba9b;
}
}
.popup-root {
padding: 30rpx 30rpx 0;
border-radius: 10rpx 10rpx 0 0;
overflow: hidden;
.title {
font-size: 30rpx;
text-align: center;
margin-bottom: 30rpx;
}
.description {
font-size: 28rpx;
padding: 0 20rpx;
.tips {
color: #444;
margin-bottom: 12rpx;
}
.cell {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15rpx 0;
color: #666;
}
.icon::before {
content: '\e6cd';
font-family: 'erabbit' !important;
font-size: 38rpx;
color: #999;
}
.icon.checked::before {
content: '\e6cc';
font-size: 38rpx;
color: #27ba9b;
}
}
.footer {
display: flex;
justify-content: space-between;
padding: 30rpx 0 40rpx;
font-size: 28rpx;
color: #444;
.button {
flex: 1;
height: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx;
color: #444;
border-radius: 72rpx;
border: 1rpx solid #ccc;
}
.primary {
color: #fff;
background-color: #27ba9b;
border: none;
}
}
}
@import './detail.scss';
</style>

365
src/pagesOrder/list/components/OrderListSkeleton.vue Normal file
View File

@ -0,0 +1,365 @@
<template name="skeleton">
<view class="sk-container">
<scroll-view :scroll-y="true" class="orders orderList--orders" :enable-back-to-top="true">
<view class="card orderList--card">
<view class="status orderList--status">
<text class="date orderList--date sk-transparent sk-text-14-2857-751 sk-text"
>2023-04-14 13:14:20</text
>
<text class="sk-transparent sk-text-14-2857-212 sk-text">待发货</text>
</view>
<navigator :render-link="false" class="goods orderList--goods" hover-class="none">
<view class="cover orderList--cover">
<image class="image orderList--image sk-image" mode="aspectFit"></image>
</view>
<view class="meta orderList--meta">
<view
class="name orderList--name ellipsis orderList--ellipsis sk-transparent sk-text-14-2857-190 sk-text"
>ins风小碎花泡泡袖衬110-160cm</view
>
<view class="type orderList--type sk-transparent sk-text-22-2222-84 sk-text"
>米底碎花 130</view
>
</view>
</navigator>
<view class="payment orderList--payment">
<text
class="quantity orderList--quantity sk-transparent sk-text-0-0000-734 sk-text"
style="background-position-x: 100%"
>共2件商品</text
>
<text
class="sk-transparent sk-text-0-0000-567 sk-text"
style="background-position-x: 100%"
>实付</text
>
<text class="amount orderList--amount sk-transparent"
><text class="symbol orderList--symbol sk-transparent sk-opacity">¥</text>203.00</text
>
</view>
<view class="action orderList--action">
<navigator
:render-link="false"
class="button orderList--button secondary orderList--secondary sk-transparent sk-text-14-2857-906 sk-text"
hover-class="none"
>
再次购买
</navigator>
</view>
</view>
<view class="card orderList--card">
<view class="status orderList--status">
<text class="date orderList--date sk-transparent sk-text-14-2857-245 sk-text"
>2023-04-14 13:14:20</text
>
<text class="sk-transparent sk-text-14-2857-180 sk-text">待发货</text>
</view>
<navigator :render-link="false" class="goods orderList--goods" hover-class="none">
<view class="cover orderList--cover">
<image class="image orderList--image sk-image" mode="aspectFit"></image>
</view>
<view class="meta orderList--meta">
<view
class="name orderList--name ellipsis orderList--ellipsis sk-transparent sk-text-14-2857-592 sk-text"
>经典品种交响曲，智利混酿干白750毫升</view
>
<view class="type orderList--type sk-transparent sk-text-22-2222-288 sk-text"
>礼袋（单支/双支均适用）</view
>
</view>
</navigator>
<view class="payment orderList--payment">
<text
class="quantity orderList--quantity sk-transparent sk-text-0-0000-744 sk-text"
style="background-position-x: 100%"
>共1件商品</text
>
<text
class="sk-transparent sk-text-0-0000-596 sk-text"
style="background-position-x: 100%"
>实付</text
>
<text class="amount orderList--amount sk-transparent"
><text class="symbol orderList--symbol sk-transparent sk-opacity">¥</text>11.90</text
>
</view>
<view class="action orderList--action">
<navigator
:render-link="false"
class="button orderList--button secondary orderList--secondary sk-transparent sk-text-14-2857-29 sk-text"
hover-class="none"
>
再次购买
</navigator>
</view>
</view>
</scroll-view>
</view>
</template>
<style lang="scss">
/* #ifdef H5 */
@import './orderList.scss';
/* #endif */
.sk-transparent {
color: transparent !important;
}
.sk-text-26-6667-284 {
background-image: linear-gradient(
transparent 26.6667%,
#eeeeee 0%,
#eeeeee 73.3333%,
transparent 0%
) !important;
background-size: 100% 60rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-26-6667-396 {
background-image: linear-gradient(
transparent 26.6667%,
#eeeeee 0%,
#eeeeee 73.3333%,
transparent 0%
) !important;
background-size: 100% 60rpx;
position: relative !important;
}
.sk-text-26-6667-644 {
background-image: linear-gradient(
transparent 26.6667%,
#eeeeee 0%,
#eeeeee 73.3333%,
transparent 0%
) !important;
background-size: 100% 60rpx;
position: relative !important;
}
.sk-text-26-6667-171 {
background-image: linear-gradient(
transparent 26.6667%,
#eeeeee 0%,
#eeeeee 73.3333%,
transparent 0%
) !important;
background-size: 100% 60rpx;
position: relative !important;
}
.sk-text-26-6667-939 {
background-image: linear-gradient(
transparent 26.6667%,
#eeeeee 0%,
#eeeeee 73.3333%,
transparent 0%
) !important;
background-size: 100% 60rpx;
position: relative !important;
}
.sk-text-14-2857-751 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 39.2rpx;
position: relative !important;
}
.sk-text-14-2857-212 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 39.2rpx;
position: relative !important;
}
.sk-text-14-2857-190 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-22-2222-84 {
background-image: linear-gradient(
transparent 22.2222%,
#eeeeee 0%,
#eeeeee 77.7778%,
transparent 0%
) !important;
background-size: 100% 43.2rpx;
position: relative !important;
}
.sk-text-0-0000-734 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 24rpx;
position: relative !important;
}
.sk-text-0-0000-567 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 28rpx;
position: relative !important;
}
.sk-opacity {
opacity: 0 !important;
}
.sk-text-14-2857-906 {
background-color: #ebebeb !important;
}
.sk-text-14-2857-245 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 39.2rpx;
position: relative !important;
}
.sk-text-14-2857-180 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 39.2rpx;
position: relative !important;
}
.sk-text-14-2857-592 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-22-2222-288 {
background-image: linear-gradient(
transparent 22.2222%,
#eeeeee 0%,
#eeeeee 77.7778%,
transparent 0%
) !important;
background-size: 100% 43.2rpx;
position: relative !important;
}
.sk-text-0-0000-744 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 24rpx;
position: relative !important;
}
.sk-text-0-0000-596 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 28rpx;
position: relative !important;
}
.sk-text-14-2857-29 {
background-color: #ebebeb !important;
}
.sk-text-14-2857-33 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 39.2rpx;
position: relative !important;
}
.sk-text-14-2857-709 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 39.2rpx;
position: relative !important;
}
.sk-text-0-0000-544 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 28rpx;
position: relative !important;
}
.sk-text-14-2857-253 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-image {
background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
background: #efefef !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
.orders .action .secondary {
border-color: #ebebeb !important;
}
</style>

178
src/pagesOrder/list/components/orderList.scss Normal file
View File

@ -0,0 +1,178 @@
// 订单列表
.orders {
.card {
min-height: 100rpx;
padding: 20rpx;
margin: 20rpx 20rpx 0;
border-radius: 10rpx;
background-color: #fff;
&:last-child {
padding-bottom: 40rpx;
}
}
.status {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
color: #999;
margin-bottom: 15rpx;
.date {
color: #666;
flex: 1;
}
.primary {
color: #ff9240;
}
.icon-delete {
line-height: 1;
margin-left: 10rpx;
padding-left: 10rpx;
border-left: 1rpx solid #e3e3e3;
}
}
.goods {
display: flex;
margin-bottom: 20rpx;
.cover {
width: 170rpx;
height: 170rpx;
margin-right: 20rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.image {
width: 170rpx;
height: 170rpx;
}
}
.quantity {
position: absolute;
bottom: 0;
right: 0;
line-height: 1;
padding: 6rpx 4rpx 6rpx 8rpx;
font-size: 24rpx;
color: #fff;
border-radius: 10rpx 0 0 0;
background-color: rgba(0, 0, 0, 0.6);
}
.meta {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.name {
height: 80rpx;
font-size: 26rpx;
color: #444;
}
.type {
line-height: 1.8;
padding: 0 15rpx;
margin-top: 10rpx;
font-size: 24rpx;
align-self: flex-start;
border-radius: 4rpx;
color: #888;
background-color: #f7f7f8;
}
.more {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #333;
}
}
.payment {
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 1;
padding: 20rpx 0;
text-align: right;
color: #999;
font-size: 28rpx;
border-bottom: 1rpx solid #eee;
.quantity {
font-size: 24rpx;
margin-right: 16rpx;
}
.amount {
color: #444;
margin-left: 6rpx;
}
.symbol {
font-size: 20rpx;
}
}
.action {
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 20rpx;
.time {
color: #999;
font-size: 24rpx;
margin-right: 20rpx;
}
.button {
width: 180rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx;
border-radius: 60rpx;
border: 1rpx solid #ccc;
font-size: 26rpx;
color: #444;
}
.secondary {
color: #27ba9b;
border-color: #27ba9b;
}
.primary {
color: #fff;
background-color: #27ba9b;
border-color: #27ba9b;
}
.disabled {
color: #ccc;
background-color: #f7f7f8;
border-color: #eee;
}
}
.loading-text {
text-align: center;
font-size: 28rpx;
color: #666;
padding: 20rpx 0;
}
}

171
src/pagesOrder/list/components/orderList.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<OrderListSkeleton v-if="showSkeleton" />
<scroll-view scroll-y class="orders" @scrolltolower="onScrollToLower" v-else>
<view class="card" v-for="item in orderItems" :key="item.id">
<!-- 订单信息 -->
<view class="status">
<text class="date">{{ item.createTime }}</text>
<!-- 订单状态文字 -->
<text>{{ OrderStateList[item.orderState].text }}</text>
<!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
<text v-if="item.orderState >= 4" class="icon-delete" @tap="handleDelete(item)"
>删除订单</text
>
</view>
<!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
<navigator
:render-link="false"
v-for="sku in item.skus"
:key="sku.id"
class="goods"
:url="`/pagesOrder/detail/detail?id=${item.id}`"
hover-class="none"
>
<view class="cover">
<image class="image" mode="aspectFit" :src="sku.image"></image>
</view>
<view class="meta">
<view class="name ellipsis">{{ sku.name }}</view>
<view class="type">{{ sku.attrsText.replaceAll('，', ' ') }}</view>
</view>
</navigator>
<!-- 支付信息 -->
<view class="payment">
<text class="quantity">共{{ item.totalNum }}件商品</text>
<text>实付</text>
<text class="amount"> <text class="symbol">¥</text>{{ item.payMoney.toFixed(2) }}</text>
</view>
<!-- 订单操作按钮 -->
<view class="action">
<!-- 待付款状态：显示去支付按钮 -->
<template v-if="item.orderState === 1">
<text class="time">支付剩余</text>
<uni-countdown
color="#999999"
splitor-color="#999999"
:show-day="false"
:second="item.countdown"
:show-colon="false"
@timeup="item.orderState = 6"
/>
<view
class="button"
:class="{ primary: item.countdown > 0, disabled: item.countdown <= 0 }"
@tap="handlePay(item)"
>去支付</view
>
</template>
<template v-else>
<navigator
:render-link="false"
class="button secondary"
:url="`/pagesOrder/create/create?orderId=${item.id}`"
hover-class="none"
>
再次购买
</navigator>
<!-- 待收货状态: 展示确认收货 -->
<view v-if="item.orderState === 3" class="button primary">确认收货</view>
</template>
</view>
</view>
<!-- 底部提示文字 -->
<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
{{ isLoading ? '正在加载...' : '没有更多数据~' }}
</view>
</scroll-view>
</template>
<script setup lang="ts">
import { deleteMemberOrderAPI, getMemberOrderListAPI, OrderStateList } from '@/services/order'
import { getMockPayParamsAPI, getWechatPayParamsAPI } from '@/services/pay'
import type { OrderItem, OrderListParams } from '@/types/order'
import { onBeforeMount, ref } from 'vue'
import OrderListSkeleton from './OrderListSkeleton.vue'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const props = defineProps<{
orderState: number
}>()
// 查询参数
const queryParams = ref<OrderListParams>({
page: 1,
pageSize: 5,
orderState: props.orderState,
})
// 总页数
const pages = ref(1)
// 加载状态
const showSkeleton = ref(true)
const isLoading = ref(false)
// 获取订单列表
const orderItems = ref<OrderItem[]>([])
const getOrderList = async () => {
isLoading.value = true
const res = await getMemberOrderListAPI(queryParams.value)
if (res.code === '1') {
orderItems.value = res.result.items
pages.value = res.result.pages
}
isLoading.value = false
}
// 去支付
const isDev = import.meta.env.DEV
const handlePay = async (item: OrderItem) => {
let res = null
if (isDev) {
// 测试环境获取模拟支付参数
res = await getMockPayParamsAPI({ orderId: item.id })
} else {
// 生产环境获取微信支付参数
res = await getWechatPayParamsAPI({ orderId: item.id })
}
if (res.code === '1') {
await uni.showToast({ title: '支付成功', icon: 'success' })
item.orderState = 2
} else {
uni.showToast({ title: res.msg, icon: 'error' })
}
}
// 删除订单
const handleDelete = async (item: OrderItem) => {
console.log('删除订单')
uni.showModal({
content: '确定删除订单吗？',
success: async ({ confirm }) => {
if (confirm) {
const res = await deleteMemberOrderAPI({ ids: [item.id] })
if (res.code === '1') {
await uni.showToast({ title: '删除订单成功', icon: 'success' })
orderItems.value.splice(orderItems.value.indexOf(item), 1)
}
}
},
})
}
// 滚动到底部
const onScrollToLower = () => {
console.log('滚动到底部')
if (queryParams.value.page! < pages.value) {
queryParams.value.page!++
getOrderList()
}
}
onBeforeMount(async () => {
await getOrderList()
showSkeleton.value = false
})
</script>
<style lang="scss">
@import './orderList.scss';
</style>

112
src/pagesOrder/list/list.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<view class="viewport">
<!-- tabs -->
<view class="tabs">
<text
class="item"
v-for="(item, index) in orderTabs"
:key="item.orderState"
@tap="activeTab = index"
>
{{ item.title }}
</text>
<!-- 游标 -->
<view class="cursor" :style="{ left: activeTab * (100 / orderTabs.length) + '%' }"></view>
</view>
<!-- 滑动容器 -->
<swiper
class="swiper"
:current="activeTab"
@change="
(e) => {
activeTab = e.detail.current
}
"
>
<!-- 滑动项 -->
<swiper-item v-for="item in orderTabs" :key="item.orderState">
<!-- 订单列表 -->
<order-list :type="item.orderState" :orderState="item.orderState" />
</swiper-item>
</swiper>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import orderList from './components/orderList.vue'
// tabs 数据
const orderTabs = ref([
{ orderState: 0, title: '全部' },
{ orderState: 1, title: '待付款' },
{ orderState: 2, title: '待发货' },
{ orderState: 3, title: '待收货' },
{ orderState: 4, title: '待评价' },
])
const query = withDefaults(
defineProps<{
type: string
}>(),
{
type: '0',
},
)
// 当前选中的tab
const activeTab = ref(
orderTabs.value.findIndex((item) => item.orderState.toString() === query.type),
)
</script>
<style lang="scss">
page {
height: 100%;
overflow: hidden;
}
.viewport {
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
}
// tabs
.tabs {
display: flex;
justify-content: space-around;
line-height: 60rpx;
margin: 0 10rpx;
background-color: #fff;
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
position: relative;
z-index: 9;
.item {
flex: 1;
text-align: center;
padding: 20rpx;
font-size: 28rpx;
color: #262626;
}
.cursor {
position: absolute;
left: 0;
bottom: 0;
width: 20%;
height: 6rpx;
padding: 0 50rpx;
background-color: #27ba9b;
/* 过渡效果 */
transition: all 0.4s;
}
}
// swiper
.swiper {
background-color: #f7f7f8;
}
</style>

1
src/pagesOrder/payment/payment.vue
View File

@ -25,6 +25,7 @@ const { guessRef, onScrollToLower } = useGuessList()
返回首页
</navigator>
<navigator
:render-link="false"
hover-class="none"
class="button navigator"
:url="`/pagesOrder/detail/detail?id=${query.id}`"

2
src/utils/http.ts
View File

@ -21,7 +21,7 @@ const interceptorOptions = {
options.url = baseUrl + options.url
}
// 2. 超时时间, 默认60s
options.timeout = 10 * 1000
options.timeout = 60 * 1000
// 3. 请求头
options.header = {
...options.header,