xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
落日晚风
2023-12-07 17:53:34 +08:00
parent ef254d2d3c 6251ffa994
commit 39692952f0
25 changed files with 841 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sheep/components/s-block-item/s-block-item.vue
+22 -22
View File
@@ -18,40 +18,40 @@
<!-- 基础组件：标题栏 -->
<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-line-block v-if="type === 'lineBlock'" :data="data" />
<!-- 图文组件：富文字 -->
<s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles" />
<!-- 基础组件：分割线 -->
<s-line-block v-if="type === 'Divider'" :data="data" />
<!-- 图文组件：热区 -->
<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-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
<!-- 营销组件：小程序直播 -->
<s-live-block v-if="type === 'mplive'" :data="data" :styles="styles" />
<s-seckill-block v-if="type === 'PromotionSeckill'" :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-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-order-card v-if="type === 'orderCard'" :data="data" />
<!-- 会员组件：资产卡片 -->
<s-wallet-card v-if="type === 'walletCard'" />
<!-- 会员组件：卡券卡片 -->
<s-coupon-card v-if="type === 'couponCard'" />
<!-- 用户组件：用户卡片 -->
<s-user-card v-if="type === 'UserCard'" />
<!-- 用户组件：用户订单 -->
<s-order-card v-if="type === 'UserOrder'" :data="data" />
<!-- 用户组件：用户资产 -->
<s-wallet-card v-if="type === 'UserWallet'" />
<!-- 用户组件：用户卡券 -->
<s-coupon-card v-if="type === 'UserCoupon'" />
</view>
</template>
sheep/components/s-coupon-block/s-coupon-block.vue
+96 -137
View File
@@ -1,126 +1,54 @@
<!-- 优惠券组 -->
<template>
<view>
<!-- 样式1 -->
<view class="lg-coupon-wrap" v-if="mode == 1">
<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="lg"
:textColor="data.fill.color"
background=""
:couponId="item.id"
:title="item.amount_text"
:value="item.amount"
:surplus="item.stock"
:type="item.type"
:sellBy="`${item.get_start_time.substring(0, 10)} 至 ${item.get_end_time.substring(
0,
10,
)}`"
<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="SIZE_LIST[columns - 1]"
:textColor="data.textColor"
background=""
:couponId="item.id"
:title="item.name"
:type="formatCouponDiscountType(item)"
:value="formatCouponDiscountValue(item)"
:sellBy="formatValidityType(item)"
>
<template v-slot:btn>
<!-- 两列时，领取按钮坚排 -->
<button
v-if="columns === 2"
@click.stop="onGetCoupon(item.id)"
class="ss-reset-button card-btn vertical"
:style="[btnStyles]"
>
<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>
<!-- 样式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,
)}`"
<view class="btn-text">立即领取</view>
</button>
<button
v-else
class="ss-reset-button card-btn"
:style="[btnStyles]"
@click.stop="onGetCoupon(item.id)"
>
<template v-slot:btn>
<button
@click.stop="onGetCoupon(item.id)"
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
:style="[btnStyles]"
>
<view class="btn-text">{{ item.get_status_text }}</view>
</button>
</template>
</su-coupon>
</view>
</view>
</scroll-view>
立即领取
</button>
</template>
</su-coupon>
</view>
</view>
<!-- 样式3 -->
<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>
</scroll-view>
</template>
<script setup>
import sheep from '@/sheep';
import TemplateApi from '@/sheep/api/promotion/coupon';
import { ref, onMounted } from 'vue';
import {CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum} from "@/sheep/util/const";
import {floatToFixed2, formatDate} from "@/sheep/util";
const props = defineProps({
data: {
@@ -132,14 +60,48 @@
default: () => ({}),
},
});
const { mode, button } = props.data;
const { columns, button } = props.data;
const SIZE_LIST = ['lg', 'md', 'xs']
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 = {
background: button.bgColor,
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([]);
//立即领取优惠券
async function onGetCoupon(id) {
@@ -149,15 +111,16 @@
title: msg,
icon: 'none',
});
} else {
let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') });
couponList.value = [...data.data];
return
}
await getCouponTemplateList()
}
onMounted(async () => {
let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') });
// couponList.value = [...data.data, ...data.data, ...data.data, ...data.data];
couponList.value = [...data.data];
const getCouponTemplateList = async () => {
const { data } = await TemplateApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
couponList.value = data;
}
onMounted(() => {
getCouponTemplateList()
});
</script>
@@ -168,25 +131,21 @@
border-radius: 25rpx;
font-size: 24rpx;
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 {
&:nth-of-type(1) {
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>
sheep/components/s-goods-card/s-goods-card.vue
+93 -58
View File
@@ -1,8 +1,8 @@
<template>
<!-- 商品卡片 -->
<view>
<!-- 1 100%宽卡片列表-->
<view v-if="mode === 1 && state.goodsList.length" class="goods-sl-box">
<!-- 布局1. 单列大图（上图，下内容）-->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
<view
class="goods-box"
v-for="item in state.goodsList"
@@ -12,27 +12,28 @@
<s-goods-column
class=""
size="sl"
:goodsFields="goodsFields"
:tagStyle="tagStyle"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="goodsFields.title?.color"
:subTitleColor="goodsFields.subtitle.color"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- 2 双列瀑布流列表-->
<!-- 布局2. 双列（每一列：上图，下内容）-->
<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"
>
<view class="goods-list-box">
@@ -45,20 +46,21 @@
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="goodsFields"
:tagStyle="tagStyle"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="goodsFields.title?.color"
:subTitleColor="goodsFields.subtitle.color"
: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/index', { id: item.id })"
@getHeight="mountMasonry($event, 'left')"
@getHeight="calculateGoodsColumn($event, 'left')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
@@ -74,20 +76,21 @@
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="goodsFields"
:tagStyle="tagStyle"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="goodsFields.title?.color"
:subTitleColor="goodsFields.subtitle.color"
: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/index', { id: item.id })"
@getHeight="mountMasonry($event, 'right')"
@getHeight="calculateGoodsColumn($event, 'right')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
@@ -95,8 +98,8 @@
</view>
</view>
<!-- 3 30%卡片列表-->
<view v-if="mode === 3 && state.goodsList.length" class="goods-lg-box">
<!-- 布局3. 单列小图（左图，右内容） -->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
<view
class="goods-box"
:style="[{ marginBottom: data.space + 'px' }]"
@@ -106,18 +109,19 @@
<s-goods-column
class="goods-card"
size="lg"
:goodsFields="goodsFields"
:goodsFields="data.fields"
:data="item"
:tagStyle="tagStyle"
:titleColor="goodsFields.title?.color"
:subTitleColor="goodsFields.subtitle.color"
:tagStyle="data.badge"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
@@ -128,11 +132,21 @@
<script setup>
/**
* 商品模板，装修商品卡片
* @description style 1:带tab 2：瀑布流，横向两个，上图下内容 3：大图，横向一个
* 商品卡片
*/
import { computed, reactive, onMounted } from 'vue';
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({
goodsList: [],
@@ -150,55 +164,76 @@
},
});
const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data ?? {};
const { layoutType, btnBuy, spuIds } = props.data ?? {};
const { marginLeft, marginRight } = props.styles ?? {};
async function getGoodsListByIds(ids) {
let { data } = await sheep.$api.goods.ids({ ids });
return data;
}
onMounted(async () => {
state.goodsList = await getGoodsListByIds(goodsIds.join(','));
if (mode === 2) {
mountMasonry();
// 购买按钮样式
const buyStyle = computed(() => {
if (btnBuy.type === 'text') {
// 文字按钮：线性渐变背景颜色
return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
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 leftHeight = 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 (where === 'left') leftHeight += height;
if (where === 'right') rightHeight += height;
// 添加到矮的一列
if (leftHeight <= rightHeight) {
state.leftGoodsList.push(state.goodsList[count]);
} else {
state.rightGoodsList.push(state.goodsList[count]);
}
// 计数
count++;
}
//endregion
// 购买按钮样式
const buyStyle = computed(() => {
if (buyNowStyle.mode == 1) {
// button
return {
background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`,
};
}
/**
* 根据商品编号列表，获取商品列表
* @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表
*/
async function getGoodsListByIds(ids) {
const { data } = await SpuApi.getSpuListByIds(ids);
return data;
}
if (buyNowStyle.mode == 2) {
// image
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
backgroundSize: '100% 100%',
};
// 初始化
onMounted(async () => {
// 加载商品列表
state.goodsList = await getGoodsListByIds(spuIds.join(','));
// 只有双列布局时需要
if (layoutType === LayoutTypeEnum.TWO_COL){
// 分列
calculateGoodsColumn();
}
});
</script>
sheep/components/s-goods-column/s-goods-column.vue
+41 -28
View File
@@ -9,19 +9,19 @@
@tap="onClick"
>
<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>
<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
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"
>
<view
v-if="goodsFields.title?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="xs-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
{{ data.title }}
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.price?.show"
@@ -37,17 +37,17 @@
<!-- sm卡片：竖向紧凑，一行放三个，图上内容下 -->
<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">
<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>
<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
v-if="goodsFields.title?.show || goodsFields.price?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="sm-goods-content"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
<view v-if="goodsFields.title?.show" class="sm-goods-title ss-line-1 ss-m-b-16">
{{ data.title }}
<view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sm-goods-title ss-line-1 ss-m-b-16">
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.price?.show"
@@ -63,26 +63,26 @@
<!-- md卡片：竖向，一行放两个，图上内容下 -->
<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">
<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>
<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
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
:id="elId"
>
<view
v-if="goodsFields.title?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="md-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
{{ data.title||data.name }}
{{ data.title || data.name }}
</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"
:style="[{ color: subTitleColor, background: subTitleBackground }]"
>
{{ data.subtitle }}
{{ data.subtitle || data.introduction }}
</view>
<slot name="activity">
<view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
@@ -135,28 +135,28 @@
@tap="onClick"
>
<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 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 class="tag-icon">拼团</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>
<view
v-if="goodsFields.title?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]"
>
{{ data.title||data.name }}
{{ data.title || data.name }}
</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"
:style="[{ color: subTitleColor, background: subTitleBackground }]"
>
{{ data.subtitle }}
{{ data.subtitle || data.introduction }}
</view>
</view>
<view>
@@ -201,26 +201,26 @@
<!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
<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">
<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>
<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>
<view
v-if="goodsFields.title?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="sl-goods-title ss-line-1"
:style="[{ color: titleColor }]"
>
{{ data.title||data.name }}
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.subtitle?.show"
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="sl-goods-subtitle ss-m-t-16"
:style="[{ color: subTitleColor, background: subTitleBackground }]"
>
{{ data.subtitle }}
{{ data.subtitle || data.introduction }}
</view>
</view>
<view>
@@ -307,12 +307,25 @@
type: [Array, Object],
default() {
return {
// 商品名称（旧）
title: { show: true },
// 商品介绍（旧）
subtitle: { show: true },
// 商品价格
price: { show: true },
// 市场价（旧）
original_price: { show: true },
// 销量（旧）
sales: { show: true },
// 库存
stock: { show: true },
// 商品名称（新）
name: { show: true },
// 商品介绍（新）
introduction: { show: true },
// 市场价（新）
marketPrice: { show: true },
// 销量（新）
salesCount: { show: true },
};
},
sheep/components/s-goods-shelves/s-goods-shelves.vue
+21 -22
View File
@@ -1,8 +1,8 @@
<template>
<view>
<!-- 1 两张图片并排 图片坐文案右 -->
<!-- 布局1. 两列商品，图片左文案右 -->
<view
v-if="mode === 1"
v-if="layoutType === 'twoCol'"
class="goods-xs-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
@@ -19,10 +19,10 @@
<s-goods-column
class="goods-card"
size="xs"
:goodsFields="goodsFields"
:tagStyle="tagStyle"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="goodsFields.title?.color"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
@@ -30,9 +30,9 @@
></s-goods-column>
</view>
</view>
<!-- 2 三张商品卡片并排 图片上文案下 -->
<!-- 布局. 三列商品：图片上文案下 -->
<view
v-if="mode === 2"
v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
@@ -49,10 +49,10 @@
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="goodsFields"
:tagStyle="tagStyle"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="goodsFields.title?.color"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@@ -60,8 +60,8 @@
</view>
</view>
<!-- 3 商品卡片并排 轮播 -->
<view v-if="mode === 3" class="">
<!-- 布局3. 一行商品，水平滑动 -->
<view v-if="layoutType === 'horizSwiper'" class="">
<scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
<view class="goods-box ss-flex">
<view
@@ -73,10 +73,10 @@
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="goodsFields"
:tagStyle="tagStyle"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="goodsFields.title?.color"
:titleColor="data.fields.name?.color"
:titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
></s-goods-column>
@@ -89,12 +89,11 @@
<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 SpuApi from "@/sheep/api/product/spu";
const props = defineProps({
data: {
@@ -106,12 +105,12 @@
default() {},
},
});
const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data;
const { layoutType, spuIds } = props.data;
let { marginLeft, marginRight } = props.styles;
const goodsList = ref([]);
onMounted(async () => {
if (goodsIds.length > 0) {
let { data } = await sheep.$api.goods.ids({ ids: goodsIds.join(',') });
if (spuIds.length > 0) {
let { data } = await SpuApi.getSpuListByIds(spuIds.join(','));
goodsList.value = data;
}
});
sheep/components/s-groupon-block/s-groupon-block.vue
+28 -28
View File
@@ -2,13 +2,13 @@
<template>
<view>
<view
v-if="mode === 1"
v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
<view
v-for="item in goodsList"
:key="item.id"
v-for="product in productList"
:key="product.id"
class="goods-card-box"
:style="[
{
@@ -19,15 +19,15 @@
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="goodsFields"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="item"
:titleColor="goodsFields.title?.color"
:data="product"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
sheep.$router.go('/pages/goods/groupon', {
id: item.id,
id: product.id,
activity_id: props.data.activityId,
})
"
@@ -35,33 +35,33 @@
</view>
</view>
<!-- 样式2 一行一个 图片左 文案右 -->
<view class="goods-box" v-if="mode == 2">
<view class="goods-box" v-if="layoutType === 'oneCol'">
<view
class="goods-list"
v-for="(item, index) in goodsList"
v-for="(product, index) in productList"
:key="index"
:style="[{ marginBottom: space + 'px' }]"
>
<s-goods-column
class="goods-card"
size="lg"
:includes="goodsFields"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="item"
:titleColor="goodsFields.title?.color"
:subTitleColor="goodsFields.subtitle.color"
:data="product"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
sheep.$router.go('/pages/goods/groupon', {
id: item.id,
id: product.id,
activity_id: props.data.activityId,
})
"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
@@ -73,13 +73,11 @@
<script setup>
/**
* 拼团
*
* @property {Array} list - 商品列表
*
*
*/
import { computed, onMounted, ref } from 'vue';
import sheep from '@/sheep';
import SpuApi from "@/sheep/api/product/spu";
import CombinationApi from "@/sheep/api/promotion/combination";
// 接收参数
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;
// 购买按钮样式
const buyStyle = computed(() => {
let buyNowStyle = props.data.buyNowStyle;
if (buyNowStyle.mode == 1) {
let btnBuy = props.data.btnBuy;
if (btnBuy?.type === 'text') {
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 {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
const goodsList = ref([]);
const productList = ref([]);
onMounted(async () => {
let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId });
goodsList.value = data;
// todo：@owen 与Yudao结构不一致，待重构
const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
productList.value = [spu];
});
</script>
sheep/components/s-image-cube/s-image-cube.vue
+3 -3
View File
@@ -3,10 +3,10 @@
<view v-for="(item, index) in data.list" :key="index">
<view
class="cube-img-wrap"
:style="[parseImgStyle(item), { margin: data.space + 'rpx' }]"
:style="[parseImgStyle(item), { margin: data.space + 'px' }]"
@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>
@@ -49,7 +49,7 @@
const cell = computed(() => {
return (
(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
);
});
sheep/components/s-line-block/s-line-block.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<su-subline :color="data.lineColor" :lineStyle="data.style"></su-subline>
<su-subline v-bind="data"></su-subline>
</template>
<script setup>
const props = defineProps({
data: {
type: Object,
default() {},
default: {},
},
});
</script>
sheep/components/s-richtext-block/s-richtext-block.vue
+3 -5
View File
@@ -15,7 +15,7 @@
</template>
<script setup>
import { reactive, onMounted } from 'vue';
import sheep from '@/sheep';
import ArticleApi from '@/sheep/api/promotion/article';
const props = defineProps({
data: {
type: Object,
@@ -30,9 +30,7 @@
content: '',
});
onMounted(async () => {
const { error, data } = await sheep.$api.data.richtext(props.data.id);
if (error === 0) {
state.content = data.content;
}
const { data } = await ArticleApi.getArticle(props.data.id);
state.content = data.content;
});
</script>
sheep/components/s-seckill-block/s-seckill-block.vue
+34 -30
View File
@@ -1,14 +1,15 @@
<!-- 装修组件 - 秒杀 -->
<template>
<view>
<!-- 样式一：三列 - 上图下文 -->
<view
v-if="mode === 1"
v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
<view
v-for="item in goodsList"
:key="item.id"
v-for="product in productList"
:key="product.id"
class="goods-card-box"
:style="[
{
@@ -19,49 +20,49 @@
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="goodsFields"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="item"
:titleColor="goodsFields.title?.color"
:data="product"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
sheep.$router.go('/pages/goods/seckill', {
id: item.id,
id: product.id,
activity_id: props.data.activityId,
})
"
></s-goods-column>
</view>
</view>
<!-- 样式2 -->
<view class="goods-box" v-if="mode == 2">
<!-- 样式二：一列 - 左图右文 -->
<view class="goods-box" v-if="layoutType === 'oneCol'">
<view
class="goods-list"
v-for="(item, index) in goodsList"
v-for="(product, index) in productList"
:key="index"
:style="[{ marginBottom: space + 'px' }]"
>
<s-goods-column
class="goods-card"
size="lg"
:includes="goodsFields"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="item"
:titleColor="goodsFields.title?.color"
:subTitleColor="goodsFields.subtitle.color"
:data="product"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
sheep.$router.go('/pages/goods/seckill', {
id: item.id,
id: product.id,
activity_id: props.data.activityId,
})
"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
@@ -72,14 +73,14 @@
<script setup>
/**
* 秒杀
*
* @property {Array} list - 商品列表
*
* 秒杀商品列表
*
* @property {Array} list 商品列表
*/
import { computed, onMounted, ref } from 'vue';
import sheep from '@/sheep';
import SeckillApi from "@/sheep/api/promotion/seckill";
import SpuApi from "@/sheep/api/product/spu";
// 接收参数
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;
// 购买按钮样式
const buyStyle = computed(() => {
let buyNowStyle = props.data.buyNowStyle;
if (buyNowStyle.mode == 1) {
let btnBuy = props.data.btnBuy;
if (btnBuy?.type === 'text') {
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 {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
const goodsList = ref([]);
// 商品列表
const productList = ref([]);
// 查询秒杀活动商品
onMounted(async () => {
let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId });
goodsList.value = data;
// todo：@owen 与Yudao结构不一致，待重构
const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
productList.value = [spu];
});
</script>
sheep/components/s-tabbar/s-tabbar.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<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
:value="path"
:fixed="true"
sheep/components/s-wallet-card/s-wallet-card.vue
+55
View File
@@ -1,4 +1,5 @@
<template>
<<<<<<< HEAD
<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')">
@@ -9,6 +10,20 @@
<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"
=======
<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')">
<view class="value-box ss-flex ss-col-bottom">
<view class="value-text">{{ userInfo?.commission || '0.00' }}</view>
@@ -16,6 +31,7 @@
</view>
<view class="menu-title ss-m-t-28">佣金</view>
</view> -->
<<<<<<< HEAD
<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">
@@ -42,6 +58,45 @@
<view class="menu-title ss-m-t-30">我的钱包</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>
<script setup>