359 lines
8.0 KiB
Vue
359 lines
8.0 KiB
Vue
<template>
|
||
<view class="container" :style="appThemeStyle">
|
||
<view class="addres-list">
|
||
<view class="address-item" v-for="(item, index) in list" :key="index">
|
||
<view class="title">
|
||
<text>设备编号：{{ item.phone }}</text>
|
||
<u-tag text="已激活" plain size="mini" type="success"></u-tag>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="contacts">
|
||
<view class="bms-info">
|
||
<text class="item">电池型号：</text>
|
||
<text class="item">BMS模块：硬件版</text>
|
||
<text class="item">工作状态：正常</text>
|
||
<text class="item">电池状态：健康</text>
|
||
</view>
|
||
<view class="bms-image">
|
||
<view class="bms-image-box">
|
||
<image class="image" src="../../../static/battery.png"></image>
|
||
<text class="bms-image-fbf">67%</text>
|
||
</view>
|
||
<u-tag text="离线" plain size="mini" type="info"></u-tag>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="item-option">
|
||
<view class="_left">
|
||
<u-icon label="操作" size="40" name="map" @click="navTo('package/user/equipment/operation')"></u-icon>
|
||
</view>
|
||
<view class="line-align"></view>
|
||
<view class="_right">
|
||
<view class="events">
|
||
<u-icon label="详情" size="40" name="file-text" @click="navTo('package/user/equipment/detail')"></u-icon>
|
||
<!-- <view class="event-item" @click="handleUpdate(item.address_id)">
|
||
<text class="iconfont icon-edit"></text>
|
||
<text class="title">编辑</text>
|
||
</view>
|
||
<view class="event-item" @click="handleRemove(item.address_id)">
|
||
<text class="iconfont icon-delete"></text>
|
||
<text class="title">删除</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<empty v-if="!list.length" :isLoading="isLoading" tips="亲，暂无取货地址" />
|
||
<!-- 底部操作按钮 -->
|
||
<view class="footer-fixed">
|
||
<view class="btn-wrapper">
|
||
<view class="btn-item btn-item-main" @click="handleCreate()">添加新地址</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as AddressApi from '@/api/address'
|
||
import Empty from '@/components/empty'
|
||
|
||
export default {
|
||
components: {
|
||
Empty
|
||
},
|
||
data() {
|
||
return {
|
||
//当前页面参数
|
||
options: {},
|
||
// 正在加载
|
||
isLoading: true,
|
||
// 收货地址列表
|
||
list: [],
|
||
// 默认收货地址
|
||
defaultId: null
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
// 当前页面参数
|
||
this.options = options
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
// 获取页面数据
|
||
this.getPageData()
|
||
},
|
||
|
||
methods: {
|
||
|
||
// 获取页面数据
|
||
getPageData() {
|
||
const app = this
|
||
app.isLoading = true
|
||
Promise.all([app.getDefaultId(), app.getAddressList()])
|
||
.then(() => {
|
||
// 列表排序把默认收货地址放到最前
|
||
app.onReorder()
|
||
})
|
||
.finally(() => app.isLoading = false)
|
||
},
|
||
|
||
// 获取收货地址列表
|
||
getAddressList() {
|
||
const app = this
|
||
return new Promise((resolve, reject) => {
|
||
AddressApi.list()
|
||
.then(result => {
|
||
app.list = result.data.list
|
||
resolve(result)
|
||
})
|
||
.catch(reject)
|
||
})
|
||
},
|
||
|
||
// 获取默认的收货地址
|
||
getDefaultId() {
|
||
return new Promise((resolve, reject) => {
|
||
const app = this
|
||
AddressApi.defaultId()
|
||
.then(result => {
|
||
app.defaultId = result.data.defaultId
|
||
resolve(result)
|
||
})
|
||
.catch(reject)
|
||
})
|
||
},
|
||
|
||
// 列表排序把默认收货地址放到最前
|
||
onReorder() {
|
||
const app = this
|
||
app.list.sort(item => {
|
||
return item.address_id == app.defaultId ? -1 : 1
|
||
})
|
||
},
|
||
|
||
navTo(url){
|
||
this.$navTo(url)
|
||
},
|
||
|
||
/**
|
||
* 添加新地址
|
||
*/
|
||
handleCreate() {
|
||
this.$navTo('pages/address/create')
|
||
},
|
||
|
||
/**
|
||
* 编辑地址
|
||
* @param {int} addressId 收货地址ID
|
||
*/
|
||
handleUpdate(addressId) {
|
||
this.$navTo('pages/address/update', { addressId })
|
||
},
|
||
|
||
/**
|
||
* 删除收货地址
|
||
* @param {int} addressId 收货地址ID
|
||
*/
|
||
handleRemove(addressId) {
|
||
const app = this
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "您确定要删除当前收货地址吗?",
|
||
success({ confirm }) {
|
||
confirm && app.onRemove(addressId)
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 确认删除收货地址
|
||
* @param {int} addressId 收货地址ID
|
||
*/
|
||
onRemove(addressId) {
|
||
const app = this
|
||
AddressApi.remove(addressId)
|
||
.then(result => {
|
||
app.getPageData()
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 设置为默认地址
|
||
* @param {Object} addressId
|
||
*/
|
||
handleSetDefault(addressId) {
|
||
const app = this
|
||
AddressApi.setDefault(addressId)
|
||
.then(result => {
|
||
app.defaultId = addressId
|
||
app.options.from === 'checkout' && uni.navigateBack()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.addres-list {
|
||
padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
|
||
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
// 项目内容
|
||
.address-item {
|
||
margin: 0 auto 20rpx auto;
|
||
padding: 30rpx 40rpx;
|
||
width: 94%;
|
||
box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
.title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.contacts {
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.bms-info{
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #666666;
|
||
.item{
|
||
margin-right: 16rpx;
|
||
}
|
||
.name {
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
.bms-image{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 120rpx;
|
||
.bms-image-box{
|
||
display: flex;
|
||
font-size: 22rpx;
|
||
margin-bottom: 18rpx;
|
||
color: #00af00;
|
||
.bms-image-fbf{
|
||
margin-top: 22rpx;
|
||
}
|
||
}
|
||
.image{
|
||
width: 50rpx; height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.address {
|
||
font-size: 28rpx;
|
||
|
||
.region {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
margin: 20rpx 0;
|
||
border-bottom: 1rpx solid #f3f3f3;
|
||
}
|
||
|
||
.line-align{
|
||
width: 6rpx;
|
||
height: 48rpx;
|
||
border-right: 1rpx solid #f3f3f3;
|
||
}
|
||
|
||
.item-option {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 48rpx;
|
||
|
||
// 单选框
|
||
.item-radio {
|
||
font-size: 28rpx;
|
||
|
||
.radio {
|
||
vertical-align: middle;
|
||
transform: scale(0.76)
|
||
}
|
||
|
||
.text {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
// 操作
|
||
.events {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 48rpx;
|
||
|
||
.event-item {
|
||
font-size: 28rpx;
|
||
margin-right: 26rpx;
|
||
color: #4c4c4c;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.title {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// 底部操作栏
|
||
.footer-fixed {
|
||
position: fixed;
|
||
bottom: var(--window-bottom);
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 11;
|
||
|
||
// 设置ios刘海屏底部横线安全区域
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.btn-wrapper {
|
||
height: 120rpx;
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.btn-item {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
height: 86rpx;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.btn-item-main {
|
||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||
}
|
||
|
||
}
|
||
</style>
|