Feat: 订单流程
This commit is contained in:
LinCyJang
@@ -196,3 +196,12 @@ export function editAddress(params) {
|
||||
export function orderExpectedArrivalTime(params) {
|
||||
return request.post('/order/express/estimatedTime', params)
|
||||
}
|
||||
|
||||
/**
|
||||
* 旅居团购订单详情
|
||||
* @param {*} params
|
||||
* @returns
|
||||
*/
|
||||
export function groupOrderDetail(params) {
|
||||
return request.post('/travel/travelGroupOrder/detail/' + params.key, params)
|
||||
}
|
||||
|
||||
+76
-4
@@ -110,9 +110,9 @@ export function getSaleList(params) {
|
||||
// }
|
||||
|
||||
// 旅居详情
|
||||
export function getJiaLouDetail(id) {
|
||||
return request.get('/countyFamous/sojourn/' + id, {}, {login: true})
|
||||
}
|
||||
// export function getJiaLouDetail(id) {
|
||||
// return request.get('/countyFamous/sojourn/' + id, {}, {login: true})
|
||||
// }
|
||||
|
||||
// 旅居资讯数据
|
||||
export function getJiaLouNews(params) {
|
||||
@@ -165,4 +165,76 @@ export function postJiaLouShare(id) {
|
||||
*/
|
||||
export function getJiaLouList(params) {
|
||||
return request.get('/travel/merchantList', params, {login: true})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取旅居详情
|
||||
* @param {*} id
|
||||
*/
|
||||
export function getJiaLouDetail(id) {
|
||||
return request.get('/travel/merchant/' + id, {}, {login: true})
|
||||
}
|
||||
|
||||
/**
|
||||
* 旅居团购产品列表
|
||||
merId int 商户ID
|
||||
page int 页码
|
||||
limit int 每页数量
|
||||
*/
|
||||
export function getJiaLouProductList(params) {
|
||||
return request.get('/travel/products', params, {login: true})
|
||||
}
|
||||
|
||||
/**
|
||||
* 旅居团购产品详情
|
||||
* @param {*} id 产品ID
|
||||
*/
|
||||
export function getJiaLouProductDetail(id) {
|
||||
return request.get('/travel/product/' + id, {}, {login: true})
|
||||
}
|
||||
|
||||
/**
|
||||
* 管家列表
|
||||
* merId int 商户ID
|
||||
page int 页码
|
||||
limit int 每页数量
|
||||
*/
|
||||
export function getJiaLouStewardList(params) {
|
||||
return request.get('/travel/steward', params, {login: true})
|
||||
}
|
||||
|
||||
/**
|
||||
* 指定月份可预约日期
|
||||
* @param {*} params
|
||||
* travelGroupProductId int 旅居团购产品ID
|
||||
month string 月份（yyyy-MM）
|
||||
*/
|
||||
export function getJiaLouCalendar(params) {
|
||||
return request.get('/travel/product/calendar', params, {login: true})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取预定必读
|
||||
*/
|
||||
export function getJiaLouBookingRules() {
|
||||
return request.get('/travel/orderRule', {}, {login: true})
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建订单
|
||||
* @param {*} params
|
||||
* travelGroupProductId int 旅居团购产品ID
|
||||
orderStartDate string 订单开始日期（yyyy-MM-dd）
|
||||
orderEndDate string 订单结束日期（yyyy-MM-dd）
|
||||
*/
|
||||
export function createJiaLouOrder(params) {
|
||||
return request.post('/travel/travelGroupOrder/confirm', params, {login: true})
|
||||
}
|
||||
|
||||
/**
|
||||
* 旅居团购订单创建
|
||||
* @param {*} params
|
||||
*/
|
||||
export function createJiaLouOrderPay(params) {
|
||||
return request.post('/travel/travelGroupOrder/create/' + params.key, params, {login: true})
|
||||
}
|
||||
|
||||
+15
@@ -726,6 +726,14 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/groupBuyDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "团购详情",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/famousQianxianInvestment",
|
||||
"style": {
|
||||
@@ -781,6 +789,13 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "时令尝鲜"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/submitOrder",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交订单",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -7,13 +7,20 @@
|
||||
</view> -->
|
||||
<view :class="refundOrder ? 'on' : ''">
|
||||
<view
|
||||
v-if="orderInfo.isTickets === 1 && orderInfo._status._type === 2"
|
||||
v-if="isGroup && orderInfo._status._type === 2"
|
||||
class="state v12-primary-text v12-font-32 v12-font-bold"
|
||||
>待使用</view>
|
||||
<view
|
||||
v-else-if="orderInfo.isTickets === 1 && orderInfo._status._type === 2"
|
||||
class="state v12-primary-text v12-font-32 v12-font-bold"
|
||||
>待核销</view>
|
||||
<view
|
||||
v-else
|
||||
class="state v12-primary-text v12-font-32 v12-font-bold"
|
||||
>{{ getStatus(orderInfo) }}</view>
|
||||
<view v-if="isGroup && orderInfo._status._type === 2" class="v12-mt-2 v12-font-24 v12-secondary-dark-text">
|
||||
您已下单成功，请联系商家确认具体的入住时间
|
||||
</view>
|
||||
<view
|
||||
v-if="getStatus(orderInfo)!=='待付款'"
|
||||
:class="{'fails-bg': orderInfo._status._type === -3}"
|
||||
@@ -87,7 +94,12 @@
|
||||
v-if="orderInfo.isTickets === 1 && orderInfo._status._type === 2"
|
||||
class="code-box flex jc-center ai-center"
|
||||
>
|
||||
<view v-if="isGroup && orderInfo.verifyCode" class="v12-primary-text v12-font-28 v12-mb-2">核销码：{{ orderInfo.verifyCode }}</view>
|
||||
<image class="code-img" :src="orderInfo.code"/>
|
||||
<view class="v12-justify-center v12-align-center v12-mt-2" v-if="isGroup">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel v12-mx-1" @click="call(system_store.phone)">商家电话</view>
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel v12-mx-1" @click="showMerchantWechat">商家微信</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-else>
|
||||
<div
|
||||
@@ -519,7 +531,7 @@
|
||||
<script>
|
||||
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
|
||||
import OrderGoods from "@/components/OrderGoods";
|
||||
import {orderDetail, orderDelay, aginConfirm, express, editAddress, orderExpectedArrivalTime} from "@/api/order";
|
||||
import {orderDetail, orderDelay, aginConfirm, express, editAddress, orderExpectedArrivalTime, groupOrderDetail} from "@/api/order";
|
||||
import Payment from "@/components/Payment";
|
||||
import DataFormat from "@/components/DataFormat";
|
||||
import {copyClipboard} from "@/utils";
|
||||
@@ -578,6 +590,8 @@ export default {
|
||||
pageKeyId: Object.freeze('userOrderInfo'),
|
||||
logistics: {},
|
||||
isGift: false,
|
||||
isGroup: false,
|
||||
key: "",
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
@@ -588,7 +602,9 @@ export default {
|
||||
...mapGetters(["userInfo"])
|
||||
},
|
||||
onLoad(opts) {
|
||||
this.isGift = Number(opts.isGift || 0) === 1
|
||||
this.isGift = Number(opts.isGift || 0) === 1;
|
||||
this.isGroup = Number(opts.isGroup || 0) === 1;
|
||||
this.key = opts.key || ''
|
||||
},
|
||||
onShow() {
|
||||
const chooseAddress = uni.getStorageSync('chooseAddress') || {}
|
||||
@@ -628,6 +644,8 @@ export default {
|
||||
})
|
||||
} else {
|
||||
this.id = this.$yroute.query.id;
|
||||
this.isGroup = Number(this.$yroute.query.isGroup || 0) === 1;
|
||||
this.key = this.$yroute.query.key || '';
|
||||
this.getDetail();
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
active: 'weixin',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 支付方式切换
|
||||
payItem(type) {
|
||||
this.active = type
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -499,7 +499,7 @@
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="intro more-t">
|
||||
{{ jiaLou.shopIntro }}
|
||||
{{ jiaLou.intro }}
|
||||
</view>
|
||||
<view class="name-wrap">
|
||||
<image
|
||||
|
||||
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<view class="group-detail">
|
||||
<scroll-view scroll-y class="page-scroll">
|
||||
<!-- 顶部大图/轮播 -->
|
||||
<swiper class="hero-swiper" indicator-dots autoplay interval="3000">
|
||||
<swiper-item v-for="(img, idx) in detail.carouselImages" :key="idx">
|
||||
<image :src="img" class="hero-img" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 价格与标题 -->
|
||||
<view class="price-title">
|
||||
<view class="price v12-primary-text">
|
||||
<text class="v12-font-34">¥</text>
|
||||
<text class="v12-font-bold v12-font-40">{{ detail.price }}</text>
|
||||
</view>
|
||||
<view class="title v12-font-bold v12-font-36 more-t">{{ detail.name }}</view>
|
||||
|
||||
</view>
|
||||
<!-- 礼物 -->
|
||||
<view class="v12-px-3">
|
||||
<view
|
||||
@click="toGift"
|
||||
class=" v12-white-text v12-px-2 v12-py-1 v12-mt-2 v12-radius-20 v12-font-bold v12-justify-between v12-align-center gift-wrap"
|
||||
:style="giftBg ? 'background: url(' + giftBg + ') no-repeat center/cover' : ''"
|
||||
:class="giftBg ? '' : 'v12-primary'"
|
||||
>
|
||||
<!-- <text v-if="storeInfo.discount > 0" class="v12-font-28 v12-yellow-text ll-text">平台限时补贴{{ storeInfo.discount }}折</text> -->
|
||||
<view class="v12-font-28 v12-align-center" style="height: 74rpx; opacity: 0;">
|
||||
<image class="gift-img" :src="webUrl + '/orderIcon/gift.png'" mode="widthFix" ></image>
|
||||
支持礼包赠送
|
||||
</view>
|
||||
<view @click="toGift" class="v12-white v12-dark-text v12-radius-20 v12-font-28 gift-btn" v-if="!giftBg">
|
||||
送给朋友
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 档期） -->
|
||||
<view class="v12-mt-3 v12-px-3">
|
||||
<view class="section v12-radius-60 v12-white">
|
||||
<view class="intro-text">
|
||||
{{ detail.intro }}
|
||||
</view>
|
||||
<view class="intro-text v12-mt-2">* 下单后与商家确认入住时间</view>
|
||||
<view class="v12-justify-between v12-align-center v12-mt-2">
|
||||
<view class="v12-primary v12-white-text v12-font-30 date-item v12-px-1" style="height: 160rpx;">
|
||||
<view>预</view>
|
||||
<view>约</view>
|
||||
</view>
|
||||
<view v-for="(d) in currentWeek" :key="d.date" class="date-item">
|
||||
<view>{{ d.week }}</view>
|
||||
<view class="v12-my-1 v12-primary-text">{{ d.monthDay }}</view>
|
||||
<view>不可预约</view>
|
||||
</view>
|
||||
<view class="v12-primary-text v12-font-24 date-item v12-white v12-px-1">
|
||||
<view>可</view>
|
||||
<view>约</view>
|
||||
<view>日</view>
|
||||
<view>期</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 套餐详情（模拟） -->
|
||||
<view class="v12-px-3 v12-mt-3">
|
||||
<view class="section v12-radius-60 v12-white v12-px-3 v12-pt-3">
|
||||
<view class="v12-font-bold v12-font-36">套餐详情</view>
|
||||
<view class="v12-mt-3">
|
||||
<view v-for="(c, i) in detail.packageDetails" :key="i" class="package-item v12-mb-2">
|
||||
<view class="grid-txt v12-justify-between v12-align-center">
|
||||
<view class="v12-px-2 v12-py-1"><u-icon name="home"></u-icon></view>
|
||||
<view class="v12-px-2 v12-py-1 v12-white v12-radius-100">{{ c.title }}</view>
|
||||
</view>
|
||||
<view v-for="(img, idx) in c.images" :key="idx" class="v12-justify-start v12-align-center">
|
||||
<image :src="img" class="grid-img" mode="aspectFill" />
|
||||
</view>
|
||||
<view v-if="c.description" class="v12-font-26 v12-mt-2">{{ c.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="v12-px-3 v12-mt-3">
|
||||
<view class="section v12-radius-60 v12-white v12-px-3 v12-pt-3">
|
||||
<view class="v12-font-bold v12-font-36">套餐亮点</view>
|
||||
<view class="v12-mt-3 v12-font-26">
|
||||
<rich-text :nodes="rules"></rich-text>
|
||||
</view>
|
||||
<!-- 表格 -->
|
||||
<view class="simple-table">
|
||||
<view class="table-row">
|
||||
<view class="table-cell">申请退款时间</view>
|
||||
<view class="table-cell">费用</view>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<view class="table-cell">下单未预约</view>
|
||||
<view class="table-cell">免费</view>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<view class="table-cell">入住前x天</view>
|
||||
<view class="table-cell"></view>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<view class="table-cell">入住前x天</view>
|
||||
<view class="table-cell"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-px-3 v12-mt-3">
|
||||
<u-divider text="图片详情"></u-divider>
|
||||
</view>
|
||||
<!-- 图片 -->
|
||||
<view class="v12-mt-3 v12-px-3">
|
||||
<view v-for="(img, idx) in detail.detailImages" :key="idx" >
|
||||
<image :src="img" class="v12-radius-40" style="width: 100%;" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-space"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="total " >
|
||||
<text>合计：</text>
|
||||
<text class="v12-primary-text">
|
||||
<text class="v12-font-20">¥ </text>
|
||||
{{ detail.price }}</text>
|
||||
</view>
|
||||
<view class="bar-actions">
|
||||
<view class="mini-btn" @click="contactService">联系商家</view>
|
||||
<view class="buy-btn" @click="bookNow">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getJiaLouProductDetail, getJiaLouCalendar,getJiaLouBookingRules } from '@/api/qianxian'
|
||||
import {getGiftCardSendBackground} from "@/api/gift"
|
||||
export default {
|
||||
name: 'GroupBuyDetails',
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
giftBg: '',
|
||||
id: '',
|
||||
activePeriod: 0,
|
||||
detail: {
|
||||
title: '【正牌爆售】30天29晚臻享特色小院/庵食套餐',
|
||||
price: 3888,
|
||||
images: [
|
||||
'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/hotel-1.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/hotel-2.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/hotel-3.jpg'
|
||||
],
|
||||
periods: [
|
||||
{ batch: 1, range: '6/13-6/15' },
|
||||
{ batch: 2, range: '6/16-6/18' },
|
||||
{ batch: 3, range: '6/19-6/21' },
|
||||
{ batch: 4, range: '6/22-6/24' }
|
||||
],
|
||||
combos: [
|
||||
{ img: 'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/room-1.jpg', text: '温泉泡汤·双人早餐' },
|
||||
{ img: 'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/room-2.jpg', text: '茶室体验·手作禅食' },
|
||||
{ img: 'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/room-3.jpg', text: '山景露台·下午茶' },
|
||||
{ img: 'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/room-4.jpg', text: '夜间电影·星空灯' },
|
||||
{ img: 'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/room-5.jpg', text: '精品床品·加湿香氛' },
|
||||
{ img: 'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/room-6.jpg', text: '小院烧烤·庭院篝火' }
|
||||
],
|
||||
highlights: [
|
||||
'小院临海风光，步行可达观景台',
|
||||
'馆内私厨，提供本地特色庵食',
|
||||
'房间带露台，景观视野绝佳',
|
||||
'每期限定名额，错峰享受更安静'
|
||||
],
|
||||
rules: [
|
||||
'需至少提前3日预订，节假日价格略有浮动',
|
||||
'不可与其他优惠同享；支持改期一次',
|
||||
'如遇不可抗因素，支持无损退款',
|
||||
'入住需持有效身份证件，遵守园区规定'
|
||||
],
|
||||
fees: [
|
||||
{ name: '下单即赠惊喜', value: '免费' },
|
||||
{ name: '入住加床', value: 'x' },
|
||||
{ name: '儿童入园', value: 'x' }
|
||||
],
|
||||
gallery: [
|
||||
'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/courtyard-1.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/trae-ai/assets-placeholder/courtyard-2.jpg'
|
||||
]
|
||||
},
|
||||
calendar: [],
|
||||
currentWeek: [],
|
||||
rules: ""
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
getGiftCardSendBackground().then(res => {
|
||||
if (res.status === 200) {
|
||||
this.giftBg = res.data || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoad(query) {
|
||||
this.id = (query && query.id) || ''
|
||||
this.getDetail()
|
||||
this.getCalendar()
|
||||
getJiaLouBookingRules(this.id).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.rules = res.data || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取产品可预约日期
|
||||
*/
|
||||
getCalendar() {
|
||||
const currentMonth = new Date().toISOString().slice(0, 7)
|
||||
getJiaLouCalendar({
|
||||
travelGroupProductId: this.id,
|
||||
month: currentMonth
|
||||
}).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.calendar = res.data || []
|
||||
// 计算当前日及后面4天
|
||||
this.currentWeek = this.computeCurrentWeekFromCalendar()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据 calendar 数据计算：今天 + 接下来4天（共5天）
|
||||
* 返回 YYYY-MM-DD 字符串数组
|
||||
*/
|
||||
computeCurrentWeekFromCalendar() {
|
||||
const result = []
|
||||
const base = new Date()
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const d = new Date(base)
|
||||
d.setDate(base.getDate() + i)
|
||||
const dateStr = this.formatYMD(d)
|
||||
result.push({
|
||||
date: dateStr,
|
||||
week: this.getWeekLabel(dateStr),
|
||||
monthDay: i === 0 ? '今日' : this.getMonthDay(dateStr)
|
||||
})
|
||||
}
|
||||
return result
|
||||
},
|
||||
formatYMD(d) {
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
},
|
||||
getWeekLabel(dateStr) {
|
||||
const [y, m, d] = dateStr.split('-').map(Number)
|
||||
const date = new Date(y, m - 1, d)
|
||||
const map = ['周日','周一','周二','周三','周四','周五','周六']
|
||||
return map[date.getDay()]
|
||||
},
|
||||
getMonthDay(dateStr) {
|
||||
const [y, m, d] = dateStr.split('-').map(Number)
|
||||
return `${m}/${d}`
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取产品详情
|
||||
*/
|
||||
async getDetail() {
|
||||
if (!this.id) {
|
||||
uni.showToast({ title: '参数错误', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const res = await getJiaLouProductDetail(this.id)
|
||||
if (res.status === 200) {
|
||||
this.detail = res.data
|
||||
}
|
||||
},
|
||||
|
||||
contactService() {
|
||||
uni.showToast({ title: '已为您接入管家', icon: 'none' })
|
||||
},
|
||||
bookNow() {
|
||||
uni.navigateTo({ url: '/pkg_product/views/submitOrder?id=' + this.id + '&orderStartDate=' + this.currentWeek[0].date + '&orderEndDate=' + this.currentWeek[4].date })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.group-detail {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.gift-img{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.page-scroll { height: calc(100vh - 120rpx); }
|
||||
.hero-swiper {
|
||||
width: 100%;
|
||||
height: 700rpx;
|
||||
}
|
||||
.hero-img { width: 100%; height: 100%; }
|
||||
.price-title {
|
||||
padding: 24rpx 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.price { color: #E53935; font-size: 40rpx; font-weight: 700; }
|
||||
.title { margin-top: 8rpx; color: #333; font-size: 28rpx; line-height: 40rpx; }
|
||||
.action-row { margin-top: 16rpx; display: flex; gap: 16rpx; }
|
||||
.btn { padding: 14rpx 24rpx; border-radius: 30rpx; font-size: 26rpx; }
|
||||
.btn.ghost { border: 1rpx solid #ccc; color: #333; }
|
||||
.btn.primary { background: #E53935; color: #fff; }
|
||||
.section { padding: 20rpx 24rpx; }
|
||||
.section-hd { display: flex; align-items: center; font-size: 28rpx; color: #111; font-weight: 600; margin-bottom: 12rpx; }
|
||||
.dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: #E53935; margin-right: 12rpx; }
|
||||
.schedule { white-space: nowrap; }
|
||||
.schedule-inner { display: flex; }
|
||||
.period { padding: 14rpx 20rpx; border: 1rpx solid #eee; border-radius: 12rpx; margin-right: 12rpx; }
|
||||
.period.active { border-color: #E53935; color: #E53935; }
|
||||
.p1 { font-size: 26rpx; font-weight: 600; }
|
||||
.p2 { font-size: 22rpx; color: #666; }
|
||||
.grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
|
||||
|
||||
.grid-img {
|
||||
width: 204rpx;
|
||||
height: 204rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.grid-txt {
|
||||
width: fit-content;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
border: 1px solid #F9E49D;
|
||||
background: #F9E49D;
|
||||
border-radius: 100rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.bullets { }
|
||||
.bullet { display: flex; align-items: flex-start; margin-bottom: 12rpx; }
|
||||
.bullet-icon { width: 28rpx; text-align: center; color: #E53935; font-size: 28rpx; line-height: 32rpx; }
|
||||
.bullet-txt { flex: 1; font-size: 26rpx; color: #333; }
|
||||
.fee-table { margin-top: 12rpx; border: 1rpx solid #eee; border-radius: 12rpx; overflow: hidden; }
|
||||
.fee-row { display: flex; }
|
||||
.fee-row + .fee-row { border-top: 1rpx solid #f2f2f2; }
|
||||
.fee-col { flex: 1; padding: 16rpx; font-size: 26rpx; }
|
||||
.fee-head { background: #f8f8f8; font-weight: 600; }
|
||||
.name { color: #333; }
|
||||
.val { color: #666; text-align: right; }
|
||||
.gallery-img { width: 100%; margin-bottom: 16rpx; border-radius: 12rpx; overflow: hidden; }
|
||||
.bottom-space { height: 140rpx; }
|
||||
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1rpx solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 16rpx 24rpx; }
|
||||
.total { font-size: 28rpx; color: #111; font-weight: 700; }
|
||||
.bar-actions { display: flex; gap: 16rpx; }
|
||||
.mini-btn { padding: 16rpx 22rpx; border: 1rpx solid #ccc; border-radius: 32rpx; font-size: 26rpx; color: #333; }
|
||||
.buy-btn { padding: 16rpx 28rpx; border-radius: 32rpx; background: #C52733; color: #fff; font-size: 26rpx; }
|
||||
.gift-wrap{
|
||||
position: relative;
|
||||
}
|
||||
.intro-text{
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 44rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.package-item{
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.date-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(240,240,240,0.69);
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
height: 160rpx;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
|
||||
.simple-table {
|
||||
margin-top: 12rpx;
|
||||
border: 1rpx solid #FADE9F;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 60rpx 60rpx 0 0;
|
||||
}
|
||||
.table-row {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
&:first-child {
|
||||
background: #FADE9F;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.table-row + .table-row {
|
||||
border-top: 1rpx solid #FADE9F;
|
||||
}
|
||||
.table-cell {
|
||||
flex: 1;
|
||||
padding: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
border-right: 1rpx solid #FADE9F;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.table-cell:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
</style>
|
||||
+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>
|
||||
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<view class="submit-order">
|
||||
<scroll-view scroll-y class="page-scroll">
|
||||
<!-- 商品卡片 -->
|
||||
<view class="card">
|
||||
<view class="product-card">
|
||||
<image class="thumb" :src="orderInfo.travelGroupProduct.mainImage" mode="aspectFill" />
|
||||
<view class="info">
|
||||
<view class="title">{{ orderInfo.travelGroupProduct.name }}</view>
|
||||
<view class="price-row">
|
||||
<text class="label">实付：</text>
|
||||
<text class="price v12-primary-text"><text class="v12-font-20">￥</text>{{ orderInfo.priceGroup.totalPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice v12-font-28 v12-primary-text">下单成功后记得联系商家确认入住时间哦~</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 填写信息 -->
|
||||
<view class="card form-card">
|
||||
<view class="section-title">填写您的信息</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓 名:</text>
|
||||
<u-input shape="circle" placeholderStyle="font-size: 24rpx;" v-model="form.name" placeholder="请填写姓名" border="surround" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">联系电话:</text>
|
||||
<u-input shape="circle" placeholderStyle="font-size: 24rpx;" v-model="form.phone" placeholder="请填写联系电话" border="surround" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">入住时间:</text>
|
||||
<view class="date-row" @click="chooseDate">
|
||||
<text class="date-val v12-primary-text">{{ dateRangeText }}</text>
|
||||
<!-- <u-icon name="arrow-right" size="18" color="#999"></u-icon> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="card pay-card">
|
||||
<view class="section-title">支付方式</view>
|
||||
<view
|
||||
class="payItem acea-row row-middle v12-justify-between"
|
||||
style="flex-wrap: nowrap; margin-top: 20rpx"
|
||||
@click="payItem('weixin')"
|
||||
>
|
||||
<view class="name acea-row v12-font-24 ">
|
||||
<!-- <view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view> -->
|
||||
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/微信支付.png'" mode=""></image>
|
||||
微信支付
|
||||
</view>
|
||||
<view class="tip"></view>
|
||||
<label class="radio">
|
||||
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#C52733"/>
|
||||
<text></text>
|
||||
</label>
|
||||
</view>
|
||||
<u-divider></u-divider>
|
||||
<view
|
||||
class="payItem acea-row row-middle v12-justify-between"
|
||||
style="flex-wrap: nowrap;"
|
||||
@click="payItem('yue')"
|
||||
>
|
||||
<view class="name acea-row v12-font-24">
|
||||
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/余额宝.png'" mode=""></image>
|
||||
余额支付
|
||||
</view>
|
||||
<!-- <view class="tip">可用余额：{{ userInfo.nowMoney ? force2Decimal(userInfo.nowMoney) : 0.00 }}</view> -->
|
||||
<label class="radio">
|
||||
<radio style="transform: scale(0.7);" value="" :checked="active === 'yue'" color="#C52733"/>
|
||||
<text></text>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退改规则 -->
|
||||
<view class="card text-card">
|
||||
<view class="section-title">退改规则</view>
|
||||
<view class="plain-text v12-font-26">
|
||||
根据商家政策，与商家确认入住时间前可免费取消；如若确认入住后需要更改入住时间，可需联系客服，与商家商议新的入住时间；若与商家确认入住时间后因取消/退订，则根据不同阶段进行退款。
|
||||
</view>
|
||||
<view class="v12-mt-4">
|
||||
<view class="section-title">预定说明</view>
|
||||
<view class="plain-text">
|
||||
订单生效规则：订单需商家确认后方可生效，确认结果将通过短信通知。您请务必在订单生效后再前往商家办理入住，以免影响您的行程。
|
||||
</view>
|
||||
<view class="plain-text">
|
||||
服务条款说明：预订单由香道滇平台提供，为保障您的权益，请仔细阅读《香道平台旅居预订服务规则》。旅居服务由对应旅居服务提供者（旅居管家/旅居商家）提供。该业务的实际运营及相关责任，由旅居商家基于签约主体公司承担。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-space"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="total">
|
||||
<text>合计：</text>
|
||||
<text class="highlight">
|
||||
<text class="v12-font-20">￥</text>{{ orderInfo.priceGroup.totalPrice }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="bar-actions">
|
||||
<view class="mini-btn" @click="contactMerchant">联系商家</view>
|
||||
<view class="buy-btn" @click="subscribePay">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择器（简单占位） -->
|
||||
<u-calendar v-model="showCalendar" mode="range" :min-date="minDate" @confirm="onDateConfirm" />
|
||||
<passkeyborad
|
||||
v-if="isShowPayPwdPop"
|
||||
ref='payPwdPop'
|
||||
showMoney
|
||||
:money="orderInfo.priceGroup.totalPrice"
|
||||
:show="isShowPayPwdPop"
|
||||
@close="pwdPopClose"
|
||||
@finish="pwdPopFinish"
|
||||
></passkeyborad>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createJiaLouOrder, createJiaLouOrderPay } from '@/api/qianxian'
|
||||
import buyMixins from '../mixins/buyMixins'
|
||||
import blPaymentPasswordInput from '@/components/blPaymentPasswordInput.vue'
|
||||
import {mapGetters} from "vuex"
|
||||
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
|
||||
export default {
|
||||
name: 'SubmitOrder',
|
||||
mixins: [buyMixins],
|
||||
components: {
|
||||
blPaymentPasswordInput,
|
||||
passkeyborad
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
from: this.$deviceType,
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
form: {
|
||||
name: '',
|
||||
phone: '',
|
||||
payWay: 'wechat',
|
||||
start: '2025-08-17',
|
||||
end: '2025-08-23',
|
||||
id: ''
|
||||
},
|
||||
showCalendar: false,
|
||||
minDate: this.formatDate(new Date()),
|
||||
orderInfo: {},
|
||||
payPassword: null,
|
||||
isShowPayPwdPop: false
|
||||
}
|
||||
},
|
||||
onLoad(opts) {
|
||||
const { id, orderStartDate, orderEndDate } = opts
|
||||
this.form.start = orderStartDate
|
||||
this.form.end = orderEndDate
|
||||
this.form.id = id
|
||||
this.getOrderConfim()
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["userInfo", "storeItems"]),
|
||||
dateRangeText() {
|
||||
return this.formatDisplay(this.form.start) + ' ~ ' + this.formatDisplay(this.form.end)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pwdPopClose() {
|
||||
this.isShowPayPwdPop = false
|
||||
},
|
||||
pwdPopFinish(payPwd) {
|
||||
this.payPassword = payPwd
|
||||
this.createOrder(true)
|
||||
},
|
||||
chooseDate() { this.showCalendar = true },
|
||||
onDateConfirm(e) {
|
||||
const [start, end] = e;
|
||||
this.form.start = start
|
||||
this.form.end = end
|
||||
this.showCalendar = false
|
||||
},
|
||||
formatDisplay(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const [y, m, d] = dateStr.split('-')
|
||||
return `${y}年${m}月${d}日`
|
||||
},
|
||||
formatDate(d) {
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth()+1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
},
|
||||
contactMerchant() {
|
||||
uni.showToast({ title: '已为您接入管家', icon: 'none' })
|
||||
},
|
||||
submitOrder() {
|
||||
if (!this.form.name || !this.form.phone) {
|
||||
uni.showToast({ title: '请完整填写信息', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.showToast({ title: '下单成功（示意）', icon: 'success' })
|
||||
},
|
||||
getOrderConfim() {
|
||||
createJiaLouOrder({
|
||||
travelGroupProductId: this.form.id,
|
||||
orderStartDate: this.form.start,
|
||||
orderEndDate: this.form.end
|
||||
}).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.orderInfo = res.data
|
||||
// uni.showToast({ title: '下单成功（示意）', icon: 'success' })
|
||||
} else {
|
||||
// uni.showToast({ title: res.msg || '下单失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
},
|
||||
createOrder(isyue) {
|
||||
if (!this.active) {
|
||||
uni.showToast({
|
||||
title: "请选择支付方式",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.form.phone)) {
|
||||
uni.showToast({
|
||||
title: "请填写正确的手机号",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(this.form.name)) {
|
||||
uni.showToast({
|
||||
title: "请填写您的真实姓名",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
// 判断如果是余额支付，先要输入支付密码
|
||||
if (this.active == 'yue' && !isyue) {
|
||||
// 先判断用户是否绑定过手机
|
||||
if (this.userInfo.phone) {
|
||||
// 再判断用户是否设置过支付密码
|
||||
if (this.userInfo.hasPwdPay) {
|
||||
// 显示输入支付密码
|
||||
this.isShowPayPwdPop = true
|
||||
} else {
|
||||
// 设置支付密码
|
||||
this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true")
|
||||
}
|
||||
} else {
|
||||
// 跳转到绑定手机
|
||||
this.$yrouter.push("/pkg_user/views/bindPhone")
|
||||
}
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "生成订单中"
|
||||
})
|
||||
let from = {}
|
||||
if (this.$deviceType == "app") {
|
||||
from.from = "app"
|
||||
}
|
||||
const params = {
|
||||
key: this.orderInfo.orderKey,
|
||||
realName: this.form.name,
|
||||
phone: this.form.phone,
|
||||
from: this.from,
|
||||
payType: this.active,
|
||||
passwordPay: this.payPassword
|
||||
// ...from
|
||||
}
|
||||
//余额支付的支付密码
|
||||
if (this.active == 'yue') {
|
||||
params.passwordPay = this.payPassword
|
||||
}
|
||||
var that = this
|
||||
createJiaLouOrderPay(params).then(res => {
|
||||
uni.hideLoading()
|
||||
const data = res.data
|
||||
switch (data.status) {
|
||||
case "ORDER_EXIST":
|
||||
case "EXTEND_ORDER":
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index?isGroup=1",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
})
|
||||
break;
|
||||
case "PAY_DEFICIENCY":
|
||||
break;
|
||||
case "PAY_ERROR":
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index?isGroup=1",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "SUCCESS":
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index?isGroup=1",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
})
|
||||
break;
|
||||
case "WECHAT_H5_PAY":
|
||||
// H5支付
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index?isGroup=1",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
})
|
||||
break;
|
||||
case "WECHAT_PAY":
|
||||
// 小程序支付
|
||||
weappPay(data.result.jsConfig).finally(() => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index?isGroup=1",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
})
|
||||
})
|
||||
break;
|
||||
case "WECHAT_APP_PAY":
|
||||
// APP支付
|
||||
weappPay(data.result.jsConfig).finally(() => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index?isGroup=1",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
})
|
||||
break;
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: err.msg ||
|
||||
err.response.data.msg ||
|
||||
err.response.data.message ||
|
||||
"创建订单失败",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
}).finally(function () {
|
||||
that.isShowPayPwdPop = false
|
||||
that.$refs.payPwdPop.clear()
|
||||
that.$refs.payPwdPop.close()
|
||||
})
|
||||
},
|
||||
subscribePay() {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: [
|
||||
'7O3wKw7_D4t7yfSOlvecKuOQP8QEPY88uBx2FJg43HE',
|
||||
'TSmTnGibZ8IxWCiRWOvLxha6-0u7tE-V1-WbDCiPkKU',
|
||||
'9Q6xLHe6HyjkU5Zn5k_2zxYPf2y4MxVyUbOSW8pcZRU'
|
||||
],
|
||||
complete: () => this.createOrder(false)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.submit-order { min-height: 100vh; }
|
||||
.page-scroll { height: calc(100vh - 120rpx); }
|
||||
.card { background: #fff; border-radius: 24rpx; margin: 24rpx; padding: 24rpx; }
|
||||
.product-card { display: flex; }
|
||||
.thumb { width: 160rpx; height: 160rpx; border-radius: 16rpx; }
|
||||
.info { flex: 1; margin-left: 20rpx; }
|
||||
.title { font-size: 28rpx; color: #333; line-height: 40rpx; font-weight: 600; }
|
||||
.price-row { margin-top: 8rpx; display: flex; align-items: baseline; }
|
||||
.label { font-size: 24rpx; color: #666; }
|
||||
.price { color: #E53935; font-size: 34rpx; font-weight: 700; }
|
||||
.notice { margin-top: 12rpx; font-size: 22rpx; color: #999; }
|
||||
|
||||
.section-title { font-size: 28rpx; color: #111; font-weight: 600; margin-bottom: 12rpx; }
|
||||
.form-item { margin-bottom: 20rpx; display: flex; align-items: center; }
|
||||
.form-label { width: 120rpx; display: block; font-size: 24rpx; color: #666; margin-bottom: 0; }
|
||||
.date-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 16rpx; padding: 20rpx; }
|
||||
.date-val { font-size: 26rpx; color: #333; }
|
||||
|
||||
.radio-item { margin-bottom: 16rpx; }
|
||||
.text-card .plain-text { font-size: 26rpx; color: #666; line-height: 40rpx; letter-spacing: 2px;}
|
||||
|
||||
.bottom-space { height: 140rpx; }
|
||||
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1rpx solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 16rpx 24rpx; }
|
||||
.total { font-size: 28rpx; color: #111; font-weight: 700; }
|
||||
.total .highlight { color: #C52733; font-weight: 700; }
|
||||
.bar-actions { display: flex; gap: 16rpx; }
|
||||
.mini-btn { padding: 16rpx 22rpx; border: 1rpx solid #ccc; border-radius: 32rpx; font-size: 26rpx; color: #333; }
|
||||
.buy-btn { padding: 16rpx 28rpx; border-radius: 32rpx; background: #C52733; color: #fff; font-size: 26rpx; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user