|
@@ -0,0 +1,460 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="navbar">
|
|
|
+ <view v-for="(item, index) in navList" :key="index" class="nav-item"
|
|
|
+ :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
|
|
|
+ </view>
|
|
|
+ <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
|
|
|
+ <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
|
|
|
+ <scroll-view class="list-scroll-content" scroll-y>
|
|
|
+ <view class="main" v-for="(item,index) in 10" @click="navTo('/pages/foreign/orderDetail')">
|
|
|
+ <view class="main-id flex">
|
|
|
+ <view class="">产品货号:9876543211025666</view>
|
|
|
+ <view class="type1" v-if="index%2 == 0">
|
|
|
+ 进行中
|
|
|
+ </view>
|
|
|
+ <view class="type2" v-else>
|
|
|
+ 已完成
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main-info flex">
|
|
|
+ <scroll-view scroll-x="true" class="main-price">
|
|
|
+ <view class="image-box">
|
|
|
+ <view class="image-item" v-for="(itm,ind) in 10">
|
|
|
+ <image src="../../static/img/user-item2.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="main-more">
|
|
|
+ <view class="mainm-font">
|
|
|
+ 查看详细
|
|
|
+ </view>
|
|
|
+ <image class="mainm-jt" src="../../static/img/jt.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main-name flex">
|
|
|
+ <view class="">创建日期:2022年10月30日</view>
|
|
|
+ <view class="">到货日期:2022年10月30日</view>
|
|
|
+ </view>
|
|
|
+ <view class="main-name flex">
|
|
|
+ <view class="mainnum-item">
|
|
|
+ 合作公司:浙江皮革厂有限公司 13526232012
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main-name flex">
|
|
|
+ <view class="mainnum-item">
|
|
|
+ 不合格数量: <text class="red">285</text> 合格数量:<text class="red">285</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom flex">
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="box2" @click.stop="navTo('/pages/foreign/checkout')">检验记录</view>
|
|
|
+ <view v-if="tabCurrentIndex !=2" class="box2">立即联系</view>
|
|
|
+ <view v-if="tabCurrentIndex !=2" class="box1" @click.stop="open()">提交检验</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <uni-popup ref="popup" type="center">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="popup-title">
|
|
|
+ 检验数量
|
|
|
+ </view>
|
|
|
+ <view class="popup-main">
|
|
|
+ <view class="popup-jian" @click="jj('0')">
|
|
|
+ -
|
|
|
+ </view>
|
|
|
+ <input v-model="num" placeholder="请输入检验数量" class="popup-main-font" />
|
|
|
+ <view class="popup-jia" @click="jj('1')">
|
|
|
+ +
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="popup-tip">
|
|
|
+ 请输入检验数量
|
|
|
+ </view>
|
|
|
+ <view class="popup-btn-box flex">
|
|
|
+ <view class="popup-btn-item qx" @click="cancel()">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view class="popup-btn-item qd">
|
|
|
+ 确定
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabCurrentIndex: 0,
|
|
|
+ num: 0,
|
|
|
+ navList: [{
|
|
|
+ state: '',
|
|
|
+ text: '全部',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: '',
|
|
|
+ text: '进行中',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: '',
|
|
|
+ text: '已完成',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ onShow() {},
|
|
|
+ onReachBottom() {},
|
|
|
+ onReady() {},
|
|
|
+ methods: {
|
|
|
+ //swiper 切换
|
|
|
+ changeTab(e) {
|
|
|
+ this.tabCurrentIndex = e.target.current;
|
|
|
+ this.loadData('tabChange');
|
|
|
+ },
|
|
|
+ //顶部tab点击
|
|
|
+ tabClick(index) {
|
|
|
+ this.tabCurrentIndex = index;
|
|
|
+ },
|
|
|
+ loadData() {
|
|
|
+
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ navTo(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ jj(opt) {
|
|
|
+ if (opt == 0) {
|
|
|
+ this.num = this.num * 1 - 1
|
|
|
+ } else {
|
|
|
+ this.num = this.num * 1 + 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page,
|
|
|
+ .content {
|
|
|
+ min-height: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 5px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 15px;
|
|
|
+ color: $font-color-dark;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &.current {
|
|
|
+ color: #FF4C4C;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 0;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 44px;
|
|
|
+ height: 0;
|
|
|
+ border-bottom: 2px solid #FF4C4C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-box {
|
|
|
+ height: calc(100vh - 40px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-scroll-content {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .popup-box {
|
|
|
+ width: 582rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ padding: 64rpx 32rpx 20rpx;
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-main {
|
|
|
+ margin: 42rpx auto 0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .popup-jian {
|
|
|
+ width: 89rpx;
|
|
|
+ height: 77rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #CFCFCF;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 43rpx;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-jia {
|
|
|
+ width: 89rpx;
|
|
|
+ height: 77rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #CFCFCF;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 43rpx;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #F35B64;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-main-font {
|
|
|
+ padding: 0 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 77rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ border-bottom: 1px solid #CFCFCF;
|
|
|
+ border-top: 1px solid #CFCFCF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-tip {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-btn-box {
|
|
|
+ margin-top: 50rpx;
|
|
|
+
|
|
|
+ .popup-btn-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 248rpx;
|
|
|
+ height: 78rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qd {
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 700rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ .main-id {
|
|
|
+ padding: 35rpx 14rpx 30rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type1 {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF2D2D;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type2 {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-name {
|
|
|
+ padding: 0 14rpx 20rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #363636;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-info {
|
|
|
+ padding: 20rpx 14rpx;
|
|
|
+
|
|
|
+ .main-price {
|
|
|
+ width: 480rpx;
|
|
|
+
|
|
|
+ .image-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .image-item {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 110rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-more {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .mainm-font {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainm-jt {
|
|
|
+ width: 12rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-num {
|
|
|
+ padding: 24rpx 14rpx 20rpx;
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+
|
|
|
+ .mainnum-item {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #FF4C4C
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ border-top: 1px solid #eeeeee;
|
|
|
+ padding: 20rpx 0;
|
|
|
+
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-font {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #FF4C4C
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box2 {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ border: 2px solid #EBEBEB;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box1 {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ border: 2px solid #FF2D2D;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF2D2D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|