375 lines
8.0 KiB
Vue
375 lines
8.0 KiB
Vue
|
<script setup>
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
reactive,
|
||
|
|
nextTick,
|
||
|
|
getCurrentInstance,
|
||
|
|
} from 'vue'
|
||
|
|
import {
|
||
|
|
onLoad,
|
||
|
|
onReady,
|
||
|
|
onPageScroll,
|
||
|
|
} from '@dcloudio/uni-app'
|
||
|
|
// 头部
|
||
|
|
import apex from './components/jy-commodity-head';
|
||
|
|
// 商品列表
|
||
|
|
import productList from '@/components/shop/productList/productList'
|
||
|
|
//底部
|
||
|
|
import JyCommodityFoot from './components/jy-commodity-foot';
|
||
|
|
|
||
|
|
import {
|
||
|
|
bottomSafeAreaHeight
|
||
|
|
} from '@/components/public/Mixins.js'
|
||
|
|
import {
|
||
|
|
useStore
|
||
|
|
} from 'vuex'
|
||
|
|
//
|
||
|
|
import util from '@/common/js/util.js'
|
||
|
|
const {
|
||
|
|
proxy
|
||
|
|
} = getCurrentInstance()
|
||
|
|
const {
|
||
|
|
userinfo
|
||
|
|
} = useStore().state
|
||
|
|
// 数据列表
|
||
|
|
const dataList = ref({
|
||
|
|
images: [],
|
||
|
|
coupons: [],
|
||
|
|
reviews: [],
|
||
|
|
})
|
||
|
|
// 轮播图详情
|
||
|
|
const bannerIndex = ref(0)
|
||
|
|
//
|
||
|
|
const params = reactive({
|
||
|
|
productId: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
onLoad(options => {
|
||
|
|
if (options.productId) params.productId = options.productId
|
||
|
|
})
|
||
|
|
|
||
|
|
onReady(() => {
|
||
|
|
//
|
||
|
|
})
|
||
|
|
|
||
|
|
onPageScroll((ev) => {
|
||
|
|
if (ev.scrollTop > 44) proxy.$refs.apexRef.headerActive = true
|
||
|
|
else proxy.$refs.apexRef.headerActive = false
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 跳转路径
|
||
|
|
* @param {Object} url
|
||
|
|
*/
|
||
|
|
function link(url) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="app pr">
|
||
|
|
<!-- 头部 -->
|
||
|
|
<apex ref="apexRef"></apex>
|
||
|
|
|
||
|
|
<!-- 轮播图 -->
|
||
|
|
<view class="banner pr">
|
||
|
|
<swiper class="swiper" :current="bannerIndex" @change="($event) => bannerIndex = $event.detail.current">
|
||
|
|
<swiper-item v-for="(item, index) in 3" :key="index">
|
||
|
|
<image class="poster"
|
||
|
|
src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
|
||
|
|
mode="aspectFill" />
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
|
||
|
|
<!-- 计数器 -->
|
||
|
|
<view class="text pa ptb5 plr20 cfff f24 bar">{{ bannerIndex + 1 }} / {{ 3 }}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品详情 -->
|
||
|
|
<view class="detail bfff ptb25 plr20">
|
||
|
|
<view class="line rows">
|
||
|
|
<view class="price">
|
||
|
|
<text class="txt">￥</text>
|
||
|
|
<text class="txt f56">89</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 已售 -->
|
||
|
|
<view class="sold">
|
||
|
|
<text class="c999 f26">已售 20+</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 优惠券 -->
|
||
|
|
<view class="coupon df fdr fww f26 mtb20 cFF9B27">
|
||
|
|
<view class="item">
|
||
|
|
<text>限时直降0.5元</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text>平台立减1元</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text>关注店铺1元优惠券</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品名称 -->
|
||
|
|
<view class="name mtb20 f34 c333 t2hd">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>
|
||
|
|
|
||
|
|
<view class="history mtb20 rows">
|
||
|
|
<view class="c666 f28">商品修改历史</view>
|
||
|
|
<uni-icons type="right" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 福利政策 -->
|
||
|
|
<view class="gift df fdr fww c999 f24 mtb20">
|
||
|
|
<view class="item">
|
||
|
|
<text>全场包邮</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text>48h内发货</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text>假一赔十</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text>7天无理由退货</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<text>支持先用后付</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 最近购买 -->
|
||
|
|
<view class="recently mtb20">
|
||
|
|
<swiper class="swiper" :autoplay="true" vertical="true">
|
||
|
|
<swiper-item v-for="(item, index) in 2" :key="index">
|
||
|
|
<view class="list plr10 bfff">
|
||
|
|
<view class="item bsb rows plr10" v-for="(item, index) in 2" :key="index">
|
||
|
|
<view class="avatar">
|
||
|
|
<image class="avatar wh70 cir"
|
||
|
|
src="https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif"
|
||
|
|
mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="name f1 mlr10 f28">用户xxx</view>
|
||
|
|
<view class="info mlr10 f26 tar">
|
||
|
|
<view class="fn">刚刚下单</view>
|
||
|
|
<view class="time c999">2014.12.08 18:00</view>
|
||
|
|
</view>
|
||
|
|
<view class="btn sm warm plr15">立即购买</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品评价 -->
|
||
|
|
<view class="evaluate mtb20 plr25 bfff">
|
||
|
|
<view class="header rows ptb25" @click="link(util.setUrl('/pages/shop/commodity/evaluate',{id: 1}))">
|
||
|
|
<text class="modelTitle">商品评价(3)</text>
|
||
|
|
<uni-icons type="right" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 部分评论 -->
|
||
|
|
<view class="list">
|
||
|
|
<view class="item ptb20" v-for="(item, index) in 2" :key="index">
|
||
|
|
<view class="userinfo df c666 f28">
|
||
|
|
<image class="avatar wh45 cir"
|
||
|
|
src="https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif"
|
||
|
|
mode="aspectFill" />
|
||
|
|
<view class="name thd f32 f1 ml20">用户xxx</view>
|
||
|
|
</view>
|
||
|
|
<view class="content t2hd mt10 c333 f28">这个商品不错</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 店铺 -->
|
||
|
|
<view class="store df aic jcsb mtb20 ptb20 plr25 bfff">
|
||
|
|
<view class="header rows">
|
||
|
|
<!-- 店铺头像 -->
|
||
|
|
<image class="wh140 br20"
|
||
|
|
src="https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif"
|
||
|
|
mode="aspectFill" />
|
||
|
|
<!-- 店铺信息 名称 评分 关注数量 -->
|
||
|
|
<view class="info f1 mlr20">
|
||
|
|
<!-- 店铺名称 -->
|
||
|
|
<view class="name thd">
|
||
|
|
<text class="f34 c333">家纺专营店</text>
|
||
|
|
</view>
|
||
|
|
<view class="line df dfr aic mt10">
|
||
|
|
<!-- 评分 -->
|
||
|
|
<view class="item f24 c666 df aic ">
|
||
|
|
<uni-rate class="mr10" :value="4.5" :size="12" activeColor="#FF9B27" readonly />
|
||
|
|
<text>4.5</text>
|
||
|
|
</view>
|
||
|
|
<!-- 关注数量 -->
|
||
|
|
<view class="item follow c666 f24">
|
||
|
|
<text>123关注</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 关注按钮 -->
|
||
|
|
<view @click="followButton" class="btn sm warm plr30">
|
||
|
|
<uni-icons class="mr10" color="#fff" type="plusempty" size="13" v-if="1" />
|
||
|
|
<text class="cfff" v-else>已</text>
|
||
|
|
<text class="cfff">关注</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 宝贝详情 -->
|
||
|
|
<view class="p25 mtb240 bfff">
|
||
|
|
<view class="title">
|
||
|
|
<text class="modelTitle">宝贝名称</text>
|
||
|
|
</view>
|
||
|
|
<!-- 商品详情 -->
|
||
|
|
<view class="content mt30">
|
||
|
|
<rich-text
|
||
|
|
nodes="<p><img src='https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif' width='100%' /></p>" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 精选 -->
|
||
|
|
<view class="recommend mlr20">
|
||
|
|
<productList :choicenessTitle="true" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 底部 -->
|
||
|
|
<JyCommodityFoot />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
// 补齐轮播图高度
|
||
|
|
.swiper {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 轮播图
|
||
|
|
.banner {
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
height: 750rpx;
|
||
|
|
|
||
|
|
.poster {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 750rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
bottom: 20rpx;
|
||
|
|
right: 20rpx;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #000a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 模块标题
|
||
|
|
.modelTitle {
|
||
|
|
color: #333;
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 详情
|
||
|
|
.detail {
|
||
|
|
.price .txt {
|
||
|
|
color: #FF7F37;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 优惠券
|
||
|
|
.coupon {
|
||
|
|
.item {
|
||
|
|
padding: 2rpx 10rpx;
|
||
|
|
margin-right: 15rpx;
|
||
|
|
margin-bottom: 15rpx;
|
||
|
|
border: 2rpx solid;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gift {
|
||
|
|
.item {
|
||
|
|
margin-right: 20rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 最近购买
|
||
|
|
.recently {
|
||
|
|
height: 220rpx;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
height: 110rpx;
|
||
|
|
|
||
|
|
&+.item {
|
||
|
|
border-top: 2rpx solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info .fn {
|
||
|
|
color: #FF9B27;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 商品评价
|
||
|
|
.evaluate {
|
||
|
|
.header {
|
||
|
|
border-bottom: 2rpx solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list {
|
||
|
|
.item+.item {
|
||
|
|
border-top: 2rpx solid #eee;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment-popup {
|
||
|
|
border-radius: 20px 20px 0px 0px;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 28rpx 0 14rpx 0;
|
||
|
|
font-size: $uni-font-size-lg;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
right: 20rpx;
|
||
|
|
top: 30rpx;
|
||
|
|
display: inline-block;
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
//滚动
|
||
|
|
.jy-comment-list-content {
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 店铺
|
||
|
|
.store {
|
||
|
|
|
||
|
|
.info {
|
||
|
|
.item {
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item+.item {
|
||
|
|
padding-left: 10rpx;
|
||
|
|
border-left: 2rpx solid #eee;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|