123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471 |
- <!-- 填写物流单号页面 -->
- <template>
- <view class="select_service">
- <view class="order_goods">
- <view class="goods_list">
- <view class="goods_pre">
- <view class="goods_image">
- <image :src="allData.productImage" mode="aspectFit"></image>
- </view>
- <view class="goods_pre_right">
- <view class="goods_des">
- <view class="goods_name">{{allData.goodsName}}</view>
- <view class="goods_spec" v-if="allData.specValues">{{allData.specValues}}</view>
- </view>
- <view class="goods_prices">
- <view class="goods_price">
- <text class="unit">¥</text>
- <text class="price_int">{{$getPartNumber(allData.productShowPrice,'int')}}</text>
- <text class="price_decimal">{{$getPartNumber(allData.productShowPrice,'decimal')}}</text>
- </view>
- <view class="goods_num">*{{allData.returnNum}}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="logistics_des">
- <view class="logistics_pre">
- <view class="logistics_pre_left">
- <text>*</text>
- <text>{{$L('物流单号')}}:</text>
- </view>
- <view class="logistics_pre_right">
- <input type="text" v-model="logisticsBillNo" :placeholder="$L('请填写物流单号')" maxlength="20"/>
- </view>
- </view>
- <view class="logistics_pre">
- <view class="logistics_pre_left">
- <text>*</text>
- <text>{{$L('物流公司')}}:</text>
- </view>
- <view class="logistics_pre_right" @click="goLogisticsCompany">
- <text>{{logisticsCompanyData.expressName ? logisticsCompanyData.expressName : '请选择物流公司'}}</text>
- <image :src="imgUrl+'order-detail/to_right.png'" mode="aspectFit"></image>
- </view>
- </view>
- <!-- <view class="logistics_pre">
- <view class="logistics_pre_left">
- <text>*</text>
- <text>联系电话:</text>
- </view>
- <view class="logistics_pre_right">
- <input type="text" :value="contactNumber" placeholder="请输入联系电话" @input="getContactNumber"/>
- </view>
- </view> -->
- </view>
- <view class="submit_txt" @click="submitLogistics">{{$L('提交')}}</view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- import recommendGoods from "@/components/recommend-goods.vue";
- import uniPopup from '@/components/uni-popup/uni-popup.vue';
- import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
- import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
- let startY = 0,
- moveY = 0,
- pageAtTop = true;
- export default {
- components: {
- recommendGoods,
- uniPopup,
- uniPopupMessage,
- uniPopupDialog
- },
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- coverTransform: 'translateY(0px)',
- coverTransition: '0s',
- moving: false,
- afsSn:'', //退款单号
- allData:{}, //订单详细信息
- orderProductList:[], //订单商品列表
- logisticsBillNo:'', //物流单号
- contactNumber:'', //联系电话
- expressId:'', //物流公司的id
- logisticsCompanyData:{}, //物流公司的信息
- }
- },
- async onLoad(option) {
- //退款单号
- this.afsSn = option.afsSn;
- this.initData();
- this.getOrderDetail();
- },
- onShow:function(){
- let that = this;
- let pages = getCurrentPages();
- let currPage = pages[pages.length - 1]; //当前页面
- let res = currPage.logisticsCompanyData; //下一个页面传过来的值
- // that.logisticsCompanyData = res || {};
- },
- // #ifndef MP
- onNavigationBarButtonTap(e) {
- const index = e.index;
- if (index === 0) {
- this.navTo('/pages/set/set');
- } else if (index === 1) {
- // #ifdef APP-PLUS
- const pages = getCurrentPages();
- const page = pages[pages.length - 1];
- const currentWebview = page.$getAppWebview();
- currentWebview.hideTitleNViewButtonRedDot({
- index
- });
- // #endif
- uni.navigateTo({
- url: '/pages/notice/notice'
- })
- }
- },
- // #endif
- computed: {
- ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
- },
- methods: {
- initData() {
- },
-
- /**
- * 统一跳转接口,拦截未登录路由
- * navigator标签现在默认没有转场动画,所以用view
- */
- navTo(url) {
- if (!this.hasLogin) {
- url = '/pages/public/login';
- }
- uni.navigateTo({
- url
- })
- },
- /**
- * 会员卡下拉和回弹
- * 1.关闭bounce避免ios端下拉冲突
- * 2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉
- * transition设置0.1秒延迟,让css来过渡这段空窗期
- * 3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-bezier.com/
- */
- coverTouchstart(e) {
- if (pageAtTop === false) {
- return;
- }
- this.coverTransition = 'transform .1s linear';
- startY = e.touches[0].clientY;
- },
- coverTouchmove(e) {
- moveY = e.touches[0].clientY;
- let moveDistance = moveY - startY;
- if (moveDistance < 0) {
- this.moving = false;
- return;
- }
- this.moving = true;
- if (moveDistance >= 80 && moveDistance < 100) {
- moveDistance = 80;
- }
- if (moveDistance > 0 && moveDistance <= 80) {
- this.coverTransform = `translateY(${moveDistance}px)`;
- }
- },
- coverTouchend() {
- if (this.moving === false) {
- return;
- }
- this.moving = false;
- this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
- this.coverTransform = 'translateY(0px)';
- },
- //获取订单详情信息
- getOrderDetail(){
- let that = this;
- let param = {};
- param.url = 'v3/business/front/after/sale/detail';
- param.method = 'GET';
- param.data = {};
- param.data.afsSn = that.afsSn;
- that.$request(param).then(res => {
- if (res.state == 200) {
- let result = res.data;
- that.orderProductList = result.orderProductList;
- that.allData = result || {};
- that.loadFlag = true;
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //获取输入物流单号的值
- // logisticsBill(e){
- // let that = this;
- // that.logisticsBillNo = e.detail.value;
- // },
- //获取联系电话
- getContactNumber(e){
- let that = this;
- that.contactNumber = e.detail.value;
- },
- //去物流公司页面
- goLogisticsCompany(){
- uni.navigateTo({
- url:'/pages/order/logisticsCompany'
- })
- },
- //电话号的校验
- validateTel(tel){//校验电话
- if(tel!=""){
- var strRegex = /^(13|14|15|17|18)\d{9}$/;
- if(!strRegex.test(tel)){
- return false;
- }
- }
- return true;
- },
- //提交物流信息
- submitLogistics(){
- let that = this;
- let isValidate = that.validateTel(that.contactNumber);
- if(that.logisticsBillNo == ''){
- that.$api.msg('请填写物流单号');
- return
- }
- let reg = /^[0-9a-zA-Z]{1,20}$/g;
- if(!reg.test(that.logisticsBillNo)){
- uni.showToast({
- title:'请输入正确的物流单号!',
- icon:"none"
- });
- return
- }
- if(JSON.stringify(that.logisticsCompanyData) == '{}' || that.logisticsCompanyData == {}){
- that.$api.msg('请选择物流公司');
- return
- }
- // else if(that.contactNumber == ''){
- // that.$api.msg('请填写联系电话');
- // }else if(that.contactNumber != '' && isValidate == false){
- // that.$api.msg('联系电话格式有误!');
- // }
- let param = {};
- param.url = 'v3/business/front/after/sale/deliverGoods';
- param.method = 'POST';
- param.data = {};
- param.data.afsSn = that.afsSn; //售后服务单号
- param.data.expressId = that.logisticsCompanyData.expressId; //物流公司的id
- param.data.logisticsNumber = that.logisticsBillNo; //快递单号
- // param.data.contactPhone = that.contactNumber; //联系电话
- that.$request(param).then(res => {
- if (res.state == 200) {
- that.$api.msg(res.msg);
- let pages = getCurrentPages();
- let beforePage = pages[pages.length -2]; //上一页
- beforePage.$vm.getOrderDetail(); //更新上一页数据 售后订单详情页面
- uni.navigateBack({
- delta:1
- })
- } else {
- that.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- }
- }
- </script>
- <style lang='scss'>
- page {
- background: $bg-color-split;
- }
- .select_service{
- width: 750rpx;
- margin: 0 auto;
- background: #F5F5F5;
- .order_goods{
- border-top: 20rpx solid #F5F5F5;
- background-color: #FFFFFF;
- .goods_list{
- padding: 20rpx 0;
- .goods_pre{
- display: flex;
- padding: 0 20rpx;
- box-sizing: border-box;
- .goods_image{
- width: 200rpx;
- height: 200rpx;
- background: #F3F3F3;
- border-radius: 14px;
- image{
- width: 200rpx;
- height: 200rpx;
- border-radius: 14rpx;
- }
- }
- .goods_pre_right{
- display: flex;
- justify-content: space-between;
- width: 585rpx;
- .goods_des{
- margin-left: 25rpx;
- padding-top: 8rpx;
- box-sizing: border-box;
- .goods_name{
- width: 340rpx;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #343434;
- line-height: 39rpx;
- text-overflow: -o-ellipsis-lastline;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .goods_spec{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 400;
- color: #949494;
- line-height: 30rpx;
- margin-top: 20rpx;
- }
- }
- .goods_prices{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-end;
- .goods_price{
- text{
- display: inline-block;
- font-family: PingFang SC;
- font-weight: 500;
- color: #343434;
- line-height: 30rpx;
- }
- .unit{
- font-size: 24rpx;
- }
- .price_int{
- font-size: 32rpx;
- }
- .price_decimal{
- font-size: 24rpx;
- }
- }
- }
- .goods_num{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #2D2D2D;
- line-height: 30rpx;
- }
- .refund_btn{
- padding: 12rpx 15rpx;
- box-sizing: border-box;
- border: 1rpx solid #2D2D2D;
- border-radius: 25rpx;
- font-size: 26rpx;
- line-height: 26rpx;
- font-family: PingFang SC;
- font-weight: 400;
- color: #333333;
- margin-top: 22rpx;
- }
- }
- }
- }
- }
- .logistics_des{
- width: 100%;
- background-color: #FFFFFF;
- .logistics_pre{
- padding-right: 20rpx;
- height: 112rpx;
- box-sizing: border-box;
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-left: 20rpx;
- border-bottom: 1rpx solid #EDEDED;
- .logistics_pre_left{
- text:nth-child(1){
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #FC1C1C;
- line-height: 45rpx;
- margin-right: 10rpx;
- }
- text:nth-child(2){
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 45rpx;
- }
- }
- .logistics_pre_right{
- display: flex;
- align-items: center;
- text{
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: 400;
- color: #999999;
- line-height: 45rpx;
- }
- input{
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: 400;
- color: #999999;
- line-height: 45rpx;
- text-align: right;
- }
- image{
- width: 12rpx;
- height: 24rpx;
- margin-left: 15rpx;
- }
- }
- }
- .logistics_pre:nth-last-of-type(1){
- border-bottom: none;
- }
- }
- .submit_txt{
- width: 668rpx;
- height: 88rpx;
- background: #F30300;
- border-radius: 40px;
- font-size: 36rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 88rpx;
- position: fixed;
- bottom: 40rpx;
- z-index: 10;
- margin: 0 41rpx;
- text-align: center;
- }
- }
- </style>
|