🔥 商品详情:移除 param、service 展示,暂时不做
parent
19d90f5df5
commit
e1d2a54d2c
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<detail-cell
|
|
||||||
v-if="modelValue.length > 0"
|
|
||||||
label="参数"
|
|
||||||
:value="state.paramsTitle"
|
|
||||||
@click="state.show = true"
|
|
||||||
></detail-cell>
|
|
||||||
<su-popup :show="state.show" round="10" :showClose="true" @close="close">
|
|
||||||
<view class="ss-modal-box bg-white">
|
|
||||||
<view class="modal-header">产品参数</view>
|
|
||||||
<scroll-view
|
|
||||||
class="modal-content ss-p-t-50"
|
|
||||||
scroll-y="true"
|
|
||||||
:scroll-with-animation="true"
|
|
||||||
:show-scrollbar="false"
|
|
||||||
@touchmove.stop
|
|
||||||
>
|
|
||||||
<view class="sale-item ss-flex ss-col-top" v-for="item in modelValue" :key="item.title">
|
|
||||||
<view class="item-title">{{ item.title }}</view>
|
|
||||||
<view class="item-value">{{ item.content }}</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
<view class="modal-footer ss-flex ss-row-center ss-m-b-20">
|
|
||||||
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="state.show = false"
|
|
||||||
>确定</button
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</su-popup>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { reactive, computed } from 'vue';
|
|
||||||
|
|
||||||
import detailCell from './detail-cell.vue';
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const state = reactive({
|
|
||||||
show: false,
|
|
||||||
paramsTitle: computed(() => {
|
|
||||||
let titleArray = [];
|
|
||||||
props.modelValue.map((item) => {
|
|
||||||
titleArray.push(item.title);
|
|
||||||
});
|
|
||||||
return titleArray.join(' · ');
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
function close() {
|
|
||||||
state.show = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ss-modal-box {
|
|
||||||
border-radius: 30rpx 30rpx 0 0;
|
|
||||||
max-height: 730rpx;
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
position: relative;
|
|
||||||
padding: 30rpx 20rpx 40rpx;
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
max-height: 500rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.sale-item {
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
padding-bottom: 24rpx;
|
|
||||||
border-bottom: 2rpx solid rgba(#dfdfdf, 0.4);
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 42rpx;
|
|
||||||
width: 120rpx;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-value {
|
|
||||||
font-size: 26rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $dark-9;
|
|
||||||
line-height: 42rpx;
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
height: 120rpx;
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
width: 710rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
border-radius: 40rpx;
|
|
||||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,121 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<detail-cell
|
|
||||||
v-if="modelValue.length > 0"
|
|
||||||
label="保障"
|
|
||||||
:value="state.paramsTitle"
|
|
||||||
@click="state.show = true"
|
|
||||||
>
|
|
||||||
</detail-cell>
|
|
||||||
<su-popup :show="state.show" round="10" :showClose="true" @close="state.show = false">
|
|
||||||
<view class="ss-modal-box">
|
|
||||||
<view class="modal-header">服务保障</view>
|
|
||||||
<scroll-view
|
|
||||||
class="modal-content"
|
|
||||||
scroll-y="true"
|
|
||||||
:scroll-with-animation="true"
|
|
||||||
:show-scrollbar="false"
|
|
||||||
@touchmove.stop
|
|
||||||
>
|
|
||||||
<view class="sale-item ss-flex ss-col-top" v-for="item in modelValue" :key="item.id">
|
|
||||||
<image
|
|
||||||
class="title-icon ss-m-r-14"
|
|
||||||
:src="sheep.$url.cdn(item.image)"
|
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
<view class="title-box">
|
|
||||||
<view class="item-title ss-m-b-20">{{ item.name }}</view>
|
|
||||||
<view class="item-value">{{ item.description }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
<view class="modal-footer ss-flex ss-row-center ss-m-b-20">
|
|
||||||
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="state.show = false"
|
|
||||||
>确定</button
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</su-popup>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { reactive, computed } from 'vue';
|
|
||||||
import sheep from '@/sheep';
|
|
||||||
import detailCell from './detail-cell.vue';
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Object,
|
|
||||||
default() {},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
show: false,
|
|
||||||
paramsTitle: computed(() => {
|
|
||||||
let nameArray = [];
|
|
||||||
props.modelValue.map((item) => {
|
|
||||||
nameArray.push(item.name);
|
|
||||||
});
|
|
||||||
return nameArray.join(' · ');
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ss-modal-box {
|
|
||||||
border-radius: 30rpx 30rpx 0 0;
|
|
||||||
max-height: 730rpx;
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
position: relative;
|
|
||||||
padding: 30rpx 20rpx 40rpx;
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
max-height: 500rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.sale-item {
|
|
||||||
margin-bottom: 44rpx;
|
|
||||||
|
|
||||||
.title-icon {
|
|
||||||
width: 36rpx;
|
|
||||||
height: 36rpx;
|
|
||||||
}
|
|
||||||
.title-box{
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-value {
|
|
||||||
font-size: 26rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $dark-9;
|
|
||||||
line-height: 42rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
height: 120rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
width: 710rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
border-radius: 40rpx;
|
|
||||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -86,10 +86,6 @@
|
||||||
:skus="state.goodsInfo.skus"
|
:skus="state.goodsInfo.skus"
|
||||||
@tap="state.showSelectSku = true"
|
@tap="state.showSelectSku = true"
|
||||||
/>
|
/>
|
||||||
<!-- 服务 -->
|
|
||||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
|
||||||
<!-- 参数 -->
|
|
||||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
|
||||||
<!-- 玩法 -->
|
<!-- 玩法 -->
|
||||||
<detail-cell
|
<detail-cell
|
||||||
v-if="state.goodsInfo.activity.richtext_id > 0"
|
v-if="state.goodsInfo.activity.richtext_id > 0"
|
||||||
|
@ -173,15 +169,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, getCurrentInstance, computed, ref } from 'vue';
|
import { reactive, computed, ref } from 'vue';
|
||||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import { isEmpty } from 'lodash';
|
import { isEmpty } from 'lodash';
|
||||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||||
import detailCell from './components/detail/detail-cell.vue';
|
import detailCell from './components/detail/detail-cell.vue';
|
||||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
|
||||||
import detailCellParams from './components/detail/detail-cell-params.vue';
|
|
||||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||||
|
|
|
@ -56,9 +56,6 @@
|
||||||
<view class="detail-cell-card detail-card ss-flex-col">
|
<view class="detail-cell-card detail-card ss-flex-col">
|
||||||
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
|
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
|
||||||
@tap="state.showSelectSku = true" />
|
@tap="state.showSelectSku = true" />
|
||||||
<!-- TODO 芋艿:可能暂时不考虑使用 -->
|
|
||||||
<detail-cell-service v-if="state.goodsInfo.service" v-model="state.goodsInfo.service" />
|
|
||||||
<detail-cell-params v-if="state.goodsInfo.params" v-model="state.goodsInfo.params" />
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 规格与数量弹框 -->
|
<!-- 规格与数量弹框 -->
|
||||||
|
@ -114,15 +111,9 @@
|
||||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||||
import ActivityApi from '@/sheep/api/promotion/activity';
|
import ActivityApi from '@/sheep/api/promotion/activity';
|
||||||
import FavoriteApi from '@/sheep/api/product/favorite';
|
import FavoriteApi from '@/sheep/api/product/favorite';
|
||||||
import {
|
import { formatSales, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
|
||||||
formatSales,
|
|
||||||
formatGoodsSwiper,
|
|
||||||
fen2yuan,
|
|
||||||
} from '@/sheep/hooks/useGoods';
|
|
||||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
|
||||||
import detailCellParams from './components/detail/detail-cell-params.vue';
|
|
||||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||||
|
|
|
@ -73,8 +73,6 @@
|
||||||
:skus="state.goodsInfo.skus"
|
:skus="state.goodsInfo.skus"
|
||||||
@tap="state.showSelectSku = true"
|
@tap="state.showSelectSku = true"
|
||||||
/>
|
/>
|
||||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
|
||||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 规格与数量弹框 -->
|
<!-- 规格与数量弹框 -->
|
||||||
<s-select-seckill-sku
|
<s-select-seckill-sku
|
||||||
|
@ -145,8 +143,6 @@
|
||||||
import { useDurationTime, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods';
|
import { useDurationTime, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods';
|
||||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
|
||||||
import detailCellParams from './components/detail/detail-cell-params.vue';
|
|
||||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||||
|
|
Loading…
Reference in New Issue