caimei-applets-caimei/pages/seller/remarks/list.vue

<template>
	<view class="container product clearfix">
		<view class="remarks-content" :style="{ paddingBottom: isIphoneX ? '168rpx' : '0' }">
			<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image class="empty-container-image" :src="StaticUrl + '/icon/icon-remarks-empty@2x.png'"></image>
					<text class="error-text">暂无任何资料备注~</text>
				</view>
				<!-- 列表 -->
				<view class="tui-remarks-cell  tui-mtop" v-for="(remark, index) in remarksList" :key="index" @click.stop="details(remark)">
					<view class="tui-remarks-time">{{ remark.time }}</view>
					<view class="tui-remarks-content">{{ remark.content }}</view>
					<view class="tui-remarks-button">
						<view class="btn">修改</view> <view class="btn" @click="deleteRemark(remark)">删除</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
				<!--加载loadding-->
			</view>
		</view>
		<!-- 取消收藏操作 -->
		<tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
			<view class="tui-popup-box clearfix">
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
					<view class="tui-flex-1">
						<view class="tui-button" @click="handleAllUnder">添加资料备注</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>
<script>
import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
import tuiNomore from '@/components/tui-components/nomore/nomore'

import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	userId: 0,
	pageNum: 1,
	pageSize: 10
}
export default {
	components: {
		tuiLoadmore,
		tuiNomore
	},
	data() {
		return {
			StaticUrl: this.$Static,
			isIphoneX: this.$store.state.isIphoneX,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
					},
					plain: false
				}
			],
			totalRecord: 0,
			popupShow: true,
			popupShow1: false,
			isProductChecked: false,
			listQuery: Object.assign({}, defaultListQuery),
			remarksList: [
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				},
				{
					time: '2021.09.07  16:20:10',
					content:
						'半岛超声炮是目前国内唯一一台获得NMPA认证的“国产超声刀”，采用大焦域和超脉冲技术的方式，利用超声波能量精准加热皮下SMAS筋膜层、真皮层、浅脂肪层...'
				}
			],
			handleData: {},
			number: 0,
			buyRetailPrice: 0,
			buyRetailPriceStep: 1,
			isQuantity: false,
			scrollTop: 0,
			isEmpty: false,
			isAllChecked: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			hasNextPage: false,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			contentModalText: '', //操作文字提示语句
			modal: false,
			userIdentity: 0
		}
	},
	onLoad() {
		// this.initGetStotage()
	},
	filters: {
		NumFormat: function(value) {
			//处理金额
			if (!value) return '0.00'
			let number = Number(value).toFixed(2)
			return number
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.GetProductListInfo()
		},
		GetProductListInfo() {
			this.productList = []
			this.listQuery.pageNum = 1
			this.ProductService.getProductUserLikeList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.results && data.results.length > 0) {
						this.isEmpty = false
						this.hasNextPage = data.hasNextPage
						this.totalRecord = data.totalRecord
						this.productList = data.results
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.productList.length < 8) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.isEmpty = true
					}
					this.isRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetOnReachBottomData(index) {
			//上拉加载
			this.listQuery.pageNum += 1
			this.ProductService.getProductUserLikeList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.results && data.results.length > 0) {
						this.hasNextPage = data.hasNextPage
						this.productList = this.productList.concat(data.results)
						this.pullFlag = false // 防上拉暴滑
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		deleteRemark() {
			this.modal = true
			this.contentModalText = '确定删除这条备注信息吗？'
		},
		handleAllUnder() {
			//跳转添加资料备注
			this.$api.navigateTo('/pages/seller/remarks/add')
		},
		handleClick(e) {
			//取消收藏
			if (e.index == 1) {
				this.handleDeleteUserLike()
			}
			this.modal = false
		},
		handleDeleteUserLike() {
			//操作取消收藏
			this.ProductService.getDeleteUserLike({
				productIds: this.productIds,
				userId: this.listQuery.userId
			})
				.then(response => {
					this.$util.msg('取消收藏成功', 2000, true, 'success')
					setTimeout(() => {
						this.GetProductListInfo()
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hideMobel() {
			this.modal = false
		},
		updateCheckAllBtn() {
			//勾选单个判断全选
			let goodsCheckedLength = 0
			this.productList.forEach(item => {
				if (item.isChecked) {
					goodsCheckedLength++
				}
			})
			this.isAllChecked = goodsCheckedLength === this.productList.length
			if (goodsCheckedLength > 0) {
				this.isProductChecked = true
			} else {
				this.isProductChecked = false
			}
		},
		updateBothCheckBtn() {
			//全选勾选判断
			this.productList.forEach(item => {
				item.isChecked = this.isAllChecked
			})
		},
		isCheckedAll() {
			//全选
			this.isAllChecked = !this.isAllChecked
			if (this.isAllChecked) {
				this.isProductChecked = true
			} else {
				this.isProductChecked = false
			}
			this.updateBothCheckBtn()
		},
		checkedSoperv(item) {
			//选择
			item.isChecked = !item.isChecked
			console.log(item)
			this.updateCheckAllBtn()
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		changeCountAdd() {
			//popup弹窗数量增加按钮
			if (this.buyRetailPriceStep == 2) {
				this.number += this.minBuyNumber
			} else {
				this.number++
			}
			this.calculatPerice()
		},
		changeCountSub() {
			//popup弹窗数量减按钮
			if (this.number <= this.minBuyNumber) {
				this.number = this.minBuyNumber
				this.isQuantity = true
				this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
				return
			} else {
				if (this.buyRetailPriceStep == 2) {
					this.number -= this.minBuyNumber
				} else {
					this.number--
				}
				this.calculatPerice()
				this.isQuantity = false
			}
		},
		changeNumber(e) {
			let _value = e.detail.value
			if (!this.$api.isNumber(_value)) {
				this.number = this.minBuyNumber
			} else if (_value < this.minBuyNumber) {
				this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
				this.number = this.minBuyNumber
			} else if (_value % this.minBuyNumber != 0) {
				this.$util.msg('购买量必须为起订量的整数倍', 2000)
				this.number = this.minBuyNumber
			} else {
				this.number = e.detail.value
				this.calculatPerice()
			}
		},
		calculatPerice() {
			//判断是否为阶梯价然后做计算价格处理
			if (this.handleData.ladderPriceFlag == 1) {
				this.handleData.ladderPrices.forEach((item, index) => {
					if (this.number >= item.buyNum) {
						this.buyRetailPrice = item.buyPrice
					}
				})
			}
		},
		toConfirmation() {
			//跳转确认订单页面
			this.popupShow1 = false
			let productStp = {
				allPrice: this.number * this.buyRetailPrice,
				allCount: this.number,
				productID: this.handleData.productId,
				productCount: this.number
			}
			this.$api.navigateTo(
				`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({ data: productStp })}`
			)
		},
		getAddProductCart() {
			//增加购物车成功和toast弹窗提示成功
			this.ProductService.shoppingAddCart({
				productID: this.handleData.productId,
				userID: this.listQuery.userId,
				productCount: this.number
			})
				.then(response => {
					this.popupShow1 = false
					this.$util.msg('加入购物车成功', 1500, true, 'success')
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		showPopup(index, pros) {
			// 弹窗显示
			switch (index) {
				case 0:
					this.popupShow = true
					break
				case 1:
					this.popupShow1 = true
					this.handleData = pros
					console.log(this.handleData)
					this.buyRetailPrice = this.handleData.price
					this.buyRetailPriceStep = this.handleData.step
					if (this.handleData.ladderPriceFlag == 1) {
						this.number = this.handleData.maxBuyNumber ? this.handleData.maxBuyNumber : 1
					} else {
						this.number = this.handleData.minBuyNumber
					}
					break
			}
		},
		hidePopup(index) {
			// 弹窗隐藏
			switch (index) {
				case 0:
					this.popupShow = false
					break
				case 1:
					this.popupShow1 = false
					break
			}
		},
		details(id) {
			this.$api.navigateTo(`/pages/seller/remarks/details?id=${id}`)
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.GetOnReachBottomData()
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.listQuery.pageNum = 1
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShow() {}
}
</script>

<style lang="scss">
@import '@/uni.scss';
page {
	background: #f7f7f7;
}
.empty-container {
	z-index: 99;
}
.remarks-content {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0;
	box-sizing: border-box;
	padding: 24rpx;
	.empty-container-image {
		width: 260rpx;
		height: 260rpx;
		margin-top: -300rpx;
	}
	.tui-remarks-cell {
		width: 100%;
		height: 316rpx;
		border-radius: 16rpx;
		background: #ffffff;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		padding: 25rpx 32rpx;
		.tui-remarks-time {
			width: 100%;
			height: 37rpx;
			line-height: 37rpx;
			text-align: left;
			font-size: $font-size-26;
			color: #666666;
			margin-bottom: 24rpx;
		}
		.tui-remarks-content {
			width: 100%;
			line-height: 44rpx;
			text-align: left;
			font-size: $font-size-26;
			color: #333333;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
			margin-bottom: 24rpx;
		}
		.tui-remarks-button {
			width: 100%;
			height: 48rpx;
			.btn {
				width: 104rpx;
				line-height: 48rpx;
				box-sizing: border-box;
				border: 1px solid #707070;
				text-align: center;
				border-radius: 30rpx;
				color: #666666;
				font-size: $font-size-24;
				float: right;
				margin-left: 24rpx;
			}
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 100rpx;
	padding: 6rpx 24rpx;
	.tui-popup-content {
		padding-top: 30rpx;
	}
}
.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	margin-top: 30rpx;
	.tui-button {
		width: 600rpx;
		height: 88rpx;
		background: $btn-confirm;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
		margin: 0 auto;
	}
}
</style>