root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: root:c70d757a31297ea8436668a20a351ecdd062b6d1
Branches Tags
root:master
root:Branch_ccc
root:zzw-one
..
compare: root:1b6dbfcb5df81fc7406acea2229f2eeadb9d3971
Branches Tags
root:master
root:Branch_ccc
root:zzw-one

No commits in common. "c70d757a31297ea8436668a20a351ecdd062b6d1" and "1b6dbfcb5df81fc7406acea2229f2eeadb9d3971" have entirely different histories.
c70d757a31 ... 1b6dbfcb5d

27 changed files with 1836 additions and 2437 deletions
Show Stats Expand all files Collapse all files

446
pages/activity/groupon/list.vue
View File

@ -1,255 +1,227 @@
<!-- 拼团活动列表 --> <!-- 拼团活动列表 -->
<template> <template>
<s-layout title="拼团列表" navbar="normal" :bgStyle="{ color: '#FE832A',backgroundColor: 'rgba(233,51,35)' }"> <s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
<!-- <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" /> --> <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
<view class="list-content"> <view class="list-content">
<!-- 参团会员统计 --> <!-- 参团会员统计 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center"> <view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-title ss-flex ss-row-center"> <view class="content-header-title ss-flex ss-row-center">
<view v-for="(item, index) in state.summaryData.avatars" :key="index" class="picture" <view
:style="index === 6 ? 'position: relative' : 'position: static'"> v-for="(item, index) in state.summaryData.avatars"
<span class="avatar" :style="`background-image: url(${item})`" /> :key="index"
<span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng"> class="picture"
<i>···</i> :style="index === 6 ? 'position: relative' : 'position: static'"
</span> >
</view> <span class="avatar" :style="`background-image: url(${item})`" />
<text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text> <span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
</view> <i>···</i>
</view> </span>
<scroll-view class="scroll-box" :style="{ height: pageHeight + 'rpx' }" scroll-y="true" </view>
:scroll-with-animation="false" :enable-back-to-top="true"> <text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
<view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id"> </view>
<s-goods-column class="" size="lg" :data="item" :grouponTag="true" </view>
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"> <scroll-view
<template v-slot:cart> class="scroll-box"
<button class="ss-reset-button cart-btn">去拼团</button> :style="{ height: pageHeight + 'rpx' }"
</template> scroll-y="true"
</s-goods-column> :scroll-with-animation="false"
</view> :enable-back-to-top="true"
<uni-load-more color="white" v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{ >
<view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
<s-goods-column
class=""
size="lg"
:data="item"
:grouponTag="true"
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn">去拼团</button>
</template>
</s-goods-column>
</view>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多', contentdown: '上拉加载更多',
}" @tap="loadMore" /> }"
</scroll-view> @tap="loadMore"
</view> />
</s-layout> </scroll-view>
</view>
</s-layout>
</template> </template>
<script setup> <script setup>
import { import { reactive } from 'vue';
reactive import { onLoad, onReachBottom } from '@dcloudio/uni-app';
} from 'vue'; import sheep from '@/sheep';
import { import CombinationApi from '@/sheep/api/promotion/combination';
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import CombinationApi from '@/sheep/api/promotion/combination';
const { const { safeAreaInsets, safeArea } = sheep.$platform.device;
safeAreaInsets, const sysNavBar = sheep.$platform.navbar;
safeArea const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
} = sheep.$platform.device; const pageHeight =
const sysNavBar = sheep.$platform.navbar; (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');
const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');
const state = reactive({ const state = reactive({
pagination: { pagination: {
list: [], list: [],
total: 0, total: 0,
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}, },
loadStatus: '', loadStatus: '',
summaryData: {}, summaryData: {},
}); });
// 加载统计数据 // 加载统计数据
const getSummary = async () => { const getSummary = async () => {
const { const { data } = await CombinationApi.getCombinationRecordSummary();
data state.summaryData = data;
} = await CombinationApi.getCombinationRecordSummary(); };
state.summaryData = data;
};
// 加载活动列表 // 加载活动列表
async function getList() { async function getList() {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
const { const { data } = await CombinationApi.getCombinationActivityPage({
data pageNo: state.pagination.pageNo,
} = await CombinationApi.getCombinationActivityPage({ pageSize: state.pagination.pageSize,
pageNo: state.pagination.pageNo, });
pageSize: state.pagination.pageSize, data.list.forEach((activity) => {
}); state.pagination.list.push({ ...activity, price: activity.combinationPrice });
data.list.forEach((activity) => { });
state.pagination.list.push({ state.pagination.total = data.total;
...activity, state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
price: activity.combinationPrice }
});
});
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
// 加载更多 // 加载更多
function loadMore() { function loadMore() {
if (state.loadStatus === 'noMore') { if (state.loadStatus === 'noMore') {
return; return;
} }
state.pagination.pageNo++; state.pagination.pageNo++;
getList(); getList();
} }
// 上拉加载更多 // 上拉加载更多
onReachBottom(() => loadMore()); onReachBottom(() => loadMore());
// 页面初始化 // 页面初始化
onLoad(() => { onLoad(() => {
getSummary(); getSummary();
getList(); getList();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-bg { .page-bg {
width: 100%; width: 100%;
height: 458rpx; height: 458rpx;
margin-top: -88rpx; margin-top: -88rpx;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png'); background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.list-content {
position: relative;
z-index: 3;
margin: -190rpx 20rpx 0 20rpx;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
.content-header {
width: 100%;
border-radius: 20rpx 20rpx 0 0;
height: 100rpx;
background: linear-gradient(180deg, #fff4f7, #ffe4d1);
.content-header-title {
width: 100%;
font-size: 30rpx;
font-weight: 500;
color: #ff2923;
line-height: 30rpx;
position: relative;
.more {
position: absolute;
right: 30rpx;
top: 0;
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
}
.list-content { .picture {
position: relative; display: inline-table;
z-index: 3; }
margin: 0 20rpx 0 20rpx;
// background: #fff;
border-radius: 20rpx 20rpx 0 0;
.content-header { .avatar {
width: 100%; width: 38rpx;
border-radius: 20rpx 20rpx 0 0; height: 38rpx;
height: 50rpx; display: inline-table;
margin: 10px 0; vertical-align: middle;
position: relative; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
margin-right: -10rpx;
box-shadow: 0 0 0 1px #fe832a;
}
// background: linear-gradient(180deg, #fff4f7, #ffe4d1); .pic_count {
&::after { margin-left: 30rpx;
content: ''; font-size: 22rpx;
position: absolute; font-weight: 500;
right: 15%; width: auto;
height: 1px; height: auto;
width: 50px; background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
background: white; color: #ffffff;
top: 50%; border-radius: 19rpx;
transform: translateY(-50%); padding: 4rpx 14rpx;
} }
&::before { .mengceng {
content: ''; width: 40rpx;
position: absolute; height: 40rpx;
left: 15%; line-height: 36rpx;
height: 1px; background: rgba(51, 51, 51, 0.6);
width: 50px; text-align: center;
background: white; border-radius: 50%;
top: 50%; opacity: 1;
transform: translateY(-50%); position: absolute;
} left: -2rpx;
color: #fff;
.content-header-title { top: 2rpx;
width: 100%; i {
font-size: 30rpx; font-style: normal;
font-weight: 500; font-size: 20rpx;
color: #ff2923; }
line-height: 30rpx; }
position: relative; }
}
.more { .scroll-box {
position: absolute; margin-top: 13px;
right: 30rpx; height: 900rpx;
top: 0; .goods-box {
font-size: 24rpx; position: relative;
font-weight: 400; padding: 0 10px;
color: #999999; .cart-btn {
line-height: 30rpx; position: absolute;
} bottom: 10rpx;
right: 20rpx;
.picture { z-index: 11;
display: inline-table; height: 50rpx;
} line-height: 50rpx;
padding: 0 20rpx;
.avatar { border-radius: 25rpx;
width: 38rpx; font-size: 24rpx;
height: 38rpx; color: #fff;
display: inline-table; background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
vertical-align: middle; }
-webkit-user-select: none; }
-moz-user-select: none; }
-ms-user-select: none; }
user-select: none; </style>
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
margin-right: -10rpx;
box-shadow: 0 0 0 1px #fe832a;
}
.pic_count {
margin-left: 30rpx;
font-size: 22rpx;
font-weight: 500;
width: auto;
height: auto;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
color: #ffffff;
border-radius: 19rpx;
padding: 4rpx 14rpx;
}
.mengceng {
width: 40rpx;
height: 40rpx;
line-height: 36rpx;
background: rgba(51, 51, 51, 0.6);
text-align: center;
border-radius: 50%;
opacity: 1;
position: absolute;
left: -2rpx;
color: #fff;
top: 2rpx;
i {
font-style: normal;
font-size: 20rpx;
}
}
}
}
.scroll-box {
// margin-top: 13px;
height: 900rpx;
.goods-box {
position: relative;
padding: 0 10px;
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
}
}
}
}
</style>

30
pages/activity/seckill/list.vue
View File

@ -1,11 +1,11 @@
<!-- 秒杀活动列表 --> <!-- 秒杀活动列表 -->
<template> <template>
<s-layout title="秒杀列表" navbar="normal" :bgStyle="{ color: 'rgb(245,28,19)' }"> <s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
<!--顶部背景图--> <!--顶部背景图-->
<!-- <view <view
class="page-bg" class="page-bg"
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
></view> --> ></view>
<!-- 时间段轮播图 --> <!-- 时间段轮播图 -->
<view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0"> <view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
<swiper <swiper
@ -45,7 +45,7 @@
:key="index" :key="index"
:class="['item', { active: activeTimeIndex === index }]" :class="['item', { active: activeTimeIndex === index }]"
:id="`timeItem${index}`" :id="`timeItem${index}`"
@tap="handleChangeTimeConfig(index,config.id)" @tap="handleChangeTimeConfig(index)"
> >
<!-- 活动起始时间 --> <!-- 活动起始时间 -->
<view class="time">{{ config.startTime }}</view> <view class="time">{{ config.startTime }}</view>
@ -58,7 +58,7 @@
<!-- 内容区 --> <!-- 内容区 -->
<view class="list-content"> <view class="list-content">
<!-- 活动倒计时 --> <!-- 活动倒计时 -->
<!-- <view class="content-header ss-flex-col ss-col-center ss-row-center"> <view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-box ss-flex ss-row-center"> <view class="content-header-box ss-flex ss-row-center">
<view <view
class="countdown-box ss-flex" class="countdown-box ss-flex"
@ -75,7 +75,7 @@
</view> </view>
<view v-else> {{ activeTimeConfig?.status }} </view> <view v-else> {{ activeTimeConfig?.status }} </view>
</view> </view>
</view> --> </view>
<!-- 活动列表 --> <!-- 活动列表 -->
<scroll-view <scroll-view
@ -174,9 +174,8 @@
} }
}); });
timeConfigList.value = data; timeConfigList.value = data;
console.log(timeConfigList.value[0]?.id,"timeConfigList.value[0]?.id");
// 默认选中进行中的活动 // 默认选中进行中的活动
handleChangeTimeConfig(activeTimeIndex.value, timeConfigList.value[0]?.id); handleChangeTimeConfig(activeTimeIndex.value);
// 滚动到进行中的时间段 // 滚动到进行中的时间段
scrollToTimeConfig(activeTimeIndex.value); scrollToTimeConfig(activeTimeIndex.value);
}; };
@ -190,13 +189,13 @@
// 切换时间段 // 切换时间段
const activeTimeIndex = ref(0); // 当前选中的时间段的索引 const activeTimeIndex = ref(0); // 当前选中的时间段的索引
const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]); // 当前选中的时间段 const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]); // 当前选中的时间段
const handleChangeTimeConfig = (index, config) => { const handleChangeTimeConfig = (index) => {
activeTimeIndex.value = index; activeTimeIndex.value = index;
console.log(config,'config')
// 查询活动列表 // 查询活动列表
activityPageParams.pageNo = 1; activityPageParams.pageNo = 1;
activityList.value = []; activityList.value = [];
getActivityList(config); getActivityList();
}; };
// 倒计时 // 倒计时
@ -213,16 +212,15 @@
// 查询活动列表 // 查询活动列表
const activityPageParams = reactive({ const activityPageParams = reactive({
configId: 0, // 时间段 ID id: 0, // 时间段 ID
pageNo: 1, // 页码 pageNo: 1, // 页码
pageSize: 5, // 每页数量 pageSize: 5, // 每页数量
}); });
const activityTotal = ref(0); // 活动总数 const activityTotal = ref(0); // 活动总数
const activityList = ref([]); // 活动列表 const activityList = ref([]); // 活动列表
const loadStatus = ref(''); // 页面加载状态 const loadStatus = ref(''); // 页面加载状态
async function getActivityList(id) { async function getActivityList() {
loadStatus.value = 'loading'; loadStatus.value = 'loading';
activityPageParams.configId= id;
const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams); const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams);
data.list.forEach((activity) => { data.list.forEach((activity) => {
// 计算抢购进度 // 计算抢购进度
@ -266,7 +264,7 @@
.header { .header {
width: 710rpx; width: 710rpx;
height: 330rpx; height: 330rpx;
margin: 0 auto 0 auto; margin: -276rpx auto 0 auto;
border-radius: 14rpx; border-radius: 14rpx;
overflow: hidden; overflow: hidden;
swiper { swiper {
@ -333,7 +331,7 @@
position: relative; position: relative;
z-index: 3; z-index: 3;
margin: 0 20rpx 0 20rpx; margin: 0 20rpx 0 20rpx;
// background: #fff; background: #fff;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
.content-header { .content-header {
width: 100%; width: 100%;

2
pages/goods/components/groupon/groupon-card-list.vue
View File

@ -10,7 +10,7 @@
v-for="(record, index) in state.list" v-for="(record, index) in state.list"
@tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })" @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })"
:key="index" :key="index"
class="ss-m-t-40 ss-flex ss-row-between ss-p-b-30" class="ss-m-t-40 ss-flex ss-row-between border-bottom ss-p-b-30"
> >
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<image :src="sheep.$url.cdn(record.avatar)" class="user-avatar"></image> <image :src="sheep.$url.cdn(record.avatar)" class="user-avatar"></image>

1063
pages/goods/groupon.vue
View File

File diff suppressed because one or more lines are too long

4
pages/goods/point.vue
View File

@ -96,7 +96,7 @@
> >
<view class="price-box ss-flex"> <view class="price-box ss-flex">
<image <image
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png" :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
style="width: 36rpx;height: 36rpx;margin: 0 4rpx;" style="width: 36rpx;height: 36rpx;margin: 0 4rpx;"
></image> ></image>
<text class="point-text ss-m-r-16"> <text class="point-text ss-m-r-16">
@ -372,7 +372,7 @@
font-size: 24rpx; font-size: 24rpx;
font-weight: 600; font-weight: 600;
margin-left: -36rpx; margin-left: -36rpx;
background-image: url('https://zysc.fjptzykj.com:3000/shangcheng/ae81b6671e07f250d4bbccc9707409e970cd5ecee9d4fd861fd0bb926812dda9.png'); background-image: v-bind(btnBg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #ffffff; color: #ffffff;

268
pages/goods/seckill.vue
View File

File diff suppressed because one or more lines are too long

19
pages/index/index.vue
View File

@ -1,22 +1,14 @@
<!-- 首页，支持店铺装修 --> <!-- 首页，支持店铺装修 -->
<template> <template>
<view v-if="template"> <view v-if="template">
<s-layout <s-layout
title="首页" title="首页"
navbar="normal" navbar="custom"
tools="search"
tabbar="/pages/index/index" tabbar="/pages/index/index"
:bgStyle="template.page" :bgStyle="template.page"
:navbarStyle="template.navigationBar" :navbarStyle="template.navigationBar"
onShareAppMessage onShareAppMessage
@search="(e) => { console.log(e,'eeeeeeeeeeee') }"
headerBtns='headerBtns'
navbarbackgroundColor="rgba(248,83,42)"
opacityBgUi='ll'
:navBg="true"
> >
<view class="new-bg"></view>
<s-block <s-block
v-for="(item, index) in template.components" v-for="(item, index) in template.components"
:key="index" :key="index"
@ -96,11 +88,4 @@
onPageScroll(() => {}); onPageScroll(() => {});
</script> </script>
<style lang="scss"> <style></style>
.new-bg{
background:rgba(248,83,42);
width:100%;
height:50px;
position: absolute;
}
</style>

9
pages/index/page.vue
View File

@ -1,6 +1,13 @@
<!-- 自定义页面：支持装修 --> <!-- 自定义页面：支持装修 -->
<template> <template>
<s-layout navbar="normal" :bgStyle="{ color: '#FE832A'}"> <s-layout
:title="state.name"
navbar="custom"
:bgStyle="state.page"
:navbarStyle="state.navigationBar"
onShareAppMessage
showLeftButton
>
<s-block v-for="(item, index) in state.components" :key="index" :styles="item.property.style"> <s-block v-for="(item, index) in state.components" :key="index" :styles="item.property.style">
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" /> <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block> </s-block>

56
pages/index/user.vue
View File

@ -2,21 +2,11 @@
<template> <template>
<s-layout title="个人中心" tabbar="/pages/index/user" navbar="normal" :bgStyle="template.page" <s-layout title="个人中心" tabbar="/pages/index/user" navbar="normal" :bgStyle="template.page"
:navbarStyle="template.navigationBar" onShareAppMessage> :navbarStyle="template.navigationBar" onShareAppMessage>
<image class="seckill" src="@/static/images/seckilbg.png"></image>
<s-block class="" v-for="(item, index) in template.components" :key="index" :styles="item.property.style"> <s-block class="" v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
<s-block-item style="" :class="item.id == 'UserOrder'? 'ss': ''" :type="item.id" :data="item.property" :styles="item.property.style" /> <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block> </s-block>
<view class="new-huiy" @click="
sheep.$router.go('/pages/user/user_vip/index')
">
<image class="seckill" src="@/static/images/seckilbg.png"></image>
<view class="new-button">立即开通</view>
<img class="seckill1" mode="aspectFit"
src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png" />
</view>
</s-layout> </s-layout>
</template> </template>
@ -51,40 +41,13 @@
onPageScroll(() => {}); onPageScroll(() => {});
</script> </script>
<style lang="scss" scoped> <style>
.new-huiy { .new-main{
width: 100%;
height: 240px;
position: absolute;
top: 0;
.new-button {
background: white;
padding: 8px;
text-align: center;
position: absolute;
border-radius: 20px;
right: 29px;
bottom: 17px;
font-size: 14px;
color: rgba(148, 109, 45, 1);
// z-index: 33;
}
.seckill1 {
position: absolute;
bottom: 0;
// z-index: 22;
/* left: 50%; */
/* transform: translateX(-50%); */
width: 96%;
height: 72px;
}
} }
/* .new-main {} */
.seckill1 { .seckill1 {
position: absolute; position: absolute;
top: 117px;
z-index: 22; z-index: 22;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -99,11 +62,4 @@
view { view {
position: relative; position: relative;
} }
::v-deep .ss{
z-index: 99999;
&>view{
margin-top: 94px;
}
}
</style> </style>

217
pages/order/confirm.vue
View File

@ -6,24 +6,24 @@
<!-- 商品信息 --> <!-- 商品信息 -->
<view class="order-card-box ss-m-b-14"> <view class="order-card-box ss-m-b-14">
<s-goods-item <s-goods-item
v-for="item in state.orderInfo.items" v-for="item in state.orderInfo.items"
:key="item.skuId" :key="item.skuId"
:img="item.picUrl" :img="item.picUrl"
:title="item.spuName" :title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')" :skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price" :price="item.price"
:num="item.count" :num="item.count"
marginBottom="10" marginBottom="10"
/> />
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10"> <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
<view class="item-title">订单备注</view> <view class="item-title">订单备注</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<uni-easyinput <uni-easyinput
maxlength="20" maxlength="20"
placeholder="建议留言前先与商家沟通" placeholder="建议留言前先与商家沟通"
v-model="state.orderPayload.remark" v-model="state.orderPayload.remark"
:inputBorder="false" :inputBorder="false"
:clearable="false" :clearable="false"
/> />
</view> </view>
</view> </view>
@ -41,94 +41,63 @@
</view> </view>
</view> </view>
<view <view
v-if="state.orderPayload.pointActivityId" class="order-item ss-flex ss-col-center ss-row-between"
class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.type === 0 && state.orderInfo.pointsStatus === 1"
>
<view class="item-title">兑换积分</view>
<view class="ss-flex ss-col-center">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
class="score-img"
/>
<text class="item-value ss-m-r-24">
{{ state.orderInfo.usePoint }}
</text>
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId"
> >
<view class="item-title">积分抵扣</view> <view class="item-title">积分抵扣</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
{{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }} {{ state.pointStatus ? '剩余积分' : '当前积分' }}
<image <image
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png" :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img" class="score-img"
/> />
<text class="item-value ss-m-r-24"> <text class="item-value ss-m-r-24">
{{ {{ state.pointStatus ? state.orderInfo.totalPoint - state.orderInfo.usedPoint : (state.orderInfo.totalPoint || 0) }}
state.pointStatus || state.orderPayload.pointActivityId
? state.orderInfo.totalPoint - state.orderInfo.usePoint
: state.orderInfo.totalPoint || 0
}}
</text> </text>
<checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId"> <checkbox-group @change="changeIntegral">
<checkbox <checkbox :checked='state.pointStatus' :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" />
:checked="state.pointStatus"
:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
/>
</checkbox-group> </checkbox-group>
</view> </view>
</view> </view>
<!-- 快递配置时，信息的展示 --> <!-- 快递配置时，信息的展示 -->
<view <view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 1'>
class="order-item ss-flex ss-col-center ss-row-between"
v-if="addressState.deliveryType === 1"
>
<view class="item-title">运费</view> <view class="item-title">运费</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0"> <text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
+￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }} +￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
</text> </text>
<view class="item-value ss-m-r-24" v-else>免运费</view> <view class='item-value ss-m-r-24' v-else>免运费</view>
</view> </view>
</view> </view>
<!-- 门店自提时，需要填写姓名和手机号 --> <!-- 门店自提时，需要填写姓名和手机号 -->
<view <view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
class="order-item ss-flex ss-col-center ss-row-between"
v-if="addressState.deliveryType === 2"
>
<view class="item-title">联系人</view> <view class="item-title">联系人</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<uni-easyinput <uni-easyinput
maxlength="20" maxlength="20"
placeholder="请填写您的联系姓名" placeholder="请填写您的联系姓名"
v-model="addressState.receiverName" v-model="addressState.receiverName"
:inputBorder="false" :inputBorder="false"
:clearable="false" :clearable="false"
/> />
</view> </view>
</view> </view>
<view <view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
class="order-item ss-flex ss-col-center ss-row-between"
v-if="addressState.deliveryType === 2"
>
<view class="item-title">联系电话</view> <view class="item-title">联系电话</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<uni-easyinput <uni-easyinput
maxlength="20" maxlength="20"
placeholder="请填写您的联系电话" placeholder="请填写您的联系电话"
v-model="addressState.receiverMobile" v-model="addressState.receiverMobile"
:inputBorder="false" :inputBorder="false"
:clearable="false" :clearable="false"
/> />
</view> </view>
</view> </view>
<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 --> <!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
<view <view
class="order-item ss-flex ss-col-center ss-row-between" class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0" v-if="state.orderInfo.type === 0"
> >
<view class="item-title">优惠券</view> <view class="item-title">优惠券</view>
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true"> <view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
@ -136,29 +105,24 @@
-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }} -￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
</text> </text>
<text <text
class="item-value" class="item-value"
:class=" :class="state.couponInfo.length > 0 ? 'text-red' : 'text-disabled'"
state.couponInfo.filter((coupon) => coupon.match).length > 0 v-else
? 'text-red'
: 'text-disabled'
"
v-else
> >
{{ {{
state.couponInfo.filter((coupon) => coupon.match).length > 0 state.couponInfo.length > 0 ? state.couponInfo.length + ' 张可用' : '暂无可用优惠券'
? state.couponInfo.filter((coupon) => coupon.match).length + ' 张可用'
: '暂无可用优惠券'
}} }}
</text> </text>
<text class="_icon-forward item-icon" /> <text class="_icon-forward item-icon" />
</view> </view>
</view> </view>
<view <view
class="order-item ss-flex ss-col-center ss-row-between" class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.discountPrice > 0" v-if="state.orderInfo.price.discountPrice > 0"
> >
<view class="item-title">活动优惠</view> <view class="item-title">活动优惠</view>
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true"> <view class="ss-flex ss-col-center">
<!-- @tap="state.showDiscount = true" TODO 芋艿：后续要把优惠信息打进去 -->
<text class="item-value text-red"> <text class="item-value text-red">
-￥{{ fen2yuan(state.orderInfo.price.discountPrice) }} -￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
</text> </text>
@ -166,8 +130,8 @@
</view> </view>
</view> </view>
<view <view
class="order-item ss-flex ss-col-center ss-row-between" class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.vipPrice > 0" v-if="state.orderInfo.price.vipPrice > 0"
> >
<view class="item-title">会员优惠</view> <view class="item-title">会员优惠</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
@ -188,17 +152,17 @@
<!-- 选择优惠券弹框 --> <!-- 选择优惠券弹框 -->
<s-coupon-select <s-coupon-select
v-model="state.couponInfo" v-model="state.couponInfo"
:show="state.showCoupon" :show="state.showCoupon"
@confirm="onSelectCoupon" @confirm="onSelectCoupon"
@close="state.showCoupon = false" @close="state.showCoupon = false"
/> />
<!-- 满额折扣弹框 TODO @puhui999：【折扣】后续要把优惠信息打进去 --> <!-- 满额折扣弹框 TODO 芋艿：后续要把优惠信息打进去 -->
<s-discount-list <s-discount-list
v-model="state.orderInfo" v-model="state.orderInfo"
:show="state.showDiscount" :show="state.showDiscount"
@close="state.showDiscount = false" @close="state.showDiscount = false"
/> />
<!-- 底部 --> <!-- 底部 -->
@ -210,8 +174,8 @@
</view> </view>
</view> </view>
<button <button
class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main" class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
@tap="onConfirm" @tap="onConfirm"
> >
提交订单 提交订单
</button> </button>
@ -221,12 +185,12 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, watch } from 'vue'; import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import AddressSelection from '@/pages/order/addressSelection.vue'; import AddressSelection from '@/pages/order/addressSelection.vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import OrderApi from '@/sheep/api/trade/order'; import OrderApi from '@/sheep/api/trade/order';
import TradeConfigApi from '@/sheep/api/trade/config'; import CouponApi from '@/sheep/api/promotion/coupon';
import { fen2yuan } from '@/sheep/hooks/useGoods'; import { fen2yuan } from '@/sheep/hooks/useGoods';
const state = reactive({ const state = reactive({
@ -244,8 +208,8 @@
const addressState = ref({ const addressState = ref({
addressInfo: {}, // 选择的收货地址 addressInfo: {}, // 选择的收货地址
deliveryType: 1, // 收货方式：1-快递配送，2-门店自提 deliveryType: 1, // 收货方式 1 - 快递配送；2 - 门店自提
isPickUp: true, // 门店自提是否开启 isPickUp: true, // 门店自提是否开启 TODO puhui999: 默认开启，看看后端有开关的话接入
pickUpInfo: {}, // 选择的自提门店信息 pickUpInfo: {}, // 选择的自提门店信息
receiverName: '', // 收件人名称 receiverName: '', // 收件人名称
receiverMobile: '', // 收件人手机 receiverMobile: '', // 收件人手机
@ -262,7 +226,7 @@
// 选择优惠券 // 选择优惠券
async function onSelectCoupon(couponId) { async function onSelectCoupon(couponId) {
state.orderPayload.couponId = couponId; state.orderPayload.couponId = couponId || 0;
await getOrderInfo(); await getOrderInfo();
state.showCoupon = false; state.showCoupon = false;
} }
@ -302,14 +266,13 @@
remark: state.orderPayload.remark, remark: state.orderPayload.remark,
deliveryType: addressState.value.deliveryType, deliveryType: addressState.value.deliveryType,
addressId: addressState.value.addressInfo.id, // 收件地址编号 addressId: addressState.value.addressInfo.id, // 收件地址编号
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号 pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名 receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机 receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
pointStatus: state.pointStatus, pointStatus: state.pointStatus,
combinationActivityId: state.orderPayload.combinationActivityId, combinationActivityId: state.orderPayload.combinationActivityId,
combinationHeadId: state.orderPayload.combinationHeadId, combinationHeadId: state.orderPayload.combinationHeadId,
seckillActivityId: state.orderPayload.seckillActivityId, seckillActivityId: state.orderPayload.seckillActivityId,
pointActivityId: state.orderPayload.pointActivityId,
}); });
if (code !== 0) { if (code !== 0) {
return; return;
@ -320,15 +283,9 @@
} }
// 跳转到支付页面 // 跳转到支付页面
if (data.payOrderId && data.payOrderId > 0) { sheep.$router.redirect('/pages/pay/index', {
sheep.$router.redirect('/pages/pay/index', { id: data.payOrderId,
id: data.payOrderId, });
});
} else {
sheep.$router.redirect('/pages/order/detail', {
id: data.id,
});
}
} }
// 检查库存 & 计算订单价格 // 检查库存 & 计算订单价格
@ -339,26 +296,37 @@
couponId: state.orderPayload.couponId, couponId: state.orderPayload.couponId,
deliveryType: addressState.value.deliveryType, deliveryType: addressState.value.deliveryType,
addressId: addressState.value.addressInfo.id, // 收件地址编号 addressId: addressState.value.addressInfo.id, // 收件地址编号
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号 pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名 receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机 receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
pointStatus: state.pointStatus, pointStatus: state.pointStatus,
combinationActivityId: state.orderPayload.combinationActivityId, combinationActivityId: state.orderPayload.combinationActivityId,
combinationHeadId: state.orderPayload.combinationHeadId, combinationHeadId: state.orderPayload.combinationHeadId,
seckillActivityId: state.orderPayload.seckillActivityId, seckillActivityId: state.orderPayload.seckillActivityId,
pointActivityId: state.orderPayload.pointActivityId,
}); });
if (code !== 0) { if (code !== 0) {
return; return;
} }
state.orderInfo = data; state.orderInfo = data;
state.couponInfo = data.coupons || [];
// 设置收货地址 // 设置收货地址
if (state.orderInfo.address) { if (state.orderInfo.address) {
addressState.value.addressInfo = state.orderInfo.address; addressState.value.addressInfo = state.orderInfo.address;
} }
} }
// 获取可用优惠券
async function getCoupons() {
const { code, data } = await CouponApi.getMatchCouponList(
state.orderInfo.price.payPrice,
state.orderInfo.items.map((item) => item.spuId),
state.orderPayload.items.map((item) => item.skuId),
state.orderPayload.items.map((item) => item.categoryId),
);
if (code === 0) {
state.couponInfo = data;
}
}
onLoad(async (options) => { onLoad(async (options) => {
if (!options.data) { if (!options.data) {
sheep.$helper.toast('参数不正确，请检查！'); sheep.$helper.toast('参数不正确，请检查！');
@ -366,22 +334,7 @@
} }
state.orderPayload = JSON.parse(options.data); state.orderPayload = JSON.parse(options.data);
await getOrderInfo(); await getOrderInfo();
// 获取交易配置 await getCoupons();
const { data, code } = await TradeConfigApi.getTradeConfig();
if (code === 0) {
addressState.value.isPickUp = data.deliveryPickUpEnabled;
}
});
// 使用 watch 监听地址和配送方式的变化
watch(addressState, async (newAddress, oldAddress) => {
// 如果收货地址或配送方式有变化，则重新计算价格
if (
newAddress.addressInfo.id !== oldAddress.addressInfo.id ||
newAddress.deliveryType !== oldAddress.deliveryType
) {
await getOrderInfo();
}
}); });
</script> </script>

38
sheep/components/s-block-item/s-block-item.vue
View File

@ -42,7 +42,7 @@
<s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" /> <s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
<!-- 营销组件：积分商城 --> <!-- 营销组件：积分商城 -->
<s-point-block v-if="type === 'PromotionPoint'" :data="data" :styles="styles" /> <s-point-block v-if="type === 'PromotionPoint'" :data="data" :styles="styles" />
<!-- 营销组件： 小程序直播（暂时没有这个功能） --> <!-- 营销组件：小程序直播（暂时没有这个功能） -->
<s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" /> <s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
<!-- 营销组件：优惠券 --> <!-- 营销组件：优惠券 -->
<s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" /> <s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />
@ -68,7 +68,16 @@
<!-- 用户组件：用户卡片 --> <!-- 用户组件：用户卡片 -->
<s-user-card v-if="type === 'UserCard'" /> <s-user-card v-if="type === 'UserCard'" />
<view v-if="type === 'UserOrder'" class="new-huiy"
@click="
sheep.$router.go('/pages/user/user_vip/index')
"
>
<view class="new-button">立即开通</view>
<img class="seckill1" mode="aspectFit"
src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png"
/>
</view>
<!-- 用户组件：用户订单 --> <!-- 用户组件：用户订单 -->
<s-order-card v-if="type === 'UserOrder'" :data="data" /> <s-order-card v-if="type === 'UserOrder'" :data="data" />
<!-- 用户组件：用户资产 --> <!-- 用户组件：用户资产 -->
@ -124,7 +133,30 @@
:deep(.uni-border-bottom){ :deep(.uni-border-bottom){
height:0; height:0;
} }
.new-huiy{
width:100%;
height:100px;
.new-button{
background:white;
padding:8px;
text-align:center;
position: absolute;
border-radius: 20px;
right: 29px;
top: 31px;
font-size:14px;
color: rgba(148, 109, 45, 1);
z-index: 33;
}
.seckill1{
position: absolute;
top: -71px;
z-index: 22;
/* left: 50%; */
/* transform: translateX(-50%); */
width: 94%;
}
}
.floxt { .floxt {

19
sheep/components/s-coupon-block/s-coupon-block.vue
View File

@ -5,7 +5,7 @@
<!-- couponList --> <!-- couponList -->
<view <view
class="coupon-item new-class" class="coupon-item new-class"
:style="[item.canTake ? couponBg : couponBgFalse, { marginLeft: `${data.space}px` }]" :style="[couponBg, { marginLeft: `${data.space}px` }]"
v-for="(item, index) in couponList" v-for="(item, index) in couponList"
:key="index" :key="index"
> >
@ -22,7 +22,7 @@
<template v-slot:btn> <template v-slot:btn>
<!-- 两列时，领取按钮坚排 --> <!-- 两列时，领取按钮坚排 -->
<button <button
v-if="item.canTake" v-if="columns === 2"
@click.stop="onGetCoupon(item.id)" @click.stop="onGetCoupon(item.id)"
class="ss-reset-button card-btn vertical" class="ss-reset-button card-btn vertical"
:style="[btnStyles]" :style="[btnStyles]"
@ -33,8 +33,9 @@
v-else v-else
class="ss-reset-button card-btn" class="ss-reset-button card-btn"
:style="[btnStyles]" :style="[btnStyles]"
@click.stop="onGetCoupon(item.id)"
> >
已领取 立即领取
</button> </button>
</template> </template>
</su-coupon> </su-coupon>
@ -65,11 +66,6 @@
const couponBg = { const couponBg = {
background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`, background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
}; };
const couponBgFalse = {
background: `url('https://zysc.fjptzykj.com:3000/shangcheng/94dfaa69257a102da3e28aa9b82cc7e04be5cea38555941972f6b5a3c2fc47a3.png') no-repeat top center / 100% 100%`,
};
const btnStyles = { const btnStyles = {
background: button.bgColor, background: button.bgColor,
color: button.color, color: button.color,
@ -144,16 +140,15 @@
margin-right: 2px !important; margin-right: 2px !important;
} }
.card-btn { .card-btn {
writing-mode: tb-rl; width: 140rpx;
width: 35px; height: 50rpx;
height: auto;
border-radius: 25rpx; border-radius: 25rpx;
font-size: 24rpx; font-size: 24rpx;
line-height: 50rpx; line-height: 50rpx;
&.vertical { &.vertical {
width: 50rpx; width: 50rpx;
height: 140rpx; height: 140rpx;
margin: 0; margin: auto 20rpx auto 0;
.btn-text { .btn-text {
font-size: 24rpx; font-size: 24rpx;

4
sheep/components/s-empty/s-empty.vue
View File

@ -3,8 +3,8 @@
class="ss-flex-col ss-col-center ss-row-center empty-box" class="ss-flex-col ss-col-center ss-row-center empty-box"
:style="[{ paddingTop: paddingTop + 'rpx' }]" :style="[{ paddingTop: paddingTop + 'rpx' }]"
> >
<!-- <view class=""><image class="empty-icon" :src="icon" mode="widthFix"></image></view> --> <view class=""><image class="empty-icon" :src="icon" mode="widthFix"></image></view>
<view class="empty-text ss-m-b-40"> <view class="empty-text ss-m-t-28 ss-m-b-40">
<text v-if="text !== ''">{{ text }}</text> <text v-if="text !== ''">{{ text }}</text>
</view> </view>
<button class="ss-reset-button empty-btn" v-if="showAction" @tap="clickAction"> <button class="ss-reset-button empty-btn" v-if="showAction" @tap="clickAction">

372
sheep/components/s-goods-column/s-goods-column.vue
View File

@ -11,7 +11,11 @@
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit" /> <image
class="xs-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFit"
></image>
<view <view
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show" v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="xs-goods-content ss-flex-col ss-row-around" class="xs-goods-content ss-flex-col ss-row-around"
@ -23,40 +27,13 @@
> >
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<!-- 活动信息 -->
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
:key="item"
>
{{ item }}
</view>
</view>
<view <view
v-if="goodsFields.price?.show" v-if="goodsFields.price?.show"
class="xs-goods-price font-OPPOSANS" class="xs-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]" :style="[{ color: goodsFields.price.color }]"
> >
<!-- 活动价格 --> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
<text v-else>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</template>
</view> </view>
</view> </view>
</view> </view>
@ -83,40 +60,13 @@
> >
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<!-- 活动信息 -->
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
:key="item"
>
{{ item }}
</view>
</view>
<view <view
v-if="goodsFields.price?.show" v-if="goodsFields.price?.show"
class="sm-goods-price font-OPPOSANS" class="sm-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]" :style="[{ color: goodsFields.price.color }]"
> >
<!-- 活动价格 --> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
<text v-else>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</template>
</view> </view>
</view> </view>
</view> </view>
@ -124,9 +74,13 @@
<!-- md卡片：竖向，一行放两个，图上内容下 --> <!-- md卡片：竖向，一行放两个，图上内容下 -->
<view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick"> <view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" /> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix" /> <image
class="md-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="widthFix"
></image>
<view <view
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
:id="elId" :id="elId"
@ -156,42 +110,16 @@
</view> </view>
</view> </view>
</slot> </slot>
<!-- 活动信息 -->
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
:key="item"
>
{{ item }}
</view>
</view>
<view class="ss-flex ss-col-bottom"> <view class="ss-flex ss-col-bottom">
<view <view
v-if="goodsFields.price?.show" v-if="goodsFields.price?.show"
class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10" class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
:style="[{ color: goodsFields.price.color }]" :style="[{ color: goodsFields.price.color }]"
> >
<!-- 活动价格 --> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
<text v-else>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</template>
</view> </view>
<view <view
v-if=" v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) && (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
@ -227,7 +155,7 @@
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<!-- <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center">秒杀</view> --> <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center"> 秒杀 </view>
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center"> <view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
<view class="tag-icon">拼团</view> <view class="tag-icon">拼团</view>
</view> </view>
@ -235,8 +163,8 @@
class="lg-img-box" class="lg-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)" :src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill" mode="aspectFill"
/> ></image>
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 "> <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
<view> <view>
<view <view
v-if="goodsFields.title?.show || goodsFields.name?.show" v-if="goodsFields.title?.show || goodsFields.name?.show"
@ -261,44 +189,21 @@
</view> </view>
</view> </view>
</slot> </slot>
<!-- 活动信息 --> <view class="ss-flex ss-col-bottom ss-m-t-10">
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view <view
class="card2" v-if="goodsFields.price?.show"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)" class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
:key="item" :style="[{ color: goodsFields.price.color }]"
> >
{{ item }} <text class="ss-font-24">{{ priceUnit }}</text>
</view> {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</view>
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
<view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
<!-- 活动价格 -->
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
<text v-else>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</template>
</view> </view>
<view <view
v-if=" v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) && (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
(data.original_price > 0 || data.marketPrice > 0) (data.original_price > 0 || data.marketPrice > 0)
" "
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: originPriceColor }]" :style="[{ color: originPriceColor }]"
> >
<text class="price-unit ss-font-20">{{ priceUnit }}</text> <text class="price-unit ss-font-20">{{ priceUnit }}</text>
@ -312,20 +217,22 @@
</view> </view>
<slot name="cart"> <slot name="cart">
<view class="buy-box ss-flex ss-col-center ss-row-center" v-if="buttonShow"> 去购买</view> <view class="buy-box ss-flex ss-col-center ss-row-center" v-if="buttonShow"> 去购买 </view>
</slot> </slot>
</view> </view>
<!-- sl卡片：竖向型，一行放一个，图片上内容下边 --> <!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
<view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick"> <view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
<view v-if="tagStyle.show" class="tag-icon-box"> <view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" /> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image <image
class="sl-img-box" class="sl-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)" :src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill" mode="aspectFill"
/> ></image>
<view class="sl-goods-content"> <view class="sl-goods-content">
<view> <view>
<view <view
@ -355,37 +262,10 @@
</view> </view>
</view> </view>
</slot> </slot>
<!-- 活动信息 -->
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
:key="item"
>
{{ item }}
</view>
</view>
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS"> <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
<view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]"> <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
<!-- 活动价格 --> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
class="point-img"
></image>
<text class="ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
<text v-else>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</template>
</view> </view>
<view <view
v-if=" v-if="
@ -405,9 +285,9 @@
</view> </view>
</view> </view>
<slot name="cart"> <slot name="cart"
<view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view> ><view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view></slot
</slot> >
</view> </view>
</view> </view>
</template> </template>
@ -417,41 +297,39 @@
* 商品卡片 * 商品卡片
* *
* @property {Array} size = [xs | sm | md | lg | sl ] - 列表数据 * @property {Array} size = [xs | sm | md | lg | sl ] - 列表数据
* @property {String} tag - md及以上才有 * @property {String} tag - md及以上才有
* @property {String} img - 图片 * @property {String} img - 图片
* @property {String} background - 背景色 * @property {String} background - 背景色
* @property {String} topRadius - 上圆角 * @property {String} topRadius - 上圆角
* @property {String} bottomRadius - 下圆角 * @property {String} bottomRadius - 下圆角
* @property {String} title - 标题 * @property {String} title - 标题
* @property {String} titleColor - 标题颜色 * @property {String} titleColor - 标题颜色
* @property {Number} titleWidth = 0 - 标题宽度，默认0，单位rpx * @property {Number} titleWidth = 0 - 标题宽度，默认0，单位rpx
* @property {String} subTitle - 副标题 * @property {String} subTitle - 副标题
* @property {String} subTitleColor - 副标题颜色 * @property {String} subTitleColor - 副标题颜色
* @property {String} subTitleBackground - 副标题背景 * @property {String} subTitleBackground - 副标题背景
* @property {String | Number} price - 价格 * @property {String | Number} price - 价格
* @property {String} priceColor - 价格颜色 * @property {String} priceColor - 价格颜色
* @property {String | Number} originPrice - 原价/划线价 * @property {String | Number} originPrice - 原价/划线价
* @property {String} originPriceColor - 原价颜色 * @property {String} originPriceColor - 原价颜色
* @property {String | Number} sales - 销售数量 * @property {String | Number} sales - 销售数量
* @property {String} salesColor - 销售数量颜色 * @property {String} salesColor - 销售数量颜色
* *
* @slots activity - 活动插槽 * @slots activity - 活动插槽
* @slots cart - 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为 * @slots cart - 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
* *
* @event {Function()} click - 点击卡片 * @event {Function()} click - 点击卡片
* *
*/ */
import { computed, getCurrentInstance, nextTick, onMounted } from 'vue'; import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods';
fen2yuan, import { formatStock } from '@/sheep/hooks/useGoods';
formatExchange, import goodsCollectVue from '@/pages/user/goods-collect.vue';
formatSales, import { isArray } from 'lodash';
formatStock,
getRewardActivityRuleItemDescriptions, // 数据
} from '@/sheep/hooks/useGoods'; const state = reactive({});
import { isArray } from 'lodash-es';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
@ -460,39 +338,27 @@
default() { default() {
return { return {
// 商品价格 // 商品价格
price: { price: { show: true },
show: true,
},
// 库存 // 库存
stock: { stock: { show: true },
show: true,
},
// 商品名称 // 商品名称
name: { name: { show: true },
show: true,
},
// 商品介绍 // 商品介绍
introduction: { introduction: { show: true },
show: true,
},
// 市场价 // 市场价
marketPrice: { marketPrice: { show: true },
show: true,
},
// 销量 // 销量
salesCount: { salesCount: { show: true },
show: true,
},
}; };
}, },
}, },
tagStyle: { tagStyle: {
type: Object, type: Object,
default: () => ({}), default: {},
}, },
data: { data: {
type: Object, type: Object,
default: () => ({}), default: {},
}, },
size: { size: {
type: String, type: String,
@ -552,17 +418,6 @@
}, },
}); });
// 优惠文案
const discountText = computed(() => {
const promotionType = props.data.promotionType;
if (promotionType === 4) {
return '限时优惠';
} else if (promotionType === 6) {
return '会员价';
}
return undefined;
});
// 组件样式 // 组件样式
const elStyles = computed(() => { const elStyles = computed(() => {
return { return {
@ -578,18 +433,10 @@
const salesAndStock = computed(() => { const salesAndStock = computed(() => {
let text = []; let text = [];
if (props.goodsFields.salesCount?.show) { if (props.goodsFields.salesCount?.show) {
if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) { text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
text.push(formatExchange(props.data.sales_show_type, (props.data.pointTotalStock || 0) - (props.data.pointStock || 0)));
} else {
text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
}
} }
if (props.goodsFields.stock?.show) { if (props.goodsFields.stock?.show) {
if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) { text.push(formatStock(props.data.stock_show_type, props.data.stock));
text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
} else {
text.push(formatStock(props.data.stock_show_type, props.data.stock));
}
} }
return text.join(' | '); return text.join(' | ');
}); });
@ -604,14 +451,10 @@
// 获取卡片实时高度 // 获取卡片实时高度
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`; const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
function getGoodsPriceCardWH() { function getGoodsPriceCardWH() {
if (props.size === 'md') { if (props.size === 'md') {
const view = uni.createSelectorQuery().in(proxy); const view = uni.createSelectorQuery().in(proxy);
view.select(`#${elId}`).fields({ view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
size: true,
scrollOffset: true,
});
view.exec((data) => { view.exec((data) => {
let totalHeight = 0; let totalHeight = 0;
const goodsPriceCard = data[0]; const goodsPriceCard = data[0];
@ -626,7 +469,6 @@
}); });
} }
} }
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
getGoodsPriceCardWH(); getGoodsPriceCardWH();
@ -640,13 +482,12 @@
left: 0; left: 0;
top: 0; top: 0;
z-index: 2; z-index: 2;
.tag-icon { .tag-icon {
width: 72rpx; width: 72rpx;
height: 44rpx; height: 44rpx;
border-radius:8px;
} }
} }
.seckill-tag { .seckill-tag {
position: absolute; position: absolute;
left: 0; left: 0;
@ -661,13 +502,6 @@
color: #ffffff; color: #ffffff;
line-height: 32rpx; line-height: 32rpx;
} }
.point-img {
width: 30rpx;
height: 30rpx;
margin: 0 4rpx;
}
.groupon-tag { .groupon-tag {
position: absolute; position: absolute;
left: 0; left: 0;
@ -682,17 +516,14 @@
color: #ffffff; color: #ffffff;
line-height: 32rpx; line-height: 32rpx;
} }
.goods-img { .goods-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.price-unit { .price-unit {
margin-right: -4px; margin-right: -4px;
} }
.sales-text { .sales-text {
display: table; display: table;
font-size: 24rpx; font-size: 24rpx;
@ -750,18 +581,19 @@
// width: 100%; // width: 100%;
background-color: $white; background-color: $white;
position: relative; position: relative;
padding: 0 10px;
padding-top: 10px;
.sm-img-box { .sm-img-box {
// width: 228rpx; // width: 228rpx;
width: 100%; width: 100%;
height: 208rpx; height: 208rpx;
border-radius:8px;
} }
.sm-goods-content { .sm-goods-content {
padding: 20rpx 16rpx; padding: 20rpx 16rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.sm-goods-title { .sm-goods-title {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #333;
@ -776,7 +608,8 @@
// md // md
.md-goods-card { .md-goods-card {
overflow: hidden; overflow: hidden;
width: 100%; width: auto;
padding: 10px 10px;
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: $white; background-color: $white;
@ -791,7 +624,6 @@
color: #333; color: #333;
width: 100%; width: 100%;
} }
.md-goods-subtitle { .md-goods-subtitle {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
@ -827,14 +659,12 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: $white; background-color: $white;
// height: 280rpx; height: 280rpx;
border-radius:10px !important;
padding: 10px;
.lg-img-box { .lg-img-box {
width: 180rpx; width: 280rpx;
height: 180rpx; height: 280rpx;
margin-right: 20rpx; margin-right: 20rpx;
border-radius:10px;
} }
.lg-goods-title { .lg-goods-title {
@ -844,7 +674,6 @@
// line-height: 36rpx; // line-height: 36rpx;
// width: 410rpx; // width: 410rpx;
} }
.lg-goods-subtitle { .lg-goods-subtitle {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
@ -871,7 +700,6 @@
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
} }
.tag-box { .tag-box {
width: 100%; width: 100%;
} }
@ -885,12 +713,10 @@
z-index: 1; z-index: 1;
width: 100%; width: 100%;
background-color: $white; background-color: $white;
.sl-goods-content { .sl-goods-content {
padding: 20rpx 20rpx; padding: 20rpx 20rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.sl-img-box { .sl-img-box {
width: 100%; width: 100%;
height: 360rpx; height: 360rpx;
@ -901,7 +727,6 @@
color: #333; color: #333;
font-weight: 500; font-weight: 500;
} }
.sl-goods-subtitle { .sl-goods-subtitle {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
@ -928,33 +753,4 @@
color: #ffffff; color: #ffffff;
} }
} }
.card {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: red;
color: #ffffff;
font-size: 24rpx;
margin-top: 5rpx;
}
.card2 {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: rgb(255, 242, 241);
color: #ff2621;
font-size: 24rpx;
margin: 5rpx 0 5rpx 5rpx;
}
.iconBox {
width: 100%;
height: fit-content;
margin-top: 10rpx;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
</style> </style>

1
sheep/components/s-groupon-block/s-groupon-block.vue
View File

@ -213,7 +213,6 @@
.goods-sm-box { .goods-sm-box {
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
padding: 0 10px;
.goods-card-box { .goods-card-box {
flex-shrink: 0; flex-shrink: 0;

15
sheep/components/s-layout/s-layout.vue
View File

@ -14,9 +14,6 @@
:opacityBgUi="opacityBgUi" :opacityBgUi="opacityBgUi"
@search="(e) => emits('search', e)" @search="(e) => emits('search', e)"
:defaultSearch="defaultSearch" :defaultSearch="defaultSearch"
:headerBtns = "headerBtns"
:backgroundColor="navbarbackgroundColor"
:navBg="navBg"
/> />
<!-- 顶部导航栏-情况2：装修组件导航栏-标准 --> <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
@ -76,14 +73,6 @@
type: String, type: String,
default: '', default: '',
}, },
headerBtns: {
type: String,
default: '',
},
navbarbackgroundColor:{
type: String,
default: '',
},
navbar: { navbar: {
type: String, type: String,
default: 'normal', default: 'normal',
@ -147,10 +136,6 @@
type: Boolean, type: Boolean,
default: false, default: false,
}, },
navBg: {
type: Boolean,
default: false,
},
}); });
const emits = defineEmits(['search']); const emits = defineEmits(['search']);

563
sheep/components/s-point-block/s-point-block.vue
View File

@ -1,291 +1,328 @@
<!-- 装修商品组件：【积分商城】商品卡片 --> <!-- 装修商品组件：【积分商城】商品卡片 -->
<template> <template>
<!-- 商品卡片 --> <!-- 商品卡片 -->
<view> <view>
<!-- 布局1. 单列大图（上图，下内容）--> <!-- 布局1. 单列大图（上图，下内容）-->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length" class="goods-sl-box"> <view
<view class="goods-box" v-for="item in state.spuList" :key="item.id" v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
:style="[{ marginBottom: data.space * 2 + 'rpx' }]"> class="goods-sl-box"
<s-goods-column class="" size="sl" :goodsFields="data.fields" :tagStyle="data.badge" :data="item" >
:titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color" <view
:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom" class="goods-box"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"> v-for="item in state.spuList"
<!-- 购买按钮 --> :key="item.id"
<template v-slot:cart> :style="[{ marginBottom: data.space * 2 + 'rpx' }]"
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> >
{{ btnBuy.type === 'text' ? btnBuy.text : '' }} <s-goods-column
</button> class=""
</template> size="sl"
</s-goods-column> :goodsFields="data.fields"
</view> :tagStyle="data.badge"
</view> :data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- 布局2. 单列小图（左图，右内容） --> <!-- 布局2. 单列小图（左图，右内容） -->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length" class="goods-lg-box"> <view
<view class="goods-box" :style="[{ marginBottom: data.space + 'px' }]" v-for="item in state.spuList" v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
:key="item.id"> class="goods-lg-box"
<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :data="item" >
:tagStyle="data.badge" :titleColor="data.fields.name?.color" <view
:subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop" class="goods-box"
:bottomRadius="data.borderRadiusBottom" :style="[{ marginBottom: data.space + 'px' }]"
@tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })"> v-for="item in state.spuList"
<!-- 购买按钮 --> :key="item.id"
<template v-slot:cart> >
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <s-goods-column
{{ btnBuy.type === 'text' ? btnBuy.text : '' }} class="goods-card"
</button> size="lg"
</template> :goodsFields="data.fields"
</s-goods-column> :data="item"
</view> :tagStyle="data.badge"
</view> :titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- 布局3. 双列（每一列：上图，下内容）--> <!-- 布局3. 双列（每一列：上图，下内容）-->
<view v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length" <view
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"> v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
<view class="goods-list-box"> class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
<view class="left-list" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]" >
v-for="item in state.leftSpuList" :key="item.id"> <view class="goods-list-box">
<s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge" <view
:data="item" :titleColor="data.fields.name?.color" class="left-list"
:subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
:bottomRadius="data.borderRadiusBottom" :titleWidth="330 - marginLeft - marginRight" v-for="item in state.leftSpuList"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })" :key="item.id"
@getHeight="calculateGoodsColumn($event, 'left')"> >
<!-- 购买按钮 --> <s-goods-column
<template v-slot:cart> class="goods-md-box"
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> size="md"
{{ btnBuy.type === 'text' ? btnBuy.text : '' }} :goodsFields="data.fields"
</button> :tagStyle="data.badge"
</template> :data="item"
</s-goods-column> :titleColor="data.fields.name?.color"
</view> :subTitleColor="data.fields.introduction.color"
</view> :topRadius="data.borderRadiusTop"
<view class="goods-list-box"> :bottomRadius="data.borderRadiusBottom"
<view class="right-list" :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]" :titleWidth="330 - marginLeft - marginRight"
v-for="item in state.rightSpuList" :key="item.id"> @click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
<s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge" @getHeight="calculateGoodsColumn($event, 'left')"
:data="item" :titleColor="data.fields.name?.color" >
:subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop" <!-- 购买按钮 -->
:bottomRadius="data.borderRadiusBottom" :titleWidth="330 - marginLeft - marginRight" <template v-slot:cart>
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })" <button class="ss-reset-button cart-btn" :style="[buyStyle]">
@getHeight="calculateGoodsColumn($event, 'right')"> {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
<!-- 购买按钮 --> </button>
<template v-slot:cart> </template>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> </s-goods-column>
{{ btnBuy.type === 'text' ? btnBuy.text : '' }} </view>
</button> </view>
</template> <view class="goods-list-box">
</s-goods-column> <view
</view> class="right-list"
</view> :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
</view> v-for="item in state.rightSpuList"
</view> :key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
@getHeight="calculateGoodsColumn($event, 'right')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 商品卡片 * 商品卡片
*/ */
import { import { computed, onMounted, reactive, ref } from 'vue';
computed, import sheep from '@/sheep';
onMounted, import SpuApi from '@/sheep/api/product/spu';
reactive, import PointApi from '@/sheep/api/promotion/point';
ref import { PromotionActivityTypeEnum } from '@/sheep/util/const';
} from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import PointApi from '@/sheep/api/promotion/point';
import {
PromotionActivityTypeEnum
} from '@/sheep/util/const';
// 布局类型 // 布局类型
const LayoutTypeEnum = { const LayoutTypeEnum = {
// 单列大图 // 单列大图
ONE_COL_BIG_IMG: 'oneColBigImg', ONE_COL_BIG_IMG: 'oneColBigImg',
// 双列 // 双列
TWO_COL: 'twoCol', TWO_COL: 'twoCol',
// 单列小图 // 单列小图
ONE_COL_SMALL_IMG: 'oneColSmallImg', ONE_COL_SMALL_IMG: 'oneColSmallImg',
}; };
const state = reactive({ const state = reactive({
spuList: [], spuList: [],
leftSpuList: [], leftSpuList: [],
rightSpuList: [], rightSpuList: [],
}); });
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default () {}, default() {},
}, },
styles: { styles: {
type: Object, type: Object,
default () {}, default() {},
}, },
}); });
const { const { layoutType, btnBuy, activityIds } = props.data || {};
layoutType, const { marginLeft, marginRight } = props.styles || {};
btnBuy,
activityIds
} = props.data || {};
const {
marginLeft,
marginRight
} = props.styles || {};
// 购买按钮样式 // 购买按钮样式
const buyStyle = computed(() => { const buyStyle = computed(() => {
if (btnBuy.type === 'text') { if (btnBuy.type === 'text') {
// 文字按钮：线性渐变背景颜色 // 文字按钮：线性渐变背景颜色
return { return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`, background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
}; };
} }
if (btnBuy.type === 'img') { if (btnBuy.type === 'img') {
// 图片按钮 // 图片按钮
return { return {
width: '54rpx', width: '54rpx',
height: '54rpx', height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`, background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
}; };
} }
}); });
//region 商品瀑布流布局 //region 商品瀑布流布局
// 下一个要处理的商品索引 // 下一个要处理的商品索引
let count = 0; let count = 0;
// 左列的高度 // 左列的高度
let leftHeight = 0; let leftHeight = 0;
// 右列的高度 // 右列的高度
let rightHeight = 0; let rightHeight = 0;
/** /**
* 计算商品在左列还是右列 * 计算商品在左列还是右列
* @param height 商品的高度 * @param height 商品的高度
* @param where 添加到哪一列 * @param where 添加到哪一列
*/ */
function calculateGoodsColumn(height = 0, where = 'left') { function calculateGoodsColumn(height = 0, where = 'left') {
// 处理完 // 处理完
if (!state.spuList[count]) return; if (!state.spuList[count]) return;
// 增加列的高度 // 增加列的高度
if (where === 'left') leftHeight += height; if (where === 'left') leftHeight += height;
if (where === 'right') rightHeight += height; if (where === 'right') rightHeight += height;
// 添加到矮的一列 // 添加到矮的一列
if (leftHeight <= rightHeight) { if (leftHeight <= rightHeight) {
state.leftSpuList.push(state.spuList[count]); state.leftSpuList.push(state.spuList[count]);
} else { } else {
state.rightSpuList.push(state.spuList[count]); state.rightSpuList.push(state.spuList[count]);
} }
// 计数 // 计数
count++; count++;
} }
//endregion //endregion
/** /**
* 根据商品编号列表，获取商品列表 * 根据商品编号列表，获取商品列表
* @param ids 商品编号列表 * @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表 * @return {Promise<undefined>} 商品列表
*/ */
async function getPointActivityDetailList(ids) { async function getPointActivityDetailList(ids) {
const { const { data } = await PointApi.getPointActivityListByIds(ids);
data return data;
} = await PointApi.getPointActivityListByIds(ids); }
return data;
}
/** /**
* 根据商品编号，获取商品详情 * 根据商品编号，获取商品详情
* @param ids 商品编号列表 * @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表 * @return {Promise<undefined>} 商品列表
*/ */
async function getSpuDetail(ids) { async function getSpuDetail(ids) {
const { const { data: spu } = await SpuApi.getSpuDetail(ids);
data: spu return spu;
} = await SpuApi.getSpuDetail(ids); }
return spu;
}
// 初始化 // 初始化
onMounted(async () => { onMounted(async () => {
// 加载活动列表 // 加载活动列表
const activityList = await getPointActivityDetailList(activityIds.join(',')); const activityList = await getPointActivityDetailList(activityIds.join(','));
// 循环获取活动商品SPU详情并添加到spuList // 循环获取活动商品SPU详情并添加到spuList
for (const activity of activityList) { for (const activity of activityList) {
state.spuList.push(await getSpuDetail(activity.spuId)); state.spuList.push(await getSpuDetail(activity.spuId));
} }
// 循环活动列表 // 循环活动列表
activityList.forEach((activity) => { activityList.forEach((activity) => {
// 查找对应的 spu 并更新价格 // 查找对应的 spu 并更新价格
const spu = state.spuList.find((spu) => activity.spuId === spu.id); const spu = state.spuList.find((spu) => activity.spuId === spu.id);
if (spu) { if (spu) {
spu.pointStock = activity.stock spu.pointStock = activity.stock
spu.pointTotalStock = activity.totalStock spu.pointTotalStock = activity.totalStock
spu.point = activity.point spu.point = activity.point
spu.pointPrice = activity.price spu.pointPrice = activity.price
// 赋值活动ID，为了点击跳转详情页 // 赋值活动ID，为了点击跳转详情页
spu.activityId = activity.id; spu.activityId = activity.id;
// 赋值活动类型 // 赋值活动类型
spu.activityType = PromotionActivityTypeEnum.POINT.type; spu.activityType = PromotionActivityTypeEnum.POINT.type;
} }
}); });
// 只有双列布局时需要 // 只有双列布局时需要
if (layoutType === LayoutTypeEnum.TWO_COL) { if (layoutType === LayoutTypeEnum.TWO_COL) {
// 分列 // 分列
calculateGoodsColumn(); calculateGoodsColumn();
} }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.goods-md-wrap { .goods-md-wrap {
width: 100%; width: 100%;
} }
.goods-list-box { .goods-list-box {
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
.left-list { .left-list {
&:nth-last-child(1) { &:nth-last-child(1) {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
.right-list { .right-list {
&:nth-last-child(1) { &:nth-last-child(1) {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
} }
.goods-box { .goods-box {
&:nth-last-of-type(1) { &:nth-last-of-type(1) {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
.goods-md-box, .goods-md-box,
.goods-sl-box, .goods-sl-box,
.goods-lg-box { .goods-lg-box {
position: relative; position: relative;
.cart-btn { .cart-btn {
position: absolute; position: absolute;
bottom: 18rpx; bottom: 18rpx;
right: 20rpx; right: 20rpx;
z-index: 11; z-index: 11;
height: 50rpx; height: 50rpx;
line-height: 50rpx; line-height: 50rpx;
padding: 0 20rpx; padding: 0 20rpx;
border-radius: 25rpx; border-radius: 25rpx;
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
} }
} }
</style> </style>

2
sheep/components/s-seckill-block/s-seckill-block.vue
View File

@ -336,7 +336,7 @@
.goods-sm-box { .goods-sm-box {
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
padding:0 10px;
.goods-card-box { .goods-card-box {
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;

17
sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue
View File

@ -11,8 +11,8 @@
mode="aspectFill" mode="aspectFill"
/> />
</view> </view>
<view class="header-right ss-flex-col ss-flex-1"> <view class="header-right ss-flex-col ss-row-between ss-flex-1">
<!-- <view class="goods-title ss-line-2"> <view class="goods-title ss-line-2">
<view class="tig ss-flex ss-col-center"> <view class="tig ss-flex ss-col-center">
<view class="tig-icon ss-flex ss-col-center ss-row-center"> <view class="tig-icon ss-flex ss-col-center ss-row-center">
<view class="groupon-tag"> <view class="groupon-tag">
@ -24,17 +24,14 @@
<view class="info-title"> <view class="info-title">
{{ goodsInfo.name }} {{ goodsInfo.name }}
</view> </view>
</view> --> </view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between"> <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="price-text"> {{ fen2yuan(goodsInfo.price) }}</view> <view class="price-text"> {{ fen2yuan(goodsInfo.price) }}</view>
<view class="stock-text ss-m-l-20">
库存{{ state.selectedSku.stock || goodsInfo.stock }}件
</view>
</view> </view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="stock-text">
限量:{{ state.selectedSku.stock || goodsInfo.stock }}
</view>
</view>
</view> </view>
</view> </view>
<view class="modal-content ss-flex-1"> <view class="modal-content ss-flex-1">
@ -430,7 +427,7 @@
} }
.price-text { .price-text {
font-size: 48rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: $red; color: $red;
font-family: OPPOSANS; font-family: OPPOSANS;

48
sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue
View File

@ -5,7 +5,7 @@
<!-- SKU 信息 --> <!-- SKU 信息 -->
<view class="ss-modal-box bg-white ss-flex-col"> <view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center"> <view class="modal-header ss-flex ss-col-center">
<!-- 规格图片 --> <!-- 规格图 -->
<view class="header-left ss-m-r-30"> <view class="header-left ss-m-r-30">
<image <image
class="sku-image" class="sku-image"
@ -19,19 +19,8 @@
<view class="goods-title ss-line-2">{{ state.goodsInfo.name }}</view> <view class="goods-title ss-line-2">{{ state.goodsInfo.name }}</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between"> <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<!-- 价格 --> <!-- 价格 -->
<view v-if="state.goodsInfo.activity_type === PromotionActivityTypeEnum.POINT.type" <view class="price-text">
class="price-text ss-flex"> {{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
<image
v-if="!isEmpty(state.selectedSku)"
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ getShowPriceText }}
</text>
</view>
<view v-else class="price-text">
￥{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
</view> </view>
<!-- 秒杀价格标签 --> <!-- 秒杀价格标签 -->
<view class="tig ss-flex ss-col-center"> <view class="tig ss-flex ss-col-center">
@ -103,15 +92,12 @@
import { computed, reactive, watch } from 'vue'; import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods'; import { convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
import { isEmpty, min } from 'lodash-es'; import { min } from 'lodash';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
const emits = defineEmits(['change', 'addCart', 'buy', 'close']); const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Object, type: Object,
default() { default() {},
},
}, },
show: { show: {
type: Boolean, type: Boolean,
@ -128,14 +114,7 @@
selectedSku: {}, selectedSku: {},
currentPropertyArray: [], currentPropertyArray: [],
}); });
const getShowPriceText = computed(() => {
let priceText = `￥${fen2yuan(state.goodsInfo.price)}`;
if (!isEmpty(state.selectedSku)) {
const sku = state.selectedSku;
priceText = `${sku.point}${!sku.pointPrice ? '' : `+￥${fen2yuan(sku.pointPrice)}`}`;
}
return priceText;
});
const propertyList = convertProductPropertyList(state.goodsInfo.skus); const propertyList = convertProductPropertyList(state.goodsInfo.skus);
// SKU 列表 // SKU 列表
const skuList = computed(() => { const skuList = computed(() => {
@ -146,6 +125,10 @@
return skuPrices; return skuPrices;
}); });
if (!state.goodsInfo.is_sku) {
state.selectedSku = state.goodsInfo.skus[0];
}
watch( watch(
() => state.selectedSku, () => state.selectedSku,
(newVal) => { (newVal) => {
@ -328,12 +311,6 @@
} }
} }
.point-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.ss-modal-box { .ss-modal-box {
border-radius: 30rpx 30rpx 0 0; border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx; max-height: 1000rpx;
@ -371,6 +348,11 @@
font-weight: 500; font-weight: 500;
color: $red; color: $red;
font-family: OPPOSANS; font-family: OPPOSANS;
&::before {
content: '￥';
font-size: 24rpx;
}
} }
.stock-text { .stock-text {

4
sheep/components/s-user-card/s-user-card.vue
View File

@ -1,7 +1,7 @@
<!-- 装修用户组件：用户卡片 --> <!-- 装修用户组件：用户卡片 -->
<template> <template>
<view class="ss-user-info-wrap ss-p-t-50" style="z-index: 9999;"> <view class="ss-user-info-wrap ss-p-t-50">
<view class="ss-flex ss-col-center ss-row-between "> <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
<view class="left-box ss-flex ss-col-center ss-m-l-36"> <view class="left-box ss-flex ss-col-center ss-m-l-36">
<view class="avatar-box ss-m-r-24"> <view class="avatar-box ss-m-r-24">
<image class="avatar-img" :src=" <image class="avatar-img" :src="

4
sheep/components/s-wallet-card/s-wallet-card.vue
View File

@ -1,6 +1,6 @@
<!-- 装修用户组件：用户资产 --> <!-- 装修用户组件：用户资产 -->
<template> <template>
<view class="ss-wallet-menu-wrap ss-flex ss-col-center" style="z-index: 9999;"> <view class="ss-wallet-menu-wrap ss-flex ss-col-center">
<view <view
class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
@tap="sheep.$router.go('/pages/user/wallet/money')" @tap="sheep.$router.go('/pages/user/wallet/money')"
@ -77,7 +77,7 @@
} }
.menu-item { .menu-item {
height: 105rpx; height: 160rpx;
.menu-title { .menu-title {
font-size: 24rpx; font-size: 24rpx;

121
sheep/hooks/useGoods.js
View File

@ -82,10 +82,7 @@ export function formatGoodsSwiper(urlList) {
const isVideo = VIDEO_SUFFIX_LIST.some((suffix) => url.includes(suffix)); const isVideo = VIDEO_SUFFIX_LIST.some((suffix) => url.includes(suffix));
const type = isVideo ? 'video' : 'image'; const type = isVideo ? 'video' : 'image';
const src = $url.cdn(url); const src = $url.cdn(url);
return { return { type, src };
type,
src,
};
}) || [] }) || []
); );
} }
@ -339,27 +336,6 @@ export function fen2yuan(price) {
return (price / 100.0).toFixed(2); return (price / 100.0).toFixed(2);
} }
/**
* 将分转成元
*
* 如果没有小数点，则不展示小数点部分
*
* @param price 分，例如说 100 分
* @returns {string} 元，例如说 1 元
*/
export function fen2yuanSimple(price) {
return fen2yuan(price).replace(/\.?0+$/, '');
}
/**
* 将折扣百分比转化为“打x者”的 x 部分
*
* @param discountPercent
*/
export function formatDiscountPercent(discountPercent) {
return (discountPercent / 10.0).toFixed(1).replace(/\.?0+$/, '');
}
/** /**
* 从商品 SKU 数组中，转换出商品属性的数组 * 从商品 SKU 数组中，转换出商品属性的数组
* *
@ -404,99 +380,6 @@ export function convertProductPropertyList(skus) {
return result; return result;
} }
export function appendSettlementProduct(spus, settlementInfos) {
if (!settlementInfos || settlementInfos.length === 0) {
return;
}
for (const spu of spus) {
const settlementInfo = settlementInfos.find((info) => info.spuId === spu.id);
if (!settlementInfo) {
return;
}
// 选择价格最小的 SKU 设置到 SPU 上
const settlementSku = settlementInfo.skus
.filter((sku) => sku.promotionPrice > 0)
.reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr));
if (settlementSku) {
spu.promotionType = settlementSku.promotionType;
spu.promotionPrice = settlementSku.promotionPrice;
}
// 设置【满减送】活动
if (settlementInfo.rewardActivity) {
spu.rewardActivity = settlementInfo.rewardActivity;
}
}
}
// 获得满减送活动的规则描述（group）
export function getRewardActivityRuleGroupDescriptions(activity) {
if (!activity || !activity.rules || activity.rules.length === 0) {
return [];
}
const result = [
{ name: '满减', values: [] },
{ name: '赠品', values: [] },
{ name: '包邮', values: [] },
];
activity.rules.forEach((rule) => {
const conditionTypeStr =
activity.conditionType === 10 ? `满 ${fen2yuanSimple(rule.limit)} 元` : `满 ${rule.limit} 件`;
// 满减
if (rule.limit) {
result[0].values.push(`${conditionTypeStr} 减 ${fen2yuanSimple(rule.discountPrice)} 元`);
}
// 赠品
if (rule.point || (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0)) {
let tips = [];
if (rule.point) {
tips.push(`送 ${rule.point} 积分`);
}
if (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0) {
tips.push(`送 ${rule.giveCouponTemplateCounts.length} 张优惠券`);
}
result[1].values.push(`${conditionTypeStr} ${tips.join('、')}`);
}
// 包邮
if (rule.freeDelivery) {
result[2].values.push(`${conditionTypeStr} 包邮`);
}
});
// 移除 values 为空的元素
result.forEach((item) => {
if (item.values.length === 0) {
result.splice(result.indexOf(item), 1);
}
});
return result;
}
// 获得满减送活动的规则描述（item）
export function getRewardActivityRuleItemDescriptions(activity) {
if (!activity || !activity.rules || activity.rules.length === 0) {
return [];
}
const result = [];
activity.rules.forEach((rule) => {
const conditionTypeStr =
activity.conditionType === 10 ? `满${fen2yuanSimple(rule.limit)}元` : `满${rule.limit}件`;
// 满减
if (rule.limit) {
result.push(`${conditionTypeStr}减${fen2yuanSimple(rule.discountPrice)}元`);
}
// 赠品
if (rule.point) {
result.push(`${conditionTypeStr}送${rule.point}积分`);
}
if (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0) {
result.push(`${conditionTypeStr}送${rule.giveCouponTemplateCounts.length}张优惠券`);
}
// 包邮
if (rule.freeDelivery) {
result.push(`${conditionTypeStr}包邮`);
}
});
return result;
}
/** /**
* 格式化满减送活动的规则 * 格式化满减送活动的规则
* *
@ -512,4 +395,4 @@ export function formatRewardActivityRule(activity, rule) {
return `满 ${rule.limit} 件减 ${fen2yuan(rule.discountPrice)} 元`; return `满 ${rule.limit} 件减 ${fen2yuan(rule.discountPrice)} 元`;
} }
return ''; return '';
} }

9
sheep/ui/su-coupon/su-coupon.vue
View File

@ -254,7 +254,7 @@
.md-coupon-card { .md-coupon-card {
width: 296rpx; width: 296rpx;
height: 63px; height: 74px;
border-radius: 10rpx; border-radius: 10rpx;
overflow: hidden; overflow: hidden;
@ -269,7 +269,6 @@
font-weight: bold; font-weight: bold;
color: v-bind('textColor'); color: v-bind('textColor');
vertical-align: text-bottom; vertical-align: text-bottom;
margin-bottom: 5px;
} }
.value-unit { .value-unit {
@ -349,10 +348,4 @@
} }
} }
} }
// .card-right{
// .card-btn{
// width:auto;
// height:auto;
// }
// }
</style> </style>

912
sheep/ui/su-navbar/su-navbar.vue
View File

@ -1,517 +1,483 @@
<!-- 自定义导航栏 --> <!-- 自定义导航栏 -->
<template> <template>
<view class="uni-navbar" :class="{ 'uni-dark': dark }"> <view class="uni-navbar" :class="{ 'uni-dark': dark }">
<view :class="{ <view
:class="{
'uni-navbar--fixed': fixed, 'uni-navbar--fixed': fixed,
'uni-navbar--shadow': shadow, 'uni-navbar--shadow': shadow,
'uni-navbar--border': border, 'uni-navbar--border': border,
}" class="uni-navbar__content"> }"
<view class="fixed-bg" :class="[opacity ? '' : opacityBgUi]"></view> class="uni-navbar__content"
<su-status-bar v-if="statusBar" :navBg = "navBg" /> >
<view :style="{ <view class="fixed-bg" :class="[opacity ? '' : opacityBgUi]"></view>
<su-status-bar v-if="statusBar" />
<view
:style="{
color: themeColor, color: themeColor,
height: navbarHeight, height: navbarHeight,
background: backgroundColor, background: backgroundColor,
}" class="uni-navbar__header"> }"
<view v-if="headerBtns != 'headerBtns'" class="uni-navbar__header-btns uni-navbar__header-btns-left" class="uni-navbar__header"
:style="{ width: leftIconWidth }"> >
<slot name="left"> <view
<view class="uni-navbar__content_view" v-if="leftIcon.length > 0"> class="uni-navbar__header-btns uni-navbar__header-btns-left"
<view class="icon-box ss-flex"> :style="{ width: leftIconWidth }"
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft"> >
<text class="sicon-back" v-if="hasHistory" /> <slot name="left">
<text class="sicon-home" v-else /> <view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
</view> <view class="icon-box ss-flex">
<view class="line"></view> <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="showMenuTools"> <text class="sicon-back" v-if="hasHistory" />
<text class="sicon-more" /> <text class="sicon-home" v-else />
</view> </view>
</view> <view class="line"></view>
</view> <view
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text" class="icon-button icon-button-right ss-flex ss-row-center"
v-if=" @tap="showMenuTools"
titleAlign === 'left' && >
title.length && <text class="sicon-more" />
sheep.$platform.name !== 'WechatOfficialAccount' </view>
"> </view>
<text :style="{ color: themeColor, fontSize: '18px' }">{{ title }}</text> </view>
</view> <view
</slot> :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }"
</view> class="uni-navbar-btn-text"
<!-- <view class="new-view" v-if="headerBtns === 'headerBtns'" @click="onSearch"> v-if="
<image class="new-image" src="https://zysc.fjptzykj.com:3000/shangcheng/e0d70e9bac714465b87d22d19e30f3fb008dbcdea21842674b355340d6dedceb.png"></image> titleAlign === 'left' &&
</view> --> title.length &&
<view v-if="tools === 'search'" class="" sheep.$platform.name !== 'WechatOfficialAccount'
:style="`width:${sheep.$platform.device.windowWidth - sheep.$platform.capsule.width - 37}px;display: flex;align-items: center;`" "
@click="onSearch"> >
<slot name="center"> <text :style="{ color: themeColor, fontSize: '18px' }">{{ title }}</text>
<uni-search-bar class="ss-flex-1 search-box" :radius="20" placeholder="请输入关键词" </view>
cancelButton="none" v-model="searchModel" @confirm="onSearch" /> </slot>
</slot> </view>
</view> <view v-if="tools === 'search'" class="ss-flex-1">
<view v-else class="uni-navbar__header-container" @tap="onClickTitle"> <slot name="center">
<slot name="center"> <uni-search-bar
<view v-if="tools === 'title' && titleAlign === 'center' && title.length" class="ss-flex-1 search-box"
class="uni-navbar__header-container-inner"> :radius="20"
<text :style="{ color: themeColor, fontSize: '36rpx' }" class="ss-line-1">{{ placeholder="请输入关键词"
cancelButton="none"
v-model="searchModel"
@confirm="onSearch"
/>
</slot>
</view>
<view v-else class="uni-navbar__header-container" @tap="onClickTitle">
<slot name="center">
<view
v-if="tools === 'title' && titleAlign === 'center' && title.length"
class="uni-navbar__header-container-inner"
>
<text :style="{ color: themeColor, fontSize: '36rpx' }" class="ss-line-1">{{
title title
}}</text> }}</text>
</view> </view>
</slot> </slot>
</view> </view>
</view> </view>
</view> </view>
<view class="uni-navbar__placeholder" v-if="placeholder"> <view class="uni-navbar__placeholder" v-if="placeholder">
<su-status-bar v-if="statusBar" /> <su-status-bar v-if="statusBar" />
<view class="uni-navbar__placeholder-view" :style="{ height: navbarHeight }" /> <view class="uni-navbar__placeholder-view" :style="{ height: navbarHeight }" />
</view> </view>
<!-- 头部问题 --> <!-- 头部问题 -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
<!-- <view :style="[capsuleStyle]"></view> --> <!-- <view :style="[capsuleStyle]"></view> -->
<!-- #endif --> <!-- #endif -->
</view> </view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { onLoad } from '@dcloudio/uni-app';
onLoad import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
} from '@dcloudio/uni-app'; import { computed, ref } from 'vue';
import {
showMenuTools,
closeMenuTools
} from '@/sheep/hooks/useModal';
import {
computed,
ref
} from 'vue';
/** /**
* NavBar 自定义导航栏 * NavBar 自定义导航栏
* @description 导航栏组件，主要用于头部导航 * @description 导航栏组件，主要用于头部导航
* @property {Boolean} dark 开启黑暗模式 * @property {Boolean} dark 开启黑暗模式
* @property {String} title 标题文字 * @property {String} title 标题文字
* @property {String} rightText 右侧按钮文本 * @property {String} rightText 右侧按钮文本
* @property {String} leftIcon 左侧按钮图标 * @property {String} leftIcon 左侧按钮图标
* @property {String} rightIcon 右侧按钮图标 * @property {String} rightIcon 右侧按钮图标
* @property {String} color 图标和文字颜色 * @property {String} color 图标和文字颜色
* @property {String} backgroundColor 导航栏背景颜色 * @property {String} backgroundColor 导航栏背景颜色
* @property {Boolean} fixed = [true|false] 是否固定顶部 * @property {Boolean} fixed = [true|false] 是否固定顶部
* @property {Boolean} statusBar = [true|false] 是否包含状态栏 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
* @property {Boolean} shadow = [true|false] 导航栏下是否有阴影 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
* @event {Function} clickLeft 左侧按钮点击时触发 * @event {Function} clickLeft 左侧按钮点击时触发
* @event {Function} clickRight 右侧按钮点击时触发 * @event {Function} clickRight 右侧按钮点击时触发
* @event {Function} clickTitle 中间标题点击时触发 * @event {Function} clickTitle 中间标题点击时触发
*/ */
const getVal = (val) => (typeof val === 'number' ? val + 'px' : val); const getVal = (val) => (typeof val === 'number' ? val + 'px' : val);
const emits = defineEmits(['clickLeft', 'clickRight', 'clickTitle', 'search']); const emits = defineEmits(['clickLeft', 'clickRight', 'clickTitle', 'search']);
const props = defineProps({ const props = defineProps({
navBg: { dark: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
dark: { modelValue: {
type: Boolean, type: String,
default: false, default: '',
}, },
headerBtns: { title: {
type: String, type: String,
default: '', default: '',
}, },
modelValue: { titleAlign: {
type: String, type: String,
default: '', default: 'center', // left | center
}, },
title: { rightText: {
type: String, type: String,
default: '', default: '',
}, },
titleAlign: { leftIcon: {
type: String, type: String,
default: 'center', // left | center default: 'left',
}, },
rightText: { rightIcon: {
type: String, type: String,
default: '', default: '',
}, },
leftIcon: { fixed: {
type: String, type: [Boolean, String],
default: 'left', default: true,
}, },
rightIcon: { placeholder: {
type: String, type: [Boolean, String],
default: '', default: true,
}, },
fixed: { color: {
type: [Boolean, String], type: String,
default: true, default: '',
}, },
placeholder: { backgroundColor: {
type: [Boolean, String], type: String,
default: true, default: '',
}, },
color: { opacity: {
type: String, type: [Boolean, String],
default: '', default: false,
}, },
backgroundColor: { opacityBgUi: {
type: String, type: String,
default: '', default: 'bg-white',
}, },
opacity: { statusBar: {
type: [Boolean, String], type: [Boolean, String],
default: false, default: false,
}, },
opacityBgUi: { shadow: {
type: String, type: [Boolean, String],
default: 'bg-white', default: false,
}, },
statusBar: { border: {
type: [Boolean, String], type: [Boolean, String],
default: false, default: false,
}, },
shadow: { height: {
type: [Boolean, String], type: [Number, String],
default: false, default: 44,
}, },
border: { leftWidth: {
type: [Boolean, String], type: [Number, String],
default: false, default: 80,
}, },
height: { rightWidth: {
type: [Number, String], type: [Number, String],
default: 44, default: 0,
}, },
leftWidth: { tools: {
type: [Number, String], type: String,
default: 80, default: 'title',
}, },
rightWidth: { defaultSearch: {
type: [Number, String], type: String,
default: 0, default: '',
}, },
tools: { });
type: String,
default: 'title',
},
defaultSearch: {
type: String,
default: '',
},
});
const capsuleStyle = computed(() => { const capsuleStyle = computed(() => {
return { return {
width: sheep.$platform.capsule.width + 'px', width: sheep.$platform.capsule.width + 'px',
height: sheep.$platform.capsule.height + 'px', height: sheep.$platform.capsule.height + 'px',
margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px', margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',
}; };
}); });
// const searchModel = computed(() => { const searchModel = computed(() => {
// return props.defaultSearch; return props.defaultSearch;
// }); });
const searchModel = computed({
get() {
return props.defaultSearch;
},
set(newValue) {
sheep.$router.go('/pages/index/search');
// props.defaultSearch = newValue
}
})
const themeBgColor = computed(() => { const themeBgColor = computed(() => {
if (props.dark) { if (props.dark) {
// 默认值 // 默认值
if (props.backgroundColor) { if (props.backgroundColor) {
return props.backgroundColor; return props.backgroundColor;
} else { } else {
return props.dark ? '#333' : '#FFF'; return props.dark ? '#333' : '#FFF';
} }
} }
return props.backgroundColor || '#FFF'; return props.backgroundColor || '#FFF';
}); });
const themeColor = computed(() => { const themeColor = computed(() => {
if (props.dark) { if (props.dark) {
// 默认值 // 默认值
if (props.color) { if (props.color) {
return props.color; return props.color;
} else { } else {
return props.dark ? '#fff' : '#333'; return props.dark ? '#fff' : '#333';
} }
} }
return props.color || '#333'; return props.color || '#333';
}); });
const navbarHeight = computed(() => { const navbarHeight = computed(() => {
return getVal(props.height); return getVal(props.height);
}); });
const leftIconWidth = computed(() => { const leftIconWidth = computed(() => {
return getVal(props.leftWidth); return getVal(props.leftWidth);
}); });
const rightIconWidth = computed(() => { const rightIconWidth = computed(() => {
return getVal(props.rightWidth); return getVal(props.rightWidth);
}); });
function onSearch(e) { function onSearch(e) {
sheep.$router.go('/pages/index/search'); emits('search', e.value);
// emits('search', e.value); }
}
onLoad(() => { onLoad(() => {
if (uni.report && props.title !== '') { if (uni.report && props.title !== '') {
uni.report('title', props.title); uni.report('title', props.title);
} }
}); });
const hasHistory = sheep.$router.hasHistory(); const hasHistory = sheep.$router.hasHistory();
function onClickLeft() { function onClickLeft() {
if (hasHistory) { if (hasHistory) {
sheep.$router.back(); sheep.$router.back();
} else { } else {
sheep.$router.go('/pages/index/index'); sheep.$router.go('/pages/index/index');
} }
emits('clickLeft'); emits('clickLeft');
} }
function onClickRight() {
function onClickRight() { showMenuTools();
showMenuTools(); }
} function onClickTitle() {
emits('clickTitle');
function onClickTitle() { }
emits('clickTitle');
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bg-main { .bg-main {
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important; background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;
color: #fff !important; color: #fff !important;
} }
.icon-box {
background: #ffffff;
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
border-radius: 30rpx;
width: 134rpx;
height: 56rpx;
margin-left: 8rpx;
.line {
width: 2rpx;
height: 24rpx;
background: #e5e5e7;
}
.sicon-back {
font-size: 32rpx;
color: #000;
}
.sicon-home {
font-size: 32rpx;
color: #000;
}
.sicon-more {
font-size: 32rpx;
color: #000;
}
.icon-button {
width: 67rpx;
height: 56rpx;
&-left:hover {
background: rgba(0, 0, 0, 0.16);
border-radius: 30rpx 0px 0px 30rpx;
}
&-right:hover {
background: rgba(0, 0, 0, 0.16);
border-radius: 0px 30rpx 30rpx 0px;
}
}
}
.icon-box { $nav-height: 44px;
background: #ffffff;
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
border-radius: 30rpx;
width: 134rpx;
height: 56rpx;
margin-left: 8rpx;
.line { .fixed-bg {
width: 2rpx; position: absolute;
height: 24rpx; width: 100%;
background: #e5e5e7; height: 100%;
} top: 0;
z-index: 1;
pointer-events: none;
}
.sicon-back { .uni-nav-bar-text {
font-size: 32rpx; /* #ifdef APP-PLUS */
color: #000; font-size: 34rpx;
} /* #endif */
/* #ifndef APP-PLUS */
font-size: 14px;
/* #endif */
}
.sicon-home { .uni-nav-bar-right-text {
font-size: 32rpx; font-size: 12px;
color: #000; }
}
.sicon-more { .uni-navbar__content {
font-size: 32rpx; position: relative;
color: #000; // background-color: #fff;
} // box-sizing: border-box;
background-color: transparent;
}
.icon-button { .uni-navbar__content_view {
width: 67rpx; // box-sizing: border-box;
height: 56rpx; }
&-left:hover { .uni-navbar-btn-text {
background: rgba(0, 0, 0, 0.16); /* #ifndef APP-NVUE */
border-radius: 30rpx 0px 0px 30rpx; display: flex;
} /* #endif */
flex-direction: column;
justify-content: flex-start;
align-items: center;
line-height: 18px;
}
&-right:hover { .uni-navbar__header {
background: rgba(0, 0, 0, 0.16); /* #ifndef APP-NVUE */
border-radius: 0px 30rpx 30rpx 0px; display: flex;
} /* #endif */
} padding: 0 10px;
} flex-direction: row;
justify-content: space-between;
height: $nav-height;
font-size: 12px;
position: relative;
z-index: 2;
}
$nav-height: 44px; .uni-navbar__header-btns {
/* #ifndef APP-NVUE */
overflow: hidden;
display: flex;
/* #endif */
flex-wrap: nowrap;
flex-direction: row;
// min-width: 120rpx;
min-width: 40rpx;
// padding: 0 6px;
justify-content: center;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fixed-bg { .uni-navbar__header-btns-left {
position: absolute; /* #ifndef APP-NVUE */
width: 100%; display: flex;
height: 100%; /* #endif */
top: 0; width: 120rpx;
z-index: 1; justify-content: flex-start;
pointer-events: none; align-items: center;
} }
.uni-nav-bar-text { .uni-navbar__header-btns-right {
/* #ifdef APP-PLUS */ /* #ifndef APP-NVUE */
font-size: 34rpx; display: flex;
/* #endif */ /* #endif */
/* #ifndef APP-PLUS */ flex-direction: row;
font-size: 14px; // width: 150rpx;
/* #endif */ // padding-right: 30rpx;
} justify-content: flex-end;
align-items: center;
}
.uni-navbar__header-container {
/* #ifndef APP-NVUE */
// display: flex;
/* #endif */
// flex: 1;
// padding: 0 10px;
// overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: 50%;
}
.uni-nav-bar-right-text { .uni-navbar__header-container-inner {
font-size: 12px; /* #ifndef APP-NVUE */
} display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 12px;
overflow: hidden;
// box-sizing: border-box;
}
.uni-navbar__content { .uni-navbar__placeholder-view {
position: relative; height: $nav-height;
// background-color: #fff; }
// box-sizing: border-box;
background-color: transparent;
}
.uni-navbar__content_view { .uni-navbar--fixed {
// box-sizing: border-box; position: fixed;
} z-index: 998;
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
/* #ifndef H5 */
left: 0;
right: 0;
/* #endif */
}
.uni-navbar-btn-text { .uni-navbar--shadow {
/* #ifndef APP-NVUE */ box-shadow: 0 1px 6px #ccc;
display: flex; }
/* #endif */
flex-direction: column;
justify-content: flex-start;
align-items: center;
line-height: 18px;
}
.uni-navbar__header { .uni-navbar--border {
/* #ifndef APP-NVUE */ border-bottom-width: 1rpx;
display: flex; border-bottom-style: solid;
/* #endif */ border-bottom-color: #eee;
padding: 0 10px; }
flex-direction: row;
// justify-content: space-between;
height: $nav-height;
font-size: 12px;
position: relative;
z-index: 2;
}
.uni-navbar__header-btns { .uni-ellipsis-1 {
/* #ifndef APP-NVUE */ overflow: hidden;
overflow: hidden; /* #ifndef APP-NVUE */
display: flex; white-space: nowrap;
/* #endif */ text-overflow: ellipsis;
flex-wrap: nowrap; /* #endif */
flex-direction: row; /* #ifdef APP-NVUE */
// min-width: 120rpx; lines: 1;
min-width: 40rpx; text-overflow: ellipsis;
// padding: 0 6px; /* #endif */
justify-content: center; }
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-navbar__header-btns-left { // 暗主题配置
/* #ifndef APP-NVUE */ .uni-dark {
display: flex; }
/* #endif */ </style>
width: 120rpx;
justify-content: flex-start;
align-items: center;
}
.uni-navbar__header-btns-right {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 150rpx;
// padding-right: 30rpx;
justify-content: flex-end;
align-items: center;
}
.uni-navbar__header-container {
/* #ifndef APP-NVUE */
// display: flex;
/* #endif */
// flex: 1;
// padding: 0 10px;
// overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: 50%;
}
.uni-navbar__header-container-inner {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 12px;
overflow: hidden;
// box-sizing: border-box;
}
.uni-navbar__placeholder-view {
height: $nav-height;
}
.uni-navbar--fixed {
position: fixed;
z-index: 998;
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
/* #ifndef H5 */
left: 0;
right: 0;
/* #endif */
}
.uni-navbar--shadow {
box-shadow: 0 1px 6px #ccc;
}
.uni-navbar--border {
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #eee;
}
.uni-ellipsis-1 {
overflow: hidden;
/* #ifndef APP-NVUE */
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
text-overflow: ellipsis;
/* #endif */
}
// 暗主题配置
.uni-dark {}
.new-view {
width: 40px;
height: 100%;
margin-right: 15px;
.new-image {
width: 100%;
height: 100%;
}
}
:deep(.uni-searchbar__box) {
height: 31px !important;
}
</style>

28
sheep/ui/su-status-bar/su-status-bar.vue
View File

@ -1,26 +1,16 @@
<!-- 自定义状态栏 --> <!-- 自定义状态栏 -->
<template> <template>
<view :style="{ height: statusBarHeight }" class="uni-status-bar" :class="navBg? 'ss' : ''"> <view :style="{ height: statusBarHeight }" class="uni-status-bar"><slot /></view>
<slot />
</view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
const props = defineProps({
navBg: { const statusBarHeight = sheep.$platform.device.statusBarHeight + 'px';
type: Boolean,
default: false,
}
})
const statusBarHeight = sheep.$platform.device.statusBarHeight - 2 + 'px';
</script> </script>
<style lang="scss"> <style lang="scss">
.uni-status-bar { .uni-status-bar {
// width: 750rpx; // width: 750rpx;
height: var(--status-bar-height); height: var(--status-bar-height);
} }
.ss { </style>
background: rgba(248, 83, 42);
}
</style>

2
uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
View File

@ -226,7 +226,7 @@
</script> </script>
<style lang="scss"> <style lang="scss">
$uni-searchbar-height: 31px; $uni-searchbar-height: 36px;
.uni-searchbar { .uni-searchbar {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */