浏览代码

页面字段修改 下单接口 页面跳转

MS-IOHQJGHXZHQD\Administrator 5 月之前
父节点
当前提交
a7ae1b0f09

+ 9 - 1
src/api/points.js

@@ -101,7 +101,15 @@ export function getPointShopList(data) {
 export function productGetById(data) {
     return request({
         method: 'get',
-        url: '/product/getById/',
+        url: '/product/getById',
         data
     });
 }
+//商品下单
+export function productOrderCreate(data) {
+    return request({
+        method: 'post',
+        url: '/product/order/create',
+        data
+    });
+}

+ 7 - 2
src/components/upload/index.vue

@@ -5,10 +5,11 @@
 		:multiple="multiple" :maxCount="maxCount" 
 		@afterRead="afterRead" @delete="onDelete">
 		<slot name="content" :data="fileList"></slot>
+		
      <image
       v-if="customImg"
       src="@/static/discover/ic_upload.png"
-      mode="widthFix"
+      mode=""
       :style="{width: width + 'px', height: height + 'px'}"
     ></image>
 	</u-upload>
@@ -76,10 +77,14 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		fileList: {
+			type: Array,
+			default: []
+		},
 	},
 	data() {
 		return {
-			fileList: [],
+			//fileList: [],
 		};
 	},
 	computed: {

+ 159 - 113
src/points/order/orderDetails.vue

@@ -84,6 +84,26 @@ export default {
       });
       // 这里可以调用售后API
       this.afterSalesShow = false;
+
+      let receivedStatus
+      let tab
+      if (this.receiptStatus == 'notReceived') {
+        receivedStatus = 1
+        tab = 1
+      } else if (this.receiptStatus == "received" && this.afterSalesType == "refund") {
+        receivedStatus = 2
+        tab = 1
+      } else if (this.receiptStatus == "received" && this.afterSalesType == "exchange") {
+        uni.navigateTo({
+          url: '/points/productDetails/applyExchange'
+        });
+        return
+      }
+      //receivedStatus 1 未收到,申请退款;2.已收到货,申请退款 3.已收货-换货申请
+      //tab 1 退款 2 换货
+      uni.navigateTo({
+        url: `/points/productDetails/applyRefund?receivedStatus=${receivedStatus}&tab=${tab}`
+      });
     }
   }
 }
@@ -95,7 +115,7 @@ export default {
     <view class="header">
       <text class="header-title">{{ orderInfo.statusText }}</text>
     </view>
-    
+
     <!-- 商品信息 -->
     <view class="product-info">
       <view class="product-image">
@@ -107,7 +127,7 @@ export default {
         <text class="product-price">¥{{ orderInfo.product.price }}+{{ orderInfo.product.points }}积分</text>
       </view>
     </view>
-    
+
     <!-- 订单信息 -->
     <view class="order-info">
       <view class="info-item">
@@ -128,10 +148,11 @@ export default {
       </view>
       <view class="info-item">
         <text class="info-label">收货信息</text>
-        <text class="info-value">{{ orderInfo.recipient.name }}, {{ orderInfo.recipient.phone }}, {{ orderInfo.recipient.address }}</text>
+        <text class="info-value">{{ orderInfo.recipient.name }}, {{ orderInfo.recipient.phone }}, {{
+          orderInfo.recipient.address }}</text>
       </view>
     </view>
-    
+
     <!-- 退货信息 -->
     <view class="refund-info">
       <view class="info-item">
@@ -143,7 +164,7 @@ export default {
         <text class="info-value">{{ orderInfo.refund.applyTime }}</text>
       </view>
     </view>
-    
+
     <!-- 操作按钮 -->
     <view class="action-buttons" :class="{ 'safe-area': hasSafeArea }">
       <button class="detail-button" @click="handleAfterSales">退款\售后</button>
@@ -152,33 +173,29 @@ export default {
     </view>
     <!-- 弹出层 -->
     <u-modal :show="show" :title="title" :content='content' :show-cancel="false">
-        <view slot="default" class="modal-content">
-            <text class="modal-text">为了保障您的权益,请收到商品确认无误后再确认收货</text>
-        </view>
-        <view slot="confirmButton" class="modal-footer">
-            <button class="modal-cancel" @click="show = false">取消</button>
-            <button class="modal-confirm" @click="confirmReceive">确认收货</button>
-        </view>
+      <view slot="default" class="modal-content">
+        <text class="modal-text">为了保障您的权益,请收到商品确认无误后再确认收货</text>
+      </view>
+      <view slot="confirmButton" class="modal-footer">
+        <button class="modal-cancel" @click="show = false">取消</button>
+        <button class="modal-confirm" @click="confirmReceive">确认收货</button>
+      </view>
     </u-modal>
     <!-- 填写物流单号 -->
-    <u-popup :show="showLogistics" mode="bottom"  @close="showLogistics = false" round="20rpx">
+    <u-popup :show="showLogistics" mode="bottom" @close="showLogistics = false" round="20rpx">
       <view class="logistics-popup">
         <!-- 标题 -->
         <view class="popup-header">
           <text class="popup-title">填写物流单号</text>
           <text class="popup-close" @click="showLogistics = false">取消</text>
         </view>
-        
+
         <!-- 输入框 -->
         <view class="popup-content">
-          <u--textarea v-model="logisticsNumber"
-                       placeholder="请输入物流单号"
-                       border="surround"
-                       :border-radius="10"
-                       class="logistics-input"
-          ></u--textarea>
+          <u--textarea v-model="logisticsNumber" placeholder="请输入物流单号" border="surround" :border-radius="10"
+            class="logistics-input"></u--textarea>
         </view>
-        
+
         <!-- 提交按钮 -->
         <view class="popup-footer">
           <button class="submit-button" @click="submitLogistics">提交</button>
@@ -186,53 +203,41 @@ export default {
       </view>
     </u-popup>
     <!-- 售后 -->
-    <u-popup :show="afterSalesShow" mode="bottom"  @close="afterSalesShow = false" round="20rpx">
+    <u-popup :show="afterSalesShow" mode="bottom" @close="afterSalesShow = false" round="20rpx">
       <view class="after-sales-popup">
         <!-- 标题 -->
         <view class="popup-header">
           <text class="popup-title">请选择售后商品</text>
           <text class="popup-close" @click="afterSalesShow = false">×</text>
         </view>
-        
+
         <!-- 收货状态选择 -->
         <view class="popup-section">
           <text class="section-title">请选择收货状态</text>
           <view class="option-group">
-            <button 
-              class="option-button" 
-              :class="{ active: receiptStatus === 'notReceived' }"
-              @click="receiptStatus = 'notReceived'"
-            >未收到货</button>
-            <button 
-              class="option-button" 
-              :class="{ active: receiptStatus === 'received' }"
-              @click="receiptStatus = 'received'"
-            >已收到货</button>
+            <button class="option-button" :class="{ active: receiptStatus === 'notReceived' }"
+              @click="receiptStatus = 'notReceived'">未收到货</button>
+            <button class="option-button" :class="{ active: receiptStatus === 'received' }"
+              @click="receiptStatus = 'received'">已收到货</button>
           </view>
         </view>
-        
+
         <!-- 售后类型选择 -->
         <view class="popup-section" v-if="receiptStatus === 'received'">
           <text class="section-title">请选择售后类型</text>
           <view class="option-group">
-            <button 
-              class="option-button" 
-              :class="{ active: afterSalesType === 'refund' }"
-              @click="afterSalesType = 'refund'"
-            >退货</button>
-            <button 
-              class="option-button" 
-              :class="{ active: afterSalesType === 'exchange' }"
-              @click="afterSalesType = 'exchange'"
-            >换货</button>
+            <button class="option-button" :class="{ active: afterSalesType === 'refund' }"
+              @click="afterSalesType = 'refund'">退货</button>
+            <button class="option-button" :class="{ active: afterSalesType === 'exchange' }"
+              @click="afterSalesType = 'exchange'">换货</button>
           </view>
         </view>
-        
+
         <!-- 商品选择 -->
         <view class="popup-section">
           <text class="section-title">
             请选择商品
-            <text v-if="receiptStatus === 'received'" class="time-limit">(2026-4-1  24时之前可申请)</text>
+            <text v-if="receiptStatus === 'received'" class="time-limit">(2026-4-1 24时之前可申请)</text>
           </text>
           <view class="product-item">
             <view class="product-image">
@@ -244,7 +249,7 @@ export default {
             </view>
           </view>
         </view>
-        
+
         <!-- 下一步按钮 -->
         <view class="popup-footer">
           <button class="next-button" @click="nextStep">下一步</button>
@@ -255,7 +260,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.order-details{
+.order-details {
   width: 750rpx;
   min-height: 100vh;
   background-image: url("@/static/points/orderBg.png");
@@ -263,8 +268,9 @@ export default {
   background-repeat: no-repeat;
   background-color: #F5F8F8;
   padding-top: 54rpx;
-  ::v-deep .u-modal{
-    .u-modal__title{
+
+  ::v-deep .u-modal {
+    .u-modal__title {
       background: #E8FFFD;
       height: 92rpx;
       padding: 0;
@@ -274,16 +280,19 @@ export default {
       color: #000000;
       line-height: 92rpx;
     }
-    .u-modal__content,.u-modal__button-group--confirm-button{
+
+    .u-modal__content,
+    .u-modal__button-group--confirm-button {
       padding: 0;
     }
   }
 
   // 模态框样式
-  .modal-content{
+  .modal-content {
     padding: 40rpx 32rpx;
     text-align: center;
-    .modal-text{
+
+    .modal-text {
       font-family: PingFang SC, PingFang SC;
       font-weight: 500;
       font-size: 28rpx;
@@ -291,12 +300,14 @@ export default {
       line-height: 39rpx;
     }
   }
-  .modal-footer{
+
+  .modal-footer {
     border-top: 1rpx solid #EEEEEE;
     display: flex;
     justify-content: center;
     padding: 24rpx 58rpx;
-    button{
+
+    button {
       width: 225rpx;
       height: 68rpx;
       border-radius: 60rpx;
@@ -306,20 +317,24 @@ export default {
       margin: 0 20rpx;
       padding: 0;
     }
-    .modal-cancel{
+
+    .modal-cancel {
       border: 1rpx solid #999999;
       color: #333333;
     }
-    .modal-confirm{
-      background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
+
+    .modal-confirm {
+      background: linear-gradient(78deg, #1AD8CF 0%, #21C8C0 100%);
       color: #FFFFFF;
     }
   }
-  .header{
+
+  .header {
     width: 100%;
     margin-bottom: 38rpx;
     text-align: center;
-    .header-title{
+
+    .header-title {
       font-family: PingFang SC, PingFang SC;
       font-weight: 500;
       font-size: 36rpx;
@@ -327,7 +342,8 @@ export default {
       line-height: 40rpx;
     }
   }
-  .product-info{
+
+  .product-info {
     width: 686rpx;
     height: 168rpx;
     background: #FFFFFF;
@@ -335,18 +351,22 @@ export default {
     margin: 0 auto 24rpx;
     padding: 24rpx;
     display: flex;
-    .product-image{
+
+    .product-image {
       width: 120rpx;
       height: 120rpx;
       margin-right: 24rpx;
-      image{
+
+      image {
         width: 100%;
         height: 100%;
       }
     }
-    .product-details{
+
+    .product-details {
       flex: 1;
-      .product-name{
+
+      .product-name {
         font-family: PingFang SC, PingFang SC;
         font-weight: bold;
         font-size: 28rpx;
@@ -355,7 +375,8 @@ export default {
         margin-bottom: 24rpx;
         display: block;
       }
-      .product-spec{
+
+      .product-spec {
         font-family: PingFang SC, PingFang SC;
         font-size: 26rpx;
         line-height: 26rpx;
@@ -363,7 +384,8 @@ export default {
         margin-bottom: 2rpx;
         display: block;
       }
-      .product-price{
+
+      .product-price {
         font-family: PingFang SC, PingFang SC;
         font-weight: bold;
         line-height: 26rpx;
@@ -372,28 +394,33 @@ export default {
       }
     }
   }
+
   .order-info,
-  .refund-info{
+  .refund-info {
     width: 686rpx;
     background-color: #FFFFFF;
     border-radius: 16rpx;
     margin: 0 auto 24rpx;
     padding: 26rpx 24rpx;
-    .info-item{
+
+    .info-item {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       margin-bottom: 22rpx;
-      &:last-child{
+
+      &:last-child {
         margin-bottom: 0;
       }
-      .info-label{
+
+      .info-label {
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         font-size: 26rpx;
         color: #666666;
       }
-      .info-value{
+
+      .info-value {
         flex: 1;
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
@@ -403,7 +430,8 @@ export default {
       }
     }
   }
-  .action-buttons{
+
+  .action-buttons {
     width: 750rpx;
     background: #FFFFFF;
     position: fixed;
@@ -415,11 +443,13 @@ export default {
     // 正常手机的高度
     height: auto;
     min-height: 100rpx;
+
     // 有安全区域的设备的高度
     &.safe-area {
       height: 164rpx;
     }
-    .detail-button{
+
+    .detail-button {
       padding: 0 30rpx;
       height: 56rpx;
       border-radius: 98rpx;
@@ -430,7 +460,8 @@ export default {
       border: 2rpx solid #999999;
       margin: 0;
     }
-    .action-button{
+
+    .action-button {
       padding: 0 30rpx;
       height: 56rpx;
       background: #03C1B8;
@@ -442,20 +473,21 @@ export default {
       margin: 0 0 0 20rpx;
     }
   }
-  
+
   // 物流单号弹出框样式
-  .logistics-popup{
+  .logistics-popup {
     width: 100%;
     padding: 40rpx;
     background: #F5F8F8;
     border-radius: 32rpx 32rpx 0 0;
-    
-    .popup-header{
+
+    .popup-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 32rpx;
-      .popup-title{
+
+      .popup-title {
         font-size: 40rpx;
         font-weight: bold;
         color: #333333;
@@ -463,15 +495,17 @@ export default {
         background-repeat: no-repeat;
         background-position: 20rpx 40rpx;
       }
-      .popup-close{
+
+      .popup-close {
         font-size: 28rpx;
         color: #999999;
       }
     }
-    
-    .popup-content{
+
+    .popup-content {
       margin-bottom: 32rpx;
-      .logistics-input{
+
+      .logistics-input {
         width: 100%;
         height: 180rpx;
         padding: 20rpx;
@@ -481,12 +515,12 @@ export default {
         border: 1rpx solid #DCDCDC;
       }
     }
-    
-    .popup-footer{
-      .submit-button{
+
+    .popup-footer {
+      .submit-button {
         width: 100%;
         height: 80rpx;
-        background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
+        background: linear-gradient(78deg, #1AD8CF 0%, #21C8C0 100%);
         border-radius: 40rpx;
         font-size: 32rpx;
         color: #FFFFFF;
@@ -497,57 +531,62 @@ export default {
       }
     }
   }
-  
+
   // 售后弹出框样式
-  .after-sales-popup{
+  .after-sales-popup {
     width: 100%;
     background: #F8F8F8;
     border-radius: 32rpx 32rpx 0 0;
-    
-    .popup-header{
+
+    .popup-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 92rpx;
       padding: 0 32rpx;
-      .popup-title{
+
+      .popup-title {
         width: 100%;
         text-align: center;
         font-size: 32rpx;
         font-weight: bold;
         color: #333333;
       }
-      .popup-close{
+
+      .popup-close {
         font-size: 32rpx;
         color: #999999;
       }
     }
-    
-    .popup-section{
+
+    .popup-section {
       width: 686rpx;
       min-height: 202rpx;
       background: #FFFFFF;
       border-radius: 16rpx;
       margin: 0 auto 24rpx;
       padding: 24rpx;
-      .section-title{
+
+      .section-title {
         font-family: PingFang SC, PingFang SC;
         font-weight: bold;
         font-size: 28rpx;
         color: #333333;
         display: block;
         margin-bottom: 24rpx;
-        .time-limit{
+
+        .time-limit {
           font-size: 24rpx;
           color: #f53e54;
           font-weight: normal;
         }
       }
-      
-      .option-group{
+
+      .option-group {
         display: flex;
         justify-content: space-between;
-        .option-button{
+
+        .option-button {
           flex: 1;
           height: 72rpx;
           border-radius: 38rpx;
@@ -559,38 +598,44 @@ export default {
           line-height: 72rpx;
           margin: 0 10rpx;
           padding: 0;
-          &.active{
+
+          &.active {
             background: #1AD8CF;
             border-color: #1AD8CF;
             color: #FFFFFF;
           }
         }
       }
-      
-      .product-item{
+
+      .product-item {
         display: flex;
         padding: 20rpx;
         background-color: #F5F8F8;
         border-radius: 10rpx;
-        .product-image{
+
+        .product-image {
           width: 100rpx;
           height: 100rpx;
           margin-right: 20rpx;
-          image{
+
+          image {
             width: 100%;
             height: 100%;
             border-radius: 10rpx;
           }
         }
-        .product-details{
+
+        .product-details {
           flex: 1;
-          .product-name{
+
+          .product-name {
             font-size: 28rpx;
             color: #333333;
             margin-bottom: 10rpx;
             display: block;
           }
-          .product-spec{
+
+          .product-spec {
             font-size: 24rpx;
             color: #999999;
             display: block;
@@ -598,16 +643,17 @@ export default {
         }
       }
     }
-    
-    .popup-footer{
+
+    .popup-footer {
       width: 750rpx;
       height: 124rpx;
       background: #FFFFFF;
       padding: 20rpx 40rpx;
-      .next-button{
+
+      .next-button {
         width: 100%;
         height: 80rpx;
-        background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
+        background: linear-gradient(78deg, #1AD8CF 0%, #21C8C0 100%);
         border-radius: 40rpx;
         font-size: 32rpx;
         color: #FFFFFF;

+ 93 - 62
src/points/productDetails/applyExchange.vue

@@ -24,24 +24,37 @@
                     </view>
                 </view>
                 <view class="mustInput">
-                    <view class="row">
-                        <view class="title">申请原因</view>
-                        <view class="tip">
-                            <view :style="{color:selectApplyReason?'#333':'#999'}">{{ selectApplyReason?selectApplyReason:'请选择申请原因' }}</view>
-                            <image style="width: 28rpx;height: 28rpx;margin-left: 8rpx;" @click="selectApplyReasonFun('1')"
-                                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
+                    <u--form>
+                        <u-form-item required="true" label="申请原因" label-width="58" prop="selectReasonValue">
+                            <view class="tip">
+                                <view :style="{ color: selectReasonValue ? '#333' : '#999' }">{{
+                                    selectReasonValue !== null ? selectReasonValue : '请选择申请原因' }}</view>
+                                <image style="width: 28rpx;height: 28rpx;margin-left: 8rpx;"
+                                    @click="selectApplyReasonFun('1')" src="@/static/points/Keyboard_arrow_rifht.png"
+                                    mode=""></image>
+                            </view>
+                        </u-form-item>
+
+                        <u-form-item required="true" label="问题描述/凭证" label-width="86" prop="selectReasonValue">
+                            <view class="tip">
+                                <view>{{ questionOrDiscribeValue ? questionOrDiscribeValue : '请您务必上传描述和凭证' }}</view>
+                                <image style="width: 28rpx;height: 28rpx;margin-left: 8rpx;"
+                                    @click="selectApplyReasonFun('2')" src="@/static/points/Keyboard_arrow_rifht.png"
+                                    mode=""></image>
+                            </view>
+                        </u-form-item>
+
+                    </u--form>
+                    <view v-if="fileList.length > 0"
+                        style="display: flex;flex-direction: row;flex-wrap: wrap;gap: 24rpx;">
+                        <view v-for="value in fileList"
+                            style="position: relative;width: calc(25% - 20rpx);margin-top: 20rpx;display: flex;">
+                            <image style="width: 144rpx;height: 144rpx;" :src="value.url" mode="">
+                            </image>
                         </view>
-
                     </view>
-                    <view class="row">
-                        <view class="title">问题描述/凭证</view>
-                        <view class="tip">
-                            <view>请您务必上传描述和凭证</view>
-                            <image style="width: 28rpx;height: 28rpx;margin-left: 8rpx;" @click="selectApplyReasonFun('2')"
-                                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
-                        </view>
 
-                    </view>
+
                 </view>
                 <view class="returnMath">
                     <text>返回方式</text>
@@ -52,7 +65,7 @@
                 <u-button :customStyle="{
                     color: '#fff',
                     background: '#03C1B8'
-                }" @click="goHome">提交</u-button>
+                }" @click="goSubmit">提交</u-button>
 
             </view>
 
@@ -70,8 +83,9 @@ export default {
     components: {},
     data() {
         return {
-            
-            selectApplyReason:null,
+            fileList: [],
+            questionOrDiscribeValue: '',
+            selectReasonValue: null,
             title: '申请换货',
             isTop: 0,
             redemptionRulesShowPopup: false,
@@ -105,34 +119,46 @@ export default {
         }
     },
     onLoad(data) {
-        if(data){
+        if (data) {
+            //console.log(data,'66666666')
             //decodeURIComponent (data) 
-            this.selectApplyReason=data.selectReason
-           
+            if (data.questionOrDiscribeValue && data.questionOrDiscribeValue !== "null") {
+                this.questionOrDiscribeValue = data.questionOrDiscribeValue
+            }
+
+            if (data.fileList && data.fileList !== "[]") {
+                this.fileList = JSON.parse(data.fileList)
+                console.log(this.fileList, 'this.fileList')
+            }
+            if (data.selectReasonValue && data.selectReasonValue !== "null") {
+                this.selectReasonValue = data.selectReasonValue
+            }
+
+
+
         }
-        console.log(data, 'data')
     },
-    onShow(selectReason) {
-        console.log(selectReason, 'selectReason')
+    onShow() {
 
     },
     onPageScroll(e) {
         //console.log("滚动距离为:" + e.scrollTop);
         this.isTop = e.scrollTop;
     },
+    onReady() {
+        // 页面加载完成后为表单设置规则
+        this.$refs.uForm.setRules(this.rules);
+    },
 
     methods: {
-        //申请换货
-        applyExchangeFun() {
-            uni.navigateTo({
-                url: '/points/productDetails/applyExchange'
-            });
-        },
-        //申请退款
-        applyRefundFun() {
-            uni.navigateTo({
-                url: '/points/productDetails/applyRefund'
-            });
+        //提交
+        async goSubmit() {
+            if (this.receivedStatus || this.selectReasonValue || this.fileList.length === 0) {
+                uni.$u.toast('请选择申请原因\n或\n请上传描述/凭证')
+               
+            }
+
+
         },
 
         handleContentScroll(e) {
@@ -140,36 +166,14 @@ export default {
         },
         //选择申请原因
         selectApplyReasonFun(tab) {
-
-            uni.navigateTo({
-                url: `/points/productDetails/applyRefund?receivedStatus=3&tab=${tab}`
-            });
-        },
-        //返回首页
-        goHome() {
-            uni.switchTab({
-                url: '/pages/index/index'
-            });
-        },
-        //查看订单
-        checkOrder() {
             uni.navigateTo({
-                url: '/points/productDetails/pendingPayment'
-            });
+                url: `/points/productDetails/applyRefund?receivedStatus=3&tab=${tab}&selectReasonValue=${encodeURIComponent(this.selectReasonValue)}&questionOrDiscribeValue=${encodeURIComponent(this.questionOrDiscribeValue)}&fileList=${JSON.stringify(this.fileList)}`
+            })
+
         },
         //返回上一页
         autoBackFun() {
-            uni.navigateBack({ delta: 1 });
-        },
-        //去编辑地址
-        goEditAddress() {
-            uni.navigateTo({
-                url: '/pages/address/address-edit'
-            });
-            // /let str = uni.$u.queryParams(params);
-            // uni.navigateTo({
-            // 	url: `/packageA/pages/shop/coupon/couponDetail${str}`
-            // });
+            uni.navigateBack();
         },
 
     }
@@ -178,6 +182,13 @@ export default {
 
 <style></style>
 <style lang="scss" scoped>
+::v-deep .u-form-item__body__left__content__required {
+    position: absolute;
+    right: 0;
+    left: auto;
+    /* 去掉 left 定位 */
+}
+
 .centerTitle {
     font-family: PingFang SC, PingFang SC;
     font-weight: 500;
@@ -234,12 +245,32 @@ export default {
         }
     }
 
-    .mustInput {
+    ::v-deep .mustInput {
         background: #FFFFFF;
         border-radius: 16rpx 16rpx 16rpx 16rpx;
         padding: 2rpx 24rpx 26rpx 24rpx;
         margin-top: 24rpx;
 
+        .u-form-item__body__left__content__label {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            flex: 1;
+            font-weight: 400;
+            font-size: 26rpx;
+            color: #666666;
+        }
+
+        .u-form-item__body {
+            justify-content: space-between;
+            margin-top: 24rpx;
+            padding: 0;
+        }
+
+        .u-form-item__body__right {
+            flex: none;
+        }
+
         .title {
             font-weight: 400;
             font-size: 26rpx;

+ 49 - 57
src/points/productDetails/applyRefund.vue

@@ -12,7 +12,7 @@
             </u-navbar>
 
             <view class="content">
-                <view v-if="tab=='1'">
+                <view v-if="tab == '1'">
                     <view class="contentDetail">
                         <view class="tip">请选择取消订单的原因(必选):</view>
                         <u-radio-group v-model="selectReason" @change="groupChange">
@@ -38,11 +38,11 @@
                         </view>
                     </view>
                 </view>
-                <view v-if="tab=='2'">
+                <view v-if="tab == '2'">
                     <view class="Box">
                         <view class="questionOrDiscribe">
                             <view>问题与描述:</view>
-                            <u--textarea v-model="questionOrDiscribe" placeholder="请输入问题描述" :maxlength="100"
+                            <u--textarea v-model="questionOrDiscribeValue" placeholder="请输入问题描述" :maxlength="100"
                                 count></u--textarea>
 
                         </view>
@@ -57,30 +57,22 @@
                                         src="@/static/points/pictureIcon.png" mode="" @click="deletePictureFun">
                                     </image>
                                 </view> -->
+                                <Upload style="" :maxCount="6" :customImg="true" :width="'70'" :height="'70'"
+                                    :src="'/static/points/picture2.png'" @fileList="onUpload" :fileList="fileList" />
 
-                                <Upload style="" :maxCount="6"
-                                    :customImg="true" :width="'70'" :height="'70'" :src="'/static/points/picture2.png'"
-                                    @fileList="onUpload" />
 
 
                             </view>
 
-
                         </view>
                     </view>
-
-
                 </view>
-
-
-
-
             </view>
             <view class="buttonClass">
                 <u-button :customStyle="{
                     color: '#fff',
                     background: '#03C1B8'
-                }" @click="goSubmit">提交</u-button>
+                }" @click="goSubmit">{{ receivedStatus == 3 ? '确认' : '提交' }}</u-button>
 
             </view>
 
@@ -95,11 +87,12 @@ export default {
     components: { Upload },
     data() {
         return {
-            tab:null,
+            fileList: [],
+            tab: null,//1 退款/换货申请第一步  2 已收货-换货申请第二步
             headPhotoImg: [],
-            questionOrDiscribe: '',
+            questionOrDiscribeValue: '',
             selectReason: '',
-            selectReasonName: '',
+            selectReasonValue: null,
             receivedStatus: null,//1 未收到,申请退款;2.已收到货,申请退款 3.已收货-换货申请
             isTop: 0,
             list: [],
@@ -166,19 +159,32 @@ export default {
         console.log(data, 'onLoad')
         if (data) {
             this.receivedStatus = data.receivedStatus
-            this.tab=data.tab?data.tab:null
+            this.tab = data.tab ? data.tab : null
+            if (data.questionOrDiscribeValue && data.questionOrDiscribeValue !== "null") {
+                this.questionOrDiscribeValue = data.questionOrDiscribeValue
+            }
+
+            if (data.fileList && data.fileList!=="[]") {
+                this.fileList = JSON.parse(data.fileList)
+                console.log(this.fileList, 'this.fileList')
+            }
+            if (data.selectReasonValue && data.questionOrDiscribeValue !== "null") {
+                this.selectReasonValue = data.selectReasonValue
+                this.filteredList.map(m => {
+                    m.data.forEach(e => {
+                        if (this.selectReasonValue == e.text) {
+                            this.selectReason = e.value
+                        }
+                    })
+
+                })
+            }
         }
-        setTimeout(()=>{
-          console.log(this.filteredList,'2222')  
-        },2000)
-        
+
 
     },
     onShow(data) {
-        if (data) {
-            this.receivedStatus = data.receivedStatus
-            this.tab=data.tab?data.tab:null
-        }
+
         console.log(data, 'onShow')
 
 
@@ -190,9 +196,8 @@ export default {
 
     methods: {
         // upload事件
-        onUpload(e, t) {
-            console.log(e, t)
-            //this.form[t] = e.map(item => item.url);
+        onUpload(e) {
+            this.fileList = e
         },
         handleContentScroll(e) {
             this.isTop = e.detail.scrollTop > 0
@@ -205,41 +210,27 @@ export default {
             this.selectReason = val
             this.filteredList[0].data.forEach(item => {
                 if (item.value == val) {
-                    this.selectReasonName = item.text
+                    this.selectReasonValue = item.text
                 }
 
             });
-
-
-
         },
         //提交
         goSubmit() {
-            //`/pages/test/test?name=${encodeURIComponent(name)}&info=${encodeURIComponent(info)}`
-            uni.navigateTo({
-                url: `/points/productDetails/applyExchange?selectReason=${encodeURIComponent(this.selectReasonName)}`
-            });
-        },
-        //查看订单
-        checkOrder() {
-            uni.navigateTo({
-                url: '/points/productDetails/pendingPayment'
-            });
+            console.log('提交 applyRefund')
+
+            if (this.receivedStatus == 3) {
+                uni.navigateTo({
+                    url: `/points/productDetails/applyExchange?selectReasonValue=${encodeURIComponent(this.selectReasonValue)}&questionOrDiscribeValue=${encodeURIComponent(this.questionOrDiscribeValue)}&fileList=${JSON.stringify(this.fileList)}`
+                });
+
+            }
+
         },
         //返回上一页
         autoBackFun() {
             uni.navigateBack();
         },
-        //去编辑地址
-        goEditAddress() {
-            uni.navigateTo({
-                url: '/pages/address/address-edit'
-            });
-            // /let str = uni.$u.queryParams(params);
-            // uni.navigateTo({
-            // 	url: `/packageA/pages/shop/coupon/couponDetail${str}`
-            // });
-        },
 
     }
 }
@@ -332,20 +323,21 @@ export default {
         }
 
         .pictureClass {
-            
+
             .u-upload {
-                .u-upload__wrap{
+                .u-upload__wrap {
                     /* display: inline-block; */
                     flex-direction: row;
                     /* justify-content: space-between; */
                     flex-wrap: wrap;
                     /* flex: 1; */
                     gap: 24rpx;
-                    .u-upload__wrap__preview{
+
+                    .u-upload__wrap__preview {
                         position: relative;
                         width: calc(25% - 20rpx);
                     }
-                    
+
                 }
             }
 

+ 44 - 10
src/points/productDetails/components/selectProduct.vue

@@ -15,12 +15,10 @@
                 <view style="display:flex;">
                     <view>
                         <image v-if="selectedObj" style="width: 120rpx;height: 120rpx;"
-                            :src="$globalData.publicUrl + selectedObj.image"
-                            mode="">
+                            :src="$globalData.publicUrl + selectedObj.image" mode="">
                         </image>
                         <image v-else style="width: 120rpx;height: 120rpx;"
-                            :src="$globalData.publicUrl + params.productMainImage"
-                            mode="">
+                            :src="$globalData.publicUrl + params.productMainImage" mode="">
                         </image>
                     </view>
                     <view
@@ -49,8 +47,8 @@
             <view v-for="arr in specList">
                 <view class="title">{{ arr[0] }} ({{ Array.from(arr[1]).length }})</view>
                 <view style="display: flex;flex-wrap: wrap;">
-                    <view  class="specCombination" @click="selectedSpecFun(value, arr[0])"
-                        :class="selectedObj?selectedObj.specValueText.indexOf(value) != -1 ? 'active' : '':''"
+                    <view class="specCombination" @click="selectedSpecFun(value, arr[0])"
+                        :class="selectedObj ? selectedObj.specValueText.indexOf(value) != -1 ? 'active' : '' : ''"
                         v-for="value in Array.from(arr[1])">
                         {{ value }}
                     </view>
@@ -66,10 +64,35 @@
         <!--订单备注 -->
         <view class="nodeClass">
             <view class="text">订单备注</view>
-            <input type="text" maxlength="200" v-model="reasonRefusal" placeholder="选填,请填写您的备注信息,限200字" />
+            <input type="text" maxlength="200" v-model="orderRemarks" placeholder="选填,请填写您的备注信息,限200字" />
 
 
         </view>
+        <!--支付方式 -->
+        <u-radio-group class="nodeClass" v-model="selectPayMeth" @change="groupChange">
+            <view style="width: 100%;">
+                <view style="display: flex;justify-content: space-between;width: 100%;">
+                    <view style="display: flex;">
+                        <image style="width: 40rpx;height: 40rpx;" src="@/static/points/weiXin.png" mode="">
+                        </image>
+                        <view class="text" style="color: #333;margin-left: 16rpx;">微信支付</view>
+                    </view>
+                    <view>
+                        <u-radio activeColor="#03C1B8 " name='1' style="margin: 0;"></u-radio>
+                    </view>
+
+                </view>
+                <view style="display: flex;justify-content: space-between;width: 100%;margin-top: 24rpx;">
+                    <view style="display: flex;">
+                        <image style="width: 40rpx;height: 40rpx;" src="@/static/points/yue.png" mode="">
+                        </image>
+                        <view class="text" style="color: #333;margin-left: 16rpx;">余额支付</view>
+                    </view>
+                    <u-radio activeColor="#03C1B8 " name='2'></u-radio>
+                </view>
+            </view>
+        </u-radio-group>
+
         <view class="footer-bar">
 
             <u-button v-if="!selectedObj" :customStyle="{
@@ -104,6 +127,8 @@ export default {
     },
     data() {
         return {
+            orderRemarks:'',
+            selectPayMeth: '1',
             reasonRefusal: '',
             showPopup: false,
             specValueText: '',
@@ -138,7 +163,7 @@ export default {
         onShowFun(selectedObj) {
             if (selectedObj) {
                 this.selectedObj = JSON.parse(JSON.stringify(selectedObj))
-            }else{
+            } else {
                 this.selectedObj = this.params.specComboVOList[0]
             }
             const map = new Map();
@@ -152,6 +177,12 @@ export default {
                 });
             })
             this.specList = Array.from(map)
+        },
+        //立即兑换
+        redeemNowFun() {
+             this.$emit('redeemNowFun', this.selectedObj ? JSON.parse(JSON.stringify(this.selectedObj)) : null)
+    
+
         },
         //点击选规则
         selectedSpecFun(specValue, specName) {
@@ -328,16 +359,19 @@ export default {
         }
     }
 
-    .nodeClass {
+    ::v-deep .nodeClass {
         margin-top: 24rpx;
         padding: 24rpx;
-        height: 92rpx;
         background: #FFFFFF;
         border-radius: 20rpx 20rpx 20rpx 20rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
 
+        .u-radio__icon-wrap {
+            margin: 0;
+        }
+
         .text {
             width: 115rpx;
             font-weight: 500;

+ 54 - 8
src/points/productDetails/index.vue

@@ -26,7 +26,8 @@
                 params.paymentType == 3 ? params.priceMoney + '元' + '+' +
                   params.pricePoint + '积分' : null }}
           </text>
-          <text class="deletePriceClass">{{selectedObj?selectedObj.originPrice:params.specComboVOList?params.specComboVOList[0].originPrice:null}}元</text>
+          <text class="deletePriceClass">{{ selectedObj ? selectedObj.originPrice : params.specComboVOList ?
+            params.specComboVOList[0].originPrice : null }}元</text>
           <view class="productName"> {{ params.name }}</view>
           <view class="discribeClass">{{ params.summary }}</view>
           <view class="serviceClass">
@@ -48,7 +49,8 @@
               <image style="width: 28rpx;height: 28rpx;" @click="selectProductShowFun"
                 src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
             </view>
-            <view  v-if="selectedObj" style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
+            <view v-if="selectedObj"
+              style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
               <view style="display: flex;align-items: center;">
                 <text style="color: #666666;">规格</text>
                 <ImageItem class="imgClass" :src="$globalData.publicUrl + selectedObj.image" />
@@ -119,7 +121,7 @@
       </view>
 
       <view class="footer-bar">
-        <u-button v-if="selectedObj?selectedObj.stock:params.stock" :customStyle="{
+        <u-button v-if="selectedObj ? selectedObj.stock : params.stock" :customStyle="{
           color: '#fff',
           background: '#03C1B8'
         }" @click="redeemNowFun">立即兑换</u-button>
@@ -133,7 +135,8 @@
         <RedemptionRules ref="redemptionRulesRef"></RedemptionRules>
       </u-popup>
       <u-popup :show="selectProductShowPopup" mode="bottom" round="10">
-        <SelectProduct :params="params" ref="selectProductRef" @closeSelectProduct="closeSelectProduct"></SelectProduct>
+        <SelectProduct :params="params" ref="selectProductRef" @redeemNowFun="redeemNowFun"
+          @closeSelectProduct="closeSelectProduct"></SelectProduct>
       </u-popup>
 
     </scroll-view>
@@ -148,7 +151,7 @@
 import ImageItem from "@/components/swiper/components/image.vue";
 import RedemptionRules from "./components/redemptionRules.vue";
 import SelectProduct from "./components/selectProduct.vue";
-import { productGetById } from '@/api/points'
+import { productGetById, productOrderCreate } from '@/api/points'
 
 export default {
   components: { ImageItem, RedemptionRules, SelectProduct },
@@ -212,11 +215,55 @@ export default {
       this.redemptionRulesShowPopup = true
     },
     //立即兑换
-    redeemNowFun() {
+    redeemNowFun(selectedObj) {
+      if (selectedObj) this.selectedObj = selectedObj
       if (this.selectedObj) {
+        let params = {}
+        ////用户openId
+        params.openId = uni.getStorageSync('wx_copenid');
+        //地址ID
+        params.addressId = '11';
+        params.productId = this.params.id;
+        params.name = this.params.name;
+        params.productMainImage = this.params.productMainImage;
+        //选中的SKU ID
+        params.skuId = this.selectedObj.index;
+        // SKU列表(规格组合明细)
+        params.specNameValueLis = this.selectedObj.specNameValueList;
+        ////购买数量
+        params.quantity = 1;
+        ////支付方式:1微信支付 2账户余额
+        params.payType = Number(this.$refs.selectProductRef.selectPayMeth);
+        //运费
+        params.freightAmount = this.params.freight;
+        // 总金额
+        params.totalAmount = this.selectedObj.originPrice;
+        // 支付金额
+        params.payAmount = this.selectedObj.priceMoney;
+        // 使用的积分
+        params.pointsUsed = this.selectedObj.pricePoint;
+        //买家备注信息
+        params.buyerRemark = this.$refs.selectProductRef.orderRemarks;
         uni.navigateTo({
           url: '/points/productDetails/paymentSuccessful'
         });
+        console.log(params, 'params')
+        return
+        
+        
+        productOrderCreate(params).then(res => {
+          
+          uni.requestPayment({
+            "provider": "wxpay",
+            "orderInfo": {},
+            success(res) { },
+            fail(e) { }
+          })
+          // uni.navigateTo({
+          //   url: '/points/productDetails/paymentSuccessful'
+          // });
+        })
+
       } else {
         this.selectProductShowPopup = true
         this.$nextTick(() => {
@@ -234,10 +281,9 @@ export default {
     },
     //关闭选择商品页
     closeSelectProduct(selectedObj) {
-      if(selectedObj){
+      if (selectedObj) {
         this.selectedObj = selectedObj
       }
-      
       this.selectProductShowPopup = false
     },
     //去我的地址页面

+ 2 - 26
src/points/productDetails/paymentSuccessful.vue

@@ -52,15 +52,6 @@
                     background: ''
                 }" @click="checkOrder">查看订单</u-button>
 
-                <u-button :customStyle="{
-                    color: '#03C1B8 ',
-                    background: ''
-                }" @click="applyRefundFun">申请退款</u-button>
-
-                <u-button :customStyle="{
-                    color: '#03C1B8 ',
-                    background: ''
-                }" @click="applyExchangeFun">申请换货</u-button>
             </view>
 
         </scroll-view>
@@ -120,24 +111,9 @@ export default {
     },
 
     methods: {
-        //申请换货
-        applyExchangeFun() {
-            uni.navigateTo({
-                url: '/points/productDetails/applyExchange'
-            });
-        },
-        //申请退款
-        applyRefundFun() {
-            uni.navigateTo({
-                url: `/points/productDetails/applyRefund?receivedStatus=1&tab=1`
-            });
-        },
 
         handleContentScroll(e) {
             this.isTop = e.detail.scrollTop > 0
-        },
-        clichFun() {
-
         },
         //返回首页
         goHome() {
@@ -145,10 +121,10 @@ export default {
                 url: '/pages/index/index'
             });
         },
-        //查看订单
+        //查看订单 //url: '/points/productDetails/pendingPayment'
         checkOrder() {
             uni.navigateTo({
-                url: '/points/productDetails/pendingPayment'
+                url: '/points/order/orderList'
             });
         },
         //返回上一页

二进制
src/static/points/weiXin.png


二进制
src/static/points/yue.png