odd_job_applet/pages/worker/wshare.vue

<template>
	<view>
		<scroll-view scroll-x class="bg-white nav text-center solid-bottom echo-fixed-top">
			<view class="cu-item" :class="item.id==cateid?'text-red cur':''" v-for="(item, index) in catelist" :key="item.id" @tap="tabSelect" :data-id="item.id">
				{{item.title}}
			</view>
		</scroll-view>
		<view class="echo-fixed-top-empty"></view>
		
		
		
		
		<view class="cu-list grid col-2 no-border padding-lr">
			<block v-for="(item,index) in plist" :key="index">
				<view class="cu-item">
					<view class="padding-lr-sm" @tap="getWorkerImage(item.id)">
						<view class="bg-img" :style="'background-image:url(' + item.tilpic + ');'"></view>
						<view class="padding-tb-xs text-cut">{{item.title}}</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="pstatus"></uni-load-more>
		
		<view class="echo-fixed-top-empty"></view>
		<view class="text-center text-gray padding-tb-sm solids-top bg-white" style="position: fixed; bottom: 0rpx; width: 100%;">
			<button class="cu-btn margin-lr-xs" :class="modal.texttil=='title'?'line-red':'line-grey'"  @tap="changeTexttil('title')">企业名称</button>
			<button class="cu-btn margin-lr-xs" :class="modal.texttil=='address'?'line-red':'line-grey'"  @tap="changeTexttil('address')">详细地址</button>
			<button class="cu-btn margin-lr-xs" :class="modal.texttil=='mobile'?'line-red':'line-grey'"  @tap="changeTexttil('mobile')">联系电话</button>
		</view>
		
		<view class="cu-modal" :class="modal.name=='shareWorkerpicModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog picmodal" @tap.stop="">
				<view class="bg-img">
					<image mode="widthFix" :src="modal.workerpic"></image>
					<view class="cu-bar justify-end text-white picmodalclose">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top-xs">
					<view class="action margin-0 flex-sub solid-left" @tap="saveImage">保存到相册</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				cateid: 0,
				catelist: [],
	
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: [],
				
				modal: {
					name: null,
					texttil: "title",
					workerpic: ""
				}
			};
		},
		onLoad: function() {
			_this = this;
			_this.userinfo = uni.getStorageSync('userinfo') || false;
			_this.workerinfo = uni.getStorageSync('workerinfo') || false;
			if (_this.workerinfo === false) {
				uni.reLaunch({
					url: "/pages/my/my"
				});
				return false;
			}
			_this.$req.ajax({
				path: "worker/pagewshare",
				data: {}
			}).then((data) => {
				_this.catelist = data.catelist;
				_this.getMore();
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			tabSelect: function(e) {
				_this.cateid = e.currentTarget.dataset.id;
				_this.pageRefresh();
			},
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			getMore: function() {
				_this.$req.ajax({
					path: "worker/listwshare",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						cateid: _this.cateid
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			changeTexttil: function(texttil) {
				_this.modal.texttil = texttil;
			},
			getWorkerImage: function(shareid) {
				var texttil = _this.modal.texttil=='title' ? _this.workerinfo.title : ( _this.modal.texttil=='address' ? _this.workerinfo.address  : _this.workerinfo.mobile );
				_this.$req.ajax({
					title: "推广海报生成中...",
					path: "worker/getworkerimage",
					data: {
						shareid: shareid,
						userid: _this.userinfo.id,
						workerid: _this.workerinfo.id,
						texttil: texttil 
					}
				}).then((data) => {
					_this.modal.workerpic = data.workerpic;
					_this.modal.name = "shareWorkerpicModal";
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
				});
			},
			saveImage: function() {
				uni.downloadFile({
					url: _this.modal.workerpic, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showModal({
										title: '信息提示',
										content: "已保存到手机相册，注意查收。",
										showCancel: false
									});
								}
							});
						}
					}
				});
			},
			hideModal: function() {
				_this.modal.name = null;
			},
			
		}
	}
</script>

<style>
	.cu-item .bg-img{ width: 100%; height: 390rpx; background-position: center top; }
	
	.picmodal{ width: 540rpx; background-color: transparent; }
	.picmodal image{ width: 100%; }
	.picmodal .bg-img{ position: relative; }
	.picmodalclose{ position: absolute; top: 0rpx; right: 0rpx; }

</style>