作者 吴孟雨

commit

要显示太多修改。

为保证性能只显示 11 of 11+ 个文件。

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding" addBOMForNewFiles="with NO BOM" />
</project>
\ No newline at end of file
... ...
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
... ...
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/火柴西路.iml" filepath="$PROJECT_DIR$/.idea/火柴西路.iml" />
</modules>
</component>
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/火柴西路.iml" filepath="$PROJECT_DIR$/.idea/火柴西路.iml" />
</modules>
</component>
</project>
\ No newline at end of file
... ...
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
... ...
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
... ...
// pages/activity/activity.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
images: [],
images_params:[],
type_picker_list:[],
start_date:app.nowDate(),
start_time:'',
title:'',
content:'',
min_num:'',
max_num:'',
date:'',
time:'',
address:'',
address_position:'',
over_time:'',
is_showRelease_modal:false,
},
//查看我的发布
goMyRelease() {
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + this.data.id})
},
//完成按钮
goBack() {
// wx.redirectTo({url:'/pages/spell-list/spell-list?current=' + 1})
},
disableScroll() {
},
handleBackground() {
this.setData({is_showRelease_modal:false,})
},
close() {
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + this.data.id})
},
//输入标题
inputTitle(e) {
this.setData({title:e.detail.value})
},
//输入内容
inputContent(e) {
this.setData({content:e.detail.value})
},
//输入最低人数
inputMinNum(e) {
this.setData({min_num:e.detail.value})
},
//输入最高人数
inputMaxNum(e) {
this.setData({max_num:e.detail.value});
},
//输入最高人数失去焦点时
maxNumBlur() {
if(+this.data.min_num > +this.data.max_num) {
wx.showToast({title:'最高人数要大于最低人数',icon:'none'});
this.setData({max_num:''});
}
},
//输入地点
inputAddress(e) {
this.setData({address:e.detail.value})
},
//获取地址
choosePosition() {
//选择当前地址,经纬度
const self = this;
wx.chooseLocation({
success(res) {
// console.log(res);
self.setData({address_position: res.address !== ''?res.address:res.name,latng:res.latitude + ',' + res.longitude})
},
})
//打开地图导航
// wx.getLocation({ //获取当前经纬度
// type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息
// success: function (res) {
// console.log('获取当前经纬度', res);
// wx.openLocation({//​使用微信内置地图查看位置。
// latitude: res.latitude,//要去的纬度-地址
// longitude: res.longitude,//要去的经度-地址
// name: "",
// address: ""
// })
// }
// })
},
//输入截止时间
inputOverTime(e) {
this.setData({over_time:e.detail.value});
if(this.data.over_time.indexOf('.') !== -1) {
wx.showToast({title:'截止时间为整数',icon:'none'});
this.setData({over_time:''});
}
// else {
// let newTime = new Date().getTime();//当前时间戳
// let end_time = app.preTime(this.data.date + ' ' +this.data.time, this.data.over_time);//截止时间
// let endTime = new Date(end_time).getTime(); //截止时间戳
// // console.log('newTime', 'endTime', 'end_time', endTime - newTime >=0,newTime, endTime, end_time,this.data.date + ' ' +this.data.time);
// console.log('开始时间和截止时间',this.data.date + ' ' +this.data.time,end_time);
// if (endTime - newTime <= 0) { //不可发布目前时间到截止小时內的订单
// wx.showToast({title:'截止时间无效',icon:'none'});
// this.setData({over_time:''})
// }
// }
// console.log(this.data.over_time.indexOf('.') !== -1);
},
//获取分类
getType() {
let url = '/portal/Send/select';
const list = [];
app.post(url, {}, {}).then((res) => {
// console.log('获取分类', res);
res.data.active.forEach((item) => {
list.push(item.name)
});
this.setData({type_picker_list: list,type_list: res.data.active})
})
},
//确定发布
confirmRelease(e) {
// console.log('e', e,e.detail.formId,'最高人数',this.data.max_num);
if(this.data.title === '') {
wx.showToast({title:'请填写标题',icon:'none'})
}else if(this.data.content === '') {
wx.showToast({title:'请填写描述',icon:'none'})
}else if(this.data.images_params.length === 0) {
wx.showToast({title:'请上传图片',icon:'none'})
}else if (this.data.min_num === '') {
wx.showToast({title:'请填写最低人数',icon:'none'})
}else if (this.data.max_num === '') {
wx.showToast({title:'请填写最高人数',icon:'none'})
}else if(this.data.current_type === undefined) {
wx.showToast({title:'请选择类别',icon:'none'})
}else if(this.data.date === '') {
wx.showToast({title:'请选择日期',icon:'none'})
}else if(this.data.time === '') {
wx.showToast({title:'请选择时间',icon:'none'})
}else if(this.data.address === '') {
wx.showToast({title:'请填写地点',icon:'none'})
}else if(this.data.address_position === '') {
wx.showToast({title:'请定位地址',icon:'none'})
}else if(this.data.over_time === '') {
wx.showToast({title:'请填写截止时间',icon:'none'})
}else {
this.data.type_list.forEach((item,index) => {
if(this.data.current_type === index) {
// console.log('index', index, item.id);
this.setData({type_id:item.id})
}
});
const images_params = this.data.images_params.join(',');
// console.log('发布-images_params', images_params);
let url = '/portal/Send/sendActivity';
let header = {
"XX-token": wx.getStorageSync('token')
};
let params = {
token: wx.getStorageSync('token'),
title: this.data.title,
content:this.data.content,
pic: images_params,
min:this.data.min_num,
max:this.data.max_num,
select_id: this.data.type_id,//类别
time: this.data.date + ' ' + this.data.time,
addr: this.data.address,
address: this.data.address_position,
latng: this.data.latng,
over_time:this.data.over_time,// 报名截止时间
formId: e.detail.formId,
};
app.post(url, params, {}).then((res) => {
console.log('确定发布', res);
if(+res.code === 1 && res.message == '发布成功') {
this.setData({is_showRelease_modal:true,id:+res.data.activeId})
}else {
if(res.message !== '截止时间不可小于当前时间') {
wx.showToast({title:res.message,icon:'none'})
}
}
// res.list.forEach((item) => {
// list.push(item.name)
// });
// console.log('list', list);
// this.setData({picker_list: list, student_list: res.list})
})
}
},
//上传图片
choose(e) { //这里是选取图片的方法
let that = this;
wx.chooseImage({
count: 6, //最多可以选择的图片总数
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
//启动上传等待中...
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
// console.log('tempFilePaths', tempFilePaths);
let token = wx.getStorageSync('token');
let uploadImgCount = 0;
for (let i = 0, h = tempFilePaths.length; i < h; i++) {
wx.uploadFile({
url: 'http://wmatchrd.com/portal/Index/upload',
filePath: tempFilePaths[i],
name: 'file',
formData: {
'imgIndex': i
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'XX-Token': token,
'XX-Device-Type': 'wxapp',
},
success: function(res) {
uploadImgCount++;
let data = JSON.parse(res.data);
console.log('data',data);
if (+data.code == 1) {
wx.hideToast();
//服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
let images = that.data.images;
let images_params = that.data.images_params;
images.push(data.data.preview_url);
images_params.push(data.data.filepath);
that.setData({
images: images,
images_params:images_params,
});
console.log('images---images_params',images,images_params)
//如果是最后一张,则隐藏等待中
// if (uploadImgCount == tempFilePaths.length) {
// wx.hideToast();
// }
} else {
wx.hideToast();
wx.showModal({
title: '提示',
content: data.msg,
showCancel: false
})
}
},
fail: function(res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function(res) {}
})
}
});
}
}
});
},
// 删除图片
deleteImg(e) {
var imgs = this.data.images;
var images_params = this.data.images_params;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
images_params.splice(index, 1);
this.setData({
images: imgs,
images_params:images_params,
});
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.images;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},
//选择分类
bindTypeChange(e) {
this.setData({current_type: +e.detail.value})
},
//选择时间
bindTimeChange(e) {
this.setData({time:e.detail.value,hour:e.detail.value.split(':')[0],minute: e.detail.value.split(':')[1]})
// console.log(e.detail.value.split(':'),e.detail.value.split(':')[0],e.detail.value.split(':')[1]);
},
//选择日期
bindDateChange(e) {
this.setData({is_choose_date:true,date:e.detail.value,month:e.detail.value.split('-')[1],day: e.detail.value.split('-')[2]})
// console.log(e.detail.value.split('-'),e.detail.value.split('-')[1],e.detail.value.split('-')[2]);
if(this.data.is_choose_date && (this.data.date === this.data.start_date[0])) { //如果是当天,开始时间要控制在当前时间以后
this.setData({start_time:app.nowTime()})
}else {
this.setData({start_time:'00:00'})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getType();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
let self = this;
if(res.from === 'button') {
return {
title: self.data.title, // 默认是小程序的名称(可以写slogan等)
path: '/pages/activity/detail/detail?id=' + self.data.id, // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: self.data.images[0], //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
if (res.errMsg == 'shareAppMessage:ok') {
console.log('转发成功之后');
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + self.data.id})
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调(转发成不成功都会执行)
console.log('转发结束之后');
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + self.data.id})
}
}
}
// 设置菜单中的转发按钮触发转发事件时的转发内容
// var shareObj = {
// title: '火柴西路', // 默认是小程序的名称(可以写slogan等)
// path: '/pages/activity/detail/detail?id=' + this.data.id, // 默认是当前页面,必须是以‘/’开头的完整路径
// imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
// success: function (res) {
// if (res.errMsg == 'shareAppMessage:ok') {
// }
// },
// fail: function () {
// // 转发失败之后的回调
// if (res.errMsg == 'shareAppMessage:fail cancel') {
// // 用户取消转发
// } else if (res.errMsg == 'shareAppMessage:fail') {
// // 转发失败,其中 detail message 为详细失败信息
// }
// },
// complete: function () {
// // 转发结束之后的回调(转发成不成功都会执行)
// }
// }
},
// pages/activity/activity.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
images: [],
images_params:[],
type_picker_list:[],
start_date:app.nowDate(),
start_time:'',
title:'',
content:'',
min_num:'',
max_num:'',
date:'',
time:'',
address:'',
address_position:'',
over_time:'',
is_showRelease_modal:false,
},
//查看我的发布
goMyRelease() {
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + this.data.id})
},
//完成按钮
goBack() {
// wx.redirectTo({url:'/pages/spell-list/spell-list?current=' + 1})
},
disableScroll() {
},
handleBackground() {
this.setData({is_showRelease_modal:false,})
},
close() {
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + this.data.id})
},
//输入标题
inputTitle(e) {
this.setData({title:e.detail.value})
},
//输入内容
inputContent(e) {
this.setData({content:e.detail.value})
},
//输入最低人数
inputMinNum(e) {
this.setData({min_num:e.detail.value})
},
//输入最高人数
inputMaxNum(e) {
this.setData({max_num:e.detail.value});
},
//输入最高人数失去焦点时
maxNumBlur() {
if(+this.data.min_num > +this.data.max_num) {
wx.showToast({title:'最高人数要大于最低人数',icon:'none'});
this.setData({max_num:''});
}
},
//输入地点
inputAddress(e) {
this.setData({address:e.detail.value})
},
//获取地址
choosePosition() {
//选择当前地址,经纬度
const self = this;
wx.chooseLocation({
success(res) {
// console.log(res);
self.setData({address_position: res.address !== ''?res.address:res.name,latng:res.latitude + ',' + res.longitude})
},
})
//打开地图导航
// wx.getLocation({ //获取当前经纬度
// type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息
// success: function (res) {
// console.log('获取当前经纬度', res);
// wx.openLocation({//​使用微信内置地图查看位置。
// latitude: res.latitude,//要去的纬度-地址
// longitude: res.longitude,//要去的经度-地址
// name: "",
// address: ""
// })
// }
// })
},
//输入截止时间
inputOverTime(e) {
this.setData({over_time:e.detail.value});
if(this.data.over_time.indexOf('.') !== -1) {
wx.showToast({title:'截止时间为整数',icon:'none'});
this.setData({over_time:''});
}
// else {
// let newTime = new Date().getTime();//当前时间戳
// let end_time = app.preTime(this.data.date + ' ' +this.data.time, this.data.over_time);//截止时间
// let endTime = new Date(end_time).getTime(); //截止时间戳
// // console.log('newTime', 'endTime', 'end_time', endTime - newTime >=0,newTime, endTime, end_time,this.data.date + ' ' +this.data.time);
// console.log('开始时间和截止时间',this.data.date + ' ' +this.data.time,end_time);
// if (endTime - newTime <= 0) { //不可发布目前时间到截止小时內的订单
// wx.showToast({title:'截止时间无效',icon:'none'});
// this.setData({over_time:''})
// }
// }
// console.log(this.data.over_time.indexOf('.') !== -1);
},
//获取分类
getType() {
let url = '/portal/Send/select';
const list = [];
app.post(url, {}, {}).then((res) => {
// console.log('获取分类', res);
res.data.active.forEach((item) => {
list.push(item.name)
});
this.setData({type_picker_list: list,type_list: res.data.active})
})
},
//确定发布
confirmRelease(e) {
// console.log('e', e,e.detail.formId,'最高人数',this.data.max_num);
if(this.data.title === '') {
wx.showToast({title:'请填写标题',icon:'none'})
}else if(this.data.content === '') {
wx.showToast({title:'请填写描述',icon:'none'})
}else if(this.data.images_params.length === 0) {
wx.showToast({title:'请上传图片',icon:'none'})
}else if (this.data.min_num === '') {
wx.showToast({title:'请填写最低人数',icon:'none'})
}else if (this.data.max_num === '') {
wx.showToast({title:'请填写最高人数',icon:'none'})
}else if(this.data.current_type === undefined) {
wx.showToast({title:'请选择类别',icon:'none'})
}else if(this.data.date === '') {
wx.showToast({title:'请选择日期',icon:'none'})
}else if(this.data.time === '') {
wx.showToast({title:'请选择时间',icon:'none'})
}else if(this.data.address === '') {
wx.showToast({title:'请填写地点',icon:'none'})
}else if(this.data.address_position === '') {
wx.showToast({title:'请定位地址',icon:'none'})
}else if(this.data.over_time === '') {
wx.showToast({title:'请填写截止时间',icon:'none'})
}else {
this.data.type_list.forEach((item,index) => {
if(this.data.current_type === index) {
// console.log('index', index, item.id);
this.setData({type_id:item.id})
}
});
const images_params = this.data.images_params.join(',');
// console.log('发布-images_params', images_params);
let url = '/portal/Send/sendActivity';
let header = {
"XX-token": wx.getStorageSync('token')
};
let params = {
token: wx.getStorageSync('token'),
title: this.data.title,
content:this.data.content,
pic: images_params,
min:this.data.min_num,
max:this.data.max_num,
select_id: this.data.type_id,//类别
time: this.data.date + ' ' + this.data.time,
addr: this.data.address,
address: this.data.address_position,
latng: this.data.latng,
over_time:this.data.over_time,// 报名截止时间
formId: e.detail.formId,
};
app.post(url, params, {}).then((res) => {
console.log('确定发布', res);
if(+res.code === 1 && res.message == '发布成功') {
this.setData({is_showRelease_modal:true,id:+res.data.activeId})
}else {
if(res.message !== '截止时间不可小于当前时间') {
wx.showToast({title:res.message,icon:'none'})
}
}
// res.list.forEach((item) => {
// list.push(item.name)
// });
// console.log('list', list);
// this.setData({picker_list: list, student_list: res.list})
})
}
},
//上传图片
choose(e) { //这里是选取图片的方法
let that = this;
wx.chooseImage({
count: 6, //最多可以选择的图片总数
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
//启动上传等待中...
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
// console.log('tempFilePaths', tempFilePaths);
let token = wx.getStorageSync('token');
let uploadImgCount = 0;
for (let i = 0, h = tempFilePaths.length; i < h; i++) {
wx.uploadFile({
url: 'http://wmatchrd.com/portal/Index/upload',
filePath: tempFilePaths[i],
name: 'file',
formData: {
'imgIndex': i
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'XX-Token': token,
'XX-Device-Type': 'wxapp',
},
success: function(res) {
uploadImgCount++;
let data = JSON.parse(res.data);
console.log('data',data);
if (+data.code == 1) {
wx.hideToast();
//服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
let images = that.data.images;
let images_params = that.data.images_params;
images.push(data.data.preview_url);
images_params.push(data.data.filepath);
that.setData({
images: images,
images_params:images_params,
});
console.log('images---images_params',images,images_params)
//如果是最后一张,则隐藏等待中
// if (uploadImgCount == tempFilePaths.length) {
// wx.hideToast();
// }
} else {
wx.hideToast();
wx.showModal({
title: '提示',
content: data.msg,
showCancel: false
})
}
},
fail: function(res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function(res) {}
})
}
});
}
}
});
},
// 删除图片
deleteImg(e) {
var imgs = this.data.images;
var images_params = this.data.images_params;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
images_params.splice(index, 1);
this.setData({
images: imgs,
images_params:images_params,
});
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.images;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},
//选择分类
bindTypeChange(e) {
this.setData({current_type: +e.detail.value})
},
//选择时间
bindTimeChange(e) {
this.setData({time:e.detail.value,hour:e.detail.value.split(':')[0],minute: e.detail.value.split(':')[1]})
// console.log(e.detail.value.split(':'),e.detail.value.split(':')[0],e.detail.value.split(':')[1]);
},
//选择日期
bindDateChange(e) {
this.setData({is_choose_date:true,date:e.detail.value,month:e.detail.value.split('-')[1],day: e.detail.value.split('-')[2]})
// console.log(e.detail.value.split('-'),e.detail.value.split('-')[1],e.detail.value.split('-')[2]);
if(this.data.is_choose_date && (this.data.date === this.data.start_date[0])) { //如果是当天,开始时间要控制在当前时间以后
this.setData({start_time:app.nowTime()})
}else {
this.setData({start_time:'00:00'})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getType();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
let self = this;
if(res.from === 'button') {
return {
title: self.data.title, // 默认是小程序的名称(可以写slogan等)
path: '/pages/activity/detail/detail?id=' + self.data.id, // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: self.data.images[0], //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
if (res.errMsg == 'shareAppMessage:ok') {
console.log('转发成功之后');
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + self.data.id})
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调(转发成不成功都会执行)
console.log('转发结束之后');
wx.redirectTo({url:'/pages/activity/detail/detail?id=' + self.data.id})
}
}
}
// 设置菜单中的转发按钮触发转发事件时的转发内容
// var shareObj = {
// title: '火柴西路', // 默认是小程序的名称(可以写slogan等)
// path: '/pages/activity/detail/detail?id=' + this.data.id, // 默认是当前页面,必须是以‘/’开头的完整路径
// imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
// success: function (res) {
// if (res.errMsg == 'shareAppMessage:ok') {
// }
// },
// fail: function () {
// // 转发失败之后的回调
// if (res.errMsg == 'shareAppMessage:fail cancel') {
// // 用户取消转发
// } else if (res.errMsg == 'shareAppMessage:fail') {
// // 转发失败,其中 detail message 为详细失败信息
// }
// },
// complete: function () {
// // 转发结束之后的回调(转发成不成功都会执行)
// }
// }
},
})
\ No newline at end of file
... ...
/* pages/activity/activity.wxss */
.input-box {
border-top: 22rpx solid #eee;
padding: 40rpx 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-box input {
font-size: 24rpx;
color: #666666;
border-bottom: 1rpx solid #f2f2f2;
}
.input-box textarea {
font-size: 24rpx;
color: #666666;
margin-top: 20rpx;
height: 200rpx;
}
.placeholder {
font-size: 24rpx;
color:#C7C7C7;
}
.upload_box {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 32rpx;
}
.upload_img {
width: 184rpx;
height: 184rpx;
background: rgba(250, 250, 250, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.upload_img text {
color:#999;
font-size: 20rpx;
}
.upload_img:nth-child(5), .upload_img:nth-child(10){
margin-right: 0;
}
.upload_img image {
width: 100%;
height: 100%;
}
.icon_box {
display: block;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 2rpx;
height: 2rpx;
background-color: #fff;
position: absolute;
left: -12rpx;
top: -12rpx;
}
.icon-jia {
font-size: 60rpx;
color:#999;
}
.icon-shanchu1 {
display: block;
font-size: 44rpx;
color: rgba(0,0,0,0.4);
}
.set-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 20rpx;
margin-bottom:200rpx;
}
.min-num {
width: 50%;
display: flex;
align-items: center;
font-size: 24rpx;
color: #333333;
position: relative;
margin-bottom: 20rpx;
}
.min-num .title {
margin-right: 16rpx;
}
.time-title, .type-title, .address-title {
margin-right:16rpx;
width:96rpx;
text-align:right;
}
.limit-title {
width:96rpx;
text-align:right;
}
.min-num .input {
width: 160rpx;
height: 38rpx;
line-height: 38rpx;
border:1rpx solid #eee;
text-align: center;
padding: 0 4rpx;
min-height: 38rpx;
}
.min-num .min-icon {
font-size: 24rpx;
position: absolute;
right:86rpx;
top:50%;
transform: translate(0,-50%);
}
.num-box {
width:100%;
}
.icon-min {
position: absolute;
left:248rpx;
right:0;
}
.num-box .tips {
font-size: 18rpx;
color: #999999;
margin-left: 10rpx;
}
.time-box, .address-box {
display: flex;
align-items: center;
font-size: 24rpx;
color: #333333;
margin-bottom: 20rpx;
}
.time-box .select {
display: flex;
align-items: center;
}
.time-box .select .picker {
width: 80rpx;
height: 38rpx;
line-height: 38rpx;
border: 1rpx solid #eee;
position: relative;
padding-left: 10rpx;
}
.time-box .select .picker .min-icon {
font-size: 24rpx;
position: absolute;
right:10rpx;
top:50%;
transform: translate(0,-50%);
}
.margin {
margin: 0 10rpx;
}
.address-box .input {
width: 507rpx;
height: 38rpx;
min-height: 38rpx;
border:1rpx solid #eee;
padding: 0 10rpx;
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.icon-location {
color: #C7C7C7;
margin-left: 10rpx;
}
.time-limit {
display: flex;
align-items: center;
font-size: 24rpx;
color: #333333;
}
.time-limit input {
padding: 0 10rpx;
text-align: center;
width: 60rpx;
height: 38rpx;
line-height: 38rpx;
min-height: 38rpx;
border:1rpx solid #eee;
margin: 0 14rpx;
}
.complete {
width: 100%;
height: 90rpx;
line-height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #323232;
color:#E1C8AF;
font-size: 30rpx;
position: fixed;
left:0;
bottom:0;
margin: 0;
padding: 0;
border-radius: 0;
}
.complete::after {
border:0;
}
.modal {
width: 73%;
/* height: 1100rpx; */
background: #ffffff;
display: flex;
align-items: center;
flex-direction: column;
z-index:999;
position: fixed;
top: 48%;
left: 50%;
transform: translate(-50%,-50%);
padding: 46rpx 0rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 40rpx;
}
.modal image {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
margin-bottom: 34rpx;
}
.modal .title {
color: #333333;
font-size: 36rpx;
margin-bottom: 46rpx;
}
.modal .tips {
color: #333333;
font-size: 24rpx;
margin-bottom: 26rpx;
}
.modal .view-btn {
height: 66rpx;
width: 364rpx;
border:1rpx solid #323232;
border-radius: 6rpx;
color:#323232;
text-align: center;
line-height: 66rpx;
font-size: 30rpx;
}
.modal .complete-btn {
width: 364rpx;
height: 66rpx;
background-color: #323232;
border-radius: 6rpx;
color:#E2C8B1;
font-size: 30rpx;
text-align: center;
line-height: 66rpx;
margin-top: 26rpx;
}
/*弹框样式*/
.modal_box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.close-icon {
width: 100%;
display: flex;
align-items: flex-end;
}
.icon-x {
font-size: 40rpx;
color: #666666;
position: absolute;
right:20rpx;
top:20rpx;
/* pages/activity/activity.wxss */
.input-box {
border-top: 22rpx solid #eee;
padding: 40rpx 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-box input {
font-size: 24rpx;
color: #666666;
border-bottom: 1rpx solid #f2f2f2;
}
.input-box textarea {
font-size: 24rpx;
color: #666666;
margin-top: 20rpx;
height: 200rpx;
}
.placeholder {
font-size: 24rpx;
color:#C7C7C7;
}
.upload_box {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 32rpx;
}
.upload_img {
width: 184rpx;
height: 184rpx;
background: rgba(250, 250, 250, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.upload_img text {
color:#999;
font-size: 20rpx;
}
.upload_img:nth-child(5), .upload_img:nth-child(10){
margin-right: 0;
}
.upload_img image {
width: 100%;
height: 100%;
}
.icon_box {
display: block;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 2rpx;
height: 2rpx;
background-color: #fff;
position: absolute;
left: -12rpx;
top: -12rpx;
}
.icon-jia {
font-size: 60rpx;
color:#999;
}
.icon-shanchu1 {
display: block;
font-size: 44rpx;
color: rgba(0,0,0,0.4);
}
.set-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 20rpx;
margin-bottom:200rpx;
}
.min-num {
width: 50%;
display: flex;
align-items: center;
font-size: 24rpx;
color: #333333;
position: relative;
margin-bottom: 20rpx;
}
.min-num .title {
margin-right: 16rpx;
}
.time-title, .type-title, .address-title {
margin-right:16rpx;
width:96rpx;
text-align:right;
}
.limit-title {
width:96rpx;
text-align:right;
}
.min-num .input {
width: 160rpx;
height: 38rpx;
line-height: 38rpx;
border:1rpx solid #eee;
text-align: center;
padding: 0 4rpx;
min-height: 38rpx;
}
.min-num .min-icon {
font-size: 24rpx;
position: absolute;
right:86rpx;
top:50%;
transform: translate(0,-50%);
}
.num-box {
width:100%;
}
.icon-min {
position: absolute;
left:248rpx;
right:0;
}
.num-box .tips {
font-size: 18rpx;
color: #999999;
margin-left: 10rpx;
}
.time-box, .address-box {
display: flex;
align-items: center;
font-size: 24rpx;
color: #333333;
margin-bottom: 20rpx;
}
.time-box .select {
display: flex;
align-items: center;
}
.time-box .select .picker {
width: 80rpx;
height: 38rpx;
line-height: 38rpx;
border: 1rpx solid #eee;
position: relative;
padding-left: 10rpx;
}
.time-box .select .picker .min-icon {
font-size: 24rpx;
position: absolute;
right:10rpx;
top:50%;
transform: translate(0,-50%);
}
.margin {
margin: 0 10rpx;
}
.address-box .input {
width: 507rpx;
height: 38rpx;
min-height: 38rpx;
border:1rpx solid #eee;
padding: 0 10rpx;
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.icon-location {
color: #C7C7C7;
margin-left: 10rpx;
}
.time-limit {
display: flex;
align-items: center;
font-size: 24rpx;
color: #333333;
}
.time-limit input {
padding: 0 10rpx;
text-align: center;
width: 60rpx;
height: 38rpx;
line-height: 38rpx;
min-height: 38rpx;
border:1rpx solid #eee;
margin: 0 14rpx;
}
.complete {
width: 100%;
height: 90rpx;
line-height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #323232;
color:#E1C8AF;
font-size: 30rpx;
position: fixed;
left:0;
bottom:0;
margin: 0;
padding: 0;
border-radius: 0;
}
.complete::after {
border:0;
}
.modal {
width: 73%;
/* height: 1100rpx; */
background: #ffffff;
display: flex;
align-items: center;
flex-direction: column;
z-index:999;
position: fixed;
top: 48%;
left: 50%;
transform: translate(-50%,-50%);
padding: 46rpx 0rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 40rpx;
}
.modal image {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
margin-bottom: 34rpx;
}
.modal .title {
color: #333333;
font-size: 36rpx;
margin-bottom: 46rpx;
}
.modal .tips {
color: #333333;
font-size: 24rpx;
margin-bottom: 26rpx;
}
.modal .view-btn {
height: 66rpx;
width: 364rpx;
border:1rpx solid #323232;
border-radius: 6rpx;
color:#323232;
text-align: center;
line-height: 66rpx;
font-size: 30rpx;
}
.modal .complete-btn {
width: 364rpx;
height: 66rpx;
background-color: #323232;
border-radius: 6rpx;
color:#E2C8B1;
font-size: 30rpx;
text-align: center;
line-height: 66rpx;
margin-top: 26rpx;
}
/*弹框样式*/
.modal_box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.close-icon {
width: 100%;
display: flex;
align-items: flex-end;
}
.icon-x {
font-size: 40rpx;
color: #666666;
position: absolute;
right:20rpx;
top:20rpx;
}
\ No newline at end of file
... ...
// pages/activity/detail/detail.js
const app = getApp();
var t = null;
Page({
/**
* 页面的初始数据
*/
data: {
current_swiper: 0,
slide: [],
peopleList: [],
num: 1,
actEndTimeList: [],
is_zan: false,
display:false,
content:'',
is_ask:false,
is_reply:false,
placeholder:'输入您的留言',
is_showRelease_modal:false,
is_join:false,
img_heights: [], //图片宽度
img_width: 750, //默认
show_canvas: false,
can_save:false,
},
//获取图片真实宽度
imageLoad: function (e) {
var img_width = e.detail.width,
img_height = e.detail.height,
//宽高比
ratio = img_width / img_height;
// console.log(img_width, img_height);
//计算的高度值
var viewHeight = 750 / ratio;
var img_height = viewHeight;
var img_heights = this.data.img_heights;
//把每一张图片的对应的高度记录到数组里
img_heights[e.target.dataset.id] = img_height;
this.setData({
img_heights: img_heights
})
},
//查看我的订单
goMyOrder() {
this.setData({is_showRelease_modal:false,});
wx.navigateTo({url:'/pages/order/order-detail/order-detail?id=' + this.data.order_id})
},
//完成按钮
goBack() {
wx.redirectTo({url:'/pages/index/index'})
},
disableScroll() {
},
handleBackground() {
this.setData({is_showRelease_modal:false,})
},
// 问一问
ask(e) {
// console.log('前问一问-display', this.data.display);
this.setData({
display: !this.data.display,
is_ask:true,is_reply:false,
content:'' ,
placeholder:'输入您的留言',
});
// console.log('后问一问-display', this.data.display);
// wx.navigateTo({
// url: '/pages/comment/comment?activity_id=' + this.data.detail_id
// + '&common_id=' + 0
// })
// console.log('问',e.detail.value);
// this.setData({focus:true})
},
//输入评论内容
inputComment(e) {
this.setData({ content: e.detail.value });
},
//发送评论/回复
clickComment(e) {
// console.log('评论', e);
this.setData({ display: false });
if(this.data.content === '' ) {
wx.showToast({title:'请输入内容',icon:'none'})
}else {
let url = '/portal/Active/common';
let params = {
token:wx.getStorageSync('token'),
activeId:this.data.detail_id,
commonId: this.data.is_ask?0:this.data.commet_id,
content:this.data.content,
formId:e.detail.formId,
};
app.post(url,params,{}).then((res)=>{
// console.log('提交评论',res);
if(+res.code === 1) {
wx.showToast({title:this.data.is_ask?'留言成功':'回复成功',icon:'none',});
this.getDetail();
}
})
}
},
//评论input失去焦点
blur() {
this.setData({ display: false });
},
//点击键盘上的完成
confirm() {
this.setData({ display: false });
this.clickComment();
},
//回复
reply(e) {
// console.log('回复', e);
const id = e.currentTarget.dataset.id;
this.setData({
display: !this.data.display,
is_ask:false,is_reply:true,
commet_id:id,content:'' ,
placeholder:'输入您的回复',
});
// wx.navigateTo({
// url: '/pages/comment/comment?is_reply=' + true
// + '&activity_id=' + this.data.detail_id + '&common_id=' + id
// })
},
//收藏/取消收藏
collect() {
// console.log('收藏');
let self = this;
let url = '/portal/Active/collection';
let url_del = '/portal/Active/delCollection';
let header = {
"XX-Token": wx.getStorageSync('token')
};
let params = {
token: wx.getStorageSync('token'),
activeId: self.data.detail_id,
};
if (self.data.is_collect) {
app.post(url_del, params, header).then((res) => {
// console.log('取消收藏', res);
if (+res.code === 1) {
wx.showToast({title: res.message, icon: 'none'});
self.setData({
is_collect: 0
});
}
})
} else {
app.post(url, params, header).then((res) => {
// console.log('收藏', res);
if (+res.code === 1) {
wx.showToast({title: res.message, icon: 'none'});
self.setData({
is_collect: 1
});
}
})
}
},
//点赞
clickZan(e) {
let self = this;
const id = e.currentTarget.dataset.id;
const index = e.currentTarget.dataset.index;
let url = '/portal/Active/perfect';
let header = {
"XX-Token": wx.getStorageSync('token')
};
let params = {
token: wx.getStorageSync('token'),
commonId: id,
};
app.post(url, params, {}).then((res) => {
// console.log('点赞', res);
if (+res.code === 1) { //
wx.showToast({title: res.message, icon: 'none'});
self.setData({
[`commentList[${index}].is_prefect`]: true,
[`commentList[${index}].prefect`]: res.message == '该评论已赞'?+self.data.commentList[index].prefect:+self.data.commentList[index].prefect + 1,
});
// console.log('paise_user', paise_user);
}
})
},
swiperChange(e) {
// console.log(e);
this.setData({current_swiper: e.detail.current})
},
onPageScroll(e) {
// console.log('页面滚动', e);
if (e.scrollTop > 140) {
this.setData({hidden_top: true})
} else if (e.scrollTop <= 140) {
this.setData({hidden_top: false})
}
},
// 增加数量
addCount(e) {
// let k = e.currentTarget.dataset.idx;
// let t = e.currentTarget.dataset.children_idx;
// let cartslist = this.data.cartslist;
// let num = cartslist[k].children[t].num;
// let product_id = cartslist[k].children[t].product_id;
let num = this.data.num;
num++;
this.setData({
num: num
});
},
// 减少数量
minusCount(e) {
let num = this.data.num;
if (num <= 1) {
return false;
}
num--;
this.setData({
num: num
});
},
//获取详情
getDetail() {
const self = this;
// console.log('city', self.data.city);
let url = '/portal/Active/activeDetail';
let params = {
activeId: self.data.detail_id,
token: wx.getStorageSync('token'),
};
let header = {
"token": wx.getStorageSync('token')
};
app.post(url, params, {}).then((res) => {
// console.log('获取详情', res, app.initTime(res.data.active.surplus));
if (+res.code === 1) {
self.setData({
detail: res.data.active,
'detail.time': app.initTime(res.data.active.surplus),
end_time: res.data.active.time,
over_hours: res.data.active.over_time,//几小时截止
join_people: res.data.son,
commentList: res.data.common,
is_collect: res.data.is_collect,
count: res.data.count, // 留言板
is_send:res.data.is_send,//能否参加1:不能2:能
});
self.getCode();//获取二维码(此二维码不能进入活动详情,已改为小程序码)
// (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除
const status = res.data.active.status;
if (status === 2 || status === 6 || status === 7 || status === 8) {
// console.log('调用倒计时');
self.countDown();
} else {
// console.log('不调用倒计时');
let countDownArr = [];
let obj = null;
obj = {
day: '00',
hou: '00',
min: '00',
sec: '00'
};
countDownArr.push(obj);
this.setData({
'detail.time': countDownArr,
});
}
}
// wx.hideLoading()
})
},
timeFormat(param) { //小于10的格式化函数
return param < 10 ? '0' + param : param;
},
time() {
const self = this;
self.data.detail.surplus--;
//定時器,每秒重新計算
// setTimeout(function () {
// self.time();
// },1000)
},
countDown() { //倒计时函数
t = setTimeout(this.countDown, 1000);
let countDownArr = [];
let obj = null;
if (this.data.detail.surplus > 0) { //未结束
this.time();
// console.log('surplus', this.data.detail.surplus);
// t = setTimeout(this.countDown, 1000);
const time = app.initTime(this.data.detail.surplus);
// console.log('time', time);
obj = {
day: time[0].day,
hou: time[0].hou,
min: time[0].min,
sec: time[0].sec
};
t;
} else {
obj = {
day: '00',
hou: '00',
min: '00',
sec: '00'
};
clearTimeout(t);
this.end();
}
countDownArr.push(obj);
// 渲染,然后每隔一秒执行一次倒计时函数
this.setData({
// countDownList: countDownArr,
'detail.time': countDownArr,
});
// console.log('time',this.data.detail.time);
},
//倒计时结束
end() {
const self = this;
let url = '/portal/Active/activity';
let params = {
activeId: self.data.detail_id,
};
let header = {
"token": wx.getStorageSync('token')
};
app.post(url, params, {}).then((res) => {
// console.log('倒计时结束', res);
if (+res.code === 1) {
// wx.showToast({title:'拼活动结束',icon:'success'})
}
})
},
//导航
getNavigate() {
const self = this;
const arr = self.data.detail.latng.split(',');
// console.log('arr', arr, arr[0], arr[1]);
wx.openLocation({//​使用微信内置地图查看位置。
latitude: +arr[1],//要去的纬度-地址
longitude: +arr[0],//要去的经度-地址
// lat:39.086437,
// lng:117.122583,
name: self.data.detail.address,
address: self.data.detail.address
})
},
//确认拼活动
confirmJoin(e) {
const self = this;
// console.log('已参与人数',self.data.join_people.length);
// if(+self.data.is_send === 2){ //可参与
// if(self.data.join_people.length + self.data.num > self.data.detail.max) {
// wx.showToast({title:'参加人数已超过剩余名额',icon:'none'})
// }else if(self.data.join_people.length + self.data.num == self.data.detail.max){
// wx.showToast({title:'名额已满',icon:'none'})
// } else {
let url = '/portal/Active/join';
let params = {
token: wx.getStorageSync('token'),
number: self.data.num,
activeId: self.data.detail_id,
formId: e.detail.formId,
};
let header = {
"token": wx.getStorageSync('token')
};
app.post(url, params, {}).then((res) => {
// console.log('确认拼活动', res);
if (+res.code === 1) {
// wx.showToast({title: '拼活动成功', icon: 'success'});
self.setData({is_showRelease_modal:true,order_id:+res.data.orderId,is_join:true});
self.getDetail();
}else if(+res.code === 0) { //参与失败按钮还是确认拼活动
self.setData({is_join:false});
}
})
// }
// }
},
//获取活动二维码
getCode() {
const self = this;
let url = '/portal/Index/qrCode';
let params = {
id: self.data.detail_id,
token:wx.getStorageSync('token'),
type:2,//1拼活动,2拼餐
};
app.post(url, params, {}).then((res) => {
// console.log('获取活动二维码', res);
if (+res.code === 1) {
self.setData({qr_code:res.data},() => {
// console.log('二维码',self.data.qr_code);
wx.getImageInfo({
src: 'http://' + self.data.qr_code,
success(res) {
// console.log('二维码本地路径',res);
self.setData({local_qr_code:res.path});
self.getLocalImage();
},
fail() {
console.log('失败');
}
})
});
}
})
},
//点击分享
share() {
this.setData({show_canvas: true}, () => {
this.drawCard();
})
},
hideCanvasMask() {
// this.setData({show_canvas: true});
},
//关闭分享卡片
closeCanvas() {
this.setData({show_canvas: false});
// wx.navigateBack({delta:1})
},
//保存图片到手机相册
saveToPhone() {
this.getPower();
},
//详情图链接转成本地路径
getLocalImage() {
const self = this;
wx.getImageInfo({
src: self.data.detail.banner[0],
success(res) {
// console.log('详情图本地路径',res);
self.setData({local_img:res.path});
self.drawCard();
// console.log(res.width)
// console.log(res.height)
}
})
},
// 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
const self = this;
// 开始绘制
ctx.beginPath()
// 绘制左上角圆弧 Math.PI = 180度
// 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
// 绘制border-top
// 移动起点位置 x终点、y终点
ctx.moveTo(x + r, y)
// 画一条线 x终点、y终点
ctx.lineTo(x + w - r, y)
// self.data.ctx.lineTo(x + w, y + r)
// 绘制右上角圆弧
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
// 绘制border-right
ctx.lineTo(x + w, y + h - r)
// self.data.ctx.lineTo(x + w - r, y + h)
// 绘制右下角圆弧
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
// 绘制border-bottom
ctx.lineTo(x + r, y + h)
// self.data.ctx.lineTo(x, y + h - r)
// 绘制左下角圆弧
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
// 绘制border-left
ctx.lineTo(x, y + r)
// self.data.ctx.lineTo(x + r, y)
if (fillColor) {
// 因为边缘描边存在锯齿,最好指定使用 transparent 填充
ctx.setFillStyle(fillColor)
// 对绘画区域填充
ctx.fill()
}
if (strokeColor) {
// 因为边缘描边存在锯齿,最好指定使用 transparent 填充
ctx.setStrokeStyle(strokeColor)
// 画出当前路径的边框
ctx.stroke()
}
// 关闭一个路径
// self.data.ctx.closePath()
// 剪切,剪切之后的绘画绘制剪切区域内进行,需要save与restore
ctx.clip()
},
drawCard() {
// console.log('开始画');
const self = this;
//先创建一个画布
const ctx = wx.createCanvasContext("canvas");
self.setData({ctx:ctx});
// self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
// self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
// ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
// ctx.setFillStyle('#ffffff');
// ctx.fill();
// ctx.clip();
//填充背景色
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 280, 400);
// console.log(self.data.local_img);
// console.log(self.data.qr_code);
//将图片转化为画布
ctx.drawImage(self.data.local_img, 0, 0, 280, 280);//详情图
// console.log(111);
// ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
ctx.drawImage('../../../images/qr_code.jpg', 180, 320, 60, 60);//小程序码
//标题
ctx.setFontSize(12);
ctx.setFillStyle('#000');
ctx.textAlign = "left";
// console.log(111);
ctx.fillText(self.data.detail.title, 16, 306.5);
ctx.fillText(self.data.detail.title, 15.5, 307);
ctx.restore();
//地点
ctx.setFontSize(9);
ctx.setFillStyle('#000000');
ctx.fillText('地点:', 16, 325);
const text = self.data.detail.name;
var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
var temp = "";
var row = [];
ctx.setFontSize(9);
ctx.setFillStyle('#000000');
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < 100) {
temp += chr[a];
}
else {
a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
//如果数组长度大于1 则截取前1个
if (row.length > 1) {
var rowCut = row.slice(0, 1);
var rowPart = rowCut[0];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (ctx.measureText(test).width < 100) {
test += rowPart[a];
}
else {
break;
}
}
empty.push(test);
var group = empty[0] + "...";//这里只显示一行,超出的用...表示
rowCut.splice(0, 1, group);
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
ctx.fillText(row[b], 40, 325 + b * 16, 150);
}
ctx.restore();
//时间
ctx.setFontSize(9);
ctx.setFillStyle('#333333');
ctx.fillText('时间:', 16, 340);
ctx.fillText(self.data.end_time, 40, 340);
ctx.restore();
// ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
//成功执行,draw方法中进行回调
ctx.draw(true, function () {
// wx.hideLoading();
console.log("draw callback success");
self.setData({can_save: true,show_canvas: true});
// console.log(self.data.can_save);
})
},
//获取保存到相册的权限
getPower() {
const that = this;
//保存临时图片
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() { //这里是用户同意授权后的回调
that.savePic();
},
fail() { //这里是用户拒绝授权后的回调
wx.showModal({
title: '提示',
content: '若不打开授权,则无法将图片保存在相册中!',
showCancel: true,
cancelText: '暂不授权',
cancelColor: '#000000',
confirmText: '去授权',
confirmColor: '#3CC51F',
success: function (res) {
if (res.confirm) {
wx.openSetting({
//调起客户端小程序设置界面,返回用户设置的操作结果。
success: function (ret) {
if (ret.authSetting["scope.writePhotosAlbum"] == true) {
wx.showToast({
title: '授权成功',
icon: 'none',
duration: 1000
});
//再次授权,保存到相册
that.savePic();
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
// console.log('用户点击取消')
}
}
})
}
})
} else { //用户已经授权过了
console.log('用户已经授权过了')
that.savePic();
}
}
});
},
savePic() {
// console.log('是否能保存',this.data.can_save);
if(this.data.can_save) {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 280,
height: 400,
destWidth: 840,//是width的3倍
destHeight: 1280,//是高的3.2倍
canvasId: 'canvas',
fileType: 'jpg',
quality:1,
success: function (res) {
// console.log("get tempfilepath(success) is:", res.tempFilePath);
//将图片保存在系统相册中(应先获取权限,)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({title:'保存成功',icon:'none'});
console.log("save photo is success")
},
fail: function () {
wx.showToast({title:'保存失败',icon:'none'});
console.log("save photo is fail")
}
})
},
fail: function () {
console.log('get tempfilepath is fail')
}
})
}else {
wx.showLoading({title:'加载中',icon:'loading',duration:1000})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log('详情options', options);
this.setData({detail_id: +options.id ? +options.id : ''});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getDetail();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
clearTimeout(t)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
// console.log('转发res',res);
let self = this;
if(res.from === 'button') {
return {
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
if (res.errMsg == 'shareAppMessage:ok') {
console.log('转发成功之后');
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调(转发成不成功都会执行)
console.log('转发结束之后');
}
}
}else {
return {
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
if (res.errMsg == 'shareAppMessage:ok') {
console.log('转发成功之后');
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调(转发成不成功都会执行)
console.log('转发结束之后');
}
}
}
},
// pages/activity/detail/detail.js
const app = getApp();
var t = null;
Page({
/**
* 页面的初始数据
*/
data: {
current_swiper: 0,
slide: [],
peopleList: [],
num: 1,
actEndTimeList: [],
is_zan: false,
display:false,
content:'',
is_ask:false,
is_reply:false,
placeholder:'输入您的留言',
is_showRelease_modal:false,
is_join:false,
img_heights: [], //图片宽度
img_width: 750, //默认
show_canvas: false,
can_save:false,
},
//获取图片真实宽度
imageLoad: function (e) {
var img_width = e.detail.width,
img_height = e.detail.height,
//宽高比
ratio = img_width / img_height;
// console.log(img_width, img_height);
//计算的高度值
var viewHeight = 750 / ratio;
var img_height = viewHeight;
var img_heights = this.data.img_heights;
//把每一张图片的对应的高度记录到数组里
img_heights[e.target.dataset.id] = img_height;
this.setData({
img_heights: img_heights
})
},
//查看我的订单
goMyOrder() {
this.setData({is_showRelease_modal:false,});
wx.navigateTo({url:'/pages/order/order-detail/order-detail?id=' + this.data.order_id})
},
//完成按钮
goBack() {
wx.redirectTo({url:'/pages/index/index'})
},
disableScroll() {
},
handleBackground() {
this.setData({is_showRelease_modal:false,})
},
// 问一问
ask(e) {
// console.log('前问一问-display', this.data.display);
this.setData({
display: !this.data.display,
is_ask:true,is_reply:false,
content:'' ,
placeholder:'输入您的留言',
});
// console.log('后问一问-display', this.data.display);
// wx.navigateTo({
// url: '/pages/comment/comment?activity_id=' + this.data.detail_id
// + '&common_id=' + 0
// })
// console.log('问',e.detail.value);
// this.setData({focus:true})
},
//输入评论内容
inputComment(e) {
this.setData({ content: e.detail.value });
},
//发送评论/回复
clickComment(e) {
// console.log('评论', e);
this.setData({ display: false });
if(this.data.content === '' ) {
wx.showToast({title:'请输入内容',icon:'none'})
}else {
let url = '/portal/Active/common';
let params = {
token:wx.getStorageSync('token'),
activeId:this.data.detail_id,
commonId: this.data.is_ask?0:this.data.commet_id,
content:this.data.content,
formId:e.detail.formId,
};
app.post(url,params,{}).then((res)=>{
// console.log('提交评论',res);
if(+res.code === 1) {
wx.showToast({title:this.data.is_ask?'留言成功':'回复成功',icon:'none',});
this.getDetail();
}
})
}
},
//评论input失去焦点
blur() {
this.setData({ display: false });
},
//点击键盘上的完成
confirm() {
this.setData({ display: false });
this.clickComment();
},
//回复
reply(e) {
// console.log('回复', e);
const id = e.currentTarget.dataset.id;
this.setData({
display: !this.data.display,
is_ask:false,is_reply:true,
commet_id:id,content:'' ,
placeholder:'输入您的回复',
});
// wx.navigateTo({
// url: '/pages/comment/comment?is_reply=' + true
// + '&activity_id=' + this.data.detail_id + '&common_id=' + id
// })
},
//收藏/取消收藏
collect() {
// console.log('收藏');
let self = this;
let url = '/portal/Active/collection';
let url_del = '/portal/Active/delCollection';
let header = {
"XX-Token": wx.getStorageSync('token')
};
let params = {
token: wx.getStorageSync('token'),
activeId: self.data.detail_id,
};
if (self.data.is_collect) {
app.post(url_del, params, header).then((res) => {
// console.log('取消收藏', res);
if (+res.code === 1) {
wx.showToast({title: res.message, icon: 'none'});
self.setData({
is_collect: 0
});
}
})
} else {
app.post(url, params, header).then((res) => {
// console.log('收藏', res);
if (+res.code === 1) {
wx.showToast({title: res.message, icon: 'none'});
self.setData({
is_collect: 1
});
}
})
}
},
//点赞
clickZan(e) {
let self = this;
const id = e.currentTarget.dataset.id;
const index = e.currentTarget.dataset.index;
let url = '/portal/Active/perfect';
let header = {
"XX-Token": wx.getStorageSync('token')
};
let params = {
token: wx.getStorageSync('token'),
commonId: id,
};
app.post(url, params, {}).then((res) => {
// console.log('点赞', res);
if (+res.code === 1) { //
wx.showToast({title: res.message, icon: 'none'});
self.setData({
[`commentList[${index}].is_prefect`]: true,
[`commentList[${index}].prefect`]: res.message == '该评论已赞'?+self.data.commentList[index].prefect:+self.data.commentList[index].prefect + 1,
});
// console.log('paise_user', paise_user);
}
})
},
swiperChange(e) {
// console.log(e);
this.setData({current_swiper: e.detail.current})
},
onPageScroll(e) {
// console.log('页面滚动', e);
if (e.scrollTop > 140) {
this.setData({hidden_top: true})
} else if (e.scrollTop <= 140) {
this.setData({hidden_top: false})
}
},
// 增加数量
addCount(e) {
// let k = e.currentTarget.dataset.idx;
// let t = e.currentTarget.dataset.children_idx;
// let cartslist = this.data.cartslist;
// let num = cartslist[k].children[t].num;
// let product_id = cartslist[k].children[t].product_id;
let num = this.data.num;
num++;
this.setData({
num: num
});
},
// 减少数量
minusCount(e) {
let num = this.data.num;
if (num <= 1) {
return false;
}
num--;
this.setData({
num: num
});
},
//获取详情
getDetail() {
const self = this;
// console.log('city', self.data.city);
let url = '/portal/Active/activeDetail';
let params = {
activeId: self.data.detail_id,
token: wx.getStorageSync('token'),
};
let header = {
"token": wx.getStorageSync('token')
};
app.post(url, params, {}).then((res) => {
// console.log('获取详情', res, app.initTime(res.data.active.surplus));
if (+res.code === 1) {
self.setData({
detail: res.data.active,
'detail.time': app.initTime(res.data.active.surplus),
end_time: res.data.active.time,
over_hours: res.data.active.over_time,//几小时截止
join_people: res.data.son,
commentList: res.data.common,
is_collect: res.data.is_collect,
count: res.data.count, // 留言板
is_send:res.data.is_send,//能否参加1:不能2:能
});
self.getCode();//获取二维码(此二维码不能进入活动详情,已改为小程序码)
// (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除
const status = res.data.active.status;
if (status === 2 || status === 6 || status === 7 || status === 8) {
// console.log('调用倒计时');
self.countDown();
} else {
// console.log('不调用倒计时');
let countDownArr = [];
let obj = null;
obj = {
day: '00',
hou: '00',
min: '00',
sec: '00'
};
countDownArr.push(obj);
this.setData({
'detail.time': countDownArr,
});
}
}
// wx.hideLoading()
})
},
timeFormat(param) { //小于10的格式化函数
return param < 10 ? '0' + param : param;
},
time() {
const self = this;
self.data.detail.surplus--;
//定時器,每秒重新計算
// setTimeout(function () {
// self.time();
// },1000)
},
countDown() { //倒计时函数
t = setTimeout(this.countDown, 1000);
let countDownArr = [];
let obj = null;
if (this.data.detail.surplus > 0) { //未结束
this.time();
// console.log('surplus', this.data.detail.surplus);
// t = setTimeout(this.countDown, 1000);
const time = app.initTime(this.data.detail.surplus);
// console.log('time', time);
obj = {
day: time[0].day,
hou: time[0].hou,
min: time[0].min,
sec: time[0].sec
};
t;
} else {
obj = {
day: '00',
hou: '00',
min: '00',
sec: '00'
};
clearTimeout(t);
this.end();
}
countDownArr.push(obj);
// 渲染,然后每隔一秒执行一次倒计时函数
this.setData({
// countDownList: countDownArr,
'detail.time': countDownArr,
});
// console.log('time',this.data.detail.time);
},
//倒计时结束
end() {
const self = this;
let url = '/portal/Active/activity';
let params = {
activeId: self.data.detail_id,
};
let header = {
"token": wx.getStorageSync('token')
};
app.post(url, params, {}).then((res) => {
// console.log('倒计时结束', res);
if (+res.code === 1) {
// wx.showToast({title:'拼活动结束',icon:'success'})
}
})
},
//导航
getNavigate() {
const self = this;
const arr = self.data.detail.latng.split(',');
// console.log('arr', arr, arr[0], arr[1]);
wx.openLocation({//​使用微信内置地图查看位置。
latitude: +arr[1],//要去的纬度-地址
longitude: +arr[0],//要去的经度-地址
// lat:39.086437,
// lng:117.122583,
name: self.data.detail.address,
address: self.data.detail.address
})
},
//确认拼活动
confirmJoin(e) {
const self = this;
// console.log('已参与人数',self.data.join_people.length);
// if(+self.data.is_send === 2){ //可参与
// if(self.data.join_people.length + self.data.num > self.data.detail.max) {
// wx.showToast({title:'参加人数已超过剩余名额',icon:'none'})
// }else if(self.data.join_people.length + self.data.num == self.data.detail.max){
// wx.showToast({title:'名额已满',icon:'none'})
// } else {
let url = '/portal/Active/join';
let params = {
token: wx.getStorageSync('token'),
number: self.data.num,
activeId: self.data.detail_id,
formId: e.detail.formId,
};
let header = {
"token": wx.getStorageSync('token')
};
app.post(url, params, {}).then((res) => {
// console.log('确认拼活动', res);
if (+res.code === 1) {
// wx.showToast({title: '拼活动成功', icon: 'success'});
self.setData({is_showRelease_modal:true,order_id:+res.data.orderId,is_join:true});
self.getDetail();
}else if(+res.code === 0) { //参与失败按钮还是确认拼活动
self.setData({is_join:false});
}
})
// }
// }
},
//获取活动二维码
getCode() {
const self = this;
let url = '/portal/Index/qrCode';
let params = {
id: self.data.detail_id,
token:wx.getStorageSync('token'),
type:2,//1拼活动,2拼餐
};
app.post(url, params, {}).then((res) => {
// console.log('获取活动二维码', res);
if (+res.code === 1) {
self.setData({qr_code:res.data},() => {
// console.log('二维码',self.data.qr_code);
wx.getImageInfo({
src: 'http://' + self.data.qr_code,
success(res) {
// console.log('二维码本地路径',res);
self.setData({local_qr_code:res.path});
self.getLocalImage();
},
fail() {
console.log('失败');
}
})
});
}
})
},
//点击分享
share() {
this.setData({show_canvas: true}, () => {
this.drawCard();
})
},
hideCanvasMask() {
// this.setData({show_canvas: true});
},
//关闭分享卡片
closeCanvas() {
this.setData({show_canvas: false});
// wx.navigateBack({delta:1})
},
//保存图片到手机相册
saveToPhone() {
this.getPower();
},
//详情图链接转成本地路径
getLocalImage() {
const self = this;
wx.getImageInfo({
src: self.data.detail.banner[0],
success(res) {
// console.log('详情图本地路径',res);
self.setData({local_img:res.path});
self.drawCard();
// console.log(res.width)
// console.log(res.height)
}
})
},
// 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
const self = this;
// 开始绘制
ctx.beginPath()
// 绘制左上角圆弧 Math.PI = 180度
// 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
// 绘制border-top
// 移动起点位置 x终点、y终点
ctx.moveTo(x + r, y)
// 画一条线 x终点、y终点
ctx.lineTo(x + w - r, y)
// self.data.ctx.lineTo(x + w, y + r)
// 绘制右上角圆弧
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
// 绘制border-right
ctx.lineTo(x + w, y + h - r)
// self.data.ctx.lineTo(x + w - r, y + h)
// 绘制右下角圆弧
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
// 绘制border-bottom
ctx.lineTo(x + r, y + h)
// self.data.ctx.lineTo(x, y + h - r)
// 绘制左下角圆弧
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
// 绘制border-left
ctx.lineTo(x, y + r)
// self.data.ctx.lineTo(x + r, y)
if (fillColor) {
// 因为边缘描边存在锯齿,最好指定使用 transparent 填充
ctx.setFillStyle(fillColor)
// 对绘画区域填充
ctx.fill()
}
if (strokeColor) {
// 因为边缘描边存在锯齿,最好指定使用 transparent 填充
ctx.setStrokeStyle(strokeColor)
// 画出当前路径的边框
ctx.stroke()
}
// 关闭一个路径
// self.data.ctx.closePath()
// 剪切,剪切之后的绘画绘制剪切区域内进行,需要save与restore
ctx.clip()
},
drawCard() {
// console.log('开始画');
const self = this;
//先创建一个画布
const ctx = wx.createCanvasContext("canvas");
self.setData({ctx:ctx});
// self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
// self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
// ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
// ctx.setFillStyle('#ffffff');
// ctx.fill();
// ctx.clip();
//填充背景色
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 280, 400);
// console.log(self.data.local_img);
// console.log(self.data.qr_code);
//将图片转化为画布
ctx.drawImage(self.data.local_img, 0, 0, 280, 280);//详情图
// console.log(111);
// ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
ctx.drawImage('../../../images/qr_code.jpg', 180, 320, 60, 60);//小程序码
//标题
ctx.setFontSize(12);
ctx.setFillStyle('#000');
ctx.textAlign = "left";
// console.log(111);
ctx.fillText(self.data.detail.title, 16, 306.5);
ctx.fillText(self.data.detail.title, 15.5, 307);
ctx.restore();
//地点
ctx.setFontSize(9);
ctx.setFillStyle('#000000');
ctx.fillText('地点:', 16, 325);
const text = self.data.detail.name;
var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
var temp = "";
var row = [];
ctx.setFontSize(9);
ctx.setFillStyle('#000000');
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < 100) {
temp += chr[a];
}
else {
a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
//如果数组长度大于1 则截取前1个
if (row.length > 1) {
var rowCut = row.slice(0, 1);
var rowPart = rowCut[0];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (ctx.measureText(test).width < 100) {
test += rowPart[a];
}
else {
break;
}
}
empty.push(test);
var group = empty[0] + "...";//这里只显示一行,超出的用...表示
rowCut.splice(0, 1, group);
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
ctx.fillText(row[b], 40, 325 + b * 16, 150);
}
ctx.restore();
//时间
ctx.setFontSize(9);
ctx.setFillStyle('#333333');
ctx.fillText('时间:', 16, 340);
ctx.fillText(self.data.end_time, 40, 340);
ctx.restore();
// ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
//成功执行,draw方法中进行回调
ctx.draw(true, function () {
// wx.hideLoading();
console.log("draw callback success");
self.setData({can_save: true,show_canvas: true});
// console.log(self.data.can_save);
})
},
//获取保存到相册的权限
getPower() {
const that = this;
//保存临时图片
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() { //这里是用户同意授权后的回调
that.savePic();
},
fail() { //这里是用户拒绝授权后的回调
wx.showModal({
title: '提示',
content: '若不打开授权,则无法将图片保存在相册中!',
showCancel: true,
cancelText: '暂不授权',
cancelColor: '#000000',
confirmText: '去授权',
confirmColor: '#3CC51F',
success: function (res) {
if (res.confirm) {
wx.openSetting({
//调起客户端小程序设置界面,返回用户设置的操作结果。
success: function (ret) {
if (ret.authSetting["scope.writePhotosAlbum"] == true) {
wx.showToast({
title: '授权成功',
icon: 'none',
duration: 1000
});
//再次授权,保存到相册
that.savePic();
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
// console.log('用户点击取消')
}
}
})
}
})
} else { //用户已经授权过了
console.log('用户已经授权过了')
that.savePic();
}
}
});
},
savePic() {
// console.log('是否能保存',this.data.can_save);
if(this.data.can_save) {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 280,
height: 400,
destWidth: 840,//是width的3倍
destHeight: 1280,//是高的3.2倍
canvasId: 'canvas',
fileType: 'jpg',
quality:1,
success: function (res) {
// console.log("get tempfilepath(success) is:", res.tempFilePath);
//将图片保存在系统相册中(应先获取权限,)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({title:'保存成功',icon:'none'});
console.log("save photo is success")
},
fail: function () {
wx.showToast({title:'保存失败',icon:'none'});
console.log("save photo is fail")
}
})
},
fail: function () {
console.log('get tempfilepath is fail')
}
})
}else {
wx.showLoading({title:'加载中',icon:'loading',duration:1000})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log('详情options', options);
this.setData({detail_id: +options.id ? +options.id : ''});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getDetail();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
clearTimeout(t)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
// console.log('转发res',res);
let self = this;
if(res.from === 'button') {
return {
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
if (res.errMsg == 'shareAppMessage:ok') {
console.log('转发成功之后');
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调(转发成不成功都会执行)
console.log('转发结束之后');
}
}
}else {
return {
title: self.data.detail.title, // 默认是小程序的名称(可以写slogan等)
path: '/pages/activity/detail/detail?id=' + self.data.detail_id, // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
if (res.errMsg == 'shareAppMessage:ok') {
console.log('转发成功之后');
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调(转发成不成功都会执行)
console.log('转发结束之后');
}
}
}
},
})
\ No newline at end of file
... ...
<!--pages/activity/detail/detail.wxml-->
<view class="content">
<!--swiper-->
<view class="head">
<view class="position {{hidden_top?'hidden-active':'visible-active'}}">
<view class="left">
<!--<image src="../../../images/avatar@2x.png" class="user-avatar"></image>-->
<image src="{{detail.userPic}}" class="user-avatar"></image>
<block wx:if="{{detail.userType ===1}}"><!--userType 1注册用户,2后台用户(金v)-->
<image src="{{detail.sex === 1?'../../../images/man.png':'../../../images/women.png'}}"
class="sex-icon"></image>
</block>
<block wx:if="{{detail.userType ===2}}">
<text class="iconfont icon-vip sex-icon"></text>
</block>
<text>{{detail.userName}}</text>
</view>
<view class="right">
<view class="collect" bindtap="collect">
<view class="iconfont icon-shoucang" wx:if="{{!is_collect}}"></view>
<view class="iconfont icon-shoucang2" wx:if="{{is_collect}}"></view>
<text>收藏</text>
</view>
<!--&lt;!&ndash;未收藏&ndash;&gt;-->
<!--<view class='collect_box' catchtap='sethits_yes' data-index='{{index}}' wx:if='{{items.is_hits==0}}'>-->
<!--<text class='iconfont icon-shoucang1 '></text>-->
<!--<text class="collect_word">收藏</text>-->
<!--</view>-->
<!--&lt;!&ndash;已收藏&ndash;&gt;-->
<!--<view class='collect_box active' catchtap='sethits_no' data-index='{{index}}' wx:else>-->
<!--<text class='iconfont icon-shoucang0 star2'></text>-->
<!--<text class="collect_word">收藏</text>-->
<!--</view>-->
<view class="share" bindtap="share">
<view class="iconfont icon-fenxiang2"></view>
<text>分享</text>
</view>
<!--<button class="share" open-type="share">-->
<!--<view class="iconfont icon-fenxiang2"></view>-->
<!--<text>分享</text>-->
<!--</button>-->
</view>
</view>
<view class='wrap_note canvas-mask' wx:if="{{show_canvas}}" bindtap='hideCanvasMask'>
<view class="shadow">
<canvas class='canvas-poster' canvas-id='canvas'></canvas>
<view class="button-box">
<text bindtap="saveToPhone" class="save-to-phone">保存图片</text>
<button class="share-btn" open-type="share">分享给好友</button>
</view>
</view>
<view class="close-btn" bindtap="closeCanvas"><text class="iconfont icon-guanbi"></text></view>
</view>
<swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
autoplay="{{true}}" interval="3000" duration="1000"
style="height:{{img_heights[current_swiper]}}rpx;">
<block wx:for="{{detail.banner}}" wx:key="index">
<navigator url="{{item}}" hover-class="navigator-hover">
<swiper-item>
<image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix"
bindload="imageLoad"/>
<!--<image src="http://pk86rwhci.bkt.clouddn.com/banner.png" class="slide-image"></image>-->
</swiper-item>
</navigator>
</block>
</swiper>
<view class="dots">
<block wx:for="{{detail.banner}}" wx:key="index" wx:for-index="idx">
<view class="dot{{idx == current_swiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<!--地点-->
<view class="area-box">
<view class="title-box">
<view class="title">{{detail.title}}</view>
<view class="over-time">
<text class='' wx:if="{{detail.time[0].day !== '00'}}">{{detail.time[0].day}}天{{detail.time[0].hou}}:{{detail.time[0].min}}:{{detail.time[0].sec}}</text>
<text class='' wx:else="">{{detail.time[0].hou}}:{{detail.time[0].min}}:{{detail.time[0].sec}}</text>
<text class="text">后结束</text>
</view>
<!--<view>-->
<!--<text class=''>{{detail.time[0].hou}}</text>-->
<!--<text>:</text>-->
<!--<text class=''>{{detail.time[0].min}}</text>-->
<!--<text>:</text>-->
<!--<text class=' '>{{detail.time[0].sec}}</text>-->
<!--</view>-->
</view>
<view class="area-content">
<text>{{detail.content}}</text>
</view>
</view>
<!--详细时间-->
<view class="detail-box">
<text>类别:{{detail.selectName}}</text>
<text>时间:{{end_time}}</text>
<text>地点:{{detail.name}}</text>
<view class="position" bindtap="getNavigate">
<text class="address">地址:{{detail.address}}</text>
<text class="iconfont icon-location"></text>
</view>
</view>
<!--已加入人员-->
<view class="join-num">已加入人员</view>
<view class="people-list" wx:if="{{join_people.length>0}}">
<view class="people" wx:for="{{join_people}}" wx:key="index">
<view class="bg">
<image src="{{item.pic}}" class="people-img"></image>
<block wx:if="{{item.userType ===1}}"><!--userType 1注册用户,2后台用户(金v)-->
<image src="{{item.sex === 1?'../../../images/man.png':'../../../images/women.png'}}"
class="sex-icon"></image>
</block>
<block wx:if="{{item.userType ===2}}">
<text class="iconfont icon-vip sex-icon"></text>
</block>
</view>
<view class="people-num">
<view class="name">{{item.name}}</view>
<view class="num">{{item.number}}人</view>
</view>
</view>
</view>
<!--留言板 问一问-->
<view class="comment-box">
<view class="title-box">
<text class="comment-num">留言板 ({{count}})</text>
<view class="ask-btn" bindtap="ask">
<text class="iconfont icon-bianji"></text>
<text>问一问</text>
</view>
</view>
<!--评论框-->
<view wx:if="{{display}}" class="comment {{display?'t-active':''}}">
<form bindsubmit="clickComment" bindreset="formReset" report-submit="true">
<view class="common-box">
<input
auto-focus="{{display}}"
focus="{{display}}"
value="{{content}}"
cursor-spacing="50"
maxlength="300"
bindblur="blur"
bindinput="inputComment"
bindconfirm="confirm"
show-confirm-bar="{{false}}"
placeholder="{{placeholder}}"/>
<button class="send-box" form-type="submit">
<text class="send">发送</text>
</button>
</view>
</form>
</view>
<!--评论-->
<view class="comment-list-box">
<view class="comment-item" wx:for="{{commentList}}" wx:key="index" wx:for-item="comment">
<view class="top-content">
<view class="top-left">
<!--<image src="../../../images/avatar@2x.png" class="release-img"></image>-->
<image src="{{comment.userPic}}" class="release-img"></image>
<block wx:if="{{comment.userType ===1}}"><!--userType 1注册用户,2后台用户(金v)-->
<image src="{{comment.sex === 1?'../../../images/man.png':'../../../images/women.png'}}"
class="sex-icon"></image>
</block>
<block wx:if="{{comment.userType ===2}}">
<text class="iconfont icon-vip sex-icon"></text>
</block>
<text>{{comment.userName}} {{comment.create_time}}</text>
</view>
<view class="top-right" bindtap="clickZan" data-id="{{comment.id}}" data-index="{{index}}">
<text>{{comment.prefect}}</text>
<text class="iconfont icon-zan" wx:if="{{!comment.is_prefect}}"></text>
<text class="iconfont icon-z-likeFill" wx:if="{{comment.is_prefect}}"></text>
</view>
</view>
<view class="comment-detail">
<view class="user-release">
<view class="release-comment">{{comment.content}}</view>
<text class="reply-btn" bindtap="reply" data-id="{{comment.id}}">回复</text>
</view>
<view class="user-reply" wx:if="{{comment.son.length>0}}">
<view class='triangle'></view>
<block wx:for="{{comment.son}}" wx:key="index">
<!--<view class="comment">-->
<!--<text class="reply-name">蚂蚁: </text>-->
<!--<text>{{item.content}}第一次拼餐,心里还是比较兴奋的,但是又担心拼友会比较无聊,但是没想到拼友和餐厅都非常好!</text>-->
<!--</view>-->
<view class="reply">
<text class="reply-name">{{detail.userName}}</text>
<text>回复</text>
<text class="reply-name">{{comment.userName}}:</text>
<text>{{item.content}}</text>
</view>
</block>
</view>
</view>
</view>
</view>
</view>
<!--底部btn-->
<view class="bottom-btn" wx:if="{{!display}}">
<view class="add-btn">
<view class="input_box">
<view class="iconfont icon-jian {{num==1?'disable':''}}" bindtap='minusCount'></view>
<view class='item_cart_num'>{{num}}</view>
<view class='iconfont icon-jia1' bindtap='addCount'></view>
</view>
</view>
<form bindsubmit="confirmJoin" bindreset="formReset" report-submit="true">
<!-- // (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除-->
<!--is_send = 1 不可参与-->
<button class="confirm-join-btn {{(is_send === 2 && detail.status === 8) || (is_send === 2 && detail.status === 2)?'black':''}}" form-type="submit">
<text wx:if="{{is_send === 1 && detail.status === 2}}">待拼成</text>
<text wx:if="{{is_send === 1 && detail.status === 8}}">待完成</text>
<text wx:if="{{is_send === 2 && detail.status === 8 }}">确认拼活动</text>
<text wx:if="{{is_send === 2 && detail.status === 2 }}">确认拼活动</text>
<text wx:if="{{detail.status === 3}}">未拼成</text>
<text wx:if="{{detail.status === 4}}">待完成</text>
<text wx:if="{{detail.status === 5}}">已取消</text>
<text wx:if="{{detail.status === 6 || detail.status === 7}}">已完成</text>
<!--<text wx:if="{{detail.status === 8}}">已拼成</text>-->
<text wx:if="{{detail.status === 9}}">已删除</text>
<text wx:if="{{detail.status === 11}}">已过期</text>
</button>
</form>
</view>
<!--参与成功弹框-->
<view class="modal" wx:if="{{is_showRelease_modal}}" catchtouchmove="disableScroll">
<image class="sorry-img" src="../../../images/success@2x.png"></image>
<view class="title">恭喜您拼活动成功</view>
<view class="view-btn" catchtap="goMyOrder">查看我的订单</view>
<view class="complete-btn" catchtap="goBack">再逛逛</view>
</view>
<view class="modal_box" wx:if="{{is_showRelease_modal}}" bindtap="handleBackground"
catchtouchmove="disableScroll"></view>
</view>
<!--pages/activity/detail/detail.wxml-->
<view class="content">
<!--swiper-->
<view class="head">
<view class="position {{hidden_top?'hidden-active':'visible-active'}}">
<view class="left">
<!--<image src="../../../images/avatar@2x.png" class="user-avatar"></image>-->
<image src="{{detail.userPic}}" class="user-avatar"></image>
<block wx:if="{{detail.userType ===1}}"><!--userType 1注册用户,2后台用户(金v)-->
<image src="{{detail.sex === 1?'../../../images/man.png':'../../../images/women.png'}}"
class="sex-icon"></image>
</block>
<block wx:if="{{detail.userType ===2}}">
<text class="iconfont icon-vip sex-icon"></text>
</block>
<text>{{detail.userName}}</text>
</view>
<view class="right">
<view class="collect" bindtap="collect">
<view class="iconfont icon-shoucang" wx:if="{{!is_collect}}"></view>
<view class="iconfont icon-shoucang2" wx:if="{{is_collect}}"></view>
<text>收藏</text>
</view>
<!--&lt;!&ndash;未收藏&ndash;&gt;-->
<!--<view class='collect_box' catchtap='sethits_yes' data-index='{{index}}' wx:if='{{items.is_hits==0}}'>-->
<!--<text class='iconfont icon-shoucang1 '></text>-->
<!--<text class="collect_word">收藏</text>-->
<!--</view>-->
<!--&lt;!&ndash;已收藏&ndash;&gt;-->
<!--<view class='collect_box active' catchtap='sethits_no' data-index='{{index}}' wx:else>-->
<!--<text class='iconfont icon-shoucang0 star2'></text>-->
<!--<text class="collect_word">收藏</text>-->
<!--</view>-->
<view class="share" bindtap="share">
<view class="iconfont icon-fenxiang2"></view>
<text>分享</text>
</view>
<!--<button class="share" open-type="share">-->
<!--<view class="iconfont icon-fenxiang2"></view>-->
<!--<text>分享</text>-->
<!--</button>-->
</view>
</view>
<view class='wrap_note canvas-mask' wx:if="{{show_canvas}}" bindtap='hideCanvasMask'>
<view class="shadow">
<canvas class='canvas-poster' canvas-id='canvas'></canvas>
<view class="button-box">
<text bindtap="saveToPhone" class="save-to-phone">保存图片</text>
<button class="share-btn" open-type="share">分享给好友</button>
</view>
</view>
<view class="close-btn" bindtap="closeCanvas"><text class="iconfont icon-guanbi"></text></view>
</view>
<swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
autoplay="{{true}}" interval="3000" duration="1000"
style="height:{{img_heights[current_swiper]}}rpx;">
<block wx:for="{{detail.banner}}" wx:key="index">
<navigator url="{{item}}" hover-class="navigator-hover">
<swiper-item>
<image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix"
bindload="imageLoad"/>
<!--<image src="http://pk86rwhci.bkt.clouddn.com/banner.png" class="slide-image"></image>-->
</swiper-item>
</navigator>
</block>
</swiper>
<view class="dots">
<block wx:for="{{detail.banner}}" wx:key="index" wx:for-index="idx">
<view class="dot{{idx == current_swiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<!--地点-->
<view class="area-box">
<view class="title-box">
<view class="title">{{detail.title}}</view>
<view class="over-time">
<text class='' wx:if="{{detail.time[0].day !== '00'}}">{{detail.time[0].day}}天{{detail.time[0].hou}}:{{detail.time[0].min}}:{{detail.time[0].sec}}</text>
<text class='' wx:else="">{{detail.time[0].hou}}:{{detail.time[0].min}}:{{detail.time[0].sec}}</text>
<text class="text">后结束</text>
</view>
<!--<view>-->
<!--<text class=''>{{detail.time[0].hou}}</text>-->
<!--<text>:</text>-->
<!--<text class=''>{{detail.time[0].min}}</text>-->
<!--<text>:</text>-->
<!--<text class=' '>{{detail.time[0].sec}}</text>-->
<!--</view>-->
</view>
<view class="area-content">
<text>{{detail.content}}</text>
</view>
</view>
<!--详细时间-->
<view class="detail-box">
<text>类别:{{detail.selectName}}</text>
<text>时间:{{end_time}}</text>
<text>地点:{{detail.name}}</text>
<view class="position" bindtap="getNavigate">
<text class="address">地址:{{detail.address}}</text>
<text class="iconfont icon-location"></text>
</view>
</view>
<!--已加入人员-->
<view class="join-num">已加入人员</view>
<view class="people-list" wx:if="{{join_people.length>0}}">
<view class="people" wx:for="{{join_people}}" wx:key="index">
<view class="bg">
<image src="{{item.pic}}" class="people-img"></image>
<block wx:if="{{item.userType ===1}}"><!--userType 1注册用户,2后台用户(金v)-->
<image src="{{item.sex === 1?'../../../images/man.png':'../../../images/women.png'}}"
class="sex-icon"></image>
</block>
<block wx:if="{{item.userType ===2}}">
<text class="iconfont icon-vip sex-icon"></text>
</block>
</view>
<view class="people-num">
<view class="name">{{item.name}}</view>
<view class="num">{{item.number}}人</view>
</view>
</view>
</view>
<!--留言板 问一问-->
<view class="comment-box">
<view class="title-box">
<text class="comment-num">留言板 ({{count}})</text>
<view class="ask-btn" bindtap="ask">
<text class="iconfont icon-bianji"></text>
<text>问一问</text>
</view>
</view>
<!--评论框-->
<view wx:if="{{display}}" class="comment {{display?'t-active':''}}">
<form bindsubmit="clickComment" bindreset="formReset" report-submit="true">
<view class="common-box">
<input
auto-focus="{{display}}"
focus="{{display}}"
value="{{content}}"
cursor-spacing="50"
maxlength="300"
bindblur="blur"
bindinput="inputComment"
bindconfirm="confirm"
show-confirm-bar="{{false}}"
placeholder="{{placeholder}}"/>
<button class="send-box" form-type="submit">
<text class="send">发送</text>
</button>
</view>
</form>
</view>
<!--评论-->
<view class="comment-list-box">
<view class="comment-item" wx:for="{{commentList}}" wx:key="index" wx:for-item="comment">
<view class="top-content">
<view class="top-left">
<!--<image src="../../../images/avatar@2x.png" class="release-img"></image>-->
<image src="{{comment.userPic}}" class="release-img"></image>
<block wx:if="{{comment.userType ===1}}"><!--userType 1注册用户,2后台用户(金v)-->
<image src="{{comment.sex === 1?'../../../images/man.png':'../../../images/women.png'}}"
class="sex-icon"></image>
</block>
<block wx:if="{{comment.userType ===2}}">
<text class="iconfont icon-vip sex-icon"></text>
</block>
<text>{{comment.userName}} {{comment.create_time}}</text>
</view>
<view class="top-right" bindtap="clickZan" data-id="{{comment.id}}" data-index="{{index}}">
<text>{{comment.prefect}}</text>
<text class="iconfont icon-zan" wx:if="{{!comment.is_prefect}}"></text>
<text class="iconfont icon-z-likeFill" wx:if="{{comment.is_prefect}}"></text>
</view>
</view>
<view class="comment-detail">
<view class="user-release">
<view class="release-comment">{{comment.content}}</view>
<text class="reply-btn" bindtap="reply" data-id="{{comment.id}}">回复</text>
</view>
<view class="user-reply" wx:if="{{comment.son.length>0}}">
<view class='triangle'></view>
<block wx:for="{{comment.son}}" wx:key="index">
<!--<view class="comment">-->
<!--<text class="reply-name">蚂蚁: </text>-->
<!--<text>{{item.content}}第一次拼餐,心里还是比较兴奋的,但是又担心拼友会比较无聊,但是没想到拼友和餐厅都非常好!</text>-->
<!--</view>-->
<view class="reply">
<text class="reply-name">{{detail.userName}}</text>
<text>回复</text>
<text class="reply-name">{{comment.userName}}:</text>
<text>{{item.content}}</text>
</view>
</block>
</view>
</view>
</view>
</view>
</view>
<!--底部btn-->
<view class="bottom-btn" wx:if="{{!display}}">
<view class="add-btn">
<view class="input_box">
<view class="iconfont icon-jian {{num==1?'disable':''}}" bindtap='minusCount'></view>
<view class='item_cart_num'>{{num}}</view>
<view class='iconfont icon-jia1' bindtap='addCount'></view>
</view>
</view>
<form bindsubmit="confirmJoin" bindreset="formReset" report-submit="true">
<!-- // (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除-->
<!--is_send = 1 不可参与-->
<button class="confirm-join-btn {{(is_send === 2 && detail.status === 8) || (is_send === 2 && detail.status === 2)?'black':''}}" form-type="submit">
<text wx:if="{{is_send === 1 && detail.status === 2}}">待拼成</text>
<text wx:if="{{is_send === 1 && detail.status === 8}}">待完成</text>
<text wx:if="{{is_send === 2 && detail.status === 8 }}">确认拼活动</text>
<text wx:if="{{is_send === 2 && detail.status === 2 }}">确认拼活动</text>
<text wx:if="{{detail.status === 3}}">未拼成</text>
<text wx:if="{{detail.status === 4}}">待完成</text>
<text wx:if="{{detail.status === 5}}">已取消</text>
<text wx:if="{{detail.status === 6 || detail.status === 7}}">已完成</text>
<!--<text wx:if="{{detail.status === 8}}">已拼成</text>-->
<text wx:if="{{detail.status === 9}}">已删除</text>
<text wx:if="{{detail.status === 11}}">已过期</text>
</button>
</form>
</view>
<!--参与成功弹框-->
<view class="modal" wx:if="{{is_showRelease_modal}}" catchtouchmove="disableScroll">
<image class="sorry-img" src="../../../images/success@2x.png"></image>
<view class="title">恭喜您拼活动成功</view>
<view class="view-btn" catchtap="goMyOrder">查看我的订单</view>
<view class="complete-btn" catchtap="goBack">再逛逛</view>
</view>
<view class="modal_box" wx:if="{{is_showRelease_modal}}" bindtap="handleBackground"
catchtouchmove="disableScroll"></view>
</view>
... ...
/* pages/activity/detail/detail.wxss */
.head {
position: relative;
}
.head .position {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 10;
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.head .position .left {
display: flex;
align-items: center;
position: relative;
}
.head .position .left .user-avatar{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.head .position .left .sex-icon{
position: absolute;
top:-3rpx;
left:36rpx;
width: 20rpx;
height: 20rpx;
}
.head .position .left .icon-vip{
color:#E1C8AF;
font-size:21rpx;
}
.head .position .left text {
font-size: 24rpx;
color:#ffffff;
}
.head .position .left .icon-location {
font-size: 44rpx;
color: #ffffff;
margin-right: 14rpx;
}
.head .position .left .icon-arrow-down {
font-size: 36rpx;
color: #ffffff;
margin-left: 18rpx;
}
/* .position text {
color: #ffffff;
font-size: 28rpx;
} */
.head .position .right {
/*width: 478rpx;*/
height: 52rpx;
/*background-color: rgba(255,255,255,0.35);*/
display: flex;
align-items: center;
justify-content: space-between;
/*border-radius: 10rpx;*/
padding: 0 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.head .position .right text {
font-size: 22rpx;
color:#ffffff;
}
.head .position .right .collect, .head .position .right .share {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
line-height: 34rpx;
/*height: 34rpx;*/
}
.share {
border-radius: 0;
margin: 0;
padding: 0;
background: transparent;
}
.share::after {
border:0;
}
.head .position .right .collect {
margin-right: 42rpx;
}
.icon-shoucang {
font-size: 30rpx;
color: #ffffff;
}
.icon-shoucang2 {
color:#DA4F2A;
font-size: 30rpx;
}
.icon-z-likeFill {
color:#DC4E48;
/*font-size: ;*/
}
.icon-fenxiang2 {
font-size: 30rpx;
color: #ffffff;
}
swiper {
width: 100%;
height: 376rpx;
/*margin-top: 20rpx;*/
}
.slide-image {
width: 100%;
height: 100%;
}
/*用来包裹所有的小圆点 */
.dots {
/* width: 156rpx; */
height: 36rpx;
display: flex;
align-items: center;
position: absolute;
left: 50%;
bottom: 20rpx;
transform: translate(-50%);
z-index: 10;
}
/*未选中时的小圆点样式 */
.dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
margin-right: 10rpx;
background-color: #ffffff;
opacity: 0.6;
}
/*选中以后的小圆点样式 */
.active {
opacity: 1;
background-color: #DB4E2A;
}
.area-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-bottom: 20rpx solid #f2f2f2;
}
.area-box .title-box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26rpx;
}
.area-box .title-box .title {
width:55%;
color: #333333;
font-size: 28rpx;
}
.area-box .title-box .over-time {
width: 40%;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
.area-box .title-box .over-time text {
text-align: right;
color:#DA4F2A;
font-size: 24rpx;
margin-right: 18rpx;
}
.area-box .title-box .over-time .text {
color: #999999;
font-size: 20rpx;
}
.area-content {
color: #666666;
font-size: 24rpx;
}
.detail-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
border-bottom: 20rpx solid #f2f2f2;
font-size: 24rpx;
color: #666666;
}
.detail-box text {
margin-bottom: 18rpx;
}
.detail-box .position {
display: flex;
align-items: center;
}
.detail-box .position .address {
margin-right: 12rpx;
}
.detail-box .position .icon-location {
font-size: 30rpx;
color: #666666;
}
.join-num {
font-size: 24rpx;
color: #333333;
font-weight: bold;
padding: 40rpx 20rpx 0 20rpx;
}
.people-list {
padding: 32rpx 50rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
overflow-x: scroll;
/* display: -webkit-box; */
-webkit-overflow-scrolling: touch;
border-bottom: 20rpx solid #f2f2f2;
}
.people {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30rpx;
}
.people:nth-last-child(1){
margin-right: 0;
/* padding-right: 36rpx; */
}
.people-img {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.bg {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: #FD8779;
margin-bottom: 10rpx;
position: relative;
}
.bg .sex-icon {
position: absolute;
top:-6rpx;
left:28rpx;
width: 20rpx;
height: 20rpx;
}
.people-num {
display: flex;
align-items: center;
}
.people-num .name {
max-width:100rpx;
margin-right:10rpx;
text-align: center;
/* margin-right: 10rpx; */
color: #333333;
font-size: 22rpx;
/* display: flex; */
/* align-items: center; */
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.people-num .num {
/* width:40%; */
color: #333333;
font-size: 22rpx;
}
.comment-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 100rpx;
}
.comment-box .title-box {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #333333;
}
.comment-num {
font-weight: bold;
}
.ask-btn {
display: flex;
align-items: center;
font-size: 22rpx;
color:#DC4E48;
}
.icon-bianji {
font-size: 30rpx;
color:#DC4E48;
margin-right: 10rpx;
}
.comment-list-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.comment-item {
display: flex;
flex-direction: column;
}
.top-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.top-left {
display: flex;
align-items: center;
position: relative;
}
.top-left .sex-icon {
position: absolute;
top:-6rpx;
left:28rpx;
width: 20rpx;
height: 20rpx;
}
.top-left .icon-vip, .bg .icon-vip{
color:#E1C8AF;
font-size:21rpx;
}
.top-left .release-img{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.top-left text {
color: #666666;
font-size: 22rpx;
}
.top-right {
color: #999999;
font-size: 22rpx;
}
.icon-zan {
color: #999999;
}
.comment-detail {
padding: 10rpx 0rpx 20rpx 50rpx;
}
.user-release {
display: flex;
align-items: center;
justify-content: space-between;
}
.release-comment {
color: #666666;
font-size: 24rpx;
}
.reply-btn {
font-size: 22rpx;
color: #333333;
width: 138rpx;
margin-left: 30rpx;
text-align: right;
}
.user-reply {
padding: 20rpx 14rpx;
background-color: #F4F4F4;
font-size: 24rpx;
color: #666666;
display: flex;
flex-direction: column;
margin-top: 40rpx;
position: relative;
border-radius:6rpx;
}
.user-reply .comment {
margin-bottom: 24rpx;
}
.reply-name {
font-size: 24rpx;
color: #333333;
font-weight: bold;
}
@keyframes hidden-active {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes visible-active {
0% { opacity: 0; }
100% { opacity: 1; }
}
.hidden-active {
animation: hidden-active 0.5s both;
}
.visible-active {
animation: visible-active 0.5s both;
}
.triangle {
width: 0;
height: 0;
border-bottom: 18rpx solid #F4F4F4;
border-left: 18rpx solid transparent;
border-right: 18rpx solid transparent;
position: absolute;
top: -14rpx;
left: 20rpx;
}
.bottom-btn {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1rpx solid #f2f2f2;
position: fixed;
bottom:0;
left:0;
background-color: #fff;
width: 100%;
}
.confirm-join-btn {
display: flex;
align-items: center;
justify-content: center;
width: 206rpx;
height: 98rpx;
background-color: #CCCCCC;
color: #ffffff;
font-size: 30rpx;
border-radius: 0;
margin: 0;
padding: 0;
}
.confirm-join-btn::after {
border:0;
}
.black {
color:#E1C8AF;
background-color: #323232;
}
.input_box {
display: flex;
align-items: center;
height: 50rpx;
font-size: 30rpx;
padding: 10rpx;
color: #3f4040;
}
.input_box .iconfont {
font-size: 38rpx;
color: #999999;
padding:5rpx 10rpx;
}
.input_box .disable{
color: #CCCCCC;
}
.item_cart_num {
width: 40rpx;
height: 40rpx;
border-radius: 3rpx;
background-color: #F2F2F2;
text-align: center;
line-height: 40rpx;
}
.comment {
position: fixed;
bottom:0;
left:0;
z-index:20;
}
.comment form {
width: 100%;
}
.comment .common-box {
width:100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.comment input {
border-radius: 50rpx;
width: 83.5%;
height: 60rpx;
/*height: 400rpx;*/
display: flex;
align-items: center;
text-align: left;
background-color: #f2f2f2;
font-size: 26rpx;
padding-left: 32rpx;
color: #666;
}
.t-active {
border-radius: 4rpx;
width: 100%;
/*height: 300rpx;*/
/*background-color: #f2f2f2;*/
font-size: 26rpx;
padding: 20rpx 32rpx;
display: flex;
justify-content: right;
align-items: right;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.send-box .send {
width: 100rpx;
height: 60rpx;
line-height: 60rpx;
color:#E1C8AF;
font-size: 30rpx;
background-color: #323232;
border-right: 4rpx;
border-radius: 8rpx;
text-align: center;
}
.send-box {
width: 100rpx;
height: 60rpx;
display: flex;
justify-content: flex-end;
margin-left: 10rpx;
margin-right:0;
padding: 0;
}
.send-box::after {
border:0;
}
.modal {
width: 73%;
/* height: 1100rpx; */
background: #ffffff;
display: flex;
align-items: center;
flex-direction: column;
z-index:999;
position: fixed;
top: 48%;
left: 50%;
transform: translate(-50%,-50%);
padding: 46rpx 0rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 40rpx;
}
.modal image {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
margin-bottom: 34rpx;
}
.modal .title {
color: #333333;
font-size: 36rpx;
margin-bottom: 46rpx;
}
.modal .tips {
color: #333333;
font-size: 24rpx;
margin-bottom: 26rpx;
}
.modal .view-btn {
height: 66rpx;
width: 364rpx;
border:1rpx solid #323232;
border-radius: 6rpx;
color:#323232;
text-align: center;
line-height: 66rpx;
font-size: 30rpx;
}
.modal .complete-btn {
width: 364rpx;
height: 66rpx;
background-color: #323232;
border-radius: 6rpx;
color:#E2C8B1;
font-size: 30rpx;
text-align: center;
line-height: 66rpx;
margin-top: 26rpx;
}
/*弹框样式*/
.modal_box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.wrap_note {
width: 100%;
height: 100%;
position: fixed;
z-index: 20;
background-color: rgba(0, 0, 0, 0.3);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
}
.canvas-mask {
display: flex;
flex-direction: column;
}
.shadow {
/* background:#fff; */
box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1);
}
.canvas-poster {
/* position: fixed; */
width: 260px;
height: 400px;
/* top: 100%; */
/* left: 100%; */
/* overflow: hidden; */
}
.button-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 76rpx;
/* border-top: 1rpx solid #E8E8E8; */
}
.save-to-phone, .share-btn{
width: 50%;
line-height: 76rpx;
color:#fff;
font-size: 24rpx;
text-align: center;
padding:0;
background:#323232;
border-radius: 0;
}
.share-btn::after {
border:0;
}
.save-to-phone {
border-right: 1rpx solid #E8E8E8;
border-bottom-left-radius: 20rpx;
}
.share-btn {
border-bottom-right-radius: 20rpx;
}
.close-btn {
color: #999999;
font-size: 60rpx;
border-radius: 50%;
/* background-color: #fff; */
margin-top: 34rpx;
}
.close-btn .icon-guanbi {
font-size: 50rpx;
color: #fff;
/* pages/activity/detail/detail.wxss */
.head {
position: relative;
}
.head .position {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 10;
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.head .position .left {
display: flex;
align-items: center;
position: relative;
}
.head .position .left .user-avatar{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.head .position .left .sex-icon{
position: absolute;
top:-3rpx;
left:36rpx;
width: 20rpx;
height: 20rpx;
}
.head .position .left .icon-vip{
color:#E1C8AF;
font-size:21rpx;
}
.head .position .left text {
font-size: 24rpx;
color:#ffffff;
}
.head .position .left .icon-location {
font-size: 44rpx;
color: #ffffff;
margin-right: 14rpx;
}
.head .position .left .icon-arrow-down {
font-size: 36rpx;
color: #ffffff;
margin-left: 18rpx;
}
/* .position text {
color: #ffffff;
font-size: 28rpx;
} */
.head .position .right {
/*width: 478rpx;*/
height: 52rpx;
/*background-color: rgba(255,255,255,0.35);*/
display: flex;
align-items: center;
justify-content: space-between;
/*border-radius: 10rpx;*/
padding: 0 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.head .position .right text {
font-size: 22rpx;
color:#ffffff;
}
.head .position .right .collect, .head .position .right .share {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
line-height: 34rpx;
/*height: 34rpx;*/
}
.share {
border-radius: 0;
margin: 0;
padding: 0;
background: transparent;
}
.share::after {
border:0;
}
.head .position .right .collect {
margin-right: 42rpx;
}
.icon-shoucang {
font-size: 30rpx;
color: #ffffff;
}
.icon-shoucang2 {
color:#DA4F2A;
font-size: 30rpx;
}
.icon-z-likeFill {
color:#DC4E48;
/*font-size: ;*/
}
.icon-fenxiang2 {
font-size: 30rpx;
color: #ffffff;
}
swiper {
width: 100%;
height: 376rpx;
/*margin-top: 20rpx;*/
}
.slide-image {
width: 100%;
height: 100%;
}
/*用来包裹所有的小圆点 */
.dots {
/* width: 156rpx; */
height: 36rpx;
display: flex;
align-items: center;
position: absolute;
left: 50%;
bottom: 20rpx;
transform: translate(-50%);
z-index: 10;
}
/*未选中时的小圆点样式 */
.dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
margin-right: 10rpx;
background-color: #ffffff;
opacity: 0.6;
}
/*选中以后的小圆点样式 */
.active {
opacity: 1;
background-color: #DB4E2A;
}
.area-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-bottom: 20rpx solid #f2f2f2;
}
.area-box .title-box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26rpx;
}
.area-box .title-box .title {
width:55%;
color: #333333;
font-size: 28rpx;
}
.area-box .title-box .over-time {
width: 40%;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
.area-box .title-box .over-time text {
text-align: right;
color:#DA4F2A;
font-size: 24rpx;
margin-right: 18rpx;
}
.area-box .title-box .over-time .text {
color: #999999;
font-size: 20rpx;
}
.area-content {
color: #666666;
font-size: 24rpx;
}
.detail-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
border-bottom: 20rpx solid #f2f2f2;
font-size: 24rpx;
color: #666666;
}
.detail-box text {
margin-bottom: 18rpx;
}
.detail-box .position {
display: flex;
align-items: center;
}
.detail-box .position .address {
margin-right: 12rpx;
}
.detail-box .position .icon-location {
font-size: 30rpx;
color: #666666;
}
.join-num {
font-size: 24rpx;
color: #333333;
font-weight: bold;
padding: 40rpx 20rpx 0 20rpx;
}
.people-list {
padding: 32rpx 50rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
overflow-x: scroll;
/* display: -webkit-box; */
-webkit-overflow-scrolling: touch;
border-bottom: 20rpx solid #f2f2f2;
}
.people {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30rpx;
}
.people:nth-last-child(1){
margin-right: 0;
/* padding-right: 36rpx; */
}
.people-img {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.bg {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: #FD8779;
margin-bottom: 10rpx;
position: relative;
}
.bg .sex-icon {
position: absolute;
top:-6rpx;
left:28rpx;
width: 20rpx;
height: 20rpx;
}
.people-num {
display: flex;
align-items: center;
}
.people-num .name {
max-width:100rpx;
margin-right:10rpx;
text-align: center;
/* margin-right: 10rpx; */
color: #333333;
font-size: 22rpx;
/* display: flex; */
/* align-items: center; */
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.people-num .num {
/* width:40%; */
color: #333333;
font-size: 22rpx;
}
.comment-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 100rpx;
}
.comment-box .title-box {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #333333;
}
.comment-num {
font-weight: bold;
}
.ask-btn {
display: flex;
align-items: center;
font-size: 22rpx;
color:#DC4E48;
}
.icon-bianji {
font-size: 30rpx;
color:#DC4E48;
margin-right: 10rpx;
}
.comment-list-box {
padding: 20rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.comment-item {
display: flex;
flex-direction: column;
}
.top-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.top-left {
display: flex;
align-items: center;
position: relative;
}
.top-left .sex-icon {
position: absolute;
top:-6rpx;
left:28rpx;
width: 20rpx;
height: 20rpx;
}
.top-left .icon-vip, .bg .icon-vip{
color:#E1C8AF;
font-size:21rpx;
}
.top-left .release-img{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.top-left text {
color: #666666;
font-size: 22rpx;
}
.top-right {
color: #999999;
font-size: 22rpx;
}
.icon-zan {
color: #999999;
}
.comment-detail {
padding: 10rpx 0rpx 20rpx 50rpx;
}
.user-release {
display: flex;
align-items: center;
justify-content: space-between;
}
.release-comment {
color: #666666;
font-size: 24rpx;
}
.reply-btn {
font-size: 22rpx;
color: #333333;
width: 138rpx;
margin-left: 30rpx;
text-align: right;
}
.user-reply {
padding: 20rpx 14rpx;
background-color: #F4F4F4;
font-size: 24rpx;
color: #666666;
display: flex;
flex-direction: column;
margin-top: 40rpx;
position: relative;
border-radius:6rpx;
}
.user-reply .comment {
margin-bottom: 24rpx;
}
.reply-name {
font-size: 24rpx;
color: #333333;
font-weight: bold;
}
@keyframes hidden-active {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes visible-active {
0% { opacity: 0; }
100% { opacity: 1; }
}
.hidden-active {
animation: hidden-active 0.5s both;
}
.visible-active {
animation: visible-active 0.5s both;
}
.triangle {
width: 0;
height: 0;
border-bottom: 18rpx solid #F4F4F4;
border-left: 18rpx solid transparent;
border-right: 18rpx solid transparent;
position: absolute;
top: -14rpx;
left: 20rpx;
}
.bottom-btn {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1rpx solid #f2f2f2;
position: fixed;
bottom:0;
left:0;
background-color: #fff;
width: 100%;
}
.confirm-join-btn {
display: flex;
align-items: center;
justify-content: center;
width: 206rpx;
height: 98rpx;
background-color: #CCCCCC;
color: #ffffff;
font-size: 30rpx;
border-radius: 0;
margin: 0;
padding: 0;
}
.confirm-join-btn::after {
border:0;
}
.black {
color:#E1C8AF;
background-color: #323232;
}
.input_box {
display: flex;
align-items: center;
height: 50rpx;
font-size: 30rpx;
padding: 10rpx;
color: #3f4040;
}
.input_box .iconfont {
font-size: 38rpx;
color: #999999;
padding:5rpx 10rpx;
}
.input_box .disable{
color: #CCCCCC;
}
.item_cart_num {
width: 40rpx;
height: 40rpx;
border-radius: 3rpx;
background-color: #F2F2F2;
text-align: center;
line-height: 40rpx;
}
.comment {
position: fixed;
bottom:0;
left:0;
z-index:20;
}
.comment form {
width: 100%;
}
.comment .common-box {
width:100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.comment input {
border-radius: 50rpx;
width: 83.5%;
height: 60rpx;
/*height: 400rpx;*/
display: flex;
align-items: center;
text-align: left;
background-color: #f2f2f2;
font-size: 26rpx;
padding-left: 32rpx;
color: #666;
}
.t-active {
border-radius: 4rpx;
width: 100%;
/*height: 300rpx;*/
/*background-color: #f2f2f2;*/
font-size: 26rpx;
padding: 20rpx 32rpx;
display: flex;
justify-content: right;
align-items: right;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.send-box .send {
width: 100rpx;
height: 60rpx;
line-height: 60rpx;
color:#E1C8AF;
font-size: 30rpx;
background-color: #323232;
border-right: 4rpx;
border-radius: 8rpx;
text-align: center;
}
.send-box {
width: 100rpx;
height: 60rpx;
display: flex;
justify-content: flex-end;
margin-left: 10rpx;
margin-right:0;
padding: 0;
}
.send-box::after {
border:0;
}
.modal {
width: 73%;
/* height: 1100rpx; */
background: #ffffff;
display: flex;
align-items: center;
flex-direction: column;
z-index:999;
position: fixed;
top: 48%;
left: 50%;
transform: translate(-50%,-50%);
padding: 46rpx 0rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 40rpx;
}
.modal image {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
margin-bottom: 34rpx;
}
.modal .title {
color: #333333;
font-size: 36rpx;
margin-bottom: 46rpx;
}
.modal .tips {
color: #333333;
font-size: 24rpx;
margin-bottom: 26rpx;
}
.modal .view-btn {
height: 66rpx;
width: 364rpx;
border:1rpx solid #323232;
border-radius: 6rpx;
color:#323232;
text-align: center;
line-height: 66rpx;
font-size: 30rpx;
}
.modal .complete-btn {
width: 364rpx;
height: 66rpx;
background-color: #323232;
border-radius: 6rpx;
color:#E2C8B1;
font-size: 30rpx;
text-align: center;
line-height: 66rpx;
margin-top: 26rpx;
}
/*弹框样式*/
.modal_box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.wrap_note {
width: 100%;
height: 100%;
position: fixed;
z-index: 20;
background-color: rgba(0, 0, 0, 0.3);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
}
.canvas-mask {
display: flex;
flex-direction: column;
}
.shadow {
/* background:#fff; */
box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1);
}
.canvas-poster {
/* position: fixed; */
width: 260px;
height: 400px;
/* top: 100%; */
/* left: 100%; */
/* overflow: hidden; */
}
.button-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 76rpx;
/* border-top: 1rpx solid #E8E8E8; */
}
.save-to-phone, .share-btn{
width: 50%;
line-height: 76rpx;
color:#fff;
font-size: 24rpx;
text-align: center;
padding:0;
background:#323232;
border-radius: 0;
}
.share-btn::after {
border:0;
}
.save-to-phone {
border-right: 1rpx solid #E8E8E8;
border-bottom-left-radius: 20rpx;
}
.share-btn {
border-bottom-right-radius: 20rpx;
}
.close-btn {
color: #999999;
font-size: 60rpx;
border-radius: 50%;
/* background-color: #fff; */
margin-top: 34rpx;
}
.close-btn .icon-guanbi {
font-size: 50rpx;
color: #fff;
}
\ No newline at end of file
... ...
{
"navigationBarTitleText": "评论"
{
"navigationBarTitleText": "评论"
}
\ No newline at end of file
... ...