Feat: 订单流程
This commit is contained in:
LinCyJang
+303
-125
@@ -11,98 +11,30 @@
|
||||
/>
|
||||
<view>
|
||||
<view class="cover-box">
|
||||
<image
|
||||
v-if="store.coverType === 1"
|
||||
:src="store.cover"
|
||||
class="full-img"
|
||||
mode="widthFix"
|
||||
<u-swiper
|
||||
:list="store.banner"
|
||||
:autoplay="true"
|
||||
:circular="true"
|
||||
height="500rpx"
|
||||
indicator
|
||||
indicatorInactiveColor="rgba(255,255,255,0.5)"
|
||||
/>
|
||||
<view
|
||||
v-if="store.coverType === 2"
|
||||
:style="{
|
||||
'width': videoStyle.width,
|
||||
'height': videoStyle.height
|
||||
}"
|
||||
class="video-box"
|
||||
>
|
||||
<video
|
||||
:src="store.cover"
|
||||
:autoplay="true"
|
||||
:controls="true"
|
||||
:loop="false"
|
||||
object-fit="contain"
|
||||
play-btn-position="center"
|
||||
id="coverVideo"
|
||||
class="video"
|
||||
@play="coverPlay"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="innInfoWrap">
|
||||
<view class="bg-color">
|
||||
<view class="box-mask flex jc-between ai-end">
|
||||
<view class="inn-name flex-0 more-t">{{ store.name }}</view>
|
||||
<view
|
||||
v-if="store.cityName != undefined && store.cityName.length > 0"
|
||||
class="city-section flex jc-end ai-center"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/20210807215539157727.png'"
|
||||
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
|
||||
/>
|
||||
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ store.cityName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-cont flex ai-end">
|
||||
<view class="inn-logo flex-0">
|
||||
<image :src="store.logo" v-if="store.logo"></image>
|
||||
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
|
||||
</view>
|
||||
<view class="a3 flex jc-between ai-end" style="width: 100%">
|
||||
<view class="">
|
||||
<view class="inn-owner" style="flex-grow: 1;">{{ store.ownerName }}/店主</view>
|
||||
<view class="guarantee flex jc-center ai-center v12-font-24">
|
||||
{{ store.serviceTime }} - {{ store.serviceEndTime }} / 营业时间
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex ai-center zan-favorite-wrap">
|
||||
<view class="zan-box flex flex-0 ai-end" @click="zanStore">
|
||||
<template v-if="store.hasZan">
|
||||
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
|
||||
<text class="on">{{ store.zan }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="webUrl + '/icon/like.png'" class="img" />
|
||||
<text>{{ store.zan }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<!-- <view class="flex flex-0 ai-end favorite-box">
|
||||
<image
|
||||
v-if="store.hasFavorite"
|
||||
:src="webUrl + '/icon/icon-star-on.png'"
|
||||
mode="scaleToFill"
|
||||
class="icon"
|
||||
@click="doneFavorite(store.hasFavorite)"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:src="webUrl + '/icon/icon-star-off.png'"
|
||||
mode="scaleToFill"
|
||||
class="icon"
|
||||
@click="doneFavorite(store.hasFavorite)"
|
||||
/>
|
||||
<text>{{ store.favoriteCount }}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-pa-3 v12-justify-between v12-align-center">
|
||||
<view class="sojum-title">{{ store.name }}</view>
|
||||
<view class="v12-align-center v12-radius-100 v12-primary v12-primary-border" style="height:38rpx">
|
||||
<view class="v12-align-center v12-font-22 v12-white-text v12-px-2" style="height: 100%;">营业时间</view>
|
||||
<view class="v12-align-center v12-primary-border v12-font-22 v12-ml-1 v12-px-2 v12-radius-100 v12-white" style="height: 100%;">{{ store.serviceTime }} - {{ store.serviceEndTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="v12-pa-3">
|
||||
<view v-for="value in source" class="v12-px-2 v12-dark-border v12-radius-100" style="width: fit-content;">11</view>
|
||||
</view> -->
|
||||
<view class="inn-signature-wrap">
|
||||
<view class="triangle"></view>
|
||||
<view class="inn-signature">
|
||||
{{ store.shopIntro }}
|
||||
</view>
|
||||
<!-- <view class="inn-signature">
|
||||
{{ store.intro }}
|
||||
</view> -->
|
||||
<view class="share-btn" @click="changeShare">
|
||||
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
|
||||
</view>
|
||||
@@ -168,8 +100,7 @@
|
||||
'background-image': item.isTop ? ('url(' + webUrl + '/page/hotel/info-top-bg.png)') : 'none'
|
||||
}"
|
||||
class="info-item-header"
|
||||
@click="infoClick(item)"
|
||||
>
|
||||
@click="infoClick(item)">
|
||||
<view class="name">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
@@ -264,11 +195,11 @@
|
||||
class="pics-section"
|
||||
>
|
||||
<view
|
||||
v-if="store.cultureImages && store.cultureImages.length > 0"
|
||||
v-if="store.culture"
|
||||
class="pics-list acea-row"
|
||||
>
|
||||
<view
|
||||
v-for="(url, index) in store.cultureImages || []"
|
||||
v-for="(url, index) in store.culture"
|
||||
:key="index"
|
||||
:style="{ width: picColumnWidth }"
|
||||
class="pics-item"
|
||||
@@ -292,44 +223,99 @@
|
||||
v-if="activeIndex === 2"
|
||||
class="qualifications-section"
|
||||
>
|
||||
<view v-if="store.qualifications && store.qualifications.length > 0">
|
||||
<image
|
||||
v-for="(item, index) in store.qualifications || []"
|
||||
:key="index"
|
||||
:src="item"
|
||||
class="store-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view v-if="store.qualification !== []">
|
||||
<image
|
||||
v-for="(item, index) in store.qualification || []"
|
||||
:key="index"
|
||||
:src="item"
|
||||
class="store-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-else class="tab-no-data">
|
||||
店主还没有上传内容哦~
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分享 -->
|
||||
<u-popup
|
||||
:show="showShare"
|
||||
mode="center"
|
||||
bgColor="transparent"
|
||||
>
|
||||
<view class="box-share">
|
||||
<view class="box-img">
|
||||
<image
|
||||
:src="webUrl + '/20230608112219219303.png'"
|
||||
class="icon"
|
||||
@click="closeShare"
|
||||
/>
|
||||
<image :src="posterUrl" class="main-img" mode="widthFix" />
|
||||
<view v-if="activeIndex === 3" class="v12-pa-3 product-grid" style="background: #F5F5F5;">
|
||||
<view
|
||||
v-for="(item, index) in jiaLouProductArr"
|
||||
:key="index"
|
||||
class="product-item"
|
||||
@click="goGroupBuyDetail(item)"
|
||||
>
|
||||
<image
|
||||
:src="item.mainImage"
|
||||
class="product-img"
|
||||
/>
|
||||
<view class="v12-pa-2 v12-font-30 v12-font-bold more-t">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="product-info v12-px-2 v12-justify-between">
|
||||
<view class="v12-primary-text">
|
||||
<text class="v12-font-22 v12-font-bold">
|
||||
￥
|
||||
</text>
|
||||
<text class="v12-font-30 v12-font-bold">
|
||||
{{ item.price }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="view-btn">
|
||||
查看
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/20230608112210135038.png'"
|
||||
mode="widthFix"
|
||||
class="btn"
|
||||
@click="saveImg"
|
||||
/>
|
||||
<!-- 管家 -->
|
||||
<view v-if="activeIndex === 4" class="v12-pa-3" style="background: #F5F5F5;">
|
||||
<view v-for="(item, index) in jiaLouStewardArr" :key="index" class="steward-item">
|
||||
<view class="st-card">
|
||||
<view class="st-left">
|
||||
<view class="portrait-card">
|
||||
<image :src="item.avatar" class="avatar" mode="aspectFill" />
|
||||
<view class="role-badge">旅居管家</view>
|
||||
<view class="name-badge">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="st-right">
|
||||
<view class="star">
|
||||
<image src="/static/images/start.png" class="star-icon" />
|
||||
</view>
|
||||
<view class="desc more-t">
|
||||
{{ item.desc }}
|
||||
</view>
|
||||
<view class="tag-list">
|
||||
<view v-for="(tag, i) in item.tags" :key="i" class="tag">{{ tag }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 分享 -->
|
||||
<u-popup
|
||||
:show="showShare"
|
||||
mode="center"
|
||||
bgColor="transparent"
|
||||
>
|
||||
<view class="box-share">
|
||||
<view class="box-img">
|
||||
<image
|
||||
:src="webUrl + '/20230608112219219303.png'"
|
||||
class="icon"
|
||||
@click="closeShare"
|
||||
/>
|
||||
<image :src="posterUrl" class="main-img" mode="widthFix" />
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/20230608112210135038.png'"
|
||||
mode="widthFix"
|
||||
class="btn"
|
||||
@click="saveImg"
|
||||
/>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -340,7 +326,9 @@ import {
|
||||
postJiaLouNewsView,
|
||||
postJiaLouNewsZan,
|
||||
postJiaLouZan,
|
||||
postJiaLouShare
|
||||
postJiaLouShare,
|
||||
getJiaLouProductList,
|
||||
getJiaLouStewardList
|
||||
} from '@/api/qianxian'
|
||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||
export default {
|
||||
@@ -364,14 +352,32 @@ export default {
|
||||
{ text: '文化', value: 1, isShow: true },
|
||||
{ text: '资质', value: 2, isShow: true }
|
||||
],
|
||||
activeIndex: 0,
|
||||
activeIndex: 4,
|
||||
isLoadInfoListSuccess: false,
|
||||
picColumnWidth: '345rpx',
|
||||
infoArray: [],
|
||||
videoPlayers: [],
|
||||
coverImages: [],
|
||||
activeVideo: 'coverVideo',
|
||||
showShare: false,
|
||||
posterUrl: ''
|
||||
posterUrl: '',
|
||||
// 团购产品列表
|
||||
jiaLouProductArr: [],
|
||||
// 管家列表
|
||||
jiaLouStewardArr: [
|
||||
{
|
||||
name: '甄美丽',
|
||||
avatar: '/static/images/horn.png',
|
||||
desc: '我是旅居管家美丽，有5年从业经验，熟稔各地风土人情。可依需求调节行程节奏，让每段旅居都充满独特记忆，成为难忘故事。',
|
||||
tags: ['真人美食活地图','体验设计师','本地活字典']
|
||||
},
|
||||
{
|
||||
name: '李阿乐',
|
||||
avatar: '/static/images/horn.png',
|
||||
desc: '资深旅居向导，擅长深度文化体验与特色美食推荐，贴心服务。',
|
||||
tags: ['美食推荐','文化向导','行程规划']
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
@@ -381,7 +387,55 @@ export default {
|
||||
this.id = opts.id
|
||||
this.getFarmerData()
|
||||
},
|
||||
watch: {
|
||||
activeIndex: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal === 3) {
|
||||
this.getJiaLouProductList()
|
||||
}
|
||||
if (newVal === 4) {
|
||||
this.getJiaLouStewardList()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getJiaLouStewardList() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
const params = {
|
||||
merId: this.store.id,
|
||||
page: 1,
|
||||
limit: 99999
|
||||
}
|
||||
getJiaLouStewardList(params).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.jiaLouStewardArr = res.data.records || []
|
||||
}
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
getJiaLouProductList() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
const params = {
|
||||
merId: this.store.id,
|
||||
page: 1,
|
||||
limit: 99999
|
||||
}
|
||||
getJiaLouProductList(params).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.jiaLouProductArr = res.data.records || []
|
||||
}
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
saveImg() {
|
||||
const _this = this
|
||||
uni.getSetting({
|
||||
@@ -469,6 +523,12 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
goGroupBuyDetail(item) {
|
||||
console.log(item);
|
||||
const id = item.id
|
||||
|
||||
uni.navigateTo({ url: '/pkg_product/views/groupBuyDetails?id=' + id })
|
||||
},
|
||||
getNews() {
|
||||
const params = {
|
||||
page: 1,
|
||||
@@ -585,6 +645,7 @@ export default {
|
||||
getJiaLouDetail(this.id).then(res => {
|
||||
this.store = res.data || {}
|
||||
this.getNews()
|
||||
this.getJiaLouProductList()
|
||||
})
|
||||
},
|
||||
zanStore() {
|
||||
@@ -610,7 +671,7 @@ export default {
|
||||
showPic (index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.store.cultureImages
|
||||
urls: this.store.culture
|
||||
})
|
||||
},
|
||||
}
|
||||
@@ -619,6 +680,14 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/assets/css/store.less";
|
||||
.time-box{
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
.sojum-title{
|
||||
font-weight: bold;
|
||||
font-size: 44rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.btn {
|
||||
.img {
|
||||
display: block;
|
||||
@@ -1102,4 +1171,113 @@ export default {
|
||||
color: #8B8F99;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.product-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.product-item{
|
||||
width: 340rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
padding-bottom: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
.product-img{
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
.view-btn{
|
||||
background: #F9E49D;
|
||||
border-radius: 100rpx;
|
||||
padding: 0rpx 16rpx;
|
||||
color: #333;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* steward-item styles */
|
||||
.steward-item {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.st-card {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
.st-left {
|
||||
width: 260rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
.portrait-card {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
border-radius: 36rpx;
|
||||
background: linear-gradient(180deg, #f7f7f7 0%, #ededed 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.avatar {
|
||||
width: 180rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.role-badge,
|
||||
.name-badge {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.role-badge {
|
||||
bottom: 80rpx;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
}
|
||||
.name-badge {
|
||||
bottom: 24rpx;
|
||||
background: #fff1d2;
|
||||
color: #333;
|
||||
}
|
||||
.st-right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.star {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
top: -12rpx;
|
||||
}
|
||||
.star-icon {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
}
|
||||
.desc {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.tag-list {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag {
|
||||
padding: 6rpx 16rpx;
|
||||
border: 2rpx solid #E95959;
|
||||
color: #E95959;
|
||||
border-radius: 100rpx;
|
||||
font-size: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user