我的 优惠券和积分数据 积分列表 售后订单列表 售后订单详情 隐藏手机号绑定弹窗

pull/23/head
落日晚风 2023-12-07 17:53:34 +08:00
commit 39692952f0
25 changed files with 841 additions and 430 deletions

20
.env Normal file
View File

@ -0,0 +1,20 @@
# 版本号
SHOPRO_VERSION = v1.8.3
# 正式环境接口域名
SHOPRO_BASE_URL = https://api.shopro.sheepjs.com
# 开发环境接口域名
SHOPRO_DEV_BASE_URL = https://api.shopro.sheepjs.com
# 开发环境运行端口
SHOPRO_DEV_PORT = 3000
# 接口地址前缀
SHOPRO_API_PATH = /shop/api/
# 客户端静态资源地址 空=默认使用服务端指定的CDN资源地址前缀 | local=本地 | http(s)://xxx.xxx=自定义静态资源地址前缀
SHOPRO_STATIC_URL = https://file.sheepjs.com
# 是否开启直播 1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启)
SHOPRO_MPLIVE_ON = 0

View File

@ -3,13 +3,13 @@
title="我的" title="我的"
tabbar="/pages/index/user" tabbar="/pages/index/user"
navbar="custom" navbar="custom"
:bgStyle="template.style?.background" :bgStyle="template.page"
:navbarStyle="template.style?.navbar" :navbarStyle="template.style?.navbar"
onShareAppMessage onShareAppMessage
:showFloatButton="true" :showFloatButton="true"
> >
<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style"> <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
<s-block-item :type="item.type" :data="item.data" :styles="item.style" /> <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block> </s-block>
</s-layout> </s-layout>
</template> </template>

37
sheep/api/product/spu.js Normal file
View File

@ -0,0 +1,37 @@
import request from '@/sheep/request';
const SpuApi = {
// 获得商品 SPU 列表
getSpuList: (recommendType) => {
return request({
url: '/app-api/product/spu/list',
method: 'GET',
params: {recommendType},
});
},
// 获得商品 SPU 列表
getSpuListByIds: (ids) => {
return request({
url: '/app-api/product/spu/list-by-ids',
method: 'GET',
params: {ids},
});
},
// 获得商品 SPU 分页
getSpuPage: (data) => {
return request({
url: '/app-api/product/spu/page',
method: 'GET',
data
});
},
// 查询商品
getSpuDetail: (id) => {
return request({
url: '/app-api/product/spu/get-detail',
method: 'GET',
params: { id },
});
}
};
export default SpuApi;

View File

@ -0,0 +1,12 @@
import request from '@/sheep/request';
export default {
// 获得文章详情
getArticle: (id) => {
return request({
url: '/app-api/promotion/article/get',
method: 'GET',
params: { id }
});
}
}

View File

@ -0,0 +1,67 @@
import request2 from "@/sheep/request2";
// 拼团 API
const CombinationApi = {
// 获得拼团活动列表
getCombinationActivityList: (count) => {
return request2({
url: "promotion/combination-activity/list",
method: 'GET',
params: {count}
});
},
// 获得拼团活动分页
getCombinationActivityPage: (params) => {
return request2({
url: "promotion/combination-activity/page",
method: 'GET',
params
});
},
// 获得拼团活动明细
getCombinationActivity: (id) => {
return request2({
url: "promotion/combination-activity/get-detail",
method: 'GET',
params: {
id
}
});
},
// 获得最近 n 条拼团记录(团长发起的)
getHeadCombinationRecordList: (activityId, status, count) => {
return request2({
url: "promotion/combination-record/get-head-list",
method: 'GET',
params: {
activityId,
status,
count
}
});
},
// 获得拼团记录明细
getCombinationRecordDetail: (id) => {
return request2({
url: "promotion/combination-record/get-detail",
method: 'GET',
params: {
id
}
});
},
// 获得拼团记录的概要信息
getCombinationRecordSummary: () => {
return request2({
url: "promotion/combination-record/get-summary",
method: 'GET',
});
}
}
export default CombinationApi

View File

@ -0,0 +1,12 @@
import request from '@/sheep/request';
export default {
// 获得优惠劵模板列表
getCouponTemplateListByIds: (ids) => {
return request({
url: '/app-api/promotion/coupon-template/list-by-ids',
method: 'GET',
params: { ids }
});
}
}

View File

@ -0,0 +1,33 @@
import request2 from "@/sheep/request2";
const SeckillApi = {
// 获得秒杀时间段列表
getSeckillConfigList: () => {
return request2({ url: 'promotion/seckill-config/list', method: 'GET' });
},
// 获得当前秒杀活动
getNowSeckillActivity: () => {
return request2({ url: 'promotion/seckill-activity/get-now', method: 'GET' });
},
// 获得秒杀活动分页
getSeckillActivityPage: () => {
return request2({ url: 'promotion/seckill-activity/page', method: 'GET' });
},
/**
* 获得秒杀活动明细
* @param {number} id 秒杀活动编号
* @return {*}
*/
getSeckillActivity: (id) => {
return request2({
url: 'promotion/seckill-activity/get-detail',
method: 'GET',
params: { id }
});
}
}
export default SeckillApi;

View File

@ -18,40 +18,40 @@
<!-- 基础组件标题栏 --> <!-- 基础组件标题栏 -->
<s-title-block v-if="type === 'titleBlock'" :data="data" :styles="styles" /> <s-title-block v-if="type === 'titleBlock'" :data="data" :styles="styles" />
<!-- 图文组件广告魔方 --> <!-- 图文组件广告魔方 -->
<s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" /> <s-image-cube v-if="type === 'MagicCube'" :data="data" :styles="styles" />
<!-- 图文组件视频播放 --> <!-- 图文组件视频播放 -->
<s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" /> <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
<!-- 基础组件辅助线 --> <!-- 基础组件分割线 -->
<s-line-block v-if="type === 'lineBlock'" :data="data" /> <s-line-block v-if="type === 'Divider'" :data="data" />
<!-- 图文组件富文字 -->
<s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles" />
<!-- 图文组件热区 --> <!-- 图文组件热区 -->
<s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" /> <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" />
<!-- 商品组件商品卡片 --> <!-- 商品组件商品卡片 -->
<s-goods-card v-if="type === 'goodsCard'" :data="data" :styles="styles" /> <s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
<!-- 商品组件商品栏 --> <!-- 商品组件商品栏 -->
<s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" /> <s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />
<!-- 营销组件拼团 --> <!-- 营销组件拼团 -->
<s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" /> <s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
<!-- 营销组件秒杀 --> <!-- 营销组件秒杀 -->
<s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles" /> <s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
<!-- 营销组件积分商城 --> <!-- 营销组件积分商城模式不一样无法适配 -->
<s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" /> <s-score-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 === 'coupon'" :data="data" :styles="styles" /> <s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />
<!-- 营销组件文章 -->
<s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" />
<!-- 会员组件会员卡片 --> <!-- 用户组件用户卡片 -->
<s-user-card v-if="type === 'userCard'" /> <s-user-card v-if="type === 'UserCard'" />
<!-- 会员组件订单卡片 --> <!-- 用户组件用户订单 -->
<s-order-card v-if="type === 'orderCard'" :data="data" /> <s-order-card v-if="type === 'UserOrder'" :data="data" />
<!-- 会员组件资产卡片 --> <!-- 用户组件用户资产 -->
<s-wallet-card v-if="type === 'walletCard'" /> <s-wallet-card v-if="type === 'UserWallet'" />
<!-- 会员组件卡券卡片 --> <!-- 用户组件用户卡券 -->
<s-coupon-card v-if="type === 'couponCard'" /> <s-coupon-card v-if="type === 'UserCoupon'" />
</view> </view>
</template> </template>

View File

@ -1,126 +1,54 @@
<!-- 优惠券组 --> <!-- 优惠券组 -->
<template> <template>
<view> <scroll-view class="scroll-box" scroll-x scroll-anchoring>
<!-- 样式1 --> <view class="coupon-box ss-flex">
<view class="lg-coupon-wrap" v-if="mode == 1"> <view
<scroll-view class="scroll-box" scroll-x scroll-anchoring> class="coupon-item"
<view class="coupon-box ss-flex"> :style="[couponBg, { marginLeft: `${data.space}px` }]"
<view v-for="(item, index) in couponList"
class="coupon-item" :key="index"
:style="[couponBg, { marginLeft: data.space + 'px' }]" >
v-for="(item, index) in couponList" <su-coupon
:key="index" :size="SIZE_LIST[columns - 1]"
> :textColor="data.textColor"
<su-coupon background=""
size="lg" :couponId="item.id"
:textColor="data.fill.color" :title="item.name"
background="" :type="formatCouponDiscountType(item)"
:couponId="item.id" :value="formatCouponDiscountValue(item)"
:title="item.amount_text" :sellBy="formatValidityType(item)"
:value="item.amount" >
:surplus="item.stock" <template v-slot:btn>
:type="item.type" <!-- 两列时领取按钮坚排 -->
:sellBy="`${item.get_start_time.substring(0, 10)}${item.get_end_time.substring( <button
0, v-if="columns === 2"
10, @click.stop="onGetCoupon(item.id)"
)}`" class="ss-reset-button card-btn vertical"
:style="[btnStyles]"
> >
<template v-slot:btn> <view class="btn-text">立即领取</view>
<button </button>
class="ss-reset-button card-btn" <button
:style="[btnStyles]" v-else
@click.stop="onGetCoupon(item.id)" class="ss-reset-button card-btn"
> :style="[btnStyles]"
{{ item.get_status_text }} @click.stop="onGetCoupon(item.id)"
</button>
</template>
</su-coupon>
</view>
</view>
</scroll-view>
</view>
<!-- 样式2 -->
<view class="md-coupon-wrap" v-if="mode == 2">
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
<view class="coupon-box ss-flex">
<view
class="coupon-item"
:style="[couponBg, { marginLeft: data.space + 'px' }]"
v-for="(item, index) in couponList"
:key="index"
>
<su-coupon
size="md"
:textColor="data.fill.color"
background=""
:title="item.amount_text"
:value="item.amount"
:surplus="item.stock"
:couponId="item.id"
:type="item.type"
:sellBy="`${item.get_start_time.substring(0, 10)}${item.get_end_time.substring(
0,
10,
)}`"
> >
<template v-slot:btn> 立即领取
<button </button>
@click.stop="onGetCoupon(item.id)" </template>
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" </su-coupon>
:style="[btnStyles]" </view>
>
<view class="btn-text">{{ item.get_status_text }}</view>
</button>
</template>
</su-coupon>
</view>
</view>
</scroll-view>
</view> </view>
<!-- 样式3 --> </scroll-view>
<view class="xs-coupon-wrap" v-if="mode == 3">
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
<view class="coupon-box ss-flex">
<view
class="coupon-item"
:style="[couponBg, { marginLeft: data.space + 'px' }]"
v-for="(item, index) in couponList"
:key="index"
>
<su-coupon
size="xs"
:textColor="data.fill.color"
background=""
:title="item.amount_text"
:value="item.amount"
:surplus="item.stock"
:couponId="item.id"
:type="item.type"
:sellBy="`${item.get_start_time.substring(0, 10)}${item.get_end_time.substring(
0,
10,
)}`"
>
<template v-slot:btn>
<button
class="ss-reset-button card-btn"
:style="[btnStyles]"
@click.stop="onGetCoupon(item.id)"
>
{{ item.get_status_text }}
</button>
</template>
</su-coupon>
</view>
</view>
</scroll-view>
</view>
</view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import TemplateApi from '@/sheep/api/promotion/coupon';
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import {CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum} from "@/sheep/util/const";
import {floatToFixed2, formatDate} from "@/sheep/util";
const props = defineProps({ const props = defineProps({
data: { data: {
@ -132,14 +60,48 @@
default: () => ({}), default: () => ({}),
}, },
}); });
const { mode, button } = props.data; const { columns, button } = props.data;
const SIZE_LIST = ['lg', 'md', 'xs']
const couponBg = { const couponBg = {
background: `url(${sheep.$url.cdn(props.data.fill.bgImage)}) no-repeat top center / 100% 100%`, background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
}; };
const btnStyles = { const btnStyles = {
background: button.bgColor, background: button.bgColor,
color: button.color, color: button.color,
}; };
//
const formatCouponDiscountType = (coupon) => {
if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
return 'reduce'
}
if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
return 'percent'
}
return `未知【${coupon.discountType}`
}
//
const formatCouponDiscountValue = (coupon) => {
if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
return floatToFixed2(coupon.discountPrice)
}
if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
return coupon.discountPercent
}
return `未知【${coupon.discountType}`
}
//
const formatValidityType = (row) => {
if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
return `${formatDate(row.validStartTime)}${formatDate(row.validEndTime)}`
}
if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
}
return '未知【' + row.validityType + '】'
}
const couponList = ref([]); const couponList = ref([]);
// //
async function onGetCoupon(id) { async function onGetCoupon(id) {
@ -149,15 +111,16 @@
title: msg, title: msg,
icon: 'none', icon: 'none',
}); });
} else { return
let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') });
couponList.value = [...data.data];
} }
await getCouponTemplateList()
} }
onMounted(async () => { const getCouponTemplateList = async () => {
let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') }); const { data } = await TemplateApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
// couponList.value = [...data.data, ...data.data, ...data.data, ...data.data]; couponList.value = data;
couponList.value = [...data.data]; }
onMounted(() => {
getCouponTemplateList()
}); });
</script> </script>
@ -168,25 +131,21 @@
border-radius: 25rpx; border-radius: 25rpx;
font-size: 24rpx; font-size: 24rpx;
line-height: 50rpx; line-height: 50rpx;
&.vertical {
width: 50rpx;
height: 140rpx;
margin: auto 20rpx auto 0;
.btn-text {
font-size: 24rpx;
text-align: center;
writing-mode: vertical-lr;
}
}
} }
.coupon-item { .coupon-item {
&:nth-of-type(1) { &:nth-of-type(1) {
margin-left: 0 !important; margin-left: 0 !important;
} }
} }
.md-coupon-wrap {
.card-btn {
width: 50rpx;
height: 140rpx;
margin: auto 0;
margin-right: 20rpx;
.btn-text {
font-size: 24rpx;
text-align: center;
writing-mode: vertical-lr;
writing-mode: tb-lr;
}
}
}
</style> </style>

View File

@ -1,8 +1,8 @@
<template> <template>
<!-- 商品卡片 --> <!-- 商品卡片 -->
<view> <view>
<!-- 1 100%宽卡片列表--> <!-- 布局1. 单列大图上图下内容-->
<view v-if="mode === 1 && state.goodsList.length" class="goods-sl-box"> <view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
<view <view
class="goods-box" class="goods-box"
v-for="item in state.goodsList" v-for="item in state.goodsList"
@ -12,27 +12,28 @@
<s-goods-column <s-goods-column
class="" class=""
size="sl" size="sl"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="data.badge"
:data="item" :data="item"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:subTitleColor="goodsFields.subtitle.color" :subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
> >
<!-- 购买按钮 -->
<template v-slot:cart> <template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }} {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
</view> </view>
</view> </view>
<!-- 2 双列瀑布流列表--> <!-- 布局2. 双列每一列上图下内容-->
<view <view
v-if="mode === 2 && state.goodsList.length" v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.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="goods-list-box">
@ -45,20 +46,21 @@
<s-goods-column <s-goods-column
class="goods-md-box" class="goods-md-box"
size="md" size="md"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="data.badge"
:data="item" :data="item"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:subTitleColor="goodsFields.subtitle.color" :subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight" :titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'left')" @getHeight="calculateGoodsColumn($event, 'left')"
> >
<!-- 购买按钮 -->
<template v-slot:cart> <template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }} {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
@ -74,20 +76,21 @@
<s-goods-column <s-goods-column
class="goods-md-box" class="goods-md-box"
size="md" size="md"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="data.badge"
:data="item" :data="item"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:subTitleColor="goodsFields.subtitle.color" :subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight" :titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'right')" @getHeight="calculateGoodsColumn($event, 'right')"
> >
<!-- 购买按钮 -->
<template v-slot:cart> <template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }} {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
@ -95,8 +98,8 @@
</view> </view>
</view> </view>
<!-- 3 30%卡片列表--> <!-- 布局3. 单列小图左图右内容 -->
<view v-if="mode === 3 && state.goodsList.length" class="goods-lg-box"> <view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
<view <view
class="goods-box" class="goods-box"
:style="[{ marginBottom: data.space + 'px' }]" :style="[{ marginBottom: data.space + 'px' }]"
@ -106,18 +109,19 @@
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="lg" size="lg"
:goodsFields="goodsFields" :goodsFields="data.fields"
:data="item" :data="item"
:tagStyle="tagStyle" :tagStyle="data.badge"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:subTitleColor="goodsFields.subtitle.color" :subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })" @tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
> >
<!-- 购买按钮 -->
<template v-slot:cart> <template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }} {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
@ -128,11 +132,21 @@
<script setup> <script setup>
/** /**
* 商品模板装修商品卡片 * 商品卡片
* @description style 1:带tab 2瀑布流横向两个上图下内容 3大图横向一个
*/ */
import { computed, reactive, onMounted } from 'vue'; import { computed, reactive, onMounted } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
//
const LayoutTypeEnum = {
//
ONE_COL_BIG_IMG: 'oneColBigImg',
//
TWO_COL: 'twoCol',
//
ONE_COL_SMALL_IMG: 'oneColSmallImg',
}
const state = reactive({ const state = reactive({
goodsList: [], goodsList: [],
@ -150,55 +164,76 @@
}, },
}); });
const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data ?? {}; const { layoutType, btnBuy, spuIds } = props.data ?? {};
const { marginLeft, marginRight } = props.styles ?? {}; const { marginLeft, marginRight } = props.styles ?? {};
async function getGoodsListByIds(ids) { //
let { data } = await sheep.$api.goods.ids({ ids }); const buyStyle = computed(() => {
return data; if (btnBuy.type === 'text') {
} // 线
return {
onMounted(async () => { background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
state.goodsList = await getGoodsListByIds(goodsIds.join(',')); };
if (mode === 2) { }
mountMasonry(); if (btnBuy.type === 'img') {
//
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
} }
}); });
// //region
//
let count = 0; let count = 0;
//
let leftHeight = 0; let leftHeight = 0;
//
let rightHeight = 0; let rightHeight = 0;
function mountMasonry(height = 0, where = 'left') { /**
* 计算商品在左列还是右列
* @param height 商品的高度
* @param where 添加到哪一列
*/
function calculateGoodsColumn(height = 0, where = 'left') {
//
if (!state.goodsList[count]) return; if (!state.goodsList[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.leftGoodsList.push(state.goodsList[count]); state.leftGoodsList.push(state.goodsList[count]);
} else { } else {
state.rightGoodsList.push(state.goodsList[count]); state.rightGoodsList.push(state.goodsList[count]);
} }
//
count++; count++;
} }
//endregion
// /**
const buyStyle = computed(() => { * 根据商品编号列表获取商品列表
if (buyNowStyle.mode == 1) { * @param ids 商品编号列表
// button * @return {Promise<undefined>} 商品列表
return { */
background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`, async function getGoodsListByIds(ids) {
}; const { data } = await SpuApi.getSpuListByIds(ids);
} return data;
}
if (buyNowStyle.mode == 2) { //
// image onMounted(async () => {
return { //
width: '54rpx', state.goodsList = await getGoodsListByIds(spuIds.join(','));
height: '54rpx', //
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`, if (layoutType === LayoutTypeEnum.TWO_COL){
backgroundSize: '100% 100%', //
}; calculateGoodsColumn();
} }
}); });
</script> </script>

View File

@ -9,19 +9,19 @@
@tap="onClick" @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)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image class="xs-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFit"></image> <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
<view <view
v-if="goodsFields.title?.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"
> >
<view <view
v-if="goodsFields.title?.show" v-if="goodsFields.title?.show || goodsFields.name?.show"
class="xs-goods-title ss-line-1" class="xs-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
> >
{{ data.title }} {{ data.title || data.name }}
</view> </view>
<view <view
v-if="goodsFields.price?.show" v-if="goodsFields.price?.show"
@ -37,17 +37,17 @@
<!-- sm卡片竖向紧凑一行放三个图上内容下 --> <!-- sm卡片竖向紧凑一行放三个图上内容下 -->
<view v-if="size === 'sm'" class="sm-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick"> <view v-if="size === 'sm'" class="sm-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)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image class="sm-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFill"></image> <image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
<view <view
v-if="goodsFields.title?.show || goodsFields.price?.show" v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="sm-goods-content" class="sm-goods-content"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
> >
<view v-if="goodsFields.title?.show" class="sm-goods-title ss-line-1 ss-m-b-16"> <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sm-goods-title ss-line-1 ss-m-b-16">
{{ data.title }} {{ data.title || data.name }}
</view> </view>
<view <view
v-if="goodsFields.price?.show" v-if="goodsFields.price?.show"
@ -63,26 +63,26 @@
<!-- 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)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image class="md-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="widthFix"></image> <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
<view <view
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
:id="elId" :id="elId"
> >
<view <view
v-if="goodsFields.title?.show" v-if="goodsFields.title?.show || goodsFields.name?.show"
class="md-goods-title ss-line-1" class="md-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
> >
{{ data.title||data.name }} {{ data.title || data.name }}
</view> </view>
<view <view
v-if="goodsFields.subtitle?.show" v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="md-goods-subtitle ss-m-t-16 ss-line-1" class="md-goods-subtitle ss-m-t-16 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]" :style="[{ color: subTitleColor, background: subTitleBackground }]"
> >
{{ data.subtitle }} {{ data.subtitle || data.introduction }}
</view> </view>
<slot name="activity"> <slot name="activity">
<view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center"> <view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
@ -135,28 +135,28 @@
@tap="onClick" @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)"></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>
<image class="lg-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="aspectFill"></image> <image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" 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 ss-p-t-20">
<view> <view>
<view <view
v-if="goodsFields.title?.show" v-if="goodsFields.title?.show || goodsFields.name?.show"
class="lg-goods-title ss-line-2" class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]" :style="[{ color: titleColor }]"
> >
{{ data.title||data.name }} {{ data.title || data.name }}
</view> </view>
<view <view
v-if="goodsFields.subtitle?.show" v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="lg-goods-subtitle ss-m-t-10 ss-line-1" class="lg-goods-subtitle ss-m-t-10 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]" :style="[{ color: subTitleColor, background: subTitleBackground }]"
> >
{{ data.subtitle }} {{ data.subtitle || data.introduction }}
</view> </view>
</view> </view>
<view> <view>
@ -201,26 +201,26 @@
<!-- 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)"></image> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<image class="sl-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="aspectFill"></image> <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
<view class="sl-goods-content"> <view class="sl-goods-content">
<view> <view>
<view <view
v-if="goodsFields.title?.show" v-if="goodsFields.title?.show || goodsFields.name?.show"
class="sl-goods-title ss-line-1" class="sl-goods-title ss-line-1"
:style="[{ color: titleColor }]" :style="[{ color: titleColor }]"
> >
{{ data.title||data.name }} {{ data.title || data.name }}
</view> </view>
<view <view
v-if="goodsFields.subtitle?.show" v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="sl-goods-subtitle ss-m-t-16" class="sl-goods-subtitle ss-m-t-16"
:style="[{ color: subTitleColor, background: subTitleBackground }]" :style="[{ color: subTitleColor, background: subTitleBackground }]"
> >
{{ data.subtitle }} {{ data.subtitle || data.introduction }}
</view> </view>
</view> </view>
<view> <view>
@ -307,12 +307,25 @@
type: [Array, Object], type: [Array, Object],
default() { default() {
return { return {
//
title: { show: true }, title: { show: true },
//
subtitle: { show: true }, subtitle: { show: true },
//
price: { show: true }, price: { show: true },
//
original_price: { show: true }, original_price: { show: true },
//
sales: { show: true }, sales: { show: true },
//
stock: { show: true }, stock: { show: true },
//
name: { show: true },
//
introduction: { show: true },
//
marketPrice: { show: true },
//
salesCount: { show: true }, salesCount: { show: true },
}; };
}, },

View File

@ -1,8 +1,8 @@
<template> <template>
<view> <view>
<!-- 1 两张图片并排 图片坐文案右 --> <!-- 布局1. 两列商品图片左文案右 -->
<view <view
v-if="mode === 1" v-if="layoutType === 'twoCol'"
class="goods-xs-box ss-flex ss-flex-wrap" class="goods-xs-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]" :style="[{ margin: '-' + data.space + 'rpx' }]"
> >
@ -19,10 +19,10 @@
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="xs" size="xs"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="data.badge"
:data="item" :data="item"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
:titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2" :titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
@ -30,9 +30,9 @@
></s-goods-column> ></s-goods-column>
</view> </view>
</view> </view>
<!-- 2 三张商品卡片并排 图片上文案下 --> <!-- 布局. 三列商品图片上文案下 -->
<view <view
v-if="mode === 2" v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap" class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]" :style="[{ margin: '-' + data.space + 'rpx' }]"
> >
@ -49,10 +49,10 @@
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="sm" size="sm"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="data.badge"
:data="item" :data="item"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@ -60,8 +60,8 @@
</view> </view>
</view> </view>
<!-- 3 商品卡片并排 轮播 --> <!-- 布局3. 一行商品水平滑动 -->
<view v-if="mode === 3" class=""> <view v-if="layoutType === 'horizSwiper'" class="">
<scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring> <scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
<view class="goods-box ss-flex"> <view class="goods-box ss-flex">
<view <view
@ -73,10 +73,10 @@
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="sm" size="sm"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="data.badge"
:data="item" :data="item"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3" :titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
></s-goods-column> ></s-goods-column>
@ -89,12 +89,11 @@
<script setup> <script setup>
/** /**
* 商品栏s-goods-column * 商品栏
*
* @description style 1:横向两个左图右内容 2横向三个上图下内容 3左右滚动
*/ */
import { onMounted, ref } from 'vue'; import { onMounted, ref, computed } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import SpuApi from "@/sheep/api/product/spu";
const props = defineProps({ const props = defineProps({
data: { data: {
@ -106,12 +105,12 @@
default() {}, default() {},
}, },
}); });
const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data; const { layoutType, spuIds } = props.data;
let { marginLeft, marginRight } = props.styles; let { marginLeft, marginRight } = props.styles;
const goodsList = ref([]); const goodsList = ref([]);
onMounted(async () => { onMounted(async () => {
if (goodsIds.length > 0) { if (spuIds.length > 0) {
let { data } = await sheep.$api.goods.ids({ ids: goodsIds.join(',') }); let { data } = await SpuApi.getSpuListByIds(spuIds.join(','));
goodsList.value = data; goodsList.value = data;
} }
}); });

View File

@ -2,13 +2,13 @@
<template> <template>
<view> <view>
<view <view
v-if="mode === 1" v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap" class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]" :style="[{ margin: '-' + data.space + 'rpx' }]"
> >
<view <view
v-for="item in goodsList" v-for="product in productList"
:key="item.id" :key="product.id"
class="goods-card-box" class="goods-card-box"
:style="[ :style="[
{ {
@ -19,15 +19,15 @@
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="sm" size="sm"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="tagStyle"
:data="item" :data="product"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click=" @click="
sheep.$router.go('/pages/goods/groupon', { sheep.$router.go('/pages/goods/groupon', {
id: item.id, id: product.id,
activity_id: props.data.activityId, activity_id: props.data.activityId,
}) })
" "
@ -35,33 +35,33 @@
</view> </view>
</view> </view>
<!-- 样式2 一行一个 图片左 文案右 --> <!-- 样式2 一行一个 图片左 文案右 -->
<view class="goods-box" v-if="mode == 2"> <view class="goods-box" v-if="layoutType === 'oneCol'">
<view <view
class="goods-list" class="goods-list"
v-for="(item, index) in goodsList" v-for="(product, index) in productList"
:key="index" :key="index"
:style="[{ marginBottom: space + 'px' }]" :style="[{ marginBottom: space + 'px' }]"
> >
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="lg" size="lg"
:includes="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="tagStyle"
:data="item" :data="product"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:subTitleColor="goodsFields.subtitle.color" :subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click=" @click="
sheep.$router.go('/pages/goods/groupon', { sheep.$router.go('/pages/goods/groupon', {
id: item.id, id: product.id,
activity_id: props.data.activityId, activity_id: props.data.activityId,
}) })
" "
> >
<template v-slot:cart> <template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }} {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
@ -73,13 +73,11 @@
<script setup> <script setup>
/** /**
* 拼团 * 拼团
*
* @property {Array} list - 商品列表
*
*
*/ */
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import SpuApi from "@/sheep/api/product/spu";
import CombinationApi from "@/sheep/api/promotion/combination";
// //
const props = defineProps({ const props = defineProps({
@ -93,32 +91,34 @@
}, },
}); });
let { mode, tagStyle, buyNowStyle, goodsFields, space } = props.data; let { layoutType, tagStyle, btnBuy, space } = props.data;
let { marginLeft, marginRight } = props.styles; let { marginLeft, marginRight } = props.styles;
// //
const buyStyle = computed(() => { const buyStyle = computed(() => {
let buyNowStyle = props.data.buyNowStyle; let btnBuy = props.data.btnBuy;
if (buyNowStyle.mode == 1) { if (btnBuy?.type === 'text') {
return { return {
background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`, background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
}; };
} }
if (buyNowStyle.mode == 2) { if (btnBuy?.type === 'img') {
return { return {
width: '54rpx', width: '54rpx',
height: '54rpx', height: '54rpx',
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`, background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
}; };
} }
}); });
const goodsList = ref([]); const productList = ref([]);
onMounted(async () => { onMounted(async () => {
let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId }); // todo@owen Yudao
goodsList.value = data; const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
productList.value = [spu];
}); });
</script> </script>

View File

@ -3,10 +3,10 @@
<view v-for="(item, index) in data.list" :key="index"> <view v-for="(item, index) in data.list" :key="index">
<view <view
class="cube-img-wrap" class="cube-img-wrap"
:style="[parseImgStyle(item), { margin: data.space + 'rpx' }]" :style="[parseImgStyle(item), { margin: data.space + 'px' }]"
@tap="sheep.$router.go(item.url)" @tap="sheep.$router.go(item.url)"
> >
<image class="cube-img" :src="sheep.$url.cdn(item.src)" mode="aspectFill"></image> <image class="cube-img" :src="sheep.$url.cdn(item.imgUrl)" mode="aspectFill"></image>
</view> </view>
</view> </view>
</view> </view>
@ -49,7 +49,7 @@
const cell = computed(() => { const cell = computed(() => {
return ( return (
(windowWidth - (windowWidth -
(props.styles.marginLeft + props.styles.marginRight + props.styles.padding * 2)) / ((props.styles.marginLeft || 0) + (props.styles.marginRight || 0) + (props.styles.padding || 0) * 2)) /
4 4
); );
}); });

View File

@ -1,12 +1,12 @@
<template> <template>
<su-subline :color="data.lineColor" :lineStyle="data.style"></su-subline> <su-subline v-bind="data"></su-subline>
</template> </template>
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default() {}, default: {},
}, },
}); });
</script> </script>

View File

@ -15,7 +15,7 @@
</template> </template>
<script setup> <script setup>
import { reactive, onMounted } from 'vue'; import { reactive, onMounted } from 'vue';
import sheep from '@/sheep'; import ArticleApi from '@/sheep/api/promotion/article';
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
@ -30,9 +30,7 @@
content: '', content: '',
}); });
onMounted(async () => { onMounted(async () => {
const { error, data } = await sheep.$api.data.richtext(props.data.id); const { data } = await ArticleApi.getArticle(props.data.id);
if (error === 0) { state.content = data.content;
state.content = data.content;
}
}); });
</script> </script>

View File

@ -1,14 +1,15 @@
<!-- 装修组件 - 秒杀 --> <!-- 装修组件 - 秒杀 -->
<template> <template>
<view> <view>
<!-- 样式一三列 - 上图下文 -->
<view <view
v-if="mode === 1" v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap" class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]" :style="[{ margin: '-' + data.space + 'rpx' }]"
> >
<view <view
v-for="item in goodsList" v-for="product in productList"
:key="item.id" :key="product.id"
class="goods-card-box" class="goods-card-box"
:style="[ :style="[
{ {
@ -19,49 +20,49 @@
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="sm" size="sm"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="tagStyle"
:data="item" :data="product"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click=" @click="
sheep.$router.go('/pages/goods/seckill', { sheep.$router.go('/pages/goods/seckill', {
id: item.id, id: product.id,
activity_id: props.data.activityId, activity_id: props.data.activityId,
}) })
" "
></s-goods-column> ></s-goods-column>
</view> </view>
</view> </view>
<!-- 样式2 --> <!-- 样式一列 - 左图右文 -->
<view class="goods-box" v-if="mode == 2"> <view class="goods-box" v-if="layoutType === 'oneCol'">
<view <view
class="goods-list" class="goods-list"
v-for="(item, index) in goodsList" v-for="(product, index) in productList"
:key="index" :key="index"
:style="[{ marginBottom: space + 'px' }]" :style="[{ marginBottom: space + 'px' }]"
> >
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="lg" size="lg"
:includes="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="tagStyle"
:data="item" :data="product"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:subTitleColor="goodsFields.subtitle.color" :subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click=" @click="
sheep.$router.go('/pages/goods/seckill', { sheep.$router.go('/pages/goods/seckill', {
id: item.id, id: product.id,
activity_id: props.data.activityId, activity_id: props.data.activityId,
}) })
" "
> >
<template v-slot:cart> <template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }} {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
@ -72,14 +73,14 @@
<script setup> <script setup>
/** /**
* 秒杀 * 秒杀商品列表
*
* @property {Array} list - 商品列表
*
* *
* @property {Array} list 商品列表
*/ */
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import SeckillApi from "@/sheep/api/promotion/seckill";
import SpuApi from "@/sheep/api/product/spu";
// //
const props = defineProps({ const props = defineProps({
@ -93,32 +94,35 @@
}, },
}); });
let { mode, tagStyle, buyNowStyle, goodsFields, space } = props.data; let { layoutType, tagStyle, btnBuy, space } = props.data;
let { marginLeft, marginRight } = props.styles; let { marginLeft, marginRight } = props.styles;
// //
const buyStyle = computed(() => { const buyStyle = computed(() => {
let buyNowStyle = props.data.buyNowStyle; let btnBuy = props.data.btnBuy;
if (buyNowStyle.mode == 1) { if (btnBuy?.type === 'text') {
return { return {
background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`, background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
}; };
} }
if (btnBuy?.type === 'img') {
if (buyNowStyle.mode == 2) {
return { return {
width: '54rpx', width: '54rpx',
height: '54rpx', height: '54rpx',
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`, background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
}; };
} }
}); });
const goodsList = ref([]); //
const productList = ref([]);
//
onMounted(async () => { onMounted(async () => {
let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId }); // todo@owen Yudao
goodsList.value = data; const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
productList.value = [spu];
}); });
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<view class="u-page__item" v-if="tabbar?.items.length > 0"> <view class="u-page__item" v-if="tabbar?.items?.length > 0">
<su-tabbar <su-tabbar
:value="path" :value="path"
:fixed="true" :fixed="true"

View File

@ -1,4 +1,5 @@
<template> <template>
<<<<<<< HEAD
<view class="ss-wallet-menu-wrap ss-flex ss-col-center"> <view class="ss-wallet-menu-wrap ss-flex ss-col-center">
<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" <view 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')">
@ -9,6 +10,20 @@
<view class="menu-title ss-m-t-28">账户余额</view> <view class="menu-title ss-m-t-28">账户余额</view>
</view> </view>
<!-- <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" <!-- <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
=======
<view class="ss-wallet-menu-wrap ss-flex ss-col-center">
<view
class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
@tap="sheep.$router.go('/pages/user/wallet/money')"
>
<view class="value-box ss-flex ss-col-bottom">
<view class="value-text ss-line-1">{{ userInfo.money || '0.00' }}</view>
<view class="unit-text ss-m-l-6"></view>
</view>
<view class="menu-title ss-m-t-28">账户余额</view>
</view>
<!-- <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
>>>>>>> 6251ffa9944516e995002e7f11539aef3e1d50de
@tap="sheep.$router.go('/pages/user/wallet/commission')"> @tap="sheep.$router.go('/pages/user/wallet/commission')">
<view class="value-box ss-flex ss-col-bottom"> <view class="value-box ss-flex ss-col-bottom">
<view class="value-text">{{ userInfo?.commission || '0.00' }}</view> <view class="value-text">{{ userInfo?.commission || '0.00' }}</view>
@ -16,6 +31,7 @@
</view> </view>
<view class="menu-title ss-m-t-28">佣金</view> <view class="menu-title ss-m-t-28">佣金</view>
</view> --> </view> -->
<<<<<<< HEAD
<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
@tap="sheep.$router.go('/pages/user/wallet/score')"> @tap="sheep.$router.go('/pages/user/wallet/score')">
<view class="value-box ss-flex ss-col-bottom"> <view class="value-box ss-flex ss-col-bottom">
@ -42,6 +58,45 @@
<view class="menu-title ss-m-t-30">我的钱包</view> <view class="menu-title ss-m-t-30">我的钱包</view>
</view> </view>
</view> </view>
=======
<view
class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
@tap="sheep.$router.go('/pages/user/wallet/score')"
>
<view class="value-box ss-flex ss-col-bottom">
<view class="value-text">{{ userInfo.score || 0 }}</view>
<view class="unit-text ss-m-l-6"></view>
</view>
<view class="menu-title ss-m-t-28">积分</view>
</view>
<view
class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
@tap="
sheep.$router.go('/pages/coupon/list', {
type: 'geted',
})
"
>
<view class="value-box ss-flex ss-col-bottom">
<view class="value-text">{{ numData.coupons_num || 0 }}</view>
<view class="unit-text ss-m-l-6"></view>
</view>
<view class="menu-title ss-m-t-28">优惠券</view>
</view>
<view
class="menu-item ss-flex-col ss-row-center ss-col-center menu-wallet"
@tap="sheep.$router.go('/pages/user/wallet/money')"
>
<image
class="item-icon"
:src="sheep.$url.static('/static/img/shop/user/wallet_icon.png')"
mode="aspectFit"
>
</image>
<view class="menu-title ss-m-t-30">我的钱包</view>
</view>
</view>
>>>>>>> 6251ffa9944516e995002e7f11539aef3e1d50de
</template> </template>
<script setup> <script setup>

View File

@ -2,49 +2,60 @@ import { ref } from 'vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import $url from '@/sheep/url'; import $url from '@/sheep/url';
// 格式化销量 /**
* 格式化销量
* @param {'exact' | string} type 格式类型exact=精确值其它=大致数量
* @param {number} num 销量
* @return {string} 格式化后的销量字符串
*/
export function formatSales(type, num) { export function formatSales(type, num) {
num = num + ''; let prefix = type!=='exact' && num<10 ? '销量': '已售';
if (type === 'exact') { return formatNum(prefix, type, num)
return '已售' + num;
} else {
if (num < 10) {
return '销量≤10';
} else {
let a = Math.pow(10, num.length - 1);
return '已售' + parseInt(num / a) * a + '+';
}
}
} }
// 格式化兑换量 /**
* 格式化兑换量
* @param {'exact' | string} type 格式类型exact=精确值其它=大致数量
* @param {number} num 销量
* @return {string} 格式化后的销量字符串
*/
export function formatExchange(type, num) { export function formatExchange(type, num) {
num = num + ''; return formatNum('已兑换', type, num)
if (type === 'exact') {
return '已兑换' + num;
} else {
if (num < 10) {
return '已兑换≤10';
} else {
let a = Math.pow(10, num.length - 1);
return '已兑换' + parseInt(num / a) * a + '+';
}
}
} }
// 格式化库存
/**
* 格式化库存
* @param {'exact' | any} type 格式类型exact=精确值其它=大致数量
* @param {number} num 销量
* @return {string} 格式化后的销量字符串
*/
export function formatStock(type, num) { export function formatStock(type, num) {
num = num + ''; return formatNum('库存', type, num)
}
/**
* 格式化数字
* @param {string} prefix 前缀
* @param {'exact' | string} type 格式类型exact=精确值其它=大致数量
* @param {number} num 销量
* @return {string} 格式化后的销量字符串
*/
export function formatNum(prefix, type, num) {
num = (num || 0);
// 情况一:精确数值
if (type === 'exact') { if (type === 'exact') {
return '库存' + num; return prefix + num;
} else {
if (num < 10) {
return '库存≤10';
} else {
let a = Math.pow(10, num.length - 1);
return '库存 ' + parseInt(num / a) * a + '+';
}
} }
// 情况二:小于等于 10
if (num < 10) {
return `${prefix}≤10`;
}
// 情况三:大于 10除第一位外其它位都显示为0
// 例如100 - 199 显示为 100+
// 9000 - 9999 显示为 9000+
let pow = Math.pow(10, `${num}`.length - 1);
return `${prefix}${(num / pow) * pow}+`;
} }
// 格式化价格 // 格式化价格
@ -52,49 +63,54 @@ export function formatPrice(e) {
return e.length === 1 ? e[0] : e.join('~'); return e.length === 1 ? e[0] : e.join('~');
} }
// 格式化商品轮播 // 视频格式后缀列表
export function formatGoodsSwiper(list) { const VIDEO_SUFFIX_LIST = ['.avi', '.mp4']
let swiper = []; /**
list.forEach((item, key) => { * 转换商品轮播的链接列表根据链接的后缀判断是视频链接还是图片链接
if (item.indexOf('.avi') !== -1 || item.indexOf('.mp4') !== -1) { *
swiper.push({ * @param {string[]} urlList 链接列表
src: $url.cdn(item), * @return {{src: string, type: 'video' | 'image' }[]} 转换后的链接列表
type: 'video', */
}); export function formatGoodsSwiper(urlList) {
} else { return urlList.map((url, key) => {
swiper.push({ const isVideo = VIDEO_SUFFIX_LIST.some(suffix => url.includes(suffix));
src: $url.cdn(item), const type = isVideo ? 'video' :'image'
type: 'image', const src = $url.cdn(url);
}); return { type, src }
}
}); });
return swiper;
} }
/**
* 格式化订单状态的颜色
* @param type 订单类型
* @return {string} 颜色的 class 名称
*/
export function formatOrderColor(type) { export function formatOrderColor(type) {
if ( switch (type) {
type === 'apply_refund' || case 'apply_refund':
type === 'groupon_ing' || case 'groupon_ing':
type === 'nocomment' || case 'nocomment':
type === 'noget' || case 'noget':
type === 'nosend' case 'nosend':
) { return 'warning-color';
return 'warning-color'; case 'closed':
} else if ( case 'groupon_invalid':
type === 'closed' || case 'cancel':
type === 'groupon_invalid' || case 'refund_agree':
type === 'cancel' || return 'danger-color';
type === 'refund_agree' case 'completed':
) { return 'success-color';
return 'danger-color'; case 'unpaid':
} else if (type === 'completed') { return 'info-color';
return 'success-color';
} else if (type === 'unpaid') {
return 'info-color';
} }
} }
// 计算相隔时间 /**
* 倒计时
* @param toTime 截止时间
* @param fromTime 起始时间默认当前时间
* @return {{s: string, ms: number, h: string, m: string}} 持续时间
*/
export function useDurationTime(toTime, fromTime = '') { export function useDurationTime(toTime, fromTime = '') {
toTime = getDayjsTime(toTime); toTime = getDayjsTime(toTime);
if (fromTime === '') { if (fromTime === '') {
@ -120,6 +136,11 @@ export function useDurationTime(toTime, fromTime = '') {
}; };
} }
/**
* 转换为 Dayjs
* @param {any} time 时间
* @return {dayjs.Dayjs}
*/
function getDayjsTime(time) { function getDayjsTime(time) {
time = time.toString(); time = time.toString();
if (time.indexOf('-') > 0) { if (time.indexOf('-') > 0) {
@ -131,7 +152,7 @@ function getDayjsTime(time) {
return dayjs(parseInt(time)); return dayjs(parseInt(time));
} }
if (time.length === 10) { if (time.length === 10) {
// 'unixtime' // 'unixTime'
return dayjs.unix(parseInt(time)); return dayjs.unix(parseInt(time));
} }
} }

View File

@ -110,7 +110,7 @@ const adaptTemplate = async (appTemplate) => {
} }
} }
appTemplate.home = diyTemplate?.data?.home; appTemplate.home = diyTemplate?.data?.home;
// appTemplate.user = diyTemplate?.data?.user; appTemplate.user = diyTemplate?.data?.user;
} }
export default app; export default app;

View File

@ -43,7 +43,7 @@
</view> </view>
<view class="ss-m-b-28"> <view class="ss-m-b-28">
<view class="title-text ss-m-b-10">{{ props.title }}</view> <view class="title-text ss-m-b-10">{{ props.title }}</view>
<view class="surplus-text">仅剩{{ props.surplus }}</view> <view class="surplus-text" v-if="props.surplus">{{ props.surplus }}</view>
</view> </view>
</view> </view>
<view class="card-right ss-flex ss-row-center"> <view class="card-right ss-flex ss-row-center">
@ -82,7 +82,7 @@
{{ state.stateMap[props.state] }} {{ state.stateMap[props.state] }}
</button> </button>
</slot> </slot>
<view class="surplus-text ss-m-t-24">仅剩{{ props.surplus }}</view> <view class="surplus-text ss-m-t-24" v-if="props.surplus">{{ props.surplus }}</view>
</view> </view>
</view> </view>
</view> </view>
@ -159,7 +159,7 @@
}, },
surplus: { surplus: {
type: [Number, String], type: [Number, String],
default: 1000, default: 0,
}, },
type: { type: {
type: String, type: String,

View File

@ -1,42 +1,62 @@
<template> <template>
<view class="ui-subline-wrap" :style="[elStyle]"></view> <view class="wrap" :style="{height: `${height}px`}">
<view class="divider" :style="[elStyle]"></view>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 辅助线 * 分割线
*
* @property {String} width = ['thin', 'medium', 'thick', '10px'] - 线条宽度
* @property {String} color = #000 - 线条颜色
* @property {String} style = ['dotted', 'solid', 'double', 'dashed'] - 线条样式,圆点实线双线虚线
*
*/ */
import { computed } from 'vue'; import { computed } from 'vue';
// //
const props = defineProps({ const props = defineProps({
color: { // 线
lineColor: {
type: String, type: String,
default: '#000', default: '#000',
}, },
lineStyle: { // 线'dotted', 'solid', 'double', 'dashed'
borderType: {
type: String, type: String,
default: 'dashed', default: 'dashed',
}, },
width: { // 线
type: String, lineWidth: {
default: 'thin', type: Number,
default: 1,
}, },
//
height: {
type: [Number, String],
default: 'auto'
},
// none - horizontal -
paddingType: {
type: String,
default: 'none'
}
}); });
const elStyle = computed(() => { const elStyle = computed(() => {
return { return {
'border-top-width': props.width, 'border-top-width': `${props.lineWidth}px`,
'border-top-color': props.color, 'border-top-color': props.lineColor,
'border-top-style': props.lineStyle, 'border-top-style': props.borderType,
margin: props.paddingType === 'none' ? '0' : '0px 16px'
}; };
}); });
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.wrap {
display: flex;
align-items: center;
.divider {
width: 100%;
}
}
</style>

47
sheep/util/const.js Normal file
View File

@ -0,0 +1,47 @@
// ========== MALL - 营销模块 ==========
/**
* 优惠类型枚举
*/
export const PromotionDiscountTypeEnum = {
PRICE: {
type: 1,
name: '满减'
},
PERCENT: {
type: 2,
name: '折扣'
}
}
/**
* 优惠劵模板的有限期类型的枚举
*/
export const CouponTemplateValidityTypeEnum = {
DATE: {
type: 1,
name: '固定日期可用'
},
TERM: {
type: 2,
name: '领取之后可用'
}
}
/**
* 营销的商品范围枚举
*/
export const PromotionProductScopeEnum = {
ALL: {
scope: 1,
name: '通用劵'
},
SPU: {
scope: 2,
name: '商品劵'
},
CATEGORY: {
scope: 3,
name: '品类劵'
}
}

79
sheep/util/index.js Normal file
View File

@ -0,0 +1,79 @@
import dayjs from "dayjs";
/**
* 将一个整数转换为分数保留两位小数
* @param {number | string | undefined} num 整数
* @return {number} 分数
*/
export const formatToFraction = (num) => {
if (typeof num === 'undefined') return 0
const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
return parseFloat((parsedNumber / 100).toFixed(2))
}
/**
* 将一个数转换为 1.00 这样
* 数据呈现的时候使用
*
* @param {number | string | undefined} num 整数
* @return {string} 分数
*/
export const floatToFixed2 = (num) => {
let str = '0.00'
if (typeof num === 'undefined') {
return str
}
const f = formatToFraction(num)
const decimalPart = f.toString().split('.')[1]
const len = decimalPart ? decimalPart.length : 0
switch (len) {
case 0:
str = f.toString() + '.00'
break
case 1:
str = f.toString() + '.0'
break
case 2:
str = f.toString()
break
}
return str
}
/**
* 将一个分数转换为整数
*
* @param {number | string | undefined} num 分数
* @return {number} 整数
*/
export const convertToInteger = (num) => {
if (typeof num === 'undefined') return 0
const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
// TODO 分转元后还有小数则四舍五入
return Math.round(parsedNumber * 100)
}
/**
* 时间日期转换
* @param {dayjs.ConfigType} date 当前时间new Date() 格式
* @param {string} format 需要转换的时间格式字符串
* @description format 字符串随意 `YYYY-mm、YYYY-mm-dd`
* @description format 季度"YYYY-mm-dd HH:MM:SS QQQQ"
* @description format 星期"YYYY-mm-dd HH:MM:SS WWW"
* @description format 几周"YYYY-mm-dd HH:MM:SS ZZZ"
* @description format 季度 + 星期 + 几周"YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
* @returns {string} 返回拼接后的时间字符串
*/
export function formatDate(date, format) {
// 日期不存在,则返回空
if (!date) {
return ''
}
// 日期存在,则进行格式化
if (format === undefined) {
format = 'YYYY-MM-DD HH:mm:ss'
}
return dayjs(date).format(format)
}