详情页 视频播放，顶部导航，以及店铺链接
This commit is contained in:
yangdanqi
parent
7380fab63b
commit
4aa44d8e75
14
App.vue
14
App.vue
|
|
@ -113,6 +113,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
/* 主题 */
|
||||||
|
@import '@/style/blue/blue-topic.css';
|
||||||
|
/* 自定义公共css */
|
||||||
|
@import '@/style/default.css';
|
||||||
/* colorui */
|
/* colorui */
|
||||||
@import '@/colorui/main.css';
|
@import '@/colorui/main.css';
|
||||||
@import '@/colorui/icon.css';
|
@import '@/colorui/icon.css';
|
||||||
|
|
@ -126,14 +130,4 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
.margin-bottom-with-bar {
|
|
||||||
margin-bottom: 130rpx;
|
|
||||||
}
|
|
||||||
.uni-text-color {
|
|
||||||
color: #0081ff;
|
|
||||||
}
|
|
||||||
.uni-bg-color {
|
|
||||||
background-color: #0081ff;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,10 @@
|
||||||
<view class="cu-bar tabbar margin-bottom-xl bg-white fixed-bottom-bar">
|
<view class="cu-bar tabbar margin-bottom-xl bg-white fixed-bottom-bar">
|
||||||
<view class="action text-gray add-action" v-for="(item, index) in moduleBarInfos" :key="index"
|
<view class="action text-gray add-action" v-for="(item, index) in moduleBarInfos" :key="index"
|
||||||
v-if="item.action === 'add'">
|
v-if="item.action === 'add'">
|
||||||
<button class="cu-btn uni-bg-color shadow" :class="'cuIcon-' + item.cuIcon"></button>
|
<button class="cu-btn bg-main-color shadow" :class="'cuIcon-' + item.cuIcon"></button>
|
||||||
{{item.name}}
|
{{item.name}}
|
||||||
</view>
|
</view>
|
||||||
<view class="action uni-text-color" v-else-if="index === 0">
|
<view class="action text-main-color" v-else-if="index === 0">
|
||||||
<view :class="'cuIcon-' + item.cuIcon">
|
<view :class="'cuIcon-' + item.cuIcon">
|
||||||
<view class="cu-tag badge" v-if="item.countTag">{{item.countTag > 99 ? '99+' : item.countTag}}</view>
|
<view class="cu-tag badge" v-if="item.countTag">{{item.countTag > 99 ? '99+' : item.countTag}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -39,11 +39,5 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style>
|
||||||
.fixed-bottom-bar {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@
|
||||||
<view>
|
<view>
|
||||||
<view class="cu-bar bg-white solid-bottom margin-top-sm">
|
<view class="cu-bar bg-white solid-bottom margin-top-sm">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="cuIcon-titles uni-text-color"></text> {{title}}
|
<text class="cuIcon-titles text-main-color"></text> {{title}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="cu-card case no-card solid-bottom" v-for="(item, index) in goodsInfos" :key="index">
|
<view class="cu-card case no-card solid-bottom" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
|
||||||
<view class="cu-item shadow">
|
<view class="cu-item shadow">
|
||||||
<view class="image">
|
<view class="image">
|
||||||
<image :src="item.imgUrl"
|
<image :src="item.imgUrl"
|
||||||
|
|
@ -40,7 +40,9 @@
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
showDetails(productItem) {
|
||||||
|
uni.$emit('showProductDetail', productItem)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="cu-card dynamic no-card solid-bottom padding-bottom-sm " v-for="(reviewer, index) in reviewers" :key="item.id">
|
||||||
|
<view class="cu-item shadow">
|
||||||
|
<view class="cu-list menu-avatar no-border">
|
||||||
|
<view class="cu-item">
|
||||||
|
<view class="cu-avatar" :style="'background-image:url(' + reviewer.avatarUrl + ');'">
|
||||||
|
</view>
|
||||||
|
<view class="content flex-sub">
|
||||||
|
<view>{{reviewer.name}}</view>
|
||||||
|
<view class="text-gray text-sm flex justify-between">
|
||||||
|
{{reviewer.reviewTime}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-content">
|
||||||
|
{{reviewer.comments}}
|
||||||
|
</view>
|
||||||
|
<view class="grid flex-sub padding-lr col-3 grid-square" v-if="reviewer.picList">
|
||||||
|
<view class="bg-img" :style="'background-image:url(' + item.url + ');'"
|
||||||
|
v-for="(item, index) in reviewer.picList" :key="index" v-if="index < 3">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "comments-card",
|
||||||
|
props: {
|
||||||
|
reviewers: {
|
||||||
|
type: Array,
|
||||||
|
default: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isCard: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.cu-list.menu-avatar.no-border>.cu-item:after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
165
data.js
165
data.js
|
|
@ -5,7 +5,7 @@
|
||||||
const swiperList = [{
|
const swiperList = [{
|
||||||
id: 0,
|
id: 0,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17000.jpg'
|
||||||
}, {
|
}, {
|
||||||
id: 1,
|
id: 1,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
|
|
@ -189,11 +189,172 @@ const hotGoods = {
|
||||||
price: '283起'
|
price: '283起'
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const productDetail = {
|
||||||
|
productDetailImgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
|
||||||
|
swiperList: [{
|
||||||
|
id: 0,
|
||||||
|
type: 'video',
|
||||||
|
// url: 'https://v.quanjing.com/movie/default/bottom/1.mp4'
|
||||||
|
url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
|
||||||
|
}, {
|
||||||
|
id: 1,
|
||||||
|
type: 'image',
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
type: 'image',
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1000.jpg'
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
type: 'image',
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big2001.jpg'
|
||||||
|
}, {
|
||||||
|
id: 4,
|
||||||
|
type: 'image',
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big2002.jpg'
|
||||||
|
}, {
|
||||||
|
id: 5,
|
||||||
|
type: 'image',
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1002.jpg'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
type: 'image',
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3002.jpg'
|
||||||
|
}],
|
||||||
|
productInfo: {
|
||||||
|
name: '十五平米擦玻璃服务',
|
||||||
|
desc: '15平米起擦玻璃服务，超过15平米按照15/平米现场另收费',
|
||||||
|
isGoldServ: true
|
||||||
|
},
|
||||||
|
guaranteeList: [{
|
||||||
|
id: 1,
|
||||||
|
name: '服务保障',
|
||||||
|
desc: '服务保障描述......',
|
||||||
|
icon: 'repairfill'
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
name: '服务区域',
|
||||||
|
desc: '服务区域描述......',
|
||||||
|
icon: 'deliver_fill'
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
name: '备注',
|
||||||
|
desc: '备注描述......',
|
||||||
|
icon: 'commentfill'
|
||||||
|
},],
|
||||||
|
specsList: [{
|
||||||
|
id: 1,
|
||||||
|
name: '挂机内机拆洗（不分匹）',
|
||||||
|
salePrice: 199.00,
|
||||||
|
price: 300,
|
||||||
|
saledCount: 370,
|
||||||
|
commission: 12
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
name: '柜机拆洗（方型）含拆风轮',
|
||||||
|
salePrice: 240.00,
|
||||||
|
price: 350,
|
||||||
|
saledCount: 400,
|
||||||
|
commission: 16
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
name: '柜机圆柱型拆洗',
|
||||||
|
salePrice: 242.00,
|
||||||
|
price: 352,
|
||||||
|
saledCount: 350,
|
||||||
|
commission: 13
|
||||||
|
}, {
|
||||||
|
id: 4,
|
||||||
|
name: '中央风口机（单个风口）',
|
||||||
|
salePrice: 243.00,
|
||||||
|
price: 353,
|
||||||
|
saledCount: 100,
|
||||||
|
commission: 14
|
||||||
|
}, {
|
||||||
|
id: 5,
|
||||||
|
name: '天花机深度拆洗',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
name: '多台套餐xxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 7,
|
||||||
|
name: '多台套餐xxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
name: '多台套餐xxxxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 9,
|
||||||
|
name: '多台套餐xxxxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
name: '多台套餐xxxxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
commission: 15
|
||||||
|
}],
|
||||||
|
reviewers: [{
|
||||||
|
id: 1,
|
||||||
|
avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3002.jpg',
|
||||||
|
name: 'e**1',
|
||||||
|
reviewTime: '2022年03月17日',
|
||||||
|
comments: '很好用啊......',
|
||||||
|
picList: []
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
|
||||||
|
name: 'e**1',
|
||||||
|
reviewTime: '2022年03月17日',
|
||||||
|
comments: '很好用啊......',
|
||||||
|
picList: [{
|
||||||
|
id: 21,
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3004.jpg'
|
||||||
|
}, {
|
||||||
|
id: 22,
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
|
||||||
|
}, {
|
||||||
|
id: 23,
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
|
||||||
|
}, {
|
||||||
|
id: 24,
|
||||||
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
shopInfo: {
|
||||||
|
id: 1,
|
||||||
|
name: '艺鑫到家（售后无忧）',
|
||||||
|
avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17005.jpg'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
swiperList,
|
swiperList,
|
||||||
categories,
|
categories,
|
||||||
subCategories,
|
subCategories,
|
||||||
moduleBarInfos,
|
moduleBarInfos,
|
||||||
discountGoods,
|
discountGoods,
|
||||||
hotGoods
|
hotGoods,
|
||||||
|
|
||||||
|
productDetail
|
||||||
}
|
}
|
||||||
|
|
|
||||||
2
main.js
2
main.js
|
|
@ -11,7 +11,7 @@ const data = type=>{
|
||||||
return new Promise(resolve=>{
|
return new Promise(resolve=>{
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
resolve(Data[type]);
|
resolve(Data[type]);
|
||||||
}, 500)
|
}, 0)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
Vue.prototype.$api = {data}
|
Vue.prototype.$api = {data}
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
/* 快应用特有相关 */
|
/* 快应用特有相关 */
|
||||||
"mp-weixin" : {
|
"mp-weixin" : {
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"appid" : "wx7245cee0986fa0ac",
|
"appid" : "wxc39c2af3ea24cd37",
|
||||||
"setting" : {
|
"setting" : {
|
||||||
"urlCheck" : false,
|
"urlCheck" : false,
|
||||||
"minified" : false,
|
"minified" : false,
|
||||||
|
|
|
||||||
13
pages.json
13
pages.json
|
|
@ -1,10 +1,19 @@
|
||||||
{
|
{
|
||||||
"pages": [{
|
"pages": [{
|
||||||
"path": "pages/index/index"
|
"path": "pages/index/index"
|
||||||
}],
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/product/product-detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
// "navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
// "navigationBarTitleText": "uni-app",
|
// "navigationBarTitleText": "uni-app",
|
||||||
// "navigationBarBackgroundColor": "#F8F8F8",
|
// "navigationBarBackgroundColor": "#F8F8F8",
|
||||||
"backgroundColor": "#F8F8F8",
|
"backgroundColor": "#F8F8F8",
|
||||||
|
|
|
||||||
|
|
@ -26,13 +26,13 @@
|
||||||
<view class="flex justify-between text-black">
|
<view class="flex justify-between text-black">
|
||||||
<view class="padding text-lg">
|
<view class="padding text-lg">
|
||||||
<text>分类</text>
|
<text>分类</text>
|
||||||
<text class="cuIcon-apps uni-text-color"></text>
|
<text class="cuIcon-apps text-main-color"></text>
|
||||||
<text class="cuIcon-triangledownfill"></text>
|
<text class="cuIcon-triangledownfill"></text>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<scroll-view scroll-x class="nav">
|
<scroll-view scroll-x class="nav">
|
||||||
<view class="flex text-center">
|
<view class="flex text-center">
|
||||||
<view class="cu-item flex-sub" :class="index==tabCur?'uni-text-color cur':''"
|
<view class="cu-item flex-sub" :class="index==tabCur?'text-main-color cur':''"
|
||||||
v-for="(item,index) in categories" :key="item.id" @tap="tabSelect" :data-id="index">
|
v-for="(item,index) in categories" :key="item.id" @tap="tabSelect" :data-id="index">
|
||||||
{{item.name}}
|
{{item.name}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -85,7 +85,7 @@
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dotStyle: false,
|
dotStyle: true,
|
||||||
swiperList: [],
|
swiperList: [],
|
||||||
tabCur: 0,
|
tabCur: 0,
|
||||||
categories: [],
|
categories: [],
|
||||||
|
|
@ -97,6 +97,7 @@
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.loadData();
|
this.loadData();
|
||||||
|
this.bindEvent();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async loadData() {
|
async loadData() {
|
||||||
|
|
@ -107,6 +108,9 @@
|
||||||
this.hotGoods = await this.$api.data('hotGoods');
|
this.hotGoods = await this.$api.data('hotGoods');
|
||||||
this.discountGoods = await this.$api.data('discountGoods');
|
this.discountGoods = await this.$api.data('discountGoods');
|
||||||
},
|
},
|
||||||
|
bindEvent() {
|
||||||
|
uni.$on('showProductDetail', this.showDetails);
|
||||||
|
},
|
||||||
inputFocus(e) {
|
inputFocus(e) {
|
||||||
this.InputBottom = e.detail.height
|
this.InputBottom = e.detail.height
|
||||||
},
|
},
|
||||||
|
|
@ -124,6 +128,11 @@
|
||||||
searchGoods(item) {
|
searchGoods(item) {
|
||||||
console.log("搜索条件信息: " + item)
|
console.log("搜索条件信息: " + item)
|
||||||
console.log("商品搜索中...");
|
console.log("商品搜索中...");
|
||||||
|
},
|
||||||
|
showDetails(productItem) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '../product/product-detail'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 顶部操作条 -->
|
||||||
|
<cu-custom :bgColor="'bg-white'" :isBack="true">
|
||||||
|
<block slot="backText">返回</block>
|
||||||
|
<!-- <block slot="content">商品详情</block> -->
|
||||||
|
</cu-custom>
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<uni-transition class="fixed-top-bar" mode-class="fade" :show="showTopNav">
|
||||||
|
<view class="grid text-center col-3 solid-top solid-bottom bg-white">
|
||||||
|
<view class="padding" :class="curTopNav == 0 ? 'bg-blue' : ''" @click.stop="clickNav(0)">服务</view>
|
||||||
|
<view class="padding" :class="curTopNav == 1 ? 'bg-blue' : ''" @click.stop="clickNav(1)">评价</view>
|
||||||
|
<view class="padding" :class="curTopNav == 2 ? 'bg-blue' : ''" @click.stop="clickNav(2)">详情</view>
|
||||||
|
</view>
|
||||||
|
</uni-transition>
|
||||||
|
<!-- 轮播图，视频 -->
|
||||||
|
<swiper class="screen-swiper" @change="changeSwiper">
|
||||||
|
<swiper-item v-for="(item,index) in swiperList" :key="item.id" @click="pauseVideo($event, item)">
|
||||||
|
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||||
|
<video v-if="item.type=='video'" id="productVideo" :src="item.url" :controls="true" :autoplay="false"
|
||||||
|
:show-center-play-btn="true" :show-fullscreen-btn="false"></video>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<!-- 价格及活动栏 -->
|
||||||
|
<view class="bg-gradual-color padding-sm margin-bottom-xs shadow-blur">
|
||||||
|
<view class="flex justify-between align-center">
|
||||||
|
<view>
|
||||||
|
<text class="text-sl text-price">{{curProductSpecs.salePrice}}</text>
|
||||||
|
<text class="text-del">
|
||||||
|
<text class="text-xxl">¥{{curProductSpecs.price}}</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text class="text-df">已售：{{curProductSpecs.saledCount}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view id="pageAnchor0" class="flex justify-between align-end">
|
||||||
|
<view class="text-df">
|
||||||
|
佣金：<text class="text-price margin-right-sm">{{curProductSpecs.commission}}</text>
|
||||||
|
<text class="cuIcon-share"></text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="text-df">
|
||||||
|
距结束：<uni-countdown style="float: right;" :day="1" :hour="1" :minute="12" :second="40" background-color="#fff" splitorColor="#fff"></uni-countdown>
|
||||||
|
</view> -->
|
||||||
|
<view class="flex justify-end text-df align-center">
|
||||||
|
<view>距结束：</view>
|
||||||
|
<uni-countdown style="float: right;" :day="1" :hour="1" :minute="12" :second="40"
|
||||||
|
background-color="#fff" splitorColor="#fff"></uni-countdown>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 产品概要 -->
|
||||||
|
<view class="bg-white padding-sm">
|
||||||
|
<view class="flex justify-between text-df align-center">
|
||||||
|
<view class="padding-right-sm text-left solid-right">
|
||||||
|
<view class="text-xl">
|
||||||
|
<view class='cu-tag round bg-orange light' v-if="productInfo.isGoldServ">
|
||||||
|
<text class="cuIcon-medal">金牌服务</text>
|
||||||
|
</view>
|
||||||
|
{{productInfo.name}}
|
||||||
|
</view>
|
||||||
|
<view class="text-sm text-gray margin-top-xs">{{productInfo.desc}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-xl text-right padding-lr">
|
||||||
|
<view class="margin-tb-xs"><text class="cuIcon-share"></text></view>
|
||||||
|
<view v-if="productInfo.isGoldServ" class="margin-tb-xs text-orange"><text
|
||||||
|
class="cuIcon-friendfamous"></text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 服务保障和规格 -->
|
||||||
|
<view class="margin-lr-sm padding margin-top-sm bg-white">
|
||||||
|
<view v-for="(item, index) in guaranteeList" :key="item.id">
|
||||||
|
<view class="cu-capsule margin-tb-xs">
|
||||||
|
<view class='cu-tag bg-main-color'>
|
||||||
|
<text :class="'cuIcon-' + item.icon"></text>
|
||||||
|
</view>
|
||||||
|
<view class="cu-tag line-main-color">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="margin-lr-xs text-sm">{{item.desc}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="solid-top text-lg padding-tb-sm">
|
||||||
|
<text class="text-black">选择品类</text>
|
||||||
|
</view>
|
||||||
|
<view class="flex flex-wrap" :class="isShowAllSpecs ? '' : 'certern-height'">
|
||||||
|
<view class="margin-tb-xs margin-right-xs" v-for="(item,index) in specsList" :key="item.id">
|
||||||
|
<view class='cu-tag round padding'
|
||||||
|
:class="curProductSpecs.id === item.id ? 'line-main-color' : 'line-default'"
|
||||||
|
@click="chooseSpecs(item)">{{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-bold text-gray text-lg text-center bg-white padding-top-sm" @click="showAllSpecs()"><text
|
||||||
|
:class="'cuIcon-' + (isShowAllSpecs ? 'fold' : 'unfold')"></text></view>
|
||||||
|
</view>
|
||||||
|
<!-- 服务评价 -->
|
||||||
|
<view id="pageAnchor1" class="margin-lr-sm margin-top-sm bg-white">
|
||||||
|
<view class="flex justify-between align-end padding">
|
||||||
|
<view class="text-black text-lg">商品评价</view>
|
||||||
|
<view class="text-red text-sm">好评率95%<text class="text-bold text-gray cuIcon-right"></text></view>
|
||||||
|
</view>
|
||||||
|
<comments-card :reviewers="reviewers"></comments-card>
|
||||||
|
</view>
|
||||||
|
<!-- 店家链接 -->
|
||||||
|
<view class="margin-lr-sm margin-top-sm padding bg-white">
|
||||||
|
<view class="flex justify-between align-center">
|
||||||
|
<view class="flex justify-start align-center">
|
||||||
|
<view class="cu-avatar" :style="'background-image:url(' + shopInfo.avatarUrl + ');'"></view>
|
||||||
|
<view class="margin-lr-sm text-lg text-black">{{shopInfo.name}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-sm">查看<text class="text-bold text-gray cuIcon-right"></text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 服务详情 -->
|
||||||
|
<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
|
||||||
|
<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
|
||||||
|
详情图片......
|
||||||
|
</view>
|
||||||
|
<!-- 底部操作条 -->
|
||||||
|
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
||||||
|
<button class="action" open-type="contact">
|
||||||
|
<view class="cuIcon-service text-green">
|
||||||
|
<view class="cu-tag badge"></view>
|
||||||
|
</view>
|
||||||
|
客服
|
||||||
|
</button>
|
||||||
|
<!-- <view class="action">
|
||||||
|
<view class=" cuIcon-shop"></view> 店铺
|
||||||
|
</view> -->
|
||||||
|
<view class="action">
|
||||||
|
<view class="cuIcon-cart">
|
||||||
|
<view class="cu-tag badge">99</view>
|
||||||
|
</view>
|
||||||
|
购物车
|
||||||
|
</view>
|
||||||
|
<view class="bg-main-color light submit">加入购物车</view>
|
||||||
|
<view class="bg-main-color submit">立即订购</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import commentsCard from '@/components/goods-card/comments-card.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
commentsCard
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
swiperList: [],
|
||||||
|
curProductSpecs: {},
|
||||||
|
productInfo: {},
|
||||||
|
guaranteeList: [],
|
||||||
|
specsList: [],
|
||||||
|
isShowAllSpecs: false,
|
||||||
|
reviewers: [],
|
||||||
|
productDetailImgUrl: '',
|
||||||
|
productVideoPlaying: false,
|
||||||
|
showTopNav: false,
|
||||||
|
curTopNav: 0,
|
||||||
|
shopInfo: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadData();
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
this.productVideoContext = uni.createVideoContext('productVideo');
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.showTopNav = e.scrollTop > 250 ? true : false
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadData() {
|
||||||
|
let productDetail = await this.$api.data('productDetail');
|
||||||
|
this.swiperList = productDetail.swiperList;
|
||||||
|
this.productInfo = productDetail.productInfo;
|
||||||
|
this.guaranteeList = productDetail.guaranteeList;
|
||||||
|
this.specsList = productDetail.specsList;
|
||||||
|
this.curProductSpecs = this.specsList[0];
|
||||||
|
this.reviewers = productDetail.reviewers;
|
||||||
|
this.productDetailImgUrl = productDetail.productDetailImgUrl;
|
||||||
|
this.shopInfo = productDetail.shopInfo;
|
||||||
|
},
|
||||||
|
chooseSpecs(item) {
|
||||||
|
this.curProductSpecs = item;
|
||||||
|
},
|
||||||
|
showAllSpecs() {
|
||||||
|
this.isShowAllSpecs = !this.isShowAllSpecs;
|
||||||
|
},
|
||||||
|
pauseVideo(e, item) {
|
||||||
|
if (item.type !== 'video') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.productVideoPlaying) {
|
||||||
|
this.productVideoContext.pause();
|
||||||
|
} else {
|
||||||
|
this.productVideoContext.play();
|
||||||
|
}
|
||||||
|
this.productVideoPlaying = !this.productVideoPlaying;
|
||||||
|
},
|
||||||
|
changeSwiper(e) {
|
||||||
|
// 只有第一个是视频，如果是切换到图片就停止播放
|
||||||
|
if (e.detail.current !== 0) {
|
||||||
|
this.productVideoContext.pause();
|
||||||
|
this.productVideoPlaying = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clickNav(index) {
|
||||||
|
// 修改聚焦时的样式
|
||||||
|
this.curTopNav = index;
|
||||||
|
// 跳转到指定目录
|
||||||
|
uni.pageScrollTo({
|
||||||
|
selector: '#pageAnchor' + index
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.text-del {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.certern-height {
|
||||||
|
height: 300rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.line-default {
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-main-color,
|
||||||
|
.text-main-color {
|
||||||
|
color: #0081ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-main-color {
|
||||||
|
background-color: #0081ff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-main-color.light {
|
||||||
|
color: #0081ff;
|
||||||
|
background-color: #cce6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradual-color {
|
||||||
|
background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
.margin-bottom-with-bar {
|
||||||
|
margin-bottom: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-bottom-bar {
|
||||||
|
position: fixed !important;
|
||||||
|
width: 100% !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
z-index: 210000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-top-bar {
|
||||||
|
position: fixed !important;
|
||||||
|
z-index: 210000000;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue