@ -0,0 +1,70 @@ | |||||
function query(self, queryParams){ | |||||
// return (self.beforeGetData && self.beforeGetData()) || | |||||
// queryParams || self.queryParams | |||||
// 深度合并对象 | |||||
return self.$utils.deepMergeObject( | |||||
self.$utils.deepMergeObject(self.queryParams, | |||||
(self.beforeGetData && self.beforeGetData()) || {}), | |||||
queryParams) | |||||
} | |||||
export default { | |||||
data() { | |||||
return { | |||||
queryParams: { | |||||
pageNo: 1, | |||||
pageSize: 10, | |||||
}, | |||||
total : 0, | |||||
list : [], | |||||
} | |||||
}, | |||||
onPullDownRefresh() { | |||||
this.getData() | |||||
}, | |||||
onReachBottom() { | |||||
this.loadMoreData() | |||||
}, | |||||
onShow() { | |||||
this.getData() | |||||
}, | |||||
methods: { | |||||
getData(queryParams){ | |||||
return new Promise((success, error) => { | |||||
if(!this.mixinsListApi){ | |||||
return console.error('mixinsListApi 缺失'); | |||||
} | |||||
this.$api(this.mixinsListApi, | |||||
query(this, queryParams), res => { | |||||
uni.stopPullDownRefresh() | |||||
if(res.code == 200){ | |||||
this.getDataThen && this.getDataThen(res.result.records, res.result.total, res.result) | |||||
success(res.result) | |||||
this[this.mixinsListKey || 'list'] = res.result.records | |||||
this.total = res.result.total | |||||
} | |||||
}) | |||||
}) | |||||
}, | |||||
loadMoreData(){ | |||||
console.log('loadMoreData----', this.queryParams.pageSize < this.total); | |||||
if(this.queryParams.pageSize < this.total){ | |||||
this.queryParams.pageSize += 10 | |||||
this.getData() | |||||
} | |||||
}, | |||||
} | |||||
} |
@ -0,0 +1,98 @@ | |||||
export default { | |||||
methods: { | |||||
// 酒店支付订单 | |||||
payOrder(id){ | |||||
let self = this | |||||
this.$api('orderPay', { | |||||
id | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
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) { | |||||
self.getData() | |||||
}, | |||||
fail: function(err) { | |||||
console.log('支付失败', err); | |||||
// self.$refs.confirmationPopup.close() | |||||
uni.showToast({ | |||||
icon: 'none', | |||||
title: "支付失败" | |||||
}) | |||||
} | |||||
}); | |||||
} | |||||
}) | |||||
}, | |||||
// 确认收货 | |||||
confirmReceiveGoods(item) { | |||||
let self = this | |||||
uni.showModal({ | |||||
title: '您收到货了吗?', | |||||
success(res) { | |||||
if (res.confirm) { | |||||
self.$api('orderConfirm', { | |||||
id: item.id | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
self.getData() | |||||
} | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
// 水洗店确认接单 | |||||
orderConfirmAccept(item){ | |||||
let self = this | |||||
this.$api('orderConfirmAccept', { | |||||
id: item.id | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
uni.showToast({ | |||||
title: '接单成功', | |||||
icon: 'none' | |||||
}) | |||||
self.getData() | |||||
} | |||||
}) | |||||
}, | |||||
// 水洗店确认破损0无破损,1破损 | |||||
orderConfirmedDamage(item, flag){ | |||||
let self = this | |||||
this.$api('orderConfirmAccept', { | |||||
id: item.id, | |||||
flag, | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
uni.showToast({ | |||||
title: '上报成功', | |||||
icon: 'none' | |||||
}) | |||||
self.getData() | |||||
} | |||||
}) | |||||
}, | |||||
// 水洗店完成水洗 | |||||
orderFinishedWashing(item){ | |||||
let self = this | |||||
self.$api('orderConfirm', { | |||||
id: item.id | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
self.getData() | |||||
} | |||||
}) | |||||
}, | |||||
} | |||||
} |
@ -1,32 +1,249 @@ | |||||
<template> | <template> | ||||
<view class="page"> | <view class="page"> | ||||
<navbar title="我的租赁" leftClick @leftClick="$utils.navigateBack" /> | |||||
<navbar title="我的物品" leftClick @leftClick="$utils.navigateBack" /> | |||||
<!-- <view class="tabs"> | |||||
<uv-tabs :list="tabs" :activeStyle="{color : '#FD5100', fontWeight : 600}" lineColor="#FD5100" lineHeight="8rpx" | |||||
lineWidth="50rpx" :scrollable="false" @click="clickTabs"></uv-tabs> | |||||
</view> --> | |||||
<commoditySelect ref="commoditySelect"/> | <commoditySelect ref="commoditySelect"/> | ||||
<view class="btn fixed" @click="open"> | |||||
<button class="a">添加物品</button> | |||||
</view> | |||||
<uv-popup ref="addPopup" :round="30"> | |||||
<view class="form"> | |||||
<view class="shopName"> | |||||
<view>物品分类</view> | |||||
<view class="list"> | |||||
<view :class="{act : form.categoryId == item.id}" | |||||
@click="form.categoryId = item.id" | |||||
:key="index" | |||||
v-for="(item, index) in category"> | |||||
{{ item.name }} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="shopName"> | |||||
<view>物品照片</view> | |||||
<view> | |||||
<uv-upload :fileList="fileList" multiple :maxCount="1" width="180rpx" | |||||
height="180rpx" multiple @afterRead="afterRead" @delete="deleteImage"> | |||||
<image src="../static/help/uploading.png" mode="aspectFill" | |||||
style="width: 180rpx;height: 180rpx;" /> | |||||
</uv-upload> | |||||
</view> | |||||
</view> | |||||
<view class="shopName"> | |||||
<view>物品名称</view> | |||||
<view> | |||||
<input v-model="form.name" placeholder="请输入物品名称" clearable></input> | |||||
</view> | |||||
</view> | |||||
<view class="shopName"> | |||||
<view>物品长度CM</view> | |||||
<view> | |||||
<input v-model="form.length" type="number" placeholder="请输入物品长度" clearable></input> | |||||
</view> | |||||
</view> | |||||
<view class="shopName"> | |||||
<view>物品宽度CM</view> | |||||
<view> | |||||
<input v-model="form.wide" type="number" placeholder="请输入物品宽度" clearable></input> | |||||
</view> | |||||
</view> | |||||
<view class="shopName"> | |||||
<view>物品数量</view> | |||||
<view> | |||||
<uv-number-box v-model="form.num" :min="1"></uv-number-box> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="btn" @click="submit"> | |||||
<button class="a">添加</button> | |||||
</view> | |||||
</uv-popup> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import commoditySelect from "../components/commodity/commoditySelect.vue" | import commoditySelect from "../components/commodity/commoditySelect.vue" | ||||
import { mapState } from 'vuex' | |||||
export default { | export default { | ||||
components : { | components : { | ||||
commoditySelect, | commoditySelect, | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
tabs: [{ | |||||
name: '选择租赁物品' | |||||
}, | |||||
{ | |||||
name: '选择我的物品' | |||||
}, | |||||
], | |||||
form : { | |||||
categoryId : 0, | |||||
name : '', | |||||
num : 1, | |||||
length : '', | |||||
wide : '', | |||||
}, | |||||
fileList: [], | |||||
} | } | ||||
}, | }, | ||||
computed : { | |||||
...mapState(['category']), | |||||
}, | |||||
onShow() { | onShow() { | ||||
this.$refs.commoditySelect.getList() | this.$refs.commoditySelect.getList() | ||||
}, | }, | ||||
methods: { | methods: { | ||||
//点击tab栏 | |||||
clickTabs({ | |||||
index, | |||||
name | |||||
}) { | |||||
// this.type = index; | |||||
// this.queryParams.pageSize = 10 | |||||
// this.checkboxValue = [] | |||||
// this.mixinsListApi = ['orderPage', 'orderPage'][index] | |||||
}, | |||||
submit(){ | |||||
this.form.pic = this.fileList.map((item) => item.url).join(",") | |||||
if (this.$utils.verificationAll(this.form, { | |||||
pic : '请上传物品照片', | |||||
name : '请输入物品名称', | |||||
length : '请输入物品长度', | |||||
wide : '请输入物品宽度', | |||||
})) { | |||||
return | |||||
} | |||||
this.$api('tablecloth', this.form, res => { | |||||
if(res.code == 200){ | |||||
this.$refs.commoditySelect.getList() | |||||
this.$refs.addPopup.close() | |||||
} | |||||
}) | |||||
}, | |||||
open(){ | |||||
this.form = { | |||||
categoryId : 0, | |||||
name : '', | |||||
num : 1, | |||||
length : '', | |||||
wide : '', | |||||
} | |||||
if(this.category.length){ | |||||
this.form.categoryId = this.category[0].id | |||||
} | |||||
this.$refs.addPopup.open('bottom') | |||||
}, | |||||
deleteImage(e){ | |||||
this.fileList.splice(e.index, 1) | |||||
}, | |||||
afterRead(e){ | |||||
let self = this | |||||
e.file.forEach(file => { | |||||
self.$Oss.ossUpload(file.url).then(url => { | |||||
self.fileList.push({ | |||||
url | |||||
}) | |||||
}) | |||||
}) | |||||
}, | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.page{ | .page{ | ||||
padding-bottom: 200rpx; | |||||
.tabs{ | |||||
position: sticky; | |||||
top: calc(var(--status-bar-height) + 120rpx); | |||||
background-color: #fff; | |||||
// padding-top: 20rpx; | |||||
} | |||||
.fixed{ | |||||
position: fixed; | |||||
bottom: 20rpx; | |||||
} | |||||
.btn { | |||||
display: flex; | |||||
justify-content: center; | |||||
width: 100%; | |||||
.a { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 90%; | |||||
height: 100rpx; | |||||
color: #FFF; | |||||
background-color: $uni-color; | |||||
border: 1px solid red; | |||||
border-radius: 100rpx; | |||||
font-size: 30rpx; | |||||
} | |||||
} | |||||
.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; | |||||
background-color: #F3F3F3; | |||||
border: 1px solid #F3F3F3; | |||||
margin: 10rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
padding: 10rpx 20rpx; | |||||
} | |||||
} | |||||
.form{ | |||||
padding: 20rpx 0; | |||||
.shopName { | |||||
display: flex; | |||||
align-items: center; | |||||
background-color: #FFF; | |||||
margin: 10rpx 0 0 0; | |||||
padding: 10rpx 20rpx; | |||||
>view:nth-of-type(1) { | |||||
width: 30%; | |||||
// font-weight: 700; | |||||
} | |||||
>view:nth-of-type(2) { | |||||
width: 70%; | |||||
// padding: 0 20rpx 0 0; | |||||
border-radius: 10rpx; | |||||
overflow: hidden; | |||||
input { | |||||
background-color: #f5f5f5; | |||||
// color: #a4a4a4; | |||||
font-size: 28rpx; | |||||
padding: 8rpx 8rpx 8rpx 15rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | } | ||||
</style> | </style> |
@ -0,0 +1,448 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<navbar title="我要水洗" leftClick @leftClick="$utils.navigateBack" /> | |||||
<view class="tabs"> | |||||
<uv-tabs :list="tabs" :activeStyle="{color : '#FD5100', fontWeight : 600}" lineColor="#FD5100" lineHeight="8rpx" | |||||
lineWidth="50rpx" :scrollable="false" @click="clickTabs"></uv-tabs> | |||||
</view> | |||||
<!-- 选择租赁物品 --> | |||||
<view class="box d"> | |||||
<uv-checkbox-group shape="circle" v-model="checkboxValue" | |||||
> | |||||
<view v-for="(item, index) in list" :key="index" class="item"> | |||||
<view class="checkbox"> | |||||
<uv-checkbox :name="item.id" :disabled="item.status != 0 || !item.startTime && item.leaseFlag" activeColor="#FA5A0A" size="40rpx" icon-size="35rpx"></uv-checkbox> | |||||
</view> | |||||
<image class="image" :src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" | |||||
mode=""></image> | |||||
<view class="info"> | |||||
<view class="title"> | |||||
<view>{{ item.goodsName }}</view> | |||||
<view> | |||||
<!-- <uv-number-box v-model="item.num" @change="e => valChange(item, e)"></uv-number-box> --> | |||||
数量:{{ item.num }} | |||||
</view> | |||||
</view> | |||||
<view class="unit"> | |||||
规格:{{ item.sku }} | |||||
<!-- <uv-icon name="arrow-down"></uv-icon> --> | |||||
</view> | |||||
<view class="wan" | |||||
v-if="!item.startTime | |||||
&& item.leaseFlag | |||||
&& item.status == 0"> | |||||
确认收货后,方可水洗 | |||||
</view> | |||||
<view class="wan" v-else-if="item.status != 0"> | |||||
{{ statusText[item.status] }} | |||||
</view> | |||||
<view class="price" v-else> | |||||
<view class="" v-if="item.zujin"> | |||||
租金¥ | |||||
<text>{{ item.zujin }}</text> | |||||
元 | |||||
</view> | |||||
<view class="" v-if="item.washPrice"> | |||||
水洗费¥ | |||||
<text>{{ item.washPrice }}</text> | |||||
元 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</uv-checkbox-group> | |||||
</view> | |||||
<!-- 地址弹框 --> | |||||
<uv-popup ref="addressPopup" :round="30"> | |||||
<addressList ref="addressList" height="60vh" @select="selectAddress" /> | |||||
</uv-popup> | |||||
<!-- <view class="btn" @click="submit"> | |||||
<button class="a">水洗下单<text v-if="price">({{price}}¥)</text></button> | |||||
</view> --> | |||||
<view class="action"> | |||||
<view class="icon"> | |||||
<image src="/static/image/cart/1.png" mode=""></image> | |||||
<view class="num">{{ checkboxValue.length }}</view> | |||||
</view> | |||||
<view class="price"> | |||||
<view class="count"> | |||||
合计 | |||||
<view> | |||||
¥ | |||||
<text>{{ price }}</text> | |||||
</view> | |||||
</view> | |||||
<view class="text"> | |||||
<!-- 共{{ checkboxValue.length }}件,已享受更低优惠 --> | |||||
含租金{{zujin}}¥,水洗费{{washPrice}}¥ | |||||
</view> | |||||
</view> | |||||
<view class="btn2" @click="goCleaning">结算</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import mixinsList from '@/mixins/list.js' | |||||
import addressList from '@/components/address/addressList.vue' | |||||
export default { | |||||
mixins : [mixinsList], | |||||
components: { | |||||
addressList, | |||||
}, | |||||
data() { | |||||
return { | |||||
checkboxValue : [], | |||||
statusText : ['正常', '换货中', '退货中'], | |||||
tabs: [{ | |||||
name: '选择租赁物品' | |||||
}, | |||||
{ | |||||
name: '选择我的物品' | |||||
}, | |||||
], | |||||
type: 1, | |||||
mixinsListApi : 'getLeasePage', | |||||
addressTotal: 0, | |||||
address: { | |||||
name: '请选择联系人', | |||||
addressDetail: '' | |||||
}, | |||||
} | |||||
}, | |||||
computed : { | |||||
price(){ | |||||
return this.washPrice + this.zujin | |||||
}, | |||||
washPrice(){ | |||||
if(this.checkboxValue.length == 0){ | |||||
return 0 | |||||
} | |||||
let price = 0 | |||||
this.list.forEach(n => { | |||||
if(this.checkboxValue.includes(n.id)){ | |||||
price += n.washPrice || 0 | |||||
} | |||||
}) | |||||
return price | |||||
}, | |||||
zujin(){ | |||||
if(this.checkboxValue.length == 0){ | |||||
return 0 | |||||
} | |||||
let price = 0 | |||||
this.list.forEach(n => { | |||||
if(this.checkboxValue.includes(n.id)){ | |||||
price += n.zujin || 0 | |||||
} | |||||
}) | |||||
return price | |||||
}, | |||||
}, | |||||
onShow() { | |||||
this.getData() | |||||
this.getAddressListA() | |||||
}, | |||||
methods: { | |||||
//点击tab栏 | |||||
clickTabs({ | |||||
index, | |||||
name | |||||
}) { | |||||
this.type = index ? 0 : 1; | |||||
this.queryParams.pageSize = 10 | |||||
this.checkboxValue = [] | |||||
// this.mixinsListApi = ['orderPage', 'orderPage'][index] | |||||
this.getData() | |||||
}, | |||||
// 发请求之前处理参数 | |||||
beforeGetData(){ | |||||
let data = {} | |||||
data.leaseFlag = this.type | |||||
return data | |||||
}, | |||||
// getDataThen(list){ | |||||
// list[0] && list[0].d = true | |||||
// }, | |||||
// 去结算按钮 | |||||
goCleaning() { | |||||
if (this.checkboxValue.length < 1) { | |||||
uni.showToast({ | |||||
title: "请勾选商品", | |||||
icon: 'none' | |||||
}) | |||||
return | |||||
} | |||||
if (this.addressTotal == 0) { | |||||
return uni.navigateTo({ | |||||
url: '/pages_order/mine/address?type=back' | |||||
}) | |||||
} | |||||
// 打开地址弹框 | |||||
this.$refs.addressPopup.open('bottom') | |||||
},// 选择地址 | |||||
selectAddress(e) { | |||||
this.address = e | |||||
this.$refs.addressPopup.close() | |||||
this.ordersPay() | |||||
}, | |||||
// 获取地址列表 | |||||
getAddressListA() { | |||||
this.$refs.addressList.getAddressList().then(res => { | |||||
this.addressTotal = res.total | |||||
if (this.addressTotal != 0) { | |||||
this.address = res.records[0] | |||||
} | |||||
}) | |||||
}, | |||||
//商品下单 | |||||
ordersPay() { | |||||
var self = this | |||||
// var deleteCartIds = this.checkboxValue.join(",") //待删除的购物车id | |||||
let data = [] | |||||
let records = this.list | |||||
for (var i = 0; i < records.length; i++) { | |||||
if (this.checkboxValue.includes(records[i].id)) { | |||||
data.push({ | |||||
leaseId: records[i].id, //租赁id | |||||
addressId: this.address.id, //地址id | |||||
type : 1, | |||||
}) | |||||
} | |||||
} | |||||
this.$api('orderCreate', { | |||||
req: JSON.stringify(data) | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
let form = { | |||||
id: res.result.id | |||||
} | |||||
// 不管有没有支付,都要清除购物车数据 | |||||
// self.$api('cartDel', { | |||||
// id: deleteCartIds | |||||
// }, res => { | |||||
// if (res.code == 200) { | |||||
// self.getData() | |||||
// } | |||||
// }) | |||||
this.$api('orderPay', form, res => { | |||||
if (res.code == 200) { | |||||
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); | |||||
// self.$refs.confirmationPopup.close() | |||||
uni.showToast({ | |||||
icon: 'none', | |||||
title: "支付失败" | |||||
}) | |||||
} | |||||
}); | |||||
} | |||||
}) | |||||
} | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.page { | |||||
padding-bottom: 200rpx; | |||||
.tabs{ | |||||
position: sticky; | |||||
top: calc(var(--status-bar-height) + 120rpx); | |||||
background-color: #fff; | |||||
// padding-top: 20rpx; | |||||
} | |||||
.btn { | |||||
display: flex; | |||||
justify-content: center; | |||||
position: fixed; | |||||
bottom: 20rpx; | |||||
width: 100%; | |||||
.a { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 70%; | |||||
height: 100rpx; | |||||
color: #FFF; | |||||
background-color: $uni-color; | |||||
border: 1px solid red; | |||||
border-radius: 100rpx; | |||||
font-size: 30rpx; | |||||
} | |||||
} | |||||
.d{ | |||||
.item { | |||||
background-color: #fff; | |||||
display: flex; | |||||
padding: 30rpx; | |||||
width: 690rpx; | |||||
.checkbox { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.image { | |||||
width: 200rpx; | |||||
height: 200rpx; | |||||
border-radius: 20rpx; | |||||
} | |||||
.info { | |||||
flex: 1; | |||||
.title { | |||||
display: flex; | |||||
padding: 10rpx 20rpx; | |||||
justify-content: space-between; | |||||
} | |||||
.unit { | |||||
font-size: 24rpx; | |||||
padding: 10rpx 20rpx; | |||||
color: #717171; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.price { | |||||
color: $uni-color; | |||||
font-size: 24rpx; | |||||
padding: 10rpx 20rpx; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
text { | |||||
font-weight: 900; | |||||
} | |||||
} | |||||
.wan{ | |||||
color: $uni-color; | |||||
font-size: 26rpx; | |||||
padding: 10rpx 20rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.action { | |||||
width: 700rpx; | |||||
position: fixed; | |||||
bottom: 20rpx; | |||||
left: 25rpx; | |||||
background-color: #fff; | |||||
height: 130rpx; | |||||
border-radius: 65rpx; | |||||
box-shadow: 0 0 6rpx 6rpx #00000010; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
overflow: hidden; | |||||
.icon { | |||||
position: relative; | |||||
width: 80rpx; | |||||
height: 80rpx; | |||||
margin: 0 20rpx; | |||||
image { | |||||
width: 80rpx; | |||||
height: 80rpx; | |||||
} | |||||
.num { | |||||
position: absolute; | |||||
right: 10rpx; | |||||
top: 0rpx; | |||||
background-color: $uni-color; | |||||
color: #fff; | |||||
font-size: 18rpx; | |||||
border-radius: 50%; | |||||
height: 30rpx; | |||||
width: 30rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
} | |||||
.price { | |||||
.count { | |||||
display: flex; | |||||
font-size: 26rpx; | |||||
align-items: center; | |||||
view { | |||||
color: $uni-color; | |||||
margin-left: 10rpx; | |||||
text { | |||||
font-size: 32rpx; | |||||
font-weight: 900; | |||||
} | |||||
} | |||||
} | |||||
.text { | |||||
font-size: 22rpx; | |||||
color: #717171; | |||||
} | |||||
} | |||||
.btn2 { | |||||
margin-left: auto; | |||||
background-color: $uni-color; | |||||
height: 100%; | |||||
padding: 0 50rpx; | |||||
color: #fff; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,129 @@ | |||||
<template> | |||||
<!-- 破损上报 --> | |||||
<view class="help"> | |||||
<navbar title="破损上报" leftClick @leftClick="$utils.navigateBack" /> | |||||
<view class="help-box"> | |||||
<view> | |||||
<!-- <view class="help-issue"> | |||||
<text>问题和意见</text> | |||||
<text style="color: #BD3624;">*</text> | |||||
</view> --> | |||||
<uv-textarea v-model="value" :count="true" border="none" height="400" | |||||
placeholder="请输入破损的细节部位....." | |||||
:text-style="{color:'#000',fontSize:'28rpx'}" /> | |||||
</view> | |||||
<view> | |||||
<view class="help-issue"> | |||||
<text>上传图片</text> | |||||
<text style="color: #BD3624;">*</text> | |||||
</view> | |||||
<view class="help-screenshot"> | |||||
<uv-upload :fileList="fileList" multiple :maxCount="6" width="180rpx" | |||||
height="180rpx" multiple @afterRead="afterRead" @delete="deleteImage"> | |||||
<image src="../static/help/uploading.png" mode="aspectFill" | |||||
style="width: 180rpx;height: 180rpx;" /> | |||||
</uv-upload> | |||||
</view> | |||||
</view> | |||||
<!-- <view> | |||||
<view class="help-issue"> | |||||
<text>联系方式</text> | |||||
<text style="color: #BD3624;">*</text> | |||||
</view> | |||||
<uv-input placeholder="请输入联系方式" fontSize="24rpx" border="bottom" | |||||
:custom-style="{backgroundColor: '#fff'}"> | |||||
<template #prefix> | |||||
<uv-text text="联系姓名" size="24rpx" margin="20rpx 10rpx 20rpx 10rpx" /> | |||||
</template> | |||||
</uv-input> | |||||
<uv-input placeholder="请输入联系姓名" border="none" fontSize="24rpx" | |||||
:custom-style="{backgroundColor: '#fff'}"> | |||||
<template #prefix> | |||||
<uv-text text="联系方式" size="24rpx" margin="20rpx 10rpx 20rpx 10rpx" /> | |||||
</template> | |||||
</uv-input> | |||||
</view> --> | |||||
<view class="help-button"> | |||||
<view>提交审核</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
value: "", | |||||
fileList: [] | |||||
} | |||||
}, | |||||
onLoad(args) { | |||||
}, | |||||
methods: { | |||||
deleteImage(e){ | |||||
this.fileList.splice(e.index, 1) | |||||
}, | |||||
afterRead(e){ | |||||
let self = this | |||||
e.file.forEach(file => { | |||||
self.$Oss.ossUpload(file.url).then(url => { | |||||
self.fileList.push({ | |||||
url | |||||
}) | |||||
}) | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.help { | |||||
.help-box { | |||||
width: 92%; | |||||
margin-left: 4%; | |||||
.help-issue { | |||||
margin: 20rpx; | |||||
font-size: 28rpx; | |||||
font-weight: 600; | |||||
color: #000; | |||||
} | |||||
.help-screenshot { | |||||
display: flex; | |||||
align-items: center; | |||||
background-color: #fff; | |||||
padding: 20rpx; | |||||
} | |||||
.help-button { | |||||
display: flex; | |||||
justify-content: center; | |||||
font-size: 24rpx; | |||||
flex-shrink: 0; | |||||
margin-top: 60rpx; | |||||
view { | |||||
padding: 14rpx 120rpx; | |||||
border-radius: 38rpx; | |||||
} | |||||
view:nth-child(1) { | |||||
background: $uni-color; | |||||
color: #fff; | |||||
} | |||||
view:nth-child(2) { | |||||
color: #FFFDF6; | |||||
background-color: #C83741; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |