mirror of
https://gitee.com/krxd/shuyuan.git
synced 2026-04-08 13:25:54 +08:00
创建
This commit is contained in:
郑彪辉
389
src/addon/shop/components/diy/goods-coupon/index.vue
Normal file
389
src/addon/shop/components/diy/goods-coupon/index.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config" v-if="couponList && Object.keys(couponList).length > 0">
|
||||
<view :style="warpCss" class="overflow-hidden">
|
||||
|
||||
<view v-if="diyComponent.style == 'style-1'" class="coupon-wrap style-1 relative">
|
||||
<scroll-view scroll-x="true" class="coupon-list" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style1_bg2.png') + ')','background-size':'100%','background-repeat':'no-repeat'}">
|
||||
<view class="coupon-class">
|
||||
<block v-if="couponList.length > 1">
|
||||
<view v-for="(item,index) in couponList" :key="index" class="rounded-[16rpx] box-border pt-[14rpx] inline-flex flex-col items-center relative w-[150rpx] h-[130rpx]" :class="{'mr-[20rpx]': index != couponList.length-1}" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/coupon_item_bg.png') + ')','background-size':'100%','background-repeat':'no-repeat'}" @click="couponItemLink(item)">
|
||||
<view class="truncate w-full flex items-baseline justify-center price-font text-[var(--price-text-color)]">
|
||||
<text class="text-[26rpx] font-500">￥</text>
|
||||
<text class="text-[36rpx] truncate font-500">{{ parseFloat(item.price) }}</text>
|
||||
</view>
|
||||
<view class="text-[#303133] text-[20rpx] mt-[12rpx]">{{ item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
|
||||
<view class="mt-[auto] rounded-b-[12rpx] text-[#f2333c] text-[20rpx] w-[100%] h-[36rpx] flex items-center justify-center bg-[#fff5f2]">{{item.type_name}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view v-for="(item,index) in couponList" :key="index" class="rounded-[16rpx] box-border pt-[14rpx] pl-[44rpx] pr-[44rpx] inline-flex items-center justify-between relative w-[100%] h-[130rpx]" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style1_bg4.png') + ')','background-size':'100%','background-repeat':'no-repeat'}" @click="couponItemLink(item)">
|
||||
<view class="flex price-font text-[var(--price-text-color)] items-baseline">
|
||||
<text class="text-[36rpx] mt-[16rpx] mr-[4rpx]">￥</text>
|
||||
<text class="text-[85rpx] font-500 max-w-[170rpx] truncate">{{parseFloat(item.price)}}</text>
|
||||
</view>
|
||||
<view class="border-0 border-dashed border-r-[2rpx] border-[#FF323C] absolute left-[40%] top-[46rpx] bottom-0 w-[2rpx]"></view>
|
||||
<view class="w-[270rpx]">
|
||||
<view class="flex items-center mt-[auto]">
|
||||
<text class="rounded-[4rpx] bg-[#fff3f0] text-[#f2333c] border-[2rpx] border-solid border-[#f2333c] text-[22rpx] px-[6rpx] pb-[4rpx] pt-[6rpx] flex items-center justify-center whitespace-nowrap">{{item.type_name}}</text>
|
||||
<text class="ml-[4rpx] text-[#f2333c] max-w-[184rpx] truncate">{{item.title}}</text>
|
||||
</view>
|
||||
<view class="text-[#f2333c] text-[30rpx] font-500 mt-[10rpx] w-[270rpx] truncate">{{item.min_condition_money == '0.00' ? '无门槛' : ('消费满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="w-[100%] h-[130rpx] pt-[24rpx] px-[26rpx] box-border flex items-center justify-between absolute left-0 right-0 bottom-0" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style1_bg.png') + ')','background-size':'100% 130rpx','background-repeat':'no-repeat'}">
|
||||
<view class="flex flex-col">
|
||||
<text class="text-[30rpx] text-[#fff] font-400">{{ diyComponent.couponTitle }}</text>
|
||||
<text class="text-[20rpx] text-[rgba(255,255,255,.8)] mt-[10rpx]">{{ diyComponent.couponSubTitle }}</text>
|
||||
</view>
|
||||
<text v-if="diyComponent.btnText" @click="toLink('/addon/shop/pages/coupon/list')" class="bg-[#fff] flex items-center justify-center text-[#FF4142] text-[22rpx] min-w-[100rpx] px-[24rpx] box-border h-[50rpx] coupon-buy-btn">{{diyComponent.btnText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="diyComponent.style == 'style-2'" class="coupon-wrap style-2 relative">
|
||||
<scroll-view scroll-x="true" class="coupon-list">
|
||||
<view v-for="(item,index) in couponList" :key="index" class="box-border pt-[14rpx] inline-flex flex-col items-center relative w-[140rpx] h-[130rpx] rounded-[10rpx]" :class="{'mr-[20rpx]': index != couponList.length-1, 'mr-[290rpx]': index == couponList.length-1}" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/coupon_item_bg.png') + ')','background-size':'100%','background-repeat':'no-repeat'}" @click="couponItemLink(item)">
|
||||
<view class="flex items-baseline justify-center w-full truncate price-font text-[var(--price-text-color)]">
|
||||
<text class="text-[24rpx]">￥</text>
|
||||
<text class="text-[38rpx] font-bold truncate">{{parseFloat(item.price)}}</text>
|
||||
</view>
|
||||
<view class="text-[#303133] text-[20rpx] truncate max-w-[120rpx] mt-[12rpx]">{{item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
|
||||
<view class="mt-[auto] rounded-b-[12rpx] text-[#f2333c] text-[20rpx] w-[100%] h-[36rpx] flex items-center justify-center bg-[#fff5f2]">{{item.type_name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="w-[290rpx] h-[170rpx] py-[20rpx] pl-[30rpx] box-border flex flex-col items-center justify-between absolute right-0 bottom-0" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style2_bg.png') + ')','background-size':'290rpx 170rpx','background-repeat':'no-repeat'}">
|
||||
<text class="text-[30rpx] text-[#fff] font-500">{{ diyComponent.couponTitle }}</text>
|
||||
<text class="text-[20rpx] text-[rgba(255,255,255,.8)] mt-[14rpx]">{{ diyComponent.couponSubTitle }}</text>
|
||||
<text v-if="diyComponent.btnText" @click="toLink('/addon/shop/pages/coupon/list')" class="bg-[#fff] text-[#FF4142] text-[22rpx] min-w-[100rpx] px-[24rpx] box-border h-[50rpx] leading-[50rpx] text-center coupon-buy-btn mt-auto">{{diyComponent.btnText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="diyComponent.style == 'style-3'" class="coupon-wrap style-3 relative" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style3_bg.jpg') + ')','background-size':'100% 204rpx','background-repeat':'no-repeat'}">
|
||||
<view class="desc flex flex-col">
|
||||
<text class="text-[30rpx] text-[#fff] font-500">{{ diyComponent.couponTitle }}</text>
|
||||
<text class="text-[22rpx] text-[rgba(255,255,255,.8)] mt-[10rpx]">{{ diyComponent.couponSubTitle }}</text>
|
||||
<text v-if="diyComponent.btnText" @click="toLink('/addon/shop/pages/coupon/list')" class="bg-[#fff] text-[#FF4142] text-[24rpx] w-[140rpx] box-border h-[50rpx] leading-[50rpx] text-center coupon-buy-btn mt-auto">{{diyComponent.btnText}}</text>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="coupon-list" v-if="couponList.length > 1">
|
||||
<view v-for="(item,index) in couponList" :key="index" class="bg-[#fff] box-border p-[8rpx] pb-[12rpx] inline-flex flex-col items-center relative rounded-[20rpx] ml-[12rpx]" @click="couponItemLink(item)">
|
||||
<view class="coupon-item-content">
|
||||
<view class="text-[20rpx] text-[#fff]">{{item.type_name}}</view>
|
||||
<view class="mt-[auto] flex items-baseline justify-center w-full truncate price-font text-[#fff]">
|
||||
<text class="text-[24rpx]">￥</text>
|
||||
<text class="text-[44rpx] font-bold truncate">{{parseFloat(item.price)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-[#303133] text-[22rpx] truncate max-w-[120rpx] mt-[12rpx]">{{item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-if="couponList.length == 1" class="bg-[#fff] box-border p-[10rpx] relative rounded-[20rpx] single-coupon flex-1" @click="couponItemLink(couponList[0])">
|
||||
<view class="flex items-center coupon-item-content">
|
||||
<view class="coupon-left flex items-center justify-center text-[#fff] w-[156rpx] mr-[30rpx]">
|
||||
<text class="text-[24rpx]">￥</text>
|
||||
<text class="text-[44rpx] font-[500]">{{parseFloat(couponList[0].price)}}</text>
|
||||
</view>
|
||||
<view class="flex flex-col">
|
||||
<view class="text-[#fff] text-[28rpx] mb-[14rpx]">{{couponList[0].min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(couponList[0].min_condition_money)+'元可用') }}</view>
|
||||
<view class="flex items-center">
|
||||
<text class="bg-[#fff] mr-[10rpx] text-[red] text-[20rpx] px-[10rpx] py-[8rpx] rounded-[20rpx]">{{couponList[0].type_name}}</text>
|
||||
<text class="text-[#fff] text-[24rpx]">店铺优惠券</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="diyComponent.style == 'style-4'" class="coupon-wrap style-4 relative" :style="couponStyle4Css">
|
||||
<view class="desc flex items-center pt-[6rpx] pb-[26rpx]" @click="toLink('/addon/shop/pages/coupon/list')">
|
||||
<text class="text-[32rpx] text-[#fff] font-500" :style="{color: diyComponent.titleColor}">{{ diyComponent.couponTitle }}</text>
|
||||
<text class="text-[22rpx] text-[rgba(255,255,255,.8)] ml-[10rpx]" :style="{color: diyComponent.subTitleColor}">{{ diyComponent.couponSubTitle }}</text>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="coupon-list">
|
||||
<view v-for="(item,index) in couponList" :key="index" class="px-[10rpx] h-[120rpx] inline-flex items-center relative mr-[12rpx] coupon-item box-border min-w-[310rpx]" :style="{'background-color': diyComponent.couponItem.bgColor, 'border-radius': ((diyComponent.couponItem.aroundRadius*2)+'rpx')}" @click="couponItemLink(item)">
|
||||
<view class="flex min-w-[110rpx] max-w-[120rpx] items-baseline justify-center truncate price-font mr-[10rpx]" :style="{'color': diyComponent.couponItem.moneyColor}">
|
||||
<text class="text-[26rpx]">￥</text>
|
||||
<text class="text-[46rpx] font-bold truncate">{{parseFloat(item.price)}}</text>
|
||||
</view>
|
||||
<view class="flex flex-col">
|
||||
<view class="text-[28rpx] font-500" :style="{'color': diyComponent.couponItem.textColor}">{{item.type_name}}</view>
|
||||
<view class="text-[#666] text-[24rpx] truncate max-w-[180rpx] mt-[12rpx]" :style="{'color': diyComponent.couponItem.subTextColor}">{{item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 优惠券组件
|
||||
import { ref, reactive, computed, watch, onMounted } from 'vue';
|
||||
import { img, redirect } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { useLogin } from '@/hooks/useLogin';
|
||||
import useMemberStore from '@/stores/member'
|
||||
import { getShopCouponComponents,getCoupon } from '@/addon/shop/api/coupon';
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
|
||||
const diyStore = useDiyStore();
|
||||
const memberStore = useMemberStore()
|
||||
const userInfo = computed(() => memberStore.info)
|
||||
const skeleton = reactive({
|
||||
type: 'banner',
|
||||
loading: false,
|
||||
config: {
|
||||
gridRows: 1,
|
||||
gridRowsGap: '0rpx',
|
||||
headHeight: '170rpx'
|
||||
}
|
||||
})
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
|
||||
const couponStyle4Css = computed(()=>{
|
||||
var style = '';
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
|
||||
return style;
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
const toLink = (url: any)=>{
|
||||
if (diyStore.mode == 'decorate') return;
|
||||
redirect({ url })
|
||||
}
|
||||
|
||||
const couponList: any = ref([])
|
||||
const getShopCouponListFn = () => {
|
||||
let data: object = {
|
||||
num: diyComponent.value.source == 'all' ? diyComponent.value.num : '',
|
||||
coupon_ids: diyComponent.value.source == 'custom' ? diyComponent.value.couponIds : '',
|
||||
};
|
||||
getShopCouponComponents(data).then((res: any) => {
|
||||
couponList.value = res.data
|
||||
skeleton.loading = false;
|
||||
|
||||
// 数据为空时隐藏整个组件
|
||||
// if(couponList.value.length == 0) {
|
||||
// diyComponent.value.pageStyle = '';
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
const couponItemLink = (data:any)=> {
|
||||
// redirect({ url: '/addon/shop/pages/coupon/detail', param: { coupon_id: data.id } })
|
||||
collecting(data.id)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
|
||||
const refresh = () => {
|
||||
|
||||
// 装修模式下设置默认图
|
||||
if (diyStore.mode == 'decorate') {
|
||||
let obj = {
|
||||
title: '满减券',
|
||||
type_name: '通用券',
|
||||
price: 100,
|
||||
min_condition_money: 0,
|
||||
};
|
||||
for (let i = 0; i < 4; i++) {
|
||||
couponList.value.push(obj);
|
||||
}
|
||||
} else {
|
||||
getShopCouponListFn();
|
||||
}
|
||||
}
|
||||
const collecting = (coupon_id: any) => {
|
||||
if (diyStore.mode == 'decorate') return;
|
||||
if (!userInfo.value) {
|
||||
useLogin().setLoginBack({ url: '/addon/shop/pages/coupon/list' })
|
||||
return false
|
||||
}
|
||||
getCoupon({ coupon_id, number: 1 }).then(res => {
|
||||
// detail.value.btnType = 'using'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-wrap{
|
||||
&.style-1{
|
||||
.coupon-list{
|
||||
position: relative;
|
||||
height: 270rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 30rpx 40rpx 0;
|
||||
box-sizing: border-box;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20rpx;
|
||||
right: 20rpx;
|
||||
bottom: 0;
|
||||
background: linear-gradient(#FEF9EC, #FCD9A5);
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
}
|
||||
.coupon-buy-btn{
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
&.style-2{
|
||||
.coupon-list{
|
||||
position: relative;
|
||||
height: 170rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(#EE3928, #EF3F30);
|
||||
}
|
||||
.coupon-buy-btn{
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
&.style-3{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
.desc{
|
||||
padding-top: 12rpx;
|
||||
height: 164rpx;
|
||||
margin-right: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.coupon-list{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.coupon-item-content{
|
||||
position: relative;
|
||||
background: linear-gradient( 160deg, #FD5F2F 0%, #F6370F 100%);
|
||||
width: 146rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12rpx 0 14rpx;
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 12rpx solid #fff;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
right: -5rpx;
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 12rpx solid #fff;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
left: -22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.single-coupon{
|
||||
.coupon-item-content{
|
||||
position: relative;
|
||||
background: linear-gradient( 160deg, #FD5F2F 0%, #F6370F 100%);
|
||||
height: 144rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 0 14rpx;
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 14rpx solid #fff;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
left: 139rpx;
|
||||
transform: rotate(-45deg);
|
||||
top: -18rpx;
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 14rpx solid #fff;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
left: 139rpx;
|
||||
transform: rotate(-45deg);
|
||||
bottom: -16rpx;
|
||||
}
|
||||
.coupon-left{
|
||||
position: relative;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
border-right: 2rpx dashed #fff;
|
||||
width: 2rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-buy-btn{
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
&.style-4{
|
||||
padding: 20rpx 24rpx;
|
||||
.coupon-list{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.coupon-item{
|
||||
width: calc(50% - 6rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
441
src/addon/shop/components/diy/goods-list/index.vue
Normal file
441
src/addon/shop/components/diy/goods-list/index.vue
Normal file
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">
|
||||
<view :style="warpCss" class="overflow-hidden">
|
||||
<view :style="maskLayer"></view>
|
||||
<view :class="{'diy-shop-goods-list relative flex flex-wrap justify-between': diyComponent.style != 'style-2', 'biserial-goods-list': diyComponent.style == 'style-2'}">
|
||||
<block v-if="diyComponent.style == 'style-1'">
|
||||
<view class="bg-white w-full flex p-[20rpx] overflow-hidden" :class="{ 'mt-[20rpx]': index > 0 }" :style="itemCss" v-for="(item,index) in goodsList" :key="item.goods_id" @click="toLink(item)">
|
||||
<u--image radius="var(--goods-rounded-big)" width="200rpx" height="200rpx" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
<view class="flex-1 flex flex-col ml-[20rpx] py-[6rpx] relative">
|
||||
<view class="text-[28rpx] leading-[40rpx] text-[#303133] multi-hidden mb-[10rpx]" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">
|
||||
<view class="brand-tag" v-if="item.goods_brand">
|
||||
{{item.goods_brand.brand_name}}
|
||||
</view>
|
||||
{{item.goods_name}}
|
||||
</view>
|
||||
<view v-if="item.goods_label_name && item.goods_label_name.length && diyComponent.labelStyle.control" class="flex flex-wrap mb-[10rpx]">
|
||||
<template v-for="(tagItem, tagIndex) in item.goods_label_name">
|
||||
<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
|
||||
<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
|
||||
{{tagItem.label_name}}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="mt-auto flex justify-between items-center">
|
||||
<view class="flex flex-col">
|
||||
<view class="flex items-baseline leading-[1]" v-if="diyComponent.priceStyle.control">
|
||||
<view class="font-bold text-[var(--price-text-color)] price-font block truncate max-w-[350rpx]" :style="{ color : diyComponent.priceStyle.color }">
|
||||
<text class="text-[24rpx] font-500 mr-[4rpx]">￥</text>
|
||||
<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2)}}</text>
|
||||
</view>
|
||||
<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
|
||||
</view>
|
||||
<text v-if="diyComponent.saleStyle.control" class="mt-[8rpx] text-[22rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已售{{item.sale_num}}{{item.unit || '件'}}</text>
|
||||
</view>
|
||||
<view v-if="diyComponent.btnStyle.control" class="absolute right-[0] bottom-[0]">
|
||||
<view v-if="diyComponent.btnStyle.style == 'button'" :style="goodsBtnCss" class="px-[18rpx] min-w-[100rpx] box-border h-[48rpx] flex items-center justify-center">
|
||||
<text class="text-[20rpx]">{{diyComponent.btnStyle.text}}</text>
|
||||
</view>
|
||||
<view v-else :style="goodsBtnCss" class="w-[50rpx] h-[50rpx] rounded-[50%] flex items-center justify-center">
|
||||
<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[30rpx]"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="diyComponent.style == 'style-2'">
|
||||
<view>
|
||||
<template v-for="(item,index) in goodsList">
|
||||
<view v-if="(index%2) == 0" class="flex flex-col bg-[#fff] box-border overflow-hidden" :class="{'mt-[24rpx]': index > 1}" :style="itemCss" @click="toLink(item)">
|
||||
<u--image :width="style2Width" :height="style2Width" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image :style="{'width': style2Width,'height': style2Width}" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
<view class="relative min-h-[44rpx] px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
|
||||
<view class="text-[#303133] leading-[40rpx] text-[28rpx] multi-hidden" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">
|
||||
<view class="brand-tag" v-if="item.goods_brand">
|
||||
{{item.goods_brand.brand_name}}
|
||||
</view>
|
||||
{{item.goods_name}}
|
||||
</view>
|
||||
<view v-if="item.goods_label_name && item.goods_label_name.length && diyComponent.labelStyle.control" class="flex flex-wrap">
|
||||
<template v-for="(tagItem, tagIndex) in item.goods_label_name">
|
||||
<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
|
||||
<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
|
||||
{{tagItem.label_name}}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="flex justify-between flex-wrap items-center mt-[20rpx]">
|
||||
<view class="flex flex-col">
|
||||
<view class="flex items-baseline leading-[1]" v-if="diyComponent.priceStyle.control">
|
||||
<view class="text-[var(--price-text-color)] price-font block truncate max-w-[270rpx]" :style="{ color : diyComponent.priceStyle.color }">
|
||||
<text class="text-[24rpx] font-400">￥</text>
|
||||
<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="text-[24rpx] font-500">.{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
|
||||
</view>
|
||||
<text v-if="diyComponent.saleStyle.control" class="text-[22rpx] mt-[8rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已售{{item.sale_num}}{{item.unit || '件'}}</text>
|
||||
</view>
|
||||
<view class="absolute right-[16rpx] bottom-[16rpx]" v-if="diyComponent.btnStyle.control">
|
||||
<view v-if="diyComponent.btnStyle.style == 'button'" :style="goodsBtnCss" class="px-[18rpx] h-[48rpx] flex items-center justify-center">
|
||||
<text class="text-[20rpx]">{{diyComponent.btnStyle.text}}</text>
|
||||
</view>
|
||||
<view v-else :style="goodsBtnCss" class="w-[46rpx] h-[46rpx] rounded-[50%] flex items-center justify-center">
|
||||
<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[30rpx]"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view>
|
||||
<template v-for="(item,index) in goodsList">
|
||||
<view v-if="(index%2) == 1" class="flex flex-col bg-[#fff] box-border overflow-hidden" :class="{'mt-[24rpx]': index > 1}" :style="itemCss" @click="toLink(item)">
|
||||
<u--image :width="style2Width" :height="style2Width" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image :style="{'width': style2Width,'height': style2Width}" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
<view class="relative min-h-[44rpx] px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
|
||||
<view class="text-[#303133] leading-[40rpx] text-[28rpx] multi-hidden" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">
|
||||
<view class="brand-tag" v-if="item.goods_brand">
|
||||
{{item.goods_brand.brand_name}}
|
||||
</view>
|
||||
{{item.goods_name}}
|
||||
</view>
|
||||
<view v-if="item.goods_label_name && item.goods_label_name.length && diyComponent.labelStyle.control" class="flex flex-wrap">
|
||||
<template v-for="(tagItem, tagIndex) in item.goods_label_name">
|
||||
<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
|
||||
<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
|
||||
{{tagItem.label_name}}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="flex justify-between flex-wrap items-center mt-[20rpx]">
|
||||
<view class="flex flex-col">
|
||||
<view class="flex items-baseline leading-[1]" v-if="diyComponent.priceStyle.control">
|
||||
<view class="text-[var(--price-text-color)] price-font block truncate max-w-[270rpx]" :style="{ color : diyComponent.priceStyle.color }">
|
||||
<text class="text-[24rpx] font-400">￥</text>
|
||||
<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="text-[24rpx] font-500">.{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
|
||||
</view>
|
||||
<text v-if="diyComponent.saleStyle.control" class="text-[22rpx] mt-[8rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已售{{item.sale_num}}{{item.unit || '件'}}</text>
|
||||
</view>
|
||||
<view class="absolute right-[16rpx] bottom-[16rpx]" v-if="diyComponent.btnStyle.control">
|
||||
<view v-if="diyComponent.btnStyle.style == 'button'" :style="goodsBtnCss" class="px-[18rpx] h-[48rpx] flex items-center justify-center">
|
||||
<text class="text-[20rpx]">{{diyComponent.btnStyle.text}}</text>
|
||||
</view>
|
||||
<view v-else :style="goodsBtnCss" class="w-[46rpx] h-[46rpx] rounded-[50%] flex items-center justify-center">
|
||||
<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[30rpx]"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="diyComponent.style == 'style-3'">
|
||||
<view :style="style3Css" v-if="goodsList.length">
|
||||
<scroll-view :id="'warpStyle3-'+diyComponent.id" class="whitespace-nowrap min-h-[290rpx]" :scroll-x="true">
|
||||
<view :id="'item'+index+diyComponent.id" class="w-[214rpx] mb-[6rpx] inline-block bg-[#fff] box-border overflow-hidden" :class="{'!mr-[0rpx]' : index == (goodsList.length-1)}" :style="itemCss+itemStyle3" v-for="(item,index) in goodsList" :key="item.goods_id" @click="toLink(item)">
|
||||
<u--image width="214rpx" height="160rpx" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[214rpx] h-[160rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
<view class="relative min-h-[40rpx] px-[10rpx] pt-[16rpx] pb-[10rpx]">
|
||||
<view class="text-[26rpx] text-[#303133] truncate" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">{{item.goods_name}}</view>
|
||||
<view class="text-[var(--price-text-color)] pt-[16rpx] pb-[6rpx] font-bold price-font block truncate max-w-[160rpx] leading-[1] overflow-hidden" :style="{ color : diyComponent.priceStyle.color }" v-if="diyComponent.priceStyle.control">
|
||||
<text class="text-[20rpx] font-400 mr-[2rpx]">￥</text>
|
||||
<text class="text-[36rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2)}}</text>
|
||||
</view>
|
||||
<view v-if="diyComponent.btnStyle.control" class="absolute right-[10rpx] bottom-[12rpx]">
|
||||
<view v-if="diyComponent.btnStyle.style != 'button'" :style="goodsBtnCss" class="w-[40rpx] h-[40rpx] rounded-[50%] flex items-center justify-center">
|
||||
<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[28rpx]"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 商品列表
|
||||
import { ref,reactive,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
|
||||
import { redirect, img, getToken } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { getGoodsComponents } from '@/addon/shop/api/goods';
|
||||
import {useGoods} from '@/addon/shop/hooks/useGoods'
|
||||
|
||||
const diyGoods = useGoods();
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
|
||||
const diyStore = useDiyStore();
|
||||
const emits = defineEmits(['loadingFn']); //商品数据加载完成之后触发
|
||||
|
||||
const skeleton = reactive({
|
||||
type: '',
|
||||
loading: diyStore.mode == 'decorate' ? false : true,
|
||||
config: {}
|
||||
})
|
||||
|
||||
const goodsList = ref<Array<any>>([]);
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if(props.value) {
|
||||
return props.value;
|
||||
}else if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
style += 'position:relative;';
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
|
||||
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
|
||||
style += 'background-size: cover;background-repeat: no-repeat;';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
// 背景图加遮罩层
|
||||
const maskLayer = computed(()=>{
|
||||
var style = '';
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
style += 'position:absolute;top:0;width:100%;';
|
||||
style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
|
||||
style += `height:${height.value}px;`;
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
const itemCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
if(diyComponent.value.style == 'style-2'){
|
||||
if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2);'
|
||||
else style += 'width: calc((100vw - 20rpx) / 2 );'
|
||||
}
|
||||
return style;
|
||||
})
|
||||
|
||||
const goodsBtnCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.btnStyle.style == 'button' && diyComponent.value.btnStyle.aroundRadius) style += 'border-radius:' + diyComponent.value.btnStyle.aroundRadius * 2 + 'rpx;';
|
||||
if (diyComponent.value.btnStyle.startBgColor && diyComponent.value.btnStyle.endBgColor){
|
||||
style += `background:linear-gradient(${diyComponent.value.btnStyle.startBgColor},${diyComponent.value.btnStyle.endBgColor});`;
|
||||
}else{
|
||||
style += 'background-color:' + (diyComponent.value.btnStyle.startBgColor || diyComponent.value.btnStyle.endBgColor) + ';';
|
||||
}
|
||||
if (diyComponent.value.btnStyle.textColor) style += 'color:' + diyComponent.value.btnStyle.textColor + ';';
|
||||
if (diyComponent.value.btnStyle.style == 'button' && diyComponent.value.btnStyle.fontWeight) style += 'font-weight: bold;';
|
||||
return style;
|
||||
})
|
||||
|
||||
const style2Width = computed(() => {
|
||||
var style = '';
|
||||
if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2)'
|
||||
else style += 'calc((100vw - 20rpx) / 2 )'
|
||||
return style;
|
||||
})
|
||||
|
||||
const style3Css = computed(() => {
|
||||
var style = '';
|
||||
style += 'padding:0 20rpx;';
|
||||
if (diyComponent.value.margin && diyComponent.value.margin.both){style += 'width: calc(100vw - ' + ((diyComponent.value.margin.both * 4) + 40) + 'rpx);'}
|
||||
else{style += 'box-sizing: border-box; width: 100vw;';}
|
||||
return style;
|
||||
})
|
||||
|
||||
//商品样式三
|
||||
const itemStyle3 = ref('');
|
||||
const setItemStyle3 = ()=>{
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.createSelectorQuery().in(instance).select('#warpStyle3-'+diyComponent.value.id).boundingClientRect((res:any) => {
|
||||
uni.createSelectorQuery().in(instance).select('#item0'+diyComponent.value.id).boundingClientRect((data:any) => {
|
||||
itemStyle3.value = `margin-right:${(res.width - data.width*3)/2}px;`
|
||||
}).exec()
|
||||
}).exec()
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
itemStyle3.value= 'margin-right:14rpx;'
|
||||
// #endif
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
const getGoodsListFn = () => {
|
||||
let data = {
|
||||
num: (diyComponent.value.source == 'all' || diyComponent.value.source == 'category') ? diyComponent.value.num : '',
|
||||
goods_ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : '',
|
||||
goods_category: diyComponent.value.source == 'category' ? diyComponent.value.goods_category : '',
|
||||
order: diyComponent.value.sortWay
|
||||
}
|
||||
getGoodsComponents(data).then((res) => {
|
||||
goodsList.value = res.data;
|
||||
|
||||
// 数据为空时隐藏整个组件
|
||||
// if(goodsList.value.length == 0 && diyComponent.value.pageStyle) {
|
||||
// diyComponent.value.pageStyle = '';
|
||||
// }
|
||||
|
||||
skeleton.loading = false;
|
||||
emits('loadingFn', res.data)
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
query.select('.diy-shop-goods-list').boundingClientRect((data: any) => {
|
||||
if(data) height.value = data.height;
|
||||
}).exec();
|
||||
}, 1000)
|
||||
}
|
||||
nextTick(()=>{
|
||||
setTimeout(()=>{
|
||||
if(diyComponent.value.style == 'style-3') setItemStyle3()
|
||||
},500)
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const initSkeleton = ()=> {
|
||||
if (diyComponent.value.style == 'style-1') {
|
||||
|
||||
// 单列 风格
|
||||
skeleton.type = 'list'
|
||||
skeleton.type = 'list'
|
||||
skeleton.config = {
|
||||
textRows: 2
|
||||
};
|
||||
} else if (diyComponent.value.style == 'style-2') {
|
||||
|
||||
// 两列 风格
|
||||
skeleton.type = 'waterfall'
|
||||
skeleton.config = {
|
||||
headHeight: '320rpx',
|
||||
gridRows: 1,
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
} else if (diyComponent.value.style == 'style-3') {
|
||||
|
||||
// 横向滑动 风格
|
||||
skeleton.type = 'waterfall'
|
||||
skeleton.config = {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const height = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
// 装修模式下刷新
|
||||
if (diyStore.mode == 'decorate') {
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue && newValue.componentName == 'GoodsList') {
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
query.select('.diy-shop-goods-list').boundingClientRect((data: any) => {
|
||||
if(data) height.value = data.height;
|
||||
}).exec();
|
||||
if(diyComponent.value.style == 'style-3') setItemStyle3()
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}else{
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
refresh();
|
||||
},
|
||||
{deep: true}
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
const refresh = () => {
|
||||
// 装修模式下设置默认图
|
||||
if (diyStore.mode == 'decorate') {
|
||||
let obj = {
|
||||
goods_cover_thumb_mid: "",
|
||||
goods_name: "商品名称",
|
||||
sale_num: "100",
|
||||
unit: "件",
|
||||
goodsSku:{price:100}
|
||||
};
|
||||
goodsList.value.push(obj);
|
||||
goodsList.value.push(obj);
|
||||
nextTick(()=>{
|
||||
if(diyComponent.value.style == 'style-3') setItemStyle3()
|
||||
})
|
||||
}else{
|
||||
initSkeleton();
|
||||
getGoodsListFn();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const toLink = (data: any) => {
|
||||
redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/addon/shop/styles/common.scss';
|
||||
.biserial-goods-list{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
347
src/addon/shop/components/diy/many-goods-list/index.vue
Normal file
347
src/addon/shop/components/diy/many-goods-list/index.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<view class="overflow-hidden">
|
||||
<scroll-view scroll-x="true" class="many-goods-list-head" :class="diyComponent.headStyle" :scroll-into-view="'a' + cateIndex" :style="warpCss">
|
||||
<template v-if="diyComponent.headStyle == 'style-3'">
|
||||
<template v-if="diyComponent.source == 'custom'">
|
||||
<view v-for="(item,index) in diyComponent.list" :key="index" :class="['flex-col inline-flex items-center justify-center', { 'pr-[40rpx]': (index != diyComponent.list.length-1) }]" @click="changeCateIndex(item,index)">
|
||||
<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': index == cateIndex }]" v-if="item.imageUrl" :src="img(item.imageUrl)" mode="aspectFit"/>
|
||||
<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': index == cateIndex }]" v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" />
|
||||
<text :class="['text-[28rpx] mt-[16rpx]', {'font-500 text-[var(--primary-color)]' : index == cateIndex }]">{{ item.title }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="diyComponent.source == 'goods_category'">
|
||||
<view class="pr-[40rpx] inline-flex flex-col items-center justify-center" @click="changeGoodsCategory({ category_id : 0 })">
|
||||
<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': currentCategoryId == 0}]" :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" />
|
||||
<text :class="['text-[28rpx] mt-[16rpx]', {'font-500 text-[var(--primary-color)]': currentCategoryId == 0}]">全部</text>
|
||||
</view>
|
||||
<view v-for="(item,index) in goodsCategoryListData" :key="index" :class="['flex-col inline-flex items-center justify-center', { 'pr-[40rpx]': (index != goodsCategoryListData.length-1) }]" @click="changeGoodsCategory(item)">
|
||||
<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': currentCategoryId == item.category_id}]" v-if="item.image" :src="img(item.image)" mode="aspectFit"/>
|
||||
<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': currentCategoryId == item.category_id}]" v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" />
|
||||
<text :class="['text-[28rpx] mt-[16rpx]', {'font-500 text-[var(--primary-color)]' : currentCategoryId == item.category_id}]">{{ item.category_name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="(item, index) in diyComponent.list" class="scroll-item" :class="[diyComponent.headStyle, { active: index == cateIndex }]" :id="'a' + index" :key="index" @click="changeCateIndex(item, index)">
|
||||
<view class="cate" v-if="diyComponent.headStyle == 'style-1'">
|
||||
<view class="name">{{ item.title }}</view>
|
||||
<view class="desc" :v-if="item.desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
<view v-if="diyComponent.headStyle == 'style-2'" class="cate">
|
||||
<view class="name">{{ item.title }}</view>
|
||||
<text class="nc-iconfont nc-icon-xiaolian-2 !text-[40rpx] text-[var(--primary-color)] transform" v-if="index == cateIndex"></text>
|
||||
</view>
|
||||
<view v-if="diyComponent.headStyle == 'style-4'" class="cate">
|
||||
<view class="name">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
|
||||
<diy-goods-list class="many-goods-list-body" v-if="goodsValue" :value="goodsValue"></diy-goods-list>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 多商品组 组件
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { img } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import diyGoodsList from '@/addon/shop/components/diy/goods-list/index.vue';
|
||||
import { getGoodsCategoryList } from '@/addon/shop/api/goods';
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
|
||||
const diyStore = useDiyStore();
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
// 装修模式下刷新
|
||||
if (diyStore.mode == 'decorate') {
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue && newValue.componentName == 'ManyGoodsList') {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
const refresh = () => {
|
||||
// 装修模式下设置默认图
|
||||
if(diyComponent.value.headStyle == 'style-3' && diyComponent.value.source == 'goods_category' && diyComponent.value.goods_category){
|
||||
getGoodsCategoryFn(diyComponent.value.goods_category);
|
||||
}else{
|
||||
changeCateIndex(diyComponent.value.list[0], 0,true)
|
||||
}
|
||||
}
|
||||
|
||||
const cateIndex = ref(0) // 当前选中的分类id
|
||||
|
||||
const goodsValue:any = ref(null);
|
||||
|
||||
const changeCateIndex = (item:any, index:any, isFirst:any = false)=> {
|
||||
// 装修模式禁止跳转
|
||||
if (diyStore.mode == 'decorate' && !isFirst) return;
|
||||
|
||||
cateIndex.value = index;
|
||||
refreshGoodsList({
|
||||
source: item.source,
|
||||
goods_category: item.goods_category,
|
||||
goods_ids: item.goods_ids
|
||||
})
|
||||
}
|
||||
|
||||
const goodsCategoryListData = ref([])
|
||||
const currentCategoryId = ref(0) // 当前选中的分类id
|
||||
|
||||
// 获取商品分类列表
|
||||
const getGoodsCategoryFn = (pid:any)=> {
|
||||
getGoodsCategoryList({
|
||||
pid
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
goodsCategoryListData.value = res.data;
|
||||
if (goodsCategoryListData.value) {
|
||||
refreshGoodsList({
|
||||
source: 'category',
|
||||
goods_category: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 切换商品分类，查询商品列表数据
|
||||
const changeGoodsCategory = (item :any)=> {
|
||||
// 装修模式禁止跳转
|
||||
if (diyStore.mode == 'decorate') return;
|
||||
currentCategoryId.value = item.category_id
|
||||
refreshGoodsList({
|
||||
source: 'category',
|
||||
goods_category: currentCategoryId.value
|
||||
});
|
||||
}
|
||||
|
||||
const refreshGoodsList = (obj:any)=> {
|
||||
goodsValue.value = {
|
||||
style: diyComponent.value.style,
|
||||
margin: diyComponent.value.margin,
|
||||
source: obj.source,
|
||||
|
||||
num: diyComponent.value.num,
|
||||
sortWay: diyComponent.value.sortWay,
|
||||
|
||||
goodsNameStyle: diyComponent.value.goodsNameStyle,
|
||||
priceStyle: diyComponent.value.priceStyle,
|
||||
saleStyle: diyComponent.value.saleStyle,
|
||||
btnStyle: diyComponent.value.btnStyle,
|
||||
labelStyle: diyComponent.value.labelStyle,
|
||||
|
||||
elementBgColor: diyComponent.value.elementBgColor,
|
||||
topElementRounded: diyComponent.value.topElementRounded,
|
||||
bottomElementRounded: diyComponent.value.bottomElementRounded
|
||||
};
|
||||
|
||||
if (obj.goods_category) {
|
||||
goodsValue.value.goods_category = obj.goods_category
|
||||
}
|
||||
if (obj.goods_ids && obj.goods_ids.length) {
|
||||
goodsValue.value.goods_ids = obj.goods_ids
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.many-goods-list-head {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0 10rpx;
|
||||
margin-bottom:20rpx;
|
||||
position: relative;
|
||||
|
||||
&.style-1{
|
||||
padding: 26rpx 0 14rpx;
|
||||
}
|
||||
|
||||
&.style-2{
|
||||
height: 100rpx;
|
||||
padding: 20rpx 0 16rpx;
|
||||
}
|
||||
|
||||
&.style-3{
|
||||
padding: 26rpx 20rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.style-4{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
padding: 0 20rpx;
|
||||
|
||||
&.style-1{
|
||||
&:first-child {
|
||||
width: calc(25% - 20rpx);
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.name{
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.desc {
|
||||
color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cate {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
height: 38rpx;
|
||||
line-height: 38rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10rpx;
|
||||
min-width: 110rpx;
|
||||
max-width: 220rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2{
|
||||
.cate{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.name{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
&.active {
|
||||
.name{
|
||||
color:var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.nc-iconfont{
|
||||
position: absolute;
|
||||
bottom: -35rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-4{
|
||||
padding: 0 10rpx 14rpx;
|
||||
.cate{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 10rpx 12rpx;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 12rpx;
|
||||
min-width: 136rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #F6F6F6;
|
||||
}
|
||||
.name{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
&.active {
|
||||
.cate{
|
||||
background-color: var(--primary-color-light);
|
||||
border-color: var(--primary-color);
|
||||
position: relative;
|
||||
&::after{
|
||||
content: "";
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
position: absolute;
|
||||
background-color: var(--primary-color-light);
|
||||
border: 2rpx solid transparent;
|
||||
border-bottom-color: var(--primary-color);
|
||||
border-right-color: var(--primary-color);
|
||||
bottom: -12rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
border-bottom-right-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.name{
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.nc-iconfont{
|
||||
position: absolute;
|
||||
bottom: -35rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
241
src/addon/shop/components/diy/shop-exchange-goods/index.vue
Normal file
241
src/addon/shop/components/diy/shop-exchange-goods/index.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">
|
||||
<view class="overflow-hidden" :style="warpCss">
|
||||
<view :style="maskLayer"></view>
|
||||
<view class="diy-shop-exchange-goods-list relative flex flex-wrap justify-between" v-if="goodsList.length">
|
||||
<view class="overflow-hidden bg-[#fff] flex flex-col box-border w-[calc(50%-10rpx)] rounded-[var(--rounded-mid)]" :class="{'mt-[20rpx]': index > 1}" :style="itemCss" v-for="(item,index) in goodsList" :key="item.goods_id" @click="toLink(item)">
|
||||
<u--image :width="style2Width" :height="style2Width" radius="var(--rounded-mid)" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="rounded-[var(--rounded-mid)] overflow-hidden" :style="{'width': style2Width,'height': style2Width}" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
<view class="flex-1 pt-[10rpx] pb-[20rpx] px-[16rpx] flex flex-col justify-between">
|
||||
<view class="text-[#333] leading-[40rpx] text-[28rpx] multi-hidden" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }">{{item.names}}</view>
|
||||
<view class="text-[22rpx] leading-[28rpx] mt-[10rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已兑{{item.total_exchange_num}}人</view>
|
||||
<view class="flex justify-between flex-wrap items-center mt-[16rpx]" >
|
||||
<view class="flex flex-col">
|
||||
<view :style="{ color : diyComponent.priceStyle.mainColor }" class="text-[var(--price-text-color)] price-font ml-[2rpx] flex items-baseline">
|
||||
<text class="text-[32rpx]">{{ item.point }}</text>
|
||||
<text class="text-[24rpx] ml-[4rpx]">积分</text>
|
||||
</view>
|
||||
<view v-if="item.price&&item.price>0" class="flex items-center mt-[6rpx] price-font">
|
||||
<text :style="{ color : diyComponent.priceStyle.mainColor }" class="text-[#333] font-400 text-[32rpx]">+{{ parseFloat(item.price).toFixed(2) }}</text>
|
||||
<text :style="{ color : diyComponent.priceStyle.mainColor }" class="text-[var(--price-text-color)] font-400 ml-[4rpx] text-[24rpx]">元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-[120rpx] h-[54rpx] text-[22rpx] flex-center !text-[#fff] m-0 rounded-full primary-btn-bg remove-border text-center" shape="circle">去兑换</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="!goodsList.length" class="empty-page">
|
||||
<image class="img" :src="img('static/resource/images/system/empty.png')" model="aspectFit" />
|
||||
<view class="desc">暂无商品</view>
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 积分商品列表
|
||||
import { ref,reactive,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
|
||||
import { redirect, img } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { getExchangeComponentsList } from '@/addon/shop/api/point';
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
|
||||
const diyStore = useDiyStore();
|
||||
|
||||
const skeleton = reactive({
|
||||
type: '',
|
||||
loading: diyStore.mode == 'decorate' ? false : true,
|
||||
config: {}
|
||||
})
|
||||
|
||||
const goodsList = ref<Array<any>>([]);
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if(props.value) {
|
||||
return props.value;
|
||||
}else if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
style += 'position:relative;';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
|
||||
style += 'background-size: cover;background-repeat: no-repeat;';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
// 背景图加遮罩层
|
||||
const maskLayer = computed(()=>{
|
||||
var style = '';
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
style += 'position:absolute;top:0;width:100%;';
|
||||
style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
|
||||
style += `height:${height.value}px;`;
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
const itemCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
const style2Width = computed(() => {
|
||||
var style = '';
|
||||
if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2)'
|
||||
else style += 'calc((100vw - 20rpx) / 2 )'
|
||||
return style;
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
const getGoodsListFn = () => {
|
||||
let data = {
|
||||
order: diyComponent.value.sortWay,
|
||||
num: diyComponent.value.source == 'all' ? diyComponent.value.num : '',
|
||||
ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids.join(',') : '',
|
||||
}
|
||||
getExchangeComponentsList(data).then((res) => {
|
||||
goodsList.value = res.data;
|
||||
skeleton.loading = false;
|
||||
|
||||
// 数据为空时隐藏整个组件
|
||||
// if(goodsList.value.length == 0) {
|
||||
// diyComponent.value.pageStyle = '';
|
||||
// }
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
query.select('.diy-shop-exchange-goods-list').boundingClientRect((data: any) => {
|
||||
height.value = data.height;
|
||||
}).exec();
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const initSkeleton = ()=> {
|
||||
if (diyComponent.value.style == 'style-1') {
|
||||
|
||||
// 单列 风格
|
||||
skeleton.type = 'list'
|
||||
skeleton.type = 'list'
|
||||
skeleton.config = {
|
||||
textRows: 2
|
||||
};
|
||||
} else if (diyComponent.value.style == 'style-2') {
|
||||
|
||||
// 两列 风格
|
||||
skeleton.type = 'waterfall'
|
||||
skeleton.config = {
|
||||
headHeight: '320rpx',
|
||||
gridRows: 1,
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
} else if (diyComponent.value.style == 'style-3') {
|
||||
|
||||
// 横向滑动 风格
|
||||
skeleton.type = 'waterfall'
|
||||
skeleton.config = {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const height = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
// 装修模式下刷新
|
||||
if (diyStore.mode == 'decorate') {
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue && newValue.componentName == 'ShopExchangeGoods') {
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
query.select('.diy-shop-exchange-goods-list').boundingClientRect((data: any) => {
|
||||
height.value = data.height;
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}else{
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
refresh();
|
||||
},
|
||||
{deep: true}
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
const refresh = () => {
|
||||
// 装修模式下设置默认图
|
||||
if (diyStore.mode == 'decorate') {
|
||||
let obj = {
|
||||
image: "",
|
||||
names: "商品名称",
|
||||
total_exchange_num: 100,
|
||||
point: 100,
|
||||
price:100
|
||||
};
|
||||
goodsList.value.push(obj);
|
||||
goodsList.value.push(obj);
|
||||
}else{
|
||||
initSkeleton();
|
||||
getGoodsListFn();
|
||||
}
|
||||
}
|
||||
|
||||
const toLink = (data: any) => {
|
||||
redirect({ url: '/addon/shop/pages/point/detail', param: { id: data.id } })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
131
src/addon/shop/components/diy/shop-exchange-info/index.vue
Normal file
131
src/addon/shop/components/diy/shop-exchange-info/index.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view :style="warpCss" class="shop-exchange-info-wrap">
|
||||
<view class="pl-[60rpx] pt-[71rpx] pb-[133rpx] min-h-[382rpx] box-border text-[#fff]">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="navbarInnerStyle"></view>
|
||||
<!-- #endif -->
|
||||
<template v-if="token">
|
||||
<view class="text-[34rpx] leading-[48rpx]">我的积分</view>
|
||||
<view class="text-[80rpx] font-500 price-font leading-[112rpx]">{{memberPoint.point||0}}</view>
|
||||
<view class="text-[24rpx] font-400 leading-[34rpx]">今日获得：{{memberPoint.today_point||0}}</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="pt-[42rpx] title">积分当钱花</view>
|
||||
<view class="text-[26rpx] leading-[36rpx] text-[#FEF2C0] mt-[10rpx]">做任务可领积分</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch,onMounted } from 'vue'
|
||||
import { getExchangePoint } from '@/addon/shop/api/point';
|
||||
import { img, getToken } from '@/utils/common';
|
||||
import { t } from '@/locale'
|
||||
import useDiyStore from '@/app/stores/diy'
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount','global']);
|
||||
|
||||
const diyStore = useDiyStore();
|
||||
const loading = ref(true)
|
||||
const diyComponent = computed(() => {
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.bgUrl) {
|
||||
style += 'background-image:url(' + img(diyComponent.value.bgUrl) + ');';
|
||||
style += 'background-size: 100%;';
|
||||
style += 'backgroundPosition: bottom;';
|
||||
style += 'background-repeat: no-repeat;';
|
||||
}
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
|
||||
return style;
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
refresh();
|
||||
},{deep: true})
|
||||
|
||||
const memberPoint :Record<string, any> = ref({})
|
||||
|
||||
const token = ref(getToken())
|
||||
|
||||
const refresh = () => {
|
||||
// 装修模式
|
||||
if (diyStore.mode == 'decorate') {
|
||||
memberPoint.value = {
|
||||
point: 10500,
|
||||
today_point: 500,
|
||||
}
|
||||
} else {
|
||||
if (!token) {
|
||||
return;
|
||||
}
|
||||
getExchangePointFn()
|
||||
}
|
||||
}
|
||||
|
||||
const getExchangePointFn= async()=> {
|
||||
const res = await getExchangePoint()
|
||||
memberPoint.value = res.data
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
let menuButtonInfo: any = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
|
||||
// 导航栏内部盒子的样式
|
||||
const navbarInnerStyle = computed(() => {
|
||||
let style = '';
|
||||
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
|
||||
// #ifdef MP
|
||||
if (props.global.topStatusBar.isShow == false) {
|
||||
style += 'height:' + menuButtonInfo.height + 'px;';
|
||||
style += 'padding-top:' + menuButtonInfo.top + 'px;';
|
||||
}
|
||||
// #endif
|
||||
return style;
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title{
|
||||
width: 240rpx;
|
||||
height: 58rpx;
|
||||
font-family: FZLanTingHei-EB-GBK, FZLanTingHei-EB-GBK;
|
||||
font-weight: 700;
|
||||
font-size: 48rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: left;
|
||||
color: transparent;
|
||||
background: linear-gradient(90.00002732075491deg, #FFFDF0 5%, #FEF1B9 88%);
|
||||
-webkit-background-clip: text; /* 确保背景色可以应用到文字上 */
|
||||
background-clip: text;
|
||||
}
|
||||
</style>
|
||||
199
src/addon/shop/components/diy/shop-goods-ranking/index.vue
Normal file
199
src/addon/shop/components/diy/shop-goods-ranking/index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<view :style="warpCss" class="overflow-hidden">
|
||||
<scroll-view scroll-x="true" class="w-[100%] whitespace-nowrap">
|
||||
<view class="flex items-start">
|
||||
<view class="inline-block" v-for="(item,index) in diyComponent.list" :key="index">
|
||||
<view class="w-[460rpx] px-[20rpx] pb-[20rpx] pt-[20rpx] flex flex-col items-start" :class="{'mr-[20rpx]': (diyComponent.list.length-1) != index}" :style="swiperItemCss(item)" v-if="listGoods[item.rankIds[0]] && listGoods[item.rankIds[0]].length > 0">
|
||||
<view class="flex items-center h-[50rpx]">
|
||||
<image class="w-[30rpx] h-[30rpx] mr-[10rpx]" v-if="item.imgUrl" :src="img(item.imgUrl)" mode="aspectFill"></image>
|
||||
<view :style="{'color': item.textColor}">
|
||||
<text class="text-[30rpx] font-bold" v-if="item.text">{{ item.text }}</text>
|
||||
<text class="text-[30rpx] font-bold" v-else>{{ listGoodsNames[item.rankIds[0]] }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="mb-[6rpx] h-[35rpx]" :style="{'color': item.subTitle.textColor}" @click="diyStore.toRedirect(item.subTitle.link)">
|
||||
<text class="text-[24rpx]" v-if="item.subTitle.text">{{item.subTitle.text}}</text>
|
||||
<text class="iconfont iconyouV6xx !text-[24rpx]" v-if="item.subTitle.text"></text>
|
||||
</view>
|
||||
<view class="mt-[30rpx]">
|
||||
<view class="flex bg-[#fff] p-[10rpx] rounded-[16rpx] mb-[16rpx]" v-for="(goods, gIndex) in listGoods[item.rankIds[0]]" :class="{'mb-0': gIndex === listGoods[item.rankIds[0]].length - 1}" @click="toDetail(goods.goods_id)">
|
||||
<view class="relative w-[130rpx] h-[130rpx] mr-[16rpx]">
|
||||
<image class="absolute top-[6rpx] left-[8rpx] w-[30rpx] h-[36rpx]" :style="{ zIndex:2 }" :src="getRankBadge(goods.rank_num)" mode="aspectFill"></image>
|
||||
<view class="absolute top-[2rpx] left-[-3rpx] flex items-center justify-center w-[50rpx] h-[50rpx]" :style="{ zIndex: 3 }">
|
||||
<text class="text-[20rpx] font-bold text-[#fff]">{{ goods.rank_num }}</text>
|
||||
</view>
|
||||
<u--image radius="var(--goods-rounded-big)" width="130rpx" height="130rpx" :src="img(goods.goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[130rpx] h-[130rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<view class="flex flex-col">
|
||||
<view class="leading-[1.3] multi-hidden w-[290rpx] text-[28rpx] whitespace-normal">{{goods.goods_name}}</view>
|
||||
<view class="flex items-center justify-between mt-[auto]">
|
||||
<view class="text-[var(--price-text-color)] price-font flex items-baseline">
|
||||
<text class="text-[24rpx] font-500">￥</text>
|
||||
<text class="text-[40rpx] font-500">{{ diyGoods.goodsPrice(goods).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="text-[24rpx] font-500">.{{ diyGoods.goodsPrice(goods).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="iconfont icongouwuche3 text-[var(--primary-color)] border-[2rpx] border-solid border-[var(--primary-color)] rounded-[50%] text-[22rpx] p-[6rpx]"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// 排行榜
|
||||
import { ref,reactive,computed, watch, onMounted } from 'vue';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { redirect, img } from '@/utils/common';
|
||||
import { getRankComponentsGoodsList } from '@/addon/shop/api/rank'
|
||||
import { useGoods } from '@/addon/shop/hooks/useGoods'
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
|
||||
const diyGoods = useGoods();
|
||||
const diyStore = useDiyStore();
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
style += 'position:relative;';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
const swiperItemCss = (data: any)=> {
|
||||
var style = '';
|
||||
if (data.listFrame.startColor) {
|
||||
if (data.listFrame.startColor && data.listFrame.endColor) style += 'background: linear-gradient(90deg, ' + data.listFrame.startColor + ', ' + data.listFrame.endColor + ');';
|
||||
else style = 'background-color:' + data.listFrame.startColor + ';';
|
||||
}
|
||||
if (data.bgUrl) {
|
||||
style += 'background-image:' + 'url(' + img(data.bgUrl) + ');';
|
||||
style += 'background-size: 100%;';
|
||||
style += 'background-repeat: no-repeat;';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
refresh();
|
||||
},{deep: true})
|
||||
|
||||
const refresh = () => {
|
||||
// 装修模式下刷新
|
||||
if (diyStore.mode == 'decorate') {
|
||||
if(diyComponent.value.componentName == 'ShopGoodsRanking') {
|
||||
const fakeGoods = {
|
||||
goods_name: '商品名称',
|
||||
goods_cover_thumb_mid: '',
|
||||
goodsSku: {
|
||||
price: 10
|
||||
},
|
||||
rank_num: 0 // 初始化为 0，后续会递增
|
||||
};
|
||||
diyComponent.value.list.forEach(item => {
|
||||
if (!item.goodsList) {
|
||||
item.goodsList = [];
|
||||
}
|
||||
|
||||
if (item.goodsList.length === 0) {
|
||||
const fakeGoodsList = [];
|
||||
// 生成三个商品，并为每个商品的 rank_num 递增
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const newItem = { ...fakeGoods, rank_num: i + 1 }; // rank_num 从 1 开始递增
|
||||
fakeGoodsList.push(newItem);
|
||||
}
|
||||
listGoods[item.rankIds[0]] = fakeGoodsList;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
getRankGoodsListFn();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const listGoods = reactive({});
|
||||
const listGoodsNames = reactive({});
|
||||
const getRankGoodsListFn = () => {
|
||||
diyComponent.value.list.forEach((item) => {
|
||||
const rank_id = Array.isArray(item.rankIds) ? item.rankIds[0] : 0;
|
||||
const data = {
|
||||
rank_id: item.source === 'custom' ? rank_id : 0
|
||||
};
|
||||
getRankComponentsGoodsList(data).then((res) => {
|
||||
if (res.data && res.data.goods_list.length > 0) {
|
||||
listGoods[item.rankIds[0]] = res.data.goods_list;
|
||||
listGoodsNames[item.rankIds[0]] = res.data.name;
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error('获取商品数据失败:', error);
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
function getRankBadge(sort: any) {
|
||||
switch (sort) {
|
||||
case 1:
|
||||
return img('addon/shop/rank/rank_first.png');
|
||||
case 2:
|
||||
return img('addon/shop/rank/rank_second.png');
|
||||
case 3:
|
||||
return img('addon/shop/rank/rank_third.png');
|
||||
default:
|
||||
return img('addon/shop/rank/rank.png');
|
||||
}
|
||||
}
|
||||
const toDetail = (id: string | number) => {
|
||||
redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: id }, mode: 'navigateTo' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
208
src/addon/shop/components/diy/shop-goods-recommend/index.vue
Normal file
208
src/addon/shop/components/diy/shop-goods-recommend/index.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">
|
||||
<view :style="warpCss" v-if="goodsNum">
|
||||
<view class="w-full">
|
||||
<scroll-view :id="'warpStyle-'+diyComponent.id" class="whitespace-nowrap h-[341rpx] w-full" :scroll-x="true">
|
||||
<block v-for="(item,index) in goodsList" :key="index">
|
||||
<view v-if="item.info" :id="'item'+index+diyComponent.id" class="w-[224rpx] h-[341rpx] mr-[20rpx] inline-block bg-[#fff] box-border overflow-hidden" :class="{'!mr-[0rpx]' : index == (goodsList.length-1)}" :style="itemCss+itemStyle" @click="toLink(item)">
|
||||
<view class="w-full h-[134rpx]" :style="listFrameStyle(item)">
|
||||
<view class="flex pl-[16rpx] pr-[20rpx] justify-between h-[63rpx] items-center">
|
||||
<view class="text-[28rpx] leading-[34rpx] flex-1 mr-[8rpx]" :style="{'color':item.title.textColor}">{{item.title.text}}</view>
|
||||
<view class="w-[68rpx] h-[34rpx] text-[22rpx] text-center leading-[34rpx] text-[#fff] rounded-[17rpx]" :style="moreTitleStyle(item)">{{item.moreTitle.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-[-71rpx] h-[278rpx] w-full px-[20rpx] pt-[18rpx] box-border bg-white" :style="itemCss">
|
||||
<view class="flex items-center justify-center w-[184rpx] h-[184rpx]">
|
||||
<u--image width="184rpx" height="184rpx" :radius="'var(--goods-rounded-small)'" :src="img(item.info.goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[184rpx] h-[184rpx] rounded-[var(--goods-rounded-small)]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<view class="pt-[12rpx]">
|
||||
<view class="h-[44rpx] pl-[4rpx] min-w-[168rpx] box-border flex justify-between items-center mx-auto border-[2rpx] border-solid border-[var(--primary-color)] rounded-[20rpx]" :style="{'border-color':item.button.color}">
|
||||
<view class="text-[var(--price-text-color)] font-bold price-font flex items-baseline leading-[40rpx] flex-1 justify-center" >
|
||||
<view class="leading-[1] max-w-[105rpx] truncate" :style="{ color : diyComponent.priceStyle.mainColor }">
|
||||
<text class="text-[18rpx] font-400 mr-[2rpx]">￥</text>
|
||||
<text class="text-[28rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item.info.goodsSku)).toFixed(2)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-[70rpx] box-border text-right text-[#fff] pr-[8rpx] text-[22rpx] font-500 leading-[44rpx] rounded-tr-[20rpx] rounded-br-[20rpx] rounded-tl-[24rpx] relative" :style="{'background-color':item.button.color}">
|
||||
<text>{{item.button.text}}</text>
|
||||
<image class="w-[24rpx] h-[44rpx] absolute top-[-2rpx] left-0" :src="img('/addon/shop/Union.png')" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 商品推荐
|
||||
import { ref,reactive,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
|
||||
import { redirect, img, deepClone } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { getGoodsComponents } from '@/addon/shop/api/goods';
|
||||
import {useGoods} from '@/addon/shop/hooks/useGoods'
|
||||
|
||||
const diyGoods = useGoods();
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
|
||||
const diyStore = useDiyStore();
|
||||
const emits = defineEmits(['loadingFn']); //商品数据加载完成之后触发
|
||||
|
||||
const goodsNum = ref(0);
|
||||
|
||||
const skeleton = reactive({
|
||||
type: '',
|
||||
loading: false,
|
||||
config: {}
|
||||
})
|
||||
|
||||
const goodsList = ref<Array<any>>([]);
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if(props.value) {
|
||||
return props.value;
|
||||
}else if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
style += 'position:relative;';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
const itemCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
//listFrame样式
|
||||
const listFrameStyle = (item:any)=>{
|
||||
var style= '';
|
||||
if(item.listFrame.startColor){
|
||||
if(item.listFrame.startColor && item.listFrame.endColor) style = `background:linear-gradient( 110deg, ${item.listFrame.startColor} 0%, ${item.listFrame.endColor} 100%);`;
|
||||
else style = 'background-color:' + item.listFrame.startColor + ';';
|
||||
}
|
||||
return style
|
||||
}
|
||||
//moreTitle样式
|
||||
const moreTitleStyle = (item:any)=>{
|
||||
var style= '';
|
||||
if(item.moreTitle.startColor){
|
||||
if(item.moreTitle.startColor && item.moreTitle.endColor) style = `background:linear-gradient( 0deg, ${item.moreTitle.startColor} 0%, ${item.moreTitle.endColor} 100%);`;
|
||||
else style = 'background-color:' + item.moreTitle.startColor + ';';
|
||||
}
|
||||
return style
|
||||
}
|
||||
//商品样式
|
||||
const itemStyle = ref('');
|
||||
const setItemStyle = ()=>{
|
||||
// #ifdef MP-WEIXIN
|
||||
// uni.createSelectorQuery().in(instance).select('#warpStyle-'+diyComponent.value.id).boundingClientRect((res:any) => {
|
||||
// uni.createSelectorQuery().in(instance).select('#item0'+diyComponent.value.id).boundingClientRect((data:any) => {
|
||||
// itemStyle.value = `margin-right:${(res.width - data.width*3)/2}px;`
|
||||
// }).exec()
|
||||
// }).exec()
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
// itemStyle.value= 'margin-right:19rpx;'
|
||||
// #endif
|
||||
if(diyComponent.value.margin && diyComponent.value.margin.both) itemStyle.value = 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 40rpx) / 3);'
|
||||
else itemStyle.value = 'width: calc((100vw - 40rpx) / 3 );'
|
||||
}
|
||||
|
||||
setItemStyle();
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
const getGoodsListFn = () => {
|
||||
let data: any = {}
|
||||
if(diyComponent.value.source == 'all') {
|
||||
data.num = diyComponent.value.list.length;
|
||||
}else if(diyComponent.value.source == 'custom') {
|
||||
data.goods_ids = diyComponent.value.goods_ids;
|
||||
}
|
||||
|
||||
getGoodsComponents(data).then((res) => {
|
||||
let goodsObj = res.data;
|
||||
goodsNum.value = goodsObj.length || 0;
|
||||
diyComponent.value.list.filter((el:any, index)=>{
|
||||
el.info=deepClone(goodsObj[index])
|
||||
});
|
||||
goodsList.value = deepClone(diyComponent.value.list)
|
||||
skeleton.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
refresh();
|
||||
},
|
||||
)
|
||||
const refresh = () => {
|
||||
// 装修模式下设置默认图
|
||||
if (diyStore.mode == 'decorate') {
|
||||
nextTick(() => {
|
||||
if(diyComponent.value && diyComponent.value.list){
|
||||
goodsList.value = diyComponent.value.list.map((el:any)=>{
|
||||
let obj = deepClone(el)
|
||||
obj.info={
|
||||
goods_cover_thumb_mid:'',
|
||||
goodsSku:{
|
||||
price:'10.00'
|
||||
}
|
||||
}
|
||||
return obj
|
||||
})
|
||||
goodsNum.value = 3;
|
||||
setItemStyle()
|
||||
}
|
||||
})
|
||||
}else{
|
||||
getGoodsListFn();
|
||||
}
|
||||
}
|
||||
|
||||
const toLink = (data: any) => {
|
||||
redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.info.goods_id } })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
260
src/addon/shop/components/diy/shop-member-info/index.vue
Normal file
260
src/addon/shop/components/diy/shop-member-info/index.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view :style="warpCss">
|
||||
<view class="px-[30rpx] pt-[30rpx] box-border pb-[30rpx]" :class="{'!pb-[120rpx]':diyComponent.isShowAccount}">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="navbarInnerStyle"></view>
|
||||
<!-- #endif -->
|
||||
<view v-if="info" class="flex items-center">
|
||||
<!-- 唤起获取微信 -->
|
||||
<u-avatar :src="img(info.headimg)" :size="'110rpx'" leftIcon="none" :default-url="img('static/resource/images/default_headimg.png')" @click="clickAvatar" />
|
||||
<view class="ml-[20rpx] flex-1">
|
||||
<view class="text-[#ffffff] flex items-baseline flex-wrap" :style="{ color : diyComponent.textColor }">
|
||||
<view class="text-[32rpx] truncate max-w-[320rpx] font-500 leading-[38rpx]">{{ info.nickname }}</view>
|
||||
<view class="text-[26rpx] font-400 leading-[28rpx] ml-[10rpx]" v-if="info.mobile">{{info.mobile.replace(info.mobile.substring(3,7), "****")}}</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<view v-else-if="!info.mobile" @click="bindMobileFn" class="text-[22rpx] ml-[10rpx] px-[6rpx] border-[1rpx] border-solid border-[#E3E4E9] rounded-[8rpx] h-[34rpx] flex-center" :style="diyComponent.textColor ? { boxShadow: '0 0 0 1rpx ' + diyComponent.textColor, border: 'none' } : {}">{{ t('bindMobile') }}</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button v-else-if="!info.mobile" class="text-[22rpx] ml-[10rpx] bg-[#fff] px-[6rpx] border-[1rpx] border-solid border-[#E3E4E9] rounded-[8rpx] h-[37rpx] flex-center mr-0" :style="diyComponent.textColor ? { boxShadow: '0 0 0 1rpx ' + diyComponent.textColor, border: 'none' } : {}" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">{{t('bindMobile')}}</button>
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
<view class="text-[#666] text-[24rpx] font-400 leading-[28rpx] mt-[14rpx]" :style="{ color : diyComponent.uidTextColor }">UID：{{ info.member_no }}</view>
|
||||
</view>
|
||||
<text @click="redirect({ url: '/app/pages/setting/index' })" class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]" :style="{ color : diyComponent.textColor }"></text>
|
||||
</view>
|
||||
<view v-else class="flex items-center">
|
||||
<u-avatar :src="img('static/resource/images/default_headimg.png')" :size="'100rpx'" @click="toLogin" />
|
||||
<view class="ml-[20rpx] flex-1" @click="toLogin">
|
||||
<view class="text-[32rpx] font-500 leading-[38rpx]" :style="{ color : diyComponent.textColor }">
|
||||
{{ t('login') }}/{{ t('register') }}
|
||||
</view>
|
||||
</view>
|
||||
<view @click="redirect({ url: '/app/pages/setting/index' })">
|
||||
<text class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]" :style="{ color : diyComponent.textColor }"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex mt-[40rpx] items-center" v-if="diyComponent.isShowAccount">
|
||||
<view class="text-center w-[33.333%] flex-shrink-0">
|
||||
<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
|
||||
<view @click="redirect({url: '/app/pages/member/balance'})" :style="{ color : diyComponent.textColor }">{{ money }}</view>
|
||||
</view>
|
||||
<view class="text-[22rpx] font-400">
|
||||
<view @click="redirect({url: '/app/pages/member/balance'})" :style="{ color : '#666' }">{{ t('balance') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center w-[33.333%] flex-shrink-0">
|
||||
<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
|
||||
<view @click="redirect({url: '/app/pages/member/point'})" :style="{ color : diyComponent.textColor }">{{ parseInt(info?.point) || 0 }}</view>
|
||||
</view>
|
||||
<view class="text-[22rpx] font-400">
|
||||
<view @click="redirect({url: '/app/pages/member/point'})" :style="{ color : '#666' }">{{ t('point') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center w-[33.333%] flex-shrink-0" @click="redirect({ url: '/addon/shop/pages/member/my_coupon' })">
|
||||
<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
|
||||
<view :style="{ color : diyComponent.textColor }">{{ couponCount }}</view>
|
||||
</view>
|
||||
<view class="text-[22rpx] font-400">
|
||||
<view :style="{ color : '#666' }">{{ t('coupon') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<information-filling ref="infoFillRef"></information-filling>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 强制绑定手机号 -->
|
||||
<bind-mobile ref="bindMobileRef" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import useMemberStore from '@/stores/member'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
import { getMyCouponCount } from '@/addon/shop/api/coupon'
|
||||
import { img, isWeixinBrowser, redirect, urlDeconstruction, moneyFormat } from '@/utils/common'
|
||||
import { t } from '@/locale'
|
||||
import { wechatSync } from '@/app/api/system'
|
||||
import useDiyStore from '@/app/stores/diy'
|
||||
import useConfigStore from '@/stores/config'
|
||||
import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount','global']);
|
||||
|
||||
const configStore = useConfigStore()
|
||||
const diyStore = useDiyStore();
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
if (diyComponent.value.bgUrl) {
|
||||
style += 'background-image:url(' + img(diyComponent.value.bgUrl) + ');';
|
||||
style += 'background-size: 100%;';
|
||||
style += 'background-repeat: no-repeat;';
|
||||
}
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
|
||||
return style;
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
const memberStore = useMemberStore()
|
||||
|
||||
// #ifdef H5
|
||||
const { query } = urlDeconstruction(location.href)
|
||||
if (query.code && isWeixinBrowser()) {
|
||||
setTimeout(() =>{
|
||||
wechatSync({ code: query.code }).then(res => {
|
||||
memberStore.getMemberInfo()
|
||||
})
|
||||
},1500)
|
||||
}
|
||||
// #endif
|
||||
|
||||
const info = computed(() => {
|
||||
// 装修模式
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return {
|
||||
headimg: '',
|
||||
nickname: '昵称',
|
||||
member_level_name: '普通会员',
|
||||
balance: 0,
|
||||
point: 0,
|
||||
money: 0,
|
||||
mobile: '155****0549',
|
||||
member_no: 'NIU0000021'
|
||||
}
|
||||
} else {
|
||||
getMyCouponCountFn()
|
||||
return memberStore.info;
|
||||
}
|
||||
})
|
||||
|
||||
const money = computed(() => {
|
||||
if (info.value) {
|
||||
let m = parseFloat(info.value.balance) + parseFloat(info.value.money)
|
||||
return moneyFormat(m.toString());
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
})
|
||||
|
||||
const toLogin = () => {
|
||||
let normalLogin = !configStore.login.is_username && !configStore.login.is_mobile && !configStore.login.is_bind_mobile; // 未开启普通登录
|
||||
let authRegisterLogin = !configStore.login.is_auth_register; // 自动注册登录
|
||||
|
||||
// #ifdef H5
|
||||
if (isWeixinBrowser()) {
|
||||
// 微信浏览器
|
||||
if (normalLogin && authRegisterLogin) {
|
||||
uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
|
||||
} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
|
||||
useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
|
||||
} else if (normalLogin && configStore.login.is_auth_register) {
|
||||
// 判断是否开启第三方自动注册登录
|
||||
useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
|
||||
}
|
||||
} else {
|
||||
// 普通浏览器
|
||||
if (normalLogin) {
|
||||
uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
|
||||
} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
|
||||
useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP
|
||||
if (normalLogin && authRegisterLogin) {
|
||||
uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
|
||||
} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
|
||||
useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
|
||||
} else if (normalLogin && configStore.login.is_auth_register) {
|
||||
// 判断是否开启第三方自动注册登录
|
||||
useLogin().getAuthCode()
|
||||
}
|
||||
// #endif
|
||||
|
||||
}
|
||||
|
||||
const infoFillRef:any = ref(false)
|
||||
const clickAvatar = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
infoFillRef.value.show = true
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
if (isWeixinBrowser()) {
|
||||
useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
|
||||
} else {
|
||||
redirect({ url: '/app/pages/member/personal' })
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
|
||||
const couponCount = ref(0)
|
||||
const getMyCouponCountFn= async()=>{
|
||||
try {
|
||||
const res = await getMyCouponCount({status:1})
|
||||
couponCount.value = res.data
|
||||
} catch (e){
|
||||
couponCount.value = 0
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//强制绑定手机号
|
||||
const bindMobileRef: any = ref(null)
|
||||
const bindMobileFn = () =>{
|
||||
bindMobileRef.value.open()
|
||||
}
|
||||
|
||||
let menuButtonInfo: any = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
|
||||
// 导航栏内部盒子的样式
|
||||
const navbarInnerStyle = computed(() => {
|
||||
let style = '';
|
||||
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
|
||||
// #ifdef MP
|
||||
if (props.global.topStatusBar.isShow == false) {
|
||||
style += 'height:' + menuButtonInfo.height + 'px;';
|
||||
style += 'padding-top:' + menuButtonInfo.top + 'px;';
|
||||
}
|
||||
// #endif
|
||||
return style;
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
476
src/addon/shop/components/diy/shop-newcomer/index.vue
Normal file
476
src/addon/shop/components/diy/shop-newcomer/index.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<view class="shop-newcomer overflow-hidden" :style="warpCss" v-if="list && Object.keys(list).length">
|
||||
<view class="style-1 p-[20rpx]" v-if="diyComponent.style.value == 'style-1'">
|
||||
<view class="head flex justify-between items-center mb-[16rpx]" @click="toListFn()">
|
||||
<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
|
||||
<view class="time-wrap flex items-center ml-[auto]" v-show="timeData && Object.keys(timeData).length">
|
||||
<text v-if="!getToken() && diyStore.mode != 'decorate'" class="text-[26rpx]" :style="{color: diyComponent.countDown.otherColor}">活动未开始</text>
|
||||
<block v-else-if="activeState()">
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="mr-[10rpx] text-[24rpx]">距结束还有</text>
|
||||
<up-count-down class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="HH:mm:ss" @change="onChange">
|
||||
<view class="flex">
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="dayTransitionHours()">{{ dayTransitionHours() }}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[6rpx] mr-[7rpx]">:</text>
|
||||
</view>
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[6rpx] mr-[7rpx]">:</text>
|
||||
</view>
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.seconds">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
</view>
|
||||
</view>
|
||||
</up-count-down>
|
||||
</block>
|
||||
<text v-else class="text-[28rpx]" :style="{color: diyComponent.countDown.otherColor}">活动已结束</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="content">
|
||||
<view class="flex">
|
||||
<view class="inline-flex bg-[#fff] p-[16rpx] box-border" :style="commonTempCss()" @click="toDetail(list[0])">
|
||||
<view class="w-[150rpx] h-[150rpx] flex items-center justify-center">
|
||||
<u--image radius="var(--goods-rounded-big)" width="150rpx" height="150rpx" :src="img(list[0].sku_image || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<view class="flex flex-col ml-[20rpx] py-[4rpx] flex-1">
|
||||
<view class="text-[26rpx] w-[200rpx] whitespace-pre-wrap leading-[1.4] multi-hidden" v-if="list[0].goods">{{list[0].goods.goods_name}}</view>
|
||||
<view class="flex items-center justify-between mt-[auto]">
|
||||
<view class="flex flex-1 items-center">
|
||||
<text class="text-[20rpx] text-[#FF0000]">￥</text>
|
||||
<text class="text-[28rpx] font-500 text-[#FF0000] max-w[120rpx] truncate">{{goodsPrice(list[0])}}</text>
|
||||
</view>
|
||||
<text class="italic flex items-center justify-center rounded-[40rpx] w-[60rpx] h-[40rpx] leading-1 text-[#fff] font-bold first-btn-bg">抢</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view v-if="index > 0" class="ml-[10rpx] inline-flex flex-col items-center p-[16rpx] bg-[#fff] box-border" :style="commonTempCss()" @click="toDetail(item)">
|
||||
<view class="w-[110rpx] h-[110rpx] flex items-center justify-center">
|
||||
<u--image radius="var(--goods-rounded-big)" width="110rpx" height="110rpx" :src="img(item.sku_image || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[110rpx] h-[110rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<view class="flex items-center mt-[auto]">
|
||||
<text class="text-[24rpx] font-500">￥</text>
|
||||
<text class="text-[24rpx] font-500 truncate">{{goodsPrice(item)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="style-2 p-[20rpx]" v-if="diyComponent.style.value == 'style-2'">
|
||||
<view class="head flex justify-between items-center mb-[16rpx]" @click="toListFn()">
|
||||
<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
|
||||
<view class="time-wrap flex items-center ml-[auto]" v-show="timeData && Object.keys(timeData).length">
|
||||
<text v-if="!getToken() && diyStore.mode != 'decorate'" class="text-[26rpx]" :style="{color: diyComponent.countDown.otherColor}">活动未开始</text>
|
||||
<block v-else-if="activeState()">
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="mr-[10rpx] text-[24rpx]">倒计时</text>
|
||||
<up-count-down class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="DD:HH:mm" @change="onChange">
|
||||
<view class="flex">
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num" :style="countDownTextCss" v-if="timeData.days">{{ timeData.days }}</text>
|
||||
<text class="time-num" :style="countDownTextCss" v-else>0</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[22rpx] ml-[6rpx] mr-[7rpx]">天</text>
|
||||
</view>
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num" :style="countDownTextCss" v-if="timeData.hours">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
|
||||
<text class="time-num" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[22rpx] ml-[6rpx] mr-[7rpx]">时</text>
|
||||
</view>
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
|
||||
<text class="time-num" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[22rpx] ml-[6rpx] mr-[7rpx]">分</text>
|
||||
</view>
|
||||
</view>
|
||||
</up-count-down>
|
||||
</block>
|
||||
<text v-else class="text-[28rpx]" :style="{color: diyComponent.countDown.otherColor}">活动已结束</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="content">
|
||||
<view class="flex">
|
||||
<view v-for="(item,index) in list" :key="index" class="item-bg mr-[10rpx] inline-flex flex-col items-center p-[6rpx] bg-[#fff] box-border" :style="commonTempCss()" @click="toDetail(item)">
|
||||
<view class="flex items-center justify-center w-[146rpx] h-[146rpx]">
|
||||
<u--image radius="var(--goods-rounded-small)" width="146rpx" height="146rpx" :src="img(item.sku_image || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[146rpx] h-[146rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<image class="h-[32rpx] w-[auto] mt-[12rpx] mb-[8rpx]" :src="img('addon/shop/diy/newcomer/style_2_img.png')" mode="heightFix"></image>
|
||||
<view class="flex items-center text-[#fff] pb-[4rpx]">
|
||||
<text class="text-[20rpx] font-500">￥</text>
|
||||
<text class="text-[30rpx] max-w-[120rpx] font-500 truncate">{{goodsPrice(item)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="style-3 pt-[20rpx] pb-[10rpx] px-[10rpx]" v-if="diyComponent.style.value == 'style-3'">
|
||||
<view class="head flex mx-[10rpx] items-center mb-[12rpx]" @click="toListFn()">
|
||||
<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto] mr-[16rpx]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
|
||||
<view class="time-wrap flex items-center" v-show="timeData && Object.keys(timeData).length">
|
||||
<text v-if="!getToken() && diyStore.mode != 'decorate'" :style="{color: diyComponent.countDown.otherColor}" class="text-[26rpx]">活动未开始</text>
|
||||
<up-count-down v-else-if="activeState()" class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="HH:mm:ss" @change="onChange">
|
||||
<view class="flex">
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="dayTransitionHours()">{{ dayTransitionHours() }}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] font-bold ml-[6rpx] mr-[7rpx]">:</text>
|
||||
</view>
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] font-bold ml-[6rpx] mr-[7rpx]">:</text>
|
||||
</view>
|
||||
<view class="text-[24rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.seconds">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
</view>
|
||||
</view>
|
||||
</up-count-down>
|
||||
<text v-else :style="{color: diyComponent.countDown.otherColor}" class="text-[26rpx]">活动已结束</text>
|
||||
</view>
|
||||
<view class="ml-[auto] rounded-[20rpx] flex items-baseline pl-[16rpx] pr-[10rpx] pt-[10rpx] pb-[10rpx]" :style="subTitleCss" @click.stop="diyStore.toRedirect(diyComponent.subTitle.link)">
|
||||
<text class="text-[22rpx]">{{diyComponent.subTitle.text}}</text>
|
||||
<text class="iconfont iconarrow-right !text-[18rpx] font-bold"></text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="content bg-[#fff] box-border p-[16rpx] rounded-[var(--rounded-small)]">
|
||||
<view class="flex">
|
||||
<view v-for="(item,index) in list" :key="index" class="item-bg inline-flex flex-col items-center box-border" :class="{'mr-[16rpx]': index != (list.length-1)}" :style="commonTempCss()" @click="toDetail(item)">
|
||||
<view class="bg-[#f8f8f8] flex items-center justify-center w-[152rpx] h-[152rpx]">
|
||||
<u--image radius="var(--goods-rounded-small)" width="152rpx" height="152rpx" :src="img(item.sku_image || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[152rpx] h-[152rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<image class="h-[32rpx] w-[auto] mt-[12rpx] mb-[10rpx]" :src="img('addon/shop/diy/newcomer/style_3_img.png')" mode="heightFix"></image>
|
||||
<view class="flex items-center text-[#FF0E00] pb-[2rpx]">
|
||||
<text class="text-[20rpx] font-500">￥</text>
|
||||
<text class="text-[30rpx] max-w-[120rpx] font-500 truncate">{{goodsPrice(item)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="style-4 p-[20rpx] pt-[24rpx]" v-if="diyComponent.style.value == 'style-4'" :style="{ background: 'url(' + img('addon/shop/diy/newcomer/style_4_head.png') + ') no-repeat'}">
|
||||
<view class="head flex mx-[10rpx] items-center justify-between mb-[24rpx]">
|
||||
<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
|
||||
<view class="time-wrap ml-[auto] flex items-center -mt-[8rpx]" v-show="timeData && Object.keys(timeData).length">
|
||||
<text v-if="!getToken() && diyStore.mode != 'decorate'" :style="{color: diyComponent.countDown.otherColor}" class="w-[200rpx] text-center text-[26rpx] pb-[4rpx]">活动未开始</text>
|
||||
<block v-else-if="activeState()">
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="mr-[8rpx] text-[24rpx]">本场仅剩</text>
|
||||
<up-count-down class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="HH:mm:ss" @change="onChange">
|
||||
<view class="flex">
|
||||
<view class="text-[28rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="dayTransitionHours()">{{ dayTransitionHours() }}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[4rpx] font-bold mr-[5rpx]">:</text>
|
||||
</view>
|
||||
<view class="text-[28rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[4rpx] font-bold mr-[5rpx]">:</text>
|
||||
</view>
|
||||
<view class="text-[28rpx] flex items-center">
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.seconds">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
|
||||
<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
|
||||
</view>
|
||||
</view>
|
||||
</up-count-down>
|
||||
</block>
|
||||
<text v-else :style="{color: diyComponent.countDown.otherColor}" class="w-[200rpx] text-center text-[24rpx] pb-[4rpx]">活动已结束</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="content">
|
||||
<view class="flex">
|
||||
<view v-for="(item,index) in list" :key="index" class="item-bg inline-flex flex-col items-center box-border" :class="{'mr-[20rpx]': index != (list.length-1)}" :style="commonTempCss()" @click="toDetail(item)">
|
||||
<view class="relative flex items-center justify-center w-[100%] h-[130rpx] pt-[40rpx] mb-[10rpx]">
|
||||
<u--image radius="var(--goods-rounded-small)" width="130rpx" height="130rpx" :src="img(item.sku_image || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[130rpx] h-[130rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
<view class="content-sign text-[20rpx] text-[#fff]">新人价</view>
|
||||
</view>
|
||||
<view class="w-[210rpx] relative -right-[2rpx] -bottom-[2rpx] flex items-center text-[#FF0E00] pb-[2rpx]">
|
||||
<view class="flex items-center justify-center flex-1">
|
||||
<text class="text-[20rpx] font-500">￥</text>
|
||||
<text class="text-[36rpx] max-w-[140rpx] font-500 truncate">{{goodsPrice(item)}}</text>
|
||||
</view>
|
||||
<text class="btn-bg ml-auto">抢</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 新人专享
|
||||
import { ref,reactive,computed, onMounted } from 'vue';
|
||||
import { redirect, img, getToken } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { getNewcomersComponentsList } from '@/addon/shop/api/newcomer'
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
|
||||
const diyStore = useDiyStore();
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if(props.value) {
|
||||
return props.value;
|
||||
}else if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
/********* 倒计时 - start ***********/
|
||||
// 使用 reactive 创建响应式对象
|
||||
const timeData = ref({});
|
||||
// 定义 onChange 方法
|
||||
const onChange = (e) => {
|
||||
timeData.value = e;
|
||||
};
|
||||
const newcomerTime: any = ref('');
|
||||
/********* 倒计时 - end ***********/
|
||||
|
||||
const goodsPrice = (data: any)=> {
|
||||
let price: any = 0;
|
||||
if (data && data.newcomer_price) {
|
||||
price = Number(data.newcomer_price).toFixed(2);
|
||||
}
|
||||
return price;
|
||||
}
|
||||
|
||||
// 将天转换成时
|
||||
const dayTransitionHours = ()=>{
|
||||
let num = timeData.value.days * 24 + timeData.value.hours;
|
||||
num = num ? num : 0;
|
||||
num = num >=10 ? num : '0' + num;
|
||||
return num;
|
||||
}
|
||||
|
||||
// 活动状态
|
||||
const activeState = ()=>{
|
||||
let bool = true;
|
||||
if(diyStore.mode != 'decorate' && timeData.value.days <= 0 && timeData.value.hours <= 0 && timeData.value.minutes <= 0 && timeData.value.seconds <= 0 && timeData.value.milliseconds <= 0){
|
||||
bool = false;
|
||||
}
|
||||
return bool;
|
||||
}
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
style += 'position:relative;';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
// 倒计时样式
|
||||
const countDownTextCss = computed(() => {
|
||||
var style = '';
|
||||
if(diyComponent.value.countDown && diyComponent.value.countDown.numberBg) {
|
||||
if (diyComponent.value.countDown.numberBg.startColor && diyComponent.value.countDown.numberBg.endColor) style += `background:linear-gradient(${diyComponent.value.countDown.numberBg.startColor},${diyComponent.value.countDown.numberBg.endColor});`;
|
||||
else{
|
||||
style += 'background-color:' + (diyComponent.value.countDown.numberBg.startColor || diyComponent.value.countDown.numberBg.endColor) + ';';
|
||||
}
|
||||
}
|
||||
if (diyComponent.value.countDown.numberColor) style += 'color:' + diyComponent.value.countDown.numberColor + ';';
|
||||
return style;
|
||||
})
|
||||
|
||||
|
||||
// 公共模块颜色
|
||||
const commonTempCss = ()=>{
|
||||
var style = '';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
}
|
||||
|
||||
// 副标题样式
|
||||
const subTitleCss = computed(() => {
|
||||
var style = '';
|
||||
if(diyComponent.value.subTitle) {
|
||||
if (diyComponent.value.subTitle.startColor && diyComponent.value.subTitle.endColor) style += `background:linear-gradient(to right, ${diyComponent.value.subTitle.startColor},${diyComponent.value.subTitle.endColor});`;
|
||||
else{
|
||||
style += 'background-color:' + (diyComponent.value.subTitle.startColor || diyComponent.value.subTitle.endColor) + ';';
|
||||
}
|
||||
}
|
||||
if (diyComponent.value.subTitle.textColor) style += 'color:' + diyComponent.value.subTitle.textColor + ';';
|
||||
return style;
|
||||
})
|
||||
|
||||
const list: any = ref([])
|
||||
const getNewcomerListFn = () => {
|
||||
let data = {
|
||||
limit: diyComponent.value.source == 'all' ? diyComponent.value.num : '',
|
||||
sku_ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : ''
|
||||
}
|
||||
getNewcomersComponentsList(data).then((res: any) => {
|
||||
newcomerTime.value = res.data.validity_time;
|
||||
let now = new Date();
|
||||
let timestamp: any = now.getTime();
|
||||
newcomerTime.value = Number(newcomerTime.value) * 1000 - timestamp;
|
||||
|
||||
list.value = res.data.goods_list
|
||||
|
||||
// 数据为空时隐藏整个组件
|
||||
// if(!(list.value.length && (newcomerTime.value > 0 && isJoin.value == 0))) {
|
||||
// diyComponent.value.pageStyle = '';
|
||||
// }
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 装修模式下刷新
|
||||
if (diyStore.mode == 'decorate') {
|
||||
let obj = {
|
||||
goods: {
|
||||
goods_name: "商品名称"
|
||||
},
|
||||
sku_image: "",
|
||||
newcomer_price: 0.01
|
||||
};
|
||||
list.value.push(obj);
|
||||
list.value.push(obj);
|
||||
list.value.push(obj);
|
||||
} else {
|
||||
getNewcomerListFn();
|
||||
}
|
||||
});
|
||||
|
||||
// 跳转专享列表
|
||||
const toListFn = ()=>{
|
||||
redirect({ url: '/addon/shop/pages/newcomer/list'})
|
||||
}
|
||||
// 跳转详情
|
||||
const toDetail = (data: any)=> {
|
||||
redirect({ url: '/addon/shop/pages/goods/detail', param: { sku_id: data.sku_id, type: 'newcomer_discount' } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shop-newcomer{
|
||||
.style-1{
|
||||
.content{
|
||||
white-space: nowrap;
|
||||
}
|
||||
.first-btn-bg{
|
||||
background: linear-gradient( 140deg, #FF9C24 0%, #FF4837 100%);
|
||||
}
|
||||
.time-num{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 42rpx;
|
||||
padding: 0 6rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.style-2{
|
||||
.content{
|
||||
white-space: nowrap;
|
||||
}
|
||||
.item-bg{
|
||||
background: linear-gradient( 140deg, #FF7A41, #FF2E0A);
|
||||
}
|
||||
.time-num{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 42rpx;
|
||||
padding: 0 6rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.style-3{
|
||||
.content{
|
||||
white-space: nowrap;
|
||||
}
|
||||
.time-num{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 42rpx;
|
||||
padding: 0 6rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.style-4{
|
||||
background-size: 100% 110rpx !important;
|
||||
.content{
|
||||
white-space: nowrap;
|
||||
}
|
||||
.time-wrap{
|
||||
margin-right: -14rpx;
|
||||
.time-num{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 32rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.item-bg{
|
||||
background: linear-gradient(#FFFFFF 60%, #f7f7f7 100%);
|
||||
}
|
||||
.btn-bg{
|
||||
background: linear-gradient( 140deg, #FE2B2B 0%, #FF7236 100%);
|
||||
border-radius: 50%;
|
||||
border-bottom-left-radius: 0;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-sign{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
z-index: 1;
|
||||
background: linear-gradient( 140deg, #FE2B2B 0%, #FF7236 100%);
|
||||
padding: 6rpx 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
src/addon/shop/components/diy/shop-order-info/index.vue
Normal file
156
src/addon/shop/components/diy/shop-order-info/index.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view :style="warpCss">
|
||||
<view class="diy-text relative">
|
||||
<view class="px-[var(--pad-sidebar-m)] pt-[var(--pad-top-m)] pb-[40rpx] flex items-center justify-between">
|
||||
<view @click="diyStore.toRedirect(diyComponent.link)">
|
||||
<view class="max-w-[200rpx] truncate leading-[1] text-[30rpx]" :style="{ fontSize: diyComponent.fontSize * 2 + 'rpx', color: diyComponent.textColor, fontWeight: (diyComponent.fontWeight == 'normal' ? 500 : diyComponent.fontWeight) }">
|
||||
{{ diyComponent.text }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<view @click="redirect({ url: '/addon/shop/pages/order/list'})" class="flex items-center">
|
||||
<text class="max-w-[200rpx] truncate text-[24rpx]" :style="{ color: diyComponent.more.color }">{{ diyComponent.more.text }}</text>
|
||||
<text class="nc-iconfont nc-icon-youV6xx text-[24rpx]" :style="{ color: diyComponent.more.color }"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pb-[var(--pad-top-m)] px-[var(--pad-sidebar-m)] flex items-center justify-between text-center">
|
||||
<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(1)">
|
||||
<view class="relative w-[44rpx] h-[44rpx]">
|
||||
<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order1.png')" />
|
||||
<view v-if="orderInfo.wait_pay"
|
||||
:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_pay > 9 ? 'px-[10rpx]' : '']">
|
||||
{{ orderInfo.wait_pay > 99 ? "99+" : orderInfo.wait_pay }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-[20rpx] leading-[1]" :style="{
|
||||
fontSize: diyComponent.item.fontSize * 2 + 'rpx',
|
||||
color: diyComponent.item.color,
|
||||
fontWeight: diyComponent.item.fontWeight
|
||||
}">待付款</view>
|
||||
</view>
|
||||
<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(2)">
|
||||
<view class="relative w-[44rpx] h-[44rpx]">
|
||||
<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order2.png')" />
|
||||
<view v-if="orderInfo.wait_shipping"
|
||||
:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_shipping > 9 ? 'px-[10rpx]' : '']">
|
||||
{{ orderInfo.wait_shipping > 99 ? "99+" : orderInfo.wait_shipping }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-[20rpx] leading-[1]" :style="{
|
||||
fontSize: diyComponent.item.fontSize * 2 + 'rpx',
|
||||
color: diyComponent.item.color,
|
||||
fontWeight: diyComponent.item.fontWeight
|
||||
}">待发货</view>
|
||||
</view>
|
||||
<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(3)">
|
||||
<view class="relative w-[44rpx] h-[44rpx]">
|
||||
<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order3.png')" />
|
||||
<view v-if="orderInfo.wait_take"
|
||||
:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_take > 9 ? 'px-[10rpx]' : '']">
|
||||
{{ orderInfo.wait_take > 99 ? "99+" : orderInfo.wait_take }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-[20rpx] leading-[1]" :style="{
|
||||
fontSize: diyComponent.item.fontSize * 2 + 'rpx',
|
||||
color: diyComponent.item.color,
|
||||
fontWeight: diyComponent.item.fontWeight
|
||||
}">待收货</view>
|
||||
</view>
|
||||
<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(5)">
|
||||
<view class="relative w-[44rpx] h-[44rpx]">
|
||||
<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order4.png')" />
|
||||
<view v-if="orderInfo.evaluate"
|
||||
:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.evaluate > 9 ? 'px-[10rpx]' : '']">
|
||||
{{ orderInfo.evaluate > 99 ? "99+" : orderInfo.evaluate }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-[20rpx] leading-[1]" :style="{
|
||||
fontSize: diyComponent.item.fontSize * 2 + 'rpx',
|
||||
color: diyComponent.item.color,
|
||||
fontWeight: diyComponent.item.fontWeight
|
||||
}">待评价</view>
|
||||
</view>
|
||||
<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="redirect({ url: '/addon/shop/pages/refund/list'})">
|
||||
<view class="relative w-[44rpx] h-[44rpx]">
|
||||
<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order5.png')" />
|
||||
<view v-if="orderInfo.refund"
|
||||
:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.refund > 9 ? 'px-[10rpx]' : '']">
|
||||
{{ orderInfo.refund > 99 ? "99+" : orderInfo.refund }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-[20rpx] leading-[1]" :style="{
|
||||
fontSize: diyComponent.item.fontSize * 2 + 'rpx',
|
||||
color: diyComponent.item.color,
|
||||
fontWeight: diyComponent.item.fontWeight
|
||||
}">售后/退款</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch,onMounted } from 'vue';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { img,redirect } from '@/utils/common';
|
||||
import {getShopOrderNum} from '@/addon/shop/api/order';
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
|
||||
const diyStore = useDiyStore();
|
||||
const diyComponent = computed(() => {
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
refresh();
|
||||
},{deep: true})
|
||||
|
||||
const refresh = () => {
|
||||
// 装修模式
|
||||
if (diyStore.mode == 'decorate') {
|
||||
orderInfo.value = {
|
||||
}
|
||||
} else {
|
||||
getShopOrderNumFn()
|
||||
}
|
||||
}
|
||||
|
||||
const orderInfo = ref({})
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
style += 'position:relative;';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
const getShopOrderNumFn=()=>{
|
||||
getShopOrderNum().then((res:any)=>{
|
||||
orderInfo.value = res.data
|
||||
})
|
||||
}
|
||||
const toList = (status:any) => {
|
||||
redirect({ url: '/addon/shop/pages/order/list', param: { status } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
109
src/addon/shop/components/diy/shop-search/index.vue
Normal file
109
src/addon/shop/components/diy/shop-search/index.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view :style="warpCss">
|
||||
<view :style="maskLayer"></view>
|
||||
<view class="diy-shop-search relative overflow-hidden flex items-center">
|
||||
<image :src="img('addon/shop/diy/search_01.png')" class="w-[40rpx] h-[40rpx]" mode="widthFix" @click="toLink('/addon/shop/pages/goods/category')"></image>
|
||||
<view class="flex-1 ml-[24rpx] rounded-[32rpx] flex items-center bg-[var(--temp-bg)] opacity-90 py-[10rpx] pl-[38rpx] pr-[32rpx] justify-between h-[60rpx] box-border" @click="toLink('/addon/shop/pages/goods/search')">
|
||||
<text class="text-[var(--text-color-light9)] text-[26rpx]">{{ diyComponent.text }}</text>
|
||||
<text class="nc-iconfont nc-icon-sousuo-duanV6xx1 text-[24rpx]"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 搜索
|
||||
import { ref,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
|
||||
import { img, redirect } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
|
||||
const diyStore = useDiyStore();
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
|
||||
style += 'background-size: cover;background-repeat: no-repeat;';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
// 背景图加遮罩层
|
||||
const maskLayer = computed(()=>{
|
||||
var style = '';
|
||||
if(diyComponent.value.componentBgUrl) {
|
||||
style += 'position:absolute;top:0;width:100%;';
|
||||
style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
|
||||
style += `height:${height.value}px;`;
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
// 装修模式下刷新
|
||||
if (diyStore.mode == 'decorate') {
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue && newValue.componentName == 'ShopSearch') {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const height = ref(0)
|
||||
|
||||
const refresh = ()=> {
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
query.select('.diy-shop-search').boundingClientRect((data: any) => {
|
||||
height.value = data.height;
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
|
||||
const toLink = (url: any)=>{
|
||||
if (diyStore.mode == 'decorate') return false;
|
||||
redirect({ url })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
262
src/addon/shop/components/diy/single-recommend/index.vue
Normal file
262
src/addon/shop/components/diy/single-recommend/index.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<view :style="warpCss" class="overflow-hidden" v-if="goodsList && goodsList[0]">
|
||||
<view class="flex justify-between items-center mb-[20rpx]" v-if="diyComponent.textImg || diyComponent.subTitle.text">
|
||||
<view class="h-[34rpx] flex items-center" v-if="diyComponent.textImg" @click="diyStore.toRedirect(diyComponent.textLink)">
|
||||
<image class="h-[100%] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix" />
|
||||
</view>
|
||||
<view class="flex items-center ml-[auto]" v-if="diyComponent.subTitle.text" @click="diyStore.toRedirect(diyComponent.subTitle.link)" :style="{'color': diyComponent.subTitle.textColor}">
|
||||
<text class="text-[24rpx]">{{diyComponent.subTitle.text}}</text>
|
||||
<text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between">
|
||||
<!-- 轮播图 -->
|
||||
<view class="relative w-[340rpx] overflow-hidden" :style="carouselCss">
|
||||
<view v-if="diyComponent.list.length == 1" class="leading-0 overflow-hidden">
|
||||
<view @click="diyStore.toRedirect(diyComponent.list[0].link)">
|
||||
<image v-if="diyComponent.list[0].imageUrl" :src="img(diyComponent.list[0].imageUrl)" mode="heightFix" class="h-[504rpx] !w-full" :show-menu-by-longpress="true"/>
|
||||
<image v-else :src="img('static/resource/images/diy/figure.png')" mode="heightFix" class="h-[504rpx] !w-full" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</view>
|
||||
<block v-else>
|
||||
<swiper class="swiper ns-indicator-dots-three h-[504rpx]" autoplay="true" circular="true" :indicator-dots="isShowDots" @change="swiperChange"
|
||||
:indicator-color="diyComponent.indicatorColor" :indicator-active-color="diyComponent.indicatorActiveColor">
|
||||
<swiper-item class="swiper-item" v-for="(item) in diyComponent.list" :key="item.id">
|
||||
<view @click="diyStore.toRedirect(item.link)">
|
||||
<view class="item h-[504rpx]">
|
||||
<image v-if="item.imageUrl" :src="img(item.imageUrl)" mode="scaleToFill" class="w-full h-full" :show-menu-by-longpress="true"/>
|
||||
<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" class="w-full h-full" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view v-if="diyComponent.list.length > 1" class="swiper-dot-box straightLineStyle2">
|
||||
<view v-for="(numItem, numIndex) in diyComponent.list" :key="numIndex" :class="['swiper-dot', { active: numIndex == swiperIndex }]" :style="[numIndex == swiperIndex ? { backgroundColor: diyComponent.indicatorActiveColor } : { backgroundColor: diyComponent.indicatorColor }]"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="w-[340rpx] h-[504rpx] flex flex-col bg-[#fff] box-border overflow-hidden" :style="goodsTempCss" @click="toLink(goodsList[0])">
|
||||
<view :style="goodsImgCss" class="w-[346rpx] h-[350rpx] overflow-hidden">
|
||||
<u--image width="346rpx" height="350rpx" :src="img(goodsList[0].goods_cover_thumb_mid || '')" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[346rpx] h-[350rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<view class="px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
|
||||
<view class="text-[#303133] leading-[40rpx] text-[28rpx] truncate" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }">
|
||||
{{goodsList[0].goods_name}}
|
||||
</view>
|
||||
<view class="flex justify-between flex-wrap items-baseline mt-[28rpx]" >
|
||||
<view class="flex items-center">
|
||||
<view class="text-[var(--price-text-color)] price-font truncate max-w-[200rpx]" :style="{ color : diyComponent.priceStyle.mainColor }">
|
||||
<text class="text-[24rpx] font-400">￥</text>
|
||||
<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(goodsList[0])).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="text-[24rpx] font-500">.{{ parseFloat(diyGoods.goodsPrice(goodsList[0])).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<image v-if="diyGoods.priceType(goodsList[0]) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
|
||||
</view>
|
||||
|
||||
<view class="w-[44rpx] h-[44rpx] bg-[red] flex items-center justify-center rounded-[50%]" :style="{ backgroundColor : diyComponent.saleStyle.color }">
|
||||
<text class="iconfont iconjia font-500 text-[32rpx] text-[#fff]"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 精选推荐
|
||||
import { ref,reactive,computed, watch, onMounted } from 'vue';
|
||||
import { redirect, img } from '@/utils/common';
|
||||
import useDiyStore from '@/app/stores/diy';
|
||||
import { getGoodsComponents } from '@/addon/shop/api/goods';
|
||||
import {useGoods} from '@/addon/shop/hooks/useGoods'
|
||||
|
||||
const diyGoods = useGoods();
|
||||
const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
|
||||
const diyStore = useDiyStore();
|
||||
|
||||
const goodsList = ref<Array<any>>([]);
|
||||
|
||||
const diyComponent = computed(() => {
|
||||
if(props.value) {
|
||||
return props.value;
|
||||
}else if (diyStore.mode == 'decorate') {
|
||||
return diyStore.value[props.index];
|
||||
} else {
|
||||
return props.component;
|
||||
}
|
||||
})
|
||||
|
||||
// 轮播指示器
|
||||
let isShowDots = ref(true)
|
||||
// #ifdef H5
|
||||
isShowDots.value = true;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
isShowDots.value = false;
|
||||
// #endif
|
||||
|
||||
const warpCss = computed(() => {
|
||||
var style = '';
|
||||
style += 'position:relative;';
|
||||
if(diyComponent.value.componentStartBgColor) {
|
||||
if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
|
||||
else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
|
||||
}
|
||||
|
||||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
const goodsTempCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||||
|
||||
if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2);'
|
||||
else style += 'width: calc((100vw - 20rpx) / 2 );'
|
||||
return style;
|
||||
})
|
||||
|
||||
const goodsImgCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.topElementRounded) style += 'border-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||||
return style;
|
||||
})
|
||||
|
||||
const carouselCss = computed(() => {
|
||||
var style = '';
|
||||
if (diyComponent.value.topCarouselRounded) style += 'border-top-left-radius:' + diyComponent.value.topCarouselRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.topCarouselRounded) style += 'border-top-right-radius:' + diyComponent.value.topCarouselRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomCarouselRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomCarouselRounded * 2 + 'rpx;';
|
||||
if (diyComponent.value.bottomCarouselRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomCarouselRounded * 2 + 'rpx;';
|
||||
|
||||
if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2);'
|
||||
else style += 'width: calc((100vw - 20rpx) / 2 );'
|
||||
return style;
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.pullDownRefreshCount,
|
||||
(newValue, oldValue) => {
|
||||
// 处理下拉刷新业务
|
||||
}
|
||||
)
|
||||
|
||||
const getGoodsListFn = () => {
|
||||
let data = {
|
||||
num: 1,
|
||||
goods_ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : ''
|
||||
}
|
||||
getGoodsComponents(data).then((res) => {
|
||||
goodsList.value = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
// 装修模式下刷新
|
||||
if (diyStore.mode != 'decorate') {
|
||||
watch(
|
||||
() => diyComponent.value,
|
||||
(newValue, oldValue) => {
|
||||
refresh();
|
||||
},
|
||||
{deep: true}
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
const refresh = () => {
|
||||
// 装修模式下设置默认图
|
||||
if (diyStore.mode == 'decorate') {
|
||||
let obj = {
|
||||
goods_cover_thumb_mid: "",
|
||||
goods_name: "商品名称",
|
||||
sale_num: "100",
|
||||
unit: "件",
|
||||
goodsSku:{price:100}
|
||||
};
|
||||
goodsList.value.push(obj);
|
||||
}else{
|
||||
getGoodsListFn();
|
||||
}
|
||||
}
|
||||
|
||||
const toLink = (data: any) => {
|
||||
redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
|
||||
}
|
||||
|
||||
const swiperIndex = ref(0);
|
||||
const swiperChange = e => {
|
||||
swiperIndex.value = e.detail.current;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper.ns-indicator-dots-three :deep(.uni-swiper-dots-horizontal) {
|
||||
bottom: 12rpx;
|
||||
}
|
||||
.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot) {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot):last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot-active) {
|
||||
width: 30rpx;
|
||||
}
|
||||
|
||||
.swiper-dot-box {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 80rpx 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-dot {
|
||||
background-color: #b2b2b2;
|
||||
width: 10rpx;
|
||||
border-radius: 50%;
|
||||
height: 10rpx;
|
||||
margin: 8rpx;
|
||||
}
|
||||
|
||||
&.straightLineStyle2{
|
||||
.swiper-dot {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
margin: 0;
|
||||
margin-right: 14rpx;
|
||||
&.last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.active {
|
||||
width: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
src/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue
Normal file
141
src/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<!-- 满减 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<u-popup class="manjian-popup" :show="manjianShow" @close="manjianShow = false" zIndex="999999">
|
||||
<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
|
||||
<view class="title !pb-[30rpx]">满减送</view>
|
||||
<scroll-view class="h-[520rpx]" scroll-y="true">
|
||||
<view class="px-[var(--popup-sidebar-m)] pt-[30rpx]">
|
||||
<view v-for="(item,index) in data.content" :key="index" class="mb-[40rpx]">
|
||||
<view class="flex items-center">
|
||||
<text class="nc-iconfont nc-icon-qianbaoyueV6xx !text-[28rpx] mr-[10rpx]"></text>
|
||||
<text class="text-[26rpx] font-500">{{item.limit}}</text>
|
||||
</view>
|
||||
<view class="mt-[20rpx]">
|
||||
<view v-if="item.goods && item.goods.length" class="flex mt-[20rpx]">
|
||||
<view class="w-[100rpx] flex justify-end">
|
||||
<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">赠品</view>
|
||||
</view>
|
||||
<view class="flex-1 ml-[8rpx]">
|
||||
<view class="flex p-[20rpx] bg-[#f8f8f8] rounded-[var(--goods-rounded-big)] overflow-hidden" :class="{'mb-[20rpx]': goodsIndex != (item.goods.length-1)}" v-for="(goodsItem,goodsIndex) in item.goods" :key="goodsIndex" @click="goodsEvent(goodsItem.goods_id)">
|
||||
<u--image radius="var(--goods-rounded-mid)" width="120rpx" height="120rpx" :src="img(goodsItem.sku_image)" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
<view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] pt-[6rpx] pb-[10rpx]">
|
||||
<view class="truncate text-[#303133] text-[24rpx] leading-[32rpx]">
|
||||
{{goodsItem.goods_name}}
|
||||
</view>
|
||||
<view class="flex items-baseline">
|
||||
<view v-if="goodsItem.sku_name" class="truncate text-[22rpx] mt-[4rpx] text-[#999]">
|
||||
{{ goodsItem.sku_name }}
|
||||
</view>
|
||||
<view class="font-400 ml-[auto] text-[24rpx] text-[#303133]">
|
||||
<text>x</text>
|
||||
<text>{{goodsItem.num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="item.give && item.give.length">
|
||||
<view class="flex items-center mt-[24rpx]" v-for="(giveItem,giveIndex) in item.give" :key="giveIndex">
|
||||
<view class="w-[100rpx] flex justify-end">
|
||||
<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">{{giveItem.label}}</view>
|
||||
</view>
|
||||
<text class="text-[24rpx]">{{giveItem.content}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<view class="flex items-baseline mt-[24rpx]" v-if="item.coupon && item.coupon.length">
|
||||
<view class="w-[100rpx] flex justify-end">
|
||||
<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">优惠券</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap flex-1">
|
||||
<text class="flex items-center text-[24rpx] leading-[1.3]" :class="{'mb-[16rpx]': couponIndex != (item.coupon.length-1)}" v-for="(couponItem,couponIndex) in item.coupon" :key="couponIndex">
|
||||
{{couponItem.num}}张{{couponItem.coupon_name}}优惠券
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap">
|
||||
<button class="primary-btn-bg btn" @click="manjianShow = false">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { img, deepClone, getToken, redirect } from '@/utils/common'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { t } from '@/locale'
|
||||
|
||||
const manjianShow = ref(false);
|
||||
const data = ref({});
|
||||
const open = (parameter:any = {})=>{
|
||||
data.value = cloneDeep(parameter);
|
||||
data.value.content = [];
|
||||
data.value.rule_json.forEach((item,index)=>{
|
||||
if(item.is_show || item.is_show == undefined){
|
||||
let obj = {};
|
||||
obj.limit = `门槛满${data.value.condition_type == 'over_n_yuan' ? parseFloat(item.limit).toFixed(2) : item.limit }${data.value.condition_type == 'over_n_yuan' ? '元' : '件'}`;
|
||||
if(item.is_give_goods){
|
||||
obj.goods = deepClone(item.goods);
|
||||
}
|
||||
obj.give = [];
|
||||
if(item.is_discount && item.discount_money){
|
||||
obj.give.push({
|
||||
label: '满减',
|
||||
content: `订单金额${item.discount_type == 1 ? '减' : '打'}${item.discount_type == 1 ? parseFloat(item.discount_money).toFixed(2) : item.discount_money}${item.discount_type == 1 ? '元' : '折'}`
|
||||
})
|
||||
}
|
||||
if(item.is_free_shipping){
|
||||
obj.give.push({
|
||||
label: '包邮',
|
||||
content: '商品包邮'
|
||||
});
|
||||
}
|
||||
if(item.is_give_point && item.point){
|
||||
obj.give.push({
|
||||
label: '积分',
|
||||
content: `送${item.point}积分`
|
||||
});
|
||||
}
|
||||
if(item.is_give_balance && item.balance){
|
||||
obj.give.push({
|
||||
label: '余额',
|
||||
content: `送${parseFloat(item.balance).toFixed(2)}余额`
|
||||
});
|
||||
}
|
||||
if(item.is_give_coupon){obj.coupon = item.coupon;}
|
||||
data.value.content.push(obj);
|
||||
}
|
||||
});
|
||||
manjianShow.value = true;
|
||||
}
|
||||
|
||||
const goodsEvent = (id : number) => {
|
||||
redirect({
|
||||
url: '/addon/shop/pages/goods/detail',
|
||||
param: {
|
||||
goods_id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .manjian-popup .u-slide-up-enter-to{
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="goods-recommend">
|
||||
<view class="mt-[60rpx] flex flex-col items-center sidebar-margin pb-[30rpx]">
|
||||
<view class="flex items-center mb-[30rpx]" v-if="goodsList && Object.keys(goodsList).length">
|
||||
<image class="w-[38rpx] h-[22rpx]" :src="img('addon/shop_fenxiao/level/title_left.png')" mode="aspectFill"></image>
|
||||
<text class="text-[30rpx] mx-[18rpx] font-500 text-[#EF000C]">猜你喜欢</text>
|
||||
<image class="w-[38rpx] h-[22rpx]" :src="img('addon/shop_fenxiao/level/title_right.png')" mode="aspectFill"></image>
|
||||
</view>
|
||||
<diy-goods-list @loadingFn="getGoodsListFn" :component="goodsData"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { img } from '@/utils/common';
|
||||
import { ref } from 'vue'
|
||||
import diyGoodsList from '@/addon/shop/components/diy/goods-list/index.vue';
|
||||
// 获取分销商品数据
|
||||
const goodsList = ref()
|
||||
const getGoodsListFn = (data: any)=>{
|
||||
goodsList.value = data || {}
|
||||
}
|
||||
// 商品列表组件
|
||||
const goodsData = ref({
|
||||
style: 'style-2',
|
||||
num: 10,
|
||||
source: 'all',
|
||||
topElementRounded: 12,
|
||||
bottomElementRounded: 12,
|
||||
margin: {
|
||||
both: 10,
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
priceStyle: {
|
||||
mainColor: "#ff4142",
|
||||
control: true
|
||||
},
|
||||
goodsNameStyle:{
|
||||
color: "#303133",
|
||||
control: true,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
saleStyle: {
|
||||
color: "#999",
|
||||
control: true
|
||||
},
|
||||
labelStyle: {
|
||||
isShow: true,
|
||||
control: true
|
||||
},
|
||||
btnStyle: {
|
||||
fontWeight:false,
|
||||
padding: 0,
|
||||
aroundRadius:25,
|
||||
textColor: "#fff",
|
||||
startBgColor: '#ff4142',
|
||||
endBgColor: '#ff4142',
|
||||
style: 'nc-icon-gouwuche1',
|
||||
control: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
450
src/addon/shop/components/ns-goods-sku/ns-goods-sku.vue
Normal file
450
src/addon/shop/components/ns-goods-sku/ns-goods-sku.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<view @touchmove.prevent.stop>
|
||||
<u-overlay :show="goodsSkuPop" @click="closeFn" zIndex="490">
|
||||
<u-popup class="popup-type" :show="goodsSkuPop" @close="closeFn" mode="bottom" :overlay="false" zIndex="500">
|
||||
<view class="py-[32rpx] relative" v-if="goodsDetail.detail" @touchmove.prevent.stop>
|
||||
<view class="flex px-[32rpx]" :class="{'mb-[58rpx]':!(goodsDetail.is_newcomer && goodsDetail.newcomer_price != goodsDetail.price && (Object.keys(cartSkuList).length?parseInt(cartSkuList.num)+buyNum:buyNum)>1)}">
|
||||
|
||||
<view class="rounded-[var(--goods-rounded-big)] overflow-hidden w-[180rpx] h-[180rpx]">
|
||||
<u--image width="180rpx" height="180rpx" :src="img(goodsDetail.detail.sku_image)" @click="imgListPreview(goodsDetail.detail.sku_image)" model="aspectFill">
|
||||
<template #error>
|
||||
<image class="w-[180rpx] h-[180rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
<view class="flex flex-1 flex-col justify-between ml-[24rpx] py-[10rpx]">
|
||||
<view class="w-[100%]">
|
||||
<view class="text-[var(--price-text-color)] flex items-baseline">
|
||||
<text class="text-[32rpx] font-bold price-font">￥</text>
|
||||
<text class="text-[48rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="text-[32rpx] mr-[6rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
|
||||
<image class="h-[24rpx] ml-[6rpx] max-w-[60rpx]" v-if="priceType() == 'newcomer_price'" :src="img('addon/shop/newcomer.png')" mode="heightFix" />
|
||||
<image class="h-[24rpx] ml-[6rpx] max-w-[44rpx]" v-if="priceType() == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
|
||||
<image class="h-[24rpx] ml-[6rpx] max-w-[72rpx]" v-if="priceType() == 'discount_price'" :src="img('addon/shop/discount.png')" mode="heightFix" />
|
||||
</view>
|
||||
<view class="text-[26rpx] leading-[32rpx] text-[var(--text-color-light6)] mt-[12rpx]">库存{{goodsDetail.detail.stock}}{{ goodsDetail.goods.unit }}</view>
|
||||
</view>
|
||||
<view class="text-[26rpx] leading-[30rpx] text-[var(--text-color-light6)] w-[100%] max-h-[60rpx] multi-hidden" v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length">已选规格：{{goodsDetail.detail.sku_spec_format}}</view>
|
||||
<!-- <view v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length">
|
||||
<text>已选规格：{{goodsDetail.detail.sku_spec_format}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center px-[32rpx] pt-[8rpx] pb-[16rpx] h-[58rpx] box-border" v-if="goodsDetail.is_newcomer && goodsDetail.newcomer_price != goodsDetail.price && (Object.keys(cartSkuList).length?parseInt(cartSkuList.num)+buyNum:buyNum)>1">
|
||||
<image class="h-[24rpx] w-[56rpx]" :src="img('addon/shop/newcomer.png')" mode="aspectFit" />
|
||||
<view class="text-[24rpx] text-[#FFB000] leading-[34rpx] ml-[8rpx]">第1{{goodsDetail.goods.unit}}，￥{{parseFloat(goodsDetail.newcomer_price).toFixed(2)}}/{{goodsDetail.goods.unit}}；第{{(parseInt(cartSkuList.num||0)+buyNum)>2?'2~'+(parseInt(cartSkuList.num||0)+buyNum):'2'}}{{goodsDetail.goods.unit}}，￥{{parseFloat(parseFloat(goodsPrice)).toFixed(2)}}/{{goodsDetail.goods.unit}}</view>
|
||||
</view>
|
||||
<scroll-view class="h-[500rpx] px-[32rpx] box-border mb-[60rpx]" scroll-y="true">
|
||||
<view :class="{'mt-[20rpx]': 0 != index }" v-for="(item,index) in goodsDetail.goodsSpec" :key="index">
|
||||
<view class="text-[28rpx] leading-[36rpx] mb-[24rpx]">{{item.spec_name}}</view>
|
||||
<view class="flex flex-wrap">
|
||||
<view class="box-border bg-[var(--temp-bg)] text-[24rpx] px-[44rpx] text-center h-[56rpx] flex-center mr-[20rpx] mb-[20rpx] border-1 border-solid rounded-[50rpx] border-[var(--temp-bg)]"
|
||||
:class="{'!border-[var(--primary-color)] text-[var(--primary-color)] !bg-[var(--primary-color-light)]': subItem.selected}"
|
||||
v-for="(subItem,subIndex) in item.values" :key="subIndex" @click="change(subItem, index)">
|
||||
{{subItem.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center mt-[20rpx]">
|
||||
<view class="text-[28rpx]">购买数量</view>
|
||||
<text v-if="maxBuyShow > 0 && minBuyShow > 1" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">
|
||||
({{ minBuyShow }}{{ goodsDetail.goods.unit }}起售，限购{{ maxBuyShow }}{{ goodsDetail.goods.unit }})
|
||||
</text>
|
||||
<text v-else-if="maxBuyShow > 0" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">(限购{{ maxBuyShow }}{{ goodsDetail.goods.unit }})</text>
|
||||
<text v-else-if="minBuyShow > 1" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">({{ minBuyShow }}{{ goodsDetail.goods.unit }}起售)</text>
|
||||
|
||||
<u-number-box :min="minBuy" :max="maxBuy" integer :step="1" input-width="68rpx" v-model="buyNum" input-height="52rpx">
|
||||
<template #minus>
|
||||
<view class="relative w-[30rpx] h-[30rpx]" @click="reduceNumChange">
|
||||
<text class="text-[30rpx] nc-iconfont nc-icon-jianV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum <= minBuy }"></text>
|
||||
</view>
|
||||
</template>
|
||||
<template #input>
|
||||
<input class="text-[#303133] text-[28rpx] mx-[10rpx] w-[80rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]" type="number" @input="goodsSkuInputFn" @blur="goodsSkuBlurFn" v-model="buyNum" />
|
||||
</template>
|
||||
<template #plus>
|
||||
<view class="relative w-[30rpx] h-[30rpx]" @click="addNumChange">
|
||||
<text class="text-[30rpx] nc-iconfont nc-icon-jiahaoV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum >= maxBuy }"></text>
|
||||
</view>
|
||||
</template>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="px-[20rpx]">
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<button v-if="goodsDetail.detail.stock > 0" hover-class="none" class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 rounded-[50rpx] primary-btn-bg" type="primary" @click="confirm">确定</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<template v-if="goodsDetail.detail.stock > 0">
|
||||
<button v-if="isBindMobile && userInfo && !userInfo.mobile" hover-class="none" class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 rounded-[50rpx] primary-btn-bg" type="primary" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">确定</button>
|
||||
<button v-else hover-class="none" class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 rounded-[50rpx] primary-btn-bg" type="primary" @click="confirm">确定</button>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
|
||||
<button hover-class="none" v-else class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 text-[#fff] bg-[#ccc] rounded-[50rpx]">已售罄</button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</u-overlay>
|
||||
<!-- 强制绑定手机号 -->
|
||||
<bind-mobile ref="bindMobileRef" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, toRaw } from 'vue';
|
||||
import { img, redirect, getToken } from '@/utils/common'
|
||||
import useCartStore from '@/addon/shop/stores/cart'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
import useMemberStore from '@/stores/member'
|
||||
import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { t } from '@/locale'
|
||||
|
||||
const props = defineProps(['goodsDetail']);
|
||||
const goodsSkuPop = ref(false);
|
||||
const callback:any = ref(null);
|
||||
const currSpec = ref({
|
||||
skuId: "",
|
||||
name: []
|
||||
})
|
||||
const openType = ref("");
|
||||
const buyNum = ref(1)
|
||||
|
||||
const maxBuy = ref(0); // 限购
|
||||
const minBuy = ref(0); // 起售
|
||||
const maxBuyShow = ref(0); // 限购
|
||||
const minBuyShow = ref(0); // 起售
|
||||
|
||||
// 商品价格
|
||||
const goodsPrice = computed(() => {
|
||||
let price = "0.00";
|
||||
if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'newcomer_discount' && goodsDetail.value.is_newcomer && goodsDetail.value.newcomer_price != goodsDetail.value.price && (Object.keys(cartSkuList.value).length ? parseInt(cartSkuList.value.num) + buyNum.value : buyNum.value) < 2) {
|
||||
// 新人价
|
||||
price = goodsDetail.value.newcomer_price;
|
||||
} else if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'discount' && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.is_discount && goodsDetail.value.sale_price != goodsDetail.value.price) {
|
||||
price = goodsDetail.value.sale_price // 折扣价
|
||||
} else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
|
||||
price = goodsDetail.value.member_price // 会员价
|
||||
} else {
|
||||
price = goodsDetail.value.price
|
||||
}
|
||||
return price;
|
||||
})
|
||||
|
||||
// 价格类型
|
||||
const priceType = () => {
|
||||
let type = "";
|
||||
if (goodsDetail.value.type == 'newcomer_discount' && Object.keys(goodsDetail.value).length && goodsDetail.value.is_newcomer && goodsDetail.value.newcomer_price != goodsDetail.value.price && getToken()) {
|
||||
type = 'newcomer_price'// 新人
|
||||
} else if (goodsDetail.value.type == 'discount' && Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.is_discount && goodsDetail.value.sale_price != goodsDetail.value.price) {
|
||||
type = 'discount_price'// 折扣
|
||||
} else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
|
||||
type = 'member_price' // 会员价
|
||||
}
|
||||
return type;
|
||||
}
|
||||
|
||||
// 会员信息
|
||||
const memberStore = useMemberStore()
|
||||
const userInfo = computed(() => memberStore.info)
|
||||
|
||||
// 购物车数量
|
||||
const cartStore = useCartStore();
|
||||
cartStore.getList();
|
||||
const cartSkuList = computed(()=>{
|
||||
if(goodsDetail.value && cartStore.cartList['goods_' + goodsDetail.value.goods_id] && cartStore.cartList['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id]) {
|
||||
return cartStore.cartList['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id];
|
||||
}else{
|
||||
return {}
|
||||
}
|
||||
})
|
||||
const cartList = computed(() => cartStore.cartList)
|
||||
const open = (type="",fn = "")=>{
|
||||
openType.value = type;
|
||||
goodsSkuPop.value = true;
|
||||
callback.value = fn;
|
||||
}
|
||||
|
||||
const goodsSkuInputFn = ()=>{
|
||||
setTimeout(() => {
|
||||
if(!buyNum.value || buyNum.value <= minBuy.value ){
|
||||
buyNum.value = minBuy.value || 1;
|
||||
}
|
||||
if(buyNum.value >= maxBuy.value){
|
||||
buyNum.value = maxBuy.value;
|
||||
}
|
||||
// 起售大于库存，初始值也应该是零
|
||||
if(minBuy.value > goodsDetail.value.detail.stock){
|
||||
buyNum.value = 0;
|
||||
}
|
||||
},0)
|
||||
}
|
||||
const goodsSkuBlurFn = ()=>{
|
||||
setTimeout(() => {
|
||||
if(!buyNum.value || buyNum.value <= minBuy.value ){
|
||||
buyNum.value = minBuy.value || 1;
|
||||
}
|
||||
if(buyNum.value >= maxBuy.value){
|
||||
buyNum.value = maxBuy.value;
|
||||
}
|
||||
|
||||
// 起售大于库存，初始值也应该是零
|
||||
if(minBuy.value > goodsDetail.value.detail.stock){
|
||||
buyNum.value = 0;
|
||||
uni.showToast({
|
||||
title: '商品库存小于起购数量',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},0)
|
||||
}
|
||||
|
||||
const closeFn = ()=>{
|
||||
goodsSkuPop.value = false
|
||||
}
|
||||
|
||||
const goodsDetail = computed(() => {
|
||||
let data = cloneDeep(props.goodsDetail);
|
||||
|
||||
// 重组数据结构
|
||||
if(Object.keys(data).length){
|
||||
|
||||
if(!Object.keys(currSpec.value.name).length) currSpec.value.name = data.sku_spec_format.split(",");
|
||||
|
||||
data.goodsSpec.forEach((item: any,index: any)=>{
|
||||
let specName = item.spec_values.split(",");
|
||||
item.values = [];
|
||||
specName.forEach((specItem: any, specIndex: any)=>{
|
||||
item.values[specIndex] = {};
|
||||
item.values[specIndex].name = specItem;
|
||||
item.values[specIndex].selected = false;
|
||||
item.values[specIndex].disabled = false;
|
||||
|
||||
// 选中规格
|
||||
currSpec.value.name.forEach((currSpecItem, currSpecIndex)=>{
|
||||
if(currSpecIndex == index && currSpecItem == specItem){
|
||||
item.values[specIndex].selected = true;
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
getSkuId();
|
||||
|
||||
// 当前详情内容
|
||||
if(data.skuList && Object.keys(data.skuList).length){
|
||||
data.skuList.forEach((idItem: any, idIndex: any)=>{
|
||||
if(idItem.sku_id == currSpec.value.skuId){
|
||||
data.detail = idItem;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 限购 - 是否开启限购
|
||||
if(data.goods.is_limit){
|
||||
if(data.goods.max_buy){
|
||||
let max_buy = 0;
|
||||
if(data.goods.limit_type == 1){ //单次限购
|
||||
max_buy = data.goods.max_buy;
|
||||
}else{ // 单人限购
|
||||
let buyVal = data.goods.max_buy - (data.goods.has_buy||0);
|
||||
max_buy = buyVal > 0 ? buyVal : 0;
|
||||
}
|
||||
if(max_buy > data.detail.stock){
|
||||
maxBuy.value = data.detail.stock
|
||||
}else if(max_buy <= data.detail.stock){
|
||||
maxBuy.value = max_buy;
|
||||
}
|
||||
|
||||
// 限购开启且最大购买变为零时，初始值也应该是零
|
||||
if(maxBuy.value == 0){
|
||||
buyNum.value = 0;
|
||||
}
|
||||
}
|
||||
// 仅用于展示
|
||||
maxBuyShow.value = data.goods.max_buy; // 限购
|
||||
}else{
|
||||
maxBuy.value = data.detail.stock;
|
||||
}
|
||||
|
||||
// 起售
|
||||
minBuy.value = data.goods.min_buy > 0 ? data.goods.min_buy : 1;
|
||||
// 起售大于库存，初始值也应该是零
|
||||
if(minBuy.value > data.detail.stock){
|
||||
buyNum.value = 0;
|
||||
}else{
|
||||
buyNum.value = minBuy.value;
|
||||
}
|
||||
// 仅用于展示
|
||||
minBuyShow.value = data.goods.min_buy;
|
||||
return data;
|
||||
})
|
||||
|
||||
const change = (data: any, index: any)=>{
|
||||
currSpec.value.name[index] = data.name;
|
||||
getSkuId(); // 刷新当前规格信息
|
||||
}
|
||||
|
||||
const emits = defineEmits(['change'])
|
||||
const getSkuId = ()=>{
|
||||
props.goodsDetail.skuList.forEach((skuItem: any, skuIndex: any)=>{
|
||||
if(skuItem.sku_spec_format == currSpec.value.name.toString()){
|
||||
currSpec.value.skuId = skuItem.sku_id
|
||||
emits('change',skuItem.sku_id)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addNumChange = () => {
|
||||
if(minBuy.value && minBuy.value > goodsDetail.value.detail.stock){
|
||||
uni.showToast({ title: '商品库存小于起购数量', icon: 'none' })
|
||||
return;
|
||||
}
|
||||
if(goodsDetail.value.goods.is_limit){
|
||||
let tips = `该商品单次限购${goodsDetail.value.goods.max_buy}件`;
|
||||
if(goodsDetail.value.goods.limit_type != 1){ //单次限购
|
||||
tips = `该商品每人限购${goodsDetail.value.goods.max_buy}件`;
|
||||
if(goodsDetail.value.goods.max_buy - maxBuy.value){
|
||||
tips += `,已购${goodsDetail.value.goods.max_buy - maxBuy.value}件`;
|
||||
}
|
||||
}
|
||||
if(buyNum.value >= maxBuy.value){
|
||||
uni.showToast({ title: tips, icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reduceNumChange = () => {
|
||||
if(minBuy.value > 1){
|
||||
let tips = `该商品起购${minBuy.value}件`;
|
||||
if(buyNum.value <= minBuy.value){
|
||||
uni.showToast({ title: tips, icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//强制绑定手机号
|
||||
const bindMobileRef: any = ref(null)
|
||||
const isBindMobile = ref(uni.getStorageSync('isbindmobile'))
|
||||
|
||||
//提交
|
||||
const confirm = ()=> {
|
||||
if(buyNum.value < 1) return;
|
||||
|
||||
// 检测是否登录
|
||||
if (!userInfo.value) {
|
||||
useLogin().setLoginBack({
|
||||
url: '/addon/shop/pages/goods/detail',
|
||||
param: {
|
||||
sku_id: goodsDetail.value.sku_id,
|
||||
type: goodsDetail.value.type
|
||||
}
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
// 绑定手机号
|
||||
if (uni.getStorageSync('isbindmobile')) {
|
||||
bindMobileRef.value.open()
|
||||
return false
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 加入购物车
|
||||
if (openType.value == 'join_cart') {
|
||||
let num = 0;
|
||||
let limitNum = 0;
|
||||
let cartId = "";
|
||||
|
||||
if (cartList.value['goods_' + goodsDetail.value.goods_id] && cartList.value['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id]) {
|
||||
num = toRaw(cartList.value['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id].num);
|
||||
cartId = toRaw(cartList.value['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id].id)
|
||||
}
|
||||
if (cartList.value['goods_' + goodsDetail.value.goods_id] && cartList.value['goods_' + goodsDetail.value.goods_id]) {
|
||||
limitNum = toRaw(cartList.value['goods_' + goodsDetail.value.goods_id].totalNum);
|
||||
}
|
||||
|
||||
num += Number(buyNum.value);
|
||||
limitNum += Number(buyNum.value);
|
||||
/************** 限购-start **************/
|
||||
if(goodsDetail.value.goods.is_limit){
|
||||
let tips = `该商品单次限购${goodsDetail.value.goods.max_buy}件`;
|
||||
if(goodsDetail.value.goods.limit_type != 1){ //单次限购
|
||||
tips = `该商品每人限购${goodsDetail.value.goods.max_buy}件`;
|
||||
if(goodsDetail.value.goods.max_buy - maxBuy.value){
|
||||
tips += `,已购${goodsDetail.value.goods.max_buy - maxBuy.value}件`;
|
||||
}
|
||||
}
|
||||
if(limitNum > maxBuy.value){
|
||||
uni.showToast({ title: tips, icon: 'none' })
|
||||
return false;
|
||||
}
|
||||
}
|
||||
/************** 限购-end **************/
|
||||
cartStore.increase({
|
||||
id: cartId || '',
|
||||
goods_id: goodsDetail.value.goods_id,
|
||||
sku_id: goodsDetail.value.sku_id,
|
||||
stock: goodsDetail.value.stock,
|
||||
sale_price: goodsDetail.value.sale_price,
|
||||
num: num
|
||||
}, 0, () => {
|
||||
uni.showToast({
|
||||
title: '加入购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
} else if (openType.value == 'buy_now') {
|
||||
// 立即购买
|
||||
var data = {
|
||||
sku_id: goodsDetail.value.sku_id,
|
||||
num: buyNum.value
|
||||
};
|
||||
|
||||
uni.setStorage({
|
||||
key: 'orderCreateData',
|
||||
data: {
|
||||
sku_data: [
|
||||
data
|
||||
],
|
||||
extend_data: {
|
||||
relate_id: '',
|
||||
activity_type: goodsDetail.value.type // 目前营销活动有，新人价、限时折扣
|
||||
}
|
||||
},
|
||||
success: () => {
|
||||
redirect({ url: '/addon/shop/pages/order/payment' })
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
closeFn();
|
||||
}
|
||||
|
||||
//预览图片
|
||||
const imgListPreview = (item: any) => {
|
||||
if (item === '') return false
|
||||
var urlList = []
|
||||
urlList.push(img(item)) //push中的参数为 :src="item.img_url" 中的图片地址
|
||||
uni.previewImage({
|
||||
indicator: "number",
|
||||
loop: true,
|
||||
urls: urlList
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-number-box .u-number-box__slot{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user