diff --git a/src/common/classify.data.js b/src/common/classify.data.js index 205751575505d72978175178e3d0ed5ae397a5ac..15eb77045c65841200aae7441255c22565c8828d 100644 --- a/src/common/classify.data.js +++ b/src/common/classify.data.js @@ -4,13 +4,16 @@ export default[ "item": [ { "fieldsTitle": "Aå—裙", + "fieldsName":"name", "fieldsType":"input", + "fieldsValue":"", "key": "Aå—裙", "icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg", "cat": 10 }, { "fieldsTitle": "Tæ¤", + "fieldsName":"number", "fieldsType":"input", "key": "Tæ¤", "icon": "https://cdn.uviewui.com/uview/common/classify/1/2.jpg", diff --git a/src/components/createCom/XhInput.vue b/src/components/createCom/XhInput.vue index 9010cb4e08c4cbbef120af862193aba70b8d301b..a2e772ebb245cc2fcbdc80a06dc8c6c18d5bbc02 100644 --- a/src/components/createCom/XhInput.vue +++ b/src/components/createCom/XhInput.vue @@ -1,27 +1,31 @@ <template> <view> - <u-input v-model="item.fieldsValue" /> + <u-input v-model="dataValue" @input="valueChange" :type="type" /> </view> </template> <script> + import stringMixin from './stringMixin' export default { - name: 'xhInput', - props: { - item: { - type: Object, - default () { - return null - } - }, - }, + name: 'XhInput', // 新建 input + components: {}, + mixins: [stringMixin], + props: {}, data() { - return { - value: '', - type: 'text', - border: true, + return {} + }, + computed: { + type() { + if (this.item && this.item.fieldsType == 'password') { + return this.item.fieldsType + } else { + return 'text' + } } - } + }, + watch: {}, + mounted() {}, + methods: {} } </script> diff --git a/src/components/createCom/stringMixin.js b/src/components/createCom/stringMixin.js new file mode 100644 index 0000000000000000000000000000000000000000..3721ebef0413f1718c7b7f0e65ece67b0c0ce2e7 --- /dev/null +++ b/src/components/createCom/stringMixin.js @@ -0,0 +1,46 @@ +/** 自定义组件 å…±åŒé€»è¾‘ */ +export default { + data() { + return { + dataValue: '' + } + }, + watch: { + value: function(val) { + this.dataValue = val + } + }, + props: { + value: { + type: [String, Number], + default: '' + }, + /** 索引值 ç”¨äºŽæ›´æ–°æ•°æ® */ + itemIndex:Number, + groupIndex:Number, + /** åŒ…å«æ•°æ®æº */ + item: Object, + disabled: { + type: Boolean, + default: false + } + }, + + mounted() { + /** å¦‚æžœæœ‰å€¼ä»¥ä¼ å…¥å€¼ä¸ºä¸» å¦‚æžœæ— å€¼ 已默认值为主 */ + this.dataValue = this.value + }, + + methods: { + // 输入的值 + valueChange(val) { + const data = { + groupIndex: this.groupIndex,// 左侧èœå•ä¸‹æ ‡ + itemIndex:this.itemIndex,//å³ä¾§æŸä¸€é¡¹ä¸‹æ ‡ + value: val + } + this.$emit('value-change', data) + } + } + +} diff --git a/src/pages/order/complete.vue b/src/pages/order/complete.vue index 1aa6795e495b6248cb725f563b590007c6c2ee09..41ceb604f0dad4563fe9b035ac50652bcc1d6bfd 100644 --- a/src/pages/order/complete.vue +++ b/src/pages/order/complete.vue @@ -18,16 +18,22 @@ @scroll="rightScroll"> <u-form :model="form" ref="uForm"> - <template v-for="(groupItem,index) in groupList"> - <view class="class-item" :key="index"> + <template v-for="(groupItem,groupIndex) in groupList"> + <view class="class-item" :key="groupIndex"> <view class="title">{{groupItem.groupName}}</view> <view class="class-bd"> - <u-form-item :label-width="0" :required="groupItem.required" - v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"> - <view>{{item.fieldsTitle}}</view> + <u-form-item :required="groupItem.required" + v-for="(item,itemIndex) in groupItem.item" :key="itemIndex" + :prop="item.fieldsName"> + <view @click="nextStep(item)">{{item.fieldsTitle}}</view> <template v-if="item.fieldsType"> - <xh-input v-if="item.fieldsType==='input'" v-model="form.fieldsName"></xh-input> - + <xh-input v-if="item.fieldsType==='input'" + :groupIndex="groupIndex" + :itemIndex="itemIndex" + :item="item" + @value-change="fieldValueChange" + ></xh-input> + </template> </u-form-item> </view> @@ -36,6 +42,7 @@ </u-form> </scroll-view> </view> + <view @click="nextStep">下一æ¥</view> </view> </template> <script> @@ -50,12 +57,28 @@ menuHeight: 0, // 左边èœå•的高度 menuItemHeight: 0, // 左边èœå•item的高度 itemId: '', // æ ç›®å³è¾¹scroll-view用于滚动的id - groupList: classifyData, + groupList: classifyData, // 基本信æ¯ã€å®‰è£… ã€å‹˜å¯Ÿï¼ˆå…¶ä¸ä¸€é¡¹è¡¨å•æ•°æ®ï¼‰ menuItemPos: [], arr: [], scrollRightTop: 0, // å³è¾¹æ ç›®scroll-view的滚动æ¡é«˜åº¦ timer: null, // 定时器 - + form: { // ä¸€ç»´è¡¨å• + name:'name' + }, + rules: { + name: [{ + required: true, + min:10, + message: 'å§“åä¸èƒ½å°‘于5个å—', + // å¯ä»¥å•ä¸ªæˆ–è€…åŒæ—¶å†™ä¸¤ä¸ªè§¦å‘éªŒè¯æ–¹å¼ + trigger: ['change', 'blur'], + }], + intro: [{ + min: 5, + message: '简介ä¸èƒ½å°‘于5个å—', + trigger: 'change' + }] + } } }, components: { @@ -69,12 +92,32 @@ }, onReady() { + this.$refs.uForm.setRules(this.rules); // å¯¼èˆªæ æ»šåŠ¨åˆ‡æ¢ this.getMenuItemTop() }, + updated(){ + console.log(this.form.name,'form.name') + }, methods: { - - + // å—æ®µçš„值更新 + fieldValueChange(data) { + // data.groupIndex data.itemIndexå€¼ä¸‹æ ‡ data.value //值 + console.log(data,'data') + const groupItem = this.groupList[data.groupIndex] + let innerItem + if(groupItem.item){ + innerItem = groupItem.item[data.itemIndex] + } + console.log(innerItem,'innerItem') + this.form[innerItem.fieldsName] = data.value + console.log(this.form,'this.form') + }, + nextStep(item){ + // ä¸‹ä¸€æ¥ + console.log(item,'item') + }, + // ------------------------- ä»¥ä¸‹æ–¹æ³•ä¸ºå±•ç¤ºæ»šåŠ¨åˆ‡æ¢ ------------------------- // 点击左边的æ ç›®åˆ‡æ¢ async swichMenu(index) { @@ -186,6 +229,15 @@ </script> <style lang="scss" scoped> + // ---------------------------- è¡¨å•æ ·å¼begin ---------------------------- + /deep/ .u-form-item{ + .u-form-item__message{ + padding-left: 0!important; + } + } + // ---------------------------- è¡¨å•æ ·å¼end ---------------------------- + + .u-wrap { height: calc(100vh); /* #ifdef H5 */