|
@@ -1,202 +1,217 @@
|
|
|
<template>
|
|
|
- <view class="page">
|
|
|
- <view class="top-detail">
|
|
|
- <view class="title">
|
|
|
- 发往仓库
|
|
|
- </view>
|
|
|
- <image class="arrow" src="../../static/mine/339.png" mode=""></image>
|
|
|
- <view class="title">
|
|
|
- 仓库打包
|
|
|
- </view>
|
|
|
- <image class="arrow" src="../../static/mine/340.png" mode=""></image>
|
|
|
- <view class="title">
|
|
|
- 洛杉矶
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="logistics">
|
|
|
- <view class="warehouse-packaging" v-if="warehouse.length>0">
|
|
|
-
|
|
|
- <Progress :logisticsList="warehouse" />
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="_detail-1">
|
|
|
- <text>已于11月24日送至平台仓库</text>
|
|
|
- <u-icon @click="putItAway" name="arrow-up" color="#666666" size="18" v-if="isShow"></u-icon>
|
|
|
- <u-icon @click="putItAway" name="arrow-down" color="#666666" size="18" v-else></u-icon>
|
|
|
- </view>
|
|
|
- <view class="logistics-detail" v-if="isShow">
|
|
|
- <view class="">
|
|
|
- {{"顺丰快递"+" "+"|"+" "+"订单号:"}}
|
|
|
- <text>JDV21093105892</text>
|
|
|
- </view>
|
|
|
- <view class="phone">
|
|
|
- <text @click="cope('JDV21093105892')">复制</text>
|
|
|
- {{" "+"|"+" "}}
|
|
|
- <text @click="makeCall">打电话</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="logistics-information" v-if="isShow">
|
|
|
- <Progress :logisticsList="logisticsList" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="page">
|
|
|
+ <view class="top-detail">
|
|
|
+ <view class="title"> 发往仓库 </view>
|
|
|
+ <image class="arrow" src="../../static/mine/339.png" mode=""></image>
|
|
|
+ <view class="title"> 仓库打包 </view>
|
|
|
+ <image class="arrow" src="../../static/mine/340.png" mode=""></image>
|
|
|
+ <view class="title"> 洛杉矶 </view>
|
|
|
+ </view>
|
|
|
+ <view class="logistics">
|
|
|
+ <view class="package" v-if="packageNum > 1">
|
|
|
+ <view class="package-title">您的订单已被分成多个包裹发出:</view>
|
|
|
+ <view></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="warehouse-packaging" v-if="warehouse.length > 0">
|
|
|
+ <Progress :logisticsList="warehouse" />
|
|
|
+ </view>
|
|
|
+ <view class="_detail-1">
|
|
|
+ <text>已于11月24日送至平台仓库</text>
|
|
|
+ <u-icon
|
|
|
+ @click="putItAway"
|
|
|
+ name="arrow-up"
|
|
|
+ color="#666666"
|
|
|
+ size="18"
|
|
|
+ v-if="isShow"
|
|
|
+ ></u-icon>
|
|
|
+ <u-icon
|
|
|
+ @click="putItAway"
|
|
|
+ name="arrow-down"
|
|
|
+ color="#666666"
|
|
|
+ size="18"
|
|
|
+ v-else
|
|
|
+ ></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="logistics-detail" v-if="isShow">
|
|
|
+ <view class="">
|
|
|
+ {{ "顺丰快递" + " " + "|" + " " + "订单号:" }}
|
|
|
+ <text>JDV21093105892</text>
|
|
|
+ </view>
|
|
|
+ <view class="phone">
|
|
|
+ <text @click="cope('JDV21093105892')">复制</text>
|
|
|
+ {{ " " + "|" + " " }}
|
|
|
+ <text @click="makeCall">打电话</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="logistics-information" v-if="isShow">
|
|
|
+ <Progress :logisticsList="logisticsList" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import Progress from './component/progress.vue'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- Progress
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- logisticsList: [{
|
|
|
- title: "已签收",
|
|
|
- time: "10:11",
|
|
|
- status: false,
|
|
|
- does: "您的快件已暂存至浦口东方万汇城北区2号楼超市店菜鸟驿站,请凭取件码及时领取。"
|
|
|
- }, {
|
|
|
- title: "派送中",
|
|
|
- time: "10:11",
|
|
|
- status: false,
|
|
|
- does: "临沂市配送员【叶景瑞】 187626516732 正为您派送,感谢您的耐心等待"
|
|
|
- }, {
|
|
|
- title: "",
|
|
|
- time: "10:11",
|
|
|
- status: false,
|
|
|
- does: "临沂市配送员【叶景瑞】 187626516732 正为您派送,感谢您的耐心等待"
|
|
|
- },
|
|
|
- {
|
|
|
-
|
|
|
- title: "运输中",
|
|
|
- time: "10:11",
|
|
|
- status: false,
|
|
|
- does: "快递离开******"
|
|
|
- }
|
|
|
- ],
|
|
|
- warehouse: [{
|
|
|
- title: "打包称重",
|
|
|
- time: "10:11",
|
|
|
- status: true,
|
|
|
- imageUrl: true,
|
|
|
- does: "商品已打包称重,待用户付款"
|
|
|
- },
|
|
|
- {
|
|
|
-
|
|
|
- title: "商品入库",
|
|
|
- time: "10:11",
|
|
|
- status: false,
|
|
|
- imageUrl: false,
|
|
|
- does: "商品已进入转入仓库,正在排队等待打包"
|
|
|
- }
|
|
|
- ],
|
|
|
- isShow:true
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- methods: {
|
|
|
-
|
|
|
- cope(str) {
|
|
|
- uni.setClipboardData({
|
|
|
- data: str,
|
|
|
- success() {
|
|
|
- uni.showToast({
|
|
|
- title: "复制成功",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- makeCall() {
|
|
|
- uni.authorize({
|
|
|
- scope: 'scope.makePhoneCall',
|
|
|
- success: () => {
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: '手机号码',
|
|
|
- success: () => {
|
|
|
- console.log('拨打电话成功!');
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- console.error('拨打电话失败!');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- console.error('授权失败,请允许拨打电话权限!');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- putItAway(){
|
|
|
- this.isShow = !this.isShow
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: "物流进度"
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+import Progress from "./component/progress.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Progress,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ logisticsList: [
|
|
|
+ {
|
|
|
+ title: "已签收",
|
|
|
+ time: "10:11",
|
|
|
+ status: false,
|
|
|
+ does: "您的快件已暂存至浦口东方万汇城北区2号楼超市店菜鸟驿站,请凭取件码及时领取。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "派送中",
|
|
|
+ time: "10:11",
|
|
|
+ status: false,
|
|
|
+ does: "临沂市配送员【叶景瑞】 187626516732 正为您派送,感谢您的耐心等待",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ time: "10:11",
|
|
|
+ status: false,
|
|
|
+ does: "临沂市配送员【叶景瑞】 187626516732 正为您派送,感谢您的耐心等待",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "运输中",
|
|
|
+ time: "10:11",
|
|
|
+ status: false,
|
|
|
+ does: "快递离开******",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ warehouse: [
|
|
|
+ {
|
|
|
+ title: "打包称重",
|
|
|
+ time: "10:11",
|
|
|
+ status: true,
|
|
|
+ imageUrl: true,
|
|
|
+ does: "商品已打包称重,待用户付款",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "商品入库",
|
|
|
+ time: "10:11",
|
|
|
+ status: false,
|
|
|
+ imageUrl: false,
|
|
|
+ does: "商品已进入转入仓库,正在排队等待打包",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ isShow: true,
|
|
|
+ packageNum: 0, //包裹个数
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.packageNum = options.package;
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ cope(str) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: str,
|
|
|
+ success() {
|
|
|
+ uni.showToast({
|
|
|
+ title: "复制成功",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ makeCall() {
|
|
|
+ uni.authorize({
|
|
|
+ scope: "scope.makePhoneCall",
|
|
|
+ success: () => {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: "手机号码",
|
|
|
+ success: () => {
|
|
|
+ console.log("拨打电话成功!");
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.error("拨打电话失败!");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.error("授权失败,请允许拨打电话权限!");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ putItAway() {
|
|
|
+ this.isShow = !this.isShow;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: "物流进度",
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .page {
|
|
|
- padding: 20rpx 24rpx;
|
|
|
- .top-detail {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- height: 144rpx;
|
|
|
- background: linear-gradient(180deg, #F6E1DE 0%, #EFEFEF 100%);
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
-
|
|
|
- .title {
|
|
|
- color: rgba(34, 34, 34, .6);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .arrow {
|
|
|
- width: 98rpx;
|
|
|
- height: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .logistics {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- position: relative;
|
|
|
- top: -20rpx;
|
|
|
- padding-bottom: 20rpx;
|
|
|
-
|
|
|
- ._detail-1 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
- align-items: center;
|
|
|
- border-top: 2rpx solid rgba(151, 151, 151, .1);
|
|
|
- padding-top: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .logistics-detail {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- height: 104rpx;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 2rpx solid rgba(151, 151, 151, .1);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .logistics-information {
|
|
|
- padding: 20rpx 0;
|
|
|
-
|
|
|
- .information {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+.page {
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ .top-detail {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 144rpx;
|
|
|
+ background: linear-gradient(180deg, #f6e1de 0%, #efefef 100%);
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(34, 34, 34, 0.6);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ width: 98rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logistics {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -20rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ .package {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ ._detail-1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ align-items: center;
|
|
|
+ border-top: 2rpx solid rgba(151, 151, 151, 0.1);
|
|
|
+ padding-top: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logistics-detail {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ height: 104rpx;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .logistics-information {
|
|
|
+ padding: 20rpx 0;
|
|
|
+
|
|
|
+ .information {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|