This commit is contained in:
parent
ebaad2051f
commit
72c6cd95cc
|
|
@ -0,0 +1,190 @@
|
||||||
|
<template>
|
||||||
|
<view class="comment_item">
|
||||||
|
<view class="top">
|
||||||
|
<view class="top_left">
|
||||||
|
<img class="user_avatar" :src="data.user_avatar" />
|
||||||
|
<uni-tag
|
||||||
|
v-if="data.owner"
|
||||||
|
class="tag"
|
||||||
|
type="primary"
|
||||||
|
:inverted="false"
|
||||||
|
text="作者"
|
||||||
|
size="mini"
|
||||||
|
circle
|
||||||
|
/>
|
||||||
|
<span class="user_name">{{ data.user_name }}</span>
|
||||||
|
<span class="user_name">{{ cReplyName }}</span>
|
||||||
|
</view>
|
||||||
|
<view class="top_right" @tap="likeClick(data)">
|
||||||
|
<span :class="[data.is_like ? 'active' : '', 'like_count']">{{
|
||||||
|
cLikeCount
|
||||||
|
}}</span>
|
||||||
|
<uni-icons
|
||||||
|
v-show="data.is_like"
|
||||||
|
type="hand-up-filled"
|
||||||
|
size="24"
|
||||||
|
color="#007aff"
|
||||||
|
></uni-icons>
|
||||||
|
<uni-icons
|
||||||
|
v-show="!data.is_like"
|
||||||
|
type="hand-up"
|
||||||
|
size="24"
|
||||||
|
color="#999"
|
||||||
|
></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content" @tap="replyClick(data)">
|
||||||
|
{{ c_content }}
|
||||||
|
<span
|
||||||
|
class="shrink"
|
||||||
|
v-if="isShrink"
|
||||||
|
@tap.stop="expandContentFun(data.user_content)"
|
||||||
|
>...展开</span
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="bottom">
|
||||||
|
<span class="create_time">{{ data.create_time }}</span>
|
||||||
|
<span
|
||||||
|
v-if="data.owner"
|
||||||
|
class="delete"
|
||||||
|
@tap="deleteClick(data)"
|
||||||
|
>删除</span
|
||||||
|
>
|
||||||
|
<!-- <span v-else class="reply" @tap="replyClick(data)"
|
||||||
|
>回复</span> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
pData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShrink: this.data.user_content.length > 70,
|
||||||
|
c_content: this.data.user_content.length > 70 ? this.data.user_content.slice(0, 71) : this.data.user_content
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cReplyName() {
|
||||||
|
return this.data.reply_name ? ` ▸ ` + this.data.reply_name : "";
|
||||||
|
},
|
||||||
|
cLikeCount() {
|
||||||
|
return this.data.like_count === 0
|
||||||
|
? ""
|
||||||
|
: this.data.like_count > 99
|
||||||
|
? `99+`
|
||||||
|
: this.data.like_count;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log("回复名字为：" ,this.data);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 展开评论
|
||||||
|
expandContentFun() {
|
||||||
|
this.isShrink = false;
|
||||||
|
},
|
||||||
|
// 点赞
|
||||||
|
likeClick(item) {
|
||||||
|
this.$emit("likeClick", item);
|
||||||
|
},
|
||||||
|
// 回复
|
||||||
|
replyClick(item) {
|
||||||
|
|
||||||
|
// 自己不能回复自己
|
||||||
|
// if (item.owner) return;
|
||||||
|
this.$emit("replyClick", item);
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteClick(item) {
|
||||||
|
this.$emit("deleteClick", item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
////////////////////////
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ellipsis {
|
||||||
|
overflow: hidden; //超出文本隐藏
|
||||||
|
white-space: nowrap; //溢出不换行
|
||||||
|
text-overflow: ellipsis; //溢出省略号显示
|
||||||
|
}
|
||||||
|
////////////////////////
|
||||||
|
.comment_item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
.top {
|
||||||
|
@extend .center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.top_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
.user_avatar {
|
||||||
|
width: 68rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
.user_name {
|
||||||
|
@extend .ellipsis;
|
||||||
|
max-width: 180rpx;
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top_right {
|
||||||
|
@extend .center;
|
||||||
|
.like_count {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
&.active {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 10rpx;
|
||||||
|
margin-left: 70rpx;
|
||||||
|
color: $uni-text-color;
|
||||||
|
&:active {
|
||||||
|
background-color: $uni-bg-color-hover;
|
||||||
|
}
|
||||||
|
.shrink {
|
||||||
|
padding: 20rpx 20rpx 20rpx 0rpx;
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
padding-left: 80rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
.create_time {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
}
|
||||||
|
.delete {
|
||||||
|
padding: 20rpx 20rpx 0 20rpx;
|
||||||
|
color: $uni-border-color;
|
||||||
|
}
|
||||||
|
.reply {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,400 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="c_total">评论 {{ tableTotal }}</view>
|
||||||
|
<template v-if="dataList && dataList.length">
|
||||||
|
<view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id">
|
||||||
|
<!-- 一级评论 -->
|
||||||
|
<CommonComp
|
||||||
|
:data="item1"
|
||||||
|
@likeClick="() => likeClick({ item1, index1 })"
|
||||||
|
@replyClick="() => replyClick({ item1, index1 })"
|
||||||
|
@deleteClick="() => deleteClick({ item1, index1 })"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
class="children_item"
|
||||||
|
v-if="item1.children && item1.children.length"
|
||||||
|
>
|
||||||
|
<!-- 二级评论 -->
|
||||||
|
<CommonComp
|
||||||
|
v-for="(item2, index2) in item1.childrenShow"
|
||||||
|
:key="item2.id"
|
||||||
|
:data="item2"
|
||||||
|
:pData="item1"
|
||||||
|
@likeClick="() => likeClick({ item1, index1, item2, index2 })"
|
||||||
|
@replyClick="() => replyClick({ item1, index1, item2, index2 })"
|
||||||
|
@deleteClick="() => deleteClick({ item1, index1, item2, index2 })"
|
||||||
|
/>
|
||||||
|
<!-- 展开折叠的二级评论 -->
|
||||||
|
<view
|
||||||
|
class="expand_reply"
|
||||||
|
v-if="expandTxtShow({ item1, index1 })"
|
||||||
|
@tap="() => expandReplyFun({ item1, index1 })"
|
||||||
|
>
|
||||||
|
<span class="txt">
|
||||||
|
展开{{ item1.children.length - item1.childrenShow.length }}条回复
|
||||||
|
</span>
|
||||||
|
<uni-icons type="down" size="24" color="#007aff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<!-- 空盒子 -->
|
||||||
|
<view class="empty_box" v-else>
|
||||||
|
<uni-icons type="chatboxes" size="36" color="#c0c0c0"></uni-icons>
|
||||||
|
<view>
|
||||||
|
<span class="txt"> 这里是一片荒草地, </span>
|
||||||
|
<span class="txt click" @click="() => newCommentFun()">说点什么...</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 评论弹窗 -->
|
||||||
|
<uni-popup ref="cPopupRef" type="bottom" @change="popChange">
|
||||||
|
<view class="c_popup_box">
|
||||||
|
<view class="reply_text">
|
||||||
|
<template v-if="Object.keys(replyTemp).length">
|
||||||
|
<span class="text_aid">回复给</span>
|
||||||
|
<span class="text_main">{{
|
||||||
|
replyTemp.item1.item2
|
||||||
|
? replyTemp.item1.item2.user_name
|
||||||
|
: replyTemp.item1.item1.user_name
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
<span v-else class="text_main">发表新评论</span>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="text_area">
|
||||||
|
<uni-easyinput
|
||||||
|
class="text_area"
|
||||||
|
type="textarea"
|
||||||
|
v-model="commentValue"
|
||||||
|
:placeholder="commentPlaceholder"
|
||||||
|
:focus="focus"
|
||||||
|
trim
|
||||||
|
autoHeight
|
||||||
|
maxlength="300"
|
||||||
|
></uni-easyinput>
|
||||||
|
</view>
|
||||||
|
<view class="send_btn" @tap="() => sendClick()">发送</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
<!-- 删除弹窗 -->
|
||||||
|
<uni-popup ref="delPopupRef" type="dialog">
|
||||||
|
<uni-popup-dialog
|
||||||
|
mode="base"
|
||||||
|
title=""
|
||||||
|
content="确定删除这条评论吗?"
|
||||||
|
:before-close="true"
|
||||||
|
@close="delCloseFun"
|
||||||
|
@confirm="delConfirmFun"
|
||||||
|
></uni-popup-dialog>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CommonComp from "./componets/common";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CommonComp
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
userInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
tableTotal: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
deleteMode: {
|
||||||
|
type: String,
|
||||||
|
default: "all"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList: [],
|
||||||
|
replyTemp: {},
|
||||||
|
isNewComment: false,
|
||||||
|
focus: false,
|
||||||
|
commentValue: "",
|
||||||
|
commentPlaceholder: "说点什么...",
|
||||||
|
delTemp: {},
|
||||||
|
index:0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
tableData: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal.length !== this.dataList.length) {
|
||||||
|
this.dataList = this.treeTransForm(newVal);
|
||||||
|
console.log("this.dataList:",this.dataList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
treeTransForm(data) {
|
||||||
|
let newData = JSON.parse(JSON.stringify(data));
|
||||||
|
let result = [];
|
||||||
|
let map = {};
|
||||||
|
newData.forEach((item, i) => {
|
||||||
|
item.owner = item.id === this.userInfo.id;
|
||||||
|
map[item.id] = item;
|
||||||
|
});
|
||||||
|
newData.forEach((item) => {
|
||||||
|
let parent = map[item.parent_id];
|
||||||
|
if (parent) {
|
||||||
|
(parent.children || (parent.children = [])).push(item);
|
||||||
|
if (parent.children.length === 1) {
|
||||||
|
(parent.childrenShow = []).push(item);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
result.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
setLike(item) {
|
||||||
|
item.is_like = !item.is_like;
|
||||||
|
item.like_count = item.is_like ? item.like_count + 1 : item.like_count - 1;
|
||||||
|
},
|
||||||
|
likeClick({ item1, index1, item2, index2 }) {
|
||||||
|
let item = item2 || item1;
|
||||||
|
this.setLike(item);
|
||||||
|
this.$emit("likeFun", { params: item }, (res) => {
|
||||||
|
this.setLike(item);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
replyClick(item1, index1, item2, index2) {
|
||||||
|
this.replyTemp = JSON.parse(JSON.stringify({ item1, index1, item2, index2 }));
|
||||||
|
console.log(this.replyTemp,"===========");
|
||||||
|
this.$refs.cPopupRef.open();
|
||||||
|
},
|
||||||
|
newCommentFun() {
|
||||||
|
this.isNewComment = true;
|
||||||
|
this.$refs.cPopupRef.open();
|
||||||
|
},
|
||||||
|
popChange(e) {
|
||||||
|
if (!e.show) {
|
||||||
|
this.commentValue = "";
|
||||||
|
this.replyTemp = {};
|
||||||
|
this.isNewComment = false;
|
||||||
|
}
|
||||||
|
this.focus = e.show;
|
||||||
|
},
|
||||||
|
sendClick() {
|
||||||
|
let { item1, index1, item2, index2 } = this.replyTemp;
|
||||||
|
let item = item2 || item1;
|
||||||
|
console.log(item);
|
||||||
|
let params = {};
|
||||||
|
if (this.isNewComment) {
|
||||||
|
params.id = Math.random();
|
||||||
|
params.parent_id = null;
|
||||||
|
params.reply_id = null;
|
||||||
|
params.reply_name = null;
|
||||||
|
} else {
|
||||||
|
params.id= Math.random(),
|
||||||
|
params.parent_id = item.item1?.parent_id ?? item.item1.id,
|
||||||
|
params.reply_id = item.item1.id,
|
||||||
|
params.reply_name = item.item2 ? item.item2.user_name : item.item1.user_name
|
||||||
|
|
||||||
|
}
|
||||||
|
params = {
|
||||||
|
...params,
|
||||||
|
user_name: this.userInfo.user_name,
|
||||||
|
user_avatar: this.userInfo.user_avatar,
|
||||||
|
user_content: this.commentValue,
|
||||||
|
is_like: false,
|
||||||
|
like_count: 0,
|
||||||
|
create_time: "刚刚",
|
||||||
|
owner: true
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("params: ",params);
|
||||||
|
|
||||||
|
uni.showLoading({
|
||||||
|
title: "正在发送",
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
|
this.$emit("replyFun", { params }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
params = { ...params, id: res.id };
|
||||||
|
if (this.isNewComment) {
|
||||||
|
this.dataList.push(params);
|
||||||
|
} else {
|
||||||
|
console.log(this.dataList);
|
||||||
|
let c_data = this.dataList[item.index1];
|
||||||
|
(c_data.children || (c_data.children = [])).push(params);
|
||||||
|
if (
|
||||||
|
c_data.children.length === (c_data.childrenShow || (c_data.childrenShow = [])).length + 1
|
||||||
|
) {
|
||||||
|
c_data.childrenShow.push(params);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal + 1);
|
||||||
|
this.$refs.cPopupRef.close();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteClick(item1, index1, item2, index2) {
|
||||||
|
this.delTemp = JSON.parse(JSON.stringify({ item1, index1, item2, index2 }));
|
||||||
|
this.$refs.delPopupRef.open();
|
||||||
|
},
|
||||||
|
delCloseFun() {
|
||||||
|
this.delTemp = {};
|
||||||
|
this.$refs.delPopupRef.close();
|
||||||
|
},
|
||||||
|
delConfirmFun({ item1, index1, item2, index2 } = this.delTemp) {
|
||||||
|
let c_data = this.dataList[index1];
|
||||||
|
uni.showLoading({
|
||||||
|
title: "正在删除",
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
|
if (index2 >= 0) {
|
||||||
|
this.$emit("deleteFun", { params: [c_data.children[index2].id] }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - 1);
|
||||||
|
c_data.children.splice(index2, 1);
|
||||||
|
c_data.childrenShow.splice(index2, 1);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (c_data.children && c_data.children.length) {
|
||||||
|
switch (this.deleteMode) {
|
||||||
|
case "bind":
|
||||||
|
c_data.user_content = "当前评论内容已被移除";
|
||||||
|
break;
|
||||||
|
case "only":
|
||||||
|
this.$emit("deleteFun", {
|
||||||
|
mode: this.deleteMode,
|
||||||
|
params: [c_data.id]
|
||||||
|
}, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
|
||||||
|
this.dataList.splice(index1, 1);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
let delIdArr = [c_data.id];
|
||||||
|
c_data.children.forEach((_, i) => {
|
||||||
|
delIdArr.push(_.id);
|
||||||
|
});
|
||||||
|
this.$emit("deleteFun", { params: delIdArr, mode: this.deleteMode }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
|
||||||
|
this.dataList.splice(index1, 1);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$emit("deleteFun", { params: [c_data.id] }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - 1);
|
||||||
|
this.dataList.splice(index1, 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.delCloseFun();
|
||||||
|
},
|
||||||
|
expandTxtShow(item1, index1) {
|
||||||
|
return (
|
||||||
|
item1.childrenShow &&
|
||||||
|
item1.childrenShow.length &&
|
||||||
|
item1.children.length - item1.childrenShow.length
|
||||||
|
);
|
||||||
|
},
|
||||||
|
expandReplyFun(item1, index1) {
|
||||||
|
let csLen = this.dataList[index1].childrenShow.length;
|
||||||
|
this.dataList[index1].childrenShow.push(
|
||||||
|
...this.dataList[index1].children.slice(csLen, csLen + 6)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
////////////////////////
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
////////////////////////
|
||||||
|
.c_total {
|
||||||
|
padding: 20rpx 30rpx 0 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.empty_box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 150rpx 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
.txt {
|
||||||
|
color: $uni-text-color-disable;
|
||||||
|
}
|
||||||
|
.click {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.c_comment {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
.children_item {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-left: 80rpx;
|
||||||
|
// background-color: $uni-bg-color-grey;
|
||||||
|
.expand_reply {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-left: 80rpx;
|
||||||
|
.txt {
|
||||||
|
font-weight: 600;
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.c_popup_box {
|
||||||
|
background-color: #fff;
|
||||||
|
.reply_text {
|
||||||
|
@extend .center;
|
||||||
|
padding: 20rpx 20rpx 0 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
.text_aid {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
.text_main {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
@extend .center;
|
||||||
|
.text_area {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.send_btn {
|
||||||
|
@extend .center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: $uni-color-primary;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,238 @@
|
||||||
|
# 环境
|
||||||
|
|
||||||
|
基于vue2和uni-ui开发;
|
||||||
|
|
||||||
|
小程序调试基础库: 3.3.0
|
||||||
|
|
||||||
|
# 场景
|
||||||
|
|
||||||
|
即拿即用, 组件有详细注释内容, 方便二次开发;
|
||||||
|
目前在app-vue和小程序使用, 其他平台能否使用请评论留言反馈谢谢, 祝大家使用愉快.
|
||||||
|
|
||||||
|
# 附言
|
||||||
|
|
||||||
|
主要是插件市场没找到满意的vue2版本, 诸多用着也不顺, 所以有了XJ-comment, 如有Bug请留言或Email, 开源不易且用且珍惜, 感谢使用.
|
||||||
|
|
||||||
|
|
||||||
|
# 功能
|
||||||
|
|
||||||
|
#### 已实现
|
||||||
|
|
||||||
|
* 无评论显示占位场景 √
|
||||||
|
* 显示评论数量(新增和删除动态更新数量) √
|
||||||
|
* 发起新评论 √
|
||||||
|
* 点击评论内容回复 √
|
||||||
|
* 回复一级评论 √
|
||||||
|
* 回复二级评论 √
|
||||||
|
* 展开超长评论内容 √
|
||||||
|
* 能回复自身评论 √
|
||||||
|
* 删除 √
|
||||||
|
* 仅可删除自身评论 √
|
||||||
|
* 可选三类删除模式 √
|
||||||
|
* 点赞 √
|
||||||
|
* 点赞大于100显示99+ √
|
||||||
|
|
||||||
|
#### 待实现
|
||||||
|
|
||||||
|
* 图片上传 ×
|
||||||
|
|
||||||
|
有其他需求的评论区留言
|
||||||
|
|
||||||
|
# :props 属性
|
||||||
|
|
||||||
|
| 属性名 | 说明 | 类型 | 默认值 | 必填 | 说明 |
|
||||||
|
| -------- | -------- | -------- |-------- |-------- |-------- |
|
||||||
|
| ref | 实例 | Object | - | true | |
|
||||||
|
| tableData | 评论列表 | Array | [ ] | true | |
|
||||||
|
| tableTotal | 评论总数 | Number | 0 | true | |
|
||||||
|
| deleteMode | 评论删除模式 | String | all | false | bind-当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除] only-仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对) all-删除所有评论包括回复评论 |
|
||||||
|
|
||||||
|
# @event 事件
|
||||||
|
|
||||||
|
| 属性名 | 说明 | 参数 | 说明 |
|
||||||
|
| -------- | -------- | -------- |-------- |
|
||||||
|
| likeClick | 点赞事件 | {{params}, callback} | { params: 评论id }, callback回调函数, 请求后端接口后调用, 执行后续逻辑 |
|
||||||
|
| replyClick | 回复事件 | {{params}, callback} | { params: 评论参数 }, callback回调函数, 请求后端接口后调用, 执行后续逻辑 |
|
||||||
|
| deleteClick | 删除事件 | {{params, mode}, callback} | { params: 评论数组id, mode: 删除模式[all, bind, only] }, callback回调函数, 请求后端接口后调用, 执行后续逻辑 |
|
||||||
|
|
||||||
|
# $ref 实例可调用属性&事件
|
||||||
|
|
||||||
|
| 属性名 | 说明 | 回调参数 | 说明 | 平台差异说明 |
|
||||||
|
| -------- | -------- | -------- |-------- |-------- |
|
||||||
|
| newCommentFun | 发起新评论 | - | event | - |
|
||||||
|
|
||||||
|
# 数据说明
|
||||||
|
|
||||||
|
```javascript=
|
||||||
|
// 用户信息
|
||||||
|
type userInfoKeys = {
|
||||||
|
|
||||||
|
id: number // 用户id
|
||||||
|
user_name: string // 用户名
|
||||||
|
user_avatar: string // 用户头像地址
|
||||||
|
|
||||||
|
}
|
||||||
|
// 评论表
|
||||||
|
type tableDataKeys = {
|
||||||
|
|
||||||
|
id: number // 评论id
|
||||||
|
parent_id: number // 父级评论id
|
||||||
|
reply_id: number // 被回复人评论id
|
||||||
|
reply_name: string // 被回复人名称
|
||||||
|
user_name: string // 用户名
|
||||||
|
user_avatar: string // 评论者头像地址
|
||||||
|
user_content: string // 评论内容
|
||||||
|
is_like: boolean // 是否点赞
|
||||||
|
like_count: number // 点赞数统计
|
||||||
|
create_time: string // 创建时间
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
# 使用方法
|
||||||
|
```javascript=
|
||||||
|
// 复制整页代码配合下载的插件, 可正常运作(提示: 注意uni-ui版本, 可能uni-ui不同版本的$变量不一致, 自行配置颜色即可)
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<CComment ref="ccRef" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
|
||||||
|
<div class="btn" @click="openComment">发一条新评论</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CComment from "@/components/XJ-comment/index";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CComment
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ccRef: null,
|
||||||
|
userInfo: {
|
||||||
|
id: 120,
|
||||||
|
user_name: "🍁",
|
||||||
|
user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
|
||||||
|
},
|
||||||
|
tableTotal: 4,
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
id: 120,
|
||||||
|
parent_id: null,
|
||||||
|
reply_id: null,
|
||||||
|
reply_name: null,
|
||||||
|
user_name: "🍁",
|
||||||
|
user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
|
||||||
|
user_content: "我是一名类风湿性关节炎的患者。第一次发病时2019年，27岁。期初我的症状是手指关节和脚趾关节红肿，后来膝盖红肿，手腕关节肿。不到半年，我就出现了晨僵，全身关节疼痛，遇冷疼，劳累疼，刮风下雨疼。",
|
||||||
|
is_like: false,
|
||||||
|
like_count: 120,
|
||||||
|
create_time: "2024-01-01 09:16",
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 130,
|
||||||
|
parent_id: 120,
|
||||||
|
reply_id: 120,
|
||||||
|
reply_name: "🍁",
|
||||||
|
user_name: "天道酬勤",
|
||||||
|
user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp",
|
||||||
|
user_content: "我也是 我也是！",
|
||||||
|
is_like: false,
|
||||||
|
like_count: 67,
|
||||||
|
create_time: "2024-04-01 17:06"
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 140,
|
||||||
|
parent_id: null,
|
||||||
|
reply_id: 130,
|
||||||
|
reply_name: "天道酬勤",
|
||||||
|
user_name: "守护宗主维护宗门",
|
||||||
|
user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp",
|
||||||
|
user_content: "我母亲也有同样的症状",
|
||||||
|
is_like: false,
|
||||||
|
like_count: 16,
|
||||||
|
create_time: "2024-01-02 23:08"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 150,
|
||||||
|
parent_id: null,
|
||||||
|
reply_id: null,
|
||||||
|
reply_name: null,
|
||||||
|
user_name: "音乐制作人",
|
||||||
|
user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp",
|
||||||
|
user_content: "我现在吃的是艾拉莫得，病症减轻了，现在肌酐指标在上升，我在考虑换药。",
|
||||||
|
is_like: true,
|
||||||
|
like_count: 8,
|
||||||
|
create_time: "2024-01-08 00:45"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
deleteMode: "all",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
openComment() {
|
||||||
|
this.$refs.ccRef.newCommentFun();
|
||||||
|
},
|
||||||
|
likeFun(params, callback) {
|
||||||
|
console.log("likeFun", params);
|
||||||
|
// Implement your logic for likeFun
|
||||||
|
|
||||||
|
},
|
||||||
|
replyFun(params, callback) {
|
||||||
|
// console.log("replyFun", params);
|
||||||
|
// axios.post("http://xxx/reply", { ...params }).then((res) => {
|
||||||
|
// // if (res.code === 0) {
|
||||||
|
// // callback(res);
|
||||||
|
// // }
|
||||||
|
// // });
|
||||||
|
const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
|
||||||
|
setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteFun({ params, mode }, callback) {
|
||||||
|
|
||||||
|
console.log("deleteFun", { params, mode });
|
||||||
|
// 当请求成功, 调用callback执行评论删除;
|
||||||
|
switch (this.deleteMode) {
|
||||||
|
case "bind":
|
||||||
|
// 逻辑: 调用接口进行评论内容修改 update
|
||||||
|
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||||||
|
break;
|
||||||
|
case "only":
|
||||||
|
// 逻辑: 调用接口删除一个评论 delete
|
||||||
|
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// all
|
||||||
|
// 逻辑: 调用接口删除多个评论 [delete]
|
||||||
|
// Demo如下:
|
||||||
|
// axios.post("http://xxx/delete", { ids: params }).then((res) => {
|
||||||
|
// if (res.code === 0) {
|
||||||
|
// callback(res);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.btn {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #2979ff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
@ -577,13 +577,16 @@
|
||||||
*/
|
*/
|
||||||
getnewpinlun(){
|
getnewpinlun(){
|
||||||
// 这里是对评论信息做处理
|
// 这里是对评论信息做处理
|
||||||
|
var data={
|
||||||
|
page:1,
|
||||||
|
limit:10,
|
||||||
|
// id:'1',
|
||||||
|
shipinquanId:'1'
|
||||||
|
}
|
||||||
uni.request({
|
uni.request({
|
||||||
url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
|
url: 'app/shipinquan/contentList ',
|
||||||
method: 'POST',
|
method: 'GET',
|
||||||
data:{
|
data:data,
|
||||||
info: 'videoID_pinlun',
|
|
||||||
_id: this.videoID
|
|
||||||
},
|
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
// console.log(res);
|
// console.log(res);
|
||||||
this.pinlunList = [];
|
this.pinlunList = [];
|
||||||
|
|
|
||||||
|
|
@ -127,6 +127,10 @@
|
||||||
uni.navigateTo({//返回项目订单
|
uni.navigateTo({//返回项目订单
|
||||||
url:'/my/order/payModifyJsDetail'
|
url:'/my/order/payModifyJsDetail'
|
||||||
})
|
})
|
||||||
|
}else if(this.content=='秒杀'){
|
||||||
|
uni.navigateTo({//返回项目订单
|
||||||
|
url:'/my/order/payModifyMs'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -372,7 +372,7 @@
|
||||||
youhuijuan(){
|
youhuijuan(){
|
||||||
var moeny=(this.orderXm.price*this.number).toFixed(2)
|
var moeny=(this.orderXm.price*this.number).toFixed(2)
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/my/hongbao/youhuijuanList?price='+moeny+'&text='+'套餐'
|
url:'/my/hongbao/youhuijuanList?price='+moeny+'&text='+'秒杀'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
openpay() {//验证
|
openpay() {//验证
|
||||||
|
|
|
||||||
|
|
@ -711,7 +711,7 @@
|
||||||
title: '支付成功'
|
title: '支付成功'
|
||||||
})
|
})
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url:'/pages/my/newseckill?type='+that.orderXm.type+'&name='+'index'
|
url:'/pages/my/newseckill?text='+'index'
|
||||||
})
|
})
|
||||||
that.getOrder()
|
that.getOrder()
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -745,7 +745,7 @@
|
||||||
title: '支付成功'
|
title: '支付成功'
|
||||||
})
|
})
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url:'/pages/my/newseckill?type='+that.orderXm.type+'&name='+'index'
|
url:'/pages/my/newseckill?text='+'index'
|
||||||
})
|
})
|
||||||
// this.$queue.showToast('支付成功');
|
// this.$queue.showToast('支付成功');
|
||||||
|
|
||||||
|
|
@ -779,7 +779,7 @@
|
||||||
title: '支付成功'
|
title: '支付成功'
|
||||||
})
|
})
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url:'/pages/my/newseckill?type='+that.orderXm.type+'&name='+'index'
|
url:'/pages/my/newseckill?text='+'index'
|
||||||
})
|
})
|
||||||
that.callPay(rea.data);
|
that.callPay(rea.data);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -806,7 +806,7 @@
|
||||||
title: '支付成功'
|
title: '支付成功'
|
||||||
})
|
})
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url:'/pages/my/newseckill?type='+that.orderXm.type+'&name='+'index'
|
url:'/pages/my/newseckill?text='+'index'
|
||||||
})
|
})
|
||||||
const urlArr = window.location.href;
|
const urlArr = window.location.href;
|
||||||
const hostUrl = urlArr.split("/");
|
const hostUrl = urlArr.split("/");
|
||||||
|
|
@ -836,7 +836,7 @@
|
||||||
title: '支付成功'
|
title: '支付成功'
|
||||||
})
|
})
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url:'/pages/my/newseckill?type='+that.orderXm.type+'&name='+'index'
|
url:'/pages/my/newseckill?text='+'index'
|
||||||
})
|
})
|
||||||
that.isCheckPay(rea.code, 'wxpay', JSON.stringify(rea.data));
|
that.isCheckPay(rea.code, 'wxpay', JSON.stringify(rea.data));
|
||||||
}
|
}
|
||||||
|
|
@ -855,7 +855,7 @@
|
||||||
title: '支付成功'
|
title: '支付成功'
|
||||||
})
|
})
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url:'/pages/my/newseckill?type='+that.orderXm.type+'&name='+'index'
|
url:'/pages/my/newseckill?text='+'index'
|
||||||
})
|
})
|
||||||
const div = document.createElement('div')
|
const div = document.createElement('div')
|
||||||
div.innerHTML = rea.data //此处form就是后台返回接收到的数据
|
div.innerHTML = rea.data //此处form就是后台返回接收到的数据
|
||||||
|
|
@ -875,7 +875,7 @@
|
||||||
title: '支付成功'
|
title: '支付成功'
|
||||||
})
|
})
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url:'/pages/my/newseckill?type='+that.orderXm.type+'&name='+'index'
|
url:'/pages/my/newseckill?text='+'index'
|
||||||
})
|
})
|
||||||
that.setPayment('alipay', rea.data);
|
that.setPayment('alipay', rea.data);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
23
pages.json
23
pages.json
|
|
@ -53,7 +53,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/my/myMsOderDrtail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "秒杀订单详情",
|
||||||
|
"enablePullDownRefresh": true,
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/my/miaoShaOderDrtail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "秒杀详情",
|
||||||
|
"enablePullDownRefresh": true,
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/cooperate/index",
|
"path": "pages/cooperate/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,7 @@
|
||||||
<image src="../../static/index-fenglei6.png" mode="widthFix"></image>
|
<image src="../../static/index-fenglei6.png" mode="widthFix"></image>
|
||||||
<span class="feng_word">服务疗程</span>
|
<span class="feng_word">服务疗程</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="index-project-content" @click="goNav('/pages/my/newseckill')">
|
<view class="index-project-content" @click="goNav('/pages/my/newseckill?text='+'index')">
|
||||||
<image src="../../static/index-fenglei7.png" mode="widthFix"></image>
|
<image src="../../static/index-fenglei7.png" mode="widthFix"></image>
|
||||||
<span class="feng_word">限时秒杀</span>
|
<span class="feng_word">限时秒杀</span>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -608,7 +608,7 @@
|
||||||
},
|
},
|
||||||
miaoshao(){
|
miaoshao(){
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/my/newseckill'
|
url:'/pages/my/newseckill?text='+'my'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
meServe(item){
|
meServe(item){
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,690 @@
|
||||||
|
<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">
|
||||||
|
{{mainData.title}}
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-title-num">
|
||||||
|
<span>{{mainData.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>{{mainData.price}}</span>
|
||||||
|
<span>/套</span>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-money-jia">
|
||||||
|
￥{{mainData.oldPrice}}/套
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-mian">
|
||||||
|
<view class="header-bottom-mian-title">
|
||||||
|
<image src="../../static/servicePackage/jianjie.png" mode=""></image>
|
||||||
|
<span>套餐简介</span>
|
||||||
|
</view>
|
||||||
|
<view class="jianjie">
|
||||||
|
{{mainData.content}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-foot">
|
||||||
|
<view><image class="header-bottom-foot-title" src="../../static/dituzhaoren1.png" ></image></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>平台担保</span>
|
||||||
|
</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-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)">
|
||||||
|
<view class="detail-foot-list-top">
|
||||||
|
<span style="margin-right: 5px;">{{item.title}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="detail-view" style="position: relative;">
|
||||||
|
<image class="detail-view-img" :src="item.massageImg" mode=""></image>
|
||||||
|
<span v-if="serviData.name!='index'" class="img-span">{{item.status=='1'?'已使用':'未使用'}}</span>
|
||||||
|
<view class="detail-view-mina">
|
||||||
|
<view class="header-bottom-money" style="margin: 7px 0px;display: flex;justify-content: space-between; ">
|
||||||
|
<view style="display: flex; align-items: flex-end;">
|
||||||
|
<view class="header-bottom-money-zhen">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>{{item.price}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-money-jia" >
|
||||||
|
￥{{item.oldPrice}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="service-more" @click.stop="xiangqing(item)">{{item.status=='1'?'详情':'预约'}}</view>
|
||||||
|
</view>
|
||||||
|
<view style="color: #019c88; font-size: 26rpx;">服务时长:{{item.duration}}分钟</view>
|
||||||
|
<view class="tese">
|
||||||
|
<span>项目特色: </span>
|
||||||
|
<span>{{item.jianjie}}</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="detail-foot-title">
|
||||||
|
服务项目{{index+1}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="height: 70rpx;"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="push-button">
|
||||||
|
<view class="detail-btn" v-if="serviData.name=='index'" @click="openpay(mainData)">
|
||||||
|
立即购买
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 支付方式 -->
|
||||||
|
<u-popup v-model="showpay" mode="bottom" :closeable="closeable">
|
||||||
|
<view class="popup_pay">
|
||||||
|
<view style="background-color: #fff;">
|
||||||
|
<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;display: flex;flex-direction: column;justify-content: center;">
|
||||||
|
<view
|
||||||
|
style="width:92%;display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
|
||||||
|
v-for="(item,index) in openLists" :key='item.id'>
|
||||||
|
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
|
||||||
|
</image>
|
||||||
|
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
|
||||||
|
{{item.text}}
|
||||||
|
</view>
|
||||||
|
<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
|
||||||
|
<label class="tui-radio">
|
||||||
|
<radio color="#096f4b" :checked="openWay === item.id ? true : false" />
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pay_btn" @click="pay()">确认支付</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
checkbox:false,
|
||||||
|
couponData:[],
|
||||||
|
couponId:'',
|
||||||
|
tordersId: '',
|
||||||
|
tpayMoney: '',
|
||||||
|
paySel: 0,
|
||||||
|
openWay: 1,
|
||||||
|
openLists: [],
|
||||||
|
closeable: true,
|
||||||
|
showpay: false,
|
||||||
|
serviData:[],
|
||||||
|
isVip:false,
|
||||||
|
mainData:[],
|
||||||
|
detailData:[],
|
||||||
|
// 背景图片的URL可以是动态的，比如从API获取或根据条件生成
|
||||||
|
backgroundImageUrl: '',
|
||||||
|
zong:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
backgroundStyle() {
|
||||||
|
return {
|
||||||
|
backgroundImage: `url(${this.backgroundImageUrl})`,
|
||||||
|
backgroundSize: 'cover', // 根据需要调整
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(e){
|
||||||
|
var that=this;
|
||||||
|
that.serviData=e;
|
||||||
|
that.getData();
|
||||||
|
that.isVip=this.$queue.getData('isVIP');
|
||||||
|
},
|
||||||
|
|
||||||
|
methods:{
|
||||||
|
goNav(e) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: e
|
||||||
|
})
|
||||||
|
},
|
||||||
|
openpay(item) {
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/my/order/payModifyTc?ordersId='+item.id
|
||||||
|
})
|
||||||
|
// this.goOrder()
|
||||||
|
// this.showpay = true
|
||||||
|
},
|
||||||
|
xiangqing(item){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/my/myMsOderDrtail?mainId='+item.mainId+'&id='+item.id+
|
||||||
|
'&massageTypeId='+item.massageTypeId+
|
||||||
|
'&status='+item.status
|
||||||
|
})
|
||||||
|
},
|
||||||
|
detail(item){
|
||||||
|
if(item.status=='1'){
|
||||||
|
uni.showToast({
|
||||||
|
title:'该项目已使用！'
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/my/myMsOderDrtail?mainId='+item.mainId+'&id='+item.id+
|
||||||
|
'&massageTypeId='+item.massageTypeId+
|
||||||
|
'&page='+1+
|
||||||
|
'&limit='+10
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
getData(){
|
||||||
|
var that=this;
|
||||||
|
let data = {
|
||||||
|
mainId: that.serviData.id,
|
||||||
|
page: that.serviData.page,
|
||||||
|
limit: that.serviData.limit,
|
||||||
|
}
|
||||||
|
that.$Request.get('/app/user/package/detail/findMyPackageDetailList',data).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
that.mainData=res.data.mainData;
|
||||||
|
that.detailData=res.data.detailData;
|
||||||
|
that.backgroundImageUrl=that.mainData.packageImg;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.img-span{
|
||||||
|
padding: 2px 5px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 8px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
|
||||||
|
border-radius: 7px 0px 7px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
margin-left: 27px;
|
||||||
|
}
|
||||||
|
.detail-view-mina{
|
||||||
|
width: 74%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.detail-view-img{
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 9px;
|
||||||
|
}
|
||||||
|
.detail-view{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
/deep/uni-checkbox .uni-checkbox-input{
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.youhui-img{
|
||||||
|
width: 111.81rpx;
|
||||||
|
height: 111.81rpx;
|
||||||
|
}
|
||||||
|
.youhui-view-right-btn{
|
||||||
|
width: 158rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
background: linear-gradient(-90deg, #019C88, #2DC48E);
|
||||||
|
border-radius: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 64rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-shadow: 0rpx 2rpx 4rpx rgba(0,119,104,0.44);
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.youhui-view-right-time{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.youhui-view-right-title{
|
||||||
|
width: 105px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
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: space-around;
|
||||||
|
}
|
||||||
|
.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: 20px auto;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.popup_pay {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 45rpx;
|
||||||
|
/* height: 400px; */
|
||||||
|
/* height: 160px; */
|
||||||
|
/* #ifndef MP-WEIXIN */
|
||||||
|
/* height: 130px; */
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
}
|
||||||
|
.pay_btn {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 60rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 80rpx;
|
||||||
|
}
|
||||||
|
.push-button{
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.detail-btn{
|
||||||
|
display: inline-block;
|
||||||
|
width: 92%;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 28px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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(234, 248, 245,0.7),rgba(132, 211, 196,0.7));
|
||||||
|
}
|
||||||
|
.detail-foot-nav-text{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.detail-foot-nav{
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.detail-foot-title{
|
||||||
|
width: 115px;
|
||||||
|
height: 32px;
|
||||||
|
background-image: url(../../static/servicePackage/horn.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 32px;
|
||||||
|
padding-right: 15px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.detail-foot-list-top{
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.detail-foot-list{
|
||||||
|
width: 95%;
|
||||||
|
border-radius: 21rpx;
|
||||||
|
position: relative;
|
||||||
|
margin: 6px 0px 5px 0px;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.detail-foot{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tese span:nth-child(1){
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.tese span:nth-child(2){
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #8D9194;
|
||||||
|
}
|
||||||
|
.tese{
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
.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-size: 30rpx;
|
||||||
|
color: #029d88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-foot-mian{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.jianjie{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #8D9194;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.header-bottom-mian{
|
||||||
|
margin: 3px 0px;
|
||||||
|
}
|
||||||
|
.header-bottom-mian-title{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.header-bottom-mian-title span{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #20AB95;
|
||||||
|
margin-left: 5px;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
.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: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-view-img3{
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-view image{
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-view{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 80px;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
background-color: rgba(8, 162, 138, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #029D88;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-title{
|
||||||
|
width: 65px;
|
||||||
|
height: 17px;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-foot{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
.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: 26rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-money-zhen span:nth-child(2){
|
||||||
|
font-size:38rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.header-bottom-money-zhen span:nth-child(3){
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
.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:8px;
|
||||||
|
}
|
||||||
|
.header-bottom-money{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.header-bottom-title-num span{
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-title-num span:nth-child(1){
|
||||||
|
font-weight: bold;
|
||||||
|
color: #08A28A;
|
||||||
|
}
|
||||||
|
.header-bottom-title-num span:nth-child(2){
|
||||||
|
color: #848485;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.header-bottom-title-text{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 35rpx;
|
||||||
|
color: #13141A;
|
||||||
|
}
|
||||||
|
.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 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.service-more{
|
||||||
|
width: 50px;
|
||||||
|
height: 26px;
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: 15px;
|
||||||
|
line-height: 26px;
|
||||||
|
border: 1px #2dbe93 solid ;
|
||||||
|
color: #019c88;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: fex-end;
|
||||||
|
background: #eefffa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,606 @@
|
||||||
|
<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-top-list">
|
||||||
|
<view class="header-bottom-foot-view2">
|
||||||
|
<image class="header-bottom-foot-view2-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
|
||||||
|
<span>实名认证</span>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-foot-view2" style="margin: 0px 7px;">
|
||||||
|
<image class="header-bottom-foot-view2-img2" src="../../static/servicePackage/money.png" mode=""></image>
|
||||||
|
<span>资质认证</span>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-foot-view2">
|
||||||
|
<image class="header-bottom-foot-view2-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
|
||||||
|
<span>平台担保</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom">
|
||||||
|
<view class="header-bottom-top">
|
||||||
|
|
||||||
|
<view class="header-bottom-title">
|
||||||
|
<view class="header-bottom-title-text">
|
||||||
|
<span>{{getList.title}}</span>
|
||||||
|
<span class="header-bottom-title-liao">
|
||||||
|
套餐
|
||||||
|
</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>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-money-jia">
|
||||||
|
￥{{getList.oldPrice}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</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;width: 26%;">
|
||||||
|
<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 class="header-bottom-foot">
|
||||||
|
<view class="header-bottom-foot-title">服务保障</view>
|
||||||
|
<view class="header-bottom-foot-cont">
|
||||||
|
<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">性别限制: </span>
|
||||||
|
<span class="detail-foot-mian-top-text">不限性别</span>
|
||||||
|
</view>
|
||||||
|
<view class="detail-foot-mian-top-bottom">
|
||||||
|
<span class="detail-foot-mian-top-title">适应人群: </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>
|
||||||
|
</view>
|
||||||
|
<view class="detail-btn" v-if="dataList.status=='0'" @click="goumai(getList)">
|
||||||
|
立即预约
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
dataList:[],
|
||||||
|
getList:[],
|
||||||
|
isVIP:false,
|
||||||
|
// 背景图片的URL可以是动态的，比如从API获取或根据条件生成
|
||||||
|
backgroundImageUrl: '',
|
||||||
|
nameText:'',
|
||||||
|
labels:[],
|
||||||
|
contentImg:[],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
backgroundStyle() {
|
||||||
|
return {
|
||||||
|
backgroundImage: `url(${this.backgroundImageUrl})`,
|
||||||
|
backgroundSize: 'cover', // 根据需要调整
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
var that=this;
|
||||||
|
that.dataList=e;
|
||||||
|
that.isVIP=this.$queue.getData('isVIP');
|
||||||
|
that.getData();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
goNav(e) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: e
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goumai(item){//立即购买
|
||||||
|
this.$queue.setData('getJishi','')
|
||||||
|
this.$queue.setData('daibudan','');
|
||||||
|
this.$queue.setData('mainData',item);
|
||||||
|
this.$queue.setData('xiangmu',item);
|
||||||
|
this.$queue.setData('getJishi','');
|
||||||
|
this.$queue.setData('youhui','');
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/my/order/payModifyTcMy?ordersId='+item.id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getData(){
|
||||||
|
var that=this;
|
||||||
|
let data = {
|
||||||
|
id: that.dataList.id,
|
||||||
|
page: that.page,
|
||||||
|
limit: that.limit,
|
||||||
|
}
|
||||||
|
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.labels=res.data.labels.split(',');
|
||||||
|
that.contentImg=res.data.contentImg.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: 2px 7px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
|
||||||
|
border-radius: 7px;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 10px;
|
||||||
|
border-top-left-radius: 20px;
|
||||||
|
border-bottom-right-radius: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.detail-btn{
|
||||||
|
width:95%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||||
|
border-radius: 46rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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(234, 248, 245,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: 15px;
|
||||||
|
}
|
||||||
|
.detail-foot{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5rpx 0rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 20rpx;
|
||||||
|
}
|
||||||
|
.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: 3px;
|
||||||
|
}
|
||||||
|
.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-view2-img1{
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-view2-img2{
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-view2-img3{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-view2 image{
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-view2{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2px 20px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
background-color: rgba(230, 246, 243, 1);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #019c88;
|
||||||
|
margin: 5rpx auto;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-title{
|
||||||
|
width:100%;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 23rpx;
|
||||||
|
color: #08A28A;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.header-bottom-foot-cont{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.header-bottom-top-list{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(230, 246, 243, 0.6);
|
||||||
|
}
|
||||||
|
.header-bottom-foot{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 26rpx;
|
||||||
|
}
|
||||||
|
.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: 25rpx;
|
||||||
|
}
|
||||||
|
.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: center;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-title-num span{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 25rpx;
|
||||||
|
}
|
||||||
|
.header-bottom-title-num span:nth-child(1){
|
||||||
|
font-weight: bold;
|
||||||
|
color: #08A28A;
|
||||||
|
}
|
||||||
|
.header-bottom-title-num span:nth-child(2){
|
||||||
|
color: #848485;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.header-bottom-title-text{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 35rpx;
|
||||||
|
color: #13141A;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.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: 100vh;
|
||||||
|
position: relative;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
<!-- <view class="item-line"></view> -->
|
<!-- <view class="item-line"></view> -->
|
||||||
<view class="item-img">
|
<view class="item-img">
|
||||||
<image :src="item.packageImg" mode=""></image>
|
<image :src="item.packageImg" mode=""></image>
|
||||||
<span class="img-span">{{item.status=='1'?'未用完':item.status=='2'?'退款':'已用完'}}</span>
|
<span class="img-span" v-if="text=='my'">{{item.status=='1'?'未用完':item.status=='2'?'退款':'已用完'}}</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-view">
|
<view class="item-view">
|
||||||
<view class="view-cata">
|
<view class="view-cata">
|
||||||
|
|
@ -92,11 +92,13 @@
|
||||||
page:1,
|
page:1,
|
||||||
limit:10,
|
limit:10,
|
||||||
titleNmae:'',
|
titleNmae:'',
|
||||||
tagsData:[]
|
tagsData:[],
|
||||||
|
text:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(){
|
onLoad(e){
|
||||||
this.myId = uni.getStorageSync('userId')
|
this.myId = uni.getStorageSync('userId')
|
||||||
|
this.text=e.text
|
||||||
this.getData()
|
this.getData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -117,6 +119,16 @@
|
||||||
limit: this.limit,
|
limit: this.limit,
|
||||||
title:this.searchValue,
|
title:this.searchValue,
|
||||||
}
|
}
|
||||||
|
if(this.text=='index'){//首页进来的秒杀列表接口
|
||||||
|
this.$Request.get('/app/massage/package/findAppActivityPage', data).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.dataList=res.data.list;
|
||||||
|
for(var i=0;i<this.dataList.length;i++){
|
||||||
|
this.tagsData=this.dataList[i].labels.split(',');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
this.$Request.get('/app/user/package/findMyPackageList', data).then(res => {
|
this.$Request.get('/app/user/package/findMyPackageList', data).then(res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
this.dataList=res.data.records;
|
this.dataList=res.data.records;
|
||||||
|
|
@ -125,6 +137,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
tabChange(index) {
|
tabChange(index) {
|
||||||
this.tabIndex = index;
|
this.tabIndex = index;
|
||||||
|
|
@ -133,10 +147,6 @@
|
||||||
this.$refs.paging.reload(true);
|
this.$refs.paging.reload(true);
|
||||||
},
|
},
|
||||||
queryList(pageNo, pageSize) {
|
queryList(pageNo, pageSize) {
|
||||||
// console.log(pageNo,pageSize,this.tabIndex)
|
|
||||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
|
||||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
|
||||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
|
||||||
const params = {
|
const params = {
|
||||||
userId: this.myId,
|
userId: this.myId,
|
||||||
page: pageNo,
|
page: pageNo,
|
||||||
|
|
@ -144,29 +154,48 @@
|
||||||
type: '112',
|
type: '112',
|
||||||
title:''
|
title:''
|
||||||
}
|
}
|
||||||
this.$Request.get('/app/user/package/findMyPackageList',params).then(res => {
|
if(this.text=='index'){//首页进来的秒杀列表接口
|
||||||
// 将请求的结果数组传递给z-paging
|
this.$Request.get('/app/massage/package/findAppActivityPage',params).then(res => {
|
||||||
this.$refs.paging.complete(res.data.records);
|
this.$refs.paging.complete(res.data.list);
|
||||||
}).catch(res => {
|
}).catch(res => {
|
||||||
// 如果请求失败写this.$refs.paging.complete(false);
|
|
||||||
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
||||||
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
||||||
this.$refs.paging.complete(false);
|
this.$refs.paging.complete(false);
|
||||||
})
|
})
|
||||||
|
}else{
|
||||||
|
this.$Request.get('/app/user/package/findMyPackageList',params).then(res => {
|
||||||
|
this.$refs.paging.complete(res.data.records);
|
||||||
|
}).catch(res => {
|
||||||
|
this.$refs.paging.complete(false);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
backImg(){//返回上一页
|
backImg(){//返回上一页
|
||||||
|
if(this.text=='my'){
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url:'/pages/my/index'
|
url:'/pages/my/index'
|
||||||
})
|
})
|
||||||
|
}else{
|
||||||
|
uni.reLaunch({
|
||||||
|
url:'/pages/index/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
clear(res) {
|
clear(res) {
|
||||||
this.getData()
|
this.getData()
|
||||||
},
|
},
|
||||||
itemClick(item) {
|
itemClick(item) {
|
||||||
|
if(this.text=='index'){
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/my/newseckilldetails?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+'my'
|
url:'/pages/my/newseckilldetails?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+this.text
|
||||||
})
|
})
|
||||||
|
}else{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/my/miaoShaOderDrtail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+this.text
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="push-button">
|
<view class="push-button">
|
||||||
<view class="detail-btn" :class="[mainData.btnShow==true?'aBavk':'hBack']" @click="goumai(mainData)">
|
<view class="detail-btn" :class="[mainData.btnShow==true?'aBavk':'hBack']" @click="goumai(mainData)">
|
||||||
立即购买
|
{{text=='index'?'立即购买':'立即预约'}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 支付方式 -->
|
<!-- 支付方式 -->
|
||||||
|
|
@ -592,12 +592,12 @@
|
||||||
},
|
},
|
||||||
getData(){
|
getData(){
|
||||||
var that=this;
|
var that=this;
|
||||||
if(that.dataList.name=='index'){
|
|
||||||
let data = {
|
let data = {
|
||||||
id: that.dataList.id,
|
id: that.dataList.id,
|
||||||
page: that.page,
|
page: that.page,
|
||||||
limit: that.limit,
|
limit: that.limit,
|
||||||
}
|
}
|
||||||
|
if(that.dataList.name=='index'){
|
||||||
that.$Request.get('/app/massage/package/getAppFlashDetail', data).then(res => {
|
that.$Request.get('/app/massage/package/getAppFlashDetail', data).then(res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
var newTime = new Date().getTime();
|
var newTime = new Date().getTime();
|
||||||
|
|
@ -615,12 +615,8 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
let data = {
|
|
||||||
mainId: that.dataList.id,
|
that.$Request.get('/app/user/package/detail/getMyPackageDetail', data).then(res => {
|
||||||
page: that.page,
|
|
||||||
limit: that.limit,
|
|
||||||
}
|
|
||||||
that.$Request.get('/app/massage/package/getAppFlashDetail', data).then(res => {
|
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
var newTime = new Date().getTime();
|
var newTime = new Date().getTime();
|
||||||
var starTime=this.getTimeInMilliseconds(res.data.startTime);
|
var starTime=this.getTimeInMilliseconds(res.data.startTime);
|
||||||
|
|
@ -630,13 +626,10 @@
|
||||||
}else{
|
}else{
|
||||||
this.$set(res.data, 'btnShow', false)
|
this.$set(res.data, 'btnShow', false)
|
||||||
}
|
}
|
||||||
that.mainData=res.data.mainData;
|
that.mainData=res.data;
|
||||||
that.detailData=res.data.detailData;
|
that.backgroundImageUrl=res.data.packageImg
|
||||||
that.contentImg=that.mainData.contentImg.split(",");
|
that.contentImg=res.data.contentImg.split(",");
|
||||||
that.mainId=that.mainData.id
|
that.labels=res.data.labels.split(',');
|
||||||
that.liaoTime=res.data.detailData[0].intervalDaysStr;
|
|
||||||
that.backgroundImageUrl=that.mainData.packageImg;
|
|
||||||
that.labels=that.mainData.labels.split(',')
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -106,19 +106,14 @@
|
||||||
</swiper>
|
</swiper>
|
||||||
<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
||||||
<view :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #242424; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
|
<view :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #242424; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
|
||||||
<!--
|
|
||||||
注意：
|
<!-- <douyin-scrollview
|
||||||
deleteIOSHeight
|
|
||||||
deleteAndroidHeight
|
|
||||||
这两个参数用于控制评论等的高度
|
|
||||||
-->
|
|
||||||
<douyin-scrollview
|
|
||||||
:Width="windowWidth"
|
:Width="windowWidth"
|
||||||
:Height="(boxStyle.height/1.23)"
|
:Height="(boxStyle.height/1.23)"
|
||||||
:deleteIOSHeight="36"
|
:deleteIOSHeight="36"
|
||||||
:deleteAndroidHeight="15"
|
:deleteAndroidHeight="15"
|
||||||
@closeScrollview="closeScrollview"
|
@closeScrollview="closeScrollview"
|
||||||
></douyin-scrollview>
|
></douyin-scrollview> -->
|
||||||
</view>
|
</view>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -135,6 +130,7 @@
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
windowWidth: 0,
|
windowWidth: 0,
|
||||||
windowHeight: 0,
|
windowHeight: 0,
|
||||||
platform: "",
|
platform: "",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue