瀏覽代碼

前端小程序 动态功能 sdy

zhongtianhaoyuan 3 年之前
父節點
當前提交
23a5d3184c

+ 27 - 7
pages.json

@@ -65,13 +65,6 @@
 				"navigationBarTitleText": "工厂价格"
 			}
 		},
-		{
-			"path": "pages/grain_pulse/friendcircle",
-			"style": {
-				"enablePullDownRefresh": true,
-				"navigationBarTitleText": "动态"
-			}
-		},
 		{
 			"path": "pages/grain_pulse/details",
 			"style": {
@@ -113,6 +106,33 @@
 				"navigationBarTitleText": "完善信息"
 			}
 		},
+		{
+			"path": "pages/grain_pulse/dynamic",
+			"style": {
+				"enablePullDownRefresh": true,
+				"navigationBarTitleText": "动态"
+			}
+		},
+		{
+			"path": "pages/grain_pulse/release",
+			"style": {
+				"enablePullDownRefresh": true,
+				"navigationBarTitleText": "发布"
+			}
+		},
+		{
+			"path": "pages/grain_pulse/record",
+			"style": {
+				"enablePullDownRefresh": true,
+				"navigationBarTitleText": "记录",
+				"navigationStyle": "custom",
+				"app-plus": {
+					"titleNView": false,
+					"animationType": "slide-in-bottom",
+					"softinputMode": "adjustPan"
+				}
+			}
+		},
 		{
 			"path": "pages/grain_pulse/search",
 			"style": {

+ 203 - 0
pages/grain_pulse/dynamic.vue

@@ -0,0 +1,203 @@
+<template>
+	<view class="center">
+		<u-search placeholder="请输入货名" v-model="keyword" @clear="searchClear" style="width: 96%; margin: 0 auto;"
+			@custom="getrelease"></u-search>
+		<view class="bottom flex">
+			<view class="bottonCss" @click="release">
+				<image src="../../static/img/liangmai/fabu-2@3x.png" mode="" style="width: 40rpx; height: 40rpx;">
+				</image>
+				<view style="color: #22C572;">发布</view>
+			</view>
+			<view class="bottonCss" @click="record">
+				<image src="../../static/img/liangmai/jilu-2@3x.png" mode="" style="width: 40rpx; height: 40rpx;">
+				</image>
+				<view style="color: #656765;">记录</view>
+			</view>
+		</view>
+
+
+		<view v-for="(item,index) in releaseList">
+			<view class="modular">
+				<view class="flex">
+					<view class="touxiang">
+						<image :src="portraits" mode="" style="height: 76rpx;border-radius: 8rpx;"></image>
+					</view>
+					<view class="" style="margin: 20rpx 30rpx;">
+						<view style="color: #333333;font-weight: 600;font-size: 34rpx;">{{item.compName}}</view>
+						<view style="color: #AFB3BF; margin-top: 4rpx;">{{item.updateDate}}</view>
+					</view>
+				</view>
+				<view class="title">{{item.title}}</view>
+				<view class="titleText">
+					{{item.content}}
+				</view>
+				<view class="imgList flex" v-if="item.address != ''">
+					<view v-for="(items,count) in item.imgList" style="width: 30%;margin-left: 20rpx;">
+						<image :src="items" style="height: 220rpx;border-radius: 16rpx;"></image>
+					</view>
+				</view>
+				<view class="flex">
+					<view class="address flex" style="margin: 30rpx;">
+						<image src='../../static/img/location.png'
+							style="width: 26rpx;height: 30rpx;top: 8rpx;margin: 0 10rpx;"></image>
+						{{item.city}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-show="isLoadMore">
+			<uni-load-more :status="loadStatus"></uni-load-more>
+				<!-- <u-loadmore :status="status" /> -->
+		</view>
+		<view style='height:12vh;background:#F5F6FA;line-height:24vh;text-align:center;' v-if='releaseInfo.length == 0'>
+			当前暂无结果
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				keyword: "",
+				releaseList: [],
+				 releaseInfo:[],
+				currentPage: 1,
+				pageSize: 10,
+				isLoadMore:false,
+				loadStatus:"loading"
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			this.getrelease()
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		onReachBottom() { //上拉触底函数
+			if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
+				this.isLoadMore = true
+				this.currentPage += 1
+				setTimeout(function() {
+					uni.stopPullDownRefresh();
+				}, 1000);
+				this.getrelease()
+			}
+		},
+		onShow() {
+			this.userName = this.userInfo.userName
+			this.portraits = this.userInfo.avatarUrl
+			this.getrelease()
+		},
+		methods: {
+			getrelease() {
+				this.$api.doRequest('get', '/settledCompanyDynamics/selectSettledCompanyDynamicsPage', {
+						currentPage: this.currentPage,
+						pageSize: this.pageSize,
+						searchKeyWord: this.keyword
+					})
+					.then(res => {
+						if (res.data.code == 200) {
+							 this.releaseInfo = res.data.data.records
+							if(res.data.data.records.length > 0){
+								this.releaseList=this.releaseList.concat(this.releaseInfo)
+								this.isLoadMore = false
+								for (let i = 0; i < this.releaseList.length; i++) {
+									this.releaseList[i].imgList = this.releaseList[i].address.split(",")
+								}
+							}else{
+								this.loadStatus = 'nomore'
+							}
+							
+						}
+					})
+			},
+			searchClear() {
+				this.keyword = ""
+			},
+			release() {
+				uni.navigateTo({
+					url: `/pages/grain_pulse/release`
+				})
+			},
+			record() {
+				uni.navigateTo({
+					url: `/pages/grain_pulse/record`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.center {
+		padding: 10rpx 4rpx;
+	}
+
+	.bottom {
+		width: 100%;
+		height: 160rpx;
+		background-color: #FFFFFF;
+		position: fixed;
+		bottom: 0rpx;
+		z-index: 9999;
+	}
+
+	.bottonCss {
+		width: 50%;
+		height: 40rpx;
+		margin-top: 40rpx;
+		text-align: center;
+
+	}
+
+	.modular {
+		width: 94%;
+		margin: 20rpx auto;
+		background-color: #FFFFFF;
+		border-radius: 40rpx;
+		margin-top: 40rpx;
+	}
+
+	.touxiang {
+		width: 76rpx;
+		height: 76rpx;
+		background-color: red;
+		margin: 20rpx 0 0 34rpx;
+	}
+
+	.title {
+		font-size: 38rpx;
+		font-weight: 600;
+		margin-left: 30rpx;
+	}
+
+	.titleText {
+		font-size: 34rpx;
+		margin-left: 30rpx;
+		margin-top: 10rpx;
+	}
+
+	.imgList {
+		width: 100%;
+		margin-top: 30rpx;
+		flex-wrap: wrap;
+	}
+
+	.address {
+		width: 60%;
+		height: 48rpx;
+		background-color: #F5F6FA;
+		border-radius: 24rpx;
+		margin-left: 30rpx;
+		text-align: center;
+		line-height: 48rpx;
+	}
+</style>

+ 0 - 9
pages/grain_pulse/friendcircle.vue

@@ -1,9 +0,0 @@
-<template>
-	<view>11</view>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

+ 1 - 1
pages/grain_pulse/home.vue

@@ -165,7 +165,7 @@
 			},
 			friendcircle() {
 				uni.navigateTo({
-					url: '/pages/grain_pulse/friendcircle'
+					url: '/pages/grain_pulse/dynamic'
 				})
 			},
 			todetails(item) {

+ 309 - 0
pages/grain_pulse/record.vue

@@ -0,0 +1,309 @@
+<template>
+	<view class="center">
+		<view class="topCss">
+			<view class="back-btn cuIcon-back" @click="navBack"></view>
+			<view class="introduce">
+				<view class="portrait">
+					<image :src="portraits" mode="" style="height: 120rpx;border-radius: 14rpx;"></image>
+				</view>
+				<view class="name">{{userName}}</view>
+				<view class="dongtai">
+					{{count}}
+					<text style="color: #AFB3BF;">条动态</text>
+				</view>
+				<view class="flex">
+					<view v-for="(item,index) in choices" class="labels">
+						<view :class="item.changeCss" @click="querys(item)">{{item.name}}</view>
+						<view style="width: 40rpx;height: 6rpx;background-color: #22C572;margin: 16rpx auto 0;"
+							v-if="item.check == true"></view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-for="(item,index) in release">
+			<view class="modular">
+				<view class="flex">
+					<view class="touxiang">
+						<image :src="portraits" mode="" style="height: 76rpx;border-radius: 8rpx;"></image>
+					</view>
+					<view class="" style="margin: 20rpx 30rpx;">
+						<view style="color: #333333;font-weight: 600;font-size: 34rpx;">{{item.compName}}</view>
+						<view style="color: #AFB3BF; margin-top: 4rpx;">{{item.updateDate}}</view>
+					</view>
+					<view class="flex" style="width: 40%; justify-content: flex-end;margin: 40rpx;">
+						<view style="color: #FE6430;" v-if="item.status == '审核中' || item.status == '未审核'|| item.status == '待审核'">{{item.status}}</view>
+						<view style="color: #22C572;" v-if="item.status == '已通过'">{{item.status}}</view>
+						<view style="color: #FB1E1E;" v-if="item.status == '已驳回'">{{item.status}}</view>
+						
+					</view>
+				</view>
+				<view class="title">{{item.title}}</view>
+				<view class="titleText">
+					{{item.content}}
+				</view>
+				<view class="imgList flex" v-if="item.address != ''">
+					<view v-for="(items,count) in item.imgList" style="width: 30%;margin-left: 20rpx;">
+						<image :src="items" style="height: 220rpx;border-radius: 16rpx;"></image>
+					</view>
+				</view>
+				<view class="flex">
+					<view class="address flex">
+						<image src='../../static/img/location.png'
+							style="width: 26rpx;height: 30rpx;top: 8rpx;margin: 0 10rpx;"></image>
+						{{item.city}}
+					</view>
+					<view style="width: 30%;justify-content: flex-end;margin: 30rpx;" class="flex">
+						<view @click="delRecord(item)">
+							<image src='../../static/img/jiaoyi/shanchu@3x.png'
+								style="width: 32rpx;height: 32rpx;margin-right: 20rpx;top: 4rpx;"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				count: 0,
+				portraits: "",
+				choices: [{
+						name: "全部",
+						check: true,
+						changeCss: "label2",
+					},
+					{
+						name: "审核中",
+						check: false,
+						changeCss: "label",
+					},
+					{
+						name: "已通过",
+						check: false,
+						changeCss: "label",
+					},
+					{
+						name: "未通过",
+						check: false,
+						changeCss: "label",
+					},
+					{
+						name: "已过期",
+						check: false,
+						changeCss: "label",
+					}
+				],
+				release: [{
+					imgList: [],
+				}],
+				currentPage: 1,
+				pageSize: 10,
+				imgList: [],
+				userName: "",
+				searchType: "",
+
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		onShow() {
+			this.userName = this.userInfo.userName
+			this.portraits = this.userInfo.avatarUrl
+			this.getRelease()
+		},
+		methods: {
+			navBack() {
+				uni.navigateBack(1)
+			},
+			querys(item) {
+				for (var i = 0; i < this.choices.length; i++) {
+					if (this.choices[i].name == item.name) {
+						this.choices[i].check = true
+						this.choices[i].changeCss = "label2"
+					} else {
+						this.choices[i].check = false
+						this.choices[i].changeCss = "label"
+					}
+				}
+				if (item.name == "审核中") {
+					this.searchType = "1"
+				} else if (item.name == "已通过") {
+					this.searchType = "2"
+				} else if (item.name == "未通过") {
+					this.searchType = "3"
+				} else{
+					this.searchType = ""
+				}
+				this.getRelease()
+			},
+			getRelease() {
+				this.$api.doRequest('get', '/settledCompanyDynamics/selectSettledCompanyDynamicsPage', {
+						currentPage: this.currentPage,
+						pageSize: this.pageSize,
+						loginPhone: this.userInfo.phone,
+						searchType: this.searchType
+					})
+					.then(res => {
+						if (res.data.code == 200) {
+
+							this.release = res.data.data.records
+							this.count = this.release.length
+							for (let i = 0; i < this.release.length; i++) {
+								this.release[i].imgList = this.release[i].address.split(",")
+							}
+						}
+					})
+			},
+			delRecord(item) {
+				var that = this
+				uni.showModal({
+					content: "确定删除该动态?",
+					showCancel: true,
+					confirmText: '确定',
+					success: function(res) {
+						if (res.confirm) {
+							that.$api.doRequest('post',
+									'/settledCompanyDynamics/api/deleteSettledCompanyInfo', {
+										id: item.id,
+										phone: item.phone
+									})
+								.then(res => {
+									if (res.data.code == 200) {
+										uni.showToast({
+											title: '删除成功!',
+											icon: 'none',
+											duration: 2000,
+											success() {
+												setTimeout(function() {
+													that.getRelease()
+												}, 1000);
+											}
+										})
+
+									}
+								})
+						}
+					}
+				})
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.center {
+		overflow: scroll;
+	}
+
+	.topCss {
+		overflow: scroll;
+		background: url(../../static/img/liangmai/record@3x.png);
+		background-size: 100%;
+		background-repeat: no-repeat;
+	}
+
+	.back-btn {
+		position: absolute;
+		left: 40upx;
+		z-index: 9999;
+		padding-top: var(--status-bar-height);
+		top: 40upx;
+		font-size: 40upx;
+		color: #fff;
+	}
+
+	.modular {
+		width: 94%;
+		margin: 0 auto;
+		background-color: #FFFFFF;
+		border-radius: 40rpx;
+		margin-top: 40rpx;
+
+	}
+
+	.introduce {
+		// height: 300rpx;
+		background-color: #FFFFFF;
+		border-top-right-radius: 40rpx;
+		border-top-left-radius: 40rpx;
+		margin-top: 250rpx;
+	}
+
+	.portrait {
+		width: 120rpx;
+		height: 120rpx;
+		margin: 0 auto 0;
+		position: relative;
+		top: -70rpx;
+	}
+
+	.name {
+		text-align: center;
+		color: #333333;
+		font-size: 40rpx;
+		margin-top: -30rpx;
+	}
+
+	.dongtai {
+		text-align: center;
+	}
+
+	.labels {
+		width: 140rpx;
+		text-align: center;
+		margin-top: 60rpx;
+	}
+
+	.label {
+		color: #333333;
+		font-size: 32rpx;
+	}
+
+	.label2 {
+		color: #333333;
+		font-size: 36rpx;
+		font-weight: 600;
+	}
+
+	.touxiang {
+		width: 76rpx;
+		height: 76rpx;
+		margin: 20rpx 0 0 34rpx;
+	}
+
+	.title {
+		font-size: 38rpx;
+		font-weight: 600;
+		margin-left: 30rpx;
+	}
+
+	.titleText {
+		font-size: 34rpx;
+		margin-left: 30rpx;
+		margin-top: 10rpx;
+	}
+
+	.imgList {
+		width: 100%;
+		margin-top: 30rpx;
+		flex-wrap: wrap;
+	}
+
+	.address {
+		width: 60%;
+		height: 48rpx;
+		background-color: #F5F6FA;
+		border-radius: 24rpx;
+		margin-left: 30rpx;
+		line-height: 48rpx;
+		margin: 30rpx;
+	}
+</style>

+ 218 - 0
pages/grain_pulse/release.vue

@@ -0,0 +1,218 @@
+<template>
+	<view class="center">
+		<u-form class="forList">
+			<view class="modular">
+				<view class="c-row b-b ">
+					<view style="width: 30%;color: #71747C;font-size: 30rpx;">发布主体</view>
+					<view class="flex" style="width: 70%;justify-content: flex-end;">
+						<picker :range="companyType" @change="companyChange($event)" style="margin-right: 0px;">
+							<view>{{companyIndex > -1?companyType[companyIndex]:'请选择发布主体'}}</view>
+						</picker>
+						<u-icon name="arrow-right" color="#AFB3BF" :custom-style="{'marginRight':'10rpx'}"></u-icon>
+					</view>
+
+				</view>
+				<view class="c-row">
+					<view style="width: 30%;color: #71747C;font-size: 30rpx;">城市</view>
+					<view class="flex" style="width: 70%;justify-content: flex-end;">
+						{{chengshi == null || chengshi == "" ? "请选择城市": chengshi}}
+
+					</view>
+					<u-icon name="arrow-right" color="#AFB3BF" :custom-style="{'marginRight':'10rpx'}"></u-icon>
+				</view>
+			</view>
+			<view class="modular">
+				<view style="margin: 20rpx 30rpx 0;border-bottom: 1px solid #C5CAD4;">
+					<input type="text" placeholder="标题(2-16个字)" style="font-size: 44rpx;" maxlength="16"
+						v-model="release.title" />
+				</view>
+				<view class="inputText">
+					<u-input v-model="release.content" type="textarea" :border="border" :height="height"
+						:auto-height="autoHeight" class="a" maxlength="200"
+						placeholder="请发布粮食类商品交易信息,建议包含联系方式、地址等信息,不超过200个字" @input="wordJiSuan" :clearable="clear" />
+				</view>
+				<view style="text-align: right;color: #C5CAD4;font-size: 30rpx;margin-right: 20rpx;">{{wordCount}}/200字
+				</view>
+				<upload class="upload" ref="upload" :action="action" :max-count="9" :size-type="['compressed']"
+					@on-success="getImgUrl" @on-error="onError" @on-remove="onRemove" :options="uploadOptions"
+					@on-uploaded="isAdd = true" @on-progress="onProgress" :before-upload="filterFileType"></upload>
+			</view>
+		</u-form>
+		<u-button type="success" shape="circle" style="margin-top: 40rpx;" @click="submit">发布</u-button>
+	</view>
+</template>
+
+<script>
+	import upload from '@/components/upload.vue';
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		components: {
+			upload
+		},
+		data() {
+			return {
+				deptList: {},
+				chengshi: "", //城市
+				clear: false,
+				border: false,
+				height: 300,
+				autoHeight: true,
+				wordCount: 0,
+				action: "https://www.zthymaoyi.com/upload/admin",
+				uploadOptions: {
+					"text": "上传照片",
+					"bgc": ""
+				},
+				companyIndex: 0,
+				companyType: [],
+				release: {},
+				address: [],
+				getCompany: {}
+			}
+		},
+		onShow() {
+			this.companyList()
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+			companyList() {
+				this.getCompany.loginPhone = this.userInfo.phone
+				this.$api.doRequest('get', '/settledCompanyInfo/companyList', this.getCompany)
+					.then(res => {
+						if (res.data.code == 200) {
+							this.release.compName = res.data.data[0].compName
+							for (let i = 0; i < res.data.data.length; i++) {
+								this.companyType.push(res.data.data[i].compName)
+							}
+						}
+					})
+			},
+			wordJiSuan() {
+				this.wordCount = this.release.content.length
+			},
+			filterFileType(index, lists) {
+				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
+					lists.splice(index, 1);
+					// 当前文件不支持
+					uni.showModal({
+						title: '暂不支持当前图片类型',
+						showCancel: false
+					});
+				} else {
+					this.isAdd = false;
+				}
+			},
+			companyChange(e) {
+				this.companyIndex = e.detail.value
+				this.release.compName = this.companyType[this.companyIndex]
+			},
+			getImgUrl(e) {
+				this.address.push(e)
+			},
+			onRemove(e) {
+				this.address.splice(e, 1)
+			},
+			submit() {
+				if (!this.release.compName) {
+					this.$api.msg('发布主体不能为空')
+					return
+				}
+				if (!this.release.city) {
+					this.$api.msg('城市不能为空,功能没完成')
+					// return
+				}
+				if (!this.release.title) {
+					this.$api.msg('标题不能为空')
+					return
+				}
+				if (this.release.title.length < 2 || this.release.title.length > 16) {
+					this.$api.msg('标题长度2-16个字')
+					return
+				}
+				if (this.release.content != null) {
+					if (this.release.content.length > 200) {
+						this.$api.msg('动态内容不能超过200字')
+						return
+					}
+				}
+				if (!this.release.content && this.address.length == 0) {
+					console.log("进入")
+					this.$api.msg("动态内容和图片不能同时为空")
+					return
+				}
+				this.release.city = "营口"
+				this.release.address = this.address.toString()
+				this.release.phone = this.userInfo.phone
+				var that = this
+				uni.showModal({
+					content: "确定发布动态?",
+					showCancel: true,
+					confirmText: '确定',
+					success: function(res) {
+						if (res.confirm) {
+							that.$api.doRequest('post',
+									'/settledCompanyDynamics/api/addSettledCompanyDynamics', that.release)
+								.then(res => {
+									if (res.data.code == 200) {
+										uni.navigateBack(1)
+									}
+								})
+						}
+					}
+				})
+			}
+
+
+		}
+	}
+</script>
+
+<style>
+	.center {
+		padding: 10rpx 20rpx;
+	}
+
+	.modular {
+		padding-top: 10rpx;
+		background-color: #FFFFFF;
+		border-radius: 20px;
+		margin-top: 20px;
+	}
+
+	.title {
+		margin-left: 20rpx;
+		color: #71747C;
+	}
+
+	.titles {
+		font-size: 44rpx;
+		color: #C5CAD4;
+	}
+
+	.write {
+		margin-right: 20px;
+		color: #71747C;
+	}
+
+	.c-row {
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: flex;
+		-webkit-box-align: center;
+		-webkit-align-items: center;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		position: relative;
+	}
+
+	.inputText {
+		padding: 2rpx 32rpx;
+		font-size: 30rpx;
+		color: #C5CAD4;
+		margin-top: 20rpx;
+	}
+</style>

二進制
static/img/liangmai/fabu-2@3x.png


二進制
static/img/liangmai/jilu-2@3x.png


二進制
static/img/liangmai/record@3x.png