Skip to content

M
mallapp
Commit ab173902 authored by zhengke's avatar zhengke
Browse files
Options

增加一键发圈

parent ce9f21ee
Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 0 deletions
pages.json
View file @ ab173902
......@@ -291,6 +291,12 @@
]
},
{
"root":"pages/quick_share",
"pages":[{
"path": "index"
}]
}
],
"globalStyle": {
......
pages/quick_share/index.vue 0 → 100644
View file @ ab173902
<style>
.quick_top {
display: flex;
margin: 10px auto;
}
.quick_slider {
padding: 5px 17px;
border-radius: 20px;
background-color: #EBEBEB;
color: #272727;
display: inline-block;
font-size: 12px;
margin-left: 10px;
letter-spacing: 2px;
}
.quick_arrow {
width: 10%;
}
.quick_arrow .u_icon {
margin-left: 20%;
line-height: 30px;
color: #cd9621;
font-size: 20px;
}
.checkedItem {
background-color: #ff4544;
color: #fff;
}
.quick_arrow .allTags {
margin: 20px;
}
.allTags_List {
padding-bottom: 20px;
}
.allTags_List {
display: flex;
}
.quick_Content {
width: 100%;
}
.quick_Inner {
display: flex;
justify-content: space-between;
padding:20px;
}
.quick_ImgDiv {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.quick_ImgDiv img {
width: 100%;
height: 100%;
}
.quick_Center {
position: relative;
width: 85%;
}
.share_Content {
position: absolute;
right: 0;
top: 0;
padding: 5px 10px;
background-color: #faf3e3;
border-radius: 20px;
font-size: 12px;
display: flex;
min-width: 50px;
align-items: center;
}
.Quick_Shareicon {
width: 13px;
height: 13px;
margin-right: 5px;
}
.Quick_ImgContent {
display: flex;
justify-content: space-between;
}
.quick_page img {
width: 650rpx;
height: 700rpx;
}
.quick_page .hotsopt {
position: absolute;
background: transparent;
border: none;
outline: none;
}
.quick_page .hotsopt::after {
border: none;
}
.qr_DialogBtn{
position: absolute;
bottom:30px;
width:80%;
background-color:#FF4048;
color:#fff;
margin:auto;
left:50%;
margin-left:-40%;
border-radius: 20px;
}
</style>
<template>
<view :style="{ height: contentHeight }">
<u-tabs name="Name" :list="dataFirst" :is-scroll="false" :current="active" :bar-width="80" :font-size="32"
:active-color="mainColor" @change="getChild"></u-tabs>
<scroll-view scroll-x="true" style="white-space: nowrap;display: flex;margin:10px 0">
<view @click="getSecond(item,index)" :class="{'checkedItem':index==active2}" class="quick_slider" v-for="(item,index) in dataSecond" :key="index">{{item.Name}}</view>
</scroll-view>
<view class="quick_top" v-if="dataThird.length>0">
<scroll-view scroll-x="true" style="white-space: nowrap;display: flex;width:90%">
<view @click="getThird(item,index)" :class="{'checkedItem':index==active3}" class="quick_slider" v-for="(item,index) in dataThird" :key="index">{{item.Name}}</view>
</scroll-view>
<view class="quick_arrow">
<u-icon class="u_icon" name="arrow-up" v-if="show" @click="show=false"></u-icon>
<u-icon class="u_icon" name="arrow-down" v-else @click="show=true"></u-icon>
<u-popup v-model="show" mode="top">
<view class="allTags">全部标签</view>
<view class="allTags_List">
<view @click="getThird(item,index)" :class="{'checkedItem':index==active3}" class="quick_slider" v-for="(item,index) in dataThird" :key="index">{{item.Name}}</view>
</view>
</u-popup>
</view>
</view>
<scroll-view :scroll-y="true" style="background-color: #f0f4f7" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ 'height': scrollHeight}">
<view class="quick_Content" style="width: 100%;min-height:100%">
<view class="quick_Inner" v-for="(item,index) in dataList" :key="index" style="margin-bottom:10px;background-color:#fff;">
<view class="quick_ImgDiv">
<img :src="item.HeadImg" alt="" />
</view>
<view class="quick_Center">
<view style="margin-bottom:10px;">{{item.UserName}}</view>
<view v-html="item.MaterialInfo" @click="goUrl(item)" style="margin-bottom:10px;"></view>
<view v-if="item.LinkUrl!=''" @click="goUrl(item)" style="color:#b08b38;margin-bottom:10px;">查看详情</view>
<view v-for="(sItem,i) in imgArr" :key="i">
<view style="flex-direction:row;display:flex;">
<!-- 横排布局 -->
<view v-for="(subItem,index) in item.ImgList" :key="index" style="margin-bottom:3px;">
<!-- 遍历数组 -->
<view v-if="index>=i*3&&index<3*(i+1)" class="flex-item" style="margin-right:5px;">
<!-- 分段显示 -->
<img :src="subItem" style="height:190rpx;width:190rpx;"></img>
</view>
</view>
</view>
</view>
<view class="share_Content" @click="openShare(item)">
<image src="@/static/images/icon/icon-share.png" class="Quick_Shareicon" />
{{item.ShareCount}}
</view>
</view>
</view>
</view>
<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
</scroll-view>
<tabbar></tabbar>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
<u-popup v-model="showDialog" mode="center" :mask-close-able="false" custom-style="padding:0;background:none;">
<view style="position: relative;">
<img src="@/static/images/qrDialog.png" mode="widthFix" />
<button class="qr_DialogBtn" @click="showDialog=false">确定</button>
</view>
</u-popup>
</view>
</template>
<script>
import auth from "@/components/auth/index";
import tabbar from "@/components/tabbar/index";
export default {
data() {
return {
show: false,
pageTitle: '分享',
loading: true,
showAuth: false,
mainColor: '',
u: {},
contentHeight: 0,
msg: {
Name: "", //页面名称
pageIndex: 1,
pageSize: 10,
},
active: 0, //一级
active2: -1, //二级选中
active3: -1, //三级选中
conMsg: {
CateId: 0,
QStartDate: "", //开始时间
QEndDate: "", //结束时间
KeyWords: "", //页面名称
pageIndex: 1,
pageSize: 10,
total: 0,
},
//第一层数据
dataFirst: [],
//第二层
dataSecond: [],
//第三层
dataThird: [],
//内容数据
dataList: [],
imgArr: [0, 1, 2],
showShare: false, // 显示分享
showAuth: false, //是否登录弹窗
scrollHeight: 0,
status: "loadmore",
pageCount: 1,
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
goodTitle:'', //名称=>传子组件
images:[], //图片=>传子组件
qrHeight:180,
showDialog:false
};
},
components: {
auth,
tabbar
},
created() {
this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
// this.scrollHeight = this.$utils.calcContentHeight(-40+180) + 'px';
this.scrollHeight = this.$utils.calcContentHeight(-40+this.qrHeight) + 'px';
this.mainColor = this.$uiConfig.mainColor;
},
mounted() {
let currentPages = getCurrentPages();
let u = '/' + currentPages[currentPages.length - 1].route;
let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
pages.forEach(x => {
if (x.value == u) {
this.pageTitle = x.new_name ? x.new_name : x.name;
}
});
uni.setNavigationBarTitle({
title: this.pageTitle
});
},
onLoad(option) {
this.getList();
this.getContent();
this.u = uni.getStorageSync("mall_UserInfo");
},
methods: {
//点击切换
changeHandler(i) {
this.active = i;
},
//获取头部数据
getList() {
this.request2({
url: '/api/Share/GetShareCategoryList',
data: this.msg
},
res => {
var data = res.data;
this.dataFirst = data;
if (data && data.length > 0) {
this.dataSecond = data[0].children;
if (data[0].children && data[0].children.length > 0) {
this.dataThird = data[0].children[0].children
}
}
}
);
},
//获取内容
getContent() {
this.request2({
url: '/api/Share/AppGetShareFriendPage',
data: this.conMsg
},
res => {
if (res.resultCode == 1) {
this.dataList = this.dataList.concat(res.data.pageData);
this.pageCount = res.data.pageCount;
}
}
);
},
getChang(){
if(this.dataThird.length==0){
this.qrHeight=145
}else{
this.qrHeight=180
}
this.scrollHeight = this.$utils.calcContentHeight(-40+this.qrHeight) + 'px';
},
//点击一级分类
getChild(index) {
this.dataList=[];
this.active = index;
this.dataSecond = this.dataFirst[index].children;
this.dataThird = [];
this.active2 = -1;
this.active3 = -1;
this.conMsg.CateId = this.dataFirst[index].Id;
this.getContent();
this.getChang();
},
//点击二级分类
getSecond(item, index) {
this.dataList=[];
this.active2 = index;
this.dataThird = item.children;
this.active3 = -1;
this.conMsg.CateId = item.Id;
this.getContent();
},
//点击三级分类
getThird(item, index) {
this.dataList=[];
this.active3 = index;
this.show = false;
this.conMsg.CateId = item.Id;
this.getContent();
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
},
closeShare() {
this.showShare = false;
},
//点击分享
openShare(item) {
if (this.u) {
this.request2({
url: '/api/Share/SetShareCount',
data: {
Id:item.Id
}
},
res => {
if (res.resultCode == 1) {
item.ShareCount++;
}
}
);
this.sendQuanHandler();
this.goodTitle=item.MaterialInfo;
this.images=item.ImgList;
this.showShare = true;
} else {
this.showAuth = true;
}
},
//滚动加载
lower(e) {
if (this.conMsg.pageIndex < this.pageCount) {
this.conMsg.pageIndex++;
this.status = "loading";
this.getContent();
} else {
this.status = "nomore";
}
},
//跳转
goUrl(item){
if (item.LinkUrl && item.LinkUrl.length > 0) {
uni.redirectTo({
url: item.LinkUrl
});
}
},
//分享复制
sendQuanHandler() {
this.copyHandler();
setTimeout(() => {
this.savePicHandler();
}, 1000);
},
//复制文字
copyHandler() {
uni.setClipboardData({
data: this.goodTitle,
});
},
savePicHandler() {
uni.showLoading({
title: "正在下载图片",
});
let arr = JSON.parse(JSON.stringify(this.images));
this.downLoadImage(arr);
},
downLoadImage(arr) {
let that = this;
uni.downloadFile({
url: arr[0],
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
arr.splice(0, 1);
if (arr.length > 0) {
that.downLoadImage(arr);
} else {
uni.hideLoading();
uni.showToast({
title: "下载成功",
});
that.showDialog=true;
}
},
fail: function(e) {
uni.hideLoading();
that.$refs.uTips.show({
title: "下载失败，请稍后重试",
type: "error",
duration: "2300",
});
},
});
} else {
uni.hideLoading();
that.$refs.uTips.show({
title: "下载失败，请稍后重试",
type: "error",
duration: "2300",
});
}
},
});
},
}
};
</script>
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment