cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

Browse Source
This commit is contained in:
黄少君
2023-11-15 19:59:37 +08:00
parent dcab74274f
commit 35b43ffd97
43 changed files with 1265 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/Header/index.vue
View File

@ -10,6 +10,7 @@ import { computed, defineProps, ref, toRefs, unref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useRouter } from "@/hooks/useRouter";
import { createAnimation } from "@/utils/utils";
import { useScroll } from "@/hooks/useScroll";
const HEADER_HEIGHT = 40 // header高度
@ -66,10 +67,6 @@ const props = defineProps({
type: String,
default: () => '#fff'
},
scrollTop: {
type: Number,
default: () => 0
},
propUp: {
type: Boolean,
default: () => true
@ -94,7 +91,6 @@ const {
textShadow,
bgChangeByScroll,
bgChangeColor,
scrollTop,
propUp,
showRight,
leftWidth
@ -146,7 +142,7 @@ function getMenuInfo() {
// scss全局变量
const scssVarStyle = computed(() => {
return {
'--header-height': `${ HEADER_HEIGHT * 2 }rpx`
'--header-height': `${ HEADER_HEIGHT }px`
}
})
@ -154,7 +150,7 @@ const scssVarStyle = computed(() => {
const systemBarAreaStyle = computed(() => {
return {
width: '100%',
height: `${ unref(heightInfo).safeAreaInsets.top * 2 }rpx`,
height: `${ unref(heightInfo).statusBarHeight * 2 }rpx`,
background: unref(systemBarAreaBg)
}
})
@ -163,7 +159,7 @@ const systemBarAreaStyle = computed(() => {
const headerAreaStyle = computed(() => {
// 计算margin top
// margin-top (导航条高度 - 胶囊高度) / 2 永远确保胶囊在header中央
const marginTop = unref(menuInfo).height > 0 ? `-${ ((HEADER_HEIGHT - (unref(menuInfo).height)) / 2) * 2 }rpx` : 0
const marginTop = unref(menuInfo).height > 0 ? `-${((HEADER_HEIGHT - unref(menuInfo).height))/2}px` : 0
return {
width: '100%',
background: unref(headerAreaBg),
@ -202,7 +198,7 @@ const scrollMaskStyle = computed(() => {
// 总高度
const containerHeight = computed(() => {
return (unref(heightInfo).safeAreaInsets.top + HEADER_HEIGHT) * 2
return (unref(heightInfo).statusBarHeight + HEADER_HEIGHT)
})
let animation
@ -212,6 +208,7 @@ function doCreateAnimation() {
animation = createAnimation(0, scrollEnd, 0, 1)
}
const {scrollTop} = useScroll();
watch(scrollTop, () => {
if (!bgChangeByScroll.value) return
if (!animation) doCreateAnimation()
@ -289,7 +286,7 @@ onLoad(() => {
<!-- 撑起 -->
<view
class="prop-up"
:style="{height:`${containerHeight}rpx`}"
:style="{height:`${containerHeight}px`}"
v-if="propUp"
></view>
</view>

2
components/Modal/index.vue
View File

@ -126,7 +126,7 @@ defineExpose({show, close})
text-align: center;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #ee6d46;
border: 1px solid #ee6d46;
background: #ee6d46;
color: #fff;
}

2
components/PayPopup/index.vue
View File

@ -52,7 +52,7 @@ async function handleSubmit() {
close()
} catch (e) {
console.error(e)
push({url: '/pages/payStatus/index?type=2'})
push({url: '/pages/payStatus/index'},{data:{type:2}})
toast({title: '支付失败了'})
close()
}

7
components/Popup/index.vue
View File

@ -10,7 +10,7 @@ import { nextTick, ref, toRefs } from "vue";
import UniPopup from "@/components/uniComponents/UPopup/uni-popup/uni-popup.vue";
/** some javascript code in here */
const emit = defineEmits(['open', 'close'])
const emit = defineEmits(['open', 'close', 'maskClick'])
/**
* @property {String} title 标题
* @property {String} mode 模式
@ -73,6 +73,10 @@ const handlePopupChange = (e) => {
if (!e.show) emit('close')
}
const handleMaskClick = (e) => {
emit('maskClick')
}
defineExpose({
show,
close
@ -86,6 +90,7 @@ defineExpose({
:is-mask-click="isMaskClick"
background-color="#fff"
@change="handlePopupChange"
@maskClick="handleMaskClick"
class="y-popup"
>
<view class="popup_inner">

192
components/Recommend/index.vue Normal file
View File

@ -0,0 +1,192 @@
<!--
@name: 新品首发
@author: kahu4
@date: 2023-10-27 14:42
@description：index
@update: 2023-10-27 14:42
-->
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { usePage } from "@/hooks";
import { getProductList } from "@/api/product";
import Empty from "@/components/Empty/index.vue"
import ListLoadOver from "@/components/ListLoadOver/index.vue"
import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
import { useRouter } from "@/hooks/useRouter";
import emptyIcon from "@/static/icon/empty/收藏.png";
import Goods from "@/components/goodsComponents/Goods.vue";
import { computed, toRefs } from "vue";
const {refresh, dataList, loadend, loading, listEmpty} = usePage(getProductList)
const {push} = useRouter()
onLoad(() => {
refresh()
})
const props = defineProps({
more:{
type:Boolean,
default:()=>true
}
})
const { more } = toRefs(props)
const colList = computed(() => [
{
name: 'all',
data: dataList.value.filter((item,index)=>index%2===0)
},
{
name:'right',
data: dataList.value.filter((item,index)=>index%2!==0)
}
])
</script>
<template>
<!--push({ url: '/pages/goodsList/goodsList' }-->
<view class="recommend-container">
<slot name="head">
<view class="title-row">
商品推荐
</view>
</slot>
<view
class="product-box"
v-if="!listEmpty"
>
<!-- 分两列 后期瀑布流 -->
<template
v-for="col in colList"
:key="col.name"
>
<view class="goods-col">
<template
v-for="item in col.data"
:key="item.id"
>
<view class="product">
<Goods
:ratio="true"
:goods="item"
infoPadding="30rpx 10rpx"
>
<template #options>
<view class="good-bottom">
<view class="price">
￥{{ item.price }}
</view>
<view class="sale">
仅剩{{ item.stock }}件
</view>
</view>
</template>
</Goods>
</view>
</template>
</view>
</template>
</view>
<Empty
v-else
:iconSrc="emptyIcon"
>
暂时没有商品推荐哦~
</Empty>
<!-- 加载中 -->
<ListLoadLoading v-if="loading" />
<!-- 加载完毕-->
<ListLoadOver v-if="loadend" >
<template v-if="more">
<span @click="push({ url: '/pages/goodsList/goodsList' })">
浏览更多商品
</span>
</template>
<template v-else>
到底了~
</template>
</ListLoadOver>
</view>
</template>
<style
scoped
lang="scss"
>
.recommend-container{
@include usePadding(30, 20);
width: 100%;
.title-row{
width: 100%;
font-size:32rpx;
text-align: center;
position: relative;
color: #333;
font-weight: bold;
&::before,&::after{
content: '';
position: absolute;
width: 10%;
height: 3rpx;
border-radius: 5rpx;
background: #333;
top: 50%;
transform: translate(0,50%);
}
&::before{
left: 25%;
}
&::after{
right: 25%;
}
}
}
.product-box {
margin-top: 30rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
//display: flex;
//gap: 20rpx;
.goods-col {
width: 49%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-grow: 0;
float: left;
&:nth-child(2){
float: right;
}
.product {
flex-grow: 0;
width: 100%;
background: $white-color;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 20rpx;
.good-bottom {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20rpx;
.price {
font-size: 28rpx;
}
.sale {
color: #999999;
}
}
}
}
}
</style>

20
components/goodsComponents/Goods.vue
View File

@ -9,6 +9,7 @@
import { toRefs } from "vue";
import { GOODS_ITEM_TYPE } from "@/components/goodsComponents/utils/index.type";
import { useRouter } from "@/hooks/useRouter";
import { getRandom } from "@/utils/utils";
const props = defineProps({
goods: {
@ -21,17 +22,17 @@ const props = defineProps({
},
/** 图片比例 */
ratio: {
type: String,
default: () => "1/1"
type: [String,Boolean],
default: () => '1/1'
},
infoPadding: {
type: String,
default: () => "0 0"
},
/** title是否换行 */
titleNowrap: {
titleWrap: {
type: Boolean,
default: () => true
default: () => false
},
/** title 文字大小 rpx */
titleSize: {
@ -53,7 +54,7 @@ const {
imgWidth,
ratio,
infoPadding,
titleNowrap,
titleWrap,
titleSize,
row,
} = toRefs(props)
@ -63,6 +64,7 @@ const {push} = useRouter()
function toDetail() {
push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id: goods.value.id}})
}
</script>
<template>
@ -75,13 +77,13 @@ function toDetail() {
class="goods-image"
:style="{
'width':imgWidth,
'aspect-ratio':ratio
'aspect-ratio': ratio===true?`${1/getRandom(1,1.3)}`:ratio
}"
>
<image
:src="goods.image"
class="image"
mode="aspectFill"
:mode="ratio===true?'aspectFit':'aspectFill'"
/>
</view>
<!-- good info -->
@ -96,7 +98,7 @@ function toDetail() {
<view
:class="{
'title-row':true,
'nowrap': titleNowrap
'nowrap': !titleWrap
}"
:style="{
'font-size':`${titleSize}rpx`
@ -136,7 +138,7 @@ function toDetail() {
.title-row {
user-select: none;
width: 100%;
//padding: 14rpx 0;
padding-bottom: 15rpx;
font-size: 28rpx;
}

4
components/order/order.vue
View File

@ -1,7 +1,6 @@
<template>
<view>
<view
:class="['order', className]"
:class="['order']"
v-if="data"
>
@ -119,7 +118,6 @@
</view>
</view>
</view>
</template>
<script setup>

13
components/reply/reply.vue
View File

@ -39,10 +39,10 @@
</view>
<view
class="reply-pic flex flex-ai__center"
v-if="data.pics && data.pics.length>0"
v-if="data.pics && data.pics.filter(item=>!!item).length>0"
>
<template
v-for="(pic,index) in data.pics"
v-for="(pic,index) in data.pics.filter(item=>!!item)"
:key="index"
>
<image
@ -154,11 +154,12 @@ function doPreviewImage(current, urls) {
.reply-pic {
gap: 20rpx;
margin-bottom: 20rpx;
margin: 20rpx 0;
flex-wrap: wrap;
padding: 0;
.image {
width: 180rpx;
height: 180rpx;
width: 212rpx;
height: 212rpx;
}
}
</style>