//

components/choose-Cade/choose-Cade.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="boxa">
+		<view class="top_kbox">
+			<block v-for="(item,i) in newlist" :key="i">
+				<view class="ibox" @tap="alertnum(i)" :class="[i== i1?'actives':'']">
+					<text class="uni_14">{{item}}</text>
+					<image v-if="i != i1" class="ii" src="/static/choose-Cade/choose-Cadex.png" mode=""></image>
+					<image v-else class="ii" src="/static/choose-Cade/choose-Cades.png" mode=""></image>
+				</view>
+			</block>
+		</view>
+		<view :class="[show?'list_boxs2':'list_boxs']">
+			<view class="lione">
+				<block v-for="(item,i) in listchild" :key="i">
+					<view class="mli" @tap="chooseOne(i)">
+						<text :class="[i== i2?'actives':'']" class="uni_14">{{item}}</text>
+						<image v-if="i == i2" class="ii" src="/static/choose-Cade/choose-Cadecc.png" mode=""></image>
+					</view>
+				</block>
+			</view>
+			<view class="hideA" @tap="hide">
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['list', 'arr'], //数组  arr
+		data() {
+			return {
+				i1: null,
+				i2: null,
+				show: false,
+				listchild: [],
+				newlist: this.list,
+				origin:this.list,
+			}
+		},
+		watch: {
+			list(val) { //message即为父组件的值，val参数为值
+				console.log(this.list);
+				this.list = val //将父组件的值赋给childrenMessage 子组件的值
+				this.newlist = this.list;
+			}
+		},
+		methods: {
+			alertnum(i) {
+				console.log(i, this.newlist,this.i1);
+				if (this.i1 != i) {
+					this.listchild = [];
+					this.i1 = i;
+					this.listchild = this.arr[i];
+					this.i2 = null;
+					this.show = true;
+					let ins = this.listchild.indexOf(this.newlist[i]);
+					if (ins > -1) {
+						this.i2 = ins
+					}
+				}
+
+			},
+			chooseOne(i) {
+				this.i2 = i;
+				this.newlist[this.i1] = this.listchild[i];
+				console.log(this.i2, this.newlist);
+				this.$emit('chooseLike', [this.i1, this.i2])
+			},
+			hide() {
+				this.show = false;
+				this.i1 = null;
+				this.i2 = null;
+			}
+		}
+	}
+</script>
+
+<style>
+	.hideA {
+		height: calc(100% - 310upx);
+	}
+
+	.mli {
+		/* border: 1upx solid red; */
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 22upx 0;
+	}
+
+	.lione {
+		background-color: #fff;
+		/* height: 262upx; */
+		padding: 10upx 40upx;
+
+	}
+
+	.list_boxs {
+		background-color: rgba(84, 80, 80, 0.48);
+		position: fixed;
+		height: calc(100%);
+		width: 100%;
+		z-index: 88;
+		transition: all .5s;
+		transform: translateY(-120%);
+	}
+
+	.list_boxs2 {
+		background-color: rgba(84, 80, 80, 0.48);
+		position: fixed;
+		height: calc(100%);
+		width: 100%;
+		z-index: 88;
+		transform: translateY(0);
+		transition: all .5s;
+	}
+
+	.ii {
+		width: 30upx;
+		height: 30upx;
+		display: block;
+		margin-left: 12upx;
+	}
+
+	.actives {
+		color: #F0AD4E;
+	}
+
+	.ibox {
+		display: flex;
+		align-items: center;
+	}
+
+	.top_kbox {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #FFFFFF;
+		padding: 28upx 5%;
+		position: fixed;
+		top: 0upx;
+		width: 90%;
+		z-index: 99;
+		/* #ifdef APP-PLUS */
+		top: 0;
+		/* #endif */
+	}
+
+	.boxa {
+		padding-top: 84upx;
+		position: relative;
+	}
+</style>

components/neil-modal/neil-modal.vue

@@ -0,0 +1,260 @@
+<template>
+    <view class="neil-modal" @touchmove.stop.prevent="bindTouchmove" :class="{'neil-modal--show':isOpen}">
+        <view class="neil-modal__mask" @click="clickMask"></view>
+        <view class="neil-modal__container">
+            <view class="neil-modal__header" v-if="title.length > 0">{{title}}</view>
+            <view class="neil-modal__content" :class="content ? 'neil-modal--padding' : ''" :style="{textAlign:align}">
+                <template v-if="content">
+                    <text class="modal-content">{{content}}</text>
+                </template>
+                <template v-else>
+                    <slot />
+                </template>
+            </view>
+            <view class="neil-modal__footer">
+                <view v-if="showCancel" class="neil-modal__footer-left" @click="clickLeft" :style="{color:cancelColor}"
+                    hover-class="neil-modal__footer-hover" :hover-start-time="20" :hover-stay-time="70">
+                    {{cancelText}}
+                </view>
+                <view class="neil-modal__footer-right" @click="clickRight" :style="{color:confirmColor}" hover-class="neil-modal__footer-hover"
+                    :hover-start-time="20" :hover-stay-time="70">
+                    {{confirmText}}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'neil-modal',
+        props: {
+            title: { //标题
+                type: String,
+                default: ''
+            },
+            content: String, //提示的内容
+            align: { //content 的对齐方式left/center/right
+                type: String,
+                default: 'left'
+            },
+            cancelText: { //取消按钮的文字，默认为"取消"
+                type: String,
+                default: '取消'
+            },
+            cancelColor: { //取消按钮颜色
+                type: String,
+                default: '#333333'
+            },
+            confirmText: { //确定按钮的文字，默认为"确定"
+                type: String,
+                default: '确定'
+            },
+            confirmColor: { //确认按钮颜色
+                type: String,
+                default: '#007aff'
+            },
+            showCancel: { //是否显示取消按钮，默认为 true
+                type: [Boolean, String],
+                default: true
+            },
+            show: { //是否显示模态框
+                type: [Boolean, String],
+                default: true
+            },
+            autoClose: { //点击遮罩是否自动关闭弹窗
+                type: [Boolean, String],
+                default: true
+            }
+        },
+        data() {
+            return {
+                isOpen: false
+            }
+        },
+        watch: {
+            show(val) {
+				this.isOpen = val
+            },
+        },
+        created() {
+        	this.isOpen = this.show
+        },
+        methods: {
+            bindTouchmove() {},
+            clickLeft() {
+                setTimeout(() => {
+                	this.$emit('cancel')
+                }, 200)
+                this.closeModal()
+            },
+            clickRight() {
+                setTimeout(() => {
+                	this.$emit('confirm')
+                }, 200)
+                this.closeModal()
+            },
+			clickMask(){
+				if(this.autoClose){
+					this.closeModal()
+				}
+			},
+            closeModal() {
+                this.showAnimation = false
+				this.isOpen = false
+				this.$emit('close',this.isOpen)
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    $bg-color-mask:rgba(0, 0, 0, 0.5); //遮罩颜色
+    $bg-color-hover:#f1f1f1; //点击状态颜色
+
+    .neil-modal {
+        position: fixed;
+		visibility: hidden;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+		transition:visibility 200ms ease-in;
+		
+		&.neil-modal--show{
+			visibility: visible;
+		}
+
+        &__header {
+            position: relative;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding: 18upx 24upx;
+            line-height: 1.5;
+            color: #333;
+            font-size: 32upx;
+            text-align: center;
+
+            &::after {
+                content: " ";
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                height: 1px;
+                border-top: 1px solid #e5e5e5;
+                transform-origin: 0 0;
+                transform: scaleY(.5);
+            }
+        }
+
+        &__container {
+            position: absolute;
+			z-index: 999;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) ;
+            transition: transform 0.3s;
+            width: 640upx;
+            border-radius: 20upx;
+            background-color: #fff;
+            overflow: hidden;
+            opacity: 0;
+            transition: opacity 200ms ease-in;
+        }
+
+        &__content {
+            position: relative;
+            color: #333;
+            font-size: 28upx;
+            box-sizing: border-box;
+            line-height: 1.5;
+
+            &::after {
+                content: " ";
+                position: absolute;
+                left: 0;
+                bottom: -1px;
+                right: 0;
+                height: 1px;
+                border-bottom: 1px solid #e5e5e5;
+                transform-origin: 0 0;
+                transform: scaleY(.5);
+            }
+        }
+
+        &__footer {
+            position: relative;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #333;
+            font-size: 32upx;
+            display: flex;
+            flex-direction: row;
+
+            &-left,
+            &-right {
+                position: relative;
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                height: 88upx;
+                font-size: 28upx;
+                line-height: 88upx;
+                text-align: center;
+                background-color: #fff;
+                color: #333;
+            }
+
+            &-right {
+                color: #007aff;
+            }
+
+            &-left::after {
+                content: " ";
+                position: absolute;
+                right: -1px;
+                top: 0;
+                width: 1px;
+                bottom: 0;
+                border-right: 1px solid #e5e5e5;
+                transform-origin: 0 0;
+                transform: scaleX(.5);
+            }
+
+            &-hover {
+                background-color: $bg-color-hover;
+            }
+        }
+
+        &__mask {
+            display: block;
+            position: absolute;
+			z-index: 998;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: $bg-color-mask;
+            opacity: 0;
+            transition: opacity 200ms ease-in;
+			&.neil-modal--show{
+				opacity: 1;
+			}
+        }
+
+        &--padding {
+            padding: 32upx 24upx;
+            min-height: 90upx;
+        }
+		&--show {
+		    .neil-modal__container,.neil-modal__mask{
+				opacity: 1;
+			}
+		}
+    }
+</style>