@ -1,245 +0,0 @@ | |||||
<template> | |||||
<scroll-view | |||||
scroll-y="true" | |||||
:style="{height: height}" | |||||
@scrolltolower="moreAddress"> | |||||
<uv-radio-group v-model="selectAddress" | |||||
@change="editDefault" | |||||
v-if="addressList.length > 0"> | |||||
<view v-for="item in addressList" :key="item.id" class="address-item"> | |||||
<view class="address-item-top" | |||||
@click="select(item)"> | |||||
<view class="img-box"> | |||||
<image src="../../static/address/icon.png" mode="aspectFill"></image> | |||||
</view> | |||||
<view class="address-info"> | |||||
<view class="user-info"> | |||||
<text class="user-name">{{ item.name }}</text> | |||||
<text class="user-phone">{{ item.phone }}</text> | |||||
<text v-if="item.defaultFlag == 1" class="is-default">默认</text> | |||||
</view> | |||||
<view class="address-detail"> | |||||
{{ item.address + " " + item.addressDetail }} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="controls" | |||||
v-if="controls"> | |||||
<view class="default-checkbox"> | |||||
<uv-radio | |||||
:name="item.id" | |||||
label-disabled | |||||
size="30rpx" | |||||
icon-size="30rpx"> | |||||
默认地址 | |||||
</uv-radio> | |||||
</view> | |||||
<view class="edit-btn"> | |||||
<uv-icon name="edit-pen"></uv-icon> | |||||
<text @click="editAddress(item)" class="control-title">编辑</text> | |||||
</view> | |||||
<view class="del-btn"> | |||||
<uv-icon name="trash"></uv-icon> | |||||
<text class="control-title" @click="deleteAddress(item.id)">删除</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</uv-radio-group> | |||||
<view | |||||
style="padding: 100rpx 0;" | |||||
v-else> | |||||
<uv-empty | |||||
mode="history" | |||||
textSize="28rpx" | |||||
iconSize="100rpx"/> | |||||
</view> | |||||
</scroll-view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props : { | |||||
controls : { | |||||
default : false, | |||||
type : Boolean, | |||||
}, | |||||
height : { | |||||
default : 'calc(90vh - 180rpx)' | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
selectAddress : 0, | |||||
queryParams: { | |||||
pageNo: 1, | |||||
pageSize: 10, | |||||
}, | |||||
addressList: [], | |||||
total : 0, | |||||
} | |||||
}, | |||||
methods: { | |||||
//获取地址列表 | |||||
getAddressList() { | |||||
return new Promise((success, fail) => { | |||||
this.$api('addressPage', this.queryParams, res => { | |||||
if (res.code == 200) { | |||||
this.addressList = res.result.records || []; | |||||
this.total = res.result.total || 0; | |||||
res.result.records.forEach(n => { //筛选默认地址 | |||||
console.log(n); | |||||
if (n.defaultFlag == 1) { | |||||
this.selectAddress = n.id | |||||
} | |||||
}) | |||||
success(res.result) | |||||
} | |||||
}) | |||||
}) | |||||
}, | |||||
// 加载更多 | |||||
moreAddress(){ | |||||
if(this.queryParams.pageSize > this.total){ | |||||
return | |||||
} | |||||
this.queryParams.pageSize += 10 | |||||
this.getAddressList() | |||||
}, | |||||
// 删除地址 | |||||
deleteAddress(e){ | |||||
this.$emit('deleteAddress', e) | |||||
}, | |||||
// 修改地址 | |||||
editAddress(e){ | |||||
this.$emit('editAddress', e) | |||||
}, | |||||
// 切换默认地址 | |||||
editDefault(e){ | |||||
this.$emit('editDefault', e) | |||||
}, | |||||
// 选择了地址 | |||||
select(e){ | |||||
this.$emit('select', e) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.address-item { | |||||
background: white; | |||||
border-radius: 20rpx; | |||||
overflow: hidden; | |||||
margin-bottom: 20rpx; | |||||
padding: 15rpx 15rpx 0rpx 15rpx; | |||||
width: 680rpx; | |||||
.address-item-top { | |||||
border-bottom: 1px dashed #D3D1D1; | |||||
display: flex; | |||||
align-items: center; | |||||
padding: 0rpx 0rpx 15rpx 0rpx; | |||||
.img-box { | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
image { | |||||
width: 75%; | |||||
height: 75%; | |||||
display: block; | |||||
margin: 12.5% auto; | |||||
} | |||||
} | |||||
.address-info { | |||||
width: calc(100% - 120rpx); | |||||
height: 100%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
.user-info { | |||||
display: flex; | |||||
align-items: center; | |||||
text { | |||||
display: block; | |||||
line-height: 40rpx; | |||||
margin-right: 20rpx; | |||||
} | |||||
.user-name, | |||||
.user-phone { | |||||
font-size: 30rpx; | |||||
} | |||||
.is-default { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
background: #FEB773; | |||||
color: white; | |||||
width: 80rpx; | |||||
height: 35rpx; | |||||
border-radius: 20rpx; | |||||
font-size: 22rpx; | |||||
} | |||||
} | |||||
.address-detail { | |||||
color: #4a4a4a; | |||||
font-size: 26rpx; | |||||
overflow: hidden; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 2; | |||||
text-overflow: ellipsis; | |||||
} | |||||
} | |||||
} | |||||
.controls { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
font-size: 26rpx; | |||||
padding: 15rpx 15rpx 25rpx 15rpx; | |||||
.default-checkbox { | |||||
display: flex; | |||||
text { | |||||
margin-left: 8rpx; | |||||
} | |||||
} | |||||
.control-title { | |||||
height: 30rpx; | |||||
line-height: 30rpx; | |||||
color: #666666; | |||||
} | |||||
view { | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
image { | |||||
width: 23rpx; | |||||
height: 23rpx; | |||||
vertical-align: middle; | |||||
margin-right: 8rpx; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -1,220 +0,0 @@ | |||||
<template> | |||||
<uv-popup round="40rpx" ref="addressPopup" :customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}"> | |||||
<view class="redact-address"> | |||||
<view class="redact-address-title">{{title}}</view> | |||||
<uv-form label-width="210rpx" :model="addressDetail" ref="form"> | |||||
<uv-form-item label="联系人" prop="name"> | |||||
<uv-input v-model="addressDetail.name" placeholder="请输入联系人姓名" border="none"> | |||||
</uv-input> | |||||
</uv-form-item> | |||||
<uv-form-item label="手机号" prop="phone"> | |||||
<uv-input v-model="addressDetail.phone" placeholder="请输入手机号" border="none"> | |||||
</uv-input> | |||||
</uv-form-item> | |||||
<uv-form-item label="所在地区" prop="address"> | |||||
<uv-input v-model="addressDetail.address" placeholder="请选择所在地区" border="none"> | |||||
</uv-input> | |||||
<template #right> | |||||
<view style="padding-right: 40rpx;color: #FBAB32;" @click.stop="selectAddr"> | |||||
<image src="../../static/address/selectIcon.png" mode="aspectFit"></image>定位 | |||||
</view> | |||||
</template> | |||||
</uv-form-item> | |||||
<uv-form-item label="详细地址" prop="addressDetail"> | |||||
<uv-input v-model="addressDetail.addressDetail" placeholder="请输入详细地址" border="none"> | |||||
</uv-input> | |||||
</uv-form-item> | |||||
</uv-form> | |||||
<view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址'}}</view> | |||||
</view> | |||||
</uv-popup> | |||||
</template> | |||||
<script> | |||||
import Position from '@/utils/position.js' | |||||
export default { | |||||
data() { | |||||
return { | |||||
addressDetail: {} | |||||
} | |||||
}, | |||||
props: { | |||||
title: { | |||||
type: String, | |||||
default: '新增地址' | |||||
} | |||||
}, | |||||
methods: { | |||||
open(addressDetail) { | |||||
this.addressDetail = addressDetail | |||||
this.$refs.addressPopup.open('bottom') | |||||
}, | |||||
close(){ | |||||
this.$refs.addressPopup.close() | |||||
}, | |||||
//新增和修改地址 | |||||
onSubmit() { | |||||
let isOk = this.parameterVerification(this.addressDetail) | |||||
if (isOk && !isOk.auth) { | |||||
return uni.showToast({ | |||||
icon: 'none', | |||||
title: isOk.title, | |||||
'zIndex': 10000 | |||||
}) | |||||
} | |||||
this.$emit('saveOrUpdate', this.addressDetail) | |||||
}, | |||||
//验证用户参数合法性 | |||||
parameterVerification(addressDetaila) { | |||||
let { | |||||
name, | |||||
phone, | |||||
address, | |||||
addressDetail | |||||
} = addressDetaila | |||||
if (name.trim() == '') { | |||||
return { | |||||
title: '请填写联系人', | |||||
auth: false | |||||
} | |||||
} else if (phone.trim() == '') { | |||||
return { | |||||
title: '请填写手机号', | |||||
auth: false | |||||
} | |||||
} else if (address.trim() == '') { | |||||
return { | |||||
title: '请填写所在地区', | |||||
auth: false | |||||
} | |||||
} else if (addressDetail.trim() == '') { | |||||
return { | |||||
title: '请填写详细地址', | |||||
auth: false | |||||
} | |||||
} else if (phone.trim() != '') { | |||||
if (!this.$utils.verificationPhone(phone)) { | |||||
return { | |||||
title: '手机号格式不合法', | |||||
auth: false | |||||
} | |||||
} | |||||
} | |||||
return { | |||||
title: '验证通过', | |||||
auth: true | |||||
} | |||||
}, | |||||
//地图上选择地址 | |||||
selectAddr() { | |||||
Position.getLocation(res => { | |||||
Position.selectAddress(res.longitude, res.latitude, success => { | |||||
this.setAddress(success) | |||||
}) | |||||
}) | |||||
}, | |||||
//提取用户选择的地址信息复制给表单数据 | |||||
setAddress(res) { | |||||
//经纬度信息 | |||||
this.addressDetail.latitude = res.latitude | |||||
this.addressDetail.longitude = res.longitude | |||||
if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||||
return this.addressDetail.address = res.name | |||||
} | |||||
if (res.address || res.name) { | |||||
return this.addressDetail.address = res.address + res.name | |||||
} | |||||
this.addressDetail.address = '' //用户啥都没选就点击勾选 | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.redact-address { | |||||
box-sizing: border-box; | |||||
.redact-address-title { | |||||
height: 80rpx; | |||||
line-height: 80rpx; | |||||
font-size: 30rpx; | |||||
color: #333333; | |||||
font-weight: 600; | |||||
} | |||||
.save { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
width: 90%; | |||||
height: 80rpx; | |||||
border-radius: 40rpx; | |||||
color: white; | |||||
font-size: 28rpx; | |||||
margin: 0rpx auto; | |||||
background: $uni-color; | |||||
margin-top: 150rpx; | |||||
} | |||||
image { | |||||
width: 25rpx; | |||||
height: 25rpx; | |||||
} | |||||
//修改组件默认样式 | |||||
.uv-form { | |||||
padding: 30rpx 0rpx; | |||||
} | |||||
&::v-deep .uv-cell { | |||||
padding: 0rpx 0rpx; | |||||
font-size: 26rpx; | |||||
&::after { | |||||
border: none !important; | |||||
} | |||||
.uv-field__label { | |||||
display: flex; | |||||
align-items: center; | |||||
height: 80rpx; | |||||
} | |||||
.uv-field__control, | |||||
.uv-field__right-icon { | |||||
height: 80rpx; | |||||
font-size: 26rpx; | |||||
border-bottom: 2rpx solid #cbc8c8; | |||||
} | |||||
.uv-field__right-icon { | |||||
display: flex; | |||||
align-items: center; | |||||
height: 78rpx; | |||||
color: #5FCC9F; | |||||
} | |||||
.uv-cell__value { | |||||
height: 120rpx; | |||||
} | |||||
} | |||||
&::v-deep .uv-field__error-message { | |||||
color: #5AC796; | |||||
font-size: 20rpx; | |||||
margin-top: 10rpx; | |||||
} | |||||
} | |||||
</style> |
@ -1,77 +0,0 @@ | |||||
<template> | |||||
<view class="submit"> | |||||
<view class="" | |||||
@click="$emit('share')"> | |||||
<uv-icon | |||||
size="40rpx" | |||||
name="share-square"></uv-icon> | |||||
<view class=""> | |||||
分享 | |||||
</view> | |||||
</view> | |||||
<view class="" | |||||
@click="$utils.navigateTo('/index/cart')"> | |||||
<uv-icon | |||||
size="40rpx" | |||||
name="shopping-cart"></uv-icon> | |||||
<view class=""> | |||||
购物车 | |||||
</view> | |||||
</view> | |||||
<view class="btn" | |||||
@click="$emit('submit')"> | |||||
{{ submiitTitle }} | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name:"submit", | |||||
props : { | |||||
submiitTitle : { | |||||
default : '立即租赁', | |||||
type : String, | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.submit{ | |||||
position: fixed; | |||||
bottom: 0; | |||||
left: 0; | |||||
width: 100vw; | |||||
background-color: #fff; | |||||
height: 100rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
font-size: 24rpx; | |||||
.btn{ | |||||
background: $uni-color; | |||||
width: 600rpx; | |||||
height: 80rpx; | |||||
color: #fff; | |||||
border-radius: 40rpx; | |||||
font-size: 28rpx; | |||||
} | |||||
view{ | |||||
width: 100rpx; | |||||
margin: 0 10rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
flex-direction: column; | |||||
} | |||||
} | |||||
</style> |
@ -1,367 +0,0 @@ | |||||
<template> | |||||
<uv-popup ref="popup" | |||||
:round="30" | |||||
bgColor="#f7f7f7"> | |||||
<view class="content"> | |||||
<!-- 地址 --> | |||||
<view class="address" | |||||
@click="openAddress"> | |||||
<image src="../../static/address/selectIcon.png" mode=""></image> | |||||
<view class=""> | |||||
{{ address.name }} | |||||
</view> | |||||
<view class=""> | |||||
{{ address.addressDetail }} | |||||
</view> | |||||
<view class="icon"> | |||||
<uv-icon | |||||
size="30rpx" | |||||
name="arrow-right"></uv-icon> | |||||
</view> | |||||
</view> | |||||
<!-- 商品信息和数量 --> | |||||
<view class="submit-info"> | |||||
<view class="title"> | |||||
桌布租赁 | |||||
</view> | |||||
<view class="box"> | |||||
<image | |||||
class="image" | |||||
:src="unit.pic" | |||||
mode=""></image> | |||||
<view class="info"> | |||||
<view class="price"> | |||||
¥<text>{{ unit.depositPrice }}</text>元 | |||||
</view> | |||||
<view class="unit"> | |||||
请选择规格 | |||||
</view> | |||||
<view class=""> | |||||
<uv-number-box v-model="num"></uv-number-box> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 规格 --> | |||||
<view class="submit-unit"> | |||||
<view class="title"> | |||||
规格选择 | |||||
</view> | |||||
<view class="list"> | |||||
<view :class="{act : unitIndex == index}" | |||||
v-for="(item, index) in detail.hotelGoodsSkuList" | |||||
@click="selectUnit(item, index)" | |||||
:key="index"> | |||||
{{ item.title }} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 费用明细 --> | |||||
<view class="expense-detail"> | |||||
<view class="title"> | |||||
费用明细 | |||||
</view> | |||||
<view class="detail"> | |||||
押金:¥{{ unit.depositPrice }} | |||||
</view> | |||||
</view> | |||||
<!-- 提交按钮 --> | |||||
<view class="submit-btn"> | |||||
<view class="l" | |||||
@click="addCart"> | |||||
加入租赁车 | |||||
</view> | |||||
<view class="r" | |||||
@click="orderPay"> | |||||
{{ submiitTitle }} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<uv-popup ref="addressPopup" :round="30"> | |||||
<addressList | |||||
ref="addressList" | |||||
height="60vh" | |||||
@select="selectAddress" | |||||
/> | |||||
</uv-popup> | |||||
</uv-popup> | |||||
</template> | |||||
<script> | |||||
import addressList from '../address/addressList.vue' | |||||
export default { | |||||
components : { | |||||
addressList, | |||||
}, | |||||
props : { | |||||
submiitTitle : { | |||||
default : '立即租赁', | |||||
type : String, | |||||
}, | |||||
detail : { | |||||
default : {} | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
unitIndex : 0, | |||||
address : { | |||||
name : '请选择联系人', | |||||
addressDetail : '', | |||||
}, | |||||
num : 1, | |||||
unit : {}, | |||||
addressTotal : 0, | |||||
} | |||||
}, | |||||
methods: { | |||||
// 打开 | |||||
open(){ | |||||
this.$refs.popup.open('bottom') | |||||
if(!this.unit.id){ | |||||
this.selectUnit(this.detail.hotelGoodsSkuList[0], 0) | |||||
} | |||||
// 获取地址列表 | |||||
this.$refs.addressList.getAddressList().then(res => { | |||||
this.addressTotal = res.total | |||||
if(this.addressTotal != 0){ | |||||
this.address = res.records[0] | |||||
} | |||||
}) | |||||
}, | |||||
// 关闭 | |||||
close(){ | |||||
this.$refs.popup.close() | |||||
}, | |||||
// 打开选择地址 | |||||
openAddress(){ | |||||
if (this.addressTotal == 0) { | |||||
this.$refs.popup.close() | |||||
return uni.navigateTo({ | |||||
url: '/pages_order/mine/address?type=back' | |||||
}) | |||||
} | |||||
this.$refs.addressPopup.open('bottom') | |||||
}, | |||||
// 选择地址 | |||||
selectAddress(e){ | |||||
this.address = e | |||||
this.$refs.addressPopup.close() | |||||
}, | |||||
// 选择规格 | |||||
selectUnit(item, index){ | |||||
this.unit = item | |||||
this.unitIndex = index | |||||
}, | |||||
addCart(){ | |||||
this.$api('cartAdd', { | |||||
id : this.detail.id, | |||||
skuId : this.unit.id, | |||||
}, res => { | |||||
if(res.code == 200){ | |||||
uni.showToast({ | |||||
title: '添加成功', | |||||
}); | |||||
this.$refs.popup.close() | |||||
} | |||||
}) | |||||
}, | |||||
orderPay(){ | |||||
let data = { | |||||
id : this.detail.id,//商品id | |||||
skuId : this.unit.id,//规格id | |||||
addressId : this.address.id,//地址id | |||||
sku : this.unit.title,//规格 | |||||
num : this.num, | |||||
} | |||||
if(this.$utils.verificationAll(data, { | |||||
skuId : '请选择规格', | |||||
addressId : '请选择地址', | |||||
})){ | |||||
return | |||||
} | |||||
this.$api('orderPay', data, res => { | |||||
if(res.code == 200){ | |||||
uni.redirectTo({ | |||||
url: '/pages/index/order' | |||||
}) | |||||
// uni.requestPayment({ | |||||
// provider: 'wxpay', // 服务提提供商 | |||||
// timeStamp: res.result.timeStamp, // 时间戳 | |||||
// nonceStr: res.result.nonceStr, // 随机字符串 | |||||
// package: res.result.packageValue, | |||||
// signType: res.result.signType, // 签名算法 | |||||
// paySign: res.result.paySign, // 签名 | |||||
// success: function (res) { | |||||
// console.log('支付成功',res); | |||||
// uni.redirectTo({ | |||||
// url: '/pages/index/order' | |||||
// }) | |||||
// }, | |||||
// fail: function (err) { | |||||
// console.log('支付失败',err); | |||||
// uni.showToast({ | |||||
// icon:'none', | |||||
// title:"支付失败" | |||||
// }) | |||||
// } | |||||
// }); | |||||
} | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.content{ | |||||
max-height: 80vh; | |||||
overflow: hidden; | |||||
overflow-y: auto; | |||||
.address{ | |||||
display: flex; | |||||
padding: 20rpx; | |||||
background-color: #fff; | |||||
image{ | |||||
width: 30rpx; | |||||
height: 30rpx; | |||||
margin: 20rpx; | |||||
} | |||||
view{ | |||||
margin: 20rpx; | |||||
overflow:hidden; //超出的文本隐藏 | |||||
text-overflow:ellipsis; //溢出用省略号显示 | |||||
white-space:nowrap; //溢出不换行 | |||||
} | |||||
.icon{ | |||||
margin-left: auto; | |||||
} | |||||
} | |||||
.submit-info{ | |||||
background-color: #fff; | |||||
padding: 30rpx; | |||||
margin-top: 20rpx; | |||||
.title{ | |||||
font-size: 30rpx; | |||||
padding: 10rpx; | |||||
font-weight: 600; | |||||
} | |||||
.box{ | |||||
display: flex; | |||||
margin-top: 10rpx; | |||||
.image{ | |||||
width: 200rpx; | |||||
height: 200rpx; | |||||
border-radius: 20rpx; | |||||
margin-right: 20rpx; | |||||
} | |||||
.info{ | |||||
flex: 1; | |||||
.unit{ | |||||
font-size: 24rpx; | |||||
padding: 10rpx 20rpx; | |||||
color: #717171; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.price{ | |||||
color: $uni-color; | |||||
font-size: 28rpx; | |||||
padding: 10rpx 20rpx; | |||||
text{ | |||||
font-size: 36rpx; | |||||
font-weight: 900; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.submit-unit{ | |||||
padding: 30rpx; | |||||
background-color: #fff; | |||||
.title{ | |||||
font-size: 28rpx; | |||||
font-weight: 600; | |||||
} | |||||
.list{ | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
font-size: 22rpx; | |||||
.act{ | |||||
color: $uni-color; | |||||
border: 1px solid $uni-color; | |||||
background-color: #F9E7DE; | |||||
} | |||||
view{ | |||||
border-radius: 15rpx; | |||||
width: 320rpx; | |||||
background-color: #F3F3F3; | |||||
border: 1px solid #F3F3F3; | |||||
margin: 10rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
padding: 15rpx 0; | |||||
} | |||||
} | |||||
} | |||||
.expense-detail{ | |||||
padding: 30rpx; | |||||
background-color: #fff; | |||||
font-size: 28rpx; | |||||
.title{ | |||||
font-weight: 600; | |||||
} | |||||
.detail{ | |||||
background-color: #F6F6F6; | |||||
color: #717171; | |||||
margin: 10rpx 0; | |||||
padding: 10rpx 20rpx; | |||||
} | |||||
} | |||||
.submit-btn{ | |||||
width: 600rpx; | |||||
height: 80rpx; | |||||
color: #fff; | |||||
border-radius: 40rpx; | |||||
font-size: 28rpx; | |||||
margin: 20rpx auto; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
border: 1rpx solid $uni-color; | |||||
overflow: hidden; | |||||
.l{ | |||||
flex: 1; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
color: $uni-color; | |||||
} | |||||
.r{ | |||||
background: $uni-color; | |||||
flex: 1; | |||||
height: 100%; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -1,213 +0,0 @@ | |||||
<template> | |||||
<view class="address"> | |||||
<navbar title="地址管理" leftClick @leftClick="leftClick" /> | |||||
<view class="address-list"> | |||||
<addressList | |||||
controls | |||||
ref="addressList" | |||||
@deleteAddress="deleteAddress" | |||||
@editAddress="editAddress" | |||||
@editDefault="editDefault"/> | |||||
</view> | |||||
<redactAddress | |||||
ref="addressPopup" | |||||
:addressDetail="addressDetail" | |||||
@saveOrUpdate="saveOrUpdate" | |||||
:title="title"></redactAddress> | |||||
<view class="add-btn"> | |||||
<view @click="addBtn" class="btn"> | |||||
新增地址 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import redactAddress from '../components/address/redactAddress.vue' | |||||
import addressList from '../components/address/addressList.vue' | |||||
export default { | |||||
components: { | |||||
redactAddress, | |||||
addressList | |||||
}, | |||||
data() { | |||||
return { | |||||
title: '新增地址', | |||||
type : '', | |||||
} | |||||
}, | |||||
onLoad(args) { | |||||
this.type = args.type | |||||
if(this.type == 'back'){ | |||||
this.addBtn() | |||||
} | |||||
}, | |||||
onShow() { | |||||
this.getAddressList() | |||||
}, | |||||
methods: { | |||||
//获取地址列表 | |||||
getAddressList() { | |||||
this.$refs.addressList.getAddressList() | |||||
}, | |||||
//获取地址详情 | |||||
editAddress(address) { | |||||
this.$refs.addressPopup.open({...address}) | |||||
}, | |||||
//返回个人中心 | |||||
leftClick() { | |||||
uni.navigateBack(-1) | |||||
}, | |||||
//添加和修改地址 | |||||
saveOrUpdate(addressDetail) { | |||||
let data = { | |||||
name: addressDetail.name, | |||||
phone: addressDetail.phone, | |||||
address: addressDetail.address, | |||||
addressDetail: addressDetail.addressDetail, | |||||
defaultId: addressDetail.defaultId || '0', | |||||
latitude: addressDetail.latitude, | |||||
longitude: addressDetail.longitude | |||||
} | |||||
if (addressDetail.id) { | |||||
data.id = addressDetail.id | |||||
} | |||||
this.$api(data.id ? 'addressEdit' : 'addressAdd', data, res => { | |||||
if (res.code == 200) { | |||||
this.$refs.addressPopup.close() | |||||
this.getAddressList() | |||||
if(this.type == 'back'){ | |||||
uni.navigateBack(-1) | |||||
} | |||||
uni.showToast({ | |||||
title: '操作成功', | |||||
icon: 'none' | |||||
}) | |||||
} | |||||
}) | |||||
}, | |||||
//修改默认地址 | |||||
editDefault(id) { | |||||
this.$api('addressDefault', { | |||||
id: id, | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
this.$refs.addressPopup.close() | |||||
uni.showToast({ | |||||
title: '操作成功', | |||||
icon: 'none' | |||||
}) | |||||
this.getAddressList() | |||||
} | |||||
}) | |||||
}, | |||||
//删除地址 | |||||
deleteAddress(id) { | |||||
let self = this | |||||
uni.showModal({ | |||||
title: '删除地址', | |||||
content: '确认删除此地址?删除后数据不可恢复', | |||||
success(e) { | |||||
if(e.confirm){ | |||||
self.$api('addressDelete', { | |||||
id | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
uni.showToast({ | |||||
title: '删除成功', | |||||
icon: 'none' | |||||
}) | |||||
self.getAddressList() | |||||
} | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
//点击新增按钮 | |||||
addBtn() { | |||||
this.title = '新增地址' | |||||
this.$refs.addressPopup.open({ //初始化数据 | |||||
name: '', | |||||
phone: '', | |||||
address: '', | |||||
addressDetail: '', | |||||
defaultId: '', | |||||
latitude: '', | |||||
longitude: '' | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.address { | |||||
width: 750rpx; | |||||
margin: 0rpx auto; | |||||
background: #F5F5F5; | |||||
box-sizing: border-box; | |||||
min-height: 100vh; | |||||
.address-list { | |||||
padding: 40rpx 20rpx 120rpx 20rpx; | |||||
} | |||||
.add-btn { | |||||
position: fixed; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
left: 0; | |||||
bottom: 0; | |||||
width: 750rpx; | |||||
height: 100rpx; | |||||
background: white; | |||||
.btn { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
width: 85%; | |||||
height: 80rpx; | |||||
border-radius: 40rpx; | |||||
color: white; | |||||
text-align: center; | |||||
font-size: 28rpx; | |||||
background: $uni-color; | |||||
} | |||||
} | |||||
} | |||||
@media all and (min-width: 961px) { | |||||
.add-btn { | |||||
left: 50% !important; | |||||
transform: translateX(-50%); | |||||
} | |||||
} | |||||
//选择位置地图样式 | |||||
:deep(.uni-system-choose-location) { | |||||
z-index: 99999 !important; | |||||
} | |||||
</style> |
@ -0,0 +1,61 @@ | |||||
<template> | |||||
<view> | |||||
<navbar leftClick @leftClick="$utils.navigateBack" /> | |||||
<view class="search"> | |||||
<uv-search | |||||
placeholder="请输入岗位/公司名称" | |||||
:showAction="false" | |||||
search-icon-size="40rpx" | |||||
@search="search" | |||||
v-model="keyword"></uv-search> | |||||
</view> | |||||
<!-- 筛选器 --> | |||||
<screenWork @clickItem="clickItem"/> | |||||
<!-- 老板看到的 --> | |||||
<userList ref="workList" v-if="role"/> | |||||
<!-- 工人看到的 --> | |||||
<workList ref="workList" v-else/> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import screenWork from '@/components/screen/screenWork.vue' | |||||
import workList from '@/components/list/workList/index.vue' | |||||
import userList from '@/components/list/userList/index.vue' | |||||
import { | |||||
mapState, | |||||
} from 'vuex' | |||||
export default { | |||||
components : { | |||||
workList, | |||||
screenWork, | |||||
userList, | |||||
}, | |||||
computed: { | |||||
...mapState(['userInfo', 'role']), | |||||
}, | |||||
data() { | |||||
return { | |||||
keyword : '', | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.search{ | |||||
width: 700rpx; | |||||
background-color: #fff; | |||||
/deep/ .uv-search__content__icon{ | |||||
padding: 10rpx 0; | |||||
} | |||||
} | |||||
</style> |