| @ -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> | |||||