清空
This commit is contained in:
落日晚风
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="user ss-flex ss-m-b-14">
|
||||
<view class="ss-m-r-20 ss-flex">
|
||||
<image class="avatar" :src="sheep.$url.cdn(item.user_avatar)"></image>
|
||||
</view>
|
||||
<view class="nickname ss-m-r-20">
|
||||
{{ item.userNickname }}
|
||||
</view>
|
||||
<view class="">
|
||||
<uni-rate :readonly="true" v-model="item.scores" size="18" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<view class="ss-m-t-24" v-if="item.picUrls?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||
<view class="ss-flex">
|
||||
<view v-for="(item, index) in item.picUrls" :key="item" class="ss-m-r-10">
|
||||
<su-image class="content-img" isPreview :previewList="state.commentImages" :current="index" :src="item"
|
||||
:height="120" :width="120" mode="aspectFill"></su-image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="ss-m-t-20 reply-box" v-if="item.reply_time">
|
||||
<view class="reply-title">商家回复：</view>
|
||||
<view class="reply-content">{{ item.reply_content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default() { },
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
commentImages: [],
|
||||
});
|
||||
props.item.images?.forEach((i) => {
|
||||
state.commentImages.push(sheep.$url.cdn(i));
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 636rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.reply-box {
|
||||
position: relative;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.reply-title {
|
||||
position: absolute;
|
||||
left: 16rpx;
|
||||
top: 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
text-indent: 128rpx;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<su-fixed bottom placeholder :val="44">
|
||||
<view>
|
||||
<view v-for="activity in data.activities" :key="activity.id">
|
||||
<view
|
||||
class="activity-box ss-p-x-38 ss-flex ss-row-between ss-col-center"
|
||||
:class="activity.type == 'seckill' ? 'seckill-box' : 'groupon-box'"
|
||||
>
|
||||
<view class="activity-title ss-flex">
|
||||
<view class="ss-m-r-16">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/seckill-icon.png')"
|
||||
v-if="activity.type == 'seckill'"
|
||||
class="activity-icon"
|
||||
></image>
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/groupon-icon.png')"
|
||||
class="activity-icon"
|
||||
v-else
|
||||
></image>
|
||||
</view>
|
||||
<view>该商品正在参与{{ activity.type_text }}活动</view>
|
||||
</view>
|
||||
<button class="ss-reset-button activity-go" @tap="onActivity(activity)"> GO </button>
|
||||
</view>
|
||||
<!-- <button @tap="onActivity(activity)">{{ activity.title }} {{ activity.type_text }}</button> -->
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
|
||||
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
function onActivity(activity) {
|
||||
let type = activity.type;
|
||||
if (type === 'groupon_ladder') type = 'groupon';
|
||||
sheep.$router.go(`/pages/goods/${type}`, {
|
||||
id: props.data.id,
|
||||
activity_id: activity.id,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.activity-box {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.activity-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
|
||||
.activity-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-go {
|
||||
width: 70rpx;
|
||||
height: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
//秒杀卡片
|
||||
.seckill-box {
|
||||
background: v-bind(seckillBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.groupon-box {
|
||||
background: v-bind(grouponBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<detail-cell v-if="skus.length > 0" label="选择" :value="value"></detail-cell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import detailCell from './detail-cell.vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
skus: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const value = computed(() => {
|
||||
let str = '';
|
||||
if (props.modelValue.length > 0) {
|
||||
props.modelValue.forEach((item, index) => {
|
||||
str += props.skus[index].name + ':' + item + ' ';
|
||||
});
|
||||
} else {
|
||||
str = '请选择商品规格';
|
||||
}
|
||||
return str;
|
||||
});
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<view class="detail-cell-wrap ss-flex ss-col-center ss-row-between" @tap="onClick">
|
||||
<view class="label-text">{{ label }}</view>
|
||||
<view class="cell-content ss-line-1 ss-flex-1">{{ value }}</view>
|
||||
<button class="ss-reset-button">
|
||||
<text class="_icon-forward right-forwrad-icon"></text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 详情 cell
|
||||
*
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['click']);
|
||||
|
||||
// 点击
|
||||
const onClick = () => {
|
||||
emits('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-cell-wrap {
|
||||
padding: 10rpx 20rpx;
|
||||
// min-height: 60rpx;
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
margin-right: 38rpx;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
}
|
||||
|
||||
.right-forwrad-icon {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<view class="detail-comment-card bg-white">
|
||||
<view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="line"></view>
|
||||
<view class="title ss-m-l-20 ss-m-r-10">评价</view>
|
||||
<view class="des">({{ state.total }})</view>
|
||||
</view>
|
||||
<view
|
||||
class="ss-flex ss-col-center"
|
||||
@tap="sheep.$router.go('/pages/goods/comment/list', { id: goodsId })"
|
||||
v-if="state.commentList.length > 0"
|
||||
>
|
||||
<button class="ss-reset-button more-btn">查看全部</button>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<view class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
|
||||
<comment-item :item="item"></comment-item>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.commentList.length === 0"
|
||||
paddingTop="0"
|
||||
icon="/static/comment-empty.png"
|
||||
text="期待您的第一个评价"
|
||||
></s-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onBeforeMount } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import commentItem from './comment-item.vue';
|
||||
const props = defineProps({
|
||||
goodsId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
commentList: [],
|
||||
total: 0,
|
||||
});
|
||||
async function getComment(id) {
|
||||
const { data } = await sheep.$api.goods.comment(id, {
|
||||
list_rows: 3,
|
||||
});
|
||||
const {data:datas} = await sheep.$api.goods.comment2(id);
|
||||
state.commentList = data;
|
||||
state.total = datas.total;
|
||||
}
|
||||
onBeforeMount(() => {
|
||||
getComment(props.goodsId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-comment-card {
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
.card-header {
|
||||
.line {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 24rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: var(--ui-BG-Main);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-box {
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
|
||||
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
|
||||
<view class="line"></view>
|
||||
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<mp-html :content="content"></mp-html>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
const { safeAreaInsets } = sheep.$platform.device;
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-content-card {
|
||||
.card-header {
|
||||
.line {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 24rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,255 +0,0 @@
|
||||
<template>
|
||||
<su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
|
||||
<su-status-bar />
|
||||
<view
|
||||
class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
||||
>
|
||||
<!-- 左 -->
|
||||
<view class="icon-box ss-flex">
|
||||
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||
<text class="sicon-back" v-if="hasHistory" />
|
||||
<text class="sicon-home" v-else />
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
|
||||
<text class="sicon-more" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 中 -->
|
||||
<view class="detail-tab-card ss-flex-1" :style="[{ opacity: state.tabOpacityVal }]">
|
||||
<view class="tab-box ss-flex ss-col-center ss-row-around">
|
||||
<view
|
||||
class="tab-item ss-flex-1 ss-flex ss-row-center ss-col-center"
|
||||
v-for="item in state.tabList"
|
||||
:key="item.value"
|
||||
@tap="onTab(item)"
|
||||
>
|
||||
<view class="tab-title" :class="state.curTab === item.value ? 'cur-tab-title' : ''">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
<view v-show="state.curTab === item.value" class="tab-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="[capsuleStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import throttle from '@/sheep/helper/throttle.js';
|
||||
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
|
||||
|
||||
const sys_statusBar = sheep.$platform.device.statusBarHeight;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const capsuleStyle = {
|
||||
width: sheep.$platform.capsule.width + 'px',
|
||||
height: sheep.$platform.capsule.height + 'px',
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
tabOpacityVal: 0,
|
||||
curTab: 'goods',
|
||||
tabList: [
|
||||
{
|
||||
label: '商品',
|
||||
value: 'goods',
|
||||
to: 'detail-swiper-selector',
|
||||
},
|
||||
{
|
||||
label: '评价',
|
||||
value: 'comment',
|
||||
to: 'detail-comment-selector',
|
||||
},
|
||||
{
|
||||
label: '详情',
|
||||
value: 'detail',
|
||||
to: 'detail-content-selector',
|
||||
},
|
||||
],
|
||||
});
|
||||
const emits = defineEmits(['clickLeft']);
|
||||
const hasHistory = sheep.$router.hasHistory();
|
||||
|
||||
function onClickLeft() {
|
||||
if (hasHistory) {
|
||||
sheep.$router.back();
|
||||
} else {
|
||||
sheep.$router.go('/pages/index/index');
|
||||
}
|
||||
emits('clickLeft');
|
||||
}
|
||||
|
||||
function onClickRight() {
|
||||
showMenuTools();
|
||||
}
|
||||
|
||||
let commentCard = {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
};
|
||||
|
||||
function getCommentCardNode() {
|
||||
return new Promise((res, rej) => {
|
||||
uni.createSelectorQuery()
|
||||
.select('.detail-comment-selector')
|
||||
.boundingClientRect((data) => {
|
||||
if (data) {
|
||||
commentCard.top = data.top;
|
||||
commentCard.bottom = data.top + data.height;
|
||||
res(data);
|
||||
} else {
|
||||
res(null);
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
}
|
||||
|
||||
function onTab(tab) {
|
||||
let scrollTop = 0;
|
||||
if (tab.value === 'comment') {
|
||||
scrollTop = commentCard.top - sys_navBar + 1;
|
||||
} else if (tab.value === 'detail') {
|
||||
scrollTop = commentCard.bottom - sys_navBar + 1;
|
||||
}
|
||||
uni.pageScrollTo({
|
||||
scrollTop,
|
||||
duration: 200,
|
||||
});
|
||||
}
|
||||
|
||||
onPageScroll((e) => {
|
||||
state.tabOpacityVal = e.scrollTop > sheep.$platform.navbar ? 1 : e.scrollTop * 0.01;
|
||||
if (commentCard.top === 0) {
|
||||
throttle(() => {
|
||||
getCommentCardNode();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
if (e.scrollTop < commentCard.top - sys_navBar) {
|
||||
state.curTab = 'goods';
|
||||
} else if (
|
||||
e.scrollTop >= commentCard.top - sys_navBar &&
|
||||
e.scrollTop <= commentCard.bottom - sys_navBar
|
||||
) {
|
||||
state.curTab = 'comment';
|
||||
} else {
|
||||
state.curTab = 'detail';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-box {
|
||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||
border-radius: 30rpx;
|
||||
width: 134rpx;
|
||||
height: 56rpx;
|
||||
margin-left: 8rpx;
|
||||
border: 1px solid rgba(#fff, 0.4);
|
||||
.line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: #e5e5e7;
|
||||
}
|
||||
.sicon-back {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
}
|
||||
.sicon-home {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
}
|
||||
.sicon-more {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
}
|
||||
.icon-button {
|
||||
width: 67rpx;
|
||||
height: 56rpx;
|
||||
&-left:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 30rpx 0px 0px 30rpx;
|
||||
}
|
||||
&-right:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0px 30rpx 30rpx 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-box {
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(#fff, 0.6);
|
||||
border: 1rpx solid #ebebeb;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(#ffffff, 0.6);
|
||||
border: 1rpx solid #ebebeb;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.detail-tab-card {
|
||||
width: 50%;
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="progress-title ss-m-r-10"> 已抢{{ percent }}% </view>
|
||||
<view class="progress-box ss-flex ss-col-center">
|
||||
<view class="progerss-active" :style="{ width: percent < 10 ? '10%' : percent + '%' }">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-title {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.progress-box {
|
||||
width: 168rpx;
|
||||
height: 18rpx;
|
||||
background: #f6f6f6;
|
||||
border-radius: 9rpx;
|
||||
}
|
||||
|
||||
.progerss-active {
|
||||
height: 24rpx;
|
||||
background: linear-gradient(86deg, #f60600, #d00500);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,177 +0,0 @@
|
||||
<template>
|
||||
<view
|
||||
class="skeleton-wrap"
|
||||
:class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
|
||||
>
|
||||
<view class="skeleton-banner"></view>
|
||||
<view class="container-box">
|
||||
<view class="container-box-strip title ss-m-b-58"></view>
|
||||
<view class="container-box-strip ss-m-b-20"></view>
|
||||
<view class="container-box-strip ss-m-b-20"></view>
|
||||
<view class="container-box-strip w-364"></view>
|
||||
</view>
|
||||
<view class="container-box">
|
||||
<view class="ss-flex ss-row-between ss-m-b-34">
|
||||
<view class="container-box-strip w-380"></view>
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-m-b-34">
|
||||
<view class="container-box-strip w-556"></view>
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="container-box-strip w-556"></view>
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container-box">
|
||||
<view class="container-box-strip w-198 ss-m-b-42"></view>
|
||||
<view class="ss-flex">
|
||||
<view class="circle ss-m-r-12"></view>
|
||||
<view class="container-box-strip w-252"></view>
|
||||
</view>
|
||||
</view>
|
||||
<su-fixed bottom placeholder bg="bg-white">
|
||||
<view class="ui-tabbar-box">
|
||||
<view class="foot ss-flex ss-col-center">
|
||||
<view class="ss-m-r-54 ss-m-l-32">
|
||||
<view class="rec ss-m-b-8"></view>
|
||||
<view class="oval"></view>
|
||||
</view>
|
||||
<view class="ss-m-r-54">
|
||||
<view class="rec ss-m-b-8"></view>
|
||||
<view class="oval"></view>
|
||||
</view>
|
||||
<view class="ss-m-r-50">
|
||||
<view class="rec ss-m-b-8"></view>
|
||||
<view class="oval"></view>
|
||||
</view>
|
||||
<button class="ss-reset-button add-btn ui-Shadow-Main"></button>
|
||||
<button class="ss-reset-button buy-btn ui-Shadow-Main"></button>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const sys = computed(() => sheep.$store('sys'));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes loading {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-wrap {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
||||
.skeleton-banner {
|
||||
width: 100%;
|
||||
height: calc(100vh - 882rpx);
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.container-box {
|
||||
padding: 24rpx 18rpx;
|
||||
margin: 14rpx 20rpx;
|
||||
background: var(--ui-BG);
|
||||
animation: loading 1.4s ease infinite;
|
||||
|
||||
.container-box-strip {
|
||||
height: 40rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 470rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
.w-364 {
|
||||
width: 364rpx;
|
||||
}
|
||||
|
||||
.w-380 {
|
||||
width: 380rpx;
|
||||
}
|
||||
|
||||
.w-556 {
|
||||
width: 556rpx;
|
||||
}
|
||||
|
||||
.w-198 {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
.w-252 {
|
||||
width: 252rpx;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.ui-tabbar-box {
|
||||
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
|
||||
}
|
||||
|
||||
.foot {
|
||||
height: 100rpx;
|
||||
background: var(--ui-BG);
|
||||
.rec {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.oval {
|
||||
width: 38rpx;
|
||||
height: 22rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 11rpx;
|
||||
}
|
||||
.add-btn {
|
||||
width: 214rpx;
|
||||
height: 72rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
background-color: var(--ui-BG-Main-light);
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
width: 214rpx;
|
||||
height: 72rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
|
||||
border-radius: 0 40rpx 40rpx 0;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<su-fixed bottom placeholder bg="bg-white">
|
||||
<view class="ui-tabbar-box">
|
||||
<view class="ui-tabbar ss-flex ss-col-center ss-row-between">
|
||||
<view
|
||||
v-if="collectIcon"
|
||||
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
@tap="onFavorite"
|
||||
>
|
||||
<block v-if="modelValue.favorite">
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/collect_1.gif')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">已收藏</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">收藏</view>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
v-if="serviceIcon"
|
||||
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
@tap="onChat"
|
||||
>
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/message.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">客服</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="shareIcon"
|
||||
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
@tap="showShareModal"
|
||||
>
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/share.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">分享</view>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
*
|
||||
* 底部导航
|
||||
*
|
||||
* @property {String} bg - 背景颜色Class
|
||||
* @property {String} ui - 自定义样式Class
|
||||
* @property {Boolean} noFixed - 是否定位
|
||||
* @property {Boolean} topRadius - 上圆角
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
|
||||
// 数据
|
||||
const state = reactive({});
|
||||
|
||||
// 接收参数
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
bg: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
bgStyles: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
ui: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
noFixed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
topRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
collectIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
serviceIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
shareIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const elStyles = computed(() => {
|
||||
return {
|
||||
'border-top-left-radius': props.topRadius + 'rpx',
|
||||
'border-top-right-radius': props.topRadius + 'rpx',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
});
|
||||
|
||||
const tabbarheight = (e) => {
|
||||
uni.setStorageSync('tabbar', e);
|
||||
};
|
||||
async function onFavorite() {
|
||||
const { error } = await sheep.$api.user.favorite.do(props.modelValue.id);
|
||||
if (error === 0) {
|
||||
if (props.modelValue.favorite) {
|
||||
props.modelValue.favorite = 0;
|
||||
} else {
|
||||
props.modelValue.favorite = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onChat = () => {
|
||||
sheep.$router.go('/pages/chat/index', {
|
||||
id: props.modelValue.id,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ui-tabbar-box {
|
||||
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
|
||||
}
|
||||
.ui-tabbar {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
|
||||
.detail-tabbar-item {
|
||||
width: 100rpx;
|
||||
|
||||
.item-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
line-height: 20rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<view v-if="state.list.length > 0" class="groupon-list detail-card ss-p-x-20">
|
||||
<view class="join-activity ss-flex ss-row-between ss-m-t-30">
|
||||
<view class="">已有{{ modelValue.sales }}人参与活动</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
<view
|
||||
v-for="(item, index) in state.list"
|
||||
@tap="sheep.$router.go('/pages/activity/groupon/detail', { id: item.id })"
|
||||
:key="index"
|
||||
class="ss-m-t-40 ss-flex ss-row-between border-bottom ss-p-b-30"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image :src="sheep.$url.cdn(item.leader.avatar)" class="user-avatar"></image>
|
||||
<view class="user-nickname ss-m-l-20 ss-line-1">{{ item.leader.nickname }}</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="ss-flex-col ss-col-bottom ss-m-r-20">
|
||||
<view class="title ss-flex ss-m-b-14">
|
||||
还差
|
||||
<view class="num">{{ item.num - item.current_num }}人</view>
|
||||
成团
|
||||
</view>
|
||||
<view class="end-time">{{ endTime(item.expire_time) }}</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<button class="ss-reset-button go-btn" @tap.stop="onJoinGroupon(item)"> 去参团 </button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
list: [],
|
||||
});
|
||||
const emits = defineEmits(['join']);
|
||||
|
||||
function onJoinGroupon(groupon) {
|
||||
emits('join', groupon);
|
||||
}
|
||||
|
||||
// 倒计时
|
||||
function endTime(time) {
|
||||
const durationTime = useDurationTime(time);
|
||||
|
||||
if (durationTime.ms <= 0) {
|
||||
return '该团已解散';
|
||||
}
|
||||
|
||||
let timeText = '剩余 ';
|
||||
timeText += `${durationTime.h}时`;
|
||||
timeText += `${durationTime.m}分`;
|
||||
timeText += `${durationTime.s}秒`;
|
||||
return timeText;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await sheep.$api.activity.getGrouponList({
|
||||
goods_id: props.modelValue.id,
|
||||
activity_id: props.modelValue.activity.id,
|
||||
});
|
||||
state.list = data.data;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-card {
|
||||
background-color: $white;
|
||||
margin: 14rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.groupon-list {
|
||||
.join-activity {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
.cicon-forward {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: #ececec;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
|
||||
.num {
|
||||
color: #ff6000;
|
||||
}
|
||||
}
|
||||
|
||||
.end-time {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.go-btn {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
||||
border-radius: 30rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,103 +0,0 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<view class="list-goods-card ss-flex-col" @tap="onClick">
|
||||
<view class="md-img-box">
|
||||
<image class="goods-img md-img-box" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="md-goods-content ss-flex-col ss-row-around">
|
||||
<view class="md-goods-title ss-line-2 ss-m-x-20 ss-m-t-6 ss-m-b-16">{{ title }}</view>
|
||||
<view class="md-goods-subtitle ss-line-1 ss-p-y-10 ss-p-20">{{ subTitle }}</view>
|
||||
<view class="ss-flex ss-col-center ss-row-between ss-m-b-16 ss-m-x-20">
|
||||
<view class="md-goods-price text-price">{{ price }}</view>
|
||||
<view class="goods-origin-price text-price">{{ originPrice }}</view>
|
||||
<view class="sales-text">已售{{ sales }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
img: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
price: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
originPrice: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
sales: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['click']);
|
||||
const onClick = () => {
|
||||
emits('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.sales-text {
|
||||
font-size: 20rpx;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
.goods-origin-price {
|
||||
font-size: 20rpx;
|
||||
color: #c4c4c4;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.list-goods-card {
|
||||
overflow: hidden;
|
||||
width: 344rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 20rpx 4rpx rgba(199, 199, 199, 0.22);
|
||||
border-radius: 20rpx;
|
||||
|
||||
.md-img-box {
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
}
|
||||
|
||||
.md-goods-title {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
.md-goods-subtitle {
|
||||
background-color: var(--ui-BG-Main-tag);
|
||||
color: var(--ui-BG-Main);
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.md-goods-price {
|
||||
font-size: 30rpx;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<su-fixed
|
||||
alway
|
||||
:bgStyles="{ background: '#fff' }"
|
||||
:val="0"
|
||||
noNav
|
||||
:opacity="false"
|
||||
placeholder
|
||||
index="10090"
|
||||
>
|
||||
<su-status-bar />
|
||||
<view
|
||||
class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
||||
>
|
||||
<!-- 左 -->
|
||||
<view class="left-box">
|
||||
<text
|
||||
class="_icon-back back-icon"
|
||||
@tap="toBack"
|
||||
:style="[{ color: state.iconColor }]"
|
||||
></text>
|
||||
</view>
|
||||
<!-- 中 -->
|
||||
<uni-search-bar
|
||||
class="ss-flex-1"
|
||||
radius="33"
|
||||
:placeholder="placeholder"
|
||||
cancelButton="none"
|
||||
:focus="true"
|
||||
v-model="state.searchVal"
|
||||
@confirm="onSearch"
|
||||
/>
|
||||
<!-- 右 -->
|
||||
<view class="right">
|
||||
<text class="sicon-more" :style="[{ color: state.iconColor }]" @tap="showMenuTools" />
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="[capsuleStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { showMenuTools } from '@/sheep/hooks/useModal';
|
||||
|
||||
const sys_statusBar = sheep.$platform.device.statusBarHeight;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const capsuleStyle = {
|
||||
width: sheep.$platform.capsule.width + 'px',
|
||||
height: sheep.$platform.capsule.height + 'px',
|
||||
margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
iconColor: '#000',
|
||||
searchVal: '',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '搜索内容',
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['searchConfirm']);
|
||||
|
||||
// 返回
|
||||
const toBack = () => {
|
||||
sheep.$router.back();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const onSearch = () => {
|
||||
emits('searchConfirm', state.searchVal);
|
||||
};
|
||||
|
||||
const onTab = (item) => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.back-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.sicon-more {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user