🔥 商品详情：移除 param、service 展示，暂时不做
YunaiV
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"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<!-- 服务 -->
|
||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
||||
<!-- 参数 -->
|
||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
||||
<!-- 玩法 -->
|
||||
<detail-cell
|
||||
v-if="state.goodsInfo.activity.richtext_id > 0"
|
||||
|
|
@ -173,15 +169,13 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, getCurrentInstance, computed, ref } from 'vue';
|
||||
import { reactive, computed, ref } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCell from './components/detail/detail-cell.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 detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
|
|
@ -209,7 +203,7 @@
|
|||
grouponId: 0, // 团购ID
|
||||
grouponType: '', // 团购类型
|
||||
grouponNum: 0, // 团购人数
|
||||
grouponAction: 'create', // 团购操作
|
||||
grouponAction: 'create', // 团购操作
|
||||
});
|
||||
|
||||
// 商品主价格
|
||||
|
|
|
|||
|
|
@ -56,9 +56,6 @@
|
|||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
|
||||
@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>
|
||||
|
||||
<!-- 规格与数量弹框 -->
|
||||
|
|
@ -114,15 +111,9 @@
|
|||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import ActivityApi from '@/sheep/api/promotion/activity';
|
||||
import FavoriteApi from '@/sheep/api/product/favorite';
|
||||
import {
|
||||
formatSales,
|
||||
formatGoodsSwiper,
|
||||
fen2yuan,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import { formatSales, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.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 detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
|
|
|
|||
|
|
@ -73,8 +73,6 @@
|
|||
:skus="state.goodsInfo.skus"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
||||
</view>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-seckill-sku
|
||||
|
|
@ -145,8 +143,6 @@
|
|||
import { useDurationTime, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.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 detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
|
|
|
|||
Loading…
Reference in New Issue