merge
This commit is contained in:
唐明明
@@ -1,32 +1,33 @@
|
||||
<template>
|
||||
<view class="auth">
|
||||
<image class="auth-back" src="/static/login/auth_bg.png" mode="aspectFill"></image>
|
||||
<view class="auth-center">
|
||||
<view class="auth-title">
|
||||
<view>共力生态</view>
|
||||
<view>即可开始共力人生</view>
|
||||
</view>
|
||||
<view class="auth-input">
|
||||
<input v-model="phone" type="number" maxlength="11" placeholder="输入手机号码">
|
||||
</view>
|
||||
<view class="auth-input auth-code">
|
||||
<input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
|
||||
<button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
|
||||
</view>
|
||||
<view class="auth-input" v-if="isShowParent">
|
||||
<input v-model="parentId" placeholder="输入邀请码,选填">
|
||||
</view>
|
||||
<view class="auth-button">
|
||||
<button @click="login('code')">登录</button>
|
||||
</view>
|
||||
<view class="auth-agreement">
|
||||
登录即表示同意<navigator hover-class="none" url="/pages/vip/agreement?id=3">用户协议</navigator>和<navigator hover-class="none" url="/pages/vip/agreement?id=4">隐私政策</navigator>
|
||||
</view>
|
||||
<view class="auth-other" v-if="isKeyAuth">
|
||||
<button @click="login('Akey')">使用本机号码一键登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="auth">
|
||||
<image class="auth-back" src="/static/login/auth_bg.png" mode="aspectFill"></image>
|
||||
<view class="auth-center">
|
||||
<view class="auth-title">
|
||||
<view>共力生态</view>
|
||||
<view>即可开始共力人生</view>
|
||||
</view>
|
||||
<view class="auth-input">
|
||||
<input v-model="phone" type="number" maxlength="11" placeholder="输入手机号码">
|
||||
</view>
|
||||
<view class="auth-input auth-code">
|
||||
<input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
|
||||
<button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
|
||||
</view>
|
||||
<view class="auth-input" v-if="isShowParent">
|
||||
<input v-model="parentId" placeholder="输入邀请码,选填">
|
||||
</view>
|
||||
<view class="auth-button">
|
||||
<button @click="login('code')">登录</button>
|
||||
</view>
|
||||
<view class="auth-agreement">
|
||||
登录即表示同意<navigator hover-class="none" url="/pages/vip/agreement?id=3">用户协议</navigator>和<navigator
|
||||
hover-class="none" url="/pages/vip/agreement?id=4">隐私政策</navigator>
|
||||
</view>
|
||||
<view class="auth-other" v-if="isKeyAuth">
|
||||
<button @click="login('Akey')">使用本机号码一键登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -185,115 +186,118 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.auth {
|
||||
height: 100vh;
|
||||
.auth {
|
||||
height: 100vh;
|
||||
|
||||
.auth-back {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.auth-back {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.auth-center {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
|
||||
padding: 100rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
.auth-center {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
|
||||
padding: 100rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.auth-title {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
line-height: 70rpx;
|
||||
color: white;
|
||||
}
|
||||
.auth-title {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
line-height: 70rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
background: white;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-top: 40rpx;
|
||||
overflow: hidden;
|
||||
.auth-input {
|
||||
background: white;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-top: 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
input {
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 50rpx;
|
||||
flex: 1;
|
||||
}
|
||||
input {
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 50rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.auth-code {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.auth-code {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
button[size="mini"] {
|
||||
width: 280rpx;
|
||||
padding: 0;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 0;
|
||||
color: $main-color;
|
||||
background: white;
|
||||
&[disabled]{
|
||||
color: gray;
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button[size="mini"] {
|
||||
width: 280rpx;
|
||||
padding: 0;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 0;
|
||||
color: $main-color;
|
||||
background: white;
|
||||
|
||||
.auth-button {
|
||||
margin-top: 70rpx;
|
||||
&[disabled] {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $main-color;
|
||||
color: white;
|
||||
border-radius: 50rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.auth-button {
|
||||
margin-top: 70rpx;
|
||||
|
||||
.auth-agreement {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx 0 60rpx 0;
|
||||
button {
|
||||
background: $main-color;
|
||||
color: white;
|
||||
border-radius: 50rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
|
||||
navigator {
|
||||
display: inline-block;
|
||||
padding: 0 10rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-other {
|
||||
padding: 0 10vw;
|
||||
button {
|
||||
height: 100rpx;
|
||||
line-height: 98rpx;
|
||||
border-radius: 50rpx;
|
||||
border: solid 1px white;
|
||||
color: white;
|
||||
background: transparent;
|
||||
font-size: 34rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.auth-agreement {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx 0 60rpx 0;
|
||||
|
||||
navigator {
|
||||
display: inline-block;
|
||||
padding: 0 10rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-other {
|
||||
padding: 0 10vw;
|
||||
|
||||
button {
|
||||
height: 100rpx;
|
||||
line-height: 98rpx;
|
||||
border-radius: 50rpx;
|
||||
border: solid 1px white;
|
||||
color: white;
|
||||
background: transparent;
|
||||
font-size: 34rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
277
pages/chat/index.vue
Normal file
277
pages/chat/index.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<view id="moments">
|
||||
|
||||
<view class="home-pic">
|
||||
<view class="home-pic-base">
|
||||
<view class="top-pic">
|
||||
<image class="header" src="../../static/chat/index/test/header06.jpg" @tap="test"></image>
|
||||
</view>
|
||||
<view class="top-name">Liuxy</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="moments__post" v-for="(post,index) in posts" :key="index" :id="'post-'+index">
|
||||
<view class="post-left">
|
||||
<image class="post_header" :src="post.header_image"></image>
|
||||
</view>
|
||||
|
||||
<view class="post_right">
|
||||
<text class="post-username">{{post.username}}</text>
|
||||
<view id="paragraph" class="paragraph">{{post.content.text}}</view>
|
||||
<!-- 相册 -->
|
||||
<view class="thumbnails">
|
||||
<view :class="post.content.images.length === 1?'my-gallery':'thumbnail'"
|
||||
v-for="(image, index_images) in post.content.images" :key="index_images">
|
||||
<image class="gallery_img" lazy-load mode="aspectFill" :src="image" :data-src="image"
|
||||
@tap="previewImage(post.content.images,index_images)"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 资料条 -->
|
||||
<view class="toolbar">
|
||||
<view class="timestamp">{{post.timestamp}}</view>
|
||||
<view class="like" @tap="like(index)">
|
||||
<image
|
||||
:src="post.islike===0?'../../static/chat/index/islike.png':'../../static/chat/index/like.png'">
|
||||
</image>
|
||||
</view>
|
||||
<view class="comment" @tap="comment(index)">
|
||||
<image src="../../static/chat/index/comment.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 赞／评论区 -->
|
||||
<view class="post-footer">
|
||||
<view class="footer_content">
|
||||
<image class="liked" src="../../static/chat/index/liked.png"></image>
|
||||
<text class="nickname" v-for="(user,index_like) in post.like"
|
||||
:key="index_like">{{user.username}}</text>
|
||||
</view>
|
||||
<view class="footer_content" v-for="(comment,comment_index) in post.comments.comment"
|
||||
:key="comment_index" @tap="reply(index,comment_index)">
|
||||
<text class="comment-nickname">{{comment.username}}: <text
|
||||
class="comment-content">{{comment.content}}</text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 结束 post -->
|
||||
</view>
|
||||
|
||||
<view class="foot" v-show="showInput">
|
||||
<chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder">
|
||||
</chat-input>
|
||||
<!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
|
||||
</view>
|
||||
<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chatInput from '../../components/im-chat/chatinput.vue'; //input框
|
||||
import postData from '../../common/index/index.post.data.js'; //朋友圈数据
|
||||
|
||||
export default {
|
||||
components: {
|
||||
chatInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
posts: postData, //模拟数据
|
||||
user_id: 4,
|
||||
username: 'Liuxy',
|
||||
|
||||
index: '',
|
||||
comment_index: '',
|
||||
|
||||
input_placeholder: '评论', //占位内容
|
||||
focus: false, //是否自动聚焦输入框
|
||||
is_reply: false, //回复还是评论
|
||||
showInput: false, //评论输入框
|
||||
|
||||
screenHeight: '', //屏幕高度(系统)
|
||||
platform: '',
|
||||
windowHeight: '', //可用窗口高度(不计入软键盘)
|
||||
|
||||
loadMoreText: "加载中...",
|
||||
showLoadMore: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
uni.getStorage({
|
||||
key: 'posts',
|
||||
success: function(res) {
|
||||
console.log(res.data);
|
||||
this.posts = res.data;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
uni.getSystemInfo({ //获取设备信息
|
||||
success: (res) => {
|
||||
this.screenHeight = res.screenHeight;
|
||||
this.platform = res.platform;
|
||||
}
|
||||
});
|
||||
uni.startPullDownRefresh();
|
||||
},
|
||||
onShow() {
|
||||
uni.onWindowResize((res) => { //监听窗口尺寸变化,窗口尺寸不包括底部导航栏
|
||||
if (this.platform === 'ios') {
|
||||
this.windowHeight = res.size.windowHeight;
|
||||
this.adjust();
|
||||
} else {
|
||||
if (this.screenHeight - res.size.windowHeight > 60 && this.windowHeight <= res.size
|
||||
.windowHeight) {
|
||||
this.windowHeight = res.size.windowHeight;
|
||||
this.adjust();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
onHide() {
|
||||
// uni.offWindowResize(); //取消监听窗口尺寸变化
|
||||
},
|
||||
onUnload() {
|
||||
this.max = 0,
|
||||
this.data = [],
|
||||
this.loadMoreText = "加载更多",
|
||||
this.showLoadMore = false;
|
||||
},
|
||||
onReachBottom() { //监听上拉触底事件
|
||||
console.log('onReachBottom');
|
||||
this.showLoadMore = true;
|
||||
setTimeout(() => {
|
||||
//获取数据
|
||||
if (this.posts.length < 20) { //测试数据
|
||||
this.posts = this.posts.concat(this.posts);
|
||||
} else {
|
||||
this.loadMoreText = "暂无更多";
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
onPullDownRefresh() { //监听下拉刷新动作
|
||||
console.log('onPullDownRefresh');
|
||||
// 这里获取数据
|
||||
setTimeout(function() {
|
||||
//初始化数据
|
||||
uni.stopPullDownRefresh(); //停止下拉刷新
|
||||
}, 1000);
|
||||
},
|
||||
onNavigationBarButtonTap(e) { //监听标题栏点击事件
|
||||
if (e.index == 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chat/publish'
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
this.navigateTo('../test/test');
|
||||
},
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
like(index) {
|
||||
if (this.posts[index].islike === 0) {
|
||||
this.posts[index].islike = 1;
|
||||
this.posts[index].like.push({
|
||||
"uid": this.user_id,
|
||||
"username": "," + this.username
|
||||
});
|
||||
} else {
|
||||
this.posts[index].islike = 0;
|
||||
this.posts[index].like.splice(this.posts[index].like.indexOf({
|
||||
"uid": this.user_id,
|
||||
"username": "," + this.username
|
||||
}), 1);
|
||||
}
|
||||
},
|
||||
comment(index) {
|
||||
this.showInput = true; //调起input框
|
||||
this.focus = true;
|
||||
this.index = index;
|
||||
},
|
||||
adjust() { //当弹出软键盘发生评论动作时,调整页面位置pageScrollTo
|
||||
return;
|
||||
uni.createSelectorQuery().selectViewport().scrollOffset(res => {
|
||||
var scrollTop = res.scrollTop;
|
||||
let view = uni.createSelectorQuery().select("#post-" + this.index);
|
||||
view.boundingClientRect(data => {
|
||||
console.log("data:" + JSON.stringify(data));
|
||||
console.log("手机屏幕高度:" + this.screenHeight);
|
||||
console.log("竖直滚动位置" + scrollTop);
|
||||
console.log("节点离页面顶部的距离为" + data.top);
|
||||
console.log("节点高度为" + data.height);
|
||||
console.log("窗口高度为" + this.windowHeight);
|
||||
|
||||
uni.pageScrollTo({
|
||||
scrollTop: scrollTop - (this.windowHeight - (data.height + data
|
||||
.top + 45)), //一顿乱算
|
||||
// scrollTop: 50,
|
||||
duration: 300
|
||||
});
|
||||
}).exec();
|
||||
}).exec();
|
||||
},
|
||||
reply(index, comment_index) {
|
||||
this.is_reply = true; //回复中
|
||||
this.showInput = true; //调起input框
|
||||
let replyTo = this.posts[index].comments.comment[comment_index].username;
|
||||
this.input_placeholder = '回复' + replyTo;
|
||||
this.index = index; //post索引
|
||||
this.comment_index = comment_index; //评论索引
|
||||
this.focus = true;
|
||||
},
|
||||
blur: function() {
|
||||
this.init_input();
|
||||
},
|
||||
send_comment: function(message) {
|
||||
|
||||
if (this.is_reply) {
|
||||
var reply_username = this.posts[this.index].comments.comment[this.comment_index].username;
|
||||
var comment_content = '回复' + reply_username + ':' + message.content;
|
||||
} else {
|
||||
var comment_content = message.content;
|
||||
}
|
||||
this.posts[this.index].comments.total += 1;
|
||||
this.posts[this.index].comments.comment.push({
|
||||
"uid": this.user_id,
|
||||
"username": this.username,
|
||||
"content": comment_content //直接获取input中的值
|
||||
});
|
||||
this.init_input();
|
||||
},
|
||||
init_input() {
|
||||
this.showInput = false;
|
||||
this.focus = false;
|
||||
this.input_placeholder = '评论';
|
||||
this.is_reply = false;
|
||||
},
|
||||
previewImage(imageList, image_index) {
|
||||
var current = imageList[image_index];
|
||||
uni.previewImage({
|
||||
current: current,
|
||||
urls: imageList
|
||||
});
|
||||
},
|
||||
goPublish() {
|
||||
uni.navigateTo({
|
||||
url: './publish/publish',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("../../common/index/index.css");
|
||||
</style>
|
||||
273
pages/chat/publish.vue
Normal file
273
pages/chat/publish.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="page" @touchstart="touchStart" @touchend="touchEnd">
|
||||
<form>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder="这一刻的想法..." v-model="input_content" />
|
||||
</view>
|
||||
<view class="uni-list list-pd">
|
||||
<view class="uni-list-cell cell-pd">
|
||||
<view class="uni-uploader">
|
||||
<view class="uni-uploader-head">
|
||||
<view class="uni-uploader-title"></view>
|
||||
<view class="uni-uploader-info">{{imageList.length}}/9</view>
|
||||
</view>
|
||||
<view class="uni-uploader-body">
|
||||
<view class="uni-uploader__files">
|
||||
<block v-for="(image,index) in imageList" :key="index">
|
||||
<view class="uni-uploader__file" style="position: relative;">
|
||||
<image class="uni-uploader__img" mode="aspectFill" :src="image"
|
||||
:data-src="image" @tap="previewImage"></image>
|
||||
<view class="close-view" @click="close(index)">×</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="uni-uploader__input-box" v-show="imageList.length < 9">
|
||||
<view class="uni-uploader__input" @tap="chooseImage"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer">
|
||||
<button type="default" class="feedback-submit" @click="publish">提交</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import image from '@/common/image.js';
|
||||
|
||||
var sourceType = [
|
||||
['camera'],
|
||||
['album'],
|
||||
['camera', 'album']
|
||||
]
|
||||
var sizeType = [
|
||||
['compressed'],
|
||||
['original'],
|
||||
['compressed', 'original']
|
||||
]
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// title: 'choose/previewImage',
|
||||
input_content: '',
|
||||
imageList: [],
|
||||
|
||||
|
||||
|
||||
sourceTypeIndex: 2,
|
||||
sourceType: ['拍照', '相册', '拍照或相册'],
|
||||
sizeTypeIndex: 2,
|
||||
sizeType: ['压缩', '原图', '压缩或原图'],
|
||||
countIndex: 8,
|
||||
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
|
||||
//侧滑返回start
|
||||
startX: 0, //点击屏幕起始位置
|
||||
movedX: 0, //横向移动的距离
|
||||
endX: 0, //接触屏幕后移开时的位置
|
||||
//end
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
this.imageList = [],
|
||||
this.sourceTypeIndex = 2,
|
||||
this.sourceType = ['拍照', '相册', '拍照或相册'],
|
||||
this.sizeTypeIndex = 2,
|
||||
this.sizeType = ['压缩', '原图', '压缩或原图'],
|
||||
this.countIndex = 8;
|
||||
},
|
||||
|
||||
methods: {
|
||||
async publish() {
|
||||
if (!this.input_content) {
|
||||
uni.showModal({
|
||||
content: '内容不能为空',
|
||||
showCancel: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '发布中'
|
||||
});
|
||||
|
||||
var location = await this.getLocation(); //位置信息,可删除,主要想记录一下异步转同步处理
|
||||
var images = [];
|
||||
for (var i = 0, len = this.imageList.length; i < len; i++) {
|
||||
var image_obj = {
|
||||
name: 'image-' + i,
|
||||
uri: this.imageList[i]
|
||||
};
|
||||
images.push(image_obj);
|
||||
}
|
||||
|
||||
uni.uploadFile({ //该上传仅为示例,可根据自己业务修改或封装,注意:统一上传可能会导致服务器压力过大
|
||||
url: 'moment/moments', //仅为示例，非真实的接口地址
|
||||
files: images, //有files时,会忽略filePath和name
|
||||
filePath: '',
|
||||
name: '',
|
||||
formData: { //后台以post方式接收
|
||||
'user_id': '1', //自己系统中的用户id
|
||||
'text': this.input_content, //moment文字部分
|
||||
'longitude': location.longitude, //经度
|
||||
'latitude': location.latitude //纬度
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: "发布成功"
|
||||
})
|
||||
uni.navigateBack({ //可根据实际情况使用其他路由方式
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log("e: " + JSON.stringify(e));
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: "发布失败,请检查网络"
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getLocation() { //h5中可能不支持,自己选择
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function(res) {
|
||||
resolve(res);
|
||||
},
|
||||
fail: (e) => {
|
||||
reject(e);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
close(e) {
|
||||
this.imageList.splice(e, 1);
|
||||
},
|
||||
chooseImage: async function() {
|
||||
if (this.imageList.length === 9) {
|
||||
let isContinue = await this.isFullImg();
|
||||
console.log("是否继续?", isContinue);
|
||||
if (!isContinue) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
uni.chooseImage({
|
||||
sourceType: sourceType[this.sourceTypeIndex],
|
||||
sizeType: sizeType[this.sizeTypeIndex],
|
||||
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList
|
||||
.length : this.count[this.countIndex],
|
||||
success: (res) => {
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
//提交压缩,因为使用了H5+ Api,所以自定义压缩目前仅支持APP平台
|
||||
var compressd = cp_images => {
|
||||
this.imageList = this.imageList.concat(cp_images) //压缩后的图片路径
|
||||
}
|
||||
image.compress(res.tempFilePaths, compressd);
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
this.imageList = this.imageList.concat(res
|
||||
.tempFilePaths) //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
|
||||
// #endif
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
isFullImg: function() {
|
||||
return new Promise((res) => {
|
||||
uni.showModal({
|
||||
content: "已经有9张图片了,是否清空现有图片？",
|
||||
success: (e) => {
|
||||
if (e.confirm) {
|
||||
this.imageList = [];
|
||||
res(true);
|
||||
} else {
|
||||
res(false)
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
res(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
previewImage: function(e) {
|
||||
var current = e.target.dataset.src
|
||||
uni.previewImage({
|
||||
current: current,
|
||||
urls: this.imageList
|
||||
})
|
||||
},
|
||||
touchStart: function(e) {
|
||||
this.startX = e.mp.changedTouches[0].pageX;
|
||||
},
|
||||
|
||||
touchEnd: function(e) {
|
||||
this.endX = e.mp.changedTouches[0].pageX;
|
||||
if (this.endX - this.startX > 200) {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
margin-top: 80upx;
|
||||
}
|
||||
|
||||
.cell-pd {
|
||||
padding: 20upx 30upx;
|
||||
}
|
||||
|
||||
.uni-textarea {
|
||||
width: auto;
|
||||
padding: 20upx 25upx;
|
||||
line-height: 1.6;
|
||||
height: 150upx;
|
||||
}
|
||||
|
||||
.uni-list::before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.uni-list:after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.list-pd {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.close-view {
|
||||
text-align: center;
|
||||
line-height: 30upx;
|
||||
height: 35upx;
|
||||
width: 35upx;
|
||||
background: #ef5350;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 1upx;
|
||||
right: 1upx;
|
||||
font-size: 35upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 750upx;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,193 +1,287 @@
|
||||
|
||||
<template>
|
||||
<view class="invitation">
|
||||
<view class="invitation-refund">
|
||||
<view class="invitation-refund-btn" @click="onBack">
|
||||
<uni-icons type="back" color="white" size="24"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<image class="invitation-back" src="@/static/img/code_back.png" mode="aspectFill"></image>
|
||||
<view class="invitation-content">
|
||||
<view class="invitation-lay">
|
||||
<image class="invitation-code" :src="code"></image>
|
||||
<view class="invitation-text">
|
||||
<view class="invitation-text-code" @click="copyInvite"><text>{{invite}}</text>点击复制</view>
|
||||
<view class="invitation-text-sub">扫码下载共力生态App</view>
|
||||
<view class="invitation-text-sub">邀请好友增加共力分增长</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="invitation-btn" @click="onShare">分享邀请</button>
|
||||
</view>
|
||||
<!-- 分享 -->
|
||||
<uni-popup ref="popupShare" type="share" background-color="#fff">
|
||||
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { invitationCode } from '@/apis/interfaces/user.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
invite: '',
|
||||
code : '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
invitationCode().then(res => {
|
||||
this.invite = res[0].invite
|
||||
this.code = res[0].code
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 返回
|
||||
onBack(){
|
||||
this.$Router.back()
|
||||
},
|
||||
// 复制邀请码
|
||||
copyInvite(){
|
||||
uni.setClipboardData({
|
||||
data: this.invite,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '邀请码已复制',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 分享
|
||||
onShare(){
|
||||
this.$refs.popupShare.open();
|
||||
},
|
||||
// 分享选项
|
||||
select(e){
|
||||
switch(e.item.name){
|
||||
case 'wxchum':
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene : 'WXSceneSession',
|
||||
type : 0,
|
||||
href : 'https://invite.gongli.vip?invitation_code=' + this.invite,
|
||||
title : '共力生态',
|
||||
summary : '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
|
||||
imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'wxcircle':
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene : 'WXSceneTimeline',
|
||||
type : 0,
|
||||
href : 'https://invite.gongli.vip?invitation_code=' + this.invite,
|
||||
summary : '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
|
||||
imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'qq':
|
||||
uni.showToast({
|
||||
title: 'qq好友分享近期开放，敬请期待',
|
||||
icon : 'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.invitation{
|
||||
position: relative;
|
||||
background: #1c2472;
|
||||
min-height: 100vh;
|
||||
.invitation-refund{
|
||||
@extend .ios-top;
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: $margin*2;
|
||||
z-index: 9;
|
||||
.invitation-refund-btn{
|
||||
border-radius: 50%;
|
||||
line-height: 58rpx;
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
.invitation-back{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.invitation-content{
|
||||
padding: $padding*2;
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.invitation-lay{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: $radius;
|
||||
padding: $padding;
|
||||
margin-bottom: $margin;
|
||||
color: white;
|
||||
.invitation-code{
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
background: white;
|
||||
}
|
||||
.invitation-text{
|
||||
width: calc(100% - 198rpx);
|
||||
.invitation-text-code{
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
text{
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.invitation-text-sub{
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.invitation-btn{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
background: #5a0399;
|
||||
color: white;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="invitation">
|
||||
<view class="invitation-refund" v-if="!canSave">
|
||||
<view class="invitation-refund-btn" @click="onBack">
|
||||
<uni-icons type="back" color="white" size="24"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<image class="invitation-back" src="@/static/img/code_back.png" mode="aspectFill"></image>
|
||||
<view class="invitation-content">
|
||||
<view class="invitation-lay">
|
||||
<image class="invitation-code" :src="code"></image>
|
||||
<view class="invitation-text">
|
||||
<view class="invitation-text-code" @click="copyInvite"><text>{{invite}}</text>点击复制</view>
|
||||
<view class="invitation-text-sub">扫码下载共力生态App</view>
|
||||
<view class="invitation-text-sub">邀请好友增加共力分增长</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="invitation-btn" @click="onShare" v-if="!canSave">分享邀请</button>
|
||||
</view>
|
||||
<!-- 分享 -->
|
||||
<uni-popup ref="popupShare" type="share" background-color="#fff">
|
||||
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
invitationCode
|
||||
} from '@/apis/interfaces/user.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
invite: '',
|
||||
code: '',
|
||||
canSave: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
invitationCode().then(res => {
|
||||
this.invite = res[0].invite
|
||||
this.code = res[0].code
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 返回
|
||||
onBack() {
|
||||
this.$Router.back()
|
||||
},
|
||||
// 复制邀请码
|
||||
copyInvite() {
|
||||
uni.setClipboardData({
|
||||
data: this.invite,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '邀请码已复制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 分享
|
||||
onShare() {
|
||||
this.$refs.popupShare.open();
|
||||
},
|
||||
// 分享选项
|
||||
select(e) {
|
||||
switch (e.item.name) {
|
||||
case 'wxchum':
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: 'https://invite.gongli.vip?invitation_code=' + this.invite,
|
||||
title: '共力生态',
|
||||
summary: '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
|
||||
imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'wxcircle':
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneTimeline',
|
||||
type: 0,
|
||||
href: 'https://invite.gongli.vip?invitation_code=' + this.invite,
|
||||
summary: '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
|
||||
imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'download':
|
||||
this.canSave = true
|
||||
uni.showLoading({
|
||||
title: '保存中'
|
||||
})
|
||||
this.down()
|
||||
break;
|
||||
}
|
||||
},
|
||||
down() {
|
||||
setTimeout(() => {
|
||||
let pages = getCurrentPages();
|
||||
let page = pages[pages.length - 1];
|
||||
let ws = page.$getAppWebview();
|
||||
let bitmap = new plus.nativeObj.Bitmap('drawScreen');
|
||||
// 将webview内容绘制到Bitmap对象中
|
||||
ws.draw(bitmap, () => {
|
||||
// 保存图片到本地
|
||||
bitmap.save("_doc/drawScreen.jpg", {
|
||||
overwrite: true
|
||||
}, res => {
|
||||
console.log(res.target); // 图片地址
|
||||
|
||||
uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
|
||||
filePath: res.target, //图片文件路径
|
||||
success: () => {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '保存图片成功，赶紧去转发给好友吧~',
|
||||
showCancel: false,
|
||||
confirmColor: "#34CE98",
|
||||
confirmText: '知道了',
|
||||
success: () => {
|
||||
this.canSave = false;
|
||||
}
|
||||
})
|
||||
uni.hideLoading()
|
||||
},
|
||||
fail: function(e) {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '保存图片失败，重新再试试~',
|
||||
showCancel: false,
|
||||
confirmColor: "#34CE98",
|
||||
confirmText: '知道了',
|
||||
success: () => {
|
||||
this.canSave = false;
|
||||
}
|
||||
})
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
|
||||
bitmap.clear(); // 清除Bitmap对象
|
||||
}, error => {
|
||||
console.log(JSON.stringify(error)); // 保存失败信息
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '保存图片失败，重新再试试~',
|
||||
showCancel: false,
|
||||
confirmColor: "#34CE98",
|
||||
confirmText: '知道了',
|
||||
success: () => {
|
||||
this.canSave = false;
|
||||
}
|
||||
})
|
||||
uni.hideLoading()
|
||||
bitmap.clear(); // 清除Bitmap对象
|
||||
});
|
||||
// bitmap.clear(); // 清除Bitmap对象
|
||||
}, error => {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '保存图片失败，重新再试试~',
|
||||
showCancel: false,
|
||||
confirmColor: "#34CE98",
|
||||
confirmText: '知道了',
|
||||
success: () => {
|
||||
this.canSave = false;
|
||||
}
|
||||
})
|
||||
uni.hideLoading()
|
||||
console.log(JSON.stringify(error)); // 绘制失败
|
||||
}, {
|
||||
check: true, // 设置为检测白屏
|
||||
});
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.invitation {
|
||||
position: relative;
|
||||
background: #1c2472;
|
||||
min-height: 100vh;
|
||||
|
||||
.invitation-refund {
|
||||
@extend .ios-top;
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: $margin*2;
|
||||
z-index: 9;
|
||||
|
||||
.invitation-refund-btn {
|
||||
border-radius: 50%;
|
||||
line-height: 58rpx;
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.invitation-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.invitation-content {
|
||||
padding: $padding*2;
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.invitation-lay {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: $radius;
|
||||
padding: $padding;
|
||||
margin-bottom: $margin;
|
||||
color: white;
|
||||
|
||||
.invitation-code {
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.invitation-text {
|
||||
width: calc(100% - 198rpx);
|
||||
|
||||
.invitation-text-code {
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.invitation-text-sub {
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invitation-btn {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
background: #5a0399;
|
||||
color: white;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -71,7 +71,8 @@
|
||||
classify : [],
|
||||
goods : [],
|
||||
has_more:true,
|
||||
page:1,
|
||||
page:1,
|
||||
ShopId:'',
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -94,20 +95,19 @@
|
||||
onPullDownRefresh() {
|
||||
this.has_more = true;
|
||||
this.page = 1;
|
||||
this.goods = [];
|
||||
this.getGoods()
|
||||
},
|
||||
methods: {
|
||||
getGoods() {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
uni.showLoading({
|
||||
title:'请求中~',
|
||||
mask:true,
|
||||
})
|
||||
shopsGoods(this.ShopId, this.category_id,this.page).then(res => {
|
||||
if(this.page = 1){
|
||||
this.goods = [];
|
||||
}
|
||||
this.goods = this.goods.concat(res.data);
|
||||
this.has_more = res.page.has_more;
|
||||
uni.hideLoading()
|
||||
uni.hideLoading();
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
@@ -117,9 +117,14 @@
|
||||
},
|
||||
lower(){
|
||||
if(this.has_more){
|
||||
this.page = this.page + 1;
|
||||
this.has_more = true;
|
||||
this.getGoods()
|
||||
this.page = this.page + 1
|
||||
this.getGoods();
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'没有更多~',
|
||||
icon:"none",
|
||||
mask:true,
|
||||
})
|
||||
}
|
||||
},
|
||||
selectClassify(id) {
|
||||
|
||||
Reference in New Issue
Block a user