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

店铺主页

This commit is contained in:
yangdanqi 2022-04-01 16:54:10 +08:00
parent a73fbb298e
commit eec23581e1
13 changed files with 968 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
components/common-card/horizontal-name-card.vue Normal file
View File

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

70
components/goods-card/horizontal-goods-card.vue Normal file
View File

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

4
components/goods-card/classify-goods-card.vue → components/goods-card/vertical-goods-card.vue
View File

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

127
data.js
View File

@ -368,6 +368,128 @@ const productDetail = {
} }
} }
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 shopInfo = {
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17005.jpg',
name: '艺鑫到家（售后无忧）',
comments: {
icon: 'form',
desc: '企业认证'
},
extraInfos: [{
icon: 'locationfill',
desc: '广东省广州市番禺区钟村街道188号'
}],
totalScore: 4.5,
timeScore: 4.4,
attitudeScore: 4.4,
skillScore:4.6,
servType: '空调',
additionalServ: [{
id: 1,
name: '58速运'
}, {
id: 2,
name: '货拉拉'
}, {
id: 3,
name: '搬货服务'
}],
servArea: ['天河区', '黄埔区', '荔湾区'],
productList: [{
id: 1,
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
comments: '智能断点 | 遥控预约调温 | 一级能效',
salePrice: 199,
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良', '南海']
}, {
id: 2,
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
comments: '智能断点 | 遥控预约调温 | 一级能效',
salePrice: 199,
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
}, {
id: 3,
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20002.jpg',
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
comments: '智能断点 | 遥控预约调温 | 一级能效',
salePrice: 199,
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
}, {
id: 4,
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20003.jpg',
name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
comments: '智能断点 | 遥控预约调温 | 一级能效',
salePrice: 199,
servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
}, {
id: 5,
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,
@ -375,6 +497,7 @@ export default {
moduleBarInfos, moduleBarInfos,
discountGoods, discountGoods,
hotGoods, hotGoods,
productDetail,
productDetail pickedProductList,
shopInfo
} }

19
pages.json
View File

@ -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",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/product/shop-detail"
} }
// ,
// {
// "path": "pages/order/order-detail",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// }
], ],
"globalStyle": { "globalStyle": {
"navigationStyle": "custom", "navigationStyle": "custom",

25
pages/index/index.vue
View File

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

91
pages/order/order-detail.vue
View File

@ -21,25 +21,104 @@
<text class="text-black">预约时间</text> <text class="text-black">预约时间</text>
<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view> <view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
</view> </view>
<view class="text-sm text-gray margin-top-sm"><text class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></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 class="margin-lr-sm margin-top-sm bg-white padding">
<view class="flex justify-between align-center">
<text class="text-black">发票信息</text>
<text class="text-sm text-bold cuIcon-right"></text>
</view>
</view>
<!-- 备注留言 -->
<view class="margin-lr-sm margin-top-sm bg-white padding">
<text class="text-black">备注留言</text>
<view class="margin-top uni-textarea">
<textarea class="solid" maxlength="-1" @input="inputComments" placeholder="请填写备注" />
</view>
</view>
<!-- 平台提醒 -->
<view class="margin-lr-sm margin-top-sm bg-white padding margin-bottom-with-bar">
<view class="text-sm text-orange"><text
class="cuIcon-roundcheck">为保障您的权益，请在平台内交易，师傅服务离开后发生损坏或退款以及售后质保，平台可为您追责！</text></view>
</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>
</view> </view>
</template> </template>
<script> <script>
import productPicked from '@/pages/order/product-picked.vue';
export default { export default {
components: {
productPicked
},
data() { data() {
return { return {
pickedProductList: [] columnTitleArr: ['购买型号', '购买数量'],
pickedProductList: [],
formInfo: {
payWay: 'online',
comments: '',
totalPrice: 0
}
} }
}, },
onLoad() {
this.loadData();
},
methods: { methods: {
name() { 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> </script>
<style> <style scoped>
.fixed-bottom-bar .text-df {
font-size: 28rpx !important;
}
.fixed-bottom-bar .left-grid {
width: 55% !important;
text-align: left;
}
</style> </style>

53
pages/order/product-picked.vue Normal file
View File

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

41
pages/product/product-detail.vue
View File

@ -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');
@ -194,6 +198,9 @@
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))
});
} }
} }
} }

26
pages/product/product-pick.vue
View File

@ -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)
}
} }
}, },
} }
@ -104,6 +119,11 @@
.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>

109
pages/product/shop-detail.vue Normal file
View File

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

11
style/blue/blue-topic.css
View File

@ -21,3 +21,14 @@
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;
}

8
style/default.css
View File

@ -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 {
@ -15,3 +15,9 @@
z-index: 98; z-index: 98;
width: 100%; width: 100%;
} }
.sticky-bar {
z-index: 10;
position: sticky;
top: 0;
}