|
@@ -0,0 +1,352 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="topView">
|
|
|
+ <!-- 待处理 -->
|
|
|
+ <view class="waitBg" v-if="state>0">
|
|
|
+ <view class="title">请等待平台处理</view>
|
|
|
+ <!-- 进度条 -->
|
|
|
+ <view class="progress">
|
|
|
+ <image :src="(state>0 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>0}">
|
|
|
+ </image>
|
|
|
+
|
|
|
+ <view class="line" :class="{lightLine:state>0}"></view>
|
|
|
+
|
|
|
+ <image :src="(state>1 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>1}">
|
|
|
+ </image>
|
|
|
+
|
|
|
+ <view class="line" :class="{lightLine:state>1}"></view>
|
|
|
+
|
|
|
+ <image :src="(state>2 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>2}">
|
|
|
+ </image>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 进度条 文字提示 -->
|
|
|
+ <view class="progressT">
|
|
|
+ <view class="stateView">
|
|
|
+ <view class="progressTitle">提交申请</view>
|
|
|
+ <view class="time" v-if="state>0">2021-11-2 12:43</view>
|
|
|
+ </view>
|
|
|
+ <view style="width: 9%;"></view>
|
|
|
+ <view class="stateView">
|
|
|
+ <view class="progressTitle">平台审核</view>
|
|
|
+ <view class="time" v-if="state>1">2021-11-2 12:43</view>
|
|
|
+ </view>
|
|
|
+ <view style="width: 9%;"></view>
|
|
|
+ <view class="stateView">
|
|
|
+ <view class="progressTitle">平台同意更换</view>
|
|
|
+ <view class="time" v-if="state>2">2021-11-2 12:43</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 更换关闭 -->
|
|
|
+ <view class="waitBg" v-if="state==0" style="height: 100rpx;">
|
|
|
+ <view class="title">更换关闭</view>
|
|
|
+ <view class="title3">2021年11月12日 12:43</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 平台拒绝 -->
|
|
|
+ <view class="waitBg" v-if="state==-1" style="height: 100rpx;">
|
|
|
+ <view class="title">平台已拒绝</view>
|
|
|
+ <view class="title3">2021年11月12日 12:43</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 更换提交 -->
|
|
|
+ <view class="whiteView" v-if="state==1">
|
|
|
+ <view class="title1">您已成功发起更换门店申请,请耐心等待平台处理</view>
|
|
|
+ <view class="title2">平台同意后,系统将自动更新门店信息</view>
|
|
|
+ <view class="title3">平台同意后,系统将自动更新门店信息</view>
|
|
|
+ </view>
|
|
|
+ <!-- 更换关闭 -->
|
|
|
+ <view class="whiteView" v-if="state==0">
|
|
|
+ <view class="title1">您已撤销本次退款申请,如有问题仍未解决,您可以重新发起申请</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 平台拒绝 -->
|
|
|
+ <view class="whiteView" v-if="state==-1">
|
|
|
+ <view class="title1">平台拒绝原因:这是选择的原因</view>
|
|
|
+ <view class="title2">您可以修改更换申请后再次发起,平台会重新处理</view>
|
|
|
+ </view>
|
|
|
+ <!-- 同意申请 -->
|
|
|
+ <view class="tongyiView" v-if="state==3">
|
|
|
+ <view class="title1">进度详情</view>
|
|
|
+ <image src="../../static/img/rightArrow.png" mode="" style="width: 14rpx; height: 23rpx;"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="whiteView">
|
|
|
+ <view class="storeTitle">更换前门店信息</view>
|
|
|
+ <view class="store">
|
|
|
+ <image src="../../static/img/icon_state_gray.png" mode="" class="leftIcon"></image>
|
|
|
+ <view class="name">这是门店名称</view>
|
|
|
+ </view>
|
|
|
+ <view class="store">
|
|
|
+ <image src="../../static/img/icon_coordinate.png" mode="" class="leftIcon"></image>
|
|
|
+ <view class="address">江苏省南京市鼓楼区铁路南街233号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="whiteView">
|
|
|
+ <view class="storeTitle">更换后门店信息</view>
|
|
|
+ <view class="store">
|
|
|
+ <image src="../../static/img/icon_state_gray.png" mode="" class="leftIcon"></image>
|
|
|
+ <view class="name">这是门店名称</view>
|
|
|
+ </view>
|
|
|
+ <view class="store">
|
|
|
+ <image src="../../static/img/icon_coordinate.png" mode="" class="leftIcon"></image>
|
|
|
+ <view class="address">江苏省南京市鼓楼区铁路南街233号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="whiteView">
|
|
|
+
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">更换原因:</view>
|
|
|
+ <view class="informationNum">七天无理由</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">申请时间:</view>
|
|
|
+ <view class="informationNum">2021-11-21 11:32:12</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">补充描述:</view>
|
|
|
+ <view class="informationNum">无</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">申请单号:</view>
|
|
|
+ <view class="informationNum">12345</view>
|
|
|
+ <view class="copyBtn" @click="copy(orderData.Code)">复制</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">订单单号:</view>
|
|
|
+ <view class="informationNum">T124</view>
|
|
|
+ <view class="copyBtn" @click="copy(orderData.Code)">复制</view>
|
|
|
+ <view style="color: #3F90F7; font-size: 26rpx; margin-left: 50rpx;">详情</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部按钮 操作 -->
|
|
|
+ <view style="height: 150rpx;"></view>
|
|
|
+ <view class="orderBottom" v-if="state==1">
|
|
|
+ <view class="cancelBtn" @click="cancelBtn">撤销申请</view>
|
|
|
+ <view class="cancelBtn" @click="editBtn">修改申请</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ state: -1,// -1 拒绝1 提交申请 2 平台审核 3 同意申请
|
|
|
+ tongguoUrl: '../../static/img/icon_tongguo.png',
|
|
|
+ waitUrl: '../../static/img/icon_yuan.png',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ copy(txt) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: txt,
|
|
|
+ success: function() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .content {
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topView {
|
|
|
+ background: linear-gradient(315deg, #FD5002 0%, #FE8F00 100%);
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .waitBg {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ height: 209rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ padding: 10rpx 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .waitImg {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tongguoImg {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 38rpx;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 40%;
|
|
|
+ margin: 0rpx 5rpx;
|
|
|
+ height: 2px;
|
|
|
+ background: #FF2400;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lightLine {
|
|
|
+ width: 40%;
|
|
|
+ margin: 0rpx 5rpx;
|
|
|
+ height: 2px;
|
|
|
+ background: #FF2400;
|
|
|
+ opacity: 1.0;
|
|
|
+ }
|
|
|
+ .progressT{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .stateView{
|
|
|
+ width: 30%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .progressTitle{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 22rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 22rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .whiteView{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ }
|
|
|
+ .title1 {
|
|
|
+ color: #3C3C3C;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .title2{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ .title3{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .storeTitle{
|
|
|
+ color: #3C3C3C;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 1rpx #EEEEEE solid;
|
|
|
+ padding-bottom: 22rpx;
|
|
|
+ }
|
|
|
+ .store{
|
|
|
+ display: flex;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .leftIcon{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ color: #3C3C3C;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .address {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationLine {
|
|
|
+ display: flex;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationTxt {
|
|
|
+ width: 130rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationNum {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copyBtn {
|
|
|
+ width: 86rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderBottom {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .cancelBtn {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 2rpx solid #DDDDDD;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ margin-top: 21rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .tongyiView{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ }
|
|
|
+</style>
|