hire-wx-houxuanren/pagesC/changyong-list.vue

<template>
	<view class="changyong-list">
		<view class="changyong-item u-flex u-col-top" v-for="(item,index) in changList" :key="index">
			<view class="item-text u-flex-1">
				{{item.content}}
			</view>
			<image @click="emit(item.content,item.id)" src="/pagesC/static/edit.png" mode=""></image>
			<image @click="dell(item.id)" src="/pagesC/static/del.png" mode=""></image>
		</view>
		<view style="height: 70vh;display: flex;justify-content: center;align-items: center;"
			v-if="changList.length == 0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<view class="changyong-down">
			<view class="u-flex u-row-center changyong-btn">
				<text @click="toadd">添加常用语</text>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<u-modal :show="show" :content="title" :show-cancel-button="true" @confirm="del"
			@cancel="show = false"></u-modal>
	</view>
</template>

<script>
	import {
		phraseList,
		phrase_destory
	} from "../units/inquire.js"
	export default {
		data() {
			return {
				changList: [],
				show: false,
				title: "确定要删除此常用语吗？"
			}
		},
		onLoad() {

		},
		onShow() {
			this.getlist()
		},
		methods: {
			dell(id) {
				this.show = true
				this.id = id
			},
			emit(content, id) {
				uni.navigateTo({
					url: "/pagesC/changyong-add?content=" + content + "&id=" + id
				})
			},
			del() {
				phrase_destory({
					id: this.id
				}).then(res => {
					this.getlist()
					this.show = false
				})
			},
			getlist() {
				phraseList().then(res => {
					this.changList = res.data
				})
			},
			toadd() {
				uni.navigateTo({
					url: "/pagesC/changyong-add"
				})
			}
		}
	}
</script>

<style lang="scss">
	.changyong-list {
		padding: 0 32rpx;

		.changyong-down {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			background-color: #fff;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
			width: 750rpx;

			.changyong-btn {
				padding: 16rpx 0;

				text {
					width: 686rpx;
					line-height: 88rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

		}

		.changyong-item {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F0F0F0;

			.item-text {
				margin-right: 16rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 32rpx;
			}
		}
	}
</style>