|
|
@@ -1,10 +1,14 @@
|
|
|
<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)">
|
|
|
+ <view :style="warpCss" class="overflow-hidden" v-if="goodsList && goodsList.length>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}">
|
|
|
+ <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>
|
|
|
@@ -15,54 +19,71 @@
|
|
|
<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" />
|
|
|
+ <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('https://v6.site.niucloud.com/static/resource/images/diy/figure.png')"
|
|
|
+ mode="heightFix" class="h-[504rpx] !w-full" :show-menu-by-longpress="true" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<template 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">
|
|
|
+ :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" />
|
|
|
+ <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('https://v6.site.niucloud.com/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 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 -->
|
|
|
</template>
|
|
|
</view>
|
|
|
|
|
|
- <view class="w-[340rpx] h-[504rpx] flex flex-col bg-[#fff] box-border overflow-hidden" :style="goodsTempCss" @click="toLink(goodsList[0])">
|
|
|
+ <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">
|
|
|
+ <u--image width="346rpx" height="350rpx" :src="img(goodsList[0].productImage || '')"
|
|
|
+ model="aspectFill">
|
|
|
<template #error>
|
|
|
- <image class="w-[346rpx] h-[350rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
|
|
|
+ <image class="w-[346rpx] h-[350rpx]"
|
|
|
+ :src="img('https://v6.site.niucloud.com/static/resource/images/diy/shop_default.jpg')"
|
|
|
+ mode="aspectFill" />
|
|
|
</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="text-[#303133] leading-[40rpx] text-[28rpx] truncate"
|
|
|
+ :style="{ color: diyComponent.goodsNameStyle.color, fontWeight: diyComponent.goodsNameStyle.fontWeight }">
|
|
|
+ {{ goodsList[0].brandName }}</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 }">
|
|
|
+ <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>
|
|
|
+ <text class="text-[40rpx] font-500">{{
|
|
|
+ diyGoods.goodsPrice(goodsList[0]).toFixed(2).split('.')[0]
|
|
|
+ }}</text>
|
|
|
+ <text class="text-[24rpx] font-500">.{{
|
|
|
+ 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" />
|
|
|
- <image v-else-if="diyGoods.priceType(goodsList[0]) == 'newcomer_price'" class="max-w-[60rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/newcomer.png')" mode="heightFix" />
|
|
|
- <image v-else-if="diyGoods.priceType(goodsList[0]) == 'discount_price'" class="max-w-[80rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/discount.png')" mode="heightFix" />
|
|
|
</view>
|
|
|
- <view class="w-[44rpx] h-[44rpx] bg-[red] flex items-center justify-center rounded-[50%]" :style="{ backgroundColor : diyComponent.saleStyle.color }">
|
|
|
+ <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>
|
|
|
@@ -84,7 +105,7 @@ const diyGoods = useGoods();
|
|
|
const props = defineProps(['component', 'index', 'value']);
|
|
|
const diyStore = useDiyStore();
|
|
|
|
|
|
-const goodsList = ref<Array<any>>([]);
|
|
|
+const goodsList = ref<any>([]);
|
|
|
|
|
|
const diyComponent = computed(() => {
|
|
|
if (props.value) {
|
|
|
@@ -110,7 +131,7 @@ const warpCss = computed(() => {
|
|
|
let 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 });`;
|
|
|
+ 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 + ';';
|
|
|
}
|
|
|
|
|
|
@@ -154,11 +175,16 @@ const carouselCss = computed(() => {
|
|
|
|
|
|
const getGoodsListFn = () => {
|
|
|
let data = {
|
|
|
- num: 1,
|
|
|
- goods_ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : ''
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ ids: diyComponent.value.goodsIds.join(",")
|
|
|
}
|
|
|
- getGoodsComponents(data).then((res) => {
|
|
|
- goodsList.value = res.data;
|
|
|
+
|
|
|
+ getGoodsComponents(data).then((res:any) => {
|
|
|
+ if(res.rows && res.rows.length >0){
|
|
|
+ goodsList.value.push(res.rows[0]);
|
|
|
+ // goodsList.value = res.rows;
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -180,11 +206,13 @@ const refresh = () => {
|
|
|
// 装修模式下设置默认图
|
|
|
if (diyStore.mode == 'decorate') {
|
|
|
let obj = {
|
|
|
+ memberPrice: '0.00',
|
|
|
goods_cover_thumb_mid: "",
|
|
|
- goods_name: "商品名称",
|
|
|
+ brandName: "商品名称",
|
|
|
sale_num: "100",
|
|
|
unit: "件",
|
|
|
- goodsSku: { show_price: 100 }
|
|
|
+ goodsSku: { show_price: 100 },
|
|
|
+ productImage:''
|
|
|
};
|
|
|
goodsList.value.push(obj);
|
|
|
} else {
|
|
|
@@ -193,7 +221,7 @@ const refresh = () => {
|
|
|
}
|
|
|
|
|
|
const toLink = (data: any) => {
|
|
|
- redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
|
|
|
+ redirect({ url: '/addon/shop/pages/goods/detail', param: { goodsId: data.id } })
|
|
|
}
|
|
|
|
|
|
const swiperIndex = ref(0);
|
weixin_52219567