clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

详情页 视频播放，顶部导航，以及店铺链接

This commit is contained in:
yangdanqi 2022-03-18 17:13:24 +08:00
parent 7380fab63b
commit 4aa44d8e75
12 changed files with 539 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
App.vue
View File

@ -113,6 +113,10 @@
</script>
<style lang="scss">
/* 主题 */
@import '@/style/blue/blue-topic.css';
/* 自定义公共css */
@import '@/style/default.css';
/* colorui */
@import '@/colorui/main.css';
@import '@/colorui/icon.css';
@ -126,14 +130,4 @@
}
/* #endif */
.margin-bottom-with-bar {
margin-bottom: 130rpx;
}
.uni-text-color {
color: #0081ff;
}
.uni-bg-color {
background-color: #0081ff;
color: #ffffff;
}
</style>

12
components/custom-bar/module-bar.vue
View File

@ -3,10 +3,10 @@
<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"
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}}
</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="cu-tag badge" v-if="item.countTag">{{item.countTag > 99 ? '99+' : item.countTag}}</view>
</view>
@ -39,11 +39,5 @@
}
</script>
<style scoped>
.fixed-bottom-bar {
position: fixed;
width: 100%;
bottom: 0;
margin-bottom: 0;
}
<style>
</style>

8
components/goods-card/classify-goods-card.vue
View File

@ -2,10 +2,10 @@
<view>
<view class="cu-bar bg-white solid-bottom margin-top-sm">
<view class="action">
<text class="cuIcon-titles uni-text-color"></text> {{title}}
<text class="cuIcon-titles text-main-color"></text> {{title}}
</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="image">
<image :src="item.imgUrl"
@ -40,7 +40,9 @@
return {};
},
methods: {
showDetails(productItem) {
uni.$emit('showProductDetail', productItem)
}
}
}
</script>

54
components/goods-card/comments-card.vue Normal file
View File

@ -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
View File

@ -5,7 +5,7 @@
const swiperList = [{
id: 0,
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,
type: 'image',
@ -189,11 +189,172 @@ const hotGoods = {
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 {
swiperList,
categories,
subCategories,
moduleBarInfos,
discountGoods,
hotGoods
hotGoods,
productDetail
}

2
main.js
View File

@ -11,7 +11,7 @@ const data = type=>{
return new Promise(resolve=>{
setTimeout(()=>{
resolve(Data[type]);
}, 500)
}, 0)
})
}
Vue.prototype.$api = {data}

2
manifest.json
View File

@ -49,7 +49,7 @@
/* 快应用特有相关 */
"mp-weixin" : {
/* 小程序特有相关 */
"appid" : "wx7245cee0986fa0ac",
"appid" : "wxc39c2af3ea24cd37",
"setting" : {
"urlCheck" : false,
"minified" : false,

13
pages.json
View File

@ -1,10 +1,19 @@
{
"pages": [{
"path": "pages/index/index"
}],
},
{
"path": "pages/product/product-detail",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationStyle": "custom",
// "navigationBarTextStyle": "black",
"navigationBarTextStyle": "black",
// "navigationBarTitleText": "uni-app",
// "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",

15
pages/index/index.vue
View File

@ -26,13 +26,13 @@
<view class="flex justify-between text-black">
<view class="padding text-lg">
<text>分类</text>
<text class="cuIcon-apps uni-text-color"></text>
<text class="cuIcon-apps text-main-color"></text>
<text class="cuIcon-triangledownfill"></text>
</view>
<view>
<scroll-view scroll-x class="nav">
<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">
{{item.name}}
</view>
@ -85,7 +85,7 @@
},
data() {
return {
dotStyle: false,
dotStyle: true,
swiperList: [],
tabCur: 0,
categories: [],
@ -97,6 +97,7 @@
},
onLoad() {
this.loadData();
this.bindEvent();
},
methods: {
async loadData() {
@ -107,6 +108,9 @@
this.hotGoods = await this.$api.data('hotGoods');
this.discountGoods = await this.$api.data('discountGoods');
},
bindEvent() {
uni.$on('showProductDetail', this.showDetails);
},
inputFocus(e) {
this.InputBottom = e.detail.height
},
@ -124,6 +128,11 @@
searchGoods(item) {
console.log("搜索条件信息: " + item)
console.log("商品搜索中...");
},
showDetails(productItem) {
uni.navigateTo({
url: '../product/product-detail'
});
}
}
}

232
pages/product/product-detail.vue Normal file
View File

@ -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>

23
style/blue/blue-topic.css Normal file
View File

@ -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;
}

17
style/default.css Normal file
View File

@ -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%;
}