shop_app/pages/mine/refund/expressinfo/index.vue

<template>
	<view class="whole">
		<view class="one">
			<view class="tit">订单物流</view>
			<view class="box">
				<text>{{exInfo.delivery_company && exInfo.delivery_company.name}} {{exInfo.ship_sn}}</text><br>
				<text>{{exInfo.created_at}}</text>
			</view>
		</view>
		<view class="express-steps">
			<view class="time-axis" v-for="(item, index) in info" :key="index" :class="{ 'is-done' : index === 0 }">
				<text
					v-for="(it, index) in item.context"
					:key="index"
					@click="clickMakePhoneCall"
					:data-phone="it.type == 'phone' ? it.val : ''"
					:class="it.type == 'phone' ? 'phoneColor' : ''">
					{{ it.val }}
				</text>
				<view>{{ item.time }}</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	export default {
		setup() {
			const data = reactive({
				exInfo: {},
				refund_id: '',
				info: [],
				Color: uni.getStorageSync('theme_color'),
				role: uni.getStorageSync('role')
			})
			
			const clickMakePhoneCall = (e) => {
				uni.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.phone
				})
			}
			
			const mobilePhoneArray = (strContent) => {
				if (strContent == '') {
					return
				}
				let list = []
				const mobileReg = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|0[\d]{2,3}[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g
				const phoneList = strContent.context.match(mobileReg)
				const textList = strContent.context.split(mobileReg)
				if (phoneList == null) {
					list.push({
						type: 'text',
						val: textList[0],
					})
					return list
				}
			
				textList.forEach((item) => {
					if (phoneList.indexOf(item) > -1) {
						list.push({
							type: 'phone',
							val: item,
						})
					} else {
						list.push({
							type: 'text',
							val: item,
						})
					}
				})
				return list
			}
			
			async function getShip(id) {
				let url = '/api/v1/orderRefundApply/'
				if(data.role == 1) {
					url = '/api/v1/sales/orderRefundApply/'
				}
				get(url + data.refund_id).then((res) => {
					data.exInfo = res.data
					let params = {
						delivery_code: res.data.delivery_code,
						ship_sn: res.data.ship_sn,
						mobile: res.data.refund_address_mobile
					}
					post('/api/v1/delivery/queryShip', params).then((ress) => {
						data.info = ress.data.logs
						if (ress.data.logs.length === 0) {
							data.info.push({
								context: '待揽件'
							})
						}
						data.info.forEach((item) => {
							const list = mobilePhoneArray(item)
							item.context = list
						})
					})
				})
				
				
			}
			
			return {
				...toRefs(data),
				mobilePhoneArray,
				getShip
			}
		},
		onLoad(options) {
			this.refund_id = options.refund_id
			this.getShip()
		}
	}
</script>

<style lang="scss" scoped>
	.whole {
		height: 100vh;
		overflow: hidden;
		.one{
			padding: 30rpx;
			background: #fff;
			.tit{
				font-size: 30rpx;
				color: #111;
				font-weight: 600;
			}
			.box{
				margin-top: 20rpx;
				text{
					font-size: 26rpx;
					color: #7B7B7B;
					line-height: 50rpx;
				}
			}
		}
		.express-steps{
			padding: 30rpx;
			background: #fff;
			height: calc(100vh - 280rpx);
			overflow: auto;
			/* 时间轴 */
			.time-axis {
				color: #262626;
				position: relative;
				padding-left: 50rpx;
				list-style: none;
				font-size: 28rpx;
				margin: 10rpx 0;
				&:before {
					position: absolute;
					margin-top: 10rpx;
					left: 9rpx;
					content: ' ';
					height: 20rpx;
					width: 20rpx;
					border-radius: 50%;
					background-color: #e8e8e8;
				}
			
				&:after {
					position: absolute;
					top: 32rpx;
					left: 16rpx;
					bottom: -38rpx;
					content: ' ';
					width: 2rpx;
					border-right: 2rpx solid #e8e8e8;
				}
			
				&:not(:first-child) {
					padding-top: 16rpx;
				}
			
				&:last-child {
					&:after {
						display: none;
					}
				}
			
				&.is-done {
					&:after {
						border-color: v-bind('Color');
					}
			
					&:before {
						background-color: v-bind('Color');
						box-shadow: v-bind('Color') 0 0 10px;
					}
				}
			}
			
			.phoneColor {
				color: #61b8fd;
			}
		}
		.empty{
			font-size: 24rpx;
			color: #7B7B7B;
			padding: 30rpx;
			background: #fff;
		}
	}

</style>