安装弹窗插件

pages/group_order/refund.vue

@@ -34,7 +34,12 @@
 			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
 			<view class="refundBoxD">
 				<view>退款原因 <text style="color: #FF4C11;">*</text> </view>
-				<view>请至少选择一项 <u-icon name="arrow-right" color="#000" size="28"></u-icon></view>
+				<view class="as-input" @click="openFood">
+					<view class="placeholder" v-if="fruitName==undefined||fruitName==''">请至少选择一项</view>
+					<view class="as-content" v-else>{{fruitName}}</view>
+					<!-- <uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons> -->
+					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
+				</view>
 			</view>
 			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
 			<view class="refundBoxE">
@@ -50,16 +55,46 @@
 				提交订单
 			</button>
 		</view>
+		<niceui-popup-select ref="showFruit" :columns="foods" :selectValue="fruitId" :is-search="false"
+			:option="{label:'name', value:'id'}" @confirm="confirmFruit"></niceui-popup-select>
 	</view>
 </template>
 
 <script>
+	import '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
 	export default {
 		data() {
 			return {
 				Unumbervalue: 1,
 				tareaValue: '',
-				fontNum: 0
+				fontNum: 0,
+				foods: [{
+						id: '1',
+						name: '计划有变没时间消费'
+					},
+					{
+						id: '2',
+						name: '买多了/买错了'
+					},
+					{
+						id: '3',
+						name: '担心安全问题（天气等）'
+					}, {
+						id: '3',
+						name: '担心安全问题（天气等）'
+					}, {
+						id: '3',
+						name: '担心安全问题（天气等）'
+					}, {
+						id: '3',
+						name: '担心安全问题（天气等）'
+					}, {
+						id: '3',
+						name: '担心安全问题（天气等）'
+					},
+				],
+				fruitId: [],
+				fruitName:''
 			}
 		},
 		methods: {
@@ -67,7 +102,16 @@
 			sumfontnum(e) {
 				console.log(e)
 				this.fontNum = e.detail.value.length
-			}
+			},
+			confirmFruit(value, data) {
+				this.fruitId = value
+				this.fruitName = data.map(it => it.name)
+				this.$refs.showFruit.closePopup()
+			},
+
+			openFood() {
+				this.$refs.showFruit.showPopup()
+			},
 		}
 	}
 </script>
@@ -143,12 +187,14 @@
 			padding-top: 32rpx;
 
 			>view:first-child {
+				.df;
+				width: 160rpx;
 				font-weight: 500;
 				font-size: 28rpx;
 			}
 
 			>view:last-child {
-				.df();
+				// .df();
 				font-weight: 400;
 				font-size: 24rpx;
 				color: #333333;
@@ -218,4 +264,60 @@
 		right: 0;
 		top: 30%;
 	}
+
+	radio-group,
+	checkbox-group {
+		width: 92%;
+	}
+</style>
+<style lang="scss" scoped>
+	.content {
+		background-color: #f7f7f7;
+		width: 100vw;
+		height: 100vh;
+
+	}
+
+	.uni-title {
+		font-size: 33rpx;
+		font-weight: bold;
+		padding: 20rpx 20rpx;
+	}
+
+	.uni-list-cell {
+		background-color: #fff;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 20rpx;
+
+		.uni-list-cell-left {
+			font-size: 35rpx;
+		}
+	}
+
+	.uni-list-cell-db {
+		flex: 1
+	}
+
+	.as-input {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+
+		.customer-icon {
+			padding: 0 0 0 5rpx;
+		}
+
+		.placeholder {
+			font-size: 33rpx;
+			color: #999;
+		}
+
+		.as-content {
+			color: #333;
+			font-size: 33rpx;
+		}
+	}
 </style>