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

优化3333333

Browse Source
This commit is contained in:
77 2024-10-11 16:07:43 +08:00
parent 7ef82d277f
commit da534c7e55
27 changed files with 2437 additions and 1836 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,11 +1,11 @@
<!-- 秒杀活动列表 --> <!-- 秒杀活动列表 -->
<template> <template>
<s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }"> <s-layout title="秒杀列表" navbar="normal" :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)" @tap="handleChangeTimeConfig(index,config.id)"
> >
<!-- 活动起始时间 --> <!-- 活动起始时间 -->
<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,8 +174,9 @@
} }
}); });
timeConfigList.value = data; timeConfigList.value = data;
console.log(timeConfigList.value[0]?.id,"timeConfigList.value[0]?.id");
// 默认选中进行中的活动 // 默认选中进行中的活动
handleChangeTimeConfig(activeTimeIndex.value); handleChangeTimeConfig(activeTimeIndex.value, timeConfigList.value[0]?.id);
// 滚动到进行中的时间段 // 滚动到进行中的时间段
scrollToTimeConfig(activeTimeIndex.value); scrollToTimeConfig(activeTimeIndex.value);
}; };
@ -189,13 +190,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) => { const handleChangeTimeConfig = (index, config) => {
activeTimeIndex.value = index; activeTimeIndex.value = index;
console.log(config,'config')
// 查询活动列表 // 查询活动列表
activityPageParams.pageNo = 1; activityPageParams.pageNo = 1;
activityList.value = []; activityList.value = [];
getActivityList(); getActivityList(config);
}; };
// 倒计时 // 倒计时
@ -212,15 +213,16 @@
// 查询活动列表 // 查询活动列表
const activityPageParams = reactive({ const activityPageParams = reactive({
id: 0, // 时间段 ID configId: 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() { async function getActivityList(id) {
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) => {
// 计算抢购进度 // 计算抢购进度
@ -264,7 +266,7 @@
.header { .header {
width: 710rpx; width: 710rpx;
height: 330rpx; height: 330rpx;
margin: -276rpx auto 0 auto; margin: 0 auto 0 auto;
border-radius: 14rpx; border-radius: 14rpx;
overflow: hidden; overflow: hidden;
swiper { swiper {
@ -331,7 +333,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 border-bottom ss-p-b-30" class="ss-m-t-40 ss-flex ss-row-between 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>

1061
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="sheep.$url.static('/static/img/shop/goods/score1.svg')" src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
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: v-bind(btnBg); background-image: url('https://zysc.fjptzykj.com:3000/shangcheng/ae81b6671e07f250d4bbccc9707409e970cd5ecee9d4fd861fd0bb926812dda9.png');
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,14 +1,22 @@
<!-- 首页，支持店铺装修 --> <!-- 首页，支持店铺装修 -->
<template> <template>
<view v-if="template"> <view v-if="template">
<s-layout <s-layout
title="首页" title="首页"
navbar="custom" navbar="normal"
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"
@ -88,4 +96,11 @@
onPageScroll(() => {}); onPageScroll(() => {});
</script> </script>
<style></style> <style lang="scss">
.new-bg{
background:rgba(248,83,42);
width:100%;
height:50px;
position: absolute;
}
</style>

9
pages/index/page.vue
View File

@ -1,13 +1,6 @@
<!-- 自定义页面：支持装修 --> <!-- 自定义页面：支持装修 -->
<template> <template>
<s-layout <s-layout navbar="normal" :bgStyle="{ color: '#FE832A'}">
: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>

54
pages/index/user.vue
View File

@ -3,10 +3,20 @@
<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 :type="item.id" :data="item.property" :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> </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>
@ -41,13 +51,40 @@
onPageScroll(() => {}); onPageScroll(() => {});
</script> </script>
<style> <style lang="scss" scoped>
.new-main{ .new-huiy {
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%);
@ -62,4 +99,11 @@
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,63 +41,94 @@
</view> </view>
</view> </view>
<view <view
class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderPayload.pointActivityId"
v-if="state.orderInfo.type === 0 && state.orderInfo.pointsStatus === 1" class="order-item ss-flex ss-col-center ss-row-between"
>
<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.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
<image <image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')" src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
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"> <checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
<checkbox :checked='state.pointStatus' :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" /> <checkbox
:checked="state.pointStatus"
:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
/>
</checkbox-group> </checkbox-group>
</view> </view>
</view> </view>
<!-- 快递配置时，信息的展示 --> <!-- 快递配置时，信息的展示 -->
<view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 1'> <view
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 class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'> <view
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 class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'> <view
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">
@ -105,24 +136,29 @@
-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }} -￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
</text> </text>
<text <text
class="item-value" class="item-value"
:class="state.couponInfo.length > 0 ? 'text-red' : 'text-disabled'" :class="
v-else state.couponInfo.filter((coupon) => coupon.match).length > 0
? 'text-red'
: 'text-disabled'
"
v-else
> >
{{ {{
state.couponInfo.length > 0 ? state.couponInfo.length + ' 张可用' : '暂无可用优惠券' state.couponInfo.filter((coupon) => coupon.match).length > 0
? 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"> <view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
<!-- @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>
@ -130,8 +166,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">
@ -152,17 +188,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 芋艿：后续要把优惠信息打进去 --> <!-- 满额折扣弹框 TODO @puhui999：【折扣】后续要把优惠信息打进去 -->
<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"
/> />
<!-- 底部 --> <!-- 底部 -->
@ -174,8 +210,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>
@ -185,12 +221,12 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref } from 'vue'; import { reactive, ref, watch } 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 CouponApi from '@/sheep/api/promotion/coupon'; import TradeConfigApi from '@/sheep/api/trade/config';
import { fen2yuan } from '@/sheep/hooks/useGoods'; import { fen2yuan } from '@/sheep/hooks/useGoods';
const state = reactive({ const state = reactive({
@ -208,8 +244,8 @@
const addressState = ref({ const addressState = ref({
addressInfo: {}, // 选择的收货地址 addressInfo: {}, // 选择的收货地址
deliveryType: 1, // 收货方式 1 - 快递配送；2 - 门店自提 deliveryType: 1, // 收货方式：1-快递配送，2-门店自提
isPickUp: true, // 门店自提是否开启 TODO puhui999: 默认开启，看看后端有开关的话接入 isPickUp: true, // 门店自提是否开启
pickUpInfo: {}, // 选择的自提门店信息 pickUpInfo: {}, // 选择的自提门店信息
receiverName: '', // 收件人名称 receiverName: '', // 收件人名称
receiverMobile: '', // 收件人手机 receiverMobile: '', // 收件人手机
@ -226,7 +262,7 @@
// 选择优惠券 // 选择优惠券
async function onSelectCoupon(couponId) { async function onSelectCoupon(couponId) {
state.orderPayload.couponId = couponId || 0; state.orderPayload.couponId = couponId;
await getOrderInfo(); await getOrderInfo();
state.showCoupon = false; state.showCoupon = false;
} }
@ -266,13 +302,14 @@
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;
@ -283,9 +320,15 @@
} }
// 跳转到支付页面 // 跳转到支付页面
sheep.$router.redirect('/pages/pay/index', { if (data.payOrderId && data.payOrderId > 0) {
id: data.payOrderId, sheep.$router.redirect('/pages/pay/index', {
}); id: data.payOrderId,
});
} else {
sheep.$router.redirect('/pages/order/detail', {
id: data.id,
});
}
} }
// 检查库存 & 计算订单价格 // 检查库存 & 计算订单价格
@ -296,37 +339,26 @@
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('参数不正确，请检查！');
@ -334,7 +366,22 @@
} }
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,16 +68,7 @@
<!-- 用户组件：用户卡片 --> <!-- 用户组件：用户卡片 -->
<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" />
<!-- 用户组件：用户资产 --> <!-- 用户组件：用户资产 -->
@ -133,30 +124,7 @@
: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="[couponBg, { marginLeft: `${data.space}px` }]" :style="[item.canTake ? couponBg : couponBgFalse, { 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="columns === 2" v-if="item.canTake"
@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,9 +33,8 @@
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>
@ -66,6 +65,11 @@
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,
@ -140,15 +144,16 @@
margin-right: 2px !important; margin-right: 2px !important;
} }
.card-btn { .card-btn {
width: 140rpx; writing-mode: tb-rl;
height: 50rpx; width: 35px;
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: auto 20rpx auto 0; margin: 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-t-28 ss-m-b-40"> <view class="empty-text 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,11 +11,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>
<image <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit" />
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"
@ -27,13 +23,40 @@
> >
{{ 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> <!-- 活动价格 -->
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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>
@ -60,13 +83,40 @@
> >
{{ 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> <!-- 活动价格 -->
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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>
@ -74,13 +124,9 @@
<!-- 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> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
</view> </view>
<image <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix" />
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"
@ -110,16 +156,42 @@
</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> <!-- 活动价格 -->
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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) &&
@ -155,7 +227,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>
@ -163,8 +235,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 ss-p-t-20"> <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ">
<view> <view>
<view <view
v-if="goodsFields.title?.show || goodsFields.name?.show" v-if="goodsFields.title?.show || goodsFields.name?.show"
@ -189,21 +261,44 @@
</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
v-if="goodsFields.price?.show" class="card2"
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS" v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
:style="[{ color: goodsFields.price.color }]" :key="item"
> >
<text class="ss-font-24">{{ priceUnit }}</text> {{ item }}
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} </view>
</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-flex ss-col-bottom font-OPPOSANS" class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
:style="[{ color: originPriceColor }]" :style="[{ color: originPriceColor }]"
> >
<text class="price-unit ss-font-20">{{ priceUnit }}</text> <text class="price-unit ss-font-20">{{ priceUnit }}</text>
@ -217,22 +312,20 @@
</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> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
</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
@ -262,10 +355,37 @@
</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> <!-- 活动价格 -->
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} <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="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="
@ -285,9 +405,9 @@
</view> </view>
</view> </view>
<slot name="cart" <slot name="cart">
><view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view></slot <view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view>
> </slot>
</view> </view>
</view> </view>
</template> </template>
@ -297,39 +417,41 @@
* 商品卡片 * 商品卡片
* *
* @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, reactive, getCurrentInstance, onMounted, nextTick } from 'vue'; import { computed, getCurrentInstance, nextTick, onMounted } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods'; import {
import { formatStock } from '@/sheep/hooks/useGoods'; fen2yuan,
import goodsCollectVue from '@/pages/user/goods-collect.vue'; formatExchange,
import { isArray } from 'lodash'; formatSales,
formatStock,
// 数据 getRewardActivityRuleItemDescriptions,
const state = reactive({}); } from '@/sheep/hooks/useGoods';
import { isArray } from 'lodash-es';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
@ -338,27 +460,39 @@
default() { default() {
return { return {
// 商品价格 // 商品价格
price: { show: true }, price: {
show: true,
},
// 库存 // 库存
stock: { show: true }, stock: {
show: true,
},
// 商品名称 // 商品名称
name: { show: true }, name: {
show: true,
},
// 商品介绍 // 商品介绍
introduction: { show: true }, introduction: {
show: true,
},
// 市场价 // 市场价
marketPrice: { show: true }, marketPrice: {
show: true,
},
// 销量 // 销量
salesCount: { show: true }, salesCount: {
show: true,
},
}; };
}, },
}, },
tagStyle: { tagStyle: {
type: Object, type: Object,
default: {}, default: () => ({}),
}, },
data: { data: {
type: Object, type: Object,
default: {}, default: () => ({}),
}, },
size: { size: {
type: String, type: String,
@ -418,6 +552,17 @@
}, },
}); });
// 优惠文案
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 {
@ -433,10 +578,18 @@
const salesAndStock = computed(() => { const salesAndStock = computed(() => {
let text = []; let text = [];
if (props.goodsFields.salesCount?.show) { if (props.goodsFields.salesCount?.show) {
text.push(formatSales(props.data.sales_show_type, props.data.salesCount)); if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
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) {
text.push(formatStock(props.data.stock_show_type, props.data.stock)); if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
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(' | ');
}); });
@ -451,10 +604,14 @@
// 获取卡片实时高度 // 获取卡片实时高度
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({ size: true, scrollOffset: true }); view.select(`#${elId}`).fields({
size: true,
scrollOffset: true,
});
view.exec((data) => { view.exec((data) => {
let totalHeight = 0; let totalHeight = 0;
const goodsPriceCard = data[0]; const goodsPriceCard = data[0];
@ -469,6 +626,7 @@
}); });
} }
} }
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
getGoodsPriceCardWH(); getGoodsPriceCardWH();
@ -482,12 +640,13 @@
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;
@ -502,6 +661,13 @@
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;
@ -516,14 +682,17 @@
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;
@ -581,19 +750,18 @@
// 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;
@ -608,8 +776,7 @@
// md // md
.md-goods-card { .md-goods-card {
overflow: hidden; overflow: hidden;
width: auto; width: 100%;
padding: 10px 10px;
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: $white; background-color: $white;
@ -624,6 +791,7 @@
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;
@ -659,12 +827,14 @@
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: 280rpx; width: 180rpx;
height: 280rpx; height: 180rpx;
margin-right: 20rpx; margin-right: 20rpx;
border-radius:10px;
} }
.lg-goods-title { .lg-goods-title {
@ -674,6 +844,7 @@
// 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;
@ -700,6 +871,7 @@
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
} }
.tag-box { .tag-box {
width: 100%; width: 100%;
} }
@ -713,10 +885,12 @@
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;
@ -727,6 +901,7 @@
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;
@ -753,4 +928,33 @@
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,6 +213,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;

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

@ -14,6 +14,9 @@
: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：装修组件导航栏-标准 -->
@ -73,6 +76,14 @@
type: String, type: String,
default: '', default: '',
}, },
headerBtns: {
type: String,
default: '',
},
navbarbackgroundColor:{
type: String,
default: '',
},
navbar: { navbar: {
type: String, type: String,
default: 'normal', default: 'normal',
@ -136,6 +147,10 @@
type: Boolean, type: Boolean,
default: false, default: false,
}, },
navBg: {
type: Boolean,
default: false,
},
}); });
const emits = defineEmits(['search']); const emits = defineEmits(['search']);

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

@ -1,328 +1,291 @@
<!-- 装修商品组件：【积分商城】商品卡片 --> <!-- 装修商品组件：【积分商城】商品卡片 -->
<template> <template>
<!-- 商品卡片 --> <!-- 商品卡片 -->
<view> <view>
<!-- 布局1. 单列大图（上图，下内容）--> <!-- 布局1. 单列大图（上图，下内容）-->
<view <view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length" class="goods-sl-box">
v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length" <view class="goods-box" v-for="item in state.spuList" :key="item.id"
class="goods-sl-box" :style="[{ marginBottom: data.space * 2 + 'rpx' }]">
> <s-goods-column class="" size="sl" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
<view :titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
class="goods-box" :topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
v-for="item in state.spuList" @click="sheep.$router.go('/pages/goods/point', { id: item.activityId })">
:key="item.id" <!-- 购买按钮 -->
:style="[{ marginBottom: data.space * 2 + 'rpx' }]" <template v-slot:cart>
> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
<s-goods-column {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
class="" </button>
size="sl" </template>
:goodsFields="data.fields" </s-goods-column>
:tagStyle="data.badge" </view>
:data="item" </view>
: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 <view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length" class="goods-lg-box">
v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length" <view class="goods-box" :style="[{ marginBottom: data.space + 'px' }]" v-for="item in state.spuList"
class="goods-lg-box" :key="item.id">
> <s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :data="item"
<view :tagStyle="data.badge" :titleColor="data.fields.name?.color"
class="goods-box" :subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop"
:style="[{ marginBottom: data.space + 'px' }]" :bottomRadius="data.borderRadiusBottom"
v-for="item in state.spuList" @tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })">
:key="item.id" <!-- 购买按钮 -->
> <template v-slot:cart>
<s-goods-column <button class="ss-reset-button cart-btn" :style="[buyStyle]">
class="goods-card" {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
size="lg" </button>
:goodsFields="data.fields" </template>
:data="item" </s-goods-column>
:tagStyle="data.badge" </view>
:titleColor="data.fields.name?.color" </view>
: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 <view v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length" class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top">
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top" <view class="goods-list-box">
> <view class="left-list" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
<view class="goods-list-box"> v-for="item in state.leftSpuList" :key="item.id">
<view <s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge"
class="left-list" :data="item" :titleColor="data.fields.name?.color"
:style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]" :subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop"
v-for="item in state.leftSpuList" :bottomRadius="data.borderRadiusBottom" :titleWidth="330 - marginLeft - marginRight"
:key="item.id" @click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
> @getHeight="calculateGoodsColumn($event, 'left')">
<s-goods-column <!-- 购买按钮 -->
class="goods-md-box" <template v-slot:cart>
size="md" <button class="ss-reset-button cart-btn" :style="[buyStyle]">
:goodsFields="data.fields" {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
:tagStyle="data.badge" </button>
:data="item" </template>
:titleColor="data.fields.name?.color" </s-goods-column>
:subTitleColor="data.fields.introduction.color" </view>
:topRadius="data.borderRadiusTop" </view>
:bottomRadius="data.borderRadiusBottom" <view class="goods-list-box">
:titleWidth="330 - marginLeft - marginRight" <view class="right-list" :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })" v-for="item in state.rightSpuList" :key="item.id">
@getHeight="calculateGoodsColumn($event, 'left')" <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"
<template v-slot:cart> :bottomRadius="data.borderRadiusBottom" :titleWidth="330 - marginLeft - marginRight"
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> @click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
{{ btnBuy.type === 'text' ? btnBuy.text : '' }} @getHeight="calculateGoodsColumn($event, 'right')">
</button> <!-- 购买按钮 -->
</template> <template v-slot:cart>
</s-goods-column> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
</view> {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</view> </button>
<view class="goods-list-box"> </template>
<view </s-goods-column>
class="right-list" </view>
:style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]" </view>
v-for="item in state.rightSpuList" </view>
:key="item.id" </view>
>
<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 { computed, onMounted, reactive, ref } from 'vue'; import {
import sheep from '@/sheep'; computed,
import SpuApi from '@/sheep/api/product/spu'; onMounted,
import PointApi from '@/sheep/api/promotion/point'; reactive,
import { PromotionActivityTypeEnum } from '@/sheep/util/const'; ref
} 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 { layoutType, btnBuy, activityIds } = props.data || {}; const {
const { marginLeft, marginRight } = props.styles || {}; layoutType,
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 { data } = await PointApi.getPointActivityListByIds(ids); const {
return data; 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 { data: spu } = await SpuApi.getSpuDetail(ids); const {
return spu; data: 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-row-between ss-flex-1"> <view class="header-right ss-flex-col 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,14 +24,17 @@
<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">
@ -427,7 +430,7 @@
} }
.price-text { .price-text {
font-size: 30rpx; font-size: 48rpx;
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,8 +19,19 @@
<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 class="price-text"> <view v-if="state.goodsInfo.activity_type === PromotionActivityTypeEnum.POINT.type"
{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }} class="price-text ss-flex">
<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">
@ -92,12 +103,15 @@
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 { min } from 'lodash'; import { isEmpty, min } from 'lodash-es';
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,
@ -114,7 +128,14 @@
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(() => {
@ -125,10 +146,6 @@
return skuPrices; return skuPrices;
}); });
if (!state.goodsInfo.is_sku) {
state.selectedSku = state.goodsInfo.skus[0];
}
watch( watch(
() => state.selectedSku, () => state.selectedSku,
(newVal) => { (newVal) => {
@ -311,6 +328,12 @@
} }
} }
.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;
@ -348,11 +371,6 @@
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"> <view class="ss-user-info-wrap ss-p-t-50" style="z-index: 9999;">
<view class="ss-flex ss-col-center ss-row-between ss-m-b-20"> <view class="ss-flex ss-col-center ss-row-between ">
<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"> <view class="ss-wallet-menu-wrap ss-flex ss-col-center" style="z-index: 9999;">
<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: 160rpx; height: 105rpx;
.menu-title { .menu-title {
font-size: 24rpx; font-size: 24rpx;

119
sheep/hooks/useGoods.js
View File

@ -82,7 +82,10 @@ 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 { type, src }; return {
type,
src,
};
}) || [] }) || []
); );
} }
@ -336,6 +339,27 @@ 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 数组中，转换出商品属性的数组
* *
@ -380,6 +404,99 @@ 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;
}
/** /**
* 格式化满减送活动的规则 * 格式化满减送活动的规则
* *

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: 74px; height: 63px;
border-radius: 10rpx; border-radius: 10rpx;
overflow: hidden; overflow: hidden;
@ -269,6 +269,7 @@
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 {
@ -348,4 +349,10 @@
} }
} }
} }
// .card-right{
// .card-btn{
// width:auto;
// height:auto;
// }
// }
</style> </style>

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

@ -1,483 +1,517 @@
<!-- 自定义导航栏 --> <!-- 自定义导航栏 -->
<template> <template>
<view class="uni-navbar" :class="{ 'uni-dark': dark }"> <view class="uni-navbar" :class="{ 'uni-dark': dark }">
<view <view :class="{
: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">
class="uni-navbar__content" <view class="fixed-bg" :class="[opacity ? '' : opacityBgUi]"></view>
> <su-status-bar v-if="statusBar" :navBg = "navBg" />
<view class="fixed-bg" :class="[opacity ? '' : opacityBgUi]"></view> <view :style="{
<su-status-bar v-if="statusBar" />
<view
:style="{
color: themeColor, color: themeColor,
height: navbarHeight, height: navbarHeight,
background: backgroundColor, background: backgroundColor,
}" }" class="uni-navbar__header">
class="uni-navbar__header" <view v-if="headerBtns != 'headerBtns'" class="uni-navbar__header-btns uni-navbar__header-btns-left"
> :style="{ width: leftIconWidth }">
<view <slot name="left">
class="uni-navbar__header-btns uni-navbar__header-btns-left" <view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
:style="{ width: leftIconWidth }" <view class="icon-box ss-flex">
> <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
<slot name="left"> <text class="sicon-back" v-if="hasHistory" />
<view class="uni-navbar__content_view" v-if="leftIcon.length > 0"> <text class="sicon-home" v-else />
<view class="icon-box ss-flex"> </view>
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft"> <view class="line"></view>
<text class="sicon-back" v-if="hasHistory" /> <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="showMenuTools">
<text class="sicon-home" v-else /> <text class="sicon-more" />
</view> </view>
<view class="line"></view> </view>
<view </view>
class="icon-button icon-button-right ss-flex ss-row-center" <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
@tap="showMenuTools" v-if="
> titleAlign === 'left' &&
<text class="sicon-more" /> title.length &&
</view> sheep.$platform.name !== 'WechatOfficialAccount'
</view> ">
</view> <text :style="{ color: themeColor, fontSize: '18px' }">{{ title }}</text>
<view </view>
:class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" </slot>
class="uni-navbar-btn-text" </view>
v-if=" <!-- <view class="new-view" v-if="headerBtns === 'headerBtns'" @click="onSearch">
titleAlign === 'left' && <image class="new-image" src="https://zysc.fjptzykj.com:3000/shangcheng/e0d70e9bac714465b87d22d19e30f3fb008dbcdea21842674b355340d6dedceb.png"></image>
title.length && </view> -->
sheep.$platform.name !== 'WechatOfficialAccount' <view v-if="tools === 'search'" class=""
" :style="`width:${sheep.$platform.device.windowWidth - sheep.$platform.capsule.width - 37}px;display: flex;align-items: center;`"
> @click="onSearch">
<text :style="{ color: themeColor, fontSize: '18px' }">{{ title }}</text> <slot name="center">
</view> <uni-search-bar class="ss-flex-1 search-box" :radius="20" placeholder="请输入关键词"
</slot> cancelButton="none" v-model="searchModel" @confirm="onSearch" />
</view> </slot>
<view v-if="tools === 'search'" class="ss-flex-1"> </view>
<slot name="center"> <view v-else class="uni-navbar__header-container" @tap="onClickTitle">
<uni-search-bar <slot name="center">
class="ss-flex-1 search-box" <view v-if="tools === 'title' && titleAlign === 'center' && title.length"
:radius="20" class="uni-navbar__header-container-inner">
placeholder="请输入关键词" <text :style="{ color: themeColor, fontSize: '36rpx' }" class="ss-line-1">{{
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 { onLoad } from '@dcloudio/uni-app'; import {
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal'; onLoad
import { computed, ref } from 'vue'; } from '@dcloudio/uni-app';
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({
dark: { navBg: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
modelValue: { dark: {
type: String, type: Boolean,
default: '', default: false,
}, },
title: { headerBtns: {
type: String, type: String,
default: '', default: '',
}, },
titleAlign: { modelValue: {
type: String, type: String,
default: 'center', // left | center default: '',
}, },
rightText: { title: {
type: String, type: String,
default: '', default: '',
}, },
leftIcon: { titleAlign: {
type: String, type: String,
default: 'left', default: 'center', // left | center
}, },
rightIcon: { rightText: {
type: String, type: String,
default: '', default: '',
}, },
fixed: { leftIcon: {
type: [Boolean, String], type: String,
default: true, default: 'left',
}, },
placeholder: { rightIcon: {
type: [Boolean, String], type: String,
default: true, default: '',
}, },
color: { fixed: {
type: String, type: [Boolean, String],
default: '', default: true,
}, },
backgroundColor: { placeholder: {
type: String, type: [Boolean, String],
default: '', default: true,
}, },
opacity: { color: {
type: [Boolean, String], type: String,
default: false, default: '',
}, },
opacityBgUi: { backgroundColor: {
type: String, type: String,
default: 'bg-white', default: '',
}, },
statusBar: { opacity: {
type: [Boolean, String], type: [Boolean, String],
default: false, default: false,
}, },
shadow: { opacityBgUi: {
type: [Boolean, String], type: String,
default: false, default: 'bg-white',
}, },
border: { statusBar: {
type: [Boolean, String], type: [Boolean, String],
default: false, default: false,
}, },
height: { shadow: {
type: [Number, String], type: [Boolean, String],
default: 44, default: false,
}, },
leftWidth: { border: {
type: [Number, String], type: [Boolean, String],
default: 80, default: false,
}, },
rightWidth: { height: {
type: [Number, String], type: [Number, String],
default: 0, default: 44,
}, },
tools: { leftWidth: {
type: String, type: [Number, String],
default: 'title', default: 80,
}, },
defaultSearch: { rightWidth: {
type: String, type: [Number, String],
default: '', default: 0,
}, },
}); 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) {
emits('search', e.value); sheep.$router.go('/pages/index/search');
} // 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() {
showMenuTools(); function onClickRight() {
} 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;
}
}
}
$nav-height: 44px; .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;
.fixed-bg { .line {
position: absolute; width: 2rpx;
width: 100%; height: 24rpx;
height: 100%; background: #e5e5e7;
top: 0; }
z-index: 1;
pointer-events: none;
}
.uni-nav-bar-text { .sicon-back {
/* #ifdef APP-PLUS */ font-size: 32rpx;
font-size: 34rpx; color: #000;
/* #endif */ }
/* #ifndef APP-PLUS */
font-size: 14px;
/* #endif */
}
.uni-nav-bar-right-text { .sicon-home {
font-size: 12px; font-size: 32rpx;
} color: #000;
}
.uni-navbar__content { .sicon-more {
position: relative; font-size: 32rpx;
// background-color: #fff; color: #000;
// box-sizing: border-box; }
background-color: transparent;
}
.uni-navbar__content_view { .icon-button {
// box-sizing: border-box; width: 67rpx;
} height: 56rpx;
.uni-navbar-btn-text { &-left:hover {
/* #ifndef APP-NVUE */ background: rgba(0, 0, 0, 0.16);
display: flex; border-radius: 30rpx 0px 0px 30rpx;
/* #endif */ }
flex-direction: column;
justify-content: flex-start;
align-items: center;
line-height: 18px;
}
.uni-navbar__header { &-right:hover {
/* #ifndef APP-NVUE */ background: rgba(0, 0, 0, 0.16);
display: flex; border-radius: 0px 30rpx 30rpx 0px;
/* #endif */ }
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 { $nav-height: 44px;
/* #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 */
}
.uni-navbar__header-btns-left { .fixed-bg {
/* #ifndef APP-NVUE */ position: absolute;
display: flex; width: 100%;
/* #endif */ height: 100%;
width: 120rpx; top: 0;
justify-content: flex-start; z-index: 1;
align-items: center; pointer-events: none;
} }
.uni-navbar__header-btns-right { .uni-nav-bar-text {
/* #ifndef APP-NVUE */ /* #ifdef APP-PLUS */
display: flex; font-size: 34rpx;
/* #endif */ /* #endif */
flex-direction: row; /* #ifndef APP-PLUS */
// width: 150rpx; font-size: 14px;
// padding-right: 30rpx; /* #endif */
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 { .uni-nav-bar-right-text {
/* #ifndef APP-NVUE */ font-size: 12px;
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 { .uni-navbar__content {
height: $nav-height; position: relative;
} // background-color: #fff;
// box-sizing: border-box;
background-color: transparent;
}
.uni-navbar--fixed { .uni-navbar__content_view {
position: fixed; // box-sizing: border-box;
z-index: 998; }
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
/* #ifndef H5 */
left: 0;
right: 0;
/* #endif */
}
.uni-navbar--shadow { .uni-navbar-btn-text {
box-shadow: 0 1px 6px #ccc; /* #ifndef APP-NVUE */
} display: flex;
/* #endif */
flex-direction: column;
justify-content: flex-start;
align-items: center;
line-height: 18px;
}
.uni-navbar--border { .uni-navbar__header {
border-bottom-width: 1rpx; /* #ifndef APP-NVUE */
border-bottom-style: solid; display: flex;
border-bottom-color: #eee; /* #endif */
} padding: 0 10px;
flex-direction: row;
// justify-content: space-between;
height: $nav-height;
font-size: 12px;
position: relative;
z-index: 2;
}
.uni-ellipsis-1 { .uni-navbar__header-btns {
overflow: hidden; /* #ifndef APP-NVUE */
/* #ifndef APP-NVUE */ overflow: hidden;
white-space: nowrap; display: flex;
text-overflow: ellipsis; /* #endif */
/* #endif */ flex-wrap: nowrap;
/* #ifdef APP-NVUE */ flex-direction: row;
lines: 1; // min-width: 120rpx;
text-overflow: ellipsis; min-width: 40rpx;
/* #endif */ // padding: 0 6px;
} justify-content: center;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
// 暗主题配置 .uni-navbar__header-btns-left {
.uni-dark { /* #ifndef APP-NVUE */
} display: flex;
/* #endif */
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> </style>

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

@ -1,16 +1,26 @@
<!-- 自定义状态栏 --> <!-- 自定义状态栏 -->
<template> <template>
<view :style="{ height: statusBarHeight }" class="uni-status-bar"><slot /></view> <view :style="{ height: statusBarHeight }" class="uni-status-bar" :class="navBg? 'ss' : ''">
<slot />
</view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
const props = defineProps({
const statusBarHeight = sheep.$platform.device.statusBarHeight + 'px'; navBg: {
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 {
background: rgba(248, 83, 42);
}
</style> </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: 36px; $uni-searchbar-height: 31px;
.uni-searchbar { .uni-searchbar {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */