mnsx/pages/product/pointsExchange.vue

<template>
	<view class="content">
		<scroll-view scroll-y="true" style="height: 100%;">
			<empty v-if="integral.loaded === true && integral.list.length === 0"></empty>
			<view class="exchange-wrapper">
				<view class="exgood-wrapper" v-for="item in integral.list" :key="item.id" @click="navTo('/pages/product/product?id=' + item.id + '&type=2')">
					<image src="https://zccy.liuniu946.com/static/img/bg3.png" mode="" class="bg3"></image>
					<view class="ex-img-wrapper"><image :src="item.image" mode=""></image></view>
					<view class="exgood-title">{{item.title}}</view>
					<view class="ex-addr">
						<image src="../../static/img/shop.png" mode="" class="name-img"></image>
						{{checkedStore.name | storename}}
						<image src="../../static/img/point.png" mode="" class="point-img"></image>
						{{space(checkedStore.latitude, checkedStore.longitude) }}
					</view>
					<view class="ex-price">
						￥{{item.price*1}}+{{item.integral*1}}
						<text class="tx1">积分</text>
						<text class="tx2">￥{{item.ot_price*1}}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="integral.loadingType"></uni-load-more>
		</scroll-view>
	</view>
	
</template>

<script>
import empty from '@/components/empty';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { getCombinationList, getProductslist, getProductHot ,getIntegralList} from '@/api/product.js';
import { mapMutations,mapState } from 'vuex';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return {
				integral: {
					page: 1,
					limit: 10,
					list: [],
					loadingType: 'more',
					loaded: ''
				}
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'checkedStore', 'des', 'latlng']),
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom() {
			this.loadData()
		},
		filters: {
			storename(val) {
				let str = ''
				if(val) {
					str = val
					if(val.length > 5) {
						str = val.slice(0,5)+'...'
					}
					 
				}
				return str
			},
			longstorename(val) {
				let str = ''
				if(val) {
					str = val
					if(val.length > 10) {
						str = val.slice(0,10)+'...' 
					}
					
				}
				return str
			}
		},
		methods:{
			space(lat1, lng1) {
				let sp = uni.getStorageSync('latlon');
				console.log(sp);
				let arr1 = sp.split(',');
				let lat2 = arr1[0];
				let lng2 = arr1[1];
				console.log(lat1, lng1, lat2, lng2, '位置信息');
				var radLat1 = (lat1 * Math.PI) / 180.0;
				var radLat2 = (lat2 * Math.PI) / 180.0;
				var a = radLat1 - radLat2;
				var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				// return s * 1000;
				if (s > 1) {
					return s.toFixed(2) + 'km';
				} else {
					return s * 1000 + 'm'; // 单位米
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			loadData() {
				let obj = this
				if (obj.integral.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (obj.integral.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				obj.integral.loadingType = 'loading';
				getIntegralList({
					page: obj.integral.page,
					limit: obj.integral.limit,
				}).then( ({data}) => {
					console.log(data)
					obj.integral.list = obj.integral.list.concat(data)
					console.log(obj.integral.list)
					if (obj.integral.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.integral.loadingType = 'more';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.integral.loadingType = 'noMore';
					}
					uni.hideLoading();
					this.$set(obj.integral, 'loaded', true);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.content {
		height: 100%;
	}
	.exchange-wrapper {
		// background-color: #fff;
		width: 696rpx;
		// height: 100rpx;
		padding-top: 28rpx;
		margin: 0 auto 39rpx;
		// padding: 0 27rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		flex-wrap: wrap;
		.exgood-wrapper {
			width: 342rpx;
			height: 540rpx;
			box-shadow: 0px 4px 18px 0px rgba(144, 27, 33, 0.13);
			margin-bottom: 20rpx;
			position: relative;
			.ex-img-wrapper {
				width: 342rpx;
				height: 338rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.exgood-title {
				margin-top: 33rpx;
				padding-left: 21rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.ex-addr {
				margin-top: 16rpx;
				padding-left: 22rpx;
				height: 22rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #dcb876;
				image {
					height: 22rpx;
				}
				.name-img {
					width: 26rpx;
					margin: 0 4rpx -3rpx 0;
				}
				.point-img {
					width: 16rpx;
					margin: 0 4rpx -3rpx 14rpx;
				}
			}
			.ex-price {
				margin-top: 17rpx;
				padding-left: 22rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #901b21;
				vertical-align: bottom;
				.tx1 {
					font-size: 24rpx;
					vertical-align: baseline;
					position: relative;
					top: -2rpx;
				}
				.tx2 {
					margin-left: 9rpx;
					font-size: 26rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #9d9d9d;
					line-height: 35rpx;
				}
			}
			.bg {
				position: absolute;
				top: 0;
				width: 342rpx;
				height: 540rpx;
				background-size: 100% 100%;
			}
		}
	}
	.bg3 {
		z-index: 3;
		width: 342rpx;
		height: 540rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	
</style>