From 8260a3fbc89d1ed8c54ebb241f76006159a2641d Mon Sep 17 00:00:00 2001
From: chenkun <3289431190@qq.com>
Date: Wed, 11 Sep 2024 00:44:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=80=E6=8D=A2=E8=B4=A7=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=88=90=E5=8A=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/commodity/commoditySelect.vue       |  93 +++
 pages_order/order/refundsOrExchange.vue            | 655 +++++++++++----------
 2 files changed, 446 insertions(+), 302 deletions(-)
 create mode 100644 pages_order/components/commodity/commoditySelect.vue

diff --git a/pages_order/components/commodity/commoditySelect.vue b/pages_order/components/commodity/commoditySelect.vue
new file mode 100644
index 0000000..c068258
--- /dev/null
+++ b/pages_order/components/commodity/commoditySelect.vue
@@ -0,0 +1,93 @@
+<template>
+  <view style="">
+    <view v-for="item in commodityList" :key="item.title" class="address-item">
+      <view class="itme1" @click="selectSp(item)">
+        <view class="left">
+          <img src="../../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;">
+        </view>
+        <view class="center">
+          <view>{{ item.title }}</view>
+          <view>{{ item.smallTitle }}</view>
+        </view>
+        <view class="right">×{{item.total}}</view>
+      </view>
+      <uv-line></uv-line>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    commodityList: {
+      default: [],
+      type: Array,
+    }
+  },
+  data() {
+    return {
+      selectAddress: 0,
+    }
+  },
+  methods: {
+    // 打开商品选择
+    openCommodity() {
+      this.$emit('openSpPopup')
+    },
+    // 选择了商品
+    selectSp(e) {
+      console.log(this.commodityList,"this.csss")
+      console.log(e, '选择了商品')
+      this.$emit('selectSp', e)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.itme1 {
+  display: flex;
+  height: 150rpx;
+  width: 100vw;
+  background-color: #ffffff;
+
+  .left {
+    padding: 40rpx;
+    width: 20%;
+    border-radius: 10rpx;
+    background-color: #ffffff;
+  }
+
+  .center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20rpx;
+    width: 70%;
+    padding: 0rpx 0 0 20rpx;
+    background-color: #ffffff;
+
+    // 给第一个 view 设置样式
+    > view:first-of-type {
+      font-size: 36rpx;
+      color: #333;
+    }
+
+    // 给第二个 view 设置样式
+    > view:nth-of-type(2) {
+      font-size: 28rpx;
+      color: #666666;
+    }
+  }
+
+  .right {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 10%;
+    color: #666666;
+    background-color: #ffffff;
+  }
+}
+
+</style>
diff --git a/pages_order/order/refundsOrExchange.vue b/pages_order/order/refundsOrExchange.vue
index 49e5335..975dbfb 100644
--- a/pages_order/order/refundsOrExchange.vue
+++ b/pages_order/order/refundsOrExchange.vue
@@ -1,312 +1,363 @@
 <template>
-	<view class="refundsOrExchange">
-		<navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack" />
-
-		<view class="frame">
-			<!-- 商品简介 -->
-			<view class="itme1">
-				<view class="left">
-					<img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;">
-				</view>
-				<view class="center">
-					<view>桌布退货</view>
-					<view>产品规格：120*4*75【桌子尺寸】</view>
-				</view>
-				<view class="right">×3</view>
-			</view>
-
-			<!-- 申请类型&申请原因 -->
-			<view class="item2">
-				<view class="type">
-					<span>申请类型</span>
-					<span>退货退款</span>
-				</view>
-				<uv-line></uv-line>
-				<view class="reason">
-					<view>申请原因</view>
-					<view>
-						<uv-input placeholder="请输入申请原因" border="none" clearable></uv-input>
-					</view>
-				</view>
-			</view>
-
-			<!--  退货数量&申请金额-->
-			<view class="item3">
-				<view class="type">
-					<span>{{titleIndex==0?'退货数量' :'换货数量'}}</span>
-					<span>
+  <view class="refundsOrExchange">
+    <navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack"/>
+
+    <view class="frame">
+
+      <!-- 商品简介 -->
+      <view class="itme1" @click="openSpPopup">
+        <view class="left">
+          <img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;">
+        </view>
+        <view class="center">
+          <view>{{ commodity.title }}</view>
+          <view>{{ commodity.smallTitle }}</view>
+        </view>
+        <view class="right">×{{ commodity.total }}</view>
+      </view>
+
+
+      <!--<commoditySelect ></commoditySelect>-->
+
+      <!-- 申请类型&申请原因 -->
+      <view class="item2">
+        <view class="type">
+          <span>申请类型</span>
+          <span>退货退款</span>
+        </view>
+        <uv-line></uv-line>
+        <view class="reason">
+          <view>申请原因</view>
+          <view>
+            <uv-input placeholder="请输入申请原因" border="none" clearable></uv-input>
+          </view>
+        </view>
+      </view>
+
+      <!--  退货数量&申请金额-->
+      <view class="item3">
+        <view class="type">
+          <span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span>
+          <span>
 						<uv-number-box :min="1" :max="100"></uv-number-box>
 					</span>
-				</view>
-				<uv-line v-if='titleIndex == 0 ? true :false'></uv-line>
-				<view class="reason" v-if='titleIndex == 0 ? true :false'>
-					<view>申请原因</view>
-					<view>
-						<uv-input disabled placeholder="$" border="none" clearable></uv-input>
-					</view>
-				</view>
-			</view>
-
-			<!-- 申请说明 -->
-			<view class="item4">
-				<view>申请说明(选填)</view>
-				<view>
-					<uv-input placeholder="请您详细填写申请说明" border="none" clearable></uv-input>
-				</view>
-				<view>
-					<uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
-						@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
-				</view>
-			</view>
-
-
-			<!-- 联系电话 -->
-			<view class="item5">
-				<view class="phone">
-					<view>联系电话</view>
-					<view>
-						<uv-input placeholder="请输入联系电话" border="none" clearable></uv-input>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 底部按钮 -->
-		<bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor'
-			:fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width"
-			:height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius'>
-		</bottomBtn>
-
-
-	</view>
+        </view>
+        <uv-line v-if='titleIndex == 0 ? true :false'></uv-line>
+        <view class="reason" v-if='titleIndex == 0 ? true :false'>
+          <view>申请原因</view>
+          <view>
+            <uv-input disabled placeholder="$" border="none" clearable></uv-input>
+          </view>
+        </view>
+      </view>
+
+      <!-- 申请说明 -->
+      <view class="item4">
+        <view>申请说明(选填)</view>
+        <view>
+          <uv-input placeholder="请您详细填写申请说明" border="none" clearable></uv-input>
+        </view>
+        <view>
+          <uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
+                     @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
+        </view>
+      </view>
+
+
+      <!-- 联系电话 -->
+      <view class="item5">
+        <view class="phone">
+          <view>联系电话</view>
+          <view>
+            <uv-input placeholder="请输入联系电话" border="none" clearable></uv-input>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor'
+               :fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width"
+               :height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius'>
+    </bottomBtn>
+
+    <!--商品选择-->
+    <uv-popup ref="spPopup" :round="30">
+      <commoditySelect
+          :commodityList="commodityList"
+          @selectSp="selectCommodity"
+      />
+    </uv-popup>
+
+  </view>
 </template>
 
 <script>
-	import bottomBtn from "../../components/bottom/bottomBtn.vue"
-	export default {
-		onLoad(option) {
-			this.titleIndex = option.index
-		},
-		components: {
-			bottomBtn
-		},
-		data() {
-			return {
-				titleIndex: 0,
-				title: ['申请换货', '申请退货'],
-				fileList: [],
-				bottomBtnStyle: {
-					color: '#FFF',
-					backgroundColor: '#fd5100',
-					fontSize: '34rpx',
-					text: '提交申请',
-					width: '400rpx',
-					height: '80rpx',
-					borderRadius: '100rpx'
-				},
-			}
-		},
-		mounted() {
-
-		},
-		methods: {
-			confirm() {
-				console.log("===");
-			},
-			deleteImage(e) {
-				this.fileList.splice(e.index, 1)
-			},
-			afterRead(e) {
-				let self = this
-				e.file.forEach(file => {
-					self.$Oss.ossUpload(file.url).then(url => {
-						self.fileList.push({
-							url
-						})
-					})
-				})
-			},
-		}
-	}
+import bottomBtn from "../../components/bottom/bottomBtn.vue"
+import commoditySelect from "../components/commodity/commoditySelect.vue"
+
+export default {
+  onLoad(option) {
+    this.titleIndex = option.index
+  },
+  components: {
+    bottomBtn, commoditySelect
+  },
+  data() {
+    return {
+      titleIndex: 0,
+      title: ['申请换货', '申请退货'],
+      fileList: [],
+      bottomBtnStyle: {
+        color: '#FFF',
+        backgroundColor: '#fd5100',
+        fontSize: '34rpx',
+        text: '提交申请',
+        width: '400rpx',
+        height: '80rpx',
+        borderRadius: '100rpx'
+      },
+      commodityList: [
+        {
+
+          title: '商品名称',
+          smallTitle: '产品规格：120*4*75【桌子尺寸】',
+          total:1,
+        },
+        {
+          title: '商品名称1',
+          smallTitle: '产品规格：120*4*75【桌子尺寸】',
+          total:1,
+        },
+        {
+          title: '商品名称2',
+          smallTitle: '产品规格：120*4*75【桌子尺寸】',
+          total:1,
+
+        }
+      ],
+      commodity: {
+        title: '商品名称',
+        smallTitle: '产品规格：120*4*75【桌子尺寸】',
+        total:1,
+
+      },
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+    openSpPopup() {
+      this.$refs.spPopup.open('bottom');
+    },
+
+    // 选择退换货商品回调
+    selectCommodity(e) {
+      console.log(e, "selectCommodity--e")
+      this.commodity = e
+      this.$refs.spPopup.close()
+    },
+
+    confirm() {
+      console.log("===");
+    },
+    deleteImage(e) {
+      this.fileList.splice(e.index, 1)
+    },
+    afterRead(e) {
+      let self = this
+      e.file.forEach(file => {
+        self.$Oss.ossUpload(file.url).then(url => {
+          self.fileList.push({
+            url
+          })
+        })
+      })
+    },
+  }
+}
 </script>
 
 <style lang="less" scoped>
-	* {
-		box-sizing: border-box;
-	}
-
-	.refundsOrExchange {
-		.frame {
-
-			display: flex;
-			flex-direction: column;
-			gap: 30rpx;
-			width: 100%;
-			padding-top: 40rpx;
-			background-color: #f5f5f5;
-
-
-			.itme1 {
-				display: flex;
-				height: 200rpx;
-				background-color: #ffffff;
-
-				.left {
-					padding: 40rpx;
-					width: 20%;
-					border-radius: 10rpx;
-					background-color: #ffffff;
-				}
-
-				.center {
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-					gap: 20rpx;
-					width: 60%;
-					padding: 0rpx 0 0 20rpx;
-					background-color: #ffffff;
-
-					// 给第一个 view 设置样式
-					>view:first-of-type {
-						font-size: 36rpx;
-						color: #333;
-					}
-
-					// 给第二个 view 设置样式
-					>view:nth-of-type(2) {
-						font-size: 28rpx;
-						color: #666666;
-					}
-				}
-
-				.right {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					width: 10%;
-					color: #666666;
-					background-color: #ffffff;
-				}
-			}
-
-			.item2 {
-				width: 100vw;
-
-				.type {
-					display: flex;
-					align-items: center;
-					background-color: #FFF;
-					height: 80rpx;
-					padding: 0 0 0 20rpx;
-
-					>span:nth-of-type(1) {
-						width: 30%;
-					}
-
-					>span:nth-of-type(2) {
-						width: 70%;
-					}
-				}
-
-				.reason {
-					display: flex;
-					align-items: center;
-					background-color: #FFF;
-					height: 80rpx;
-					// margin: 10rpx 0 0 0;
-					padding: 10rpx 0 0 20rpx;
-
-					>view:nth-of-type(1) {
-						width: 30%;
-					}
-
-					>view:nth-of-type(2) {
-						width: 70%;
-						padding: 0 20rpx 0 0;
-					}
-				}
-			}
-
-			.item3 {
-				width: 100vw;
-
-				.type {
-					display: flex;
-					align-items: center;
-					background-color: #FFF;
-					height: 80rpx;
-					padding: 0 0 0 20rpx;
-
-					>span:nth-of-type(1) {
-						width: 70%;
-					}
-
-					>span:nth-of-type(2) {
-						width: 30%;
-					}
-				}
-
-				.reason {
-					display: flex;
-					align-items: center;
-					background-color: #FFF;
-					height: 80rpx;
-					// margin: 10rpx 0 0 0;
-					padding: 10rpx 0 0 20rpx;
-
-					>view:nth-of-type(1) {
-						width: 30%;
-					}
-
-					>view:nth-of-type(2) {
-						width: 70%;
-						padding: 0 20rpx 0 0;
-					}
-				}
-			}
-
-			.item4 {
-				display: flex;
-				flex-direction: column;
-				padding: 10rpx 0 0 20rpx;
-				background-color: #FFF;
-
-				>view:nth-of-type(1) {
-					background-color: #FFF;
-				}
-
-				>view:nth-of-type(2) {
-					margin: 10rpx 0 10rpx 0;
-					background-color: #FFF;
-
-				}
-			}
-
-			.item5 {
-				display: flex;
-				flex-direction: column;
-				padding: 0 0 0 20rpx;
-				background-color: #FFF;
-
-				.phone {
-					display: flex;
-					align-items: center;
-					background-color: #FFF;
-					height: 80rpx;
-					// margin: 10rpx 0 0 0;
-					padding: 10rpx 0 0 20rpx;
-
-					>view:nth-of-type(1) {
-						width: 30%;
-					}
-
-					>view:nth-of-type(2) {
-						width: 70%;
-						padding: 0 20rpx 0 0;
-					}
-				}
-			}
-		}
-	}
+* {
+  box-sizing: border-box;
+}
+
+.refundsOrExchange {
+  .frame {
+
+    display: flex;
+    flex-direction: column;
+    gap: 30rpx;
+    width: 100%;
+    padding-top: 40rpx;
+    background-color: #f5f5f5;
+
+
+    .itme1 {
+      display: flex;
+      height: 200rpx;
+      background-color: #ffffff;
+
+      .left {
+        padding: 40rpx;
+        width: 20%;
+        border-radius: 10rpx;
+        background-color: #ffffff;
+      }
+
+      .center {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 20rpx;
+        width: 60%;
+        padding: 0rpx 0 0 20rpx;
+        background-color: #ffffff;
+
+        // 给第一个 view 设置样式
+        > view:first-of-type {
+          font-size: 36rpx;
+          color: #333;
+        }
+
+        // 给第二个 view 设置样式
+        > view:nth-of-type(2) {
+          font-size: 28rpx;
+          color: #666666;
+        }
+      }
+
+      .right {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 10%;
+        color: #666666;
+        background-color: #ffffff;
+      }
+    }
+
+    .item2 {
+      width: 100vw;
+
+      .type {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        padding: 0 0 0 20rpx;
+
+        > span:nth-of-type(1) {
+          width: 30%;
+        }
+
+        > span:nth-of-type(2) {
+          width: 70%;
+        }
+      }
+
+      .reason {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        > view:nth-of-type(1) {
+          width: 30%;
+        }
+
+        > view:nth-of-type(2) {
+          width: 70%;
+          padding: 0 20rpx 0 0;
+        }
+      }
+    }
+
+    .item3 {
+      width: 100vw;
+
+      .type {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        padding: 0 0 0 20rpx;
+
+        > span:nth-of-type(1) {
+          width: 70%;
+        }
+
+        > span:nth-of-type(2) {
+          width: 30%;
+        }
+      }
+
+      .reason {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        > view:nth-of-type(1) {
+          width: 30%;
+        }
+
+        > view:nth-of-type(2) {
+          width: 70%;
+          padding: 0 20rpx 0 0;
+        }
+      }
+    }
+
+    .item4 {
+      display: flex;
+      flex-direction: column;
+      padding: 10rpx 0 0 20rpx;
+      background-color: #FFF;
+
+      > view:nth-of-type(1) {
+        background-color: #FFF;
+      }
+
+      > view:nth-of-type(2) {
+        margin: 10rpx 0 10rpx 0;
+        background-color: #FFF;
+
+      }
+    }
+
+    .item5 {
+      display: flex;
+      flex-direction: column;
+      padding: 0 0 0 20rpx;
+      background-color: #FFF;
+
+      .phone {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        > view:nth-of-type(1) {
+          width: 30%;
+        }
+
+        > view:nth-of-type(2) {
+          width: 70%;
+          padding: 0 20rpx 0 0;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file