店铺主页
This commit is contained in:
yangdanqi
parent
a73fbb298e
commit
eec23581e1
|
|
@ -0,0 +1,59 @@
|
||||||
|
<template>
|
||||||
|
<view class="product-item flex justify-start">
|
||||||
|
<view class="cu-avatar xl-view" :style="'background-image:url(' + vCard.picUrl + ');'">
|
||||||
|
</view>
|
||||||
|
<view class="margin-left-sm product-content">
|
||||||
|
<view>
|
||||||
|
<view class="text-black text-xl">{{vCard.name}}</view>
|
||||||
|
<view>
|
||||||
|
<text v-if="vCard.comments.icon" :class="'cuIcon-' + vCard.comments.icon" class="margin-right-xs text-main-color"></text>
|
||||||
|
<text>{{vCard.comments.desc}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-for="(item, index) in vCard.extraInfos">
|
||||||
|
<view class="text-sm">
|
||||||
|
<text v-if="item.icon" :class="'cuIcon-' + item.icon" class="margin-right-xs text-main-color"></text>
|
||||||
|
<text>{{item.desc}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'horizontal-name-card',
|
||||||
|
props: {
|
||||||
|
vCard: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.xl-view {
|
||||||
|
min-width: 150rpx;
|
||||||
|
min-height: 150rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 16rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
<view class="product-item flex justify-start">
|
||||||
|
<view class="cu-avatar xxl-view" :style="'background-image:url(' + product.picUrl + ');'">
|
||||||
|
</view>
|
||||||
|
<view class="margin-left-sm product-content">
|
||||||
|
<view>
|
||||||
|
<view class="text-black">{{product.name}}</view>
|
||||||
|
<view class="text-sm">{{product.comments}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-price text-red text-bold text-xl" v-if="ifShowPrice">{{product.salePrice}}</view>
|
||||||
|
<view v-if="ifShowServArea">
|
||||||
|
<view class="cu-capsule">
|
||||||
|
<view class='cu-tag bg-main-color sm'>
|
||||||
|
<text class='cuIcon-locationfill'></text>
|
||||||
|
</view>
|
||||||
|
<view class="cu-tag line-main-color sm">
|
||||||
|
服务区域
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="margin-lr-xs text-xs" v-if="ifShowServArea">{{product.servArea}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'horizontal-goods-card',
|
||||||
|
props: {
|
||||||
|
ifShowServArea: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
ifShowPrice: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
product: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.xxl-view {
|
||||||
|
min-width: 230rpx;
|
||||||
|
min-height: 230rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 16rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "classify-goods-card",
|
name: "vertical-goods-card",
|
||||||
props: {
|
props: {
|
||||||
title: '',
|
title: '',
|
||||||
goodsInfos: {
|
goodsInfos: {
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showDetails(productItem) {
|
showDetails(productItem) {
|
||||||
uni.$emit('showProductDetail', productItem)
|
uni.$emit('index_showProductDetail', productItem)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
801
data.js
801
data.js
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* 页面静态数据
|
* 页面静态数据
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const swiperList = [{
|
const swiperList = [{
|
||||||
id: 0,
|
id: 0,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
|
|
@ -31,350 +31,473 @@ const swiperList = [{
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
|
||||||
}]
|
}]
|
||||||
|
|
||||||
const categories = [{
|
const categories = [{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: '服务商城'
|
name: '服务商城'
|
||||||
}, {
|
}, {
|
||||||
id: 2,
|
id: 2,
|
||||||
name: '二手城'
|
name: '二手城'
|
||||||
}, {
|
}, {
|
||||||
id: 3,
|
id: 3,
|
||||||
name: '供货商城'
|
name: '供货商城'
|
||||||
|
}]
|
||||||
|
|
||||||
|
const subCategories = [{
|
||||||
|
id: 1,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'red',
|
||||||
|
name: '空调清洗',
|
||||||
|
badge: '69洗'
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'orange',
|
||||||
|
name: '家庭维修',
|
||||||
|
badge: '新品'
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'yellow',
|
||||||
|
name: 'iPhone维修',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 4,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'olive',
|
||||||
|
name: '家居安装',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 5,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'green',
|
||||||
|
name: '甲醛治理',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'cyan',
|
||||||
|
name: '任洗套装',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 7,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'blue',
|
||||||
|
name: '家电安装',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'purple',
|
||||||
|
name: '领券中心',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 9,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'mauve',
|
||||||
|
name: 'DIY装机',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'pink',
|
||||||
|
name: '家电回收',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 11,
|
||||||
|
cuIcon: 'shopfill',
|
||||||
|
color: 'cyan',
|
||||||
|
name: '家电清洗',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 12,
|
||||||
|
cuIcon: 'deliver',
|
||||||
|
color: 'green',
|
||||||
|
name: '手机维修',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 13,
|
||||||
|
cuIcon: 'deliver',
|
||||||
|
color: 'pink',
|
||||||
|
name: '洗衣洗鞋',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 14,
|
||||||
|
cuIcon: 'deliver',
|
||||||
|
color: 'pink',
|
||||||
|
name: '上门安装',
|
||||||
|
badge: ''
|
||||||
|
}, {
|
||||||
|
id: 15,
|
||||||
|
cuIcon: 'deliver',
|
||||||
|
color: 'pink',
|
||||||
|
name: '奢品养护',
|
||||||
|
badge: ''
|
||||||
|
}]
|
||||||
|
|
||||||
|
const moduleBarInfos = [{
|
||||||
|
id: 1,
|
||||||
|
cuIcon: 'homefill',
|
||||||
|
name: '首页'
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
cuIcon: 'circle',
|
||||||
|
name: '师傅圈'
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
cuIcon: 'add',
|
||||||
|
name: '发布',
|
||||||
|
action: 'add'
|
||||||
|
}, {
|
||||||
|
id: 4,
|
||||||
|
cuIcon: 'message',
|
||||||
|
name: '消息',
|
||||||
|
countTag: 100
|
||||||
|
}, {
|
||||||
|
id: 5,
|
||||||
|
cuIcon: 'my',
|
||||||
|
name: '我的'
|
||||||
|
}]
|
||||||
|
|
||||||
|
const discountGoods = {
|
||||||
|
title: '超值服务品牌直降',
|
||||||
|
goodsInfos: [{
|
||||||
|
id: 1,
|
||||||
|
imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
|
||||||
|
name: '十平米擦玻璃服务',
|
||||||
|
desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
|
||||||
|
tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
|
||||||
|
price: '189起'
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg',
|
||||||
|
name: '十平米擦玻璃服务',
|
||||||
|
desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
|
||||||
|
tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
|
||||||
|
price: '200起'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
|
const hotGoods = {
|
||||||
|
title: '大家都在买',
|
||||||
|
goodsInfos: [{
|
||||||
|
id: 1,
|
||||||
|
imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10000.jpg',
|
||||||
|
name: '十五平米擦玻璃服务',
|
||||||
|
desc: '15平米起擦玻璃服务，超过15平米按照15/平米现场另收费，11111111111111111',
|
||||||
|
tag: ['自营直选', '不满意重新服务', '全程上险'],
|
||||||
|
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,
|
||||||
|
maxPieces: 1000,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 12
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
name: '柜机拆洗（方型）含拆风轮',
|
||||||
|
salePrice: 240.00,
|
||||||
|
price: 350,
|
||||||
|
saledCount: 400,
|
||||||
|
maxPieces: 1001,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 16
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
name: '柜机圆柱型拆洗',
|
||||||
|
salePrice: 242.00,
|
||||||
|
price: 352,
|
||||||
|
saledCount: 350,
|
||||||
|
maxPieces: 1002,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 13
|
||||||
|
}, {
|
||||||
|
id: 4,
|
||||||
|
name: '中央风口机（单个风口）',
|
||||||
|
salePrice: 243.00,
|
||||||
|
price: 353,
|
||||||
|
saledCount: 100,
|
||||||
|
maxPieces: 1003,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 14
|
||||||
|
}, {
|
||||||
|
id: 5,
|
||||||
|
name: '天花机深度拆洗',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
maxPieces: 1004,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
name: '多台套餐xxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
maxPieces: 1005,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 7,
|
||||||
|
name: '多台套餐xxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
maxPieces: 1006,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
name: '多台套餐xxxxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
maxPieces: 1007,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 9,
|
||||||
|
name: '多台套餐xxxxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
maxPieces: 1008,
|
||||||
|
comments: '备注',
|
||||||
|
commission: 15
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
name: '多台套餐xxxxxxxx自命名',
|
||||||
|
salePrice: 244.00,
|
||||||
|
price: 354,
|
||||||
|
saledCount: 109,
|
||||||
|
maxPieces: 1009,
|
||||||
|
comments: '备注',
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const pickedProductList = [{
|
||||||
|
product: {
|
||||||
|
id: 1,
|
||||||
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
|
||||||
|
name: '柜机空调清洗1',
|
||||||
|
comments: '备---------注',
|
||||||
|
salePrice: 199,
|
||||||
|
servArea: ['天河区', '黄埔区', '荔湾区']
|
||||||
|
},
|
||||||
|
pickedList: [{
|
||||||
|
id: 101,
|
||||||
|
name: '挂机内机拆洗（不分匹）',
|
||||||
|
pickedNum: 1
|
||||||
|
}, {
|
||||||
|
id: 102,
|
||||||
|
name: '柜机拆洗（方型）含拆风轮',
|
||||||
|
pickedNum: 2
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
product: {
|
||||||
|
id: 2,
|
||||||
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
|
||||||
|
name: '柜机空调清洗2',
|
||||||
|
comments: '备---------注',
|
||||||
|
salePrice: 200,
|
||||||
|
servArea: ['天河区', '黄埔区']
|
||||||
|
},
|
||||||
|
pickedList: [{
|
||||||
|
id: 201,
|
||||||
|
name: '多台套餐xxx自命名',
|
||||||
|
pickedNum: 2
|
||||||
|
}, {
|
||||||
|
id: 202,
|
||||||
|
name: '多台套餐xxxx自命名',
|
||||||
|
pickedNum: 2
|
||||||
|
}, {
|
||||||
|
id: 203,
|
||||||
|
name: '多台套餐xxxx自命名',
|
||||||
|
pickedNum: 2
|
||||||
|
}, {
|
||||||
|
id: 204,
|
||||||
|
name: '多台套餐xxxx自命名',
|
||||||
|
pickedNum: 2
|
||||||
|
}, {
|
||||||
|
id: 205,
|
||||||
|
name: '多台套餐xxxx自命名',
|
||||||
|
pickedNum: 2
|
||||||
|
}]
|
||||||
}]
|
}]
|
||||||
|
|
||||||
const subCategories = [{
|
const shopInfo = {
|
||||||
id: 1,
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17005.jpg',
|
||||||
cuIcon: 'shopfill',
|
name: '艺鑫到家（售后无忧）',
|
||||||
color: 'red',
|
comments: {
|
||||||
name: '空调清洗',
|
icon: 'form',
|
||||||
badge: '69洗'
|
desc: '企业认证'
|
||||||
}, {
|
|
||||||
id: 2,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'orange',
|
|
||||||
name: '家庭维修',
|
|
||||||
badge: '新品'
|
|
||||||
}, {
|
|
||||||
id: 3,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'yellow',
|
|
||||||
name: 'iPhone维修',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 4,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'olive',
|
|
||||||
name: '家居安装',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 5,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'green',
|
|
||||||
name: '甲醛治理',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 6,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'cyan',
|
|
||||||
name: '任洗套装',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 7,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'blue',
|
|
||||||
name: '家电安装',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 8,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'purple',
|
|
||||||
name: '领券中心',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 9,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'mauve',
|
|
||||||
name: 'DIY装机',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 10,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'pink',
|
|
||||||
name: '家电回收',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 11,
|
|
||||||
cuIcon: 'shopfill',
|
|
||||||
color: 'cyan',
|
|
||||||
name: '家电清洗',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 12,
|
|
||||||
cuIcon: 'deliver',
|
|
||||||
color: 'green',
|
|
||||||
name: '手机维修',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 13,
|
|
||||||
cuIcon: 'deliver',
|
|
||||||
color: 'pink',
|
|
||||||
name: '洗衣洗鞋',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 14,
|
|
||||||
cuIcon: 'deliver',
|
|
||||||
color: 'pink',
|
|
||||||
name: '上门安装',
|
|
||||||
badge: ''
|
|
||||||
}, {
|
|
||||||
id: 15,
|
|
||||||
cuIcon: 'deliver',
|
|
||||||
color: 'pink',
|
|
||||||
name: '奢品养护',
|
|
||||||
badge: ''
|
|
||||||
}]
|
|
||||||
|
|
||||||
const moduleBarInfos = [{
|
|
||||||
id: 1,
|
|
||||||
cuIcon: 'homefill',
|
|
||||||
name: '首页'
|
|
||||||
}, {
|
|
||||||
id: 2,
|
|
||||||
cuIcon: 'circle',
|
|
||||||
name: '师傅圈'
|
|
||||||
}, {
|
|
||||||
id: 3,
|
|
||||||
cuIcon: 'add',
|
|
||||||
name: '发布',
|
|
||||||
action: 'add'
|
|
||||||
}, {
|
|
||||||
id: 4,
|
|
||||||
cuIcon: 'message',
|
|
||||||
name: '消息',
|
|
||||||
countTag: 100
|
|
||||||
}, {
|
|
||||||
id: 5,
|
|
||||||
cuIcon: 'my',
|
|
||||||
name: '我的'
|
|
||||||
}]
|
|
||||||
|
|
||||||
const discountGoods = {
|
|
||||||
title: '超值服务品牌直降',
|
|
||||||
goodsInfos: [{
|
|
||||||
id: 1,
|
|
||||||
imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
|
|
||||||
name: '十平米擦玻璃服务',
|
|
||||||
desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
|
|
||||||
tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
|
|
||||||
price: '189起'
|
|
||||||
}, {
|
|
||||||
id: 2,
|
|
||||||
imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg',
|
|
||||||
name: '十平米擦玻璃服务',
|
|
||||||
desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
|
|
||||||
tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
|
|
||||||
price: '200起'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
||||||
const hotGoods = {
|
|
||||||
title: '大家都在买',
|
|
||||||
goodsInfos: [{
|
|
||||||
id: 1,
|
|
||||||
imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10000.jpg',
|
|
||||||
name: '十五平米擦玻璃服务',
|
|
||||||
desc: '15平米起擦玻璃服务，超过15平米按照15/平米现场另收费，11111111111111111',
|
|
||||||
tag: ['自营直选', '不满意重新服务', '全程上险'],
|
|
||||||
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: [{
|
extraInfos: [{
|
||||||
|
icon: 'locationfill',
|
||||||
|
desc: '广东省广州市番禺区钟村街道188号'
|
||||||
|
}],
|
||||||
|
totalScore: 4.5,
|
||||||
|
timeScore: 4.4,
|
||||||
|
attitudeScore: 4.4,
|
||||||
|
skillScore:4.6,
|
||||||
|
servType: '空调',
|
||||||
|
additionalServ: [{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: '服务保障',
|
name: '58速运'
|
||||||
desc: '服务保障描述......',
|
|
||||||
icon: 'repairfill'
|
|
||||||
}, {
|
}, {
|
||||||
id: 2,
|
id: 2,
|
||||||
name: '服务区域',
|
name: '货拉拉'
|
||||||
desc: '服务区域描述......',
|
|
||||||
icon: 'deliver_fill'
|
|
||||||
}, {
|
}, {
|
||||||
id: 3,
|
id: 3,
|
||||||
name: '备注',
|
name: '搬货服务'
|
||||||
desc: '备注描述......',
|
|
||||||
icon: 'commentfill'
|
|
||||||
},],
|
|
||||||
specsList: [{
|
|
||||||
id: 1,
|
|
||||||
name: '挂机内机拆洗（不分匹）',
|
|
||||||
salePrice: 199.00,
|
|
||||||
price: 300,
|
|
||||||
saledCount: 370,
|
|
||||||
maxPieces: 1000,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 12
|
|
||||||
}, {
|
|
||||||
id: 2,
|
|
||||||
name: '柜机拆洗（方型）含拆风轮',
|
|
||||||
salePrice: 240.00,
|
|
||||||
price: 350,
|
|
||||||
saledCount: 400,
|
|
||||||
maxPieces: 1001,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 16
|
|
||||||
}, {
|
|
||||||
id: 3,
|
|
||||||
name: '柜机圆柱型拆洗',
|
|
||||||
salePrice: 242.00,
|
|
||||||
price: 352,
|
|
||||||
saledCount: 350,
|
|
||||||
maxPieces: 1002,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 13
|
|
||||||
}, {
|
|
||||||
id: 4,
|
|
||||||
name: '中央风口机（单个风口）',
|
|
||||||
salePrice: 243.00,
|
|
||||||
price: 353,
|
|
||||||
saledCount: 100,
|
|
||||||
maxPieces: 1003,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 14
|
|
||||||
}, {
|
|
||||||
id: 5,
|
|
||||||
name: '天花机深度拆洗',
|
|
||||||
salePrice: 244.00,
|
|
||||||
price: 354,
|
|
||||||
saledCount: 109,
|
|
||||||
maxPieces: 1004,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 15
|
|
||||||
}, {
|
|
||||||
id: 6,
|
|
||||||
name: '多台套餐xxx自命名',
|
|
||||||
salePrice: 244.00,
|
|
||||||
price: 354,
|
|
||||||
saledCount: 109,
|
|
||||||
maxPieces: 1005,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 15
|
|
||||||
}, {
|
|
||||||
id: 7,
|
|
||||||
name: '多台套餐xxxxxx自命名',
|
|
||||||
salePrice: 244.00,
|
|
||||||
price: 354,
|
|
||||||
saledCount: 109,
|
|
||||||
maxPieces: 1006,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 15
|
|
||||||
}, {
|
|
||||||
id: 8,
|
|
||||||
name: '多台套餐xxxxxxxx自命名',
|
|
||||||
salePrice: 244.00,
|
|
||||||
price: 354,
|
|
||||||
saledCount: 109,
|
|
||||||
maxPieces: 1007,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 15
|
|
||||||
}, {
|
|
||||||
id: 9,
|
|
||||||
name: '多台套餐xxxxxxxx自命名',
|
|
||||||
salePrice: 244.00,
|
|
||||||
price: 354,
|
|
||||||
saledCount: 109,
|
|
||||||
maxPieces: 1008,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 15
|
|
||||||
}, {
|
|
||||||
id: 10,
|
|
||||||
name: '多台套餐xxxxxxxx自命名',
|
|
||||||
salePrice: 244.00,
|
|
||||||
price: 354,
|
|
||||||
saledCount: 109,
|
|
||||||
maxPieces: 1009,
|
|
||||||
comments: '备注',
|
|
||||||
commission: 15
|
|
||||||
}],
|
}],
|
||||||
reviewers: [{
|
servArea: ['天河区', '黄埔区', '荔湾区'],
|
||||||
id: 1,
|
productList: [{
|
||||||
avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3002.jpg',
|
id: 1,
|
||||||
name: 'e**1',
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
|
||||||
reviewTime: '2022年03月17日',
|
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
|
||||||
comments: '很好用啊......',
|
comments: '智能断点 | 遥控预约调温 | 一级能效',
|
||||||
picList: []
|
salePrice: 199,
|
||||||
|
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良', '南海']
|
||||||
}, {
|
}, {
|
||||||
id: 2,
|
id: 2,
|
||||||
avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
|
||||||
name: 'e**1',
|
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
|
||||||
reviewTime: '2022年03月17日',
|
comments: '智能断点 | 遥控预约调温 | 一级能效',
|
||||||
comments: '很好用啊......',
|
salePrice: 199,
|
||||||
picList: [{
|
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
|
||||||
id: 21,
|
}, {
|
||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3004.jpg'
|
id: 3,
|
||||||
}, {
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20002.jpg',
|
||||||
id: 22,
|
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
|
||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
|
comments: '智能断点 | 遥控预约调温 | 一级能效',
|
||||||
}, {
|
salePrice: 199,
|
||||||
id: 23,
|
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
|
||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
|
}, {
|
||||||
}, {
|
id: 4,
|
||||||
id: 24,
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20003.jpg',
|
||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
|
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
|
||||||
}]
|
comments: '智能断点 | 遥控预约调温 | 一级能效',
|
||||||
}],
|
salePrice: 199,
|
||||||
shopInfo: {
|
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
|
||||||
id: 1,
|
}, {
|
||||||
name: '艺鑫到家（售后无忧）',
|
id: 5,
|
||||||
avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17005.jpg'
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20004.jpg',
|
||||||
}
|
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
|
||||||
}
|
comments: '智能断点 | 遥控预约调温 | 一级能效',
|
||||||
|
salePrice: 199,
|
||||||
|
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20005.jpg',
|
||||||
|
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
|
||||||
|
comments: '智能断点 | 遥控预约调温 | 一级能效',
|
||||||
|
salePrice: 199,
|
||||||
|
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
swiperList,
|
swiperList,
|
||||||
categories,
|
categories,
|
||||||
subCategories,
|
subCategories,
|
||||||
moduleBarInfos,
|
moduleBarInfos,
|
||||||
discountGoods,
|
discountGoods,
|
||||||
hotGoods,
|
hotGoods,
|
||||||
|
productDetail,
|
||||||
productDetail
|
pickedProductList,
|
||||||
|
shopInfo
|
||||||
}
|
}
|
||||||
|
|
|
||||||
23
pages.json
23
pages.json
|
|
@ -1,7 +1,6 @@
|
||||||
{
|
{
|
||||||
"pages": [{
|
"pages": [{
|
||||||
"path": "pages/index/index"
|
"path": "pages/index/index"
|
||||||
// "path": "pages/order/order-detail"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/product/product-detail",
|
"path": "pages/product/product-detail",
|
||||||
|
|
@ -15,15 +14,17 @@
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
// ,
|
{
|
||||||
// {
|
"path": "pages/order/order-detail",
|
||||||
// "path": "pages/order/order-detail",
|
"style": {
|
||||||
// "style": {
|
"navigationBarTitleText": "",
|
||||||
// "navigationBarTitleText": "",
|
"enablePullDownRefresh": false
|
||||||
// "enablePullDownRefresh": false
|
}
|
||||||
// }
|
},
|
||||||
// }
|
{
|
||||||
|
"path": "pages/product/shop-detail"
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<view class="cu-bar search bg-white">
|
<view class="cu-bar search bg-white">
|
||||||
<view class="search-form round">
|
<view class="search-form round">
|
||||||
<text class="cuIcon-search"></text>
|
<text class="cuIcon-search"></text>
|
||||||
<input @focus="inputFocus" @blur="inputBlur" @confirm="searchGoods" :adjust-position="false" type="text"
|
<input @confirm="searchGoods" :adjust-position="true" type="text"
|
||||||
placeholder="输入搜索内容" confirm-type="search"></input>
|
placeholder="输入搜索内容" confirm-type="search"></input>
|
||||||
</view>
|
</view>
|
||||||
<view class="action">
|
<view class="action">
|
||||||
|
|
@ -64,11 +64,11 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 超值服务 -->
|
<!-- 超值服务 -->
|
||||||
<classify-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
|
<vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
|
||||||
:title="discountGoods.title"></classify-goods-card>
|
:title="discountGoods.title"></vertical-goods-card>
|
||||||
<!-- 热门服务 -->
|
<!-- 热门服务 -->
|
||||||
<classify-goods-card ref="hotGoodsCard" :goodsInfos="hotGoods.goodsInfos"
|
<vertical-goods-card ref="hotGoodsCard" :goodsInfos="hotGoods.goodsInfos"
|
||||||
:title="hotGoods.title"></classify-goods-card>
|
:title="hotGoods.title"></vertical-goods-card>
|
||||||
</view>
|
</view>
|
||||||
<module-bar ref="moduleBar" :moduleBarInfos="moduleBarInfos"></module-bar>
|
<module-bar ref="moduleBar" :moduleBarInfos="moduleBarInfos"></module-bar>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -76,12 +76,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import moduleBar from '@/components/custom-bar/module-bar.vue';
|
import moduleBar from '@/components/custom-bar/module-bar.vue';
|
||||||
import classifyGoodsCard from '@/components/goods-card/classify-goods-card.vue';
|
import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
moduleBar,
|
moduleBar,
|
||||||
classifyGoodsCard
|
verticalGoodsCard
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -92,7 +92,8 @@
|
||||||
subCategories: [],
|
subCategories: [],
|
||||||
moduleBarInfos: [],
|
moduleBarInfos: [],
|
||||||
hotGoods: {},
|
hotGoods: {},
|
||||||
discountGoods: {}
|
discountGoods: {},
|
||||||
|
InputBottom: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -109,13 +110,7 @@
|
||||||
this.discountGoods = await this.$api.data('discountGoods');
|
this.discountGoods = await this.$api.data('discountGoods');
|
||||||
},
|
},
|
||||||
bindEvent() {
|
bindEvent() {
|
||||||
uni.$on('showProductDetail', this.showDetails);
|
uni.$on('index_showProductDetail', this.showDetails);
|
||||||
},
|
|
||||||
inputFocus(e) {
|
|
||||||
this.InputBottom = e.detail.height
|
|
||||||
},
|
|
||||||
inputBlur(e) {
|
|
||||||
this.InputBottom = 0
|
|
||||||
},
|
},
|
||||||
async tabSelect(e) {
|
async tabSelect(e) {
|
||||||
this.tabCur = e.currentTarget.dataset.id;
|
this.tabCur = e.currentTarget.dataset.id;
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,124 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<!-- 顶部操作条 -->
|
<!-- 顶部操作条 -->
|
||||||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||||||
<block slot="backText">返回</block>
|
<block slot="backText">返回</block>
|
||||||
<block slot="content">订单确认</block>
|
<block slot="content">订单确认</block>
|
||||||
</cu-custom>
|
</cu-custom>
|
||||||
<!-- 服务地址 -->
|
<!-- 服务地址 -->
|
||||||
<view class="padding-lg bg-white">
|
<view class="padding-lg bg-white">
|
||||||
<view class="flex justify-between align-center">
|
<view class="flex justify-between align-center">
|
||||||
<view class="text-lg text-black">
|
<view class="text-lg text-black">
|
||||||
<text class="cuIcon-locationfill text-blue light"></text>
|
<text class="cuIcon-locationfill text-blue light"></text>
|
||||||
选择服务地址
|
选择服务地址
|
||||||
</view>
|
</view>
|
||||||
<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
|
<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 预约时间 -->
|
||||||
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
||||||
|
<view class="flex justify-between align-center">
|
||||||
|
<text class="text-black">预约时间</text>
|
||||||
|
<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
|
||||||
|
</view>
|
||||||
|
<view class="text-sm text-gray margin-top-sm"><text
|
||||||
|
class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
|
||||||
|
</view>
|
||||||
|
<!-- 选购的商品列表 -->
|
||||||
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
||||||
|
<view class="solid-bottom" v-for="(item, index) in pickedProductList">
|
||||||
|
<product-picked :columnTitleArr="columnTitleArr" :product="item.product" :pickedList="item.pickedList">
|
||||||
|
</product-picked>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 支付方式 -->
|
||||||
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
||||||
|
<view class="flex justify-between align-center">
|
||||||
|
<text class="text-black">支付方式</text>
|
||||||
|
<radio-group @change="changePayWay">
|
||||||
|
<label class="radio">
|
||||||
|
<radio class="main-color" value="online" :checked="payWay=='online'" />
|
||||||
|
<text class="margin-left-xs">在线支付</text>
|
||||||
|
</label>
|
||||||
|
<label class="radio margin-left">
|
||||||
|
<radio class="main-color" value="offline" :checked="payWay=='offline'" />
|
||||||
|
<text class="margin-left-xs">上门到付</text>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 预约时间 -->
|
<!-- 发票信息 -->
|
||||||
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
||||||
<view class="flex justify-between align-center">
|
<view class="flex justify-between align-center">
|
||||||
<text class="text-black">预约时间</text>
|
<text class="text-black">发票信息</text>
|
||||||
<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
|
<text class="text-sm text-bold cuIcon-right"></text>
|
||||||
</view>
|
</view>
|
||||||
<view class="text-sm text-gray margin-top-sm"><text class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<!-- 备注留言 -->
|
||||||
</template>
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
||||||
|
<text class="text-black">备注留言</text>
|
||||||
<script>
|
<view class="margin-top uni-textarea">
|
||||||
export default {
|
<textarea class="solid" maxlength="-1" @input="inputComments" placeholder="请填写备注" />
|
||||||
data() {
|
</view>
|
||||||
return {
|
</view>
|
||||||
pickedProductList: []
|
<!-- 平台提醒 -->
|
||||||
}
|
<view class="margin-lr-sm margin-top-sm bg-white padding margin-bottom-with-bar">
|
||||||
},
|
<view class="text-sm text-orange"><text
|
||||||
methods: {
|
class="cuIcon-roundcheck">为保障您的权益，请在平台内交易，师傅服务离开后发生损坏或退款以及售后质保，平台可为您追责！</text></view>
|
||||||
name() {
|
</view>
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
}
|
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
||||||
},
|
<view class="action text-df left-grid">
|
||||||
|
<text class="margin-left-lg">共计</text>
|
||||||
|
<text class="margin-left-xs text-red text-price text-xl">{{formInfo.totalPrice}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="bg-main-color submit">确定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import productPicked from '@/pages/order/product-picked.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
productPicked
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columnTitleArr: ['购买型号', '购买数量'],
|
||||||
|
pickedProductList: [],
|
||||||
|
formInfo: {
|
||||||
|
payWay: 'online',
|
||||||
|
comments: '',
|
||||||
|
totalPrice: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadData() {
|
||||||
|
this.pickedProductList = await this.$api.data('pickedProductList');
|
||||||
|
},
|
||||||
|
changePayWay(e) {
|
||||||
|
this.formInfo.payWay = e.detail.value;
|
||||||
|
},
|
||||||
|
inputComments(e) {
|
||||||
|
this.comments = e.detail.value
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fixed-bottom-bar .text-df {
|
||||||
|
font-size: 28rpx !important;
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
.fixed-bottom-bar .left-grid {
|
||||||
<style>
|
width: 55% !important;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="bg-white">
|
||||||
|
<horizontal-goods-card :ifShowServArea="true" :product="product"></horizontal-goods-card>
|
||||||
|
<view class="flex justify-between margin-lr-sm margin-tb-sm">
|
||||||
|
<view v-for="(title, index) in columnTitleArr">{{title}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="margin-bottom-lg certern-height-with-scroll">
|
||||||
|
<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in pickedList"
|
||||||
|
:key="item.id">
|
||||||
|
<view class='cu-tag padding line-main-color'>{{item.name}}</view>
|
||||||
|
<view v-if="columnTitleArr.length === 2">{{item.pickedNum}}</view>
|
||||||
|
<view v-else-if="columnTitleArr.length === 3" class="flex justify-end">
|
||||||
|
<view>{{item.pickedNum}}</view>
|
||||||
|
<view>{{item.toServNum}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "product-picked",
|
||||||
|
props: {
|
||||||
|
product: {
|
||||||
|
type: Object,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
pickedList: {
|
||||||
|
type: Array,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
columnTitleArr: {
|
||||||
|
type: Array,
|
||||||
|
default: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
horizontalGoodsCard
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.certern-height-with-scroll {
|
||||||
|
max-height: 300rpx;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -104,15 +104,15 @@
|
||||||
<comments-card :reviewers="reviewers"></comments-card>
|
<comments-card :reviewers="reviewers"></comments-card>
|
||||||
</view>
|
</view>
|
||||||
<!-- 店家链接 -->
|
<!-- 店家链接 -->
|
||||||
<!-- <view class="margin-lr-sm margin-top-sm padding bg-white">
|
<view class="margin-lr-sm margin-top-sm padding bg-white">
|
||||||
<view class="flex justify-between align-center">
|
<view class="flex justify-between align-center">
|
||||||
<view class="flex justify-start align-center">
|
<view class="flex justify-start align-center">
|
||||||
<view class="cu-avatar" :style="'background-image:url(' + shopInfo.avatarUrl + ');'"></view>
|
<view class="cu-avatar" :style="'background-image:url(' + shopInfo.avatarUrl + ');'"></view>
|
||||||
<view class="margin-lr-sm text-lg text-black">{{shopInfo.name}}</view>
|
<view class="margin-lr-sm text-lg text-black">{{shopInfo.name}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="text-sm">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view>
|
<view class="text-sm" @click="showShopDetail(shopInfo)">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view>
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view>
|
||||||
<!-- 服务详情 -->
|
<!-- 服务详情 -->
|
||||||
<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
|
<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
|
||||||
<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
|
<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
|
||||||
|
|
@ -122,7 +122,7 @@
|
||||||
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
||||||
<button class="action" open-type="contact">
|
<button class="action" open-type="contact">
|
||||||
<view class="cuIcon-service text-green">
|
<view class="cuIcon-service text-green">
|
||||||
<view class="cu-tag badge"></view>
|
<view class="cu-tag badge" v-if="ifHasCsMsg"></view>
|
||||||
</view>
|
</view>
|
||||||
客服
|
客服
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -131,18 +131,18 @@
|
||||||
</view> -->
|
</view> -->
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<view class="cuIcon-cart">
|
<view class="cuIcon-cart">
|
||||||
<view class="cu-tag badge">99</view>
|
<view class="cu-tag badge" v-if="totalPickCount > 0">{{totalPickCount}}</view>
|
||||||
</view>
|
</view>
|
||||||
购物车
|
购物车
|
||||||
</view>
|
</view>
|
||||||
<view class="bg-main-color light submit" @click="toggleProductPickModal">加入购物车</view>
|
<view class="bg-main-color light submit" @click="toggleProductPickModal">加入购物车</view>
|
||||||
<view class="bg-main-color submit">立即订购</view>
|
<view class="bg-main-color submit" @click="toggleProductPickModal($event, true)">立即订购</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 底部弹窗 -->
|
<!-- 底部弹窗 -->
|
||||||
<uni-popup ref="productPickPopup" type="bottom">
|
<uni-popup ref="productPickPopup" type="bottom" @change="changePopupState">
|
||||||
<view class="text-bold text-gray text-lg text-center left-top-sm-bar" @click="toggleProductPickModal"><text
|
<view class="text-bold text-gray text-lg text-center left-top-sm-bar" @click="toggleProductPickModal"><text
|
||||||
class="cuIcon-close"></text></view>
|
class="cuIcon-close"></text></view>
|
||||||
<product-pick :specsList="specsList"></product-pick>
|
<product-pick :specsList="specsList" :orderNow="orderNow"></product-pick>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -170,11 +170,15 @@
|
||||||
showTopNav: false,
|
showTopNav: false,
|
||||||
curTopNav: 0,
|
curTopNav: 0,
|
||||||
shopInfo: {},
|
shopInfo: {},
|
||||||
ifShowPageMeta: false
|
ifShowPageMeta: false,
|
||||||
|
orderNow: false,
|
||||||
|
totalPickCount: 0,
|
||||||
|
ifHasCsMsg: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.loadData();
|
this.loadData();
|
||||||
|
this.bindEvent();
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
this.productVideoContext = uni.createVideoContext('productVideo');
|
this.productVideoContext = uni.createVideoContext('productVideo');
|
||||||
|
|
@ -193,6 +197,9 @@
|
||||||
this.reviewers = productDetail.reviewers;
|
this.reviewers = productDetail.reviewers;
|
||||||
this.productDetailImgUrl = productDetail.productDetailImgUrl;
|
this.productDetailImgUrl = productDetail.productDetailImgUrl;
|
||||||
this.shopInfo = productDetail.shopInfo;
|
this.shopInfo = productDetail.shopInfo;
|
||||||
|
},
|
||||||
|
bindEvent() {
|
||||||
|
uni.$on('product-detail_add2Cart', this.add2Cart);
|
||||||
},
|
},
|
||||||
chooseSpecs(item) {
|
chooseSpecs(item) {
|
||||||
this.curProductSpecs = item;
|
this.curProductSpecs = item;
|
||||||
|
|
@ -226,13 +233,25 @@
|
||||||
selector: '#pageAnchor' + index
|
selector: '#pageAnchor' + index
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
toggleProductPickModal() {
|
toggleProductPickModal(e, orderNow) {
|
||||||
|
this.orderNow = orderNow ? true : false;
|
||||||
if (this.ifShowPageMeta) {
|
if (this.ifShowPageMeta) {
|
||||||
this.$refs.productPickPopup.close();
|
this.$refs.productPickPopup.close();
|
||||||
} else {
|
} else {
|
||||||
this.$refs.productPickPopup.open();
|
this.$refs.productPickPopup.open();
|
||||||
}
|
}
|
||||||
this.ifShowPageMeta = !this.ifShowPageMeta;
|
},
|
||||||
|
changePopupState(e) {
|
||||||
|
this.ifShowPageMeta = e.show;
|
||||||
|
},
|
||||||
|
add2Cart(totalPickCount) {
|
||||||
|
this.totalPickCount = totalPickCount;
|
||||||
|
this.toggleProductPickModal();
|
||||||
|
},
|
||||||
|
showShopDetail(shopInfo) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '../product/shop-detail?shopInfo='+ encodeURIComponent(JSON.stringify(shopInfo))
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="padding-tb-lg padding-lr bg-white">
|
<view class="padding-lr bg-white main-container">
|
||||||
<view class="cu-list menu-avatar margin-bottom-sm">
|
<view class="cu-list menu-avatar margin-bottom-sm">
|
||||||
<view class="cu-item padding-bottom-sm">
|
<view class="cu-item padding-bottom-sm">
|
||||||
<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
|
<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<view>购买型号</view>
|
<view>购买型号</view>
|
||||||
<view>购买数量</view>
|
<view>购买数量</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="margin-bottom-lg certern-height-with-scroll">
|
<view class="certern-height-with-scroll">
|
||||||
<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
|
<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
|
||||||
:key="item.id">
|
:key="item.id">
|
||||||
<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
|
<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
<text class="margin-lr-xs">共计</text>
|
<text class="margin-lr-xs">共计</text>
|
||||||
<text class="text-red text-price">{{totalPrice}}</text>
|
<text class="text-red text-price">{{totalPrice}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="bg-main-color submit">确定</view>
|
<view class="bg-main-color submit" @click="submit">确定</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -50,6 +50,10 @@
|
||||||
specsList: {
|
specsList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: []
|
default: []
|
||||||
|
},
|
||||||
|
orderNow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -83,6 +87,17 @@
|
||||||
},
|
},
|
||||||
chooseSpecs(item) {
|
chooseSpecs(item) {
|
||||||
this.curSpec = item;
|
this.curSpec = item;
|
||||||
|
},
|
||||||
|
submit() {
|
||||||
|
if (this.orderNow) {
|
||||||
|
// 从立即订购按钮进来的直接跳转到订单详情确认页
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '../order/order-detail'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 从加入购物车按钮进来的触发父页面事件
|
||||||
|
uni.$emit('product-detail_add2Cart', this.totalPickCount)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
@ -103,7 +118,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.certern-height-with-scroll {
|
.certern-height-with-scroll {
|
||||||
height: 600rpx;
|
height: 600rpx;
|
||||||
|
margin-bottom: calc(100rpx - env(safe-area-inset-bottom)/2);
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
padding-top: 45rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 顶部操作条 -->
|
||||||
|
<cu-custom :bgColor="'bg-white'" :isBack="true">
|
||||||
|
<block slot="backText">返回</block>
|
||||||
|
<block slot="content">店铺主页</block>
|
||||||
|
</cu-custom>
|
||||||
|
<!-- 店铺介绍 -->
|
||||||
|
<view class="bg-white padding">
|
||||||
|
<horizontal-name-card :vCard="shopInfo"></horizontal-name-card>
|
||||||
|
</view>
|
||||||
|
<!-- 店铺评分 -->
|
||||||
|
<view class="bg-white padding text-sm padding-top-xs solid-bottom">
|
||||||
|
<view class="flex justify-between">
|
||||||
|
<text>总评分：<text class="text-red text-xl">{{shopInfo.totalScore}}</text> / 5.0分</text>
|
||||||
|
<uni-rate :readonly="true" allow-half :value="shopInfo.totalScore" />
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>准时</text><text class="margin-lr-xs">{{shopInfo.timeScore}}</text>
|
||||||
|
<text>态度</text><text class="margin-lr-xs">{{shopInfo.attitudeScore}}</text>
|
||||||
|
<text>技能</text><text class="margin-lr-xs">{{shopInfo.skillScore}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 店铺服务说明 -->
|
||||||
|
<view class="padding bg-white text-sm">
|
||||||
|
<view>服务类目：<text>{{shopInfo.servType}}</text></view>
|
||||||
|
<view>
|
||||||
|
附加服务：
|
||||||
|
<radio-group @change="changeAdditionalServId">
|
||||||
|
<label class="radio margin-right-sm" v-for="(item, index) in shopInfo.additionalServ">
|
||||||
|
<radio style="transform:scale(0.7)" class="main-color" :value="item.id"
|
||||||
|
:checked="additionalServId===item.id" />
|
||||||
|
<text class="margin-left-xs">{{item.name}}</text>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</view>
|
||||||
|
<view>服务地区：<text>{{shopInfo.servArea}}</text></view>
|
||||||
|
</view>
|
||||||
|
<!-- 本店铺服务列表 -->
|
||||||
|
<view class="bg-white">
|
||||||
|
<view class="margin-top-sm sticky-bar" :style="[{top: stickyTop + 'px'}]">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<view class="cu-bar bg-white search solid-bottom margin-bottom-sm">
|
||||||
|
<view class="action">
|
||||||
|
<text class="cuIcon-location"></text>
|
||||||
|
<text>广州</text>
|
||||||
|
</view>
|
||||||
|
<view class="search-form round">
|
||||||
|
<text class="cuIcon-search"></text>
|
||||||
|
<input @confirm="searchGoods" :adjust-position="true"
|
||||||
|
type="text" placeholder="搜索本店铺" confirm-type="search"></input>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<text>筛选</text>
|
||||||
|
<text class="cuIcon-filter"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 服务列表 -->
|
||||||
|
<view class="padding-lr padding-bottom">
|
||||||
|
<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
|
||||||
|
v-for="(item, index) in shopInfo.productList">
|
||||||
|
<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
|
||||||
|
import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
horizontalNameCard,
|
||||||
|
horizontalGoodsCard
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
shopInfo: {},
|
||||||
|
stickyTop: this.CustomBar
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(option) {
|
||||||
|
const shopInfo = JSON.parse(decodeURIComponent(option.shopInfo));
|
||||||
|
console.log("接收参数shopInfo:" + JSON.stringify(shopInfo));
|
||||||
|
this.loadData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadData() {
|
||||||
|
this.shopInfo = await this.$api.data('shopInfo');
|
||||||
|
},
|
||||||
|
searchGoods(item) {
|
||||||
|
console.log("搜索条件信息: " + item)
|
||||||
|
console.log("商品搜索中...");
|
||||||
|
},
|
||||||
|
showDetails(productItem) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '../product/product-detail'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -20,4 +20,15 @@
|
||||||
.bg-gradual-color {
|
.bg-gradual-color {
|
||||||
background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
|
background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch.main-color[checked] .wx-switch-input,
|
||||||
|
checkbox.main-color[checked] .wx-checkbox-input,
|
||||||
|
radio.main-color[checked] .wx-radio-input,
|
||||||
|
switch.main-color.checked .uni-switch-input,
|
||||||
|
checkbox.main-color.checked .uni-checkbox-input,
|
||||||
|
radio.main-color.checked .uni-radio-input {
|
||||||
|
background-color: #0081ff !important;
|
||||||
|
border-color: #0081ff !important;
|
||||||
|
color: #ffffff !important;
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.margin-bottom-with-bar {
|
.margin-bottom-with-bar {
|
||||||
margin-bottom: 130rpx;
|
margin-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-bottom-bar {
|
.fixed-bottom-bar {
|
||||||
|
|
@ -14,4 +14,10 @@
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
z-index: 98;
|
z-index: 98;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticky-bar {
|
||||||
|
z-index: 10;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue