订单 首页 加 新人红包
This commit is contained in:
parent
08623767b9
commit
4068e297b3
|
|
@ -0,0 +1,295 @@
|
|||
<template>
|
||||
<view style="height: 100vh;">
|
||||
<!-- <view class="flex align-center justify-between you-nav">
|
||||
<view v-for="(item,index) in tab" :key="index" class="text-center box"
|
||||
:class="tabIndex == index?'tanColor':''" @click="bindTab(item.state)">
|
||||
<view style="z-index: 9;">{{item.name}}</view>
|
||||
<view class="" :class="tabIndex == index?'line':''"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
<t-refresh ref="refresh" v-if="hongbao.length>0" @refresh="refresh" @loadMore="loadMore" :loadingType="loadingType" :tPadding="0">
|
||||
<template slot="content">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<view>
|
||||
<view class="youhui-weiyong youhui-list" v-for="(item,index) in hongbao" :key="index">
|
||||
<view class="youhui-view-left">
|
||||
<view class="youhui-view-left-yuan">
|
||||
<span class="youhui-view-left-num">{{item.money}}</span>
|
||||
<span class="youhui-view-left-text">元</span>
|
||||
</view>
|
||||
<view class="youhui-view-left-bottom">
|
||||
满{{item.minMoney}}元可用
|
||||
</view>
|
||||
</view>
|
||||
<view class="youhui-view-right">
|
||||
<view class="youhui-view-right-top">
|
||||
<view class="youhui-view-right-title">{{item.couponName}}</view>
|
||||
<!-- <view class="youhui-view-right-time">{{item.endDate}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</checkbox-group>
|
||||
</template>
|
||||
</t-refresh>
|
||||
<view class="queding" @tap="shiYong()">
|
||||
<span class="que-btn">立即使用</span>
|
||||
</view>
|
||||
<empty v-if="hongbao.length==0"></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tRefresh from "@/components/t-refresh/t-refresh.vue"
|
||||
import empty from '@/components/empty.vue'
|
||||
export default {
|
||||
components:{
|
||||
empty,
|
||||
tRefresh
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tab: [{
|
||||
name: '可使用',
|
||||
state: 0
|
||||
}, {
|
||||
name: '已使用',
|
||||
state: 1
|
||||
}, {
|
||||
name: '已失效',
|
||||
state: 2
|
||||
}],
|
||||
tabIndex: 0,
|
||||
hongbao: [],
|
||||
page: 1,
|
||||
size: 10,
|
||||
loadingType: 0,
|
||||
scrollTop: false,
|
||||
contentText: {
|
||||
contentdown: '上拉显示更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了'
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getMyList();
|
||||
},
|
||||
methods: {
|
||||
shiYong(){
|
||||
var that=this;
|
||||
that.$Request.get('/app/coupon/insertNewUserCoupon').then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title:'抢购成功！'
|
||||
})
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
icon:'error',
|
||||
title:res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 加载更多
|
||||
loadMore: async function() {
|
||||
//loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
|
||||
if(this.loadingType==0){
|
||||
this.loadingType=2
|
||||
//模拟数据请求
|
||||
setTimeout(()=>{
|
||||
this.page++;
|
||||
this.loadingType=0;
|
||||
this.getData()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
|
||||
getMyList() {
|
||||
this.loadingType = 1;
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
this.$Request.getT('/app/coupon/selectNewUserCoupon?page='+this.page+'&limit='+this.size).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (this.page == 1) this.hongbao = []; //如果是第一页需手动制空列表
|
||||
this.hongbao = [...this.hongbao, ...res.data.list]; //追加新数据
|
||||
} else {
|
||||
this.loadingType = 2;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
bindTab(index) {
|
||||
this.tabIndex = index
|
||||
this.hongbao = [];
|
||||
this.page = 1;
|
||||
this.getMyList();
|
||||
}
|
||||
},
|
||||
onPageScroll: function(e) {
|
||||
this.scrollTop = e.scrollTop > 200;
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.page = this.page + 1;
|
||||
this.getMyList('');
|
||||
},
|
||||
onPullDownRefresh: function() {
|
||||
this.page = 1;
|
||||
this.getMyList('Refresh');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.que-btn{
|
||||
display: inline-block;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||
height: 38px;
|
||||
border-radius: 28px;
|
||||
color: #ffffff;
|
||||
line-height: 38px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
/deep/.page-box{
|
||||
width: 100%;
|
||||
}
|
||||
.youhui-img{
|
||||
width: 111.81rpx;
|
||||
height: 111.81rpx;
|
||||
}
|
||||
.queding{
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.youhui-view-right-time{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.youhui-view-right-title{
|
||||
width: 260rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.youhui-view-right-top{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.youhui-view-right{
|
||||
width: 502.08rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.youhui-view-left-bottom{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.youhui-view-left-yuan{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.youhui-view-left-num{
|
||||
font-weight: bold;
|
||||
font-size: 89rpx;
|
||||
}
|
||||
.youhui-view-left-text{
|
||||
font-weight: bold;
|
||||
font-size:24.31rpx;
|
||||
}
|
||||
.youhui-view-left{
|
||||
width: 199rpx;
|
||||
height: 242rpx;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.youhui-yiyong{
|
||||
background-image: url('../../static/youhuijuan/coupons7.png');
|
||||
}
|
||||
.youhui-weiyong{
|
||||
background-image: url('../../static/youhuijuan/coupons1.png');
|
||||
}
|
||||
.youhui-list{
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 242rpx;
|
||||
border-radius: 21rpx;
|
||||
background-size: 100%;
|
||||
margin: 10px auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.you-nav{
|
||||
background: #FFFFFF;
|
||||
padding: 14px 25px 0px 25px;
|
||||
}
|
||||
page {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 128upx;
|
||||
height: 60upx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 48px;
|
||||
height: 14rpx;
|
||||
background: linear-gradient(-48deg, #019C88, #2DC48E);
|
||||
border-radius: 7rpx;
|
||||
opacity: 0.35;
|
||||
position: relative;
|
||||
top: -7px;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tanColor {
|
||||
color: #019C88;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 140upx;
|
||||
height: 55upx;
|
||||
border: 2upx solid #FF130A;
|
||||
border-radius: 30upx;
|
||||
text-align: center;
|
||||
line-height: 55upx;
|
||||
color: #FF130A;
|
||||
font-size: 24upx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<view class="money-pay">
|
||||
<view class="money-pay-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{orderXm.price}}</span>
|
||||
<span>{{orderXm.price}}/次</span>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<view class="header-bottom-money" style="margin: 7px 0px; justify-content: space-between ">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{item.packagePrice}}</span>
|
||||
<span>{{item.packagePrice}}/次</span>
|
||||
</view>
|
||||
<view style="color: #019c88;">服务时长:{{item.duration}}分钟</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<view class="money-pay">
|
||||
<view class="money-pay-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{orderXm.price}}</span>
|
||||
<span>{{orderXm.price}}/次</span>
|
||||
</view>
|
||||
<view>
|
||||
<uni-number-box :width='27' :min="1" @change="changeValue" />
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<view class="header-bottom-money" style="margin: 7px 0px; justify-content: space-between ">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{item.packagePrice}}</span>
|
||||
<span>{{item.packagePrice}}/次</span>
|
||||
</view>
|
||||
|
||||
<view style="color: #019c88;">服务时长:{{item.duration}}分钟</view>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<view class="money-pay">
|
||||
<view class="money-pay-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{orderXm.price}}</span>
|
||||
<span>{{orderXm.price}}/套</span>
|
||||
</view>
|
||||
<view>
|
||||
<uni-number-box :width='27' :min="1" @change="changeValue" />
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<view class="header-bottom-money" style="margin: 7px 0px; justify-content: space-between ">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{item.packagePrice}}</span>
|
||||
<span>{{item.packagePrice}}/套</span>
|
||||
</view>
|
||||
<view style="color: #019c88;">服务时长:{{item.duration}}分钟</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<view class="money-pay">
|
||||
<view class="money-pay-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{orderXm.packagePrice}}</span>
|
||||
<span>{{orderXm.packagePrice}}/次</span>
|
||||
</view>
|
||||
<view>
|
||||
<uni-number-box :disabled="true" :width='27' :min="1" :value='1' @change="changeValue" />
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<view class="money-pay" style="width: 100%;justify-content: space-between;">
|
||||
<view class="money-pay-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{order.sumMoney}}</span>
|
||||
<span>{{order.sumMoney}}{{orderXm.type=='104'?'套':orderXm.type=='105'?'次':'次'}}</span>
|
||||
</view>
|
||||
<view>
|
||||
<uni-number-box :disabled="true" :value="order.ordersPackageList[0].num" :width='27' :min="1" @change="changeValue" />
|
||||
|
|
|
|||
20
pages.json
20
pages.json
|
|
@ -31,6 +31,17 @@
|
|||
}
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
"path": "pages/my/jIShiDateil",
|
||||
"style": {
|
||||
"navigationBarTitleText": "技师订单详情",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/videoCircle/index",
|
||||
"style": {
|
||||
|
|
@ -511,6 +522,15 @@
|
|||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "hongbao/xinrenhongbao",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新人红包",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "order/payModifyJsDetail",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
<image src="../../static/index-fenglei2.png" mode="widthFix"></image>
|
||||
<span class="feng_word">盛安技师</span>
|
||||
</view>
|
||||
<view class="index-project-content" @click="goNav()">
|
||||
<view class="index-project-content" @click="qidai()">
|
||||
<image src="../../static/index-fenglei3.png" mode="widthFix"></image>
|
||||
<span class="feng_word">招聘合作</span>
|
||||
</view>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<image src="../../static/index-fenglei10.png" mode="widthFix"></image>
|
||||
<span class="feng_word">充值赠送</span>
|
||||
</view>
|
||||
<view class="index-project-content" @click="goNav()">
|
||||
<view class="index-project-content" @click="qidai()">
|
||||
<image src="../../static/index-fenglei5.png" mode="widthFix"></image>
|
||||
<span class="feng_word">超值拼团</span>
|
||||
</view>
|
||||
|
|
@ -85,24 +85,24 @@
|
|||
<image src="../../static/index-fenglei6.png" mode="widthFix"></image>
|
||||
<span class="feng_word">服务疗程</span>
|
||||
</view>
|
||||
<view class="index-project-content" @click="goNav()">
|
||||
<view class="index-project-content" @click="qidai()">
|
||||
<image src="../../static/index-fenglei7.png" mode="widthFix"></image>
|
||||
<span class="feng_word">限时秒杀</span>
|
||||
</view>
|
||||
<view class="index-project-content" @click="goNav()">
|
||||
<view class="index-project-content" @click="qidai()">
|
||||
<image src="../../static/index-fenglei8.png" mode="widthFix"></image>
|
||||
<span class="feng_word">逛商城</span>
|
||||
</view>
|
||||
<view class="index-project-content" @click="goNav()">
|
||||
<view class="index-project-content" @click="qidai()">
|
||||
<image src="../../static/index-fenglei9.png" mode="widthFix"></image>
|
||||
<span class="feng_word">约到店</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-guanggao width">
|
||||
<image class="index-guanggao-pintuan" src="../../static/pintuan.png" mode="widthFix"></image>
|
||||
<image class="index-guanggao-pintuan" @click="qidai()" src="../../static/pintuan.png" mode="widthFix"></image>
|
||||
<view class="index-guanggao-right">
|
||||
<image class="index-guanggao-right-cika index-interval" @click="goNav('/pages/my/indextaociliaoList?type='+105+'&name='+'index')" src="../../static/cika.png" mode="widthFix"></image>
|
||||
<image class="index-guanggao-right-yuyue" src="../../static/yuyue.png" mode="widthFix"></image>
|
||||
<image class="index-guanggao-right-yuyue" @click="qidai()" src="../../static/yuyue.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-fujin">
|
||||
|
|
@ -488,6 +488,11 @@
|
|||
// }
|
||||
},
|
||||
methods: {
|
||||
qidai(){
|
||||
uni.showToast({
|
||||
title:'敬请期待！'
|
||||
})
|
||||
},
|
||||
getIsVip() {
|
||||
this.$Request.get("/app/UserVip/selectUserVip").then(res => {
|
||||
if (res.code == 0) {
|
||||
|
|
@ -655,19 +660,10 @@
|
|||
})
|
||||
},
|
||||
xinren(){//新人专享
|
||||
var that=this;
|
||||
that.$Request.get('/app/coupon/insertNewUserCoupon').then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title:'抢购成功！'
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
icon:'error',
|
||||
title:res.msg
|
||||
})
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:'/my/hongbao/xinrenhongbao'
|
||||
})
|
||||
|
||||
},
|
||||
goNavs(e){
|
||||
uni.switchTab({
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@
|
|||
<view class="header-bottom-money">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{getList.price}}</span>
|
||||
<span>{{getList.price}}/套</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
￥{{getList.oldPrice}}
|
||||
￥{{getList.oldPrice}}/套
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
}
|
||||
that.$Request.get('/app/massage/packageDetail/getAppPackageDetail',data).then(res => {
|
||||
if (res.code == 0) {
|
||||
that.getList=res.dat;
|
||||
that.getList=res.data;
|
||||
that.backgroundImageUrl=that.getList.massageImg
|
||||
that.labels=res.data.labels.split(',')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@
|
|||
<span class="my-head-mian-bottom-list-text">优惠券</span>
|
||||
</view>
|
||||
<view class="my-head-mian-bottom-list">
|
||||
<image src="../../static/my-juanma.png" mode="" @click="youhui()"></image>
|
||||
<image src="../../static/my-juanma.png" mode="" @click="qidai()"></image>
|
||||
<span class="my-head-mian-bottom-list-text">券码兑换</span>
|
||||
</view>
|
||||
<view class="my-head-mian-bottom-list">
|
||||
<image src="../../static/my-jifen.png" mode="" @click="youhui()"></image>
|
||||
<image src="../../static/my-jifen.png" mode="" @click="qidai()"></image>
|
||||
<span class="my-head-mian-bottom-list-text">积分兑换</span>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -172,6 +172,11 @@
|
|||
|
||||
},
|
||||
methods:{
|
||||
qidai(){
|
||||
uni.showToast({
|
||||
title:'敬请期待！'
|
||||
})
|
||||
},
|
||||
goChat() {
|
||||
let kefu = this.$queue.getData('kefu'); // 用户端联系方式 1 手机号 2企业微信
|
||||
let kefuPhone = this.$queue.getData('kefuPhone');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,542 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="header-top" :style="backgroundStyle" @click="goNav('/my/vip/index')">
|
||||
<image src="../../static/servicePackage/member_ba.png" mode="widthFix" v-if="!isVIP"></image>
|
||||
<image src="../../static/activate2.png" mode="widthFix" v-if="isVIP"></image>
|
||||
</view>
|
||||
<view class="header-bottom">
|
||||
<view class="header-bottom-top">
|
||||
<view class="header-bottom-title">
|
||||
<view class="header-bottom-title-text">
|
||||
<span class="header-bold">{{getList.title}}</span>
|
||||
<span class="header-bottom-title-liao">
|
||||
{{getList.classifyName}}
|
||||
</span>
|
||||
</view>
|
||||
<view class="header-bottom-title-num">
|
||||
<span>{{getList.sales}}</span>
|
||||
<span> 人选择</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="header-bottom-money-view">
|
||||
<view class="header-bottom-money">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{getList.price}}</span>
|
||||
<span>元/套</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
￥{{getList.oldPrice}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-bottom-money-view">
|
||||
服务时长：{{getList.duration}}分钟
|
||||
</view>
|
||||
<view class="header-bottom-title-bottom" v-if="dataList.titleNmae=='服务疗程'">
|
||||
<image src="../../static/my-cika.png" mode=""></image>
|
||||
<span>30天一疗程，每隔三天一次</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-bottom-foot">
|
||||
<view class="header-bottom-foot-cont">
|
||||
<view class="header-fubz">保障</view>
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
|
||||
<span>未服务全额退款</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view" style="margin: 0px 7px;">
|
||||
<image class="header-bottom-foot-view-img2" src="../../static/servicePackage/money.png" mode=""></image>
|
||||
<span>不满意重做</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
|
||||
<span>最快30分钟上门</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-foot">
|
||||
<view class="detail-foot-nav">
|
||||
<span class="detail-foot-nav-text">适用说明</span>
|
||||
<span class="detail-foot-nav-bor"></span>
|
||||
</view>
|
||||
<view class="detail-foot-mian">
|
||||
<view class="detail-foot-mian-top">
|
||||
<span class="detail-foot-mian-top-title header-bold">性别限制: </span>
|
||||
<span class="detail-foot-mian-top-text">不限性别</span>
|
||||
</view>
|
||||
<view class="detail-foot-mian-top-bottom">
|
||||
<span class="detail-foot-mian-top-title header-bold">适应人群: </span>
|
||||
<span class="detail-foot-mian-top-text">
|
||||
{{getList.applyPeople}}
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-foot">
|
||||
<view class="detail-foot-nav">
|
||||
<span class="detail-foot-nav-text">项目详情</span>
|
||||
<span class="detail-foot-nav-bor"></span>
|
||||
</view>
|
||||
<view class="detail-foot-mian">
|
||||
<image class="detail-foot-mian-img" v-for="(item,index) in contentImg" :key="index" :src="item" mode="widthFix"></image>
|
||||
<view class="lab-view">
|
||||
<view class="detail-foot-mian-txet" v-for="item in labels" :key="item">
|
||||
<span class="detail-foot-mian-txetList">{{item}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-btn" v-if="getList.status=='1'" @click="goumai(getList)">
|
||||
立即预约
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
getList:[],
|
||||
isVIP:false,
|
||||
// 背景图片的URL可以是动态的，比如从API获取或根据条件生成
|
||||
backgroundImageUrl: '',
|
||||
myId:'',
|
||||
contentImg:[],
|
||||
labels:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
backgroundStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.backgroundImageUrl})`,
|
||||
backgroundSize: 'cover', // 根据需要调整
|
||||
};
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
var that=this;
|
||||
that.dataList=e;
|
||||
that.isVIP=this.$queue.getData('isVIP');
|
||||
that.myId = uni.getStorageSync('userId');
|
||||
that.getData()
|
||||
},
|
||||
methods:{
|
||||
goNav(e) {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
})
|
||||
},
|
||||
goumai(item){//立即购买
|
||||
this.$queue.setData('userPackageDetailId','');
|
||||
this.$queue.setData('ordersId',this.dataList.id);
|
||||
uni.navigateTo({
|
||||
url: "/my/order/payModifyJsDetail?ordersId="+this.dataList.id
|
||||
})
|
||||
},
|
||||
getData(){
|
||||
var that=this;
|
||||
let data = {
|
||||
userId: that.myId,
|
||||
limit: that.dataList.limit,
|
||||
mainId: that.dataList.mainId,
|
||||
massageTypeId:that.dataList.id,
|
||||
page:that.dataList.page,
|
||||
}
|
||||
that.$Request.get('/app/artificer/selectMassageTypeById', data).then(res => {
|
||||
if (res.code == 0) {
|
||||
that.getList=res.data;
|
||||
that.contentImg=res.data.contentImg.split(",");
|
||||
that.backgroundImageUrl=that.getList.massageImg;
|
||||
that.labels=that.getList.labels.split(',');
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.lab-view{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.detail-foot-mian-txet{
|
||||
width: 50%;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.header-fubz{
|
||||
font-size: 26rpx;
|
||||
color: #029c88;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-bottom-title-liao{
|
||||
display: inline-block;
|
||||
padding: 3px 7px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
|
||||
border-radius: 7px;
|
||||
margin-left: 5px;
|
||||
font-size: 11px;
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
}
|
||||
.detail-btn{
|
||||
width:95%;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||
border-radius: 46rpx;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.detail-foot-mian-txet span:nth-child(1){
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.detail-foot-mian-txet span:nth-child(2){
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.detail-foot-mian-txet span:nth-child(3){
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.detail-foot-mian-txet{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.detail-foot-mian-img{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
}
|
||||
.detail-foot-mian-top-bottom{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.detail-foot-mian-top-title{
|
||||
color: #333333;
|
||||
}
|
||||
.detail-foot-mian-top-text{
|
||||
color: #777777;
|
||||
width:80%;
|
||||
margin-left: 5px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.detail-foot-mian-top,.detail-foot-mian-top-bottom{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.header-bottom-title-bottom span{
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
color: #20AB95;
|
||||
}
|
||||
.header-bottom-title-bottom image{
|
||||
width: 34.03rpx;
|
||||
height: 30.56rpx;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.header-bottom-title-bottom{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.shouc image{
|
||||
width: 34.03rpx;
|
||||
height: 32.64rpx;
|
||||
}
|
||||
|
||||
.shouc{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.detail-foot-nav-bor{
|
||||
width: 64px;
|
||||
height: 11rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,rgba(55, 182, 157,0.7),rgba(132, 211, 196,0.7));
|
||||
}
|
||||
.detail-foot-nav-text{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.detail-foot-nav{
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.detail-foot{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.tese span:nth-child(1){
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.tese span:nth-child(2){
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #8D9194;
|
||||
}
|
||||
.tese{
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(1){
|
||||
font-weight: bold;
|
||||
font-size: 31rpx;
|
||||
color: #3F3F3F;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(2){
|
||||
width: 76rpx;
|
||||
height: 33rpx;
|
||||
line-height: 33rpx;
|
||||
text-align: center;
|
||||
border-radius: 16rpx;
|
||||
border: 1px solid #7D7D7D;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #777777;
|
||||
margin: 0px 25px 0px 5px;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(3){
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.detail-foot-mian{
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 21rpx;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.jianjie{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #8D9194;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.header-bottom-mian{
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.header-bottom-mian-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.header-bottom-mian-title span{
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #20AB95;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-mian-title image{
|
||||
width: 30.56rpx;
|
||||
height: 29.86rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img1{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img2{
|
||||
width: 23rpx;
|
||||
height: 23rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img3{
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.header-bottom-foot-view image{
|
||||
margin-right: 1px;
|
||||
}
|
||||
.header-bottom-foot-view{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1px 8px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(230, 246, 243, 1);
|
||||
border-radius: 15px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #029c88;
|
||||
}
|
||||
.header-bottom-foot-title{
|
||||
width:100%;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 23rpx;
|
||||
color: #029d88;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.header-bottom-foot-cont{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-bottom-foot{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.header-bottom-money-jia{
|
||||
font-size: 28rpx;
|
||||
color: #848484;
|
||||
line-height: 37rpx;
|
||||
text-decoration-line: line-through;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-money-zhen span{
|
||||
color: #F95900;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(1){
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(2){
|
||||
font-size:45.81rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(3){
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.header-bottom-money-zhen{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.header-bottom-money-view{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top:5px;
|
||||
}
|
||||
.header-bottom-money{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.header-bottom-title-num span{
|
||||
font-weight: bold;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.header-bottom-title-num span:nth-child(1){
|
||||
color: #08A28A;
|
||||
}
|
||||
.header-bottom-title-num span:nth-child(2){
|
||||
color: #848485;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-title-text{
|
||||
font-size: 35rpx;
|
||||
color: #13141A;
|
||||
}
|
||||
.header-bold{
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-bottom-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-bottom-top{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header-bottom{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header-top image{
|
||||
width: 706.25rpx;
|
||||
height: 105.07rpx;
|
||||
}
|
||||
.header-top{
|
||||
width: 100%;
|
||||
height: 745.83rpx;
|
||||
background-image: url('../../static/servicePackage/display.png');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<span>元/次</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia" style="text-decoration: line-through;">
|
||||
￥{{getList.oldPrice}}
|
||||
￥{{getList.oldPrice}}/次
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -77,10 +77,10 @@
|
|||
</view>
|
||||
<view class="detail-foot-mian">
|
||||
<image class="detail-foot-mian-img" :src="getList.contentImg" mode="widthFix"></image>
|
||||
<view class="detail-foot-mian-txet">
|
||||
<span>SCIENTIFIC WAIST</span>
|
||||
<span>科学护腰，不上脊椎</span>
|
||||
<span>让您的腰不在盲目呵护!避免二次伤害!</span>
|
||||
<view class="lab-view">
|
||||
<view class="detail-foot-mian-txet" v-for="item in labels" :key="item">
|
||||
<span class="detail-foot-mian-txetList">{{item}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
backgroundImageUrl: '',
|
||||
page:1,
|
||||
limit:10,
|
||||
|
||||
labels:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -152,7 +152,8 @@
|
|||
that.$Request.get('/app/user/package/detail/getMyPackageDetail', data).then(res => {
|
||||
if (res.code == 0) {
|
||||
that.getList=res.data;
|
||||
that.backgroundImageUrl=that.getList.massageImg
|
||||
that.backgroundImageUrl=that.getList.massageImg;
|
||||
that.labels=that.getList.labels.split(',');
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -160,6 +161,13 @@
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.lab-view{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.dingdan-btn{
|
||||
text-align: center;
|
||||
width: 62px;
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
<view class="header-bottom-money">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{mainData.price}}</span>
|
||||
<span>{{mainData.price}}/套</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
￥{{mainData.oldPrice}}
|
||||
￥{{mainData.oldPrice}}/套
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -71,10 +71,10 @@
|
|||
<view class="header-bottom-money" style="margin: 7px 0px; justify-content: space-between ">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{item.price}}</span>
|
||||
<span>{{item.price}}/套</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia" style="margin-left: 20px; ">
|
||||
￥{{item.oldPrice}}
|
||||
￥{{item.oldPrice}}/套
|
||||
</view>
|
||||
<view style="color: #019c88;">服务时长:{{item.duration}}分钟</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@
|
|||
</view>
|
||||
<view class="xiangmu-foot-left-dazhe">{{item.oldPrice}}</view>
|
||||
</view>
|
||||
<view class="xiadan">
|
||||
<view class="xiadan" @click.stop="goNavDing(item)">
|
||||
预约
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -539,7 +539,7 @@
|
|||
}
|
||||
this.isPlay = !this.isPlay;
|
||||
},
|
||||
goNav(massageTypeId,classifyId) {
|
||||
goNavDing(item) {
|
||||
if (this.status == 2) {
|
||||
uni.showToast({
|
||||
title: '技师已下线',
|
||||
|
|
@ -547,19 +547,41 @@
|
|||
})
|
||||
} else {
|
||||
var data={
|
||||
massageTypeId:massageTypeId.massageTypeId,
|
||||
massageTypeId:item.massageTypeId,
|
||||
tripWay:this.order.tripWay,
|
||||
artificerId:this.order.artificerId,
|
||||
artificerName:this.order.artificerName
|
||||
}
|
||||
this.$queue.setData('youhui','');
|
||||
this.$queue.setData('getJishi',data)
|
||||
this.$queue.setData('xiangmu',massageTypeId)
|
||||
this.$queue.setData('xiangmu',item)
|
||||
uni.navigateTo({
|
||||
url: "/my/order/payModifyJsDetail"
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
goNav(item) {
|
||||
if (this.status == 2) {
|
||||
uni.showToast({
|
||||
title: '技师已下线',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
var data={
|
||||
massageTypeId:item.massageTypeId,
|
||||
tripWay:this.order.tripWay,
|
||||
artificerId:this.order.artificerId,
|
||||
artificerName:this.order.artificerName
|
||||
}
|
||||
this.$queue.setData('youhui','');
|
||||
this.$queue.setData('getJishi',data)
|
||||
this.$queue.setData('xiangmu',item)
|
||||
uni.navigateTo({
|
||||
url:'/pages/my/jIShiDateil?id='+item.massageTypeId+'&limit='+this.limit+'&page='+this.page
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
goMsg() {
|
||||
let data = {
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
</view>
|
||||
<u-popup v-model="showPopup" mode="bottom" height="" closeable :mask-close-able="false">
|
||||
<view id="popView">
|
||||
<view class="flex align-center list-view" style="padding: 0px;">
|
||||
<view class="flex align-center list-view" style="padding: 0px;" @click="goOrder(getOrderByCurrentMarkerIndex())">
|
||||
<view class="touxiang-left-view" style="margin-bottom: 0px;padding-bottom: 0px;width: auto;">
|
||||
<image
|
||||
class="touxiang-left-content-img"
|
||||
|
|
@ -1231,6 +1231,7 @@ import permision from "@/components/permission.js";
|
|||
}
|
||||
/deep/.u-drawer-content-visible{
|
||||
z-index:99 !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.item-view-jianjie{
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -103,12 +103,12 @@
|
|||
// #ifndef MP-WEIXIN
|
||||
query = uni.createSelectorQuery()
|
||||
// #endif
|
||||
query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
|
||||
this.windowHeight = res[0][0].height;
|
||||
this.windowWinth = res[0][0].width;
|
||||
this.top = res[0][0].bottom - res[0][0].height;
|
||||
this.left = res[0][0].left;
|
||||
});
|
||||
// query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
|
||||
// this.windowHeight = res[0][0].height;
|
||||
// this.windowWinth = res[0][0].width;
|
||||
// this.top = res[0][0].bottom - res[0][0].height;
|
||||
// this.left = res[0][0].left;
|
||||
// });
|
||||
// 矩形骨架元素
|
||||
this.getRectEls();
|
||||
// 圆形骨架元素
|
||||
|
|
|
|||
Loading…
Reference in New Issue