1529 lines
38 KiB
Vue
1529 lines
38 KiB
Vue
<template>
|
||
<view class="detail-page">
|
||
<!-- 顶部导航栏 -->
|
||
<custom-navbar title="订单详情" :show-back="true" title-color="#333333"
|
||
:backgroundColor="backgroundColor"></custom-navbar>
|
||
<view class="content-part">
|
||
<!-- 订单状态 -->
|
||
<view class="status-section">
|
||
<image class="status-section-image" mode="widthFix" :src="stateItem.icon" />
|
||
<text class="status-text">{{ stateItem.text }}
|
||
<text v-if="orderInfo.team_buy_order_state">{{
|
||
` (${getGroupType})`
|
||
}}</text></text>
|
||
</view>
|
||
|
||
|
||
<!-- 拼团邀请 -->
|
||
<view class="group-invite"
|
||
v-if="orderInfo.state !=1 && orderInfo.team_buy_id && (orderInfo.team_buy_order_state==1||orderInfo.team_buy_order_state==2)">
|
||
<view class="invite-text" v-if="orderInfo.team_buy_order_state == 1">参团成功，需邀请<text
|
||
style="color: #FF4767">{{orderInfo.team_buy.person_num - orderInfo.team_buy.pay_person_num}}</text>人才可完成拼团
|
||
</view>
|
||
<view class="invite-text" v-if="orderInfo.team_buy_order_state == 2">参团成功，已拼团成功！</view>
|
||
|
||
<view class="invite-time" v-if="orderInfo.team_buy_order_state == 1">
|
||
<span class="invite-time-line1"></span>剩余
|
||
<uv-count-down :time="orderInfo.team_buy.remain_time*1000" format="HH:mm:ss" autoStart millisecond
|
||
@change="onChange" @finish="onFinish">
|
||
<view class="time">
|
||
<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}</text>:
|
||
<text
|
||
class="time__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>:
|
||
<text
|
||
class="time__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
|
||
</view>
|
||
</uv-count-down>
|
||
时间<span class="invite-time-line2"></span>
|
||
</view>
|
||
<view class="invite-time-items">
|
||
<view class="invite-time-item" v-for="item in orderInfo.team_buy.person_num">
|
||
<image :src="orderInfo.team_buy.head_photos[item-1]" mode="aspectFill"
|
||
class="invite-time-item-img" v-if="orderInfo.team_buy.head_photos[item-1]"></image>
|
||
<image src="/static/images/shop/pintuan/add.png" class="invite-time-item-img" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="invite-btn" @click="goInvite">
|
||
<view class="invite-btn-wx" v-if="orderInfo.team_buy_order_state==1">
|
||
<image src="/static/images/shop/pintuan/wx.png" class="invite-btn-wx-img"></image>
|
||
再邀请{{orderInfo.team_buy.person_num - orderInfo.team_buy.pay_person_num}}位好友拼单
|
||
</view>
|
||
<view class="invite-btn-wx" v-else>
|
||
快邀您的好友，来享优惠
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 到家订单 客户以及手艺人信息 -->
|
||
<view class="service-card" v-if="orderInfo.order_kind == 1 || orderInfo.order_kind == 3">
|
||
<view class="location-info">
|
||
<image src="/static/images/gohome_location.png" class="location-icon"></image>
|
||
<view class="address-info">
|
||
<view class="name-phone">
|
||
<text class="name">{{ reservation_address_arr.name }}</text>
|
||
<text class="phone">{{
|
||
reservation_address_arr.call_phone
|
||
}}</text>
|
||
</view>
|
||
<text class="address">{{
|
||
reservation_address_arr.server_address
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<image src="/static/images/boder_icon.png" mode="aspectFill" class="divider"></image>
|
||
<view class="staff-info">
|
||
<image :src="user_syr.head_photo" mode="aspectFill" class="staff-avatar"></image>
|
||
<view class="staff-detail">
|
||
<text class="staff-name">{{ user_syr.name }}</text>
|
||
<view class="rating">
|
||
<!-- <image
|
||
v-for="(star, index) in 5"
|
||
:key="index"
|
||
src="/static/images/star.png"
|
||
class="star-icon"
|
||
></image> -->
|
||
</view>
|
||
</view>
|
||
<!-- <image src="/static/images/order_phone.png" class="phone-btn" @click="contactService(user_syr.account)"></image> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 门店订单 店铺信息 -->
|
||
<view class="service-shop" v-if="orderInfo.order_kind == 2">
|
||
<view class="shop-info">
|
||
<view class="shop-info1">
|
||
<view class="shop-info1-left">
|
||
<image class="shop-logo" :src="user_sj.head_photo" mode="aspectFill"></image>
|
||
<view class="shop-info-right">
|
||
<text class="shop-name">{{ user_sj.name }}</text>
|
||
<view class="shop-distance">
|
||
<image src="/static/images/position_hui.png" mode="aspectFit" class="distance-icon">
|
||
</image>
|
||
<text class="distance-text">{{ distance }}km</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop-info1-right">
|
||
<view class="shop-info1-right-item">
|
||
<image class="btn-map" src="/static/images/evaluate/map.png" mode="aspectFit"
|
||
@click="openMap"></image>
|
||
<view class="shop-info1-right-item-text">地址</view>
|
||
</view>
|
||
<view class="shop-info1-right-item">
|
||
<image class="btn-phone" src="/static/images/evaluate/phone.png" mode="aspectFit"
|
||
@click="contactService(user_sj.account)"></image>
|
||
<view class="shop-info1-right-item-text">电话</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop-info2">
|
||
<text class="shop-time">营业时间：{{ user_sj.business_time }}</text>
|
||
<text class="shop-address">商家电话：{{ user_sj.account }}</text>
|
||
<text class="shop-address mt-10">地址：{{ user_sj.address }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="shop-btns">
|
||
<image class="btn-map" src="/static/images/map_icon.png" mode="aspectFit" @click="openMap"></image>
|
||
<image class="btn-phone" src="/static/images/order_phone.png" mode="aspectFit"
|
||
@click="contactService(user_sj.account)"></image>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 预约信息 -->
|
||
<view class="booking-card">
|
||
<view class="card-header">
|
||
<text class="card-title">预约信息</text>
|
||
<view>
|
||
<text class="update-time" v-if="orderInfo.order_kind == 1 || orderInfo.order_kind == 3">{{
|
||
orderInfo.reservation_time
|
||
}}</text>
|
||
<!-- <text class="update-change">更改时间</text> -->
|
||
</view>
|
||
</view>
|
||
<view class="service-item">
|
||
<image :src="orderInfo.server_photo[0]"
|
||
v-if="orderInfo.server_photo && orderInfo.server_photo.length != 0" mode="aspectFill"
|
||
class="service-image"></image>
|
||
<view class="service-info">
|
||
<view class="service-name">{{ orderInfo.server_title }}
|
||
<view class="service-name-num">×1</view>
|
||
</view>
|
||
<view v-if="orderInfo.team_buy_id" class="group-price">
|
||
<view class="service-price">原价¥{{ orderInfo.cost_money }}</view>
|
||
<view class="service-price2">团购价:¥<text style="font-size: 36rpx">{{
|
||
orderInfo.order_money
|
||
}}</text></view>
|
||
</view>
|
||
<text class="service-price2" style="color: #333" v-else>¥
|
||
<text style="font-size: 36rpx">{{ orderInfo.order_money }}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-real">
|
||
<text class="real-lable">实付金额：</text>
|
||
<text class="real-price">￥{{ orderInfo.pay_money || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="order-card">
|
||
<text class="card-title">订单信息</text>
|
||
<view class="info-item">
|
||
<text class="label">订单类型</text>
|
||
<text class="value">{{ orderInfo.team_buy_id?'拼团订单':'普通订单' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">服务码</text>
|
||
<text class="value">{{ orderInfo.server_code }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">订单编号</text>
|
||
<text class="value">{{ orderInfo.number }}</text>
|
||
</view>
|
||
<view class="info-item" v-if="orderInfo.add_time">
|
||
<text class="label">下单时间</text>
|
||
<text class="value">{{ orderInfo.add_time }}</text>
|
||
</view>
|
||
<view class="info-item" v-if="orderInfo.pay_kind">
|
||
<text class="label">支付方式</text>
|
||
<text
|
||
class="value">{{orderInfo.pay_kind == 1 ? '账户余额' : orderInfo.pay_kind == 2 ? '微信支付' : orderInfo.pay_kind == 3 ? '支付宝支付' : ''}}</text>
|
||
</view>
|
||
<view class="info-item" v-if="orderInfo.pay_time">
|
||
<text class="label">支付时间</text>
|
||
<text class="value">{{ orderInfo.pay_time }}</text>
|
||
</view>
|
||
<view class="info-item" v-if="
|
||
orderInfo.state != 1 &&
|
||
orderInfo.state != 2 &&
|
||
orderInfo.state != 3 &&
|
||
orderInfo.server_start_time
|
||
">
|
||
<text class="label">开始服务时间</text>
|
||
<text class="value">{{ orderInfo.server_start_time }}</text>
|
||
</view>
|
||
<view class="info-item" v-if="
|
||
orderInfo.state != 1 &&
|
||
orderInfo.state != 2 &&
|
||
orderInfo.state != 3 &&
|
||
orderInfo.state != 4 &&
|
||
orderInfo.server_end_time
|
||
">
|
||
<text class="label">服务完成时间</text>
|
||
<text class="value">{{ orderInfo.server_end_time }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部按钮 -->
|
||
<view class="bottom-buttons">
|
||
<view class="contact-button">
|
||
<!-- <image src="/static/images/tell_icon.png" class="tell-icon"></image>
|
||
<text class="contact-text">联系TA</text> -->
|
||
</view>
|
||
<view class="handel-button btn-border" @click="cancelService" v-if="orderInfo.state == 1">
|
||
<text class="button-text">取消订单</text>
|
||
</view>
|
||
<view class="handel-button btn-border" @click="refoundService"
|
||
v-if="orderInfo.state == 2 || orderInfo.state == 3">
|
||
<text class="button-text">申请退款</text>
|
||
</view>
|
||
<view class="handel-button btn-bg" @click="payOrder" v-if="orderInfo.state == 1">
|
||
<text class="button-text">立即支付</text>
|
||
</view>
|
||
<view class="handel-button btn-border" @click="reviewOrder"
|
||
v-if="orderInfo.state == 5 && orderInfo.evaluate==2">
|
||
<text class="button-text">立即评价</text>
|
||
</view>
|
||
<view class="handel-button btn-border" @click="goEvaluateDetail"
|
||
v-if="orderInfo.state == 5 && orderInfo.evaluate==1">
|
||
<text class="button-text">已评论</text>
|
||
</view>
|
||
<view class="handel-button btn-bg" @click="orderAgain" v-if="orderInfo.state == 5 || orderInfo.state == 6">
|
||
<text class="button-text">再来一单</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 获取权限提示匡内容 -->
|
||
<view class="permission" :class="{ transform: isShowPer }">
|
||
<view class="per-tit">美融融plus 对拨打电话权限申请说明</view>
|
||
<view class="per-cont">当您需要联系商家或平台客服的时候，需要获取拨打电话权限。</view>
|
||
</view>
|
||
<l-painter ref="painter" hidden
|
||
css=" width: 420rpx; height: 336rpx;position: relative;background-image:url(https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8b8dd83f-ccde-406a-b236-2cf27db682e0)"
|
||
v-if="orderInfo.team_buy_id">
|
||
<l-painter-image :src="orderInfo.server_photo[0]"
|
||
css=" width: 205rpx; height: 205rpx; position: absolute;left:34rpx;top:108rpx;z-index:2;border-radius:20rpx;object-fit:cover" />
|
||
<l-painter-view css="display: inline-block;z-index:2;position: absolute;left:255rpx;top:108rpx;">
|
||
<l-painter-view
|
||
css="display: inline-block;background:rgba(253, 218, 226, 1);border-radius: 17rpx 17rpx 17rpx 0rpx;padding: 6rpx 10rpx;">
|
||
<l-painter-image
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8406740b-0448-447e-8d61-df91f1339bd4"
|
||
css=" width: 14rpx;height: 19rpx;" />
|
||
<l-painter-text
|
||
:text="`立省${formatPriceNumber(this.orderInfo.cost_money-this.orderInfo.order_money)}元`" :css="`font-weight: 500;font-size: ${formatPriceSize(
|
||
formatPriceNumber(this.orderInfo.cost_money-this.orderInfo.order_money),
|
||
18,
|
||
2
|
||
)}rpx;color: #FF4767;line-height: 25rpx;text-align: left;font-style: normal;`" />
|
||
</l-painter-view>
|
||
<l-painter-view css="margin-top:44rpx;">
|
||
<l-painter-text text="¥"
|
||
css="font-weight: 500;font-size: 26rpx;color: #FF4767;line-height: 48rpx;text-align: left;font-style: normal;" />
|
||
<l-painter-text :text=" formatPriceNumber(this.orderInfo.order_money)" :css="`font-weight: 500;font-size:${formatPriceSize(
|
||
formatPriceNumber(this.orderInfo.order_money),
|
||
56,
|
||
3
|
||
)}rpx;color: #FF4767;line-height: 34rpx;text-align: left;font-style: normal;`" />
|
||
</l-painter-view>
|
||
<l-painter-view css="margin-top:0rpx;">
|
||
<l-painter-text :text="`原价¥${formatPriceNumber(this.orderInfo.cost_money)}`" :css="`text-decoration: line-through;font-weight: 400;font-size:${formatPriceSize(
|
||
formatPriceNumber(this.orderInfo.cost_money),
|
||
24,
|
||
4
|
||
)}rpx;color: #CACCCC;line-height: 33rpx;text-align: left;font-style: normal;`" />
|
||
</l-painter-view>
|
||
<l-painter-view
|
||
css="width: 143rpx; height: 50rpx;background-image:url(https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c4f3c552-67f2-4b1e-9aeb-ab8c4cf1c97e);display: inline-block;border-radius: 25rpx;">
|
||
</l-painter-view>
|
||
</l-painter-view>
|
||
</l-painter>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
handleImgSize,
|
||
handleImgSizeUni
|
||
} from '@/utils/service.js'
|
||
import request from "../../utils/request";
|
||
import _public from "../../utils/public";
|
||
import locationService from "../../utils/locationService";
|
||
import permissionUtils from "../../utils/per";
|
||
export default {
|
||
components: {
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
serviceType:1,//订单类型，1普通，2自营
|
||
urls:{
|
||
1:{
|
||
cancelorder:"/user/cancelorder",
|
||
deleteorder:"/user/deleteorder"
|
||
},
|
||
2:{
|
||
cancelorder:"/user/orderSelf/cancel",
|
||
deleteorder:"/user/orderSelf/del"
|
||
}
|
||
},
|
||
path: '',
|
||
shareImg: '',
|
||
scrollTop: 0,
|
||
timeData: {},
|
||
isShowPer: false,
|
||
id: "",
|
||
staffInfo: {
|
||
avatar: "/static/images/staff.jpg",
|
||
name: "中医理疗谢飞",
|
||
rating: 5,
|
||
},
|
||
orderInfo: {},
|
||
distance: "",
|
||
user_syr: {},
|
||
reservation_address_arr: {},
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id;
|
||
if(options.serviceType){
|
||
this.serviceType = options.serviceType
|
||
}
|
||
// 请求订单详情
|
||
this.getOrderDetail();
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
computed: {
|
||
backgroundColor() {
|
||
if (this.scrollTop > 10) {
|
||
return `rgba(255, 255, 255, ${0.02 * this.scrollTop});`;
|
||
}
|
||
return "transparent";
|
||
},
|
||
//获取拼团状态文字
|
||
getGroupType() {
|
||
let list = [{
|
||
id: 1,
|
||
text: "拼团中",
|
||
},
|
||
{
|
||
id: 2,
|
||
text: "已成团",
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "拼团失败",
|
||
},
|
||
];
|
||
let name = list.find((it) => it.id == this.orderInfo?.team_buy_order_state)?.text;
|
||
return name;
|
||
},
|
||
stateItem() {
|
||
const list = [{
|
||
text: "待支付",
|
||
icon: "/static/images/evaluate/pay.png",
|
||
state: "1",
|
||
},
|
||
{
|
||
text: "待接单",
|
||
icon: "/static/images/evaluate/pending.png",
|
||
state: "2",
|
||
},
|
||
{
|
||
text: this.identity == 0 ? "待开始" : "待服务",
|
||
icon: "/static/images/evaluate/pendingService.png",
|
||
state: "3",
|
||
},
|
||
{
|
||
text: this.identity == 0 ? "进行中" : "服务中",
|
||
icon: "/static/images/evaluate/pendingService.png",
|
||
state: "4",
|
||
},
|
||
{
|
||
text: "已完成",
|
||
icon: "/static/images/evaluate/payOk.png",
|
||
state: "5",
|
||
},
|
||
{
|
||
text: "待评价",
|
||
icon: "/static/images/icons/pending.png",
|
||
state: "6",
|
||
},
|
||
{
|
||
text: "已取消",
|
||
icon: "/static/images/evaluate/cancel.png",
|
||
state: "7",
|
||
},
|
||
];
|
||
const item = list.find((it) => it.state == this.orderInfo.state) || {};
|
||
return item;
|
||
},
|
||
},
|
||
methods: {
|
||
async goInvite() {
|
||
let groupText = ""
|
||
if (this.orderInfo?.team_buy_order_state == 1) {
|
||
groupText =
|
||
`我发起了${this.orderInfo.team_buy.person_num}人团，拼单立省${this.formatPriceNumber(this.orderInfo.cost_money - this.orderInfo.order_money)}元，一起拼更便宜`
|
||
} else if (this.orderInfo?.team_buy_order_state == 2) {
|
||
groupText =
|
||
` 我参加了${this.orderInfo.team_buy.person_num}人团，省了${this.formatPriceNumber(this.orderInfo.cost_money - this.orderInfo.order_money)}元，你也来看看吧`
|
||
}
|
||
this.$refs.painter.canvasToTempFilePathSync({
|
||
fileType: "jpg",
|
||
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
||
pathType: 'url',
|
||
quality: 1,
|
||
success: async (res) => {
|
||
let imageUrl =
|
||
'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40'
|
||
try {
|
||
// 直接调用导入的函数，不要加 this
|
||
const processedUrl = await handleImgSizeUni(res.tempFilePath);
|
||
console.log("处理后的图片地址：", processedUrl);
|
||
// 赋值给组件数据
|
||
imageUrl = processedUrl;
|
||
} catch (err) {
|
||
console.error("处理失败：", err);
|
||
}
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 5,
|
||
title: groupText,
|
||
miniProgram: {
|
||
id: 'gh_89c92e18b70b', // 小程序原始ID
|
||
path: `/subPackages/groupBuy/detail?id=${this.orderInfo.server_id}`, //小程序路径
|
||
type: this.$store.state.wxShareType, // 正式版:0，测试版:1，体验版:2
|
||
webUrl: "https://www.baidu.com/",
|
||
},
|
||
// href:"https://www.baidu.com/",
|
||
imageUrl: imageUrl, // 分享主图（建议300*300以上）
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 5,
|
||
title: groupText,
|
||
miniProgram: {
|
||
id: 'gh_89c92e18b70b', // 小程序原始ID
|
||
path: `/subPackages/groupBuy/detail?id=${this.orderInfo.server_id}`, //小程序路径
|
||
type: this.$store.state
|
||
.wxShareType, // 正式版:0，测试版:1，体验版:2
|
||
webUrl: "https://www.baidu.com/",
|
||
},
|
||
imageUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40', // 分享主图（建议300*300以上）
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(
|
||
res));
|
||
},
|
||
});
|
||
}
|
||
});
|
||
|
||
},
|
||
});
|
||
},
|
||
onChange(e) {
|
||
this.timeData = e;
|
||
},
|
||
onFinish(e) {
|
||
console.log('结束')
|
||
if (this.orderInfo.team_buy_order_state == 1) {
|
||
this.orderInfo.state = 7
|
||
this.orderInfo.team_buy_order_state = 3
|
||
}
|
||
|
||
},
|
||
|
||
goEvaluateDetail() {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluate/evaluationDetails?order_id=${this.id}&order_type=1`
|
||
});
|
||
},
|
||
|
||
getOrderDetail() {
|
||
let url = "/user/orderdetail"
|
||
if(this.serviceType==2){
|
||
url = "/user/orderSelf/details"
|
||
}
|
||
request
|
||
.post(url, {
|
||
id: this.id,
|
||
})
|
||
.then((res) => {
|
||
this.orderInfo = res.data;
|
||
this.user_syr = res.data.user_syr;
|
||
this.user_sj = res.data.user_sj;
|
||
this.reservation_address_arr = res.data.reservation_address_arr;
|
||
console.log(this.orderInfo);
|
||
if (this.orderInfo?.team_buy?.remain_time == 0 && this.orderInfo?.team_buy_order_state == 1) {
|
||
this.orderInfo.state = 7
|
||
this.orderInfo.team_buy_order_state == 3
|
||
}
|
||
if (this.orderInfo.order_kind == 2) {
|
||
this.distance = _public.calcDistance(
|
||
this.user_sj.latitude,
|
||
this.user_sj.longitude,
|
||
getApp().globalData.latitude,
|
||
getApp().globalData.longitude
|
||
);
|
||
}
|
||
});
|
||
},
|
||
// 显示权限说明弹窗
|
||
showPermissionDialog(title, content) {
|
||
return new Promise((resolve) => {
|
||
uni.showModal({
|
||
title,
|
||
content,
|
||
confirmText: "去开启",
|
||
success(res) {
|
||
resolve(res.confirm);
|
||
},
|
||
});
|
||
});
|
||
},
|
||
// 拨打电话
|
||
async makeCall() {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
if (systemInfo.platform === "ios") {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.orderInfo.customer.phone, //仅为示例
|
||
});
|
||
} else {
|
||
let permission = "";
|
||
if (systemInfo.platform === "ios") {
|
||
permission = "phone";
|
||
} else {
|
||
permission = "android.permission.CALL_PHONE";
|
||
}
|
||
// const firstRequest = !plus.storage.getItem(`perm_${permission}`)
|
||
// if(firstRequest) {
|
||
// this.isShowPer = true;
|
||
// }
|
||
this.isShowPer = true;
|
||
// 1. 检查权限
|
||
const {
|
||
granted
|
||
} = await permissionUtils.checkPermission(
|
||
"phone",
|
||
"需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
if (granted) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.orderInfo.customer.phone, //仅为示例
|
||
});
|
||
return;
|
||
}
|
||
this.isShowPer = false;
|
||
// 2. 显示权限说明弹窗
|
||
const confirm = await this.showPermissionDialog(
|
||
"拨打电话权限申请",
|
||
"我们需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
|
||
if (!confirm) return;
|
||
|
||
// 3. 请求权限
|
||
const result = await permissionUtils.requestPermission(
|
||
"phone",
|
||
"需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
console.log("result", result);
|
||
if (result) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.orderInfo.customer.phone, //仅为示例
|
||
});
|
||
return;
|
||
} else {
|
||
locationService.openAppSettings();
|
||
return;
|
||
// uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
|
||
}
|
||
}
|
||
|
||
// uni.makePhoneCall({
|
||
// phoneNumber: this.orderInfo.customer.phone
|
||
// })
|
||
},
|
||
// 联系客服
|
||
async contactService(phone) {
|
||
// TODO: 实现联系客服功能
|
||
// uni.navigateTo({
|
||
// url: '/pages/contact/contact?phone='+phone
|
||
// })
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
if (systemInfo.platform === "ios") {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone, //仅为示例
|
||
});
|
||
} else {
|
||
let permission = "";
|
||
if (systemInfo.platform === "ios") {
|
||
permission = "phone";
|
||
} else {
|
||
permission = "android.permission.CALL_PHONE";
|
||
}
|
||
|
||
this.isShowPer = true;
|
||
// const firstRequest = !plus.storage.getItem(`perm_${permission}`)
|
||
// if(firstRequest) {
|
||
// this.isShowPer = true;
|
||
// }
|
||
// 1. 检查权限
|
||
const {
|
||
granted
|
||
} = await permissionUtils.checkPermission(
|
||
"phone",
|
||
"需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
if (granted) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone, //仅为示例
|
||
});
|
||
this.isShowPer = false;
|
||
return;
|
||
}
|
||
this.isShowPer = false;
|
||
// 2. 显示权限说明弹窗
|
||
const confirm = await this.showPermissionDialog(
|
||
"拨打电话权限申请",
|
||
"我们需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
|
||
if (!confirm) return;
|
||
|
||
// 3. 请求权限
|
||
const result = await permissionUtils.requestPermission(
|
||
"phone",
|
||
"需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
console.log("result", result);
|
||
if (result) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone, //仅为示例
|
||
});
|
||
return;
|
||
} else {
|
||
locationService.openAppSettings();
|
||
return;
|
||
// uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
|
||
}
|
||
}
|
||
},
|
||
// 取消订单
|
||
async cancelService() {
|
||
let id = "";
|
||
await request
|
||
.post("/user/getuser", {
|
||
type: 1,
|
||
})
|
||
.then((res) => {
|
||
console.log(res);
|
||
id = res.data.id;
|
||
});
|
||
uni.showModal({
|
||
title: "取消订单",
|
||
content: "确定要取消该订单吗？",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// TODO: 取消订单
|
||
let data = {
|
||
orderNo: this.orderInfo.number,
|
||
amount: this.orderInfo.pay_money,
|
||
cancel_state: 1,
|
||
cancel_id: id,
|
||
};
|
||
request
|
||
.post(this.urls[this.serviceType].cancelorder, data)
|
||
.then((res) => {
|
||
if (res.state == 1 || res.code == 200) {
|
||
uni.showToast({
|
||
title: "取消成功！",
|
||
icon: "none",
|
||
});
|
||
this.getOrderDetail();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
// 申请退款
|
||
async refoundService() {
|
||
let id = "";
|
||
await request
|
||
.post("/user/getuser", {
|
||
type: 1,
|
||
})
|
||
.then((res) => {
|
||
id = res.data.id;
|
||
});
|
||
uni.showModal({
|
||
title: "申请退款",
|
||
content: "确定申请退款？退款后则订单取消！",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// TODO: 申请退款
|
||
let data = {
|
||
orderNo: this.orderInfo.number,
|
||
amount: this.orderInfo.pay_money,
|
||
cancel_id: id,
|
||
};
|
||
let url = "";
|
||
if (this.orderInfo.pay_kind == 1) {
|
||
url = "/user/cancelbalance";
|
||
} else if (this.orderInfo.pay_kind == 2) {
|
||
url = "/user/wechatrefund";
|
||
} else if (this.orderInfo.pay_kind == 3) {
|
||
url = "/user/alirefund";
|
||
}
|
||
request
|
||
.post(url, data)
|
||
.then((res) => {
|
||
console.log("申请退款接口", res);
|
||
uni.showToast({
|
||
title: "申请退款成功！",
|
||
icon: "none",
|
||
});
|
||
this.orderInfo = {};
|
||
this.getOrderDetail();
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
// 支付订单
|
||
payOrder() {
|
||
if(this.orderInfo.table_source == "order_self"){
|
||
// TODO: 实现支付功能
|
||
uni.navigateTo({
|
||
url: `/pages/order/pay?id=${this.orderInfo.id}&money=${this.orderInfo.order_money}&title=${this.orderInfo.server_title}&number=${this.orderInfo.number}&table_source=order_self`,
|
||
});
|
||
}else{
|
||
// TODO: 实现支付功能
|
||
uni.navigateTo({
|
||
url: `/pages/order/pay?id=${this.orderInfo.id}&money=${this.orderInfo.order_money}&title=${this.orderInfo.server_title}&number=${this.orderInfo.number}`,
|
||
});
|
||
}
|
||
|
||
},
|
||
|
||
// 评价订单
|
||
reviewOrder() {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluate/comment?id=${this.orderInfo.id}&evaluator_type=3&order_type=1&order_kind=${this.orderInfo.order_kind}`
|
||
})
|
||
},
|
||
|
||
// 再次下单
|
||
orderAgain() {
|
||
// TODO: 实现再次下单功能
|
||
uni.navigateTo({
|
||
url: "/pages/service/detail?id=" + this.orderInfo.server_id,
|
||
});
|
||
},
|
||
// 打开手机已有地图
|
||
openMap() {
|
||
let that = this;
|
||
|
||
// #ifdef MP-WEIXIN
|
||
uni.openLocation({
|
||
success: function(res) {
|
||
console.log("打开系统位置地图成功");
|
||
},
|
||
fail: function(error) {
|
||
console.log(error);
|
||
},
|
||
});
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
_public.goMap({
|
||
latitude: parseFloat(that.user_sj.latitude),
|
||
longitude: parseFloat(that.user_sj.longitude),
|
||
name: that.user_sj.name,
|
||
address: that.user_sj.address,
|
||
});
|
||
// #endif
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
position: relative;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.detail-page::before {
|
||
content: "";
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1200rpx !important;
|
||
background-image: url("/static/images/bg.png");
|
||
background-size: cover;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
z-index: 1;
|
||
}
|
||
|
||
.content-part {
|
||
position: relative;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9;
|
||
}
|
||
|
||
/* 导航栏样式 */
|
||
.custom-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 88rpx;
|
||
background-color: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
z-index: 100;
|
||
/* #ifdef H5 */
|
||
padding-top: 0;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS || MP-WEIXIN */
|
||
padding-top: var(--status-bar-height);
|
||
/* #endif */
|
||
}
|
||
|
||
.nav-back {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 状态区域 */
|
||
.status-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
padding-top: 55rpx;
|
||
padding-bottom: 50rpx;
|
||
|
||
.status-section-image {
|
||
width: 52rpx;
|
||
}
|
||
}
|
||
|
||
.status-text {
|
||
font-weight: 600;
|
||
font-size: 44rpx;
|
||
color: #333333;
|
||
line-height: 78rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 服务人员卡片 */
|
||
.service-card {
|
||
margin: 24rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx 0;
|
||
box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
|
||
}
|
||
|
||
.location-info {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.location-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.address-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.name-phone {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.address {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.divider {
|
||
width: 702rpx;
|
||
height: 4rpx;
|
||
}
|
||
|
||
.staff-info {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 32rpx 24rpx 0;
|
||
}
|
||
|
||
.staff-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 44rpx;
|
||
margin-right: 16rpx;
|
||
background-color: #333333;
|
||
}
|
||
|
||
.staff-detail {
|
||
flex: 1;
|
||
}
|
||
|
||
.staff-name {
|
||
font-size: 32rpx;
|
||
color: #3d3d3d;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.rating {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.star-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.phone-btn {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
background-color: #FF4767;
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
/* 门店信息 */
|
||
.service-shop {
|
||
margin: 24rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.shop-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.shop-info1 {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-bottom: 14rpx;
|
||
border-bottom: 2rpx solid #f6f5f5;
|
||
|
||
.shop-info1-left {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.shop-info1-right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 30rpx;
|
||
|
||
.shop-info1-right-item {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.shop-info1-right-item-text {
|
||
margin-top: 2rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #8b8b8b;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop-logo {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.shop-name {
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.shop-distance {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.distance-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.distance-text {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.shop-info2 {
|
||
display: flex;
|
||
flex-flow: column wrap;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.shop-time {
|
||
width: 100%;
|
||
padding-bottom: 10rpx;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
border-bottom: 2rpx solid #f6f5f5;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.shop-address {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
// .shop-time,
|
||
// .shop-address {
|
||
// font-size: 24rpx;
|
||
// color: #999999;
|
||
// }
|
||
|
||
.shop-btns {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-map,
|
||
.btn-phone {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
/* 预约信息卡片 */
|
||
.booking-card {
|
||
margin: 24rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.card-title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.update-time {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
padding-right: 4rpx;
|
||
}
|
||
|
||
.update-change {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.service-item {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.service-image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 16rpx;
|
||
margin-right: 24rpx;
|
||
background-color: #e2e2e2;
|
||
}
|
||
|
||
.service-info {
|
||
flex: 1;
|
||
height: 160rpx;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.service-name {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.service-name-num {
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 34rpx;
|
||
}
|
||
}
|
||
|
||
.service-price {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #bbbbbb;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 7rpx;
|
||
}
|
||
|
||
.service-price2 {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FF4767;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.service-count {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.service-real {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-end;
|
||
align-items: baseline;
|
||
padding-top: 24rpx;
|
||
border-top: 1rpx solid rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.real-lable {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.real-price {
|
||
font-family: DINPro, DINPro;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #FF4767;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 订单信息卡片 */
|
||
.order-card {
|
||
margin: 24rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.value {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 底部按钮 */
|
||
.bottom-buttons {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 128rpx;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
padding: 0 24rpx 0 78rpx;
|
||
/* #ifdef H5 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* #endif */
|
||
z-index: 999;
|
||
}
|
||
|
||
.handel-button {
|
||
width: 186rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 36rpx;
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
.btn-border {
|
||
border: 2rpx solid #979797;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
.btn-bg {
|
||
background-color: #FF4767;
|
||
}
|
||
|
||
.button-text {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.btn-border .button-text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 39rpx;
|
||
}
|
||
|
||
.contact-button {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.contact-text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.tell-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
/* APP适配 */
|
||
/* #ifdef APP-PLUS */
|
||
.permission.transform {
|
||
top: calc(var(--status-bar-height) + 88rpx + 20rpx);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.detail-page {
|
||
padding-bottom: calc(130rpx);
|
||
}
|
||
|
||
/* #endif */
|
||
/* 平台适配 */
|
||
/* #ifdef H5 */
|
||
.detail-page {
|
||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef MP-WEIXIN */
|
||
.custom-nav {
|
||
padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top));
|
||
padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
|
||
}
|
||
|
||
/* #endif */
|
||
.group-invite {
|
||
background: linear-gradient(180deg, #fff4f3 0%, #ffffff 100%);
|
||
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(210, 213, 224, 0.5);
|
||
border-radius: 20rpx;
|
||
padding: 40rpx 25rpx 50rpx 25rpx;
|
||
margin: 0 30rpx;
|
||
|
||
.invite-text {
|
||
font-weight: 500;
|
||
font-size: 35rpx;
|
||
color: #333333;
|
||
line-height: 49rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.invite-time {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 44rpx;
|
||
|
||
.time {
|
||
// #ifndef APP-NVUE
|
||
display: flex;
|
||
// #endif
|
||
flex-direction: row;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FF4767;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
gap: 6rpx;
|
||
margin: 0 20rpx;
|
||
|
||
&__item {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
background: #fdeded;
|
||
border-radius: 6rpx;
|
||
border: 1rpx solid #f4c1c8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.invite-time-line1 {
|
||
width: 84rpx;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg, #FFFFFF 0%, #E2E7E7 100%);
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.invite-time-line2 {
|
||
width: 84rpx;
|
||
height: 2rpx;
|
||
background: linear-gradient(337deg, #FFFFFF 0%, #E2E7E7 100%);
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.invite-time-items {
|
||
margin-top: 61rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 28rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.invite-time-item {
|
||
.invite-time-item-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.invite-btn {
|
||
margin-top: 60rpx;
|
||
background-image: url('/static/images/shop/pintuan/button.png');
|
||
background-size: cover;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
width: 640rpx;
|
||
height: 90rpx;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.invite-btn-wx {
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.invite-btn-wx-img {
|
||
width: 43rpx;
|
||
height: 39rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |