yyky_new_app/pages/equ_list/index.vue

<template>
	<view>
		<view >
			<!-- #ifdef APP-PLUS || H5 -->
			<!-- 状态栏占位 -->
			<view class="status_bar"></view>
			<view class="" style="margin-top: var(--status-bar-height);">
				<uni-nav-bar title="" left-icon="left" backgroundColor="#F35546" color="#fff" @clickLeft="back"></uni-nav-bar>
			</view>
			<!-- #endif -->
			<view class='address-management' :class='equipmentList.length === 0 ? "fff":""'>
				<radio-group class="radio-group" @change="radioChange" v-if="equipmentList.length">
					<view class='item borRadius14' v-for="(item,index) in equipmentList" :key="index">
						<view class="content_box_top">
							<u-avatar class="avatar" :src="item.avatar" mode="square" :show-sex="true"
								:sex-icon="item.sex === 1 ? 'man':'woman'"
								:sex-bg-color="item.sex === 1 ? 'man-primary' : 'woman-error'"></u-avatar>
							<view class='address' @click='goIndex(item.id,item.deviceCode,item.nickName)'>
								<view class="address-left">
									<view class='consignee'>
										<view>昵称:{{ item.nickName }}</view>
										<view class="online-box">
											<image v-if="item.onlineForce||item.onlineStatus"
												src="/static/image/online.png" mode=""></image>
											<image v-if="!item.onlineForce&&!item.onlineStatus"
												src="/static/image/offline.png" mode=""></image>
										</view>
										<!-- <text class='phone'>ID:{{item.deviceCode}}</text> -->
									</view>
									<text class='phone'>ID:{{item.deviceCode}}</text>
									<!-- <view>收货地址：{{item.areaName}} {{item.detailAddress}}</view> -->
								</view>
								<image src="/static/image/arrow.png" mode=""></image>
							</view>
						</view>
						<view class='operation acea-row row-between-wrapper'>
							<!-- #ifndef MP -->
							<radio class="radio" :value="index.toString()" :checked="item.status">
								<text>设为默认</text>
							</radio>
							<!-- #endif -->
							<!-- #ifdef MP -->
							<radio class="radio" :value="index" :checked="item.status">
								<text>设为默认</text>
							</radio>
							<!-- #endif -->
							<view class='acea-row row-middle'>
								<!-- <view @click='editAddress(item.id)'>
								<text class='iconfont icon-bianji' />编辑
							</view> -->
								<view @click='delEquipment(item,index)'>
									<text class='iconfont icon-shanchu' />删除
								</view>
							</view>
						</view>
					</view>
				</radio-group>
				<view class='loadingicon acea-row row-center-wrapper' v-if="equipmentList.length">
					<text class='loading iconfont icon-jiazai' :hidden='!loading'></text>{{loadTitle}}
				</view>
				<view class='noCommodity' v-if="equipmentList.length < 1">
					<view class='pictrue'>
						<image src='/static/img/none.png'></image>
					</view>
				</view>
				<view style='height:120rpx;'></view>
			</view>
			<view class="footer" @click="addEqu">
				<image src="/static/img/addicon.png" mode=""></image>
				<view>
					添加设备
					
				</view>
				
			</view>
		</view>
		<!-- <view class="swiper" v-if="undeviceId">
			<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
			 indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" @change="handleSwiperChange">
				<block v-for="(item,index) in imgUrls" :key="index">
					<swiper-item>
						<image :src="item.src" class="slide-image"></image>
					</swiper-item>
				</block>
			</swiper>
		</view> -->
		<van-dialog id="van-dialog" />
		<!-- <home></home> -->
	</view>
</template>
<script>
	// import Dialog from '../../wxcomponents/vant/dist/dialog/dialog';
	import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
	// import /wxcomponents/vant/dist/dialog/index
	import * as infoApi from '@/api/sleep/equ.js';
	import {
		editAddress
	} from '@/api/user.js';
	// import {
	// 	toLogin
	// } from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import home from '@/components/home';
	import * as AddressApi from '@/api/member/address.js';
	export default {
		components: {
			home
		},
		data() {
			return {
				checked:false,
				// equipmentList: [{
				// 	id: 11,
				// 	name: '王艺涵',
				// 	mobile: 177
				// }, {
				// 	id: 11,
				// 	name: '王艺涵',
				// 	mobile: 177
				// }],
				equipmentList: [],
				loading: false,
				loadTitle: '加载更多',

				// TODO 芋艿：看看后面咋搞回来
				preOrderNo: '',
				cartId: '',
				pinkId: 0,
				couponId: 0,
				bargain: false, // 是否是砍价
				combination: false, // 是否是拼团
				secKill: false, // 是否是秒杀
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				
				autoplay: false,
				circular: true,
				interval: 3000,
				duration: 500,
				undeviceId:false,
				imgUrls:[{src:'/static/image/0001.png'},{src:'/static/image/0002.png'},{src:'/static/image/0003.png'}]
			};
		},
		computed: mapGetters(['uid', 'deviceId']),
		watch: {
			// isLogin: {
			// 	handler: function(newV, oldV) {
			// 		if (newV) {
			// 			this.getUserAddress(true);
			// 		}
			// 	},
			// 	deep: true
			// }
		},
		onLoad(options) {
			if (!this.deviceId) {
				console.log('我没有deviceId');
				this.undeviceId=true
			}
			// if (!this.isLogin) {
			// 	toLogin();
			// 	return;
			// }
			this.preOrderNo = options.preOrderNo || 0;
			this.getEquipmentList();
		},
		onShow: function() {
			this.getEquipmentList();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			// 轮播图改变事件
			handleSwiperChange :function(e) {
				console.log(e,666);
				if(e.detail.current==0){
					console.log('进来了等于0');
					this.undeviceId=false
				}
      //  this.currentValChange = e.detail.current
      //  console.log(this.currentValChange)
   			// if (this.swiperChangeSelect) {
   			// 	console.log("swiperChange")
   			// 	console.log(e)
   			// }
   		},
			/**
			 * 获取地址列表
			 */
			getEquipmentList: function() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				this.loadTitle = '';
				let params = {
					memberId: this.uid
				}
				infoApi.getEquList(params).then(res => {
					console.log(res.data,'7777777777777777777777')
					if(res.data.length>0){
						this.$set(this, 'equipmentList', res.data);
					}else{
						this.$store.commit("DEVICE_CODE", '')
						this.$store.commit("DEVICE_NAME", '')
					}
					
					this.loadTitle = '我也是有底线的';
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					this.loadTitle = '加载更多';
				});
			},
			/**
			 * 设置默认地址
			 */
			radioChange: function(e) {
				const index = parseInt(e.detail.value);
				const item = this.equipmentList[index];
				if (item === undefined) {
					return this.$util.Tips({
						title: '您设置的默认地址不存在!'
					});
				}
				infoApi.bindDefaultEqu({
					memberId: this.uid,
					id: item.id
				}).then(res => {
					if (res.code === 0 && res.data.bindCount === 1) {
						for (let i = 0, len = this.equipmentList.length; i < len; i++) {
							if (i === index) {
								this.equipmentList[i].status = true;
							} else {
								this.equipmentList[i].status = false;
							}
						}
						this.$util.Tips({
							title: '设置成功',
							icon: 'success'
						}, () => {
							this.$store.commit("DEVICE_ID", res.data.deviceId);
							// this.$set(this, 'equipmentList', this.equipmentList);
							this.getEquipmentList()
						});
					}
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 编辑地址
			 */
			editAddress: function(id) {
				let cartId = this.cartId,
					pinkId = this.pinkId,
					couponId = this.couponId;
				this.cartId = '';
				this.pinkId = '';
				this.couponId = '';
				uni.navigateTo({
					url: '/pages/users/user_address/index?id=' + id + '&cartId=' + cartId + '&pinkId=' +
						pinkId + '&couponId=' +
						couponId + '&secKill' + this.secKill + '&combination=' + this.combination +
						'&bargain=' + this.bargain
				})
			},
			/**
			 * 删除设备
			 */
			delEquipment(item, index) {
				const address = this.equipmentList[index];
				if (address === undefined) {
					return this.$util.Tips({
						title: '您删除的地址不存在!'
					});
				}
				console.log('点击了')
				// #ifdef APP-PLUS || H5
				uni.showModal({
				  title: '提示',
				  content: '是否确认删除此设备？',
				  success: res => {
				    if (res.confirm) {
				      let params = {
				      	memberId: this.uid,
				      	id: item.id
				      }
				      infoApi.bindDelete(params).then(res => {
				      	this.$util.Tips({
				      		title: '删除成功',
				      		icon: 'success'
				      	}, () => {
				      		this.equipmentList.splice(index, 1);
				      		this.getEquipmentList()
				      	});
				      }).catch(err => {
				      	return this.$util.Tips({
				      		title: err
				      	});
				      });
				    }
				  }
				});
				// #endif
				// #ifdef MP
				Dialog.confirm({
						title: '',
						message: '是否确认删除此设备？',
						context: this,
					})
					.then(() => {
						let params = {
							memberId: this.uid,
							id: item.id
						}
						infoApi.bindDelete(params).then(res => {
							this.$util.Tips({
								title: '删除成功',
								icon: 'success'
							}, () => {
								this.equipmentList.splice(index, 1);
								this.getEquipmentList()
							});
						}).catch(err => {
							return this.$util.Tips({
								title: err
							});
						});
					})
					.catch(() => {
						// on cancel
					});
					// #endif


			},
			/**
			 * 新增地址
			 */
			addAddress: function() {
				this.cartId = '';
				this.pinkId = '';
				this.couponId = '';
				uni.navigateTo({
					url: '/pages/users/user_address/index?preOrderNo=' + this.preOrderNo
				})
			},

			// TODO 芋艿：微信导入；
			/**
			 * 导入微信地址（小程序）
			 */
			getWxAddress: function() {
				let that = this;
				uni.authorize({
					scope: 'scope.address',
					success: function(res) {
						uni.chooseAddress({
							success: function(res) {
								let addressP = {};
								addressP.province = res.provinceName;
								addressP.city = res.cityName;
								addressP.district = res.countyName;
								addressP.cityId = 0;
								editAddress({
									address: addressP,
									status: true,
									realName: res.userName,
									postCode: res.postalCode,
									phone: res.telNumber,
									detail: res.detailInfo,
									id: 0
									//type: 1//区别城市id（导入微信地址无城市id需要后台自己查找）;
								}).then(res => {
									that.$util.Tips({
										title: "添加成功",
										icon: 'success'
									}, function() {
										that.getEquipmentList(true);
									});
								}).catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
							},
							fail: function(res) {
								if (res.errMsg == 'chooseAddress:cancel') return that.$util
									.Tips({
										title: '取消选择'
									});
							},
						})
					},
					fail: function(res) {
						uni.showModal({
							title: '您已拒绝导入微信地址权限',
							content: '是否进入权限管理，调整授权？',
							success(res) {
								if (res.confirm) {
									uni.openSetting({
										success: function(res) {
											console.log(res.authSetting)
										}
									});
								} else if (res.cancel) {
									return that.$util.Tips({
										title: '已取消！'
									});
								}
							}
						})
					}
				})
			},
			getAddress() {
				let that = this;
				that.$wechat.openAddress().then(userInfo => {
					// open();
					editAddress({
							realName: userInfo.userName,
							phone: userInfo.telNumber,
							address: {
								province: userInfo.provinceName,
								city: userInfo.cityName,
								district: userInfo.countryName,
								cityId: 0
							},
							detail: userInfo.detailInfo,
							postCode: userInfo.postalCode,
							status: true
						})
						.then(() => {
							that.$util.Tips({
								title: "添加成功",
								icon: 'success'
							}, function() {
								// close();
								that.getEquipmentList();
							});
						})
						.catch(err => {
							// close();
							return that.$util.Tips({
								title: err || "添加失败"
							});
						});
				});
			},
			goIndex(id,code,name) {
				infoApi.bindDefaultEqu({
					memberId: this.uid,
					id: id
				}).then(res => {
					// this.$store.commit("DEVICE_ID", res.data.AddressApi
					// uni.setStorageSync('deviceCode',code)
					this.$store.commit("DEVICE_CODE", code)
					this.$store.commit("DEVICE_NAME", name)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			addEqu() {
				uni.navigateTo({
					url: '/pages/equ_list/add_equ'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		height: 100vh;
		swiper{
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.address-management {
		padding: 20rpx 0;
		// margin-top: var(--status-bar-height);
	}

	.address-management.fff {
		background-color: #F7F7F7;
		height: 1300rpx
	}

	.line {
		width: 100%;
		height: 3rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.address-management .item {
		background-color: #fff;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.address-management .content_box_top {
		display: flex;
		// justify-content: space-between;
		align-items: center;
	}

	.address-management .content_box_top .avatar {
		width: 96rpx;
		height: 96rpx;
	}

	.address-management .item .content_box_top .address {
		flex: 1;
		padding: 35rpx 0;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 32rpx;
	}

	.address-management .item .content_box_top .address-left {
		width: 90%;
	}

	.address-management .item .content_box_top .address image {

		width: 32rpx;
		height: 32rpx;

	}


	.address-management .item .address .consignee {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
		display: flex;
		align-items: center;
	}

	.address-management .item .address .consignee .online-box {
		margin-left: 25rpx;
		width: 50rpx;
		height: 30rpx;
	}

	.address-management .item .address .consignee .online-box image {
		width: 100%;
		height: 100%;
	}

	.address-management .item .operation {
		height: 83rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.address-management .item .operation .radio text {
		margin-left: 13rpx;
	}

	.address-management .item .operation .iconfont {
		color: #2c2c2c;
		font-size: 35rpx;
		vertical-align: -2rpx;
		margin-right: 10rpx;
	}

	.address-management .item .operation .iconfont.icon-shanchu {
		margin-left: 35rpx;
		font-size: 38rpx;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 44rpx;
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background-color: #fff;

	}

	.footer image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}
</style>