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

feat: ✨ h5 样式兼容

Browse Source
This commit is contained in:
jqtmviyu 2025-05-15 10:40:22 +08:00
parent 2ac3cd88f5
commit 7adca6685d
14 changed files with 184 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/JbcSwiper.vue
View File

@ -49,35 +49,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": "",

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

@ -153,7 +153,11 @@
</view>
</template>
<style>
<style lang="scss">
// #ifdef H5
@import '@/components/styles/JbcSwiper.scss';
// #endif
.sk-transparent {
color: transparent !important;
}

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

@ -97,16 +97,18 @@
<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>
<!-- #endif -->
<navigator 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>
@ -502,11 +504,11 @@ page {
position: fixed;
left: 0;
right: 0;
bottom: 0;
bottom: calc((var(--window-bottom)));
z-index: 1;
background-color: #fff;
height: 100rpx;
padding: 0 20rpx var(--window-bottom);
padding: 0 20rpx;
border-top: 1rpx solid #eaeaea;
display: flex;
justify-content: space-between;
@ -525,17 +527,18 @@ page {
.addcart {
background-color: #ffa868;
}
.buynow,
.payment {
background-color: #27ba9b;
margin-left: 20rpx;
}
}
.icons {
padding-right: 10rpx;
padding-right: 20rpx;
display: flex;
align-items: center;
flex: 1;
// 兼容 H5 端和 App 端的导航链接样式
.navigator-wrap,
.icons-button {
flex: 1;
text-align: center;

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

@ -7,8 +7,12 @@
v-for="item in props.list"
:key="item.id"
>
<image class="icon" :src="item.icon"></image>
<text class="text">{{ item.name }}</text>
<view>
<image class="icon" :src="item.icon"></image>
</view>
<view>
<text class="text">{{ item.name }}</text>
</view>
</navigator>
</view>
</template>
@ -22,30 +26,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>

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

@ -29,62 +29,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>

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

@ -146,7 +146,13 @@
</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;
}

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>

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

@ -57,7 +57,9 @@
{{ item.text }}
</navigator>
<!-- 客服 -->
<!-- #ifdef MP-WEIXIN -->
<button class="contact icon-handset" open-type="contact">售后</button>
<!-- #endif -->
</view>
</view>
<!-- 猜你喜欢 -->

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

@ -7,11 +7,13 @@
</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>

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

@ -364,14 +364,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 {