|
|
@@ -1,40 +1,50 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="cart_nav acea-row">
|
|
|
- <!-- #ifdef MP-->
|
|
|
- <view class="mp-header" :style="{top: navH + 'rpx'}">
|
|
|
- <view class="flex-col flex-center" style="background-color: #fff;">
|
|
|
- <view class="flex-y-center" style="justify-content: space-between;padding: 20rpx 19rpx 38rpx 19rpx;width: 100%;">
|
|
|
- <view style="opacity: 0;">1</view>
|
|
|
- <view style="font-weight: 600;font-size: 27rpx;color: #141414;">快递单号</view>
|
|
|
- <image style="width: 39rpx;height: 39rpx;" src="/static/img/chacha.png" @tap="onCancel"></image>
|
|
|
- </view>
|
|
|
- <!-- <view class="search acea-row row-middle">
|
|
|
- <text class="iconfont icon-ic_search" style="margin-right: 10rpx;"></text>
|
|
|
- <input class="inputs" placeholder='搜索快递公司' placeholder-class='placeholder' placeholder-style="font-size:28rpx"
|
|
|
- @confirm="handleSearch"></input>
|
|
|
+ <view :data-theme="theme">
|
|
|
+ <view class="cart_nav acea-row">
|
|
|
+ <view class="mp-header" :style="{top: navH + 'rpx'}">
|
|
|
+ <view class="flex-col flex-center" style="background-color: #fff;">
|
|
|
+ <view class="flex-y-center" style="justify-content: space-between;padding: 20rpx 19rpx 38rpx 19rpx;width: 100%;">
|
|
|
+ <view style="opacity: 0;">1</view>
|
|
|
+ <image style="width: 39rpx;height: 39rpx;" src="/static/img/chacha.png" @tap="onCancel"></image>
|
|
|
+ </view>
|
|
|
+ <form @submit="submitForm" report-submit='true'>
|
|
|
+ <view class='apply-return'>
|
|
|
+ <view class='list borRadius14'>
|
|
|
+ <view v-if="expressAll.length" class='item acea-row row-between-wrapper'>
|
|
|
+ <view>物流公司</view>
|
|
|
+ <view class="picker">
|
|
|
+ <picker @change="bindExpressChange" :value="expressIndex" :range="expressAll"
|
|
|
+ range-key="name">
|
|
|
+ <view class="picker-box">
|
|
|
+ {{expressAll[expressIndex].name}}
|
|
|
+ <text class="iconfont icon-jiantou"></text>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <scroll-view scroll-y="true" style="height: 300rpx;margin: 20rpx 0;">
|
|
|
- <view class='loadingicon flex-center' v-if='loading'>
|
|
|
- <text class='loading iconfont icon-jiazai' style="width: auto;"></text>
|
|
|
+ <view class='item acea-row row-between-wrapper'>
|
|
|
+ <view>物流单号</view>
|
|
|
+ <view class="text-right">
|
|
|
+ <input type='text' placeholder='请输入物流单号' placeholder-style="color:#ccc;"
|
|
|
+ name='trackingNumber' :value="trackingNumber" placeholder-class='placeholder'
|
|
|
+ maxlength="30"></input>
|
|
|
</view>
|
|
|
- <view v-else class="exp-item flex-center" v-for="(item, index) in filteredList" :key="index"
|
|
|
- @tap="companyName = item.name,expressObj.companyObj = item">
|
|
|
- {{ item.name }}
|
|
|
+ </view>
|
|
|
+ <view class='item acea-row row-between-wrapper no-border'>
|
|
|
+ <view>联系电话</view>
|
|
|
+ <view class="text-right">
|
|
|
+ <input type='text' placeholder='请输入联系电话' placeholder-style="color:#ccc;" name='telephone'
|
|
|
+ :value="telephone" placeholder-class='placeholder' maxlength="11"></input>
|
|
|
</view>
|
|
|
- </scroll-view> -->
|
|
|
- <!-- <view class="flex-y-center" style="padding: 0 28rpx;"> -->
|
|
|
- <view class="flex-y-center" style="margin-bottom: 20rpx;">
|
|
|
- 快递公司：<input class="search" type="text" v-model="expressObj.companyName" placeholder="请输入快递公司" />
|
|
|
</view>
|
|
|
- <view class="flex-y-center">
|
|
|
- 快递单号：<input class="search" type="text" v-model="expressObj.odd" placeholder="请输入快递单号" />
|
|
|
+ <view class="">
|
|
|
+ <button class='returnBnt bg_color sub' form-type="submit">确定</button>
|
|
|
</view>
|
|
|
- <!-- </view> -->
|
|
|
- <button class="sub flex-center" @tap="onSure">确定</button>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- #endif -->
|
|
|
+ </view>
|
|
|
+ </form>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -55,17 +65,22 @@
|
|
|
import {
|
|
|
expressAllApi
|
|
|
} from '@/api/order.js';
|
|
|
+ import {
|
|
|
+ Debounce
|
|
|
+ } from '@/utils/validate.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
navH: '',
|
|
|
+ expressIndex: 0,
|
|
|
tipIndex: 1,
|
|
|
tipValue: 1,
|
|
|
loading: false,
|
|
|
list: [], // 原始数据列表
|
|
|
filteredList: [], // 过滤后的数据列表
|
|
|
companyName: '',
|
|
|
- expressObj: {}
|
|
|
+ expressObj: {},
|
|
|
+ expressAll: [],
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -81,6 +96,11 @@
|
|
|
// #ifdef H5
|
|
|
this.navH = 80;
|
|
|
// #endif
|
|
|
+ if (!this.$Cache.get('expressListAll')) {
|
|
|
+ this.getExpressAll();
|
|
|
+ } else {
|
|
|
+ this.expressAll = JSON.parse(this.$Cache.get('expressListAll'))
|
|
|
+ }
|
|
|
// this.getExpressAll()
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -96,20 +116,50 @@
|
|
|
onCancel() {
|
|
|
this.$emit('onCancel', false)
|
|
|
},
|
|
|
+
|
|
|
+ //提交
|
|
|
+ submitForm: Debounce(function(e) {
|
|
|
+ let that = this,
|
|
|
+ data = {},
|
|
|
+ value = e.detail.value;
|
|
|
+ if (!value.trackingNumber) return that.$util.Tips({
|
|
|
+ title: '请填写物流单号'
|
|
|
+ });
|
|
|
+ // if (!value.telephone) return that.$util.Tips({
|
|
|
+ // title: '请填写联系电话'
|
|
|
+ // });
|
|
|
+ // if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.telephone)) return that.$util.Tips({
|
|
|
+ // title: '请输入正确的手机号码'
|
|
|
+ // });
|
|
|
+ uni.showLoading({
|
|
|
+ title: '处理中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ this.expressObj={
|
|
|
+ companyName: that.expressAll[that.expressIndex].name,
|
|
|
+ odd: value.trackingNumber,
|
|
|
+ telephone: value.telephone,
|
|
|
+ }
|
|
|
+ this.$emit('expressObj', this.expressObj)
|
|
|
+ uni.hideLoading();
|
|
|
+ }),
|
|
|
+
|
|
|
+
|
|
|
//物流公司
|
|
|
getExpressAll() {
|
|
|
- this.loading = true
|
|
|
expressAllApi().then(res => {
|
|
|
- this.list = res.data;
|
|
|
- this.filteredList = res.data
|
|
|
- this.loading = false
|
|
|
+ this.$set(this, 'expressAll', res.data);
|
|
|
+ this.$Cache.set('expressListAll', res.data)
|
|
|
}).catch(err => {
|
|
|
return this.$util.Tips({
|
|
|
title: err
|
|
|
});
|
|
|
- this.loading = false
|
|
|
})
|
|
|
},
|
|
|
+ //选择物流公司
|
|
|
+ bindExpressChange(e) {
|
|
|
+ this.expressIndex = e.target.value;
|
|
|
+ },
|
|
|
handleSearch(e) {
|
|
|
this.loading = true
|
|
|
const query = e.target.value.toLowerCase();
|
|
|
@@ -178,4 +228,91 @@
|
|
|
color: #FFFFFF;
|
|
|
margin: 58rpx 0 96rpx 0;
|
|
|
}
|
|
|
+ .addressDetail {
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-right {
|
|
|
+ width: 480rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 76rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ border-radius: 34rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 34rpx;
|
|
|
+ color: #666666;
|
|
|
+ border-radius: 17rpx;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &.copy {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodsStyle {
|
|
|
+ .text {
|
|
|
+ .name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-jiantou {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #BBBBBB;
|
|
|
+ }
|
|
|
+
|
|
|
+ .apply-return {
|
|
|
+ padding: 20rpx 24rpx 30rpx 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .apply-return .list {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .apply-return .list .item {
|
|
|
+ min-height: 90rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #282828;
|
|
|
+ }
|
|
|
+
|
|
|
+ .apply-return .list .item .num {
|
|
|
+ color: #282828;
|
|
|
+ width: 427rpx;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .apply-return .list .item .num .picker .iconfont {
|
|
|
+ color: #666;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 2rpx;
|
|
|
+ }
|
|
|
+ .returnBntBox{
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ }
|
|
|
+ .apply-return .returnBnt {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 86rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 86rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg_color {
|
|
|
+ @include main_bg_color(theme);
|
|
|
+ }
|
|
|
</style>
|
