1.需求：上传车位照片 支付宝支付功能
2.注意点：uni.uploadFile()这个api的name属性一定要和后端对应好
上传文件代码
<template>
<view class="contents">
<view class="titleHead">电桩设置</view>
<view class="content">
<view class="card-itemA">
<map style="width: 100%; height: 300px;" :latitude="saveObj.lat" :longitude="saveObj.lon"
:markers="covers" layer-style="amap://styles/whitesmoke"></map>
</view>
<view class="card-itemB">
<view class="itemB-title">位置信息</view>
<view class="itemB-loc" @click="getLoc">{
{
locFlag== true? '自动定位中':'获取当前位置'}}</view>
</view>
<view class="card-itemC">
<view class="inpSty mar-sty">
<view>地址</view>
<view>
<u-input v-model="address" :type="type" :border="border" :custom-style="{background:'#EFEFEF'}"
placeholder="请完善地址" input-align="right" />
</view>
</view>
<view class="inpSty mar-stys">
<view>完善地址</view>
<view>
<u-input v-model="saveObj.addressDetail" :type="type" :border="border"
:custom-style="{background:'#EFEFEF'}" placeholder="请完善地址" maxlength="11"
input-align="right" />
</view>
</view>
<view class="inpSty mar-stys">
<view>小区名称</view>
<view>
<u-input v-model="saveObj.communityName" :type="type" :border="border"
:custom-style="{background:'#EFEFEF'}" placeholder="请完善小区名称" maxlength="11"
input-align="right" />
</view>
</view>
<view class="inpSty mar-stys">
<view>车位楼层</view>
<view>
<u-input v-model="saveObj.carportFloor" :type="type" :border="border"
:custom-style="{background:'#EFEFEF'}" placeholder="请完善车位楼层信息" maxlength="11"
input-align="right" />
</view>
</view>
<view class="inpSty mar-stys">
<view>车位号</view>
<view>
<u-input v-model="saveObj.noAndLocation" :type="type" :border="border"
:custom-style="{background:'#EFEFEF'}" placeholder="请完善车位号" maxlength="11"
input-align="right" />
</view>
</view>
<view class="inpSty mar-stys">
<view>电桩名称</view>
<view>
<u-input v-model="saveObj.pileName" :type="type" :border="border"
:custom-style="{background:'#EFEFEF'}" maxlength="11" input-align="right" disabled />
</view>
</view>
<view class="inpStys">
<view>找桩攻略</view>
<view>
<u-input v-model="saveObj.findPileTactic" type="textarea " :border="border" height="100%"
:custom-style="{background:'#EFEFEF'}" placeholder="请完善文字补充，找桩路线及位置信息等" maxlength="11"
placeholder-style="padding-left:0rpx" />
</view>
</view>
</view>
<view class="card-itemB">
<view class="itemB-title">车位图片</view>
</view>
<view class="upload">
<u-upload ref="uUploadMultiple" :action="action" :file-list="fileList" :custom-btn="true"
:header="headers" max-count="3" :auto-upload="false" @on-remove="deleteImgs"
@on-choose-complete="afterReadImgs" :multiple="false">
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<view></view>
<view>入口/车位照片 </view>
<view>(最少上传1-3张照片)</view>
</view>
</u-upload>
</view>
<view class="btn">
<my-btn @click="save">提交</my-btn>
</view>
</view>
<load v-if="loadingShowA"></load>
<locationAnimate v-if="locationShow"></locationAnimate>
</view>
</template>
<script>
import myBtn from '../../component/my-button.vue';
import load from '../../component/loading.vue';
import locationAnimate from '../../component/locationAnimate.vue';
import {
uploadFileUrl,
baseUrlA
} from '@/common/http.api.js'
export default {
components: {
myBtn,
load,
locationAnimate
},
data() {
return {
empower: true,
// checkedA: true,
checkedB: false,
checkedC: false,
show: false,
value: '',
type: 'text',
border: false,
selectIndex: -1,
types: '',
custPhone: '',
custName: '',
relationType: '',
relationTypeName: '',
editInfo: {
},
latitude: '',
longitude: '',
covers: [{
latitude: '',
longitude: '',
iconPath: 'https://img.cdn.wxzhida.cn/zd-ali-app/pileStas.png',
width: 33,
height: 39,
}, ],
locFlag: false,
action: '',
fileList: [],
headers: {
Authorization: uni.getStorageSync('accessToken')
},
imgUrl: '',
saveObj: {
},
loadingShowA: false,
address: '',
locationShow: false,
}
},
onLoad(options) {
console.log('xxxxxx~onLoad')
this.getSharePile()
},
onPullDownRefresh() {
console.log('下拉刷新')
},
onReady() {
},
onShow() {
this.action = uploadFileUrl
this.imgUrl = baseUrlA
console.log(this.action)
},
computed: {
counts() {
return this.$store.state.count
}
},
methods: {
/*保存内容*/
save() {
console.log('点击了提交')
if (this.fileList.length > 0) {
let list = this.fileList.map(item => {
return item.url
})
this.saveObj.imgUrl = list.join(',')
}
let vaild = this.getValidateVal()
console.log(this.saveObj)
if (!vaild) {
return false;
}
this.loadingShowA = true;
let that = this;
that.$u.api.setUpdateSharePile(this.saveObj).then(res => {
console.log(res)
that.loadingShowA = false;
if (that.saveObj.shareStatus == '01') {
//未共享 继续跳共享设置
uni.navigateTo({
url: '/pages/enjoyTogetherSetting/index'
})
} else {
//已共享或者下线
uni.switchTab({
url: '/pages/shareIndex/index'
})
}
}).catch(err => {
that.loadingShowA = false;
})
},
/*获取共享桩详情*/
getSharePile() {
let that = this;
that.$u.api.getSharePileDetail({
corpNo: 'CO1524100773815',
pileCode: uni.getStorageSync('pileCode')
}).then(res => {
that.saveObj = res.data;
that.address = res.data.province + res.data.city + res.data.county
that.covers[0].latitude = res.data.lat
that.covers[0].longitude = res.data.lon
if (res.data.imgUrl != '') {
let list = res.data.imgUrl.split(',')
if (list.length > 0) {
for (let item of list) {
that.fileList.push({
url: item
})
}
}
}
}).catch(err => {
})
},
/*获取当前位置*/
getLoc() {
this.locFlag = true;
this.locationShow = true;
my.getLocation({
type: 2, // 获取经纬度和省市区县数据
success: (res) => {
console.log(res);
this.locFlag = false;
this.saveObj.lat = res.latitude //纬度
this.saveObj.lon = res.longitude //经度
this.saveObj.province = res.province
this.saveObj.city = res.city
this.saveObj.county = res.district
this.address = res.province + res.city + res.district
this.saveObj.addressDetail = res.streetNumber.street + res.streetNumber.number
this.covers[0].latitude = res.latitude
this.covers[0].longitude = res.longitude
this.locationShow = false;
},
fail: (res) => {
my.alert({
title: '定位失败',
content: '重新定位'
});
},
complete: () => {
this.locFlag = false;
this.locationShow = false;
},
});
},
/*选中图片之后的回调函数*/
afterReadImgs(event) {
this.multipleUpload(this.$refs.uUploadMultiple.lists, 3)
},
// 多张图片上传
multipleUpload(event, type) {
let that = this;
let num = 3;
event.map(item => {
// if (num === event.length) {
// uni.showToast({
// title: '最多上传3张图片',
// icon: 'none'
// })
// return
// }
num += 1
if (item.file) {
that.uploadDo(item, type)
}
})
},
// 执行上传
uploadDo(event, type) {
console.log(event)
let that = this;
uni.uploadFile({
url: this.action,
filePath: event.file.path,
name: 'files', //对应后端上传key的名字
header: {
Authorization: uni.getStorageSync('accessToken')
},
success(res) {
let resp = JSON.parse(res.data)
if (resp && resp.status == 200) {
let obj = {
};
obj.url = that.imgUrl + resp.data[0].viewPath
that.fileList.push(obj)
that.$refs.uUploadMultiple.clear()
}
}
});
},
/*删除图片*/
deleteImgs(index, lists) {
console.log(index)
console.log(lists)
this.fileList.splice(index, 1)
console.log(this.fileList)
},
/*验证表单*/
getValidateVal() {
if (this.saveObj.lat == '') {
uni.showToast({
title: "请点击获取当前定位"
})
return false;
}
if (this.saveObj.address == '') {
uni.showToast({
title: "请完善地址"
})
return false;
}
if (this.saveObj.addressDetail == '') {
uni.showToast({
title: "请完善详细地址"
})
return false;
}
if (this.saveObj.communityName == '') {
uni.showToast({
title: "请完善小区名称"
})
return false;
}
// if (this.saveObj.carportFloor == '') {
// uni.showToast({
// title: "请完善车位楼层"
// })
// return false;
// }
// if (this.saveObj.noAndLocation == '') {
// uni.showToast({
// title: "请完善车位号"
// })
// return false;
// }
if (this.saveObj.imgUrl == '') {
uni.showToast({
title: "请至少上传一张车位照片"
})
return false;
}
return true;
},
}
}
</script>
<style lang="scss" scoped>
.contents {
padding-top: 40rpx;
padding-bottom: 30rpx;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.titleHead {
width: 100%;
height: 66rpx;
font-size: 48rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2D3748;
line-height: 66rpx;
margin: 0rpx 50rpx 0;
}
.content {
box-sizing: border-box;
padding: 0 50rpx 5rpx 50rpx;
display: flex;
flex: 1;
font-family: PingFangSC-Regular, PingFang SC;
margin-top: 46rpx;
flex-direction: column;
.card-itemA {
width: 650rpx;
height: 326rpx;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 60rpx;
overflow: hidden;
}
.card-itemB {
display: flex;
justify-content: space-between;
align-items: center;
margin: 48rpx 0;
.itemB-title {
font-size: 28rpx;
font-weight: 800;
color: #2D3748;
position: relative;
&::after {
content: '';
width: 10rpx;
height: 10rpx;
background: #1677FF;
border-radius: 50%;
position: absolute;
top: 50%;
left: 125rpx;
transform: translateY(-50%);
}
}
.itemB-loc {
font-size: 24rpx;
font-weight: 400;
color: #1677FF;
}
}
.card-itemC {
width: 650rpx;
// height: 774rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);
border-radius: 60rpx;
padding: 40rpx 44rpx 40rpx 50rpx;
font-family: PingFangSC-Regular, PingFang SC;
.inpStys {
font-weight: 400;
color: #2D3748;
font-size: 28rpx;
height: 240rpx;
width: 560rpx;
background: #EFEFEF;
border-radius: 26rpx;
overflow: hidden;
>view {
&:nth-child(1) {
padding: 28rpx 0rpx 0rpx 30rpx;
}
&:nth-child(2) {
padding: 30rpx;
}
}
}
.inpSty {
width: 560rpx;
height: 80rpx;
background: #EFEFEF;
border-radius: 26rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2D3748;
>view {
&:nth-child(2) {
width: 70%;
}
}
}
.mar-sty {
margin-bottom: 40rpx;
}
.mar-stys {
margin-bottom: 50rpx;
}
.card-title {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 800;
color: #2D3748;
position: relative;
&::after {
content: '';
width: 10rpx;
height: 10rpx;
background: #1677FF;
border-radius: 50%;
position: absolute;
top: 50%;
left: 125rpx;
transform: translateY(-50%);
}
}
.friend-type {
display: flex;
justify-content: space-between;
margin-top: 42rpx;
align-items: center;
>view {
width: 116rpx;
height: 44rpx;
background: rgba(128, 128, 128, 0.3);
border-radius: 24rpx;
color: #FFFFFF;
font-size: 24rpx;
text-align: center;
line-height: 44rpx;
}
.activeA {
background: #F5A623;
}
.activeB {
background: #0BBAB4;
}
.activeC {
background: #BB87F3;
}
}
.select {
display: flex;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 800;
color: #2D3748;
margin-top: 30rpx;
justify-content: space-between;
align-items: center;
height: 60rpx;
.checkbox-sty {
border: 1rpx solid #1677FF;
border-radius: 8rpx;
}
}
}
}
.slot-btn {
width: 204rpx;
height: 204rpx;
display: flex;
justify-content: center;
align-items: center;
background: #EFEFEF;
flex-direction: column;
align-items: center;
border-radius: 10rpx;
font-size: 14rpx;
font-weight: 400;
color: #1677FF;
line-height: 18rpx;
>view {
&:nth-child(1) {
width: 32rpx;
height: 32rpx;
background: url('../../static/picUpload.png');
background-size: 100% 100%;
margin-bottom: 20rpx;
}
}
}
.slot-btn__hover {
background-color: rgb(235, 236, 238);
}
.btn {
width: 560rpx;
margin: 40rpx auto 40rpx;
}
</style>
支付宝支付功能代码
/*支付宝支付套餐查询*/
getAlipay() {
let that = this;
that.$u.api.setServicePay({
corpNo: 'CO1524100773815',
userPhone: uni.getStorageSync('userPhone'),
packageId: this.currentPackage.packageId,
pileCode: this.userPackage.pileCode,
transactionChannel: '01',
return_code: 'SUCCESS',
return_msg: 'OK'
}).then(res => {
console.log(res.data)
my.tradePay({
// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
orderStr: res.data.aliBody,
success: (res) => {
that.getUserPackage()
that.show = false;
// uni.showToast({
// title: "支付成功"
// })
// 查询当前 桩权益成功购买 并可以领取积分
// that.getIntegralList();
},
fail: (res) => {
that.show = false;
// uni.showToast({
// title: "支付失败"
// })
}
});
})
},