|
@@ -83,302 +83,302 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { Toast } from 'vant'
|
|
|
- import { orderDetail } from './api'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'detail',
|
|
|
- props: ['id'],
|
|
|
- data () {
|
|
|
- return {
|
|
|
- orderUserPhone: '',
|
|
|
- orderUserName: '',
|
|
|
- createdAt: '',
|
|
|
- orderNumber: '',
|
|
|
- orderFinalStatus: 0, // 订单最终状态: 0-进行中 1-成功 2-失败
|
|
|
- commanyPhone: '',
|
|
|
- orderFinalRemark: '',
|
|
|
- checks: [],
|
|
|
- inviteCode: '',
|
|
|
- partnerId: ''
|
|
|
- }
|
|
|
- },
|
|
|
- created () {
|
|
|
- this.funInit()
|
|
|
- },
|
|
|
- async mounted () {
|
|
|
- await this.$nextTick()
|
|
|
- this.$refreshTitle('申请进度')
|
|
|
- },
|
|
|
- methods: {
|
|
|
- funInit () {
|
|
|
- const id = this.id
|
|
|
- orderDetail(id).then(res => {
|
|
|
- if (res.status) {
|
|
|
- const { orderUserPhone, orderUserName, createdAt, orderNumber, orderFinalStatus, commanyPhone, orderFinalRemark, checks, inviteCode, partnerId } = res.data
|
|
|
- this.orderUserPhone = orderUserPhone
|
|
|
- this.orderUserName = orderUserName
|
|
|
- this.createdAt = createdAt
|
|
|
- this.orderNumber = orderNumber
|
|
|
- this.orderFinalStatus = orderFinalStatus
|
|
|
- this.commanyPhone = commanyPhone
|
|
|
- this.orderFinalRemark = orderFinalRemark
|
|
|
- this.checks = checks
|
|
|
- this.inviteCode = inviteCode
|
|
|
- this.partnerId = partnerId
|
|
|
- } else {
|
|
|
- Toast(res.msg)
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- Toast(err)
|
|
|
- })
|
|
|
- }
|
|
|
+import { Toast } from 'vant'
|
|
|
+import { orderDetail } from './api'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'detail',
|
|
|
+ props: ['id'],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ orderUserPhone: '',
|
|
|
+ orderUserName: '',
|
|
|
+ createdAt: '',
|
|
|
+ orderNumber: '',
|
|
|
+ orderFinalStatus: 0, // 订单最终状态: 0-进行中 1-成功 2-失败
|
|
|
+ commanyPhone: '',
|
|
|
+ orderFinalRemark: '',
|
|
|
+ checks: [],
|
|
|
+ inviteCode: '',
|
|
|
+ partnerId: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.funInit()
|
|
|
+ },
|
|
|
+ async mounted () {
|
|
|
+ await this.$nextTick()
|
|
|
+ this.$refreshTitle('申请进度')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ funInit () {
|
|
|
+ const id = this.id
|
|
|
+ orderDetail(id).then(res => {
|
|
|
+ if (res.status) {
|
|
|
+ const { orderUserPhone, orderUserName, createdAt, orderNumber, orderFinalStatus, commanyPhone, orderFinalRemark, checks, inviteCode, partnerId } = res.data
|
|
|
+ this.orderUserPhone = orderUserPhone
|
|
|
+ this.orderUserName = orderUserName
|
|
|
+ this.createdAt = createdAt
|
|
|
+ this.orderNumber = orderNumber
|
|
|
+ this.orderFinalStatus = orderFinalStatus
|
|
|
+ this.commanyPhone = commanyPhone
|
|
|
+ this.orderFinalRemark = orderFinalRemark
|
|
|
+ this.checks = checks
|
|
|
+ this.inviteCode = inviteCode
|
|
|
+ this.partnerId = partnerId
|
|
|
+ } else {
|
|
|
+ Toast(res.msg)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ Toast(err)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .wrapper {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- padding: 15px 0 91px;
|
|
|
- }
|
|
|
-
|
|
|
- .header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 343px;
|
|
|
-
|
|
|
- h2 {
|
|
|
- padding-left: 8px;
|
|
|
- line-height: 33px;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- a {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 11px 12px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 100px 0 0 100px;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 29px;
|
|
|
- height: 29px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- margin-left: 3px;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #C7AC8B;
|
|
|
- }
|
|
|
- }
|
|
|
+.wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px 0 91px;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 343px;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ padding-left: 8px;
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
+ a {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
- width: 343px;
|
|
|
- padding-top: 28px;
|
|
|
- margin-top: 16px;
|
|
|
- border-radius: 4px;
|
|
|
+ padding: 11px 12px;
|
|
|
background: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .flow {
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- display: flex;
|
|
|
- width: 295px;
|
|
|
- min-height: 68px;
|
|
|
- margin-top: 24px;
|
|
|
-
|
|
|
- &:nth-of-type(1) {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .init {
|
|
|
- &.has-border:before {
|
|
|
- position: absolute;
|
|
|
- left: 7px;
|
|
|
- top: 3px;
|
|
|
- content: '';
|
|
|
- width: 1px;
|
|
|
- height: calc(100% - 3px);
|
|
|
- border-left: 1px dashed #D8D8D8;
|
|
|
- }
|
|
|
+ border-radius: 100px 0 0 100px;
|
|
|
|
|
|
- .left-wrap {
|
|
|
- border: 4px solid #FAF9FA;
|
|
|
- background: #D8D8D8;
|
|
|
+ img {
|
|
|
+ width: 29px;
|
|
|
+ height: 29px;
|
|
|
}
|
|
|
|
|
|
- .title {
|
|
|
- color: #999;
|
|
|
+ span {
|
|
|
+ margin-left: 3px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C7AC8B;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .active {
|
|
|
- &.has-border:before {
|
|
|
- position: absolute;
|
|
|
- left: 7px;
|
|
|
- top: 3px;
|
|
|
- content: '';
|
|
|
- width: 1px;
|
|
|
- height: calc(100% - 3px);
|
|
|
- border-left: 1px dashed #CBB091;
|
|
|
- }
|
|
|
-
|
|
|
- .left-wrap {
|
|
|
- border: 4px solid #EEEDEE;
|
|
|
- background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 343px;
|
|
|
+ padding-top: 28px;
|
|
|
+ margin-top: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.flow {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ width: 295px;
|
|
|
+ min-height: 68px;
|
|
|
+ margin-top: 24px;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .flow-0 {
|
|
|
- .time {
|
|
|
- margin-top: 18px;
|
|
|
- }
|
|
|
+.init {
|
|
|
+ &.has-border:before {
|
|
|
+ position: absolute;
|
|
|
+ left: 7px;
|
|
|
+ top: 3px;
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: calc(100% - 3px);
|
|
|
+ border-left: 1px dashed #D8D8D8;
|
|
|
}
|
|
|
|
|
|
- .flow-1 {
|
|
|
- .title {
|
|
|
- span:nth-of-type(2) {
|
|
|
- padding-top: 3px;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .time {
|
|
|
- margin-top: 6px;
|
|
|
- }
|
|
|
+ .left-wrap {
|
|
|
+ border: 4px solid #FAF9FA;
|
|
|
+ background: #D8D8D8;
|
|
|
}
|
|
|
|
|
|
- .flow-4 {
|
|
|
- margin-bottom: 14px;
|
|
|
-
|
|
|
- .time {
|
|
|
- margin-top: 18px;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ color: #999;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .left-wrap {
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
+.active {
|
|
|
+ &.has-border:before {
|
|
|
+ position: absolute;
|
|
|
+ left: 7px;
|
|
|
top: 3px;
|
|
|
- z-index: 1;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- border-radius: 50%;
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: calc(100% - 3px);
|
|
|
+ border-left: 1px dashed #CBB091;
|
|
|
}
|
|
|
|
|
|
- .right-wrap {
|
|
|
- margin-left: 24px;
|
|
|
+ .left-wrap {
|
|
|
+ border: 4px solid #EEEDEE;
|
|
|
+ background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- line-height: 22px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: inherit;
|
|
|
- }
|
|
|
+ color: #333;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .description {
|
|
|
- display: flex;
|
|
|
- margin-top: 6px;
|
|
|
+.flow-0 {
|
|
|
+ .time {
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- span {
|
|
|
+.flow-1 {
|
|
|
+ .title {
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ padding-top: 3px;
|
|
|
line-height: 20px;
|
|
|
- font-size: 15px;
|
|
|
- color: #333;
|
|
|
-
|
|
|
- &.line {
|
|
|
- margin: 0 6px;
|
|
|
- }
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .jump-compact,
|
|
|
- .jump-goods {
|
|
|
- display: block;
|
|
|
- width: 106px;
|
|
|
- height: 44px;
|
|
|
- margin: 20px 0 23px;
|
|
|
- border-radius: 4px;
|
|
|
- line-height: 44px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
- box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
|
|
|
- }
|
|
|
-
|
|
|
.time {
|
|
|
- line-height: 17px;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
+ margin-top: 6px;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .tip {
|
|
|
- margin-top: 15px;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- color: #D73634;
|
|
|
- }
|
|
|
+.flow-4 {
|
|
|
+ margin-bottom: 14px;
|
|
|
|
|
|
- .success,
|
|
|
- .fail {
|
|
|
- line-height: 25px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- word-break: break-all;
|
|
|
- color: #D73634;
|
|
|
+ .time {
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
-
|
|
|
- .success {
|
|
|
- margin-top: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.left-wrap {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 3px;
|
|
|
+ z-index: 1;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.right-wrap {
|
|
|
+ margin-left: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ span {
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: inherit;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .fail {
|
|
|
- width: 311px;
|
|
|
- padding-left: 8px;
|
|
|
- margin: 12px 0 23px;
|
|
|
- }
|
|
|
+.description {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 6px;
|
|
|
|
|
|
- .order-info {
|
|
|
- width: 329px;
|
|
|
- padding: 20px 0 24px;
|
|
|
- @include border-top-1px(#E8E8E8);
|
|
|
+ span {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
|
|
|
- p {
|
|
|
- padding-left: 17px;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
+ &.line {
|
|
|
+ margin: 0 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.jump-compact,
|
|
|
+.jump-goods {
|
|
|
+ display: block;
|
|
|
+ width: 106px;
|
|
|
+ height: 44px;
|
|
|
+ margin: 20px 0 23px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
+ box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.time {
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.tip {
|
|
|
+ margin-top: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #D73634;
|
|
|
+}
|
|
|
+
|
|
|
+.success,
|
|
|
+.fail {
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ word-break: break-all;
|
|
|
+ color: #D73634;
|
|
|
+}
|
|
|
+
|
|
|
+.success {
|
|
|
+ margin-top: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.fail {
|
|
|
+ width: 311px;
|
|
|
+ padding-left: 8px;
|
|
|
+ margin: 12px 0 23px;
|
|
|
+}
|
|
|
+
|
|
|
+.order-info {
|
|
|
+ width: 329px;
|
|
|
+ padding: 20px 0 24px;
|
|
|
+ @include border-top-1px(#E8E8E8);
|
|
|
+
|
|
|
+ p {
|
|
|
+ padding-left: 17px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
|
|
|
- &:nth-of-type(2) {
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-top: 2px;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|