mp-ui-user/src/packagePrize/address/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="使用范围" leftIconSize="0">
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="使用范围"></u-navbar>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view v-if="$pagesNum() > 1">
			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="使用范围" />
		</view>
		<view v-else>
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="使用范围">
				<view class="nav-left flex" slot="left" @click="$toIndex()">
					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- #endif -->
		
		<view class="address-wrap">
			<view class="header-title" @click="selectAddress">
				<view class="adderss-select">
					{{ confirm ? confirm : '所有地区' }}
				</view>
				<view class="adderss-select-icon">
					<u-icon name="arrow-right" color="#999" size="12"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="address-box" v-for="(item,index) in list" :key="index">
					<text class="store-name" selectable="true" user-select={true}>{{item.siteName}}</text>
					<view class="store-address">
						<text>地址：{{item.addressAll}}</text>
						<view @click="copyDeliveryFlowId(item.addressAll)">复制</view>
					</view>
				</view>
			</view>
			<u-loadmore :line="true" v-if="list.length>10" :status="status" :loading-text="'努力加载中'"
				:nomore-text="'已经到底了'" />
		</view>
		<view class="flex empty" v-if="!list.length">
			<view class="center">
				<image class="center-img"
					src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_5.png" mode="scaleToFill">
				</image>
				<view class="center-font">暂无门店</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<address-popup :address-show="addressShow" @cancel="cancel" @confirmAddress="confirmAddress" />
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	import AddressPopup from '../components/address-popup/address-popup.vue'
	export default {
		components: {
			AddressPopup
		},
		data() {
			return {
				list: [],
				couponId: null,
				addressShow: false,
				confirm: '',
				info: {},
				total: 0,
				pageNum: 1,
				status: 'nomore', //上拉刷新状态
			};
		},
		onLoad(options) {
			this.couponId = options.couponId
			this.pageList()
		},
		methods: {
			pageList() {
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post(`/api/v1/mp/user/mine/coupon/channel/list?pageNum=${this.pageNum}&pageSize=20`, { ...this.info,
					couponId: this.couponId }).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							this.list = this.list.concat(res.rows)
							this.list.forEach(item => {
								item.addressAll = `${item.province} ${item.city} ${item.area} ${item.address}`
							})
							this.total = res.total
						}
					}).catch(() => {
					uni.hideLoading();
				})
			},
			selectAddress() {
				this.addressShow = true
			},
			cancel() {
				this.addressShow = false
			},
			confirmAddress(obj) {
				this.info = {
					provinceId: obj.provinceId,
					cityId: obj.cityId,
				}
				this.confirm = obj.cityShow
				this.addressShow = false
				this.pageList()
			},
			copyDeliveryFlowId(data) {
				uni.setClipboardData({ data });
				// #ifdef MP-ALIPAY
				this.$refs.uToast.show({ message: "内容已复制" })
				// #endif
			},
		},
		onReachBottom() {
			if (this.total < this.pageNum * 20) return;
			this.status = 'loading';
			++this.pageNum
			if (this.total < this.pageNum * 20) this.status = 'nomore';
			else this.status = 'loading';
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	.address-wrap {

		.header-title {
			background-color: #fff;
			padding: 0 20rpx;
			display: flex;
			height: 90rpx;
			box-shadow: 0 5rpx 5rpx #ececec;
			line-height: 90rpx;

			.adderss-select {
				margin-right: 10rpx;
				font-size: 30rpx;
			}

			.adderss-select-icon {
				display: inline-block;
				margin-top: 34rpx;
			}
		}

		.content {
			margin: 20rpx 10rpx;
			padding: 0 25rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.address-box {
				width: 100%;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #dadbde;

				.store-name {
					font-size: 30rpx;
					color: #000;
					margin-bottom: 15rpx;
				}

				.store-address {

					text {
						font-size: 24rpx;
						color: #999;
					}

					view {
						margin-left: 8rpx;
						background-color: rgba(153, 153, 153, .1);
						display: inline-block;
						width: 80rpx;
						height: 40rpx;
						line-height: 34rpx;
						text-align: center;
						font-size: 24rpx;
						border-radius: 8rpx;
					}
				}
			}

			.address-box:last-child {
				border-bottom: none;
			}
		}

	}

	.empty {
		height: 60vh;

		.center {
			text-align: center;

			&-img {
				width: 228rpx;
				height: 320rpx;
			}

			&-font {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 250rpx;
			}
		}
	}
</style>